/* ════════════════════════════════════════════════════════════════
   FEUILLE PARTAGEE DES PAGES DE THEME  (extraite le 13 aout 2026)

   Elle etait ecrite en <style> dans compte-a-rebours-annonce-sexe-bebe.html,
   la page pilote. En la portant sur les trois autres themes on aurait duplique
   ~550 lignes quatre fois — or ce fichier de notes documente deja plusieurs
   bugs nes d'une correction faite sur une copie et pas sur les autres (le vide
   sous la legende du telephone a du etre corrige sur les QUATRE pages).

   ⚠️ Toute page de theme doit charger pages.css AVANT ce fichier : plusieurs
      regles ici surchargent volontairement pages.css (.page-wrap p, .page-wrap
      ul, .page-wrap a:not(.btn)) et perdraient si l'ordre etait inverse.
   ⚠️ Ce qui reste specifique a un theme — les couleurs de l'affiche de demo —
      se surcharge dans le <style> de la page concernee, pas ici.
   ════════════════════════════════════════════════════════════════ */
  .th-wrap { max-width: 720px; }
  .th-wrap h2 { font-size: 1.4rem; margin: 2.6rem 0 .5rem; line-height: 1.3; }
  .th-wrap p { line-height: 1.72; margin: 0 0 1rem; }
  .th-lead {
    font-size: 1.1rem; line-height: 1.7;
    border-left: 3px solid var(--dot); padding-left: 1.1rem; margin: 1.5rem 0 2rem;
  }

  /* ── Maquette téléphone ──
     ⚠️ QUATRIÈME copie (accueil + carte à gratter + ballons + celle-ci). Le site
     n'a pas de gabarit partagé. Toute retouche de la coque, de l'encoche ou de
     l'échelle doit être reportée dans les quatre. La règle la plus sensible est
     scale(.752) : elle ajuste un gabarit de 430px de large à un écran de 324px. */
  .th-demo { display: flex; justify-content: center; margin: 2.2rem 0 1rem; }
  .phone-wrap { position: relative; flex-shrink: 0; margin: 0 10px; }
  .phone-wrap::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 118%; height: 82%;
    transform: translate(-50%,-50%); z-index: -1; border-radius: 50%; filter: blur(34px);
    background: radial-gradient(closest-side, rgba(148,155,240,.38), rgba(255,111,156,.2), transparent 72%);
  }
  .phone-btn {
    position: absolute; z-index: 1; border-radius: 3px;
    background: linear-gradient(90deg, #18182a 0%, #28283e 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .phone-btn-vol-up { left: -6px; top: 108px; width: 6px; height: 34px; border-radius: 3px 0 0 3px; }
  .phone-btn-vol-dn { left: -6px; top: 154px; width: 6px; height: 60px; border-radius: 3px 0 0 3px; }
  .phone-btn-power  { right: -6px; top: 138px; width: 6px; height: 72px; border-radius: 0 3px 3px 0; }
  .demo-phone {
    position: relative; width: 340px; height: 700px;
    background: linear-gradient(160deg, #1c1c2e 0%, #0e0e1c 100%);
    border-radius: 54px; overflow: hidden;
    box-shadow:
      0 0 0 1px #3a3a5c, 0 0 0 3px #08081a, 0 0 0 4px #262640,
      0 40px 100px rgba(0,0,0,0.65), 0 15px 40px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .phone-screen {
    position: absolute; inset: 8px; border-radius: 47px; overflow: hidden; background: #000;
  }
  .phone-screen iframe {
    display: block; width: 133%; height: 133%; border: none;
    transform: scale(0.752); transform-origin: top left;
  }
  .phone-island {
    position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
    width: 126px; height: 37px; background: #000; border-radius: 22px; z-index: 30;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  }
  .phone-status {
    position: absolute; top: 0; left: 0; right: 0; height: 56px;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 30px 10px; z-index: 20; pointer-events: none; color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: -0.3px;
  }
  .phone-status-icons { display: flex; align-items: center; gap: 7px; }
  .phone-home {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 138px; height: 5px; background: rgba(255,255,255,0.42);
    border-radius: 3px; z-index: 20;
  }
  .phone-glare {
    position: absolute; top: 8px; left: 8px; right: 8px; height: 42%;
    border-radius: 47px 47px 38% 38%;
    background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, transparent 65%);
    pointer-events: none; z-index: 26;
  }
  @media (prefers-reduced-motion: no-preference) {
    .phone-wrap::before { animation: haloPulse 4s ease-in-out infinite; }
    .demo-phone { animation: floatPhone 5s ease-in-out infinite; }
  }
  @keyframes haloPulse { 0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
  @keyframes floatPhone { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  /* ⚠️ Les marges négatives reprennent EXACTEMENT le vide laissé par la
     réduction, et l'écart sous le téléphone est posé une seule fois, sur la
     légende (12 août 2026 — la légende se collait au cadre sur tablette).
     Le mock fait 700px de haut et `transform` ne change pas la place que sa
     boîte occupe : avec `transform-origin: center top`, tout le vide est en
     bas et vaut 700 × (1 − échelle). Les anciennes valeurs (-3rem / -5rem)
     n'en reprenaient qu'une partie, d'où quatre écarts mesurés pour un même
     détail : 102px à 320, 57px à 390, **0 de 431 à 899** (iPad mini 768,
     iPad Air 820, iPad Pro 834) et 16px sur PC. Si l'échelle change, la
     marge doit être recalculée — ce ne sont pas des valeurs esthétiques. */
  @media (max-width: 430px) {
    .phone-wrap { transform: scale(.85); transform-origin: center top; margin: 0 0 -105px; }
  }
  @media (max-width: 360px) {
    .phone-wrap { transform: scale(.74); margin: 0 0 -182px; }
  }
  .th-demo-cap { text-align: center; font-size: .85rem; opacity: .7; margin-bottom: 2rem !important; }
  /* ⚠️ Sélecteur en deux niveaux : `pages.css` pose `.page-wrap p { margin: 0 0
     1rem }`, qui out-spécifie `.th-demo-cap` seul — c'est pourquoi la marge
     basse voisine porte un !important. Ici 0,2,0 suffit. */
  .th-hero .th-demo-cap { margin-top: 1rem; }

  /* Liste numérotée : structure volontairement différente des deux autres pages
     thème (tableau comparatif pour la carte à gratter, liste à croix pour les
     ballons). Deux pages qui se ressemblent visuellement se ressemblent aussi
     pour Google. */
  .th-num { counter-reset: n; list-style: none; margin: .6rem 0 1.4rem; padding: 0; }
  .th-num li { counter-increment: n; position: relative; padding: .1rem 0 1.1rem 2.6rem; line-height: 1.7; }
  .th-num li::before {
    content: counter(n); position: absolute; left: 0; top: .1rem;
    width: 1.8rem; height: 1.8rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--dot); color: var(--brown); font-weight: 700; font-size: .9rem;
  }
  .th-num strong { display: block; margin-bottom: .15rem; }

  .th-list { list-style: none; margin: .4rem 0 1.4rem; padding: 0; }
  .th-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; line-height: 1.6; }
  .th-list li::before { content: '✓'; color: var(--orange); font-weight: 700; flex-shrink: 0; }

  /* ── Accordéons ──
     ⚠️ Un SEUL style pour tous les replis de la page : les sections de contenu
     et la FAQ. Ils étaient auparavant des cartes bordées ; deux apparences de
     repli sur une même page donnent l'impression de deux mécaniques
     différentes. Forme retenue : filet horizontal + chevron, celle de la
     boutique donnée en exemple. */
  /* ⚠️ Les replis sont GROUPÉS en cartes, pas alignés en filets nus (12 août
     2026, 2e passe). Sept barres identiques à la suite se lisaient comme un
     menu de réglages : rien ne disait que les trois premières et les quatre
     suivantes sont deux choses différentes. Encadrés, ce sont deux blocs, et la
     carte reprend le langage de l'encadré des avantages plus haut. */
  .th-acc {
    margin: .6rem 0 0;
    background: #fff; border: 2px solid var(--dot); border-radius: 20px;
    padding: 0 1.1rem;
  }
  .th-acc details + details { border-top: 1px solid var(--dot); }
  .th-grp-h { margin: 2.6rem 0 0 !important; }
  .th-acc summary {
    position: relative; cursor: pointer; list-style: none;
    padding: 1.05rem 2.2rem 1.05rem 0;
    font-weight: 600; line-height: 1.4;
  }
  /* Le triangle par défaut ne se supprime pas de la même façon selon les
     moteurs : il faut les deux déclarations. */
  .th-acc summary::-webkit-details-marker { display: none; }
  .th-acc summary::marker { content: ''; }
  /* ⚠️ h3 et non h2 : les trois sections sont désormais coiffées par un h2 de
     groupe (« Le thème en détail »). Deux h2 imbriqués auraient annoncé à Google
     deux niveaux au même rang. Le <h3> reste DANS le <summary> — son modèle de
     contenu accepte un élément de titre, et l'en sortir ferait perdre la
     structure de titres. */
  .th-acc summary h3 {
    display: inline; font-size: 1.05rem; margin: 0;
    color: var(--brown); font-weight: 700;
  }
  .th-acc summary::after {
    content: ''; position: absolute; right: .5rem; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .22s ease;
  }
  .th-acc details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
  .th-acc summary:hover h3, .th-acc summary:hover { color: var(--orange-dark); }
  .th-acc-body { padding: 0 0 .9rem; }
  .th-acc details p { margin: 0 0 1rem; }
  .th-acc details p:last-child { margin-bottom: 0; }
  .th-acc .th-num, .th-acc .th-list { margin-bottom: 0; }
  .th-acc .th-num li:last-child, .th-acc .th-list li:last-child { padding-bottom: 0; }
  .th-faq-h { margin-top: 2.6rem !important; }
  @media (prefers-reduced-motion: reduce) { .th-acc summary::after { transition: none; } }

  /* ── Les autres thèmes ──
     ⚠️ GRILLE, plus une rangée de pastilles qui s'enroulent (12 août 2026). En
     flex, les cinq pastilles se répartissaient au hasard de la largeur et la
     dernière restait seule sur sa ligne. En grille, c'est 2×2 sur téléphone et
     4 de front sur PC : aucune orpheline, quelle que soit la taille.
     ⚠️ La page courante est MASQUÉE, elle n'est plus grisée dans la liste : le
     titre annonce « les quatre autres thèmes » et on en montrait cinq. La
     masquer par CSS plutôt que par le HTML garde le bandeau identique sur les
     quatre pages thème — chacune cache la sienne toute seule. */
  .th-themes {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: .7rem; margin: .9rem 0 1.6rem;
  }
  @media (min-width: 620px) { .th-themes { grid-template-columns: repeat(4, 1fr); } }
  .th-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; min-height: 88px; padding: .9rem .5rem;
    background: #fff; border: 2px solid var(--dot); border-radius: 18px;
    /* ⚠️ Rose ASSUMÉ, pas subi : `.page-wrap a:not(.btn)` de pages.css l'emporte
       de toute façon sur une classe seule (même piège que les boutons et que
       l'encadré des avantages). Écrit ici en deux niveaux, c'est un choix — et
       le rose dit que la pastille est cliquable. */
    text-decoration: none; font-size: .92rem; text-align: center;
    line-height: 1.25;
    box-shadow: 0 3px 0 rgba(179,163,217,.3);
    transition: transform .15s ease, border-color .15s ease;
  }
  .th-wrap .th-chip { color: var(--orange-dark); }
  .th-chip span { font-size: 1.55rem; line-height: 1; }
  .th-wrap .th-chip:hover { transform: translateY(-3px); border-color: var(--orange); color: var(--orange-dark); }
  .th-chip.is-current { display: none; }

  .th-cta { text-align: center; margin: 2.8rem 0 0; padding-top: 2rem; border-top: 2px dashed var(--dot); }
  .th-cta .btn { font-size: 1.08rem; padding: .95rem 2.1rem; }
  .th-cta-price { font-family: 'Gochi Hand', cursive; font-size: 1.3rem; color: var(--warm); margin-bottom: 1rem; }
  .th-more { text-align: center; font-size: .92rem; margin-top: 1.6rem !important; }

  /* ── Bande produit (12 août 2026) ──
     La page se lisait de haut en bas et le bouton d'achat n'apparaissait qu'après
     ~580 mots. Elle s'ouvre maintenant comme une fiche produit : les arguments à
     gauche, la démo jouable à droite, le prix et le bouton dessous.
     ⚠️ La bande SORT volontairement de .th-wrap (720px) pour tenir deux colonnes ;
     tout le texte qui suit y reste, parce qu'une colonne de 1000px se lit mal.
     ⚠️ L'élargissement se fait par marge négative, PAS par transform : une
     transformation crée un contexte d'empilement, et le halo du téléphone
     (.phone-wrap::before) est en z-index:-1 — il serait piégé dedans. */
  /* ⚠️ Le cadre n'est pas décoratif : la bande est plus large que le texte qui
     suit, et sans lui le débordement à gauche et à droite se lit comme un
     défaut d'alignement. Encadrée, la différence de largeur devient un choix. */
  .th-hero {
    --hw: min(1060px, calc(100vw - 3rem));
    display: flex; flex-direction: column; margin: 1.8rem 0 2.6rem;
    /* ⚠️ Fond BLANC, pas un dégradé lavande : la page est déjà lavande, et une
       carte de la même teinte ne se détache pas — elle se lisait comme une zone
       vaguement plus claire, pas comme un objet posé dessus. C'est l'ombre
       portée, pas la couleur, qui la fait décoller. */
    background: #fff;
    border: 2px solid var(--dot); border-radius: 28px;
    padding: clamp(1.3rem, 3.5vw, 2.4rem);
    box-shadow: 0 18px 44px rgba(112,94,168,.15), 0 4px 0 rgba(179,163,217,.2);
  }
  /* ⚠️ Le h2 n'est plus le premier élément de son bloc depuis que l'accroche
     est descendue avec lui : sans cette marge il se colle au paragraphe. */
  .th-sell h2 { margin-top: 1.6rem; }
  .th-hero .page-kicker { margin-bottom: .8rem; }
  .th-hero h1 { margin-bottom: .35rem; }
  /* ⚠️ TÉLÉPHONE : l'ordre est titre → objet → arguments → achat, et il se règle
     par `order`, pas par l'ordre du HTML (le HTML garde l'ordre logique, celui
     que lisent un lecteur d'écran et Google). Mettre la démo tout en haut
     repousserait le <h1> sous 600px d'image ; la mettre après les arguments
     ferait lire quatre paragraphes avant de montrer quoi que ce soit. */
  .th-head { order: 1; text-align: center; }
  .th-hero-demo { order: 2; display: flex; flex-direction: column; align-items: center; margin: 1.4rem 0 0; }
  .th-buy { order: 3; }
  .th-sell { order: 5; margin-top: 1.8rem; }
  /* Titre et prix centrés sur téléphone, comme sur une fiche d'article ; le
     texte courant reste aligné à gauche, une prose centrée se lit mal. */
  .th-buy { text-align: center; }
  .th-amount { justify-content: center; }
  .th-buy .btn { margin: 0 auto; }
  /* Dans la carte, l'accroche perd son filet vertical : ce liseré est un code
     d'article de blog, pas de fiche produit. */
  .th-hero .th-lead { border-left: 0; padding-left: 0; margin: .9rem 0 0; font-size: 1.05rem; }
  /* ── Zone d'achat ──
     ⚠️ AUCUN encadré : ni fond, ni bordure, ni ombre, ni pastille (13 août
     2026, owner). L'historique compte, parce qu'il explique la règle : le prix
     a été successivement un panneau teinté à coins arrondis, puis un encart
     blanc DANS ce panneau, puis une note manuscrite inclinée avec pastille —
     les trois formes encadrées ont été rejetées l'une après l'autre.
     Ce qui n'allait pas, et qu'il ne faut pas refaire : (a) une vraie fiche
     produit n'encadre pas son prix, c'est du texte sous le titre ; (b) un
     panneau rose portant une pastille rose, un prix rose et un bouton rose ne
     fait RIEN ressortir, puisque tout ressort ; (c) entre l'encadré blanc des
     avantages au-dessus et la bande de réassurance en dessous, cela faisait
     trois boîtes à la suite.
     La hiérarchie vient donc de l'ÉCHELLE et de l'ESPACE, jamais d'un contour. */
  .th-buy {
    margin-top: 2.2rem;
    padding: 0;
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  /* Le prix et sa mention étaient côte à côte et passaient à la ligne au hasard
     de la largeur. Empilés, ils forment un bloc stable à toutes les tailles. */
  .th-amount {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    margin: 0 0 1.25rem !important;
  }
  /* ⚠️ Prix en ROSE et plus petit qu'un gros chiffre noir (12 août 2026, owner).
     À 2,45rem en encre sombre il pesait comme une facture ; la couleur de la
     marque le rend joyeux, et il n'a pas besoin d'être énorme pour être lu —
     c'est le seul chiffre du panneau. Rose foncé et non rose clair : sur le fond
     teinté du panneau, le clair perdrait son contraste. */
  /* ⚠️ 2,3rem, contre 1,75 dans le panneau et 2,45 à l'origine. Le reproche du
     12 août (« à 2,45rem en encre sombre il pesait comme une facture ») visait
     la CONJONCTION taille + encre sombre + encadré. L'encadré a disparu et la
     couleur reste le rose de la marque : sans contour autour de lui, le prix
     n'a plus que sa taille pour exister, et à 1,75rem il se perdait dans la
     page. Rose foncé et non rose clair : contraste sur fond blanc. */
  .th-amount b {
    font-family: 'Fredoka', sans-serif; font-size: 2.3rem; line-height: 1;
    color: var(--orange-dark); letter-spacing: -.015em;
  }
  .th-amount span { font-size: .84rem; opacity: .62; }
  /* ⚠️ La phrase porte une icône, donc `data-i18n` est sur le <span> INTÉRIEUR,
     jamais sur le <p> : la traduction remplace innerHTML et effacerait le SVG.
     Même piège que la liste des avantages juste en dessous. */
  /* Pas de filet au-dessus : sans encadré autour, une ligne de séparation
     redevient un contour — exactement ce qu'on vient d'enlever. C'est la
     proximité au bouton qui rattache la phrase, pas un trait. */
  .th-fix {
    display: flex; align-items: flex-start; gap: .45rem;
    font-size: .82rem; opacity: .72; line-height: 1.4;
    margin: .9rem 0 0 !important;
  }
  .th-fix svg {
    flex: 0 0 15px; width: 15px; height: 15px; margin-top: .12rem;
    fill: none; stroke: var(--orange); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* ⚠️ Lueur rose diffuse à la place du bandeau dur `0 4px 0` de `.btn`
     (pages.css:287). Dans un panneau arrondi et teinté, une ombre décalée
     nette se lit comme un autocollant posé dessus — le même raisonnement
     avait déjà fait basculer la barre flottante. L'ombre GRANDIT au survol
     au lieu de rester figée : avec l'ombre dure, le `translateY(-2px)` de
     `.btn:hover` creusait un écart de 6px et le bouton semblait se décoller. */
  /* ⚠️ Plus de plafond à 380px : le panneau fait ~560px sur grand écran et le
     bouton s'y arrêtait au milieu, laissant un vide à sa droite. Il n'y a pas
     de risque de bouton démesuré ici — c'est la colonne de la grille qui borne
     le panneau (~560px à 1440), contrairement à la barre flottante qui, elle,
     prenait toute la largeur de l'écran et avait bien besoin d'un plafond. */
  .th-buy .btn {
    display: block; width: 100%; max-width: none; text-align: center;
    font-size: .99rem; padding: .92rem .8rem;
    box-shadow: 0 8px 18px -6px rgba(209, 81, 127, .55);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .th-buy .btn:hover { box-shadow: 0 13px 24px -7px rgba(209, 81, 127, .6); }
  /* Trois promesses déjà tenues ailleurs sur la page — rien de neuf n'est
     promis ici, elles sont juste rassemblées au pied de la carte. */
  /* ⚠️ TÉLÉPHONE : une ligne par avantage, icône à gauche, filet entre chaque —
     la forme de l'encadré « vos avantages » de la boutique donnée en exemple.
     Les versions précédentes (coches centrées qui s'enroulaient) produisaient un
     pavé de lignes de longueurs différentes dont rien n'alignait rien. */
  /* ⚠️ Sélecteur en DEUX niveaux, obligatoire : pages.css:136 pose
     `.page-wrap ul, .page-wrap ol { margin: 0 0 1rem 1.3rem }`. Écrit
     `.th-reas` tout court, il perd sur la spécificité et l'encadré se
     retrouvait décalé de 21px vers la droite, désaligné du bouton juste
     au-dessus. Même piège que les boutons de pages.css. */
  .th-hero .th-reas {
    order: 4; list-style: none;
    display: grid; grid-template-columns: 1fr;
    /* 1.4rem depuis que .th-buy est masqué sous 900px : la marge valait 2rem
       pour dégager l'ombre dure de 5px du bouton qui se trouvait juste
       au-dessus. Plus de bouton là, plus d'ombre à dégager — au-delà de 900px
       le panneau existe encore et le bloc ≥900px repose sa propre marge. */
    margin: 1.4rem 0 0; padding: 0;
    border: 2px solid var(--dot); border-radius: 16px;
    font-size: .9rem;
  }
  .th-reas li {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1rem; line-height: 1.35;
  }
  .th-reas li + li { border-top: 1px solid var(--dot); }
  .th-reas svg {
    flex: 0 0 22px; width: 22px; height: 22px;
    fill: none; stroke: var(--orange); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  /* ⚠️ PC : deux colonnes, le téléphone occupant les DEUX rangées à droite
     (titre en haut à gauche, vente en bas à gauche). Une seule rangée aurait
     forcé un choix entre centrer le téléphone sur le titre ou sur l'achat ;
     à cheval sur les deux, il tient toute la hauteur de la carte. */
  @media (min-width: 900px) {
    .th-hero {
      width: var(--hw); margin-left: calc((100% - var(--hw)) / 2);
      display: grid; grid-template-columns: minmax(0, 1fr) 360px;
      grid-template-rows: auto 1fr auto;
      column-gap: clamp(1.8rem, 4vw, 3.4rem); row-gap: 1.6rem;
      align-items: start;
    }
    .th-head { grid-column: 1; grid-row: 1; text-align: left; }
    .th-sell { grid-column: 1; grid-row: 2; margin-top: 0; }
    .th-buy  { grid-column: 1; grid-row: 3; text-align: left; }
    .th-amount { align-items: flex-start; }
    .th-buy { padding: 0; }
    .th-buy .btn { margin: 0; font-size: 1.05rem; padding: .95rem 1.4rem; }
    .th-hero-demo { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
    /* Pleine largeur et quatre colonnes : c'est la seule façon d'avoir les
       mentions sur une seule rangée — dans la colonne de gauche elles en
       prenaient deux dès 900px. Les filets deviennent verticaux. */
    .th-hero .th-reas {
      grid-column: 1 / -1; grid-row: 4; margin: 1.8rem 0 0;
      grid-template-columns: repeat(4, 1fr);
      font-size: .84rem;
    }
    /* ⚠️ La 5e mention est retirée ici, et c'est ce qui garde la rangée à
       QUATRE colonnes : au-dessus de 900px le panneau .th-buy réapparaît et
       porte déjà la même phrase (.th-fix). Une 5e colonne déborderait — le
       français passe déjà à deux lignes entre 900 et 959px à quatre. */
    .th-reas .r-mob { display: none; }
    .th-reas li { padding: .85rem .7rem; justify-content: center; }
    .th-reas li + li { border-top: 0; border-left: 1px solid var(--dot); }
    /* La marge négative du téléphone (ci-dessous) remonte la légende jusqu'à
       toucher la coque : on lui rend l'air perdu. */
    .th-hero .th-demo-cap { margin: 1rem 0 0 !important; }
    /* ⚠️ Le gabarit fait 700px de haut : à côté d'une liste de quatre lignes, il
       creusait un vide de ~150px au-dessus du titre. On le réduit à l'échelle,
       ce qui ne change PAS la hauteur de sa boîte — d'où les marges négatives
       qui rattrapent la différence ((700 − 700×.78) / 2 = 77px). */
    .th-hero .phone-wrap { transform: scale(.78); margin-top: -77px; margin-bottom: -77px; }
    /* L'ombre d'origine est un noir à 65 % : calculée pour le fond sombre de la
       section démo de l'accueil, elle faisait une tache grise sur le blanc de la
       carte. Mêmes anneaux de coque, ombre portée adoucie et teintée à l'encre
       de la marque plutôt qu'au noir pur. */
    .th-hero .demo-phone {
      box-shadow:
        0 0 0 1px #3a3a5c, 0 0 0 3px #08081a, 0 0 0 4px #262640,
        0 26px 58px rgba(61,58,82,.26), 0 10px 24px rgba(61,58,82,.16),
        inset 0 1px 0 rgba(255,255,255,0.07);
    }
  }

  /* ── Affiche de la démo ──
     ⚠️ C'est une ATTENTE, plus un péage (corrigé le 12 août 2026). L'iframe
     n'est toujours pas écrite dans le HTML — elle tire generator.js (260 Ko) et
     ne doit pas concurrencer le premier affichage — mais elle se charge
     désormais TOUTE SEULE une fois la page rendue. Le bouton ne survit que pour
     les connexions 2G ou le mode « économiseur de données ».
     ⚠️ Ne pas revenir au chargement au clic seul : l'écran d'accueil du thème
     contient DÉJÀ son propre bouton « Lancer le décompte ». Deux boutons à la
     suite obligeaient à cliquer deux fois pour voir la première animation, et
     le premier clic ne décidait de rien.
     L'affiche est peinte en CSS — aucun fichier image à charger — et reprend les
     deux couleurs réelles du thème (rose #ff92d9→#ff2ea6, bleu #5ee2ff→#0091fb,
     relevés dans generator.js). */
  .th-play {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 26px; padding: 0; border: 0; cursor: pointer; font-family: inherit;
    background:
      linear-gradient(160deg, #5ee2ff, #0091fb) bottom / 100% 50% no-repeat,
      linear-gradient(202deg, #ff92d9, #ff2ea6) top / 100% 50% no-repeat;
  }
  .th-play-dial {
    width: 86px; height: 86px; border-radius: 50%;
    background: linear-gradient(180deg, #ff92d9 0 50%, #17c6ff 50% 100%);
    box-shadow: 0 0 0 5px rgba(255,255,255,.92), 0 12px 28px rgba(0,0,0,.28);
  }
  .th-play-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: #3d3a52; font-weight: 700; font-size: 15px;
    padding: .8rem 1.5rem; border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    transition: transform .15s ease;
  }
  .th-play:hover .th-play-pill { transform: translateY(-2px); }

  /* ── Barre d'achat collée en bas (téléphone) ──
     ⚠️ Elle n'existe QUE sous 900px : sur PC le bouton de la carte reste
     atteignable en remontant d'un geste, et une barre fixe y mangerait de la
     hauteur utile pour rien. */
  .th-sticky { display: none; }
  @media (max-width: 899px) {
    /* ⚠️ TÉLÉPHONE : le panneau d'achat de la carte est MASQUÉ (12 août 2026,
       owner) — le prix et le bouton ne vivent plus que dans la barre flottante.
       Deux zones d'achat à quelques centaines de pixels l'une de l'autre se
       lisaient comme deux offres, et le panneau teinté coupait la carte en deux
       juste sous la démo. Sur PC il reste, il n'y a pas de barre là-bas.
       ⚠️ Conséquence à ne pas oublier : le script plus bas observait le bouton
       de ce panneau pour décider d'afficher la barre. Masqué, il n'intersecte
       plus jamais — la barre resterait posée par-dessus le bouton final. Le
       script bascule sur le bouton de bas de page (voir son commentaire). */
    .th-buy { display: none; }
    /* ⚠️ Carte FLOTTANTE, pas un bandeau collé au bord de l'écran : détachée,
       elle se lit comme un objet posé au-dessus de la page plutôt que comme
       une extension du navigateur. Le conteneur ne porte que la position et
       l'animation ; toute l'apparence est sur .th-sticky-in, sinon l'ombre
       serait rognée par le bord de l'écran. */
    .th-sticky {
      display: block;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      padding: 0 .7rem calc(.7rem + env(safe-area-inset-bottom, 0px));
      transform: translateY(145%);
      transition: transform .36s cubic-bezier(.22, 1, .36, 1);
      /* Invisible mais toujours dans le flux : sans ça, elle intercepterait les
         appuis en bas d'écran alors qu'elle est censée être absente. */
      pointer-events: none;
    }
    .th-sticky.on { transform: translateY(0); pointer-events: auto; }
    .th-sticky-in {
      /* ⚠️ Plafonné et centré : sur tablette (768–899px) la barre occupait
         toute la largeur et le bouton s'étirait sur ~700px — plus large que
         long, il ne se lisait plus comme un bouton. Sur téléphone la limite
         n'est jamais atteinte, donc rien n'y change. */
      max-width: 560px; margin: 0 auto;
      position: relative;
      display: flex; align-items: center; gap: .7rem;
      /* ⚠️ Fond OPAQUE, jamais backdrop-filter : sur une barre fixe, le flou
         est recalculé à chaque image pendant le défilement — c'est exactement
         la piste identifiée pour les ralentissements du site. */
      background: #fff;
      border: 2px solid var(--dot); border-radius: 24px;
      padding: .55rem .55rem .55rem 1.15rem;
      box-shadow: 0 14px 34px rgba(61,58,82,.24), 0 3px 10px rgba(61,58,82,.12);
    }
    /* ⚠️ Un petit trait dégradé était posé en haut au centre : il ressemblait à
       une poignée de tiroir et laissait croire que la barre se fait glisser.
       Ne pas le remettre — un ornement qui promet une interaction inexistante
       est pire qu'aucun ornement. */
    .th-sticky-price {
      display: flex; flex-direction: column; line-height: 1.05; flex-shrink: 0;
      padding-right: .2rem;
    }
    .th-sticky-price b { font-family: 'Fredoka', sans-serif; font-size: 1.34rem; color: var(--brown); }
    .th-sticky-price small { font-size: .68rem; opacity: .6; margin-top: .22rem; }
    .th-sticky .btn {
      flex: 1; text-align: center; margin: 0;
      padding: .84rem .8rem; font-size: .97rem; border-radius: 40px;
      /* L'ombre dure de .btn (0 5px 0) jure dans une carte flottante :
         deux ombres de natures différentes à 4px l'une de l'autre. */
      box-shadow: 0 4px 14px rgba(238,95,142,.45);
    }
    .th-sticky .btn:active { transform: translateY(1px); }
    /* Place réservée en permanence : si on ne la réservait qu'à l'apparition de
       la barre, le contenu sauterait sous les doigts pendant le défilement. */
    .th-wrap { padding-bottom: 6.5rem; }
  }
  @media (prefers-reduced-motion: reduce) { .th-sticky { transition: none; } }

  /* Sous 400px, le libellé du bouton ne tient qu'en réduisant les retraits :
     mesuré, il repasse sur deux lignes sinon. (À 320px il y passe quand même —
     largeur devenue rare, et deux lignes centrées y restent lisibles.) */
  @media (max-width: 400px) {
    .th-buy { padding-left: .6rem; padding-right: .6rem; }
    .th-buy .btn { font-size: .95rem; padding-left: .5rem; padding-right: .5rem; }
  }

  /* ⚠️ ÉCRAN COURT — téléphone tenu en paysage (iPhone 14 Pro : 852×393).
     La maquette fait 700px de haut pour ~320px utiles sous la barre de
     navigation : elle remplissait tout l'écran et la barre d'achat lui passait
     dessus. La contrainte est la HAUTEUR, d'où max-height et non max-width —
     une règle en largeur ne distingue pas un iPhone couché d'un iPad.
     ⚠️ Sélecteur en DEUX niveaux obligatoire : le bloc ≥900px pose
     `.th-hero .phone-wrap`, qui bat `.phone-wrap` seul par spécificité, quel
     que soit l'ordre — sans ça la règle serait ignorée sur une fenêtre de
     bureau large et courte (1200×450).
     ⚠️ Marge calculée, pas choisie : 700 × (1 − .55) = 315px. */
  @media (max-height: 500px) and (orientation: landscape) {
    .th-hero .phone-wrap { transform: scale(.55); transform-origin: center top; margin: 0 0 -315px; }
    /* ⚠️ La barre d'achat est MASQUÉE ici. Une barre fixe couvre toujours le
       bas de ce qu'on regarde : sur un écran de 820px elle coûte 8% de la
       hauteur, sur 393px elle en coûte 20% — et elle se posait précisément sur
       le bouton de la démo. Les deux boutons d'achat de la page restent dans
       le flux, rien n'est perdu.
       ⚠️ La réserve de place en bas doit être annulée avec elle : elle est
       posée dans le bloc max-width:899px, qui s'applique aussi ici. Sans ça,
       104px de vide en bas de page pour une barre absente. Ce bloc doit donc
       rester APRÈS celui des 899px — même spécificité, c'est l'ordre qui
       tranche. */
    .th-sticky { display: none; }
    .th-wrap { padding-bottom: 2rem; }
  }

  @media (max-width: 520px) { .th-wrap h2 { font-size: 1.25rem; } }