/* ─────────────────────────────────────────────────────────────
   PERIFY — accueil.css, la page d'accueil (refonte A, 30/10/2026)
   Chargée après site.css (jetons, en-tête, boutons, sections, questions, pied) et avant
   eventail.css (les présentoirs). Reprend la maquette A validée par Valentin, avec deux
   corrections :
   1. ordinateur : le premier écran montre le titre, la phrase, le bouton ET tout le visuel (le
      téléphone, QR compris, et ses quatre morceaux), y compris dans une fenêtre réelle de 650 à
      950 px de haut — héros resserré, téléphone dont la largeur suit la hauteur de la fenêtre,
      morceaux proportionnels à lui (§ 2) ;
   2. tablette et téléphone (moins de 64rem) : plus aucun morceau ni légende sur les deux cartes du
      Wallet. La roue et le cadeau se posent au pied du téléphone (sur la zone du QR), la barre de
      tampons dessous, entière (§ 10).
   Les morceaux sont posés d'emblée (l'entrée animée de la maquette est retirée : à la capture,
   le dernier morceau pouvait rester invisible ; rien ne doit dépendre d'une animation).

   Ordre de la page : héros + carte → « Ça marche avec » → présentoirs → vidéo → parcours →
   jeux (la bande teintée) → ce que vous pilotez → l'essai et la personne → questions.
   ───────────────────────────────────────────────────────────── */

/* ── 1. le héros : un seul axe ───────────────────────────── */
.heros{padding-top:var(--space-xl)}
.heros-texte{display:grid;justify-items:center;text-align:center}
.heros h1{max-width:22ch;font-size:var(--text-display);line-height:1.06}
.heros-phrase{margin-top:var(--space-md);max-width:40rem;font-size:var(--text-lead);color:var(--color-ink-2)}
.heros .btn{margin-top:28px}
.heros-note{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}

/* ── 2. la carte et ses morceaux ─────────────────────────────
   Ordinateur (64rem et plus) : le téléphone (--tel de large) au centre, les quatre morceaux autour.
   TOUT est proportionnel à --tel : la taille des morceaux et leur place (calc(50% ± k × --tel)),
   avec les rapports de la maquette validée (téléphone de 272 px : tampons 330 px posés 290 px à
   gauche, roue 160 px, cadeau 220 px, avis 320 px). Quand le téléphone rapetisse, la composition
   rapetisse avec lui, sans changer de dessin. Les hauteurs sont en % du téléphone. Les légendes en
   nuit (taille de texte fixe) sont placées depuis les bords du TÉLÉPHONE : jamais dessus.
   La largeur du téléphone suit la HAUTEUR de la fenêtre (il est 1,89 fois plus haut que large) :
   - fenêtre de 950 px de haut ou plus : héros normal, --tel = (100vh − 440 px) × 0,53 ;
   - fenêtre moins haute (la plupart des ordinateurs : un écran « 1440 × 900 » laisse ~790 px au
     navigateur, un portable 1366 × 768 ~657 px) : héros resserré (titre un peu plus petit, la note
     à côté du bouton, marges de 16 px) et --tel = (100vh − 360 px) × 0,53.
   Le téléphone entier (QR compris) et ses quatre morceaux tiennent dans le premier écran dès
   ~650 px de haut (mesuré : 1440 × 900, 1440 × 789, 1536 × 730, 1280 × 720, 1366 × 657, 1024 × 768).
   En dessous, le téléphone garde 150 px de large au minimum et son bas passe sous la ligne. */
.scene{margin-top:var(--space-xl);padding-inline:var(--gutter)}
.scene-plateau{--tel:272px;position:relative;max-width:1040px;margin-inline:auto}
@media (min-width:64rem){
  .heros{padding-top:var(--space-lg)}
  .heros .btn{margin-top:var(--space-lg)}
  .scene{margin-top:var(--space-lg)}
  .scene-plateau{--tel:clamp(200px,calc((100vh - 440px) * .53),272px)}
}
/* ordinateur peu haut (hauteurs en px : elles se lisent comme la fenêtre) */
@media (min-width:64rem) and (max-height:949px){
  .heros{padding-top:var(--space-md)}
  /* le titre et la phrase prennent chacun toute une ligne (flex-basis 100 %, sans max-width : sinon la
     phrase remonte à côté du bouton) ; la phrase garde ses 40rem de large par ses marges intérieures ;
     le bouton et la note se partagent la ligne du dessous, centrés */
  .heros-texte{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:var(--space-lg)}
  .heros h1{flex-basis:100%;max-width:none;font-size:clamp(2.25rem,1.6vw + 1.3rem,3rem)}
  .heros-phrase{flex-basis:100%;max-width:none;padding-inline:max(0px,calc((100% - 40rem) / 2));margin-top:var(--space-sm)}
  .heros .btn,.heros-note{margin-top:var(--space-md)}
  .scene{margin-top:var(--space-md)}
  .scene-plateau{--tel:clamp(150px,calc((100vh - 360px) * .53),272px)}
}
.scene-tel{width:var(--tel);margin-inline:auto;filter:drop-shadow(0 28px 36px var(--color-ombre-2))}
.morceau{position:absolute;z-index:var(--z-raised);background:var(--color-paper-3);border:6px solid var(--color-anneau);border-radius:var(--radius-card);
  box-shadow:0 18px 40px -18px var(--color-ombre)}
.morceau img{width:100%;border-radius:calc(var(--radius-card) - 6px)}
.morceau-tampons{width:calc(var(--tel) * 1.213);left:calc(50% - var(--tel) * 1.566);top:12%}
.morceau-cadeau{width:calc(var(--tel) * .809);left:calc(50% + var(--tel) * .368);top:2%;border-color:var(--color-anneau-2)}
.morceau-roue{width:calc(var(--tel) * .588);left:calc(50% - var(--tel) * 1.022);top:46%;border-radius:50%;border-color:var(--color-anneau-2)}
.morceau-roue img{border-radius:50%}
.morceau-avis{width:calc(var(--tel) * 1.176);left:calc(50% + var(--tel) * .441);top:42%}
/* les courtes légendes en nuit, accrochées à leur morceau mais placées hors du téléphone :
   tampons, son bord droit 18 px avant le bord gauche du téléphone (le morceau déborde de 0,147 × --tel
   sur le téléphone) ; avis, son bord gauche 0,25 × --tel après l'endroit où le morceau quitte le
   téléphone ; roue, à gauche de la roue. */
.etiquette{position:absolute;top:calc(100% + var(--space-sm));padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);
  background:var(--color-ink);color:var(--color-on-nuit);font-size:var(--text-sm);font-weight:600;line-height:1.3;white-space:nowrap;
  box-shadow:0 8px 18px -8px var(--color-ombre)}
.morceau-tampons .etiquette{right:calc(var(--tel) * .147 + var(--space-sm))}
.morceau-avis .etiquette{left:calc(var(--tel) * .25)}
.morceau-roue .etiquette{top:50%;right:calc(100% + var(--space-sm));transform:translateY(-50%)}
.scene-legende{margin-top:var(--space-lg);text-align:center;font-size:var(--text-sm);color:var(--color-muted)}

/* ── 3. ça marche avec : les noms, entre deux filets ─────── */
.avec{padding-top:var(--space-xl)}
.avec-cadre{display:grid;justify-items:center;gap:var(--space-lg);padding-block:var(--space-xl);border-block:1px solid var(--color-rule)}
.avec h2{font-size:var(--text-title);line-height:1.3;color:var(--color-ink-2);text-align:center}
.avec-liste{display:flex;flex-wrap:wrap;justify-content:center;row-gap:var(--space-sm)}
.avec-liste li{padding-inline:var(--space-lg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--color-ink);white-space:nowrap}
.avec-liste li + li{border-left:1px solid var(--color-rule-2)}

/* ── 4. les présentoirs (l'éventail : eventail.css) ───────── */
.presentoirs{padding-bottom:0}
.presentoirs .section-tete{margin-bottom:var(--space-xl)}
.presentoir-scene{max-width:1104px;margin-inline:auto}

/* ── 5. la vidéo ─────────────────────────────────────────── */
.film{text-align:center}
.film h2{margin-bottom:var(--space-xl)}
.film-cadre{max-width:1040px;margin-inline:auto}
.film video{width:100%;border-radius:var(--radius-media);border:1px solid var(--color-rule);background:var(--color-paper-2)}
.film-vertical{display:none}

/* ── 6. le parcours ──────────────────────────────────────── */
.parcours{padding-top:0}
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-columns);counter-reset:etape}
.etape{min-width:0;counter-increment:etape}
.etape img{width:100%;aspect-ratio:4 / 3}
/* le dessin « Il scanne » coupe la main au bord du cadre : un fondu léger plutôt qu'un trait net */
.etape-scan img{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.etape h3{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg)}
.etape h3::before{content:counter(etape);display:inline-grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:2px solid var(--color-ink);
  border-radius:50%;font-size:var(--text-md);line-height:1}
.etape p{margin-top:var(--space-xs);color:var(--color-ink-2)}

/* ── 7. les jeux : la bande teintée ──────────────────────── */
.jeux-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-columns);text-align:center}
.jeu{min-width:0}
.jeu img{width:100%;aspect-ratio:300 / 220}
.jeu h3{margin-top:var(--space-lg)}
.jeu p{margin-top:var(--space-xs);margin-inline:auto;max-width:32ch;color:var(--color-ink-2)}
/* sous les jeux : un seul bouton vers « Ce que vous pilotez » (le calculateur n’est plus mis en avant, 30/10) */
.vers-outils{display:flex;justify-content:center;margin-top:var(--space-2xl)}

/* ── 8. ce que vous pilotez ──────────────────────────────── */
.pilotez .section-tete h2{max-width:24ch;margin-inline:auto}
.pilotez-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:var(--gap-columns)}
.pilotez-tel img{width:min(100%,290px);margin-inline:auto;filter:drop-shadow(0 24px 30px var(--color-ombre-2))}
.pilotez-liste li{padding-block:var(--space-lg);border-top:1px solid var(--color-rule);font-family:var(--font-display);font-size:var(--text-title);
  font-weight:800;line-height:1.35;letter-spacing:var(--tracking-display);word-spacing:var(--word-display)}
.pilotez-liste li:last-child{border-bottom:1px solid var(--color-rule)}
.pilotez-texte .lien-fleche{margin-top:var(--space-md)}
.pilotez-legende{text-align:center}

/* ── 9. l'essai, sur le comptoir ─────────────────────────── */
.essai-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--gap-columns)}
.essai-texte{padding-inline-end:var(--space-2xl)}
.essai-texte > p{margin-top:var(--space-md);font-size:var(--text-lead);color:var(--color-ink-2)}
.essai-texte > .btn{margin-top:var(--space-xl)}
.qui-court{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-rule)}
.qui-court p{margin-top:var(--space-xs);color:var(--color-ink-2)}
.qui-court .lien-fleche{margin-top:var(--space-xs)}
.essai-photos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);align-items:start}
.essai-photos img{width:100%;border-radius:var(--radius-media)}
.photo-b{margin-top:var(--space-3xl)}

/* ── 10. tailles d'écran ─────────────────────────────────── */
/* tablette et téléphone (moins de 64rem) : le téléphone au centre, ses deux cartes entièrement
   visibles ; la roue (à gauche) et le cadeau (à droite) posés au pied, sur la zone du QR ; la barre
   de tampons dessous. Le plateau a sa propre hauteur (aspect-ratio) : les positions sont en % de
   cette hauteur. Les légendes en nuit et l'invitation à l'avis (déjà dans le titre) sont retirées.
   Relecture du 30/10 : à 768-1023 px, l'ancienne disposition « morceaux sur les côtés » posait les
   légendes sur les cartes (« ucun pour l'instant ») ; la disposition téléphone vaut donc jusqu'à 64rem. */
@media (max-width:63.99rem){
  .scene{margin-top:var(--space-lg);padding-inline:var(--gutter)}
  .scene-plateau{max-width:420px;aspect-ratio:100 / 132}
  .scene-tel{position:absolute;top:0;left:22%;width:56%}
  .morceau{border-width:4px}
  .morceau:not(.morceau-roue){border-radius:16px}
  .morceau:not(.morceau-roue) img{border-radius:12px}
  .etiquette,.morceau-avis{display:none}
  .morceau-roue{width:30%;left:0;top:61.7%}
  .morceau-cadeau{width:40%;left:auto;right:0;top:62.4%}
  .morceau-tampons{width:92%;left:4%;top:83.3%;z-index:calc(var(--z-raised) + 1)}
}
/* repli pour un navigateur sans aspect-ratio (Safari avant 15) : sans lui le plateau, dont tous les
   enfants sont posés en absolu, n'aurait aucune hauteur et la carte glisserait sur la suite. Le
   pseudo-élément donne la hauteur (132 % de la largeur du plateau). */
@supports not (aspect-ratio:1){
  @media (max-width:63.99rem){
    .scene-plateau::before{content:"";display:block;padding-top:132%}
  }
}
@media (max-width:60rem){
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-2xl)}
  .pilotez-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilotez-texte{grid-column:1 / -1;grid-row:1}
  .essai-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}
  .essai-texte{padding-inline-end:0}
}
/* téléphone : la vidéo verticale */
@media (max-width:47.99rem){
  .film-paysage{display:none}
  .film-vertical{display:block;max-width:340px;margin-inline:auto}
}
@media (max-width:40rem){
  .heros{padding-top:var(--space-xl)}
  .heros-texte{justify-items:stretch}
  .heros .btn{margin-top:var(--space-lg);white-space:normal}
  .avec-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;row-gap:var(--space-md)}
  .avec-liste li{padding-inline:var(--space-sm);text-align:center;white-space:normal}
  .avec-liste li + li{border-left:0}
  .etapes{grid-template-columns:minmax(0,1fr);row-gap:var(--space-xl)}
  .etape{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--space-md);align-items:center}
  .etape img{grid-row:1 / span 2}
  .etape h3{margin-top:0;align-self:end}
  .etape p{align-self:start}
  .jeux-liste{grid-template-columns:minmax(0,1fr);gap:var(--space-xl);text-align:left}
  .jeu{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--space-md);align-items:center}
  .jeu img{grid-row:1 / span 2}
  .jeu h3{margin-top:0;align-self:end}
  .jeu p{margin-inline:0;align-self:start}
  .vers-outils .btn{white-space:normal}
  /* une seule capture, lisible (côte à côte, les deux ne faisaient que ~165 px de large) : le tableau de bord */
  .pilotez-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .pilotez-tel-a{display:none}
  .pilotez-tel-b img{width:min(70%,260px)}
  .essai-texte > .btn{width:100%;white-space:normal}
  .essai-photos{gap:var(--space-md)}
  .photo-b{margin-top:var(--space-2xl)}
}