/* =============================================================================
   Mot de passe by Belentia — v3.3 « appareils » (23/09/2026)
   -----------------------------------------------------------------------------
   Chargée APRÈS v32.css sur A.html et tarifs.html, avec le kit partagé
   _assets/device.css (+ device.js). Le kit dessine le téléphone et
   l'ordinateur en CSS ; l'écran est une VRAIE capture de /app :
     ecrans/generateur-mobile.webp  1170 × 6852 (390 × 2284 CSS, @3)
     ecrans/generateur-bureau.webp  2880 × 1800 (1440 × 900 CSS, @2)
     ecrans/generateur-mobile-reglages.webp  1170 × 2532 (390 × 844, @3,
       page défilée jusqu'aux profils ; tarifs, sous l'offre, en mobile)
   Cette feuille ne fait que placer les appareils dans la page.
   Règles tenues : appareil toujours entier (aucun masque, fondu, recadrage,
   rotation ni flou), aucune ombre CSS, blanc et gris neutre uniquement.
   ========================================================================== */

/* Reprise du 23/09 : les contournements posés avant la correction du kit
   (isolation du reflet de sol, bascule .dv-only-desktop / .dv-only-mobile,
   padding-right 13 % du duo) sont retirés : device.css les fournit désormais
   à l'identique, et DEVICE.md demande de ne pas les redéfinir. */

/* ---------------------------------------------------------------------------
   1. Révélation du produit (A.html, juste après les garanties)
      Titre centré, puis l'appareil face caméra, puis trois atouts.
   ------------------------------------------------------------------------ */
.reveal { padding-block: var(--space-8) var(--section-y); }
.reveal__head { max-width: 760px; margin: 0 auto var(--space-6); text-align: center; }
.reveal__head .eyebrow { margin-inline: auto; }
.reveal__title {
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* Le conteneur grandit au défilement (data-scrub) : une échelle, jamais de
   rognage (pas d'overflow caché, pas de masque). */
.reveal__stage { transform-origin: 50% 35%; }

/* Duo : géométrie du kit, en % du duo lui-même (ordinateur 87 %, téléphone
   21 % calé à droite) : le téléphone couvre 1,04 % du duo sur le cadre du
   capot, sans toucher l'écran, à toute largeur. Seule la taille est réglée ici. */
.reveal .dv-duo { --dv-duo-w: 1100px; }

/* L'en-tête de /app reste collé en haut de l'écran pendant le défilement,
   comme dans la vraie app : emplacement officiel du kit, <img class="dv__appbar">
   (boucle 2 ; remplace la classe propre .mdp-appbar, même montage).
   generateur-mobile-entete.webp est découpée dans generateur-mobile.webp
   (65 px CSS @3 = 1170 × 195) : à 0 px de défilement, elle coïncide au pixel
   avec l'en-tête de la capture, sans saut. */

/* Poses du téléphone de la révélation (pause haute, repos en mouvement réduit) :
   voir § 5, réglées en px d'app dans A.html (data-dv-top, data-dv-rest) et
   recalées par poses.js. */

.gains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 900px;
  margin: var(--space-8) auto 0;
}
.gains li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.gains__icon {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.gains__icon svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------------------
   2. Bandeau final (A.html) : texte à gauche, le téléphone entier à droite
   ------------------------------------------------------------------------ */
.cta { background: var(--soft); }
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: var(--space-6);
  align-items: center;
}
.cta__grid .cta__inner { max-width: none; margin: 0; text-align: left; }
.cta__grid .cta__inner .eyebrow { margin-inline: 0; }
.cta__grid .actions { justify-content: flex-start; }
.cta__visual { display: flex; justify-content: center; }
.cta__visual .dv--phone { --dv-w: 300px; } /* passe 2 captures (24/09) : 280 → 300, texte de l'app ≥ 11 px à l'écran */

/* ---------------------------------------------------------------------------
   3. Tarifs : téléphone en tête, ordinateur sous l'offre
   ------------------------------------------------------------------------ */
.head-device { display: flex; justify-content: center; }
.head-device .dv--phone { --dv-w: 270px; }

.offer { align-items: center; }
.offer__device { margin-top: var(--section-y); }
.offer__device .dv--laptop { --dv-w: 1040px; }
.offer__caption {
  margin-top: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;               /* « défaut. » restait seul sur la 2e ligne à 390 px */
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
/* Reprise du 23/09 — le duo et l'ordinateur des tarifs gardent de l'air de
   chaque côté à toutes les largeurs (à 768 px, ils prenaient les 720 px du
   conteneur et touchaient la gouttière ; de même entre 1 025 et 1 250 px).
   83vw : 637 px à 768, 850 px à 1 024, plafonné à 1 100 / 1 040 px dès 1 330. */
@media (min-width: 721px) {
  .reveal .dv-duo { --dv-duo-w: min(1100px, 83vw); }
  .offer__device .dv--laptop { --dv-w: min(1040px, 83vw); }
}
@media (max-width: 900px) {
  /* Tarifs, grille empilée : même respiration qu'entre deux blocs (56 px
     seulement entre la carte de prix et « Ce que vous ouvrez »). */
  .split.offer { row-gap: 96px; }
  /* Atouts : une ligne chacun (en trois colonnes, « Vérifications et conseils »
     passait seul sur deux lignes à 768 px). */
  .gains { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 290px; margin-top: var(--space-6); }
  .gains li { justify-content: flex-start; gap: 14px; font-size: 17px; text-align: left; }
  .cta__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .cta__grid .cta__inner { text-align: center; }
  .cta__grid .cta__inner .eyebrow { margin-inline: auto; }
  .cta__grid .actions { justify-content: center; }
}
@media (max-width: 720px) {
  .reveal { padding-block: var(--space-6) var(--section-y); }
  .reveal__head { margin-bottom: var(--space-4); }
  .reveal__title { font-size: 30px; }
  .gains__icon { flex-basis: 26px; width: 26px; height: 26px; }
  .gains__icon svg { width: 24px; height: 24px; }

  /* Taille du kit sur mobile : min(74vw, 290px), y compris là où la page
     fixe une taille bureau. */
  .cta__visual .dv--phone,
  .head-device .dv--phone { --dv-w: min(74vw, 290px); }
  .offer__device { margin-top: var(--space-6); }
  .offer__caption { margin-top: var(--space-3); }
}

/* =============================================================================
   Boucle 3 (23/09/2026) — ambiance, poses des téléphones, démonstration, tarifs
   ========================================================================== */

/* ---------------------------------------------------------------------------
   4. Ambiance (A.html) : kit partagé _assets/ambiance.css, réglages de l'outil
      (AMBIANCE.md). Le panneau est entouré de blanc (la marge d'une section) :
      jamais collé à la bande grise voisine, à une autre couleur ni au bandeau final.
   ------------------------------------------------------------------------ */
.amb--mdp {
  /* Fond : #EB5602 (235, 86, 2), la couleur de l'affiche d'origine. Boucle 4 : la
     session principale a corrigé les balises couleur des MP4 (primaires BT.709,
     transfert sRGB, matrice BT.601) : l'image 0 décodée vaut ≈ (233, 86, 1) dans
     WebKit et Chromium, l'affiche aussi. Un seul orange dans le panneau, à l'arrêt
     comme en lecture (le #F96E00 de la boucle 3 compensait les anciennes balises). */
  --amb-bg: #EB5602;
  --amb-ink: #F97316;          /* texte du bouton blanc : l'orange vif de l'outil */
  --amb-pos: 70% 50%;
  --amb-pos-m: 100% 50%;       /* téléphone (4:3) : le trousseau revient au centre (55 %) ;
                                  à 66 % (valeur proposée) il restait aux deux tiers */
  --amb-y: var(--section-y);
  background: var(--canvas);
  /* Boucle 3, correction : les profils qui suivent sont désormais sur fond blanc ;
     leur marge haute suffit (sinon 2 × 96 px de blanc sous le panneau). */
  padding-bottom: 0;
}
/* Boucle 4 — titre sur deux lignes nettes à toute largeur d'ordinateur. Le kit
   borne le titre à 52 px, mais sa colonne (50 %, 620 px au plus, moins les marges)
   laissait 493 px à 1 440 pour « pour chaque porte. » (493 px) : à la limite, et
   trois lignes en escalier dès 1 536 px (« Une clé / différente pour / chaque
   porte. »), comme de 901 à 960 px. Colonne à 54 %, 680 px au plus : deux lignes
   de 901 à 2 560 px, et 60 px d'air au moins entre le texte et l'ombre du
   trousseau (129-133 px de 1 366 à 2 560). */
@media (min-width: 901px) {
  .amb--mdp { --amb-text-w: 54%; }
  .amb--mdp .amb__text { max-width: 680px; }
}
/* Orange plus clair : le sur-titre et la phrase passent en blanc plein (la
   couleur n'est jamais assombrie ; un blanc à 86-90 % virait au pêche). */
.amb--mdp .amb__eyebrow,
.amb--mdp .amb__lead { color: #fff; }
/* Texte au-dessus de la vidéo (≤ 900 px depuis la boucle 4 du kit, 16:10 puis
   4:3) : le crochet blanc est à 12-15 % du haut du cadre ; le fondu de 30 % du
   kit le teintait de pêche (209, 141, 102), à 768 px comme au téléphone. Fond et
   vidéo ayant la même couleur, 10 % suffisent à fondre la couture. */
@media (max-width: 900px) {
  .amb--mdp .amb__media::before { height: 10%; }
}

/* ---------------------------------------------------------------------------
   5. Poses des téléphones (A, tarifs) : la barre d'accueil tombe AU MILIEU d'un
      blanc de l'app, et le bas de l'écran s'arrête sous le bord d'une carte,
      jamais au milieu d'une ligne.
      Boucle 4 (kit corrigé : corps du téléphone en hauteur explicite, même
      géométrie sous WebKit et Chromium ; réglages en px d'app). Relevés au
      tiers de px sur generateur-mobile.webp (390 × 2 284 px d'app) :
      - pause haute du défilement et bandeau final : blanc 977,3 → 994,0 (976,3 à l’œil) entre la
        note « Collez le secret… » et le bas de la carte « Résultat » ; barre
        centrée (5,4 à 6,4 px au-dessus, 6 px au-dessous), bas de l’écran à 997,5, dans le
        blanc entre deux cartes, 2,5 px sous le bord de la carte. L'ancien blanc
        (930 → 949, sous « Recommandations ») ne pouvait pas la centrer : il
        aurait fallu couper le haut de la note (barre à 4 px du filet, 9,5 px
        de la note, remarque de la contre-critique 3) ;
      - repos en mouvement réduit (révélation) et tarifs : blanc 1 146 → 1 165
        sous la rangée de profils ; barre centrée, bas de l'écran à 1 167,7,
        entre deux cartes (la carte « Score » reste entière sous l'en-tête) ;
      - pause basse : fin de capture + marge du kit (inchangée).
      La vue mesure 791,6 à 794,5 px d'app selon la taille du téléphone : on vise
      donc le BAS de la vue (data-pose-bottom, data-pose-top-bottom,
      data-pose-rest-bottom), converti par poses.js d'après la géométrie réelle.
      Sans script : data-dv-top="203" / data-dv-rest="373.2" (A.html) et les
      décalages ci-dessous, calculés pour 390 px (vue de 794,5 px).
      Les fractions --dv-scroll-top / --dv-scroll-rest et la règle qui retenait
      l'en-tête collé (.dv__appbar) sont retirées : le kit les remplace. */
/* Boucle 5 : ces décalages ne servent plus (captures fixes 390 × 792 du nouveau
   générateur, qui tiennent dans la vue ; la barre d'accueil tombe dans le blanc
   sous la carte). */

/* ---------------------------------------------------------------------------
   6. Démonstration guidée (A.html) : trois blocs sous des filets, comme
      l'en-tête « Essai guidé » : les profils ; le secret et ses boutons ;
      l'historique en pied de carte. Chaque filet est au milieu d'un couloir
      de 49 px où se pose la bulle du parcours (31,5 px de haut) : sous le
      profil cliqué, au-dessus du secret, sous « Copier », au-dessus de
      l'historique (règle du kit : au-dessus de la boîte ciblée, sinon sous
      le curseur). Aucune bulle ne touche un texte ni un bouton, de 360 à
      1 440 px (l'historique passe sur deux lignes sous 720 px).
   ------------------------------------------------------------------------ */
.tour-app .tour-profiles,
.tour-app .tour-row {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.tour-app .tour-secret,
.tour-app .tour-histo { margin-top: var(--space-3); }

/* Boucle 4 — historique de l'essai guidé, au-dessus de 720 px : quand les deux
   mentions ne tiennent pas sur une ligne (carte étroite de 900 à 1 150 px), la
   seconde passe entière à la ligne, comme sous 720 px, au lieu de couper chaque
   mention en deux (« Historique local : 1 génération / en mémoire » et
   « disparaît au / rechargement » à 1 024 px). */
@media (min-width: 721px) {
  .tour-app .tour-histo { flex-wrap: wrap; row-gap: 2px; }
  .tour-app .tour-histo > span { white-space: nowrap; }
}

/* Boucle 4 — écran tactile : le point de toucher s'efface pendant la pause sur
   la cible (attribut data-dot-off posé par le script d'A.html, § 8) : il ne
   couvre plus « Banque », « Copié » ni l'historique ; la bulle nomme la cible. */
@media (hover: none) {
  .tour-app .tour__cursor { transition: transform 600ms var(--motion-ease), opacity 180ms ease; }
  .tour-app[data-dot-off] .tour__cursor { opacity: 0; }
}

/* Galerie d'usages, carte « Un code PIN » : les dés au centre du cadre carré. */
.use__media--dice { --pos: 46% 50%; }

/* ---------------------------------------------------------------------------
   7. Tarifs : l'affiche de l'ambiance en tête (photo, pas d'appareil) ; le
      produit reste montré sous l'offre (ordinateur, ou téléphone sous 720 px).
   ------------------------------------------------------------------------ */
.head-photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  background: #EB5602;         /* couleur de l'affiche (image 0 décodée), jamais de blanc au chargement */
}
.head-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;   /* le trousseau au centre du cadre 4:3 */
}
/* Tablette (en-tête sur une colonne) : 3:2, l'affiche ne prend pas tout le premier écran. */
@media (min-width: 721px) and (max-width: 900px) {
  .head-photo { aspect-ratio: 3 / 2; }
}
@media (max-width: 720px) {
  .head-photo { border-radius: 24px; }
}

/* =============================================================================
   Boucle 3, correction (23/09/2026)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   8. Galerie d'usages, carte « Sur votre téléphone » (boucle 4) : l'objet de la
      série, objet-appli.webp (icône d'application en verre dépoli, trou de
      serrure orange, fond studio blanc à gris froid), remplace le téléphone
      miniature du kit. La photo suit la règle commune de la galerie (v32.css
      § 3) ; au bureau (cadre 3:2), l'icône ne faisait que 30 % de la largeur,
      contre 54 % pour la clé en papier et 43 % pour les dés : on la rapproche
      (× 1,3, source de 1 800 px, reste nette en @2). En carré (mobile), le
      cadrage seul la porte à 44 %.
   ------------------------------------------------------------------------ */
@media (min-width: 721px) {
  .use__media--appli img { transform: scale(1.3); transform-origin: 50% 50%; }
}


/* ===========================================================================
   Boucle 5 — appareils vivants (A.html, tarifs.html)
   Les appareils montrent le NOUVEAU générateur (ecran-generateur.html) : vraies
   captures d'états obtenus en cliquant, empilées (.tour-screens du kit motion),
   un parcours du kit (.tour[data-tour]) posé sur l'écran, cibles invisibles en %
   au-dessus de la capture, dans .dv__view. Un seul mouvement par appareil.
   ======================================================================== */
.mdp-tour { position: relative; }
.mdp-hit { position: absolute; display: block; }
.tour .mdp-hit.is-tour-hover,
.tour .mdp-hit.is-tour-active { outline: 0; box-shadow: none; transform: none; border: 0; }
/* pas de flèche en 0,0 avant la première cible */
.mdp-tour .tour__cursor:not([style*="translate"]) { opacity: 0; }
.mdp-tour .tour__cursor { transition: transform 600ms var(--motion-ease), opacity .2s ease; }
/* Pause / Rejouer sous l'appareil, dans le flux */
.mdp-tour__ctrls { margin-top: var(--space-4, 16px); }
.mdp-tour__ctrls:empty { display: none; }
.cta__visual .mdp-tour { width: 100%; }
/* téléphone : point de toucher à la place de la flèche, même sur ordinateur */
.mdp-tour--touch .tour__cursor svg { display: none; }
.mdp-tour--touch .tour__cursor::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(17, 24, 39, .28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
/* le point s'efface après le toucher : il ne reste pas posé sur « Copié » */
.mdp-tour--touch[data-dot-off] .tour__cursor { opacity: 0; }
/* Contre-vérification v33 (24/09, 5 h) — parcours des appareils :
   téléphone : la bulle sort de l'écran et devient une légende sous l'appareil
   (vivant.js), le point de toucher reste seul sur la cible.
   (Dernière passe, 24/09 5 h 35 : la coupe franche des captures est désormais
   celle du kit motion.css ; la surcharge « transition: none » locale est retirée.) */
.mdp-tour--touch .tour__label { display: none; }
.mdp-tour__caption {
  min-height: 1.5em;
  margin: var(--space-3, 12px) 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink, #111827);
  opacity: 0;
  transition: opacity .18s ease;
}
.mdp-tour__caption.is-on { opacity: 1; }
.mdp-tour__caption + .mdp-tour__ctrls { margin-top: var(--space-2, 8px); }
.mdp-tour--touch .mdp-tour__ctrls { display: flex; justify-content: center; }
/* fond de la vue = blanc de l'écran (vue de 792 à 795 px d'app, capture de 792) */
.mdp-tour .dv--phone .dv__view,
.mdp-tour .dv--laptop .dv__view { background: #FFFFFF; }

/* Boucle 5 — contre-critique 4 : titre de l'ambiance en escalier sur mobile
   (« Une clé / différente pour / chaque porte. »). Sous 480 px, corps réduit
   pour « Une clé différente / pour chaque porte. » sur deux lignes. */
@media (max-width: 480px) {
  .amb--mdp .amb__title { font-size: clamp(28px, 8.2vw, 34px); }
}

/* ---------- Boucle 9,5 (24/09, 5 h 50) ----------
   M6 : entre 721 et 900 px, l'ordinateur tombait à 400-640 px de large et le texte de l'écran à 5-8 px,
   illisible. Sur tablette, on montre le téléphone seul (lisible), comme sur mobile.
   M14 (tarifs, bureau) : la colonne « Tout le générateur » se centre à côté de la carte d'offre. */
@media (min-width: 721px) and (max-width: 900px) {
  .dv-only-desktop { display: none !important; }
  .dv-only-mobile { display: block !important; }
}
.split.offer > .offer__aside { align-self: center; }

/* Passe 9,5 (24/09) : panneau du burger = même lockup que l'en-tête fermé ;
   anneau de focus orange de la DA sur le burger et la croix (plus de noir épais). */
.mobile-panel__head .brand__mark { background: var(--neutral-pad); color: var(--accent); }
.mobile-panel__head .brand__mark svg { stroke-width: 2; }
.burger:focus-visible, .mobile-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }