/* L'accueil (vague 7, lots R1 puis R2a) : ce qui ne sert qu'à lui. L'en-tête,
   le pied, les jetons, les badges et les cartes-liens sont dans coque.css.

   Lot R2a : le premier écran montre l'APP. Un téléphone (l'écran d'accueil de
   l'app, dans la langue de la page) à côté de l'accroche sur ordinateur, sous
   elle sur téléphone, et le bloc d'installation — les badges, plus un QR sur un
   grand écran — dans la même vue. La photo des animaux, qui prenait ce premier
   écran, est descendue au bas de la page, juste avant l'appel final. */

/* ---- Le premier écran ----------------------------------------------------- */
.hero { padding: 22px 0 8px; scroll-margin-top: 8px; }
.hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
.hero .pouls { width: 56px; }
.hero h1 {
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; margin: 0 0 12px;
  color: var(--vert); max-width: 640px; text-wrap: balance;
}
.hero p.accroche { font-size: 18px; line-height: 1.5; color: var(--acier); margin: 0 0 18px; max-width: 600px; }
.hero .badges-store { margin: 0 0 6px; }
.hero-visuel { justify-self: center; width: 100%; display: flex; justify-content: center; }
.preuves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 22px;
}
.preuve {
  background: var(--surface); border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 1px 5px rgba(14, 60, 50, .09);
}
.preuve b { display: block; font-size: 16px; margin-bottom: 3px; }
.preuve span { color: var(--acier); font-size: 14.5px; }
@media (prefers-color-scheme: dark) {
  .preuve { box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
}

/* Ordinateur : l'accroche et l'installation à gauche, le téléphone à droite, le
   tout dans la hauteur d'un écran. */
@media (min-width: 900px) {
  .hero { padding: 34px 0 10px; }
  .hero-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; }
  .hero p.accroche { font-size: 20px; }
}
/* Téléphone : le téléphone de l'app est montré COUPÉ en bas — un coup d'œil sur
   l'écran d'accueil (la fiche, la prise du jour, les prochains rappels), pas les
   580 px d'un appareil entier : c'est ce qui le garde dans le premier écran à
   360×740, sous l'accroche et les badges. Les planches, plus bas, le montrent
   en entier. */
@media (max-width: 899px) {
  .hero .telephone {
    width: min(236px, 64vw); max-height: 330px; border-bottom: 0;
    border-radius: 32px 32px 0 0; box-shadow: none;
  }
}

/* Petit téléphone (critique R2, 🟡-1) : à 360×640 le téléphone de l'app ne montrait
   que 157 px de son écran (122 px en néerlandais, titre sur trois lignes). On
   resserre les marges et l'interligne du héros — AUCUN texte, AUCUN badge retiré,
   le corps de l'accroche ne descend pas sous 16 px — pour que l'écran de l'app
   y entre davantage. Mesuré neuf langues, 360×640 : voir le compte rendu. */
@media (max-width: 480px) {
  .hero { padding-top: 10px; }
  .hero-grille { gap: 8px; }
  .hero .pouls { margin-bottom: 8px; }
  .hero h1 { font-size: 27px; line-height: 1.1; margin-bottom: 8px; }
  .hero p.accroche { font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
  .hero .telephone { margin-top: 0; }
}

/* ---- Le bloc d'installation (décision D9) ----------------------------------
   Sans JavaScript : les deux badges, le lien vers la webapp, et le QR sur un grand
   écran (CSS seulement). Avec installer.js, <html data-plateforme> vaut ios,
   android ou autre : le badge de la plateforme passe en premier (l'ordre se règle
   ici, le script ne touche à aucun lien), et le QR disparaît sur un téléphone — il
   n'a pas de raison d'être sur l'appareil qu'il vise. */
.installation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.installation .boutons { flex: 0 1 auto; min-width: 0; }
.installation .qr { display: none; margin: 0; align-items: center; gap: 14px; }
.installation .qr img {
  display: block; width: 132px; height: 132px; border-radius: 12px;
  border: 1px solid var(--bord); background: #fff;
}
.installation .qr figcaption { max-width: 150px; color: var(--acier); font-size: 14.5px; line-height: 1.4; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .installation .qr { display: flex; }
}
html[data-plateforme="ios"] .installation .qr,
html[data-plateforme="android"] .installation .qr { display: none; }
html[data-plateforme="android"] .installation [data-mesure-evenement="badge-play"] { order: -1; }
html[data-plateforme="ios"] .installation [data-mesure-evenement="badge-appstore"] { order: -1; }
/* Sur un téléphone étroit les deux badges se partagent la ligne : ils tiennent
   côte à côte, au lieu de prendre 120 px de haut sur deux rangées. */
@media (max-width: 480px) {
  .installation .boutons { flex: 1 1 100%; }
  .installation .badges-store { flex-wrap: nowrap; gap: 8px; }
  .installation .badges-store a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 8px; gap: 6px; }
  .installation .badges-store b { font-size: 15px; }
  .installation .badges-store span span { font-size: 10.5px; }
  .installation .badges-store svg { width: 15px; height: 15px; flex: none; }
}

section { padding: 34px 0; }
h2 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; }
.sous-titre { color: var(--acier); margin: 0 0 24px; }

/* ---- Les cartes de scénario : six situations (le titre est la question que le
   maître se pose, la ligne y répond), puis les guides en pleine largeur. Trois
   par rangée sur ordinateur, deux sur tablette, une sur téléphone. La pastille
   « Premium » vient APRÈS la ligne dans le HTML (la garde de cohérence lit le
   bloc voisin) ; elle se pose en haut à droite de la carte, et le titre lui
   laisse la place. */
.grille-fonctions.accueil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.carte-fonction.large { grid-column: 1 / -1; }
.carte-fonction.scenario { position: relative; display: flex; flex-direction: column; gap: 6px; }
.carte-fonction.scenario h3 { line-height: 1.3; }
.carte-fonction.scenario p { flex: 1 1 auto; }
.carte-fonction.scenario::after {
  content: "→" / ""; padding-top: 4px; color: var(--vert); font-weight: 600;
}
.carte-fonction.scenario:has(.pastille-premium) h3 { padding-right: 76px; }
.carte-fonction .pastille-premium { position: absolute; top: 16px; right: 16px; }
@media (max-width: 899px) { .grille-fonctions.accueil { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grille-fonctions.accueil { grid-template-columns: 1fr; } }

/* La pastille Premium : la même sur une carte et sur la carte des tarifs. Corail
   doux et texte `--corail-texte` (5,5:1 sur la carte claire) : le corail qui
   ÉCRIT, pas le corail du décor. */
.pastille-premium {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  background: var(--corail-doux); color: var(--corail-texte);
  border: 1px solid var(--corail-doux); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
}

/* ---- La bande « Voir l'app » : le film de la visite (déjà publié) puis quatre
   planches de la 1.6.0, de même gabarit. Sur ordinateur les cinq tiennent côte
   à côte ; sur téléphone la bande défile à l'horizontale (région focalisable,
   étiquetée : elle se parcourt au clavier). Le film n'est plus dans un lien :
   ses contrôles se servent. */
.bande-app {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--acier) transparent;
}
.bande-app:focus-visible { outline-offset: 2px; border-radius: 12px; }
.bande-app > * { flex: none; width: 176px; margin: 0; scroll-snap-align: start; }
.bande-app img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--surface);
}
.affiche-video {
  aspect-ratio: 720 / 1564; border-radius: 12px; overflow: hidden;
  background: var(--encre);
}
.affiche-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sous-bande { margin: 4px 0 0; color: var(--acier); font-size: 15px; }
.sous-bande a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- La souveraineté en une carte : la page fait la démonstration. */
.carte-souverainete {
  display: block; box-sizing: border-box; background: var(--surface);
  border-left: 3px solid var(--vert); border-radius: 10px; padding: 16px 18px;
  box-shadow: var(--ombre); text-decoration: none; max-width: 640px;
}
.carte-souverainete strong { color: var(--encre); }
.carte-souverainete p { margin: 4px 0 8px; color: var(--acier); font-size: 15.5px; }
/* 44 px de haut minimum : la cible tactile que l'app tient déjà
   (docs/tests-accessibilite.md), le site n'a pas à faire moins. */
.voir {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  min-height: 44px; color: var(--vert); font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.voir:hover { text-decoration: underline; }

/* ---- Tarifs en deux cartes de trois lignes : qui compare clique. */
.tarifs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px; align-items: stretch;
}
.tarif {
  background: var(--surface); border: 1.5px solid var(--bord); border-radius: 16px;
  padding: 22px; box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.tarif.avant { border-color: var(--vert); }
.tarif .nom {
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acier);
}
.tarifs.courts .tarif { text-decoration: none; }
.tarifs.courts .prix-court {
  display: block; font-size: 26px; font-weight: 700; margin: 6px 0 4px; color: var(--encre);
}
.tarifs.courts p { margin: 0; color: var(--acier); font-size: 15.5px; }
/* Les deux autres prix du Premium (l'annuel, l'offre de lancement à vie) : des
   lignes, pas des cartes — ce sont les mêmes que le tableau des tarifs, lus du
   même texte. */
.tarifs.courts .prix-autres {
  list-style: none; margin: 0 0 8px; padding: 0; color: var(--acier); font-size: 15.5px;
  order: 1; /* au-dessus de la ligne qui décrit l'offre, dessous dans le HTML */
}
.tarifs.courts .tarif p { order: 2; }
.tarifs.courts .tarif > :not(p, ul) { order: 0; }
.tarifs.courts .prix-autres li { margin: 0 0 2px; }
.tarif .nom .pastille-premium { font-size: 13px; padding: 3px 12px; }

/* ---- La FAQ : des <details> natifs, qui s'ouvrent sans script. */
.faq details {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 12px;
  padding: 8px 18px; margin-bottom: 10px; box-shadow: var(--ombre);
}
.faq summary { font-weight: 600; cursor: pointer; padding: 6px 0; min-height: 44px; display: flex; align-items: center; }
.faq p { color: var(--acier); margin: 4px 0 10px; font-size: 16px; }

/* ---- Le bandeau de fin : un aplat vert, l'appel à l'installation dedans.
   Le texte posé SUR le vert est `--sur-vert` (celui de l'app) : le blanc en
   dur tombait à 2,9:1 sur le vert du thème sombre. Le focus y prend la même
   couleur — le vert ne ressortirait pas sur lui-même. */
/* La photo des animaux, descendue du premier écran : un bandeau qui fond vers le
   fond de la page en haut et vers le vert de l'appel final en bas — sans texte
   posé sur ses pixels (le contraste d'un titre sur une photo varie de 1,3 à
   4,4:1 selon l'image). Chargée à la demande : elle n'est pas dans le premier
   écran. */
.bandeau { position: relative; margin-top: 18px; }
.bandeau .photo {
  display: block; width: 100%; height: clamp(190px, 24vw, 320px);
  object-fit: cover; object-position: 50% 38%; background: var(--vert);
}
.bandeau .voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--fond) 0%, transparent 38%, transparent 62%, var(--vert) 100%);
}
section.rappel-attente {
  background: var(--vert); padding: 34px 0; margin-top: 0;
  --focus: var(--sur-vert); color: var(--sur-vert);
}
section.rappel-attente h2 { margin: 0 0 8px; color: var(--sur-vert); }
section.rappel-attente .sous-titre { margin-bottom: 18px; color: var(--sur-vert); }
section.rappel-attente .pouls { border-top-color: var(--sur-vert); opacity: .7; }
section.rappel-attente .ouvrir-webapp a { color: var(--sur-vert); text-decoration: underline; }

/* ---- Le téléphone des captures et du film. `margin-inline: auto` et PAS
   seulement `justify-self` : ce dernier ne centre un bloc que dans une grille
   ou un flex — ou, depuis peu, en disposition de bloc sur Chromium seulement.
   Les captures vivent dans un <figure>, donc dans un bloc : sur Safari iOS
   elles se collaient à gauche (retour du 08/2026). */
.telephone {
  justify-self: center; margin-inline: auto; width: min(250px, 70vw);
  border-radius: 34px; border: 10px solid var(--encre); box-shadow: var(--ombre);
  overflow: hidden;
}
.telephone img { display: block; width: 100%; height: auto; }
.telephone.petit { width: min(220px, 62vw); border-width: 8px; border-radius: 28px; }
.et-praline { color: var(--acier); font-weight: 400; font-size: .72em; }
@media (max-width: 760px) { .telephone { margin-top: 8px; } }