/* ============================================== La page de presentation
 *
 * Couleurs : celles de l'outil (`registre.css`) — pierre, encre, foret. La
 * mer n'entre qu'une fois, en bande pleine largeur, la ou l'ile se montre.
 *
 * La page ne s'empile pas en blocs : elle ALTERNE, et chaque bloc est bati
 * autour de son centre — l'eventail dans le hero, la fleche entre les deux
 * iles, le texte entre les deux telephones. Aucun filet de separation,
 * aucune carte : c'est le changement de fond qui coupe.
 *
 * Pas de section « avis » : on n'en a pas, et en inventer serait un faux.
 */

@font-face { font-family: "Nunito"; src: url("fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --pierre: #ebe8e1;
  --carte: #ffffff;
  --encre: #1c1712;
  --encre-2: #58524a;
  --encre-3: #6f6960;
  --foret: #3f6b3a;
  --sous-bois: #2f4f2a;
  --trait-fort: #c4beb1;

  --sable: #d2cc6d;
  --craie: #f6f1e2;

  /* ⚠ ECRITE PAR `outils/images_accueil.py`, ne pas la modifier a la main :
   * le script y ramene toute la mer des rendus (`MER_PLATE`) puis repose la
   * valeur ici. C'est ce qui met le texte du milieu sur exactement le meme
   * bleu que les iles, et ce qui autorise a les recadrer — leur bord se
   * confond desormais avec le fond ou qu'on coupe. */
  --mer-plate: #2d94cc;

  --titre: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --corps: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --large: 72rem;
}

* { box-sizing: border-box; }
/* La couleur du pied : c'est elle qu'on voit sous la page sur un grand ecran. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--sous-bois); }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.62;
  background: var(--pierre);
  color: var(--encre);
}

img { max-width: 100%; height: auto; display: block; }
.dedans { max-width: var(--large); margin: 0 auto; padding: 0 1.5rem; }

a:focus-visible { outline: 3px solid var(--foret); outline-offset: 3px; }

h1, h2 { font-family: var(--titre); font-weight: 700; line-height: 1.04; margin: 0 0 1rem; }
h1 { font-size: clamp(2.7rem, 6vw, 4.4rem); max-width: 14ch; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }

/* ---------------------------------------------------------------- enseigne */

.enseigne .dedans {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.3rem;
}
.marque { margin: 0; font-family: var(--titre); font-size: 1.4rem; font-weight: 700; }
.enseigne a { color: var(--encre-2); font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
.enseigne a:hover { color: var(--foret); border-bottom-color: var(--foret); }

/* ------------------------------------------------------------------ boutons */

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; }
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.7rem;
  font: 700 1.05rem/1 var(--corps);
  border-radius: 999px;   /* rond, pas carre : c'est ce qui casse la grille */
  text-decoration: none;
  border: 2px solid transparent;
  /* Indispensable depuis que « Installer » est un `button` : sans fond declare,
   * il prend le gris du navigateur, et le blanc du pied devient illisible. La
   * fonte, elle, est deja posee par le raccourci `font` ci-dessus. */
  background: transparent;
  cursor: pointer;
}
.bouton--foret { color: #fff; background: var(--foret); border-color: var(--foret); box-shadow: 0 3px 0 var(--sous-bois); }
.bouton--creux { color: var(--encre); background: var(--carte); border-color: var(--trait-fort); }
.bouton--craie { color: var(--sous-bois); background: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.bouton--craie-creux { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.bouton:hover { filter: brightness(1.05); }

/* -------------------------------------------------------------- le telephone
 *
 * Le cadre dessine de l'appli (`.appareil` du registre) : elle est faite pour
 * 390 px, la montrer autrement serait mentir sur sa forme. Les captures font
 * 780 px de large — le double — et sont encodees en qualite 92 : en dessous,
 * le WebP mange les contours du texte de l'interface.
 */

.tel {
  border: 7px solid #2a231a;
  border-radius: 26px;
  background: var(--carte);
  box-shadow: 0 18px 40px rgba(28, 23, 18, 0.26);
}

/* -------------------------------------------------------------------- hero */

.hero { padding: 3rem 0 4.4rem; }
.hero .dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; }
.hero p { margin: 0 0 2rem; max-width: 44ch; font-size: 1.15rem; color: var(--encre-2); }
.hero__reserve { margin: 1.8rem 0 0 !important; font-size: 0.93rem; line-height: 1.5; color: var(--encre-3); }

/* L'eventail. Trois ecrans qui se chevauchent et s'inclinent : c'est le geste
 * qui enleve la grille au hero, et il montre l'appli avant tout defilement. */
.eventail { display: flex; justify-content: center; align-items: center; }
.eventail .tel { width: 15rem; }
.eventail .tel:first-child  { transform: rotate(-7deg) translateY(1.6rem); z-index: 1; }
.eventail .tel:nth-child(2) { transform: translateY(-1rem); z-index: 3; margin: 0 -2.6rem; }
.eventail .tel:last-child   { transform: rotate(7deg) translateY(1.6rem); z-index: 1; }

/* ------------------------------------------------------------ la bande mer
 *
 * Un seul aplat, celui de la mer des rendus : ni degrade, ni cadre, ni ombre.
 * Les deux iles sont recadrees sur la MEME boite, donc a la meme echelle dans
 * le fichier — c'est la page qui rend celle de gauche plus petite, pour dire
 * que l'ile s'agrandit. Sans legende : la fleche dit deja ce qui se passe.
 */

.mer { background: var(--mer-plate); color: var(--craie); padding: 7rem 0; }
.mer .dedans {
  /* Pleine largeur pour que les iles soient les plus grandes possible. La
   * hauteur de la bande vient de la COLONNE DU MILIEU, pas de la marge : a
   * 16 rem de marge la bande faisait bien +50 %, mais de vide, et les deux
   * iles y flottaient. Deborder les iles hors de la page a aussi ete essaye —
   * une ile coupee se lit comme une erreur, pas comme un cadrage. */
  max-width: none;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr minmax(15rem, 17rem) 1fr;
  gap: 0;
  align-items: center;
}

.etape { margin: 0; }
/* `transform` ne change pas la hauteur de la bande : c'est la marge de la
 * section qui la fixe, le decalage ne fait que casser l'alignement. */
.etape:first-of-type { transform: translateY(-3rem); }
.etape:last-of-type { transform: translateY(3rem); }
/* Deja cadrees sur l'ile par `outils/images_accueil.py` : rien a rogner ici. */
.etape img { width: 100%; }
/* L'ile du premier jour est montree plus petite que l'autre — meme rendu, mais
 * ce qu'on vend est justement qu'elle grandit. Possible seulement parce que la
 * mer est a plat : a n'importe quelle taille, son bord tombe sur le fond. */
.etape--petite img { width: 76%; margin: 0 auto; }

.fleche { text-align: center; }
.fleche p { margin: 0 0 2.2rem; font-size: 1.32rem; color: rgba(246, 241, 226, 0.92); }
.fleche svg { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto 2.2rem; }
.fleche__coup {
  margin: 0;
  font-family: var(--titre);
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  line-height: 1.14;
  font-weight: 700;
  color: #fff;
}
.fleche__coup em { font-style: normal; color: var(--sable); }

/* --------------------------------------------------------- ce que ca fait
 *
 * Un seul bloc pour la liste ET les rituels : ce sont deux faces du meme
 * outil, les separer en deux rangees les faisait passer pour deux produits.
 * Un ecran de chaque cote, le propos au milieu.
 *
 * Les deux ecrans ne sont NI a la meme inclinaison, NI a la meme hauteur : a
 * angles egaux et poses sur la meme ligne, la section se lisait comme un
 * miroir, ce qui est le contraire de l'effet cherche.
 */

.duo { background: var(--carte); padding: 4.4rem 0 5rem; }
.duo .dedans {
  max-width: 84rem;
  padding: 0 2.5rem;
}

/* Le propos passe au-dessus, les deux ecrans dessous. En trois colonnes, les
 * etiquettes n'avaient qu'une gouttiere de quelques rem : elles retombaient
 * sur le texte des qu'on les grossissait. Ici chaque ecran a une demi-largeur
 * de page pour lui, donc de la vraie place a l'exterieur. */
.duo__dit { max-width: 46rem; margin: 0 auto 3.4rem; }
.duo__ecrans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.duo__dit { text-align: center; }
.duo h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.duo p { margin: 0 0 1rem; color: var(--encre-2); }
.duo p:last-child { margin-bottom: 0; }

/* Le conteneur laisse deborder les etiquettes dans les gouttieres. */
.ecran { position: relative; width: 20rem; }
.ecran .tel { width: 100%; }
/* Les deux ecrans se rapprochent du milieu : tout ce qui reste vers
 * l'exterieur est pour les etiquettes. Angles et hauteurs differents, sinon
 * la section se lit comme un miroir. */
.ecran--gauche { justify-self: end; transform: rotate(-5deg) translateY(-1.6rem); }
.ecran--droite { justify-self: start; transform: rotate(9deg) translateY(2.4rem); }

/* Les etiquettes. Elles nomment ce qu'on voit a l'ecran, avec une fleche
 * courte qui vise l'element — pas une legende posee a cote. */
.note {
  position: absolute;
  /* Au-dessus de l'ecran : sans ca une etiquette qui mord sur le telephone
   * passe dessous et disparait. */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  max-width: 13rem;
  font: 700 1.05rem/1.25 var(--corps);
  color: var(--encre);
}
.note svg { flex: none; width: 3.2rem; height: auto; }
.note--droite { flex-direction: row-reverse; }   /* etiquette a gauche de sa fleche */

/* ------------------------------------------------------------ l'appel final */

.final { background: var(--sous-bois); color: #fff; padding: 3.4rem 0 3rem; }
.final .dedans { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2.4rem; align-items: center; }
.final h2 { max-width: 18ch; }
.final img { width: 100%; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)); }
.final .actions { margin-top: 1.6rem; }

/* --------------------------------------------------------------- telephone */

@media (max-width: 980px) {
  /* Les deux ecrans passent l'un sous l'autre : cote a cote ils font 40 rem,
   * ils debordaient de la page. */
  .duo__ecrans { grid-template-columns: 1fr; gap: 2.6rem; justify-items: center; }
  .duo__dit { margin-bottom: 2.6rem; }
  .ecran { width: 100%; max-width: 17rem; }
  .ecran--gauche, .ecran--droite { justify-self: center; }
  /* Les etiquettes visent des points a quelques dizaines de pixels pres : sous
   * cette largeur elles se chevauchent et pointent a cote. On les retire
   * plutot que de les faire mentir. */
  .note { display: none; }
}

@media (max-width: 880px) {
  body { font-size: 16px; }
  .hero { padding: 1.8rem 0 2.6rem; }
  .hero .dedans, .final .dedans { grid-template-columns: 1fr; gap: 2rem; }
  .hero p { font-size: 1.06rem; }
  .actions .bouton { flex: 1 1 100%; }

  /* L'eventail retombe a un seul ecran : trois telephones a 390 px ne sont
   * plus trois captures, juste une frise illisible. */
  .eventail .tel { width: 15rem; transform: none; margin: 0; }
  .eventail .tel:first-child, .eventail .tel:last-child { display: none; }

  /* Les trois colonnes s'empilent, et la fleche pivote d'un quart de tour :
   * elle doit pointer vers l'ile suivante, qui est maintenant dessous. */
  .mer { padding: 3.4rem 0; }
  .mer .dedans { grid-template-columns: 1fr; gap: 1.6rem; }
  .fleche svg { max-width: 7rem; transform: rotate(90deg); }

  .duo { padding: 2.8rem 0 3rem; }
  .ecran--gauche, .ecran--droite { transform: none; }

  .final img { max-width: 9rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------- le bouton installer
 *
 * Il n'a pas d'URL : l'installation passe par le navigateur, et quand celui-ci
 * ne propose rien, le bouton affiche les instructions manuelles sous lui. D'ou
 * l'enveloppe, qui tient les deux.
 */

.acte { display: inline-flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }

.installer-note {
  max-width: 22rem;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--encre-3);
}
.installer-note--clair { color: rgba(255, 255, 255, 0.78); }
.installer-note[hidden] { display: none; }

@media (max-width: 880px) {
  .acte { flex: 1 1 100%; }
}