/* Convertgence — feuille de style commune aux cinq pages (fr, en, de, es, zh).
   Une seule copie : ce qui change ici change sur toutes les pages.
   Version 2 (octobre 2026) : même identité que la première — deux verts du
   logo, héros au portable, cartes bento, défilé —, retouchée d'après l'audit
   Documents/Audits/site-2026-10/audit.md : contrastes mesurés, focus visible
   partout, menu des langues, thème qui suit le système, chinois. */
:root{
  /* Les deux verts du logo : #0F7F12 pour tout ce qui est vert, #083508 pour
     les aplats profonds. Les halos prennent en plus un vert clair (#5BD45F) :
     c'est une lumière, pas une couleur de texte. */
  --accent:#0F7F12; --accent-clair:#2FB534; --accent-profond:#083508;
  --halo-a:#2FB534; --halo-b:#0F7F12; --halo-c:#5BD45F;
  /* Un aplat vert sous du texte blanc garde #0F7F12 dans les deux thèmes :
     du blanc sur le vert éclairci du thème sombre (#2FB534) tombe à 2,7:1. */
  --accent-aplat:#0F7F12;
  --fond:#FFFFFF; --carte:#F4F6F4; --bordure:rgba(0,0,0,.07);
  --texte:#151815; --doux:#5A635A; --sur-accent:#FFFFFF;
  --chrome:#FAFBFA; --chrome-bord:rgba(0,0,0,.09);
  --trame:#E4E9E4; --trame-forte:#D2DAD2; --puits:#EDF0ED;
  /* Le rouge d'une erreur : la seule teinte hors identité, parce qu'elle
     appelle une action. 5,6:1 sur son fond rosé (mesuré) ; l'ancien #E4785F
     tombait à 2,2:1 en thème clair. */
  --erreur:#9E2A1C; --erreur-fond:rgba(190,60,40,.12);
  --rayon:30px; --large:1400px;
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  /* Sans cette ligne, le navigateur rend <dialog> et les champs natifs avec
     ses couleurs claires : texte noir, sur nos fonds sombres. */
  color-scheme:light;
}
/* Le thème suit le système par défaut, comme l'application depuis la 1.6.22 ;
   un choix explicite (Clair, Sombre) se garde dans le navigateur et pose
   data-theme. Les deux blocs ci-dessous sont IDENTIQUES : l'un pour le
   réglage du système, l'autre pour le choix du visiteur. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#2FB534; --accent-clair:#5BD45F; --accent-profond:#17561A;
    --halo-a:#5BD45F; --halo-b:#2FB534; --halo-c:#0F7F12; color-scheme:dark;
    --fond:#000000; --carte:#1A1E1A; --bordure:rgba(255,255,255,.08);
    --texte:#F1F4F1; --doux:#9AA39A; --sur-accent:#06210A;
    --chrome:#0A0C0A; --chrome-bord:rgba(255,255,255,.09);
    --trame:#1C211C; --trame-forte:#2A312A; --puits:#0D0F0D;
    --erreur:#FF8A7A; --erreur-fond:rgba(190,60,40,.18);
  }
}
:root[data-theme="dark"]{
  --accent:#2FB534; --accent-clair:#5BD45F; --accent-profond:#17561A;
  --halo-a:#5BD45F; --halo-b:#2FB534; --halo-c:#0F7F12; color-scheme:dark;
  --fond:#000000; --carte:#1A1E1A; --bordure:rgba(255,255,255,.08);
  --texte:#F1F4F1; --doux:#9AA39A; --sur-accent:#06210A;
  --chrome:#0A0C0A; --chrome-bord:rgba(255,255,255,.09);
  --trame:#1C211C; --trame-forte:#2A312A; --puits:#0D0F0D;
  --erreur:#FF8A7A; --erreur-fond:rgba(190,60,40,.18);
}
/* Chinois simplifié : les polices du système qui portent les idéogrammes, un
   interligne plus haut, et aucun resserrage des titres — une lettre latine
   supporte -0.025em, un idéogramme non. Les capitales espacées des petites
   étiquettes n'ont pas d'équivalent : l'espacement est retiré. */
html:lang(zh-Hans){--police:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
html:lang(zh-Hans) body{line-height:1.8}
html:lang(zh-Hans) h1,html:lang(zh-Hans) h2,html:lang(zh-Hans) h3,html:lang(zh-Hans) h4{letter-spacing:0;line-height:1.25}
html:lang(zh-Hans) .rubrique,html:lang(zh-Hans) .zone .etiq,html:lang(zh-Hans) .fiche-xmp b,
html:lang(zh-Hans) .duo .drapeau,html:lang(zh-Hans) .cadeau .quoi{letter-spacing:0}

*{box-sizing:border-box}
/* Texte pour les lecteurs d'écran seulement (étiquette d'un champ, nom d'un
   groupe) : présent dans le document, invisible à l'écran. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html{background:var(--fond);overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--fond);color:var(--texte);overflow-x:clip;
  font:17px/1.6 var(--police);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
p{margin:0}
.enveloppe{max-width:var(--large);margin:0 auto;padding:0 24px}
.accent{color:var(--accent)}
strong{font-weight:650;color:var(--texte)}

/* ── Le focus, visible partout ─────────────────────
   Un anneau vert à distance du contour, pour tout ce qui se prend au clavier :
   liens, boutons, résumé du menu, options du téléchargement. Les champs de
   saisie ont le leur (plus bas). :focus-visible ne se montre qu'au clavier :
   le clic ne laisse pas d'anneau derrière lui. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.bouton:focus-visible,.pilule nav a:focus-visible,.themes button:focus-visible,
.langues summary:focus-visible,.langues a:focus-visible{outline-offset:3px;border-radius:999px}
.fermer:focus-visible{outline-offset:2px;border-radius:50%}
.option-os:focus-visible{outline-offset:2px;border-radius:18px}
.marque:focus-visible{border-radius:8px}

/* Le lien d'évitement : invisible jusqu'au premier Tab, puis une pastille en
   haut à gauche. Il mène au contenu, par-dessus la barre. */
.evitement{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;
  background:var(--accent-aplat);color:#fff;font-weight:650;font-size:.9rem;transition:top .15s}
.evitement:focus{top:16px;outline-color:var(--texte)}

/* ── Barre flottante ── */
header{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 14px}
.pilule{display:flex;align-items:center;gap:12px;max-width:100%;
  background:color-mix(in srgb,var(--carte) 78%,transparent);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--bordure);border-radius:999px;
  /* 13 px à droite, et non 8 : la pilule est à coins pleinement ronds, et à
     17 px de son centre la courbe rentre de 6,3 px. Un bouton de 34 px de haut
     y passait derrière l'arrondi avec la marge d'origine. */
  padding:7px 13px 7px 16px}
/* Le logotype horizontal, dans ses deux versions : le dessin fourni, et une
   copie où le vert très sombre (#083508) passe au blanc pour rester lisible
   sur fond noir. Le thème peut être forcé par le visiteur, d'où deux images
   plutôt qu'un <picture>, qui ne suivrait que le réglage du système. */
.marque{display:flex;align-items:center;padding:0 4px}
.marque img{height:28px;width:auto;display:block}
.marque .logo-sombre{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marque .logo-clair{display:none}
  :root:not([data-theme="light"]) .marque .logo-sombre{display:block}
}
:root[data-theme="dark"] .marque .logo-clair{display:none}
:root[data-theme="dark"] .marque .logo-sombre{display:block}
.pilule nav{display:flex;gap:2px;align-items:center}
.pilule nav a{padding:7px 13px;border-radius:999px;font-size:.87rem;color:var(--doux);white-space:nowrap;
  transition:color .15s,background-color .15s}
.pilule nav a:hover{color:var(--texte);background:color-mix(in srgb,var(--texte) 8%,transparent)}
/* Le bouton du menu : texte BLANC sur l'aplat vert, dans les deux thèmes. */
.pilule nav a.bouton{color:#fff;background:var(--accent-aplat)}
.pilule nav a.bouton:hover{color:#fff;background:var(--accent-aplat)}
@media(max-width:820px){.pilule nav a.masquable{display:none}}

/* ── Le menu des langues ───────────────────────────
   Chaque langue est une PAGE, pas une bascule : c'est la seule façon d'en
   référencer cinq séparément. Un <details> : il s'ouvre sans script, Entrée
   et Espace l'ouvrent au clavier, Échap et un clic ailleurs le referment (par
   le script). Le résumé porte le drapeau rond de la langue courante, comme
   le sélecteur d'avant ; la liste, chaque langue dans sa propre langue, pour
   qu'un visiteur la reconnaisse sans lire celle de la page. */
.langues{position:relative;margin:0 6px 0 4px}
.langues summary{list-style:none;display:flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;
  border-radius:999px;cursor:pointer;color:var(--doux);transition:background-color .15s,box-shadow .15s}
.langues summary::-webkit-details-marker{display:none}
.langues summary:hover{background:color-mix(in srgb,var(--texte) 8%,transparent)}
.langues[open] summary{background:color-mix(in srgb,var(--texte) 8%,transparent)}
.langues summary .chevron{width:10px;height:10px;transition:transform .2s}
.langues[open] summary .chevron{transform:rotate(180deg)}
.drapeau-langue{display:block;width:24px;height:24px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.08)}
.langues ul{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 10px);min-width:190px;
  background:var(--carte);border:1px solid var(--bordure);border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);z-index:70;
  animation:menu-langues .18s cubic-bezier(.22,1,.36,1) both}
@keyframes menu-langues{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.langues li{margin:0}
.pilule nav .langues a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  font-size:.9rem;color:var(--texte)}
.pilule nav .langues a:hover{background:color-mix(in srgb,var(--texte) 8%,transparent)}
.pilule nav .langues a[aria-current="page"]{color:var(--accent);font-weight:650}
.pilule nav .langues a[aria-current="page"]::after{content:"✓";margin-left:auto;font-size:.8rem}

/* ── Boutons ── */
.bouton{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--sur-accent);
  border:0;cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;
  font-weight:650;font-size:1rem;padding:14px 30px;border-radius:999px;white-space:nowrap;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease,filter .18s ease}
/* Un seul geste au survol, partout : le bouton monte d'un cheveu, s'éclaircit
   et pose une lueur verte sous lui. Enfoncé, il revient à plat. */
.bouton:hover{filter:brightness(1.08);transform:translateY(-2px);
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 42%,transparent)}
.bouton:active{transform:translateY(0);box-shadow:none;filter:brightness(.98)}
.bouton.mini{padding:0 17px;font-size:.86rem;min-height:30px;line-height:30px;box-sizing:border-box}
/* Même geste au survol que les liens de la barre : la bordure et le texte
   s'éclairent, rien ne bouge et rien ne brille. Un bouton secondaire n'a pas à
   se soulever comme le bouton principal. */
.bouton.clair{background:transparent;color:var(--doux);border:1px solid var(--bordure);
  box-shadow:none;transition:color .18s ease,border-color .18s ease}
.bouton.clair:hover{background:transparent;color:var(--texte);border-color:var(--doux);
  box-shadow:none;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.bouton,.bouton:hover{transition:none;transform:none}}

/* ── Héros ── */
.heros{text-align:center;padding:160px 0 0;position:relative}
.heros > *{position:relative;z-index:1}
/* L'icône arrive recadrée sur son carré blanc (Outils/images-site.txt) : 90 px
   et des marges de 11 px occupent la place des 112 px d'avant, marges
   transparentes comprises. Son ombre est un box-shadow arrondi comme elle :
   un filter: drop-shadow est rogné au cadre de l'image par Safari sur iPhone,
   qui montrait un carré gris aux bords nets (26 septembre 2026). 21 % :
   l'arrondi le plus grand qui ne rogne pas l'icône (22,7 % mesurés). */
.heros .icone{width:90px;height:90px;margin:11px auto 43px;display:block;border-radius:21%;
  box-shadow:0 20px 46px rgba(15,127,18,.28)}
.heros h1{font-size:clamp(2.35rem,6vw,4.3rem);max-width:17ch;margin:0 auto}
/* Deux lignes imposées dès 560 px : chaque moitié est insécable, et la taille
   suit la largeur de l'écran dès que la plus longue ne tiendrait plus.
   --h1-ratio : la plus longue ligne en multiples de la taille de police,
   MESURÉE dans le navigateur pour chaque langue et posée par la page (le
   français fait 15,0, l'anglais 12,5, l'allemand davantage). Sur téléphone,
   deux lignes voudraient un titre de 19 px, plus petit que le texte courant :
   il retrouve alors sa taille et passe à la ligne comme les autres. */
.heros h1.deux-lignes{max-width:none;font-size:min(clamp(2.35rem,6vw,4.3rem),calc((100vw - 56px) / var(--h1-ratio,16.6)))}
.heros h1.deux-lignes > span{display:block;white-space:nowrap}
@media(max-width:560px){
  .heros h1.deux-lignes{font-size:clamp(1.95rem,8.4vw,2.6rem)}
  .heros h1.deux-lignes > span{display:inline;white-space:normal}
}
/* 42 em et non 58 ch : sur ordinateur, le chapeau tient en deux lignes dans
   les cinq langues (le français en demandait 720 points à 18 px ; 58 ch en
   donnaient 659, d'où trois lignes). Lignes équilibrées : la seconde ne finit
   pas sur deux mots. Demandé par le propriétaire le 30 octobre 2026. */
.chapeau{margin:26px auto 0;max-width:42em;color:var(--doux);font-size:clamp(1rem,1.5vw,1.13rem);line-height:1.62;
  text-wrap:balance}
.heros .actions{margin-top:36px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Illustrations des cartes ───────────────────────
   Maquettes dessinées en CSS : une fenêtre macOS schématique (la carte des
   champs), une pile de tirages (Tout un reportage). Le héros, lui, montre
   une vraie capture. */
.fenetre{background:var(--puits);border-radius:9px;overflow:hidden}
.fenetre.cadree{border:1px solid var(--chrome-bord);border-radius:13px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
.barre{height:33px;background:var(--carte);border-bottom:1px solid var(--chrome-bord);
  display:flex;align-items:center;gap:7px;padding:0 13px}
.feu{width:10px;height:10px;border-radius:50%;background:var(--trame-forte)}

/* ── La pile d'un reportage ─────────────────────────
   Une pile de feuilles vue en isométrie, dessinée comme les autres maquettes
   (aplats de la trame, un paysage schématique sur celle du dessus) et un halo
   vert. Immobile, à la demande du propriétaire. */
.pile{position:relative;height:270px;max-width:400px;margin:0 auto}
.pile::before{content:"";position:absolute;left:28%;top:22%;width:44%;height:56%;border-radius:50%;
  background:var(--accent-clair);filter:blur(56px);opacity:.28}
.pile-ombre{position:absolute;left:50%;top:71%;width:80%;height:24%;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,0,0,.2),transparent);filter:blur(4px)}
/* Chaque feuille monte de 10 px au-dessus de la précédente, puis la rotation
   la couche à plat : sans perspective, c'est une vue isométrique. */
.feuille{position:absolute;left:50%;top:67%;width:63%;aspect-ratio:3/2;border-radius:16px;
  background:var(--fond);border:1px solid var(--chrome-bord);
  box-shadow:0 1px 0 color-mix(in srgb,var(--texte) 10%,transparent);
  transform:translate(-50%,-50%) translateY(calc(var(--i) * -10px)) rotateX(58deg) rotateZ(-38deg)}
.feuille:nth-child(odd){background:color-mix(in srgb,var(--fond) 70%,var(--carte))}
/* Celle du dessus : un ciel, un soleil, deux crêtes, et un liseré vert. */
.feuille.dessus{padding:9px;border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--fond)}
.feuille.dessus::before{content:"";display:block;height:100%;border-radius:8px;
  background:radial-gradient(circle at 74% 30%,color-mix(in srgb,var(--accent) 45%,var(--trame-forte)) 0 11px,transparent 12px),
    linear-gradient(165deg,var(--puits),var(--trame))}
.feuille.dessus::after{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:52%;
  border-radius:0 0 8px 8px;background:var(--trame-forte);
  clip-path:polygon(0 100%,0 62%,20% 26%,37% 58%,57% 8%,78% 50%,100% 30%,100% 100%)}

/* ── Petites illustrations ─────────────────────── */
.stat.petit{font-size:clamp(2rem,3.6vw,2.7rem)}
/* Les fiches des langues : une légende par langue, posées comme des fiches
   sur la carte. Cinq depuis la 1.7 ; en deux colonnes sur les écrans larges. */
.duo{display:grid;grid-template-columns:1fr;gap:9px}
.duo > div{background:var(--fond);border:1px solid var(--bordure);border-radius:9px;padding:11px 13px}
.duo .drapeau{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:7px}
/* Le drapeau rond du menu des langues, en petit, devant le nom de chaque langue. */
.duo .drapeau .drapeau-langue{width:16px;height:16px}
.duo p{font-size:.88rem;color:var(--texte);margin:0}
/* Cinq fiches en lignes compactes (27 octobre 2026, pour réduire la hauteur
   du bloc) : drapeau et nom à gauche, légende à droite ; empilés sur un
   téléphone. */
.duo.cinq{grid-template-columns:1fr;gap:6px}
.duo.cinq > div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:center;padding:9px 13px}
.duo.cinq .drapeau{margin:0}
.duo.cinq p{font-size:.85rem;line-height:1.45}
@media(max-width:460px){.duo.cinq > div{grid-template-columns:1fr;gap:4px}}

/* ── Illustrations denses ──────────────────────── */
.fleche{text-align:center;color:var(--doux);font-size:1rem;line-height:1;margin:1px 0}
.saisies{background:var(--puits);border:1px solid var(--bordure);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:11px}
.mini-ligne{display:flex;align-items:center;gap:10px}
.mini-ligne .cle{font-size:.78rem;color:var(--doux);width:74px;flex:0 0 74px}
.mini-ligne .val{flex:1;background:var(--fond);border:1px solid var(--bordure);border-radius:7px;
  padding:7px 9px;font-size:.82rem;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-ligne .val.tenu{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* « ✓ GPS » : la coche en vert, le mot en couleur de texte — en vert, à
   cette taille sur le fond du puits, il tombait juste sous 4,5:1. */
.sceau{font-size:.72rem;font-weight:700;color:var(--texte);white-space:nowrap;
  display:flex;align-items:center;gap:4px}
.sceau::before{content:"✓";color:var(--accent)}
.etapes-mini{display:flex;flex-direction:column;gap:10px}
.etape-mini{display:flex;align-items:center;gap:11px}
.etape-mini .num{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent);color:var(--sur-accent);
  display:grid;place-items:center;font-size:.72rem;font-weight:700}
.etape-mini .corps-mini{flex:1;background:var(--puits);border:1px solid var(--bordure);
  border-radius:9px;padding:9px 11px;font-size:.82rem;color:var(--doux)}
.etape-mini .corps-mini.fait{color:var(--accent);font-weight:600}
.cases{display:flex;gap:6px}
.cases span{width:30px;height:36px;border-radius:7px;background:var(--fond);
  border:1px solid var(--bordure);display:grid;place-items:center;
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--texte)}

.frontiere{display:flex;flex-direction:column;gap:9px}
.zone{border-radius:11px;padding:12px 13px;border:1px solid var(--bordure);background:var(--puits)}
.zone .etiq{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--doux);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.zone.dehors{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.zone.dehors .etiq{color:var(--accent)}
.recharge{display:flex;justify-content:space-between;font-size:.86rem}
.recharge .montant{color:var(--accent);font-weight:650}
.carte-bancaire{font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--texte);
  letter-spacing:.09em;display:flex;justify-content:space-between;align-items:center;gap:10px}
.carte-bancaire .expire{font-size:.72rem;color:var(--doux);font-family:var(--police)}
.zone .note{font-size:.78rem;color:var(--doux);margin-top:9px}
.coordonnees{font:600 14px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--texte);letter-spacing:.02em}

/* ── Fenêtres (contact, téléchargement, mentions) ──
   <dialog> natif : le focus y reste, Échap referme. L'ouverture est une
   légère montée ; la fermeture, la même à l'envers, jouée par le script avant
   close(). Des TRANSITIONS, pas des animations : l'état de repos de la boîte
   est visible. Une animation à l'arrêt (onglet en arrière-plan, navigateur
   qui ne la joue pas) laissait la boîte à son état de départ, invisible —
   mesuré dans le navigateur intégré. @starting-style donne l'état d'entrée ;
   un navigateur qui l'ignore ouvre sans montée, mais ouvre. Avec « réduire les
   animations », rien ne bouge. */
dialog.modale{border:0;padding:0;background:transparent;color:var(--texte);max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible}
dialog.modale::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(5px);transition:opacity .2s ease}
dialog.modale.se-ferme::backdrop{opacity:0}
@starting-style{dialog.modale[open]::backdrop{opacity:0}}
.modale-boite{opacity:1;transform:translate(-50%,-50%);
  transition:opacity .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1)}
dialog.modale.se-ferme .modale-boite{opacity:0;transform:translate(-50%,-50%) translateY(14px) scale(.97);
  transition-duration:.18s,.18s;transition-timing-function:ease,ease}
@starting-style{dialog.modale[open] .modale-boite{opacity:0;transform:translate(-50%,-50%) translateY(14px) scale(.97)}}
@media (prefers-reduced-motion:reduce){
  dialog.modale::backdrop,.modale-boite,dialog.modale.se-ferme .modale-boite{transition:none}}
.modale-boite{background:var(--carte);border:1px solid var(--bordure);border-radius:24px;
  width:min(520px,calc(100vw - 32px));margin:auto;padding:32px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  box-shadow:0 30px 80px rgba(0,0,0,.5);max-height:calc(100vh - 32px);overflow-y:auto}
.modale-boite h3{font-size:1.4rem;margin-bottom:8px;color:var(--texte);padding-right:36px}
.modale-boite .intro{color:var(--doux);font-size:.94rem;margin-bottom:22px}
/* Mentions légales : un texte à lire, plus large, aligné à gauche. */
.modale-boite.texte-legal{width:min(640px,calc(100vw - 32px));text-align:left}
.texte-legal h4{font-size:1rem;margin:20px 0 6px;color:var(--texte)}
.texte-legal p{color:var(--doux);font-size:.92rem;line-height:1.65}
.texte-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.fermer{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;cursor:pointer;
  border-radius:50%;background:color-mix(in srgb,var(--texte) 8%,transparent);color:var(--texte);
  font-size:20px;line-height:1;display:grid;place-items:center;transition:background-color .15s}
.fermer:hover{background:color-mix(in srgb,var(--texte) 15%,transparent)}
.rangee-form{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.rangee-form label{font-size:.85rem;font-weight:600;color:var(--texte)}
.rangee-form input,.rangee-form textarea{
  font:inherit;font-size:.95rem;color:var(--texte);background:var(--fond);
  border:1px solid var(--bordure);border-radius:11px;padding:11px 13px;width:100%}
.rangee-form textarea{min-height:120px;resize:vertical}
.rangee-form input:focus-visible,.rangee-form textarea:focus-visible,.defi input:focus-visible{
  outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent;border-radius:11px}
/* Le piège à robots : invisible pour l'œil, rempli par les remplisseurs
   automatiques. Ni `display:none` ni `hidden`, que certains robots détectent. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.defi{display:flex;align-items:center;gap:12px;background:var(--puits);
  border:1px solid var(--bordure);border-radius:11px;padding:12px 14px;margin-bottom:18px}
.defi .question{font-weight:650;font-size:.95rem;white-space:nowrap;color:var(--texte)}
.defi input{width:92px;text-align:center;font:inherit;font-size:.95rem;
  color:var(--texte);background:var(--fond);border:1px solid var(--bordure);
  border-radius:9px;padding:9px 10px}
.rangee-form input::placeholder,.rangee-form textarea::placeholder{color:var(--doux);opacity:.9}
.message-form{font-size:.9rem;margin-top:14px;padding:11px 13px;border-radius:10px;display:none}
.message-form.visible{display:block}
.message-form.ok{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--texte)}
.message-form.ok::before{content:"✓ ";color:var(--accent);font-weight:700}
.message-form.erreur{background:var(--erreur-fond);color:var(--erreur)}
.modale-boite .bouton{width:100%;justify-content:center}
.modale-boite .bouton[disabled]{opacity:.55;pointer-events:none}

/* ── Halos : le fluide de couleur ───────────────────
   Trois disques flous qui ORBITENT. L'astuce n'est pas la rotation — faire
   tourner un cercle sur lui-même ne produit rien — mais le point de pivot
   décalé en bas-centre : le disque décrit alors un cercle de son propre rayon.
   200 px, flou de 100 px, rotations de 5 et 6 s, dont une inversée pour que
   les trois ne soient jamais en phase. */
.halos{position:absolute;left:0;right:0;top:-26%;height:78%;z-index:0;pointer-events:none}
.halo{position:absolute;width:260px;height:260px;border-radius:50%;
  filter:blur(100px);transform-origin:130px 260px;
  animation:orbite 5s linear infinite}
.halo.a{background:var(--halo-a);left:6%;top:16%;opacity:.62}
.halo.b{background:var(--halo-b);left:42%;top:0%;opacity:.72;
  animation-duration:6s;animation-direction:reverse}
.halo.c{background:var(--halo-c);left:76%;top:16%;opacity:.66}
@keyframes orbite{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.halo{animation:none}}

/* ── Le montage : MacBook derrière, fenêtre devant ──
   Au défilement, les deux couches vont en sens INVERSE : la fenêtre part
   grande et rétrécit en descendant, le portable apparaît en montant et en
   grandissant. C'est ce croisement qui donne l'impression que la fenêtre se
   pose dans l'écran. */
.scene{max-width:1080px;margin:170px auto 0;padding:0 24px;position:relative;z-index:1}
.montage{position:relative}
.portable{position:relative;z-index:1;transform-origin:center bottom;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.5));
  opacity:0;transform:translateY(15%) scale(.9);will-change:transform,opacity}
/* Le portable et le fond d'écran sont des FONDS, pas des <img> : Google
   prenait le châssis — un écran noir, la capture étant posée par-dessus —
   pour vignette du site dans ses résultats. */
.chassis{display:block;width:100%;aspect-ratio:2408/1472;background:center/100% 100% no-repeat}
/* Dalle mesurée au pixel dans portable.png (2408×1472) : x 198→2207, y 13→1327. */
.dalle{position:absolute;left:8.223%;top:0.883%;width:83.472%;height:89.266%;
  overflow:hidden;border-radius:2% 2% 0 0 / 3.5% 3.5% 0 0}
.bureau{position:absolute;inset:0;background:#0B1418 center/cover no-repeat}
/* La fenêtre flottante : 90 % de la largeur de l'écran, centrée dedans au
   pixel (écran : left 8.223 %, largeur 83.472 % → 75.12 % ; gauche 12.40 %).
   Le haut se déduit du rapport de la capture : 2940 × 1846 → 1.5926, d'où
   7.0 %. Arrondie comme la capture (Outils/arrondir-capture.swift : 68 px sur
   2 940 × 1 846), en pourcentages pour valoir à toutes les tailles. */
.flottante{position:absolute;z-index:2;
  left:12.40%;top:7.0%;width:75.12%;
  border-radius:2.31% / 3.68%;overflow:hidden;
  transform-origin:center center;
  transform:translateY(-26%) scale(1.18);will-change:transform;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.flottante img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){
  .portable{opacity:1;transform:none}
  .flottante{transform:none}
}

/* ── Déclaration ── */
.declaration{text-align:center;padding:clamp(88px,13vw,150px) 0;position:relative;z-index:2}
.declaration h2{font-size:clamp(1.75rem,4.3vw,2.9rem);line-height:1.16}
.declaration h2 span{display:block}
.declaration h2 span.hors-mobile{display:inline}

/* ── Les rubriques ──────────────────────────────────
   Un titre de section court et visible au-dessus de chaque groupe de cartes :
   il structure le document pour les moteurs et les lecteurs d'écran, et
   donne à l'œil un repère quand un lien de la barre y mène. En vert, en
   capitales espacées : un repère, pas un titre qui concurrence les cartes. */
.rubrique{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin:0 0 14px 6px;letter-spacing:.1em}
.rubrique + .bento{margin-top:0}
.bento + .rubrique,.appel + .rubrique{margin-top:clamp(40px,5vw,64px)}

/* ── Bento ── */
.bento{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:24px}
.bento.inverse{grid-template-columns:1fr 2fr}
.bento.trois{grid-template-columns:repeat(3,1fr)}
.bento.deux{grid-template-columns:1fr 1fr}
.bento.trois .carte{min-height:300px}
/* Tablettes et petits portables : deux colonnes ÉGALES. */
@media(max-width:1000px){
  .bento,.bento.inverse{grid-template-columns:1fr 1fr}
  .bento.trois{grid-template-columns:1fr 1fr}
  .bento.trois .carte:last-child{grid-column:span 2;min-height:0}
  .visuel.a-droite{margin-top:auto;padding-top:30px}
}
@media(max-width:700px){
  .bento,.bento.inverse,.bento.trois,.bento.deux{grid-template-columns:1fr}
  .bento.trois .carte:last-child{grid-column:auto}
}
/* Téléphone couché : hauteur très faible, le héros doit se tasser. */
@media(max-height:520px) and (orientation:landscape){
  .heros{padding-top:74px}
  .heros .icone{width:45px;height:45px;margin:5.5px auto 19.5px}
  .scene{margin-top:46px}
}
/* Une carte ne se soulève plus au survol : elle n'est pas un lien, et un
   objet qui bouge sous le pointeur promet un clic qui ne mène nulle part. */
.carte{background:var(--carte);border-radius:var(--rayon);padding:38px;overflow:hidden;
  display:flex;flex-direction:column;min-height:340px}
.carte h3{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:14px}
.carte p{color:var(--doux);font-size:.98rem}
.carte p + p{margin-top:13px}
.visuel{margin-top:auto;padding-top:34px}
.visuel.a-droite{margin-top:auto;padding-top:30px}
.visuel .legende{font-size:.93rem;color:var(--doux)}
.visuel .legende.avant{margin-bottom:6px}
.visuel .legende.apres{margin-bottom:18px}
.puces{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:9px}
.puces li{border:1px solid var(--bordure);background:color-mix(in srgb,var(--texte) 4%,transparent);
  border-radius:999px;padding:8px 16px;font-size:.91rem;font-weight:550}
.stat{font-size:clamp(2.7rem,5vw,3.7rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:10px}

/* ── Les fonctions, en grille ───────────────────────
   Ce que l'application sait faire, en cartes courtes : une icône, un titre,
   deux lignes. Trois colonnes, deux sur tablette, une sur téléphone. La
   carte « Bientôt » (envoi direct au serveur) est marquée comme à venir :
   le site n'annonce rien que l'app ne fait pas sans le dire. */
.fonctions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.fonction{background:var(--carte);border-radius:22px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;
  min-height:0}
.fonction svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fonction h3{font-size:1.08rem;margin:4px 0 0;letter-spacing:-.01em}
.fonction p{font-size:.92rem;color:var(--doux);margin:0}
.fonction.a-venir{border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);background:transparent}
.fonction .badge{align-self:flex-start;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:4px 10px}
@media(max-width:1000px){.fonctions{grid-template-columns:1fr 1fr}
  /* Neuf cartes depuis le 27 octobre 2026 : en deux colonnes, la dernière,
     seule sur sa rangée, prend toute la largeur. */
  .fonctions .fonction:last-child:nth-child(odd){grid-column:1 / -1}}
@media(max-width:700px){.fonctions{grid-template-columns:1fr;gap:12px;margin-bottom:14px}}

/* ── Appel ── */
.appel{background:var(--accent-aplat);border-radius:var(--rayon);
  padding:26px 34px;margin-bottom:24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;color:#fff}
.appel svg{flex:0 0 auto;stroke:#fff}
.appel .texte{flex:1;min-width:250px}
.appel h3{font-size:clamp(1.25rem,2vw,1.6rem);color:#fff;margin-bottom:5px}
.appel p{color:rgba(255,255,255,.94);font-size:.95rem;max-width:56ch}
/* Une seule ligne au-delà du téléphone. Insécable, le texte ne rétrécit plus
   sous sa longueur : s'il manque de place, c'est le bouton qui passe à la
   ligne, jamais la phrase. */
@media(min-width:701px){.appel p.une-ligne{white-space:nowrap;max-width:none}}
.appel .bouton{background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(4px)}
.appel .bouton:hover{background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.72);box-shadow:none;filter:none}
.appel .bouton:focus-visible{outline-color:#fff}

/* ── Pied ── */
footer{border-top:1px solid var(--bordure);margin-top:clamp(70px,10vw,120px);padding:66px 0 34px}
.pied-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:44px;text-align:center}
.pied-bloc svg{stroke:var(--texte);opacity:.9;margin-bottom:14px}
.pied-bloc h4{font-size:1.02rem;margin-bottom:9px}
.pied-bloc p{color:var(--doux);font-size:.93rem;margin-bottom:10px}
.pied-bloc a.lien{color:var(--accent);font-size:.93rem;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:transparent;transition:text-decoration-color .15s}
.pied-bloc a.lien:hover{text-decoration-color:currentColor}
.pied-bas{margin-top:56px;padding-top:26px;border-top:1px solid var(--bordure);
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:center;
  color:var(--doux);font-size:.83rem}
.themes{display:flex;gap:2px;background:color-mix(in srgb,var(--texte) 7%,transparent);
  border-radius:999px;padding:3px}
.themes button{border:0;background:transparent;color:var(--doux);font:inherit;font-size:.8rem;
  padding:6px 15px;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s}
.themes button:hover{color:var(--texte)}
.themes button[aria-pressed="true"]{background:var(--fond);color:var(--texte);
  box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* Les cinq langues, au pied : des liens ordinaires, visibles à toutes les
   tailles — sur téléphone, où la barre est réduite, c'est ici qu'on change. */
.pied-langues{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;align-items:center}
.pied-langues a{padding:5px 9px;border-radius:999px;color:var(--doux)}
.pied-langues a:hover{color:var(--texte);background:color-mix(in srgb,var(--texte) 7%,transparent)}
.pied-langues a[aria-current="page"]{color:var(--accent);font-weight:650}
/* Le texte légal garde sa pleine couleur : à 70 % d'opacité il tombait à 3,2:1. */
.legal{margin-top:22px;text-align:center;color:var(--doux);font-size:.8rem;line-height:1.85}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent}
.legal a:hover{text-decoration-color:currentColor}

/* ── Une carte seule sur sa rangée ──────────────────
   Le texte à gauche, l'illustration à droite : une carte pleine largeur dont
   le texte courrait sur 1 300 px se lirait mal. */
.bento.seul{grid-template-columns:1fr}
.carte.etendue{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;min-height:0}
.carte.etendue .visuel{margin:0;padding:0}
.carte.etendue > :not(.visuel){align-self:start}
@media(max-width:1000px){.carte.etendue{grid-template-columns:1fr;gap:0}
  .carte.etendue .visuel{padding-top:30px}}

/* ── Les champs ─────────────────────────────────────
   Une fenêtre qui liste des champs réels, tous remplis : chacun arrive à sa
   place dans le fichier. */
.champs-xmp{background:var(--fond)}
.champ-xmp{display:grid;grid-template-columns:18px minmax(0,9.5em) minmax(0,1fr);gap:12px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--bordure);font-size:.82rem}
.champ-xmp:last-child{border-bottom:0}
/* La coche : le texte sur l'aplat prend la couleur « sur accent », lisible
   dans les deux thèmes (du blanc sur le vert sombre tombait à 2,7:1). */
.champ-xmp .coche{width:16px;height:16px;border-radius:5px;background:var(--accent);color:var(--sur-accent);
  display:grid;place-items:center;font-size:.64rem;font-weight:800;line-height:1}
.champ-xmp .nom{font-size:.8rem;font-weight:650;line-height:1.3;color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.champ-xmp .valeur{color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etiquettes{display:flex;gap:5px;overflow:hidden;white-space:nowrap}
.etiquettes span{border-radius:999px;padding:2px 9px;font-size:.76rem;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.barre .titre-fenetre{margin-left:8px;font-size:.76rem;font-weight:600;color:var(--doux)}

/* ── L'appel et ses crédits offerts ──────────────── */
.cadeau{flex:0 0 auto;display:flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.14);border:1px dashed rgba(255,255,255,.62);
  border-radius:18px;padding:12px 18px 12px 14px}
.cadeau svg{stroke:#fff;flex:0 0 auto}
.cadeau .nombre{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.cadeau .quoi{font-size:.8rem;line-height:1.25;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ── Le défilé ──────────────────────────────────────
   Des photographies qui passent de droite à gauche sur un arc, chacune avec
   la fiche qu'on lui a écrite. Les cartes sont posées par le script
   (assets/js/site.js) : position sur l'arc et inclinaison se calculent
   ensemble, à chaque image. Sans script, elles restent alignées et se
   parcourent au doigt. */
.defile{position:relative;overflow:hidden;margin:clamp(34px,5vw,64px) 0 clamp(8px,2vw,24px);
  padding:24px 0 0}
.defile-piste{position:relative;height:var(--haut-defile,470px)}
.defile-carte{position:absolute;left:0;top:0;width:var(--large-carte,280px);padding-bottom:62px;margin:0;will-change:transform}
/* La fiche chevauche le bas de la photo et déborde dessous : elle se lit
   « posée sur » l'image sans en cacher le sujet — à condition que le sujet
   soit au-dessus des 18 % du bas, ce que vérifie le cadre choisi dans
   Outils/images-site.txt. Les photos arrivent recadrées en 4:5. */
.defile-carte img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:24px;background:var(--carte);box-shadow:0 18px 40px rgba(0,0,0,.2)}
/* Fond à 92 % (86 avant) : l'étiquette verte garde 4,7:1 même sur une photo
   de gris moyen (mesuré). */
.fiche-xmp{position:absolute;left:14px;right:14px;bottom:0;border-radius:18px;padding:12px 14px;
  background:color-mix(in srgb,var(--fond) 92%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--bordure);box-shadow:0 10px 26px rgba(0,0,0,.16);
  display:flex;flex-direction:column;gap:6px}
.fiche-xmp div{display:flex;flex-direction:column;gap:1px;min-width:0}
.fiche-xmp b{font-size:.68rem;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fiche-xmp span{font-size:.78rem;line-height:1.3;color:var(--texte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Les bulles de mots-clés : posées et retirées par le script, une à la fois,
   sur une carte visible. Elles naissent, montent d'un cheveu et s'effacent. */
.bulle{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;
  display:flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;line-height:1.2;color:#151815;
  background:rgba(255,255,255,.93);box-shadow:0 6px 18px rgba(0,0,0,.22);
  animation:bulle 2.8s cubic-bezier(.22,1,.36,1) both}
.bulle::before{content:"";width:6px;height:6px;border-radius:50%;background:#0F7F12;flex:0 0 auto}
@keyframes bulle{
  0%{opacity:0;transform:translateY(8px) scale(.82)}
  14%{opacity:1;transform:translateY(0) scale(1)}
  78%{opacity:1;transform:translateY(-4px) scale(1)}
  100%{opacity:0;transform:translateY(-12px) scale(.96)}}
/* Sans script : une rangée qui défile au doigt. */
.defile:not(.anime) .defile-piste{display:flex;gap:18px;overflow-x:auto;height:auto;padding:0 24px 24px;
  scroll-snap-type:x mandatory}
.defile:not(.anime) .defile-carte{position:relative;flex:0 0 var(--large-carte,270px);scroll-snap-align:center}
@media(max-width:700px){
  .defile{--large-carte:210px;--haut-defile:400px}
  .defile-carte{padding-bottom:54px}
  .defile-carte img{border-radius:19px}
  .fiche-xmp{left:9px;right:9px;padding:9px 10px;gap:5px;border-radius:14px}
  .fiche-xmp span{font-size:.72rem}
  .bulle{font-size:.68rem;padding:4px 9px 4px 8px}
}

/* ── Le choix du système, avant tout téléchargement ── */
.choix-os{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.option-os{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  border:1px solid var(--bordure);background:var(--fond);border-radius:18px;padding:18px;
  color:var(--texte);font:inherit;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
a.option-os:hover{border-color:var(--accent);transform:translateY(-2px)}
.option-os svg{stroke:var(--texte);margin-bottom:6px}
.option-os .nom-os{font-weight:700;font-size:1.08rem}
.option-os .detail{font-size:.82rem;color:var(--doux);line-height:1.4}
.option-os .pastille{margin-top:8px;font-size:.78rem;font-weight:650;border-radius:999px;padding:5px 12px;
  background:var(--accent-aplat);color:#fff}
.option-os.bientot{cursor:default}
.option-os.bientot .pastille{background:color-mix(in srgb,var(--texte) 10%,transparent);color:var(--texte)}
.lien-discret{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.note-modale{margin-top:16px;font-size:.84rem;color:var(--doux);line-height:1.5}
.sur-mobile{display:none;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--bordure)}
.sur-mobile.visible{display:block}
.sur-mobile .note-modale{margin:0 0 12px}
@media(max-width:460px){.choix-os{grid-template-columns:1fr}
  .option-os{padding:14px 16px}.option-os svg{display:none}}

/* ── Téléphone ──────────────────────────────────
   Mesuré à 375 px : le héros occupait 990 px — plus qu'un écran entier — pour
   un portable qui n'en faisait que 200. Tout ce qui suit inverse ce rapport. */
@media(max-width:700px){
  /* La barre ne flotte plus : posée en haut de la page, elle défile avec
     elle. Elle ne porte que la marque, les langues et le téléchargement —
     une barre fixe couvrait le contenu à chaque défilement. */
  /* relative et non static : la barre garde son z-index de 60. Statique, elle
     n'en avait plus, et l'icône du héros (z-index 1) passait par-dessus le
     menu des langues ouvert (signalé le 27 octobre 2026). */
  header{position:relative;padding:12px 12px 0;justify-content:stretch}
  .pilule{width:100%;justify-content:space-between;padding:6px 8px 6px 12px;border-radius:999px}
  .marque img{height:24px}
  .pilule nav{gap:0}
  .heros{padding-top:36px}
  .heros .icone{width:109px;height:109px;margin:13.5px auto 47.5px;
    box-shadow:0 13px 28px rgba(0,0,0,.24)}
  .heros h1{font-size:clamp(1.95rem,8.4vw,2.6rem);max-width:none}
  .chapeau{margin-top:24px;font-size:1rem;line-height:1.6;max-width:34ch}
  .heros .actions{margin-top:34px;flex-direction:column;align-items:center;gap:10px}
  /* Les deux boutons à la même hauteur, fixée (bordure comprise), et un peu
     moins larges : demandé par le propriétaire le 30 septembre 2026. */
  .heros .actions .bouton{width:100%;max-width:280px;justify-content:center;
    padding:0 24px;min-height:50px;box-sizing:border-box}
  .heros .actions .bouton.clair{background:transparent;color:var(--doux);
    font-size:.95rem;text-decoration:none}
  .heros .actions .bouton.clair:hover{background:transparent;box-shadow:none;
    transform:none;color:var(--texte)}

  /* Le portable prend toute la largeur de l'écran, à 8 px des bords : plus
     large que le texte, mais ENTIER. */
  .scene{margin:76px 0 0;padding:0;width:calc(100vw - 16px);max-width:none;
    margin-left:calc(50% - 50vw + 8px)}
  /* Halos plus petits, plus hauts, sur un cercle de 35 px au lieu de 90 : au
     bas de leur course, ils descendaient sous le titre suivant et le
     coloraient. Mesuré au point le plus bas : ils restent derrière le portable. */
  .halos{left:8%;right:8%;top:-18%;height:70%}
  .halo{width:150px;height:150px;transform-origin:75px 110px;filter:blur(60px)}

  .declaration{padding:clamp(54px,11vw,78px) 0}
  .declaration h2 span.hors-mobile{display:none}
  .declaration h2{font-size:clamp(1.25rem,5.2vw,2rem)}

  .rubrique{margin-left:2px}
  .carte{padding:22px;min-height:0;border-radius:22px}
  .carte h3{font-size:1.2rem;margin-bottom:11px}
  .carte p{font-size:.95rem}
  .bento,.bento.inverse,.bento.trois,.bento.deux{gap:14px;margin-bottom:14px}
  .visuel,.visuel.a-droite{margin-top:auto;padding-top:22px;margin-left:0;margin-right:0}
  .pile{height:230px}
  .feuille{width:70%}
  .stat{font-size:2.6rem}

  .appel{padding:24px;border-radius:22px;gap:16px}
  .appel .bouton{width:100%;justify-content:center}
  .appel .texte{min-width:0;flex:1 1 100%}
  .appel svg{display:none}

  /* Le libellé passe au-dessus de sa valeur : sur 280 px, libellé, valeur et
     sceau côte à côte ne laissaient que « Accor… ». */
  .mini-ligne{flex-wrap:wrap;row-gap:4px}
  .mini-ligne .cle{width:100%;flex:0 0 100%;font-size:.74rem}
  .champ-xmp{grid-template-columns:16px minmax(0,1fr);row-gap:3px;padding:8px 12px}
  .champ-xmp .valeur,.champ-xmp .etiquettes{grid-column:2}
  .champ-xmp .etiquettes{flex-wrap:wrap;row-gap:5px}
  .barre .titre-fenetre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .pied-grille{gap:34px}
  .pied-bas{justify-content:center;text-align:center}
  .legal{margin-top:18px}

  .modale-boite{padding:24px;border-radius:20px}
  .rangee-form{margin-bottom:13px}
  .defi{flex-wrap:wrap}
}
/* Les plus petits écrans (320 points, iPhone SE de première génération) : la
   pastille débordait de 15 à 28 points selon la langue (« Télécharger »,
   « Descargar »), le bouton coupé par le bord. Mesuré le 27 octobre 2026. */
@media(max-width:380px){
  .pilule{gap:6px;padding-left:10px}
  .marque{padding:0}
  .marque img{height:20px}
  .langues{margin:0}
  .bouton.mini{padding:0 12px}
}

/* Les plus petits téléphones (320 px) : les six cases du code tiennent en
   se resserrant. */
@media(max-width:360px){
  .cases{gap:4px}
  .cases span{width:25px;height:32px;font-size:13px}
}

/* ── Le modèle : ce qu'il voit, ce qu'il en fait ── */
.analyse-demo{display:flex;flex-direction:column;gap:9px;margin:0}
.analyse-photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--bordure)}
.analyse-photo img{width:100%;height:100%;object-fit:cover;display:block;object-position:30% 50%}
/* Les repères sur la photo : fond à 80 % (60 avant), pour rester lisibles sur
   une zone claire — 11:1 sur du blanc, mesuré. */
.repere{position:absolute;font-size:.72rem;font-weight:650;line-height:1;padding:5px 9px 5px 8px;
  border-radius:999px;background:rgba(10,12,10,.8);color:#fff;white-space:nowrap;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.repere::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#5BD45F;margin-right:6px;vertical-align:1px}
.analyse-demo .zone p{color:var(--texte);font-size:.86rem;line-height:1.45}
/* La carte du modèle : le titre et le texte sur toute la largeur, puis la
   photo, la flèche et la légende côte à côte. Sur un écran étroit, les trois
   s'empilent et la flèche descend. */
.carte.modele .visuel{margin-top:auto;padding:24px 0 0}
.carte.modele .analyse-demo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:18px;align-items:stretch;container-type:inline-size}
.carte.modele .fleche{align-self:center}
.carte.modele .analyse-photo{aspect-ratio:auto;width:100%;min-height:calc((100cqw - 58px) / 2 * .75)}
.carte.modele .zone{display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.carte.modele .zone p{font-size:.95rem}
.carte.modele .mots-rang{gap:6px;margin-top:12px}
.carte.modele .fleche{font-size:1.5rem;margin:0}
/* Dès que le bento passe à deux colonnes égales (1 000 px), la carte ne fait
   plus que 460 px : photo et légende côte à côte y tenaient un mot par ligne
   (vu à 768 px). Elles s'empilent, et la flèche descend. */
@media(max-width:1000px){
  .carte.modele .analyse-demo{grid-template-columns:1fr;gap:10px;align-items:center}
  .carte.modele .analyse-photo{aspect-ratio:4/3;min-height:0}
  .carte.modele .fleche{transform:rotate(90deg)}}
.mots-rang{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.mots-rang span{font-size:.76rem;padding:3px 9px;border-radius:999px;background:var(--fond);
  border:1px solid var(--bordure);color:var(--doux)}

/* « Sans mot de passe » : Google et Apple, sous les trois étapes. */
.ou-google{display:flex;align-items:center;gap:10px;margin:12px 0 10px;font-size:.74rem;color:var(--doux)}
.ou-google::before,.ou-google::after{content:"";flex:1;height:1px;background:var(--bordure)}
/* Côte à côte quand ils tiennent (le plus large, « Continuer avec Google »,
   fait 190 points en français), l'un sous l'autre sinon : sur un téléphone, et
   entre 700 et 1 000 points où deux cartes se partagent la largeur. */
.boutons-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));gap:8px}
.bouton-google{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;
  border-radius:999px;background:var(--fond);border:1px solid var(--bordure);font-size:.8rem;font-weight:600;
  white-space:nowrap}
.bouton-google svg{flex:none}
.bouton-google .pomme{fill:var(--texte)}

/* Sur ordinateur, les photos du défilé naissent et s'effacent aux bords de
   l'écran au lieu d'y être coupées net. Pas sur téléphone : l'écran y est
   trop étroit, le fondu mangerait la moitié des cartes. */
@media(min-width:701px){
  .defile{--fondu:clamp(90px,14%,320px);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent);
            mask-image:linear-gradient(to right,transparent,#000 var(--fondu),#000 calc(100% - var(--fondu)),transparent)}}

/* Grands écrans (24" en 2 560 px) : plutôt qu'une seconde mise en page, tout
   grandit ensemble — textes, cartes, images, espaces — par paliers. `zoom`
   est reconnu de Safari, Chrome et Firefox (126+) ; les requêtes `@media`
   lisent la vraie largeur, elles ne bougent pas. */
@media(min-width:1800px){html{zoom:1.1}}
@media(min-width:2000px){html{zoom:1.2}}
@media(min-width:2200px){html{zoom:1.3}}
@media(min-width:2400px){html{zoom:1.4}}
@media(min-width:2800px){html{zoom:1.55}}
@media(min-width:3200px){html{zoom:1.75}}