/* Page d'accueil d'IMPERIUM AGENCY : fond vivant (perle bleutée ou nuit profonde, /commun/fond-vivant.css, 29/10), beaucoup d'espace (comme Antigravity), très peu de mots. Défilement natif du navigateur. */
/* Polices servies par la page elle-même (le site n'autorise aucune police extérieure) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("polices/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("polices/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --encre: #0a0a0b;
  --texte: #1d1f24;
  --doux: #555b68;
  --faible: #575d6b;          /* 29/10 : un peu plus foncé, lisible (AA) sur le fond perle et ses taches bleues */
  --trait: #dde2ec;
  --trait-2: #cdd3df;
  /* 29/10 : les blocs gris deviennent des surfaces de verre blanc qui laissent deviner le fond vivant */
  --gris: rgb(255 255 255 / .56);
  --gris-2: rgb(255 255 255 / .64);          /* bloc « Rester à jour », barre de l'aperçu */
  --gris-survol: rgb(255 255 255 / .8);
  --carte: rgb(255 255 255 / .7);            /* cartes et fenêtres posées sur le fond */
  --indice: #8a8f9a;          /* texte d'exemple des champs */
  --encre-survol: #2a2c33;
  --photo: #dfe1e6;
  --focus: #3b5bdb;
  --selection: #dbe4ff;
  --erreur: #b42318;
  /* les teintes en triplets, pour les voiles translucides : fond de page, surfaces (pilules, menus, champs, fenêtres),
     texte posé sur l'encre (boutons noirs), voiles de survol et filets, ombres, points des fondateurs */
  --fond-rgb: 237 240 247;   /* = --fv-base : perle bleutée, plus de blanc plat */
  --surface-rgb: 255 255 255;
  --sur-encre-rgb: 255 255 255;
  --teinte-rgb: 10 10 11;
  --ombre-rgb: 10 10 11;
  --points-rgb: 10 10 11;
  --fond: rgb(var(--fond-rgb));
  --surface: rgb(var(--surface-rgb));
  --sur-encre: rgb(var(--sur-encre-rgb));
  /* la recherche (recherche.js) */
  --r-texte: var(--encre); --r-doux: #4a505c; --r-faible: #636976; --r-trait: rgb(var(--teinte-rgb) / .08);
  --r-survol: rgb(var(--teinte-rgb) / .045); --r-actif: rgb(var(--teinte-rgb) / .075); --r-premier: rgb(var(--teinte-rgb) / .04);
  --r-marque: rgba(59, 91, 219, .13); --r-champ: rgb(var(--surface-rgb) / .82); --r-champ-plein: var(--surface);
  --police: "Geist", "Inter", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* toute la largeur de l'écran : 3,6 % de marge, 1 720 px de contenu au plus */
  --marge: max(20px, 3.6vw, calc((100vw - 1720px) / 2));
  /* espace entre deux blocs : très large, comme sur antigravity.google (23/10, puis encore plus le 24/10) */
  --bloc: clamp(240px, 28vw, 520px);
  /* sous le pilier 9, des écarts beaucoup plus courts (29/10, demande du fondateur : ils étaient beaucoup trop grands) */
  --bloc-bas: clamp(112px, 10.5vw, 190px);
  color-scheme: light;
}
/* ---------- Thème sombre (29/10) : le script en tête de page pose data-theme (réglage de l'appareil, ou choix du bouton
   soleil/lune gardé dans le navigateur). Seules les variables changent : chaque règle de la page sert aux deux thèmes. */
html[data-theme="dark"] {
  --encre: #f3f4f6; --texte: #dcdfe5; --doux: #a7adb9; --faible: #9399a5; --indice: #8f95a1;
  --trait: #1b2030; --trait-2: #2c3245; --gris: rgb(157 176 255 / .055); --gris-2: rgb(157 176 255 / .06); --gris-survol: rgb(157 176 255 / .1);
  --carte: rgb(16 20 34 / .62);
  --encre-survol: #d3d6dc; --photo: #1d2233; --focus: #9db0ff; --selection: #2c3a66; --erreur: #ff9b8f;
  --fond-rgb: 5 7 13; --surface-rgb: 18 22 34; --sur-encre-rgb: 5 7 13; --teinte-rgb: 255 255 255; --ombre-rgb: 0 0 0; --points-rgb: 236 238 242;
  --r-doux: #b3b8c2; --r-faible: #979da9; --r-marque: rgba(157, 176, 255, .22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* sur téléphone, la page ne glisse jamais sur le côté : on défile seulement vers le bas (24/10) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
html { background: var(--fond); -webkit-text-size-adjust: 100%; }
section[id], article[id], div[id].p9 { scroll-margin-top: 96px; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[lang="zh"] body { line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--encre); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
/* lignes équilibrées : pas de mot (ou de caractère chinois) seul sur la dernière ligne */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 { letter-spacing: 0; line-height: 1.2; }
p { margin: 0; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--encre); color: var(--sur-encre); padding: 10px 16px; border-radius: 999px; }
.evitement:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible, section:focus, main:focus { outline: none; }
::selection { background: var(--selection); }

/* ---------- Pilules */
.pilule { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.pilule:active { transform: scale(.97); }
.pilule.noire { background: var(--encre); color: var(--sur-encre); }
.pilule.noire:hover { background: var(--encre-survol); }
.pilule.contour { background: var(--surface); color: var(--encre); border-color: var(--trait-2); }
.pilule.contour:hover { border-color: var(--encre); }
.pilule:disabled, .pilule[aria-disabled="true"] { background: var(--gris); color: var(--faible); border-color: var(--trait); cursor: not-allowed; transform: none; }

/* ---------- Bandeau des nouveautés */
.annonce { position: relative; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 48px; font-size: 14px; color: var(--doux); border-bottom: 1px solid var(--trait); background: transparent; }
.annonce[hidden] { display: none; }
.annonce-pastille { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sur-encre); background: var(--encre); padding: 3px 9px; border-radius: 999px; }
.annonce-lien { color: var(--encre); font-weight: 500; white-space: nowrap; }
.annonce-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.annonce-fermer { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: none; font-size: 20px; color: var(--faible); cursor: pointer; border-radius: 50%; }
.annonce-fermer:hover { background: var(--gris); color: var(--encre); }

/* ---------- Tête : posée sur la page en haut ; dès qu'on descend, trois bulles flottantes (pas de barre) */
.tete { position: sticky; top: 0; z-index: 30; pointer-events: none; }
.tete-in { --tete-bord: clamp(14px, 2.2vw, 40px); height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 var(--tete-bord); }
.bulle { pointer-events: auto; display: flex; align-items: center; border-radius: 999px; border: 1px solid transparent; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .35s ease; }
.tete.ombre .bulle { background: rgb(var(--surface-rgb) / .8); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); border-color: rgb(var(--teinte-rgb) / .06); box-shadow: 0 12px 34px -16px rgb(var(--ombre-rgb) / .22), 0 1px 2px rgb(var(--ombre-rgb) / .04); }
.marque { gap: 11px; padding: 6px 16px; font-weight: 600; font-size: 15.5px; letter-spacing: .01em; color: var(--encre); white-space: nowrap; }
.marque img { width: auto; height: 30px; }
.nav { gap: 2px; padding: 5px; margin-left: 4px; }
.nav a { font-size: 14.5px; color: var(--doux); padding: 8px 13px; border-radius: 999px; transition: color .2s, background .2s; white-space: nowrap; }
.nav a:hover { color: var(--encre); background: rgb(var(--teinte-rgb) / .05); }
.tete-actions { margin-left: auto; gap: 4px; padding: 5px; }
@media (max-width: 420px) {
  /* téléphone : la tête se fait plus petite pour laisser la marque entière (aucun défilement de côté) */
  .tete-in .marque { flex-shrink: 0; padding-right: 4px; }
}
.tete-actions .pilule { height: 38px; padding: 0 18px; font-size: 14px; }

/* Choix de la langue */
.langues { position: relative; }
.langue-bouton { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 11px; border-radius: 999px; border: 0; background: none; color: var(--encre); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; }
.langue-bouton:hover, .langue-bouton[aria-expanded="true"] { background: rgb(var(--teinte-rgb) / .05); }
.langue-bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.langue-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; list-style: none; margin: 0; padding: 6px; min-width: 168px; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 24px 60px -24px rgb(var(--ombre-rgb) / .3); }
.langue-menu[hidden] { display: none; }
.langue-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; font-size: 14.5px; text-align: left; cursor: pointer; }
.langue-menu button:hover { background: rgb(var(--teinte-rgb) / .05); }
.langue-menu button[aria-checked="true"]::after { content: ""; width: 12px; height: 7px; border-left: 1.8px solid var(--encre); border-bottom: 1.8px solid var(--encre); transform: rotate(-45deg) translateY(-2px); }

/* ---------- Ouverture (29/10, nuit) : seulement des phrases courtes qui changent, en 3D, sur un fond vivant.
   Les phrases sont dessinées par ouverture.js (toile WebGL) ; sans WebGL, les mêmes phrases en texte (.ouverture-repli).
   Un « Défiler » discret en bas. Hauteur : l'écran entier sous la tête (svh : la barre d'adresse du téléphone ne fait rien bouger). */
.ouverture { position: relative; isolation: isolate; height: calc(100svh - 118px); min-height: 520px; max-height: 1100px; }
@supports not (height: 100svh) { .ouverture { height: calc(100vh - 118px); } }
/* le ciel fixe (dessous) et la toile du fond (dessus) montent jusqu'en haut de la page, derrière le bandeau et la tête */
.ouverture-ciel, .ouverture-aube { position: absolute; left: 0; right: 0; top: -160px; bottom: 0; pointer-events: none; }
.ouverture-ciel {
  background:
    radial-gradient(50% 45% at 18% 22%, rgb(206 218 255 / .75), transparent 70%),
    radial-gradient(42% 40% at 86% 80%, rgb(255 233 218 / .6), transparent 70%),
    radial-gradient(38% 34% at 58% 42%, rgb(255 255 255 / .7), transparent 72%),
    linear-gradient(115deg, #e8edf8, #f3eff6 50%, #e9f1f4);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
html[data-theme="dark"] .ouverture-ciel {
  background:
    radial-gradient(48% 34% at 32% 46%, rgb(59 91 219 / .26), transparent 70%),
    radial-gradient(40% 30% at 74% 36%, rgb(157 176 255 / .12), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, rgb(27 35 80 / .55), transparent 75%),
    linear-gradient(180deg, #04060c, #060914 70%);
}
.ouverture-fond { position: absolute; left: 0; top: -160px; width: 100%; height: calc(100% + 160px); display: block; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.fond-pret .ouverture-fond { opacity: 1; }
.ouverture-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* thème clair : une lumière de matin traverse le haut de page une fois, à l'arrivée */
.ouverture-aube { display: none; background: linear-gradient(100deg, transparent 32%, rgb(255 251 243 / .8) 50%, transparent 68%); opacity: 0; transform: translate3d(-70%, 0, 0); }
html:not([data-theme="dark"]) .ouverture.aube .ouverture-aube { display: block; animation: aube 3s cubic-bezier(.45, .05, .3, 1) .1s both; }
@keyframes aube { 0% { opacity: 0; transform: translate3d(-70%, 0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(70%, 0, 0); } }

/* sans WebGL ou avec moins d'animations : les phrases en texte réel, aux mêmes places que la 3D */
.ouverture-repli { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ouv-p { position: absolute; margin: 0; font-weight: 480; letter-spacing: -0.045em; color: var(--encre); white-space: pre-line; opacity: 0;
  translate: calc(var(--mx, 0) * var(--prof, 1) * -46px) calc(var(--my, 0) * var(--prof, 1) * -28px); transition: translate 1.2s cubic-bezier(.2, .8, .2, 1); }
html[lang="zh"] .ouv-p { letter-spacing: 0; }
.ouv-texte .ouv-p { filter: blur(16px); transform: translate3d(0, 18px, 0) scale(1.03);
  transition: opacity 1.3s cubic-bezier(.2, .8, .2, 1), filter 1.3s cubic-bezier(.2, .8, .2, 1), transform 1.5s cubic-bezier(.2, .8, .2, 1), translate 1.2s cubic-bezier(.2, .8, .2, 1); }
.ouv-texte .ouv-p.entre { opacity: var(--brume, 1); filter: blur(0); transform: none; }
.ouv-texte .ouv-p.sort { opacity: 0; filter: blur(20px); transform: translate3d(60px, -34px, 0) scale(1.06); transition-timing-function: cubic-bezier(.5, 0, .75, .4); transition-duration: 1.9s; }
.ouv-simple .ouv-p { translate: none; transition: opacity .7s ease; }
.ouv-simple .ouv-p.entre { opacity: 1; }
.ouv-simple .ouv-p.sort { opacity: 0; }

/* « Défiler » : un mot discret et un trait où une goutte descend */
.defiler { position: absolute; left: 50%; bottom: clamp(18px, 3.2vh, 34px); z-index: 2; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 10px; color: var(--faible); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-indent: .2em; opacity: 0; animation: defiler-entree 1.2s cubic-bezier(.2, .8, .2, 1) 2.4s forwards; transition: color .25s; }
html[lang="zh"] .defiler { letter-spacing: .12em; text-indent: .12em; }
.defiler:hover { color: var(--encre); }
.defiler-trait { position: relative; width: 1px; height: 44px; overflow: hidden; background: linear-gradient(rgb(var(--teinte-rgb) / .22), rgb(var(--teinte-rgb) / 0)); }
.defiler-trait i { position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: linear-gradient(transparent, var(--encre)); animation: defiler-goutte 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes defiler-entree { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes defiler-goutte { 0% { transform: translateY(-14px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
.lien-film { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font-weight: 500; color: var(--encre); }
.rond-lecture { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait-2); display: grid; place-items: center; transition: border-color .25s; }
.rond-lecture::after { content: ""; margin-left: 3px; border-left: 10px solid var(--encre); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.lien-film:hover .rond-lecture { border-color: var(--encre); }

/* ---------- Titres de section */
.titre-section { margin-bottom: clamp(110px, 12vw, 200px); }
.sur { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faible); margin-bottom: 22px; }
h2 { font-size: clamp(36px, 4.4vw, 68px); font-weight: 500; letter-spacing: -0.045em; }

/* ---------- Catalogues */
.catalogues { padding: clamp(40px, 6vw, 110px) 0 0; }
.catalogues > .titre-section { padding: 0 var(--marge); }
.numero { font-size: 14px; font-weight: 500; color: var(--faible); letter-spacing: .02em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 20px; }
.etat { font-size: 12px; font-weight: 500; color: var(--doux); border: 1px solid var(--trait-2); padding: 3px 10px; border-radius: 999px; letter-spacing: 0; white-space: nowrap; }

/* Catalogue 01 : l'aperçu d'un premier logiciel, comme une fenêtre d'application (en HTML : net à toutes les tailles) */
.appli { border-radius: 22px; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 60px 120px -70px rgb(var(--ombre-rgb) / .45), 0 2px 6px rgb(var(--ombre-rgb) / .04); overflow: hidden; font-size: 15px; }
.appli-barre { position: relative; display: flex; align-items: center; height: 46px; padding: 0 18px; background: var(--gris-2); border-bottom: 1px solid var(--trait); }
.appli-barre span { position: absolute; left: 0; right: 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--texte); pointer-events: none; }
.appli-corps { padding: clamp(20px, 2.4vw, 34px); }
.fichier { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: var(--gris); }
.fichier-type { display: grid; place-items: center; width: 46px; height: 54px; border-radius: 9px; background: var(--encre); color: var(--sur-encre); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; }
.fichier-infos { display: flex; flex-direction: column; min-width: 0; }
.fichier-infos b { font-weight: 600; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichier-infos span { font-size: 13.5px; color: var(--faible); margin-top: 2px; }
.fichier-poids { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--encre); white-space: nowrap; }
.appli-explique { margin-top: 16px; font-size: 14.5px; color: var(--doux); line-height: 1.5; }
.appli-explique b { color: var(--encre); font-weight: 600; }
.appli-sur { margin-top: 24px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faible); }
.cibles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.cibles li { display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 13px; border: 1px solid var(--trait); }
.cibles li.choisie { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.cible-nom { font-weight: 500; color: var(--encre); }
.cible-format { font-size: 13.5px; color: var(--faible); }
.cible-poids { font-weight: 500; color: var(--encre); white-space: nowrap; }
.appli-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.appli-local { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--doux); }
.appli-local svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.appli-sep { opacity: .55; }
.appli-bouton { display: inline-flex; align-items: center; gap: .5em; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--encre); color: var(--sur-encre); font-size: 14px; font-weight: 500; white-space: nowrap; }
/* une conversion qui avance doucement : seule une transformation, calculée par la carte graphique */
.appli-progres { margin-top: 18px; height: 4px; border-radius: 4px; background: var(--gris); overflow: hidden; }
.appli-progres i { display: block; height: 100%; background: var(--encre); border-radius: 4px; transform-origin: left; transform: scaleX(.08); animation: conversion 7s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes conversion { 0% { transform: scaleX(.04); } 70% { transform: scaleX(1); } 85%, 100% { transform: scaleX(1); opacity: 0; } }

/* Catalogues 02 à 05 : une ligne chacun */
.ligne { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(48px, 6.5vw, 130px); align-items: center; padding: 0 var(--marge) var(--bloc); }
.ligne.inverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.ligne.inverse .ligne-texte { order: 2; }
.ligne.seule { grid-template-columns: minmax(0, 1fr); }
.ligne.sans-visuel { grid-template-columns: minmax(0, 1fr); }
.ligne.sans-visuel .ligne-texte { max-width: 640px; }
/* 03/11 : catalogue 01 sans visuel, moins de vide autour (titre des catalogues et catalogue 02 rapprochés) */
.ligne.sans-visuel { padding-bottom: clamp(56px, 6vw, 110px); }
.catalogues > .titre-section { margin-bottom: clamp(56px, 6vw, 110px); }
/* Catalogue 05, sans visuel tant qu'il n'existe pas : titre à gauche, texte à droite, sans trait au-dessus */
.ligne.seule .ligne-texte { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: clamp(48px, 6.5vw, 130px); }
.ligne.seule .numero { grid-column: 1; grid-row: 1; }
.ligne.seule h3 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; }
.ligne.seule .ligne-texte > p:not(.numero) { grid-column: 2; grid-row: 2; max-width: 640px; }
.ligne.seule .ligne-texte > .pilule { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 30px; }
.ligne h3 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 500; letter-spacing: -0.045em; margin-bottom: 24px; }
.ligne-texte > p:not(.numero):not(.prix-depart) { color: var(--doux); font-size: 18.5px; max-width: 520px; }
.ligne-texte > .ligne-note { margin-top: 16px; font-size: 16px; color: var(--faible); }
.ligne-texte > .pilule, .ligne-actions { margin-top: 38px; }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chiffres { list-style: none; margin: 38px 0 40px; padding: 0; display: flex; gap: 44px; }
.chiffres li { display: flex; flex-direction: column; }
.chiffres b { font-size: 36px; font-weight: 500; letter-spacing: -0.04em; color: var(--encre); line-height: 1; }
.chiffres span { font-size: 14px; color: var(--faible); margin-top: 6px; }
.prix-depart { margin: -10px 0 30px; font-size: 15.5px; color: var(--doux); }
.prix-depart b { color: var(--encre); font-weight: 600; }
.prix-depart a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--trait-2); text-underline-offset: 3px; }
.prix-depart a:hover { text-decoration-color: var(--encre); }
.ligne-texte .prix-depart + .pilule { margin-top: 0; }
.ligne-visuel { position: relative; isolation: isolate; margin: 0; }
.ligne-visuel figcaption { margin-top: 18px; font-size: 13.5px; color: var(--faible); }
/* La capture réelle du catalogue Entreprises : coins arrondis, ombre douce */
.capture { width: 100%; height: auto; border-radius: clamp(18px, 1.8vw, 28px); box-shadow: 0 50px 110px -60px rgba(10, 40, 30, .45); }
.capture-lien { display: block; border-radius: clamp(18px, 1.8vw, 28px); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.capture-lien:hover { transform: translateY(-4px); }
.capture-lien:focus-visible { outline: 2px solid var(--encre); outline-offset: 6px; }
#catalogue-02 { padding-bottom: clamp(150px, 16vw, 280px); }
/* sur grand écran, la capture du pilier 6 prend plus de place : le titre et les prix se lisent */
@media (min-width: 1001px) { #catalogue-02 { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); } }

/* Pilier 9 : le sur-mesure, juste sous le catalogue Entreprises. Le texte en haut, puis la vraie capture du configurateur
   sur toute la largeur du bloc : rien ne dépasse sur les côtés. */
.p9 { margin: 0 var(--marge) var(--bloc); padding: clamp(32px, 4vw, 64px); border-radius: 36px; background: var(--gris); }
.p9-tete { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px clamp(40px, 5.5vw, 110px); align-items: start; }
.p9 h3 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 500; letter-spacing: -0.04em; }
.p9-tete p:not(.numero) { color: var(--doux); font-size: 17px; max-width: 600px; }
.p9-tete .pilule { margin-top: 26px; }
.p9-visuel { margin: clamp(34px, 3.6vw, 56px) 0 0; }
.p9-visuel .capture { box-shadow: 0 40px 90px -60px rgb(var(--ombre-rgb) / .5); }
.p9-visuel figcaption { margin-top: 16px; font-size: 13.5px; color: var(--faible); }

.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comp { border-radius: 26px; padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; min-height: 100%; }
.comp-abo { background: var(--gris); }
.comp-nous { background: var(--encre); color: var(--sur-encre); }
.comp-sur { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faible); }
.comp-nous .comp-sur { color: rgb(var(--sur-encre-rgb) / .64); }
.comp-prix { margin-top: 18px; font-size: clamp(34px, 3.4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--encre); }
.comp-nous .comp-prix { color: var(--sur-encre); }
.comp-prix small { display: block; margin-top: 10px; font-size: .4em; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--doux); }
.comp-nous .comp-prix small { color: rgb(var(--sur-encre-rgb) / .64); }
.comp-texte { margin-top: 16px; font-size: 15.5px; color: var(--doux); }
.comp-nous .comp-texte { color: rgb(var(--sur-encre-rgb) / .72); }
.comp-barres { margin-top: auto; padding-top: 34px; height: 150px; display: flex; align-items: flex-end; gap: 10px; }
.comp-barres i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #f87171, #dc2626); }
.comp-nous .comp-barres i { background: linear-gradient(180deg, #60a5fa, #2563eb); }
.comp-legende { margin-top: 10px; font-size: 12.5px; color: var(--faible); }
.comp-nous .comp-legende { color: rgb(var(--sur-encre-rgb) / .64); }
.comp-note { grid-column: 1 / -1; font-size: 13px; color: var(--faible); }

/* Catalogue 04 : six cartes de prospection, photographiées dans l'atelier en 3D */
.a-venir { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 14px; max-width: 520px; }
.a-venir li { display: grid; gap: 2px; }
.a-venir b { font-size: 15.5px; font-weight: 600; color: var(--encre); }
.a-venir span { font-size: 15.5px; color: var(--doux); }
.jeu-cartes { position: relative; aspect-ratio: 16 / 11; }
#catalogue-04 { overflow-x: clip; } /* l'éventail ne dépasse jamais du bord de l'écran sur téléphone */
/* l'ombre est dessinée dans l'image (cartes3d/ombre) : aucun filtre à recalculer pendant le défilement.
   L'image déborde de la carte du côté de l'ombre ; seule la carte reste cliquable. */
.jeu-carte { position: absolute; width: 50%; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); will-change: transform; backface-visibility: hidden; }
.jeu-carte img { width: 122.2222%; max-width: none; height: auto; margin: -7.7778% 0 -20% -11.1111%; pointer-events: none; }
.jeu-carte:nth-child(1) { left: 0; top: 0; transform: rotate(-7deg); z-index: 1; }
.jeu-carte:nth-child(2) { left: 25%; top: -3%; transform: rotate(3deg); z-index: 2; }
.jeu-carte:nth-child(3) { left: 50%; top: 2%; transform: rotate(9deg); z-index: 1; }
.jeu-carte:nth-child(4) { left: 3%; top: 38%; transform: rotate(5deg); z-index: 3; }
.jeu-carte:nth-child(5) { left: 28%; top: 44%; transform: rotate(-4deg); z-index: 4; }
.jeu-carte:nth-child(6) { left: 51%; top: 38%; transform: rotate(-10deg); z-index: 3; }
.jeu-carte:hover, .jeu-carte:focus-visible { z-index: 6; transform: translateY(-14px) rotate(0deg) scale(1.06); }
.jeu-carte:focus-visible { outline: none; }

/* Les runbooks : un objet numérique du catalogue 02, posé entre le catalogue 2 et le pilier 9 (24/10). Les cinq couvertures, chacune de sa couleur ; un clic montre le sommaire. */
.runbooks { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: 30px clamp(40px, 5.5vw, 110px); align-items: center; margin: calc(var(--bloc) * .3) var(--marge) var(--bloc); padding: clamp(32px, 4vw, 64px); border-radius: 36px; background: var(--gris); }
.runbooks h3 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 500; letter-spacing: -0.04em; }
.runbooks-texte > p:not(.numero) { margin-top: 20px; color: var(--doux); font-size: 17px; max-width: 560px; }
.runbooks-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.runbooks-points li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--texte); }
.runbooks-points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--encre); transform: translateY(-2px); }
.runbooks-langues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.runbooks-langues button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid var(--trait-2); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--texte); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.runbooks-langues button:hover { border-color: var(--encre); }
.runbooks-langues button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.drapeau { width: 20px; height: 14px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--teinte-rgb) / .1); }
.runbooks-pile { position: relative; display: flex; align-items: flex-end; padding-top: 30px; }
.runbook { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; z-index: calc(5 - var(--i)); transform: translateY(calc(var(--i) * -7px)) rotate(calc((var(--i) - 2) * 1.6deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.runbook + .runbook { margin-left: -2.5%; }
.runbook .couv { position: relative; display: block; }
.runbook img { width: 100%; height: auto; border-radius: 6px 10px 10px 6px; box-shadow: 0 26px 40px -24px rgb(var(--ombre-rgb) / .55), 0 2px 4px rgb(var(--ombre-rgb) / .12); }
/* le dos du guide, sur la gauche, comme un vrai livret */
.runbook .couv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .18)); pointer-events: none; z-index: 1; }
.runbook > span:last-child { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--doux); }
.runbook:hover, .runbook:focus-visible { z-index: 6; transform: translateY(calc(var(--i) * -7px - 16px)) rotate(0deg) scale(1.04); }
.runbook:focus-visible { outline: 2px solid var(--encre); outline-offset: 6px; border-radius: 8px; }
.runbooks-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--faible); }

/* Le sommaire : une fenêtre par-dessus la page, les pages du sommaire en images */
.sommaire { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 28px; background: var(--surface); color: var(--texte); box-shadow: 0 60px 140px -40px rgb(var(--ombre-rgb) / .6); overflow: hidden; }
.sommaire[open] { display: flex; flex-direction: column; }
.sommaire::backdrop { background: rgb(var(--ombre-rgb) / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sommaire-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px clamp(22px, 3vw, 36px) 18px; border-bottom: 1px solid var(--trait); }
.sommaire-sur { font-size: 13px; color: var(--faible); margin-bottom: 6px; }
.sommaire h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.03em; }
.sommaire-fermer { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait-2); background: var(--surface); color: var(--encre); font-size: 22px; line-height: 1; cursor: pointer; }
.sommaire-fermer:hover { border-color: var(--encre); }
.sommaire-pages { overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(22px, 3vw, 36px); display: grid; gap: 16px; background: var(--gris); }
.sommaire-pages img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 10px 30px -18px rgb(var(--ombre-rgb) / .45); background: #fff; } /* des pages de papier : blanches dans les deux thèmes */
.sommaire-note { padding: 16px clamp(22px, 3vw, 36px) 22px; font-size: 13.5px; color: var(--faible); border-top: 1px solid var(--trait); }

/* ---------- La communauté : pas un catalogue, en cours de développement */
.communaute { margin: 0 var(--marge) var(--bloc); padding: clamp(48px, 6vw, 100px) 24px; border-radius: 36px; background: var(--gris); text-align: center; }
.communaute .numero { justify-content: center; margin-bottom: 22px; }
.communaute h2 { font-size: clamp(30px, 3.4vw, 52px); }
.communaute p:not(.numero) { color: var(--doux); font-size: clamp(16px, 1.3vw, 19px); max-width: 640px; margin: 20px auto 0; }
.communaute .pilule { margin-top: 34px; }

/* ---------- Qui sommes-nous : une vraie présentation, puis les deux fondateurs */
.qui { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(60px, 6vw, 110px) clamp(48px, 6.5vw, 130px); align-items: start; padding: 0 var(--marge) var(--bloc); }
.qui-texte > p { color: var(--doux); font-size: clamp(17px, 1.35vw, 20px); max-width: 640px; }
.qui-texte > p + p { margin-top: 20px; }
.qui-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.qui-points li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: var(--texte); }
.qui-points li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--encre); transform: translateY(-2px); }
.rd { margin-top: 36px; padding: 24px 26px; border-radius: 24px; background: var(--gris); max-width: 640px; }
.rd-sur { font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faible); margin-bottom: 10px; }
.rd p:not(.rd-sur) { font-size: 16px; color: var(--doux); }
.rd .pilule { margin-top: 20px; }
.fondateurs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fondateur { display: flex; flex-direction: column; border-radius: 36px; background: var(--gris); padding-bottom: clamp(30px, 3vw, 44px); overflow: hidden; transition: background .4s; }
.fondateur:hover { background: var(--gris-survol); }
.fondateur-visuel { position: relative; display: block; width: 100%; height: clamp(240px, 22vw, 320px); padding: 0; border: 0; background: none; cursor: pointer; }
.fondateur-visuel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fondateur-id { display: flex; align-items: center; gap: 16px; padding: 0 clamp(26px, 3vw, 44px); }
.fondateur-photo { width: 68px; height: 68px; flex: none; border-radius: 50%; object-fit: cover; background: var(--photo); }
.fondateur h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; letter-spacing: -0.03em; }
.fondateur-id p { margin-top: 4px; font-size: 15px; color: var(--doux); }
.fondateur-bio { padding: 0 clamp(26px, 3vw, 44px); margin-top: 22px; font-size: 17px; color: var(--texte); max-width: 640px; }
.fondateur-suite { padding: 0 clamp(26px, 3vw, 44px); margin-top: 14px; }
.fondateur-suite p { font-size: 17px; color: var(--doux); max-width: 640px; }
.fondateur-suite .appel { display: inline-block; margin-top: 22px; }
.fondateur-liens { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.fondateur-plus { align-self: flex-start; margin: 22px clamp(26px, 3vw, 44px) 0; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--trait-2); background: none; font-size: 15px; font-weight: 500; color: var(--encre); cursor: pointer; transition: border-color .2s; }
.fondateur-plus:hover { border-color: var(--encre); }
.appel { font-size: 15px; font-weight: 500; color: var(--encre); border-bottom: 1px solid var(--trait-2); padding-bottom: 2px; transition: border-color .2s; white-space: nowrap; }
.appel:hover { border-color: var(--encre); }
/* appel de 30 minutes à côté du bouton du catalogue 02 (02/11) */
.appel-c02 { display: flex; align-items: center; gap: .3em; width: max-content; margin: 18px 0 0; }

/* ---------- Sponsors : le texte à gauche, la carte en 3D à droite. Thème clair : l'encart et la carte en doré (retour du
   30/10, demande du fondateur) ; thème sombre : un dégradé bleu nuit profond, avec ses propres couleurs de texte (claires). */
.sponsors { padding: 0 var(--marge) var(--bloc); }
.sponsors-boite {
  --point: #b8892c; --point-lueur: rgb(214 170 76 / .55);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: clamp(40px, 6vw, 96px); border-radius: 36px; overflow: hidden; color: var(--texte);
  border: 1px solid #e8d6a8;
  background:
    radial-gradient(62% 95% at 100% 0%, rgb(236 200 118 / .42), transparent 62%),
    radial-gradient(50% 70% at 80% 100%, rgb(255 226 170 / .35), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgb(255 255 255 / .7), transparent 70%),
    linear-gradient(160deg, #fffaf0, #fbf1dc 52%, #f6e7c6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 50px 120px -60px rgb(150 110 30 / .45);
}
html[data-theme="dark"] .sponsors-boite {
  --encre: #f3f5fb; --texte: #dce2f0; --doux: #aeb7cc; --faible: #919bb4; --trait-2: rgb(157 176 255 / .3); --surface: rgb(255 255 255 / .06);
  --sur-encre: #070b1d; --encre-survol: #dfe6ff; --focus: #9db0ff; --point: #9db0ff; --point-lueur: rgb(157 176 255 / .7);
  border-color: rgb(157 176 255 / .2);
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(59 91 219 / .42), transparent 62%),
    radial-gradient(50% 70% at 78% 100%, rgb(110 90 230 / .16), transparent 70%),
    radial-gradient(70% 90% at 0% 100%, rgb(4 7 20 / .9), transparent 70%),
    linear-gradient(155deg, #101a3d, #0a1029 48%, #050818);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 50px 120px -60px rgb(12 24 80 / .75);
}
/* un filet de lumière en haut de l'encart */
.sponsors-boite::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(214 170 76 / .8), transparent); pointer-events: none; }
html[data-theme="dark"] .sponsors-boite::before { background: linear-gradient(90deg, transparent, rgb(157 176 255 / .7), transparent); }
.sponsors-texte > p:not(.sur) { color: var(--doux); font-size: 19px; max-width: 600px; margin-top: 24px; }
.sponsors-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.sponsors-points li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: var(--texte); }
.sponsors-points li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--point); box-shadow: 0 0 10px var(--point-lueur); transform: translateY(-2px); }
.sponsors-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.sponsors-3d { position: relative; aspect-ratio: 1 / .82; cursor: grab; touch-action: pan-y; } /* le doigt tourne la carte sans faire glisser la page */
.sponsors-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.sponsors-3d.pret canvas { opacity: 1; }
/* la photo ne sert que si la 3D ne peut pas s'afficher (fichier ouvert hors du site, carte graphique absente) */
.sponsors-repli { position: absolute; inset: 8% 4%; width: 92%; height: auto; margin: auto; filter: drop-shadow(0 34px 34px rgba(3, 8, 30, .5)); opacity: 0; visibility: hidden; transition: opacity .6s; }
.sponsors-3d.repli:not(.pret) .sponsors-repli { opacity: 1; visibility: visible; }

/* ---------- Film : en bas de page, un simple cadre ; le défilement n'est jamais retenu */
.film { padding: 0 var(--marge) var(--bloc); }
.film-cadre { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: clamp(22px, 2.6vw, 40px); overflow: hidden; background: #08090c; box-shadow: 0 40px 120px -50px rgb(var(--ombre-rgb) / .55); }
.film-cadre::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(91, 124, 250, .35), transparent 60%), radial-gradient(50% 60% at 80% 90%, rgba(236, 72, 153, .22), transparent 60%), radial-gradient(40% 40% at 70% 30%, rgba(16, 185, 129, .16), transparent 60%); animation: aurore 18s ease-in-out infinite alternate; }
@keyframes aurore { to { transform: translate3d(-4%, 3%, 0) scale(1.08); } }
.film-tourne { position: absolute; inset: 0; }
.film-affiche { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(24px, 4vw, 56px); color: #fff; }
.film-sur { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.film-titre { font-size: clamp(32px, 5.5vw, 84px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.film-legende { color: rgba(255, 255, 255, .7); font-size: clamp(14px, 1.3vw, 17px); }
.film-lecture { position: absolute; left: 50%; top: 44%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s; }
.film-lecture span { margin-left: 5px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.film-lecture.attente { animation: secouer .5s ease; }
@keyframes secouer { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.film-lecture:hover { transform: scale(1.06); background: rgba(255, 255, 255, .18); }
/* Plein écran du film ; sur un téléphone tenu droit, l'image tourne d'un quart de tour pour remplir l'écran en paysage */
.film-ecran { position: absolute; right: clamp(14px, 2vw, 26px); top: clamp(14px, 2vw, 26px); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 14px; cursor: pointer; transition: background .2s; }
.film-ecran:hover { background: rgba(255, 255, 255, .2); }
.film-ecran svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.film-fermer { display: none; position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
.film-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #08090c; }
.film-video.lue { object-fit: contain; z-index: 1; }
.film-affiche, .film-lecture { z-index: 1; }
.film-ecran, .film-fermer { z-index: 2; }
.film-dehors { margin: 18px 0 0; text-align: center; }
.film-lecture[hidden], .film-ecran[hidden], .film-video[hidden], .film-affiche[hidden], .film-dehors[hidden] { display: none; }
.film-youtube { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--encre); text-decoration: underline; text-decoration-color: var(--trait-2); text-underline-offset: 4px; }
.film-youtube:hover { text-decoration-color: var(--encre); }
.film-cadre.plein { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; height: 100lvh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.film-cadre.plein .film-ecran { display: none; }
.film-cadre.plein .film-fermer { display: block; }
html.film-ouvert, html.film-ouvert body { overflow: hidden; }
@media (orientation: portrait) {
  .film-cadre.plein.tourne .film-tourne { inset: auto; left: 50%; top: 50%; width: 100vh; height: 100vw; width: 100dvh; height: 100dvw; transform: translate(-50%, -50%) rotate(90deg); }
}

/* ---------- Rester à jour : le bloc d'Antigravity, à nos sujets */
.rester { padding: 0 clamp(10px, 1.6vw, 28px) var(--bloc); }
.rester-boite { position: relative; text-align: center; padding: clamp(52px, 6.4vw, 92px) 24px clamp(46px, 5vw, 68px); border-radius: 36px; background: var(--gris-2); }
.rester-boite h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.035em; }
.rester-boite > p { color: var(--doux); font-size: clamp(16px, 1.3vw, 19px); max-width: 660px; margin: 14px auto 38px; }
.puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 18px; max-width: 1000px; }
.puce { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; border: 0; background: var(--surface); color: var(--texte); font-size: 14.5px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.puce:hover { box-shadow: inset 0 0 0 1px var(--trait-2); }
.puce svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.puce .ic-coche { display: none; stroke-width: 1.8; }
.puce[data-sujet="tout"] .ic-repos { fill: currentColor; stroke: none; }
.puce[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.puce[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--encre); background: var(--surface); }
.puce[aria-pressed="true"] .ic-repos { display: none; }
.puce[aria-pressed="true"] .ic-coche { display: block; }

.champ { position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto; background: var(--surface); border-radius: 999px; padding: 5px; transition: box-shadow .2s; }
.champ:focus-within { box-shadow: inset 0 0 0 1px var(--encre); }
.champ input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--encre); outline: none; }
.champ input::placeholder { color: var(--indice); }
.champ .pilule { height: 46px; padding: 0 24px; }
.desab { margin-top: 26px; }
.desab-lien { border: 0; background: none; padding: 4px 6px; font-size: 13.5px; color: var(--faible); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.desab-lien:hover { color: var(--encre); }
.desab-zone { margin-top: 14px; }
.desab-zone > p { color: var(--doux); font-size: 14.5px; margin: 0 auto 12px; max-width: 520px; }
.champ-desab { max-width: 520px; }
.ligne-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ligne-actions [hidden] { display: none; }
.accord { display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--doux); text-align: left; max-width: 620px; cursor: pointer; }
.accord input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--encre); cursor: pointer; }
.accord a { color: var(--encre); text-decoration: underline; text-underline-offset: 2px; }
.note { margin-top: 12px; min-height: 1.4em; font-size: 13.5px; color: var(--faible); }
.note.erreur { color: var(--erreur); }

/* ---------- Pied de page : la devise, les colonnes, et une seule signature en bas */
.pied { position: relative; background: transparent; padding: 64px var(--marge) 0; border-top: 1px solid var(--trait); overflow: hidden; }
.pied-haut { display: grid; grid-template-columns: 1fr 1.7fr; gap: 60px; }
.pied-devise { font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; color: var(--texte); letter-spacing: -0.015em; line-height: 1.45; max-width: 440px; }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pied-colonnes h4 { font-size: 14px; font-weight: 500; color: var(--faible); letter-spacing: 0; margin-bottom: 16px; }
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied-colonnes a, .pied-colonnes span { font-size: 15px; color: var(--texte); }
.pied-colonnes span { color: var(--faible); }
.pied-colonnes a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding: 18px 0 22px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--faible); position: relative; z-index: 1; }
.pied-aide { margin: 0; padding: 4px 0 26px; display: flex; justify-content: center; position: relative; z-index: 1; }
.aide-point { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--trait); background: var(--carte); color: var(--faible); transition: color .2s, border-color .2s, background .2s; }
.aide-point svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.aide-point svg .pt { fill: currentColor; stroke: none; }
.aide-point:hover { color: var(--encre); border-color: var(--trait-2); }
.aide-point:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.france { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--trait); background: var(--carte); color: var(--doux); font-weight: 500; }
.france i { width: 18px; height: 12px; border-radius: 3px; overflow: hidden; background: linear-gradient(90deg, #1f3c8f 0 33.3%, #fff 33.3% 66.6%, #d9273a 66.6%); box-shadow: inset 0 0 0 1px rgb(var(--teinte-rgb) / .1); }
.pied-signature { display: flex; align-items: center; gap: 22px; margin-top: clamp(70px, 8vw, 120px); }
.sig-trait { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--trait-2) 30%, var(--trait-2) 70%, transparent); }
.pied-signature img { width: auto; height: 44px; }
.pied-nom { margin: 22px 0 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .62em; text-indent: .62em; color: var(--encre); }

/* ---------- Sous le pilier 9 : catalogues 03 à 05, communauté, qui sommes-nous, sponsors, film, lettre (écarts réduits le 29/10) */
.p9 { margin-bottom: var(--bloc-bas); }
.p9 ~ .ligne { padding-bottom: var(--bloc-bas); }
.communaute { margin-bottom: var(--bloc-bas); }
.qui, .sponsors, .film, .rester { padding-bottom: var(--bloc-bas); }

/* ---------- Apparitions au défilement (opacité et léger glissement seulement : aucun saut de mise en page) */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.js .revele.vu { opacity: 1; transform: none; }
/* Haut de page : lisible dès le premier affichage, sans attendre le script. L'entrée part d'un état visible
   (opacité pleine), seul un léger glissement de 14 px, en cascade courte (0, 70, 140, 210 ms). */
.js .ouverture .revele { opacity: 1; transform: none; transition: none; animation: entree-haut .8s cubic-bezier(.2,.8,.2,1) both; }
.js .ouverture .revele:nth-child(2) { animation-delay: .07s; }
.js .ouverture .revele:nth-child(3) { animation-delay: .14s; }
.js .ouverture .revele:nth-child(4) { animation-delay: .21s; }
@keyframes entree-haut { from { transform: translateY(14px); } to { transform: none; } }

/* ---------- « En savoir plus » : trois lignes visibles au plus par section, le détail replié (details/summary : clavier natif) */
.plus { margin-top: 18px; }
.plus > summary { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font-size: 15px; font-weight: 500; color: var(--encre); cursor: pointer; list-style: none; border-radius: 999px; -webkit-user-select: none; user-select: none; }
.plus > summary::-webkit-details-marker { display: none; }
.plus > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s cubic-bezier(.2,0,0,1); }
.plus[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.plus > summary:hover { text-decoration: underline; text-decoration-color: var(--trait-2); text-underline-offset: 4px; }
.plus[open] > :not(summary) { animation: plus-ouvre .35s cubic-bezier(.2,0,0,1) both; }
@keyframes plus-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.plus > p, .plus > .ligne-note { margin-top: 12px; color: var(--doux); font-size: 16px; max-width: 560px; }
.plus > .runbooks-points, .plus > .sponsors-points, .plus > .qui-points { margin-top: 16px; }
.qui-texte .plus > p { font-size: clamp(16px, 1.2vw, 18px); max-width: 640px; }
.qui-texte .plus > p + p { margin-top: 16px; }
.ligne.seule .plus { grid-column: 2; }

/* ---------- Écrans moyens et téléphones */
@media (max-width: 1240px) {
  .nav { display: none; }
}
@media (max-width: 1000px) {
  .ligne, .ligne.inverse, .p9-tete, .runbooks, .qui { grid-template-columns: 1fr; gap: 44px; }
  .runbooks { margin-top: calc(var(--bloc) * .2); }
  .ligne.inverse .ligne-texte { order: 0; }
  .ligne.seule .ligne-texte { display: block; }
  .ligne.seule h3 { margin-bottom: 22px; }
  .fondateurs { grid-template-columns: 1fr; }
  .sponsors-boite { grid-template-columns: 1fr; }
  .sponsors-3d { max-width: 520px; width: 100%; justify-self: center; }
  .pied-haut { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  :root { --bloc: clamp(150px, 38vw, 230px); --bloc-bas: clamp(64px, 18vw, 100px); }
  body { font-size: 16px; }
  .annonce { justify-content: flex-start; padding: 9px 44px 9px 16px; font-size: 13px; }
  .annonce-texte { display: none; }
  .tete-in { height: 66px; gap: 8px; }
  .marque { padding: 5px 12px; }
  .marque span { font-size: 14px; }
  .tete-actions .pilule { padding: 0 14px; }
  .ouverture { height: calc(100svh - 104px); min-height: 480px; }
  .film-cadre { aspect-ratio: 16 / 10; border-radius: 22px; }
  .film-lecture { width: 58px; height: 58px; margin: -29px 0 0 -29px; top: 36%; }
  .film-legende { display: none; }
  .appli { border-radius: 18px; font-size: 14px; }
  .cibles li { grid-template-columns: 1fr auto; }
  .cible-format { display: none; }
  .fichier { gap: 12px; padding: 14px; }
  .fichier-poids { font-size: 18px; }
  .runbooks { padding: 28px 20px; border-radius: 26px; }
  .runbooks-pile { padding-top: 18px; }
  .runbook > span:last-child { font-size: 11px; }
  .sommaire { border-radius: 22px; }
  .chiffres { gap: 26px; }
  .comparaison { grid-template-columns: 1fr; }
  .comp-barres { height: 110px; }
  .jeu-cartes { aspect-ratio: 16 / 13; }
  .p9 { padding: 28px 20px; border-radius: 26px; }
  .communaute { border-radius: 26px; }
  .fondateur { border-radius: 26px; }
  .champ { flex-direction: column; background: none; padding: 0; gap: 10px; }
  .champ:focus-within { box-shadow: none; }
  .champ input:focus { box-shadow: inset 0 0 0 1px var(--encre); }
  .champ input { width: 100%; flex: none; background: var(--surface); border-radius: 999px; }
  .champ .pilule { width: 100%; }
  .pied { padding: 48px 22px 0; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 420px) {
  /* plus de logo dans la tête (décision du 30/10) : le nom reste, en plus petit */
  .marque { padding: 5px 10px; }
  .marque span { font-size: 12px; letter-spacing: .02em; line-height: 1.08; white-space: normal; max-width: 74px; }
  .tete-in { gap: 4px; }
  .tete-actions { gap: 0; padding: 4px; }
  .tete-actions .pilule { height: 34px; padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .revele { opacity: 1; transform: none; transition: none; }
  .js .ouverture .revele, .plus[open] > :not(summary) { animation: none; }
  .defiler { animation: none; opacity: 1; }
  .defiler-trait i { animation: none; transform: translateY(14px); opacity: 1; }
  .plus > summary::after { transition: none; }
  .film-cadre::before, .appli-progres i, .film-lecture.attente { animation: none; }
  .jeu-carte, .runbook, .capture-lien, .bulle { transition: none; }
}

/* ---------- Page « Cartes en 3D » : l'atelier seul, sur sa propre page ---------- */
.nav a[aria-current="page"] { color: var(--encre); background: var(--gris); }
.cartes-page { padding: clamp(48px, 6vw, 96px) var(--marge) clamp(70px, 8vw, 130px); }
.cartes-tete { max-width: 860px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.cartes-tete h1 { margin: 0; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.cartes-intro { margin: 22px 0 0; font-size: clamp(17px, 1.4vw, 20px); color: var(--doux); max-width: 680px; }
.atelier-cadre { position: relative; height: clamp(560px, calc(100vh - 150px), 940px); border-radius: 26px; overflow: hidden; background: #0b0a12; box-shadow: 0 40px 100px -50px rgb(var(--ombre-rgb) / .6); }
.atelier-cadre iframe { position: absolute; inset: 0; width: 1px; min-width: 100%; max-width: 100%; height: 100%; border: 0; display: block; background: #0b0a12; } /* iPhone : le cadre ne s'élargit jamais à son contenu */
.atelier-attente { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; color: rgba(236, 235, 243, .62); font-size: 14px; letter-spacing: .02em; transition: opacity .5s; z-index: 1; }
.atelier-attente img { width: min(420px, 56%); height: auto; opacity: .85; }
.atelier-attente img[hidden] { display: none; }
.atelier-cadre.pret .atelier-attente { opacity: 0; pointer-events: none; }
.atelier-cadre.haut-auto { height: auto; min-height: 420px; }
.atelier-cadre.haut-auto iframe { position: relative; height: 1100px; }
.cartes-choix { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(22px, 2.4vw, 34px); }
.cartes-choix button { padding: 10px; border: 1px solid var(--trait); border-radius: 18px; background: var(--carte); cursor: pointer; transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cartes-choix button:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgb(var(--ombre-rgb) / .45); }
.cartes-choix button[aria-pressed="true"] { border-color: var(--encre); }
.cartes-choix img { display: block; width: 100%; height: auto; }
.cartes-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: clamp(30px, 3vw, 46px); }
.cartes-pied p { margin: 0; color: var(--faible); font-size: 15px; max-width: 620px; }
.cartes-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pourquoi { margin-top: clamp(90px, 10vw, 170px); }
.pourquoi h2 { font-size: clamp(30px, 3.2vw, 48px); max-width: 760px; }
.pourquoi-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 4vw, 64px); }
.pourquoi-grille > div { padding: clamp(24px, 2.4vw, 34px); border-radius: 26px; background: var(--gris); }
.pourquoi-grille h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; }
.pourquoi-grille p { font-size: 15.5px; color: var(--doux); }
/* l'atelier n'apparaît qu'une fois posé : plus de carte qui saute à l'arrivée */
.atelier-cadre iframe { opacity: 0; transition: opacity .7s ease; }
.atelier-cadre.pret iframe { opacity: 1; }
@media (max-width: 1000px) { .pourquoi-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pourquoi-grille { grid-template-columns: 1fr; } }
.pied-court { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 26px var(--marge) 34px; border-top: 1px solid var(--trait); color: var(--faible); font-size: 14px; }
.pied-court a:hover { color: var(--encre); }
.pied-court .pied-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 1000px) { .cartes-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .atelier-cadre { border-radius: 20px; } .cartes-choix { gap: 8px; } .cartes-choix button { padding: 6px; border-radius: 14px; } }

/* ---------- Trait de chargement (24/10) : un toucher sur un lien, et l'on voit tout de suite que la page arrive */
a, button, [role="button"], label { touch-action: manipulation; }

/* ---------- Téléphone : moins de travail pendant le défilement (24/10, « très saccadé ») */
@media (max-width: 820px), (pointer: coarse) {
  /* le flou derrière les bulles de la tête se recalcule à chaque image du défilement : un blanc presque plein suffit */
  .tete.ombre .bulle { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } /* plein : sans flou, le texte de la page transparaissait */
  /* les ombres très larges coûtent cher à peindre ; plus courtes sur petit écran */
  .film-cadre { box-shadow: 0 24px 50px -30px rgb(var(--ombre-rgb) / .5); }
  .appli { box-shadow: 0 24px 44px -30px rgb(var(--ombre-rgb) / .45), 0 2px 6px rgb(var(--ombre-rgb) / .04); }
  .capture, .p9-visuel .capture { box-shadow: 0 22px 40px -28px rgb(var(--ombre-rgb) / .45); }
  .runbook img { box-shadow: 0 12px 20px -14px rgb(var(--ombre-rgb) / .5), 0 1px 3px rgb(var(--ombre-rgb) / .12); }
  .sommaire { box-shadow: 0 24px 60px -30px rgb(var(--ombre-rgb) / .6); }
  .atelier-cadre { box-shadow: 0 22px 44px -30px rgb(var(--ombre-rgb) / .6); }
  /* les boutons du film flottent sur l'aurore animée : le flou serait recalculé à chaque image ; un voile un peu plus marqué */
  .film-lecture, .film-ecran { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .16); }
  .sommaire::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* au doigt, pas de survol : aucun calque réservé d'avance pour chaque carte et chaque guide */
  .jeu-carte, .runbook { will-change: auto; }
}
/* ---------- Animations sans fin : en pause quand elles sont hors de l'écran (classe « hors », posée par app.js) */
.film-cadre.hors::before, .appli.hors .appli-progres i { animation-play-state: paused; }
/* ---------- Bouton soleil/lune (29/10 au soir) : il montre le thème actif ; la lune en sombre, le soleil en clair */
.theme-lune { display: none; }
html[data-theme="dark"] .theme-lune { display: inline; }
html[data-theme="dark"] .theme-soleil { display: none; }
/* le passage d'un thème à l'autre : un fondu enchaîné de la page (app.js, View Transitions), rien si moins d'animations */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Recherche (recherche.js, refaite le 29/10) : la loupe ouvre un champ en pilule DANS la barre du haut, entre la
   navigation et la loupe ; il se déploie vers la gauche (bord droit fixe), et les suggestions s'affichent juste dessous,
   dans un panneau compact en verre dépoli clair, texte noir. */
/* la loupe et le bouton soleil/lune : deux boutons ronds identiques */
.rech-ouvrir, .theme-bouton { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre); cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.rech-ouvrir:hover, .rech-ouvrir[aria-expanded="true"], .theme-bouton:hover { background: rgb(var(--teinte-rgb) / .06); }
.rech-ouvrir svg, .theme-bouton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }
/* le bouton se voit tout de suite : un anneau ; le soleil chaud en clair, la lune bleu clair, un peu lumineuse, en sombre */
.theme-bouton { color: #b26b12; background: rgb(245 176 66 / .1); box-shadow: inset 0 0 0 1px rgb(178 107 18 / .3); }
.theme-bouton:hover { background: rgb(245 176 66 / .17); box-shadow: inset 0 0 0 1px rgb(178 107 18 / .5); }
.theme-bouton svg { width: 18px; height: 18px; stroke-width: 1.6; }
.theme-lune { fill: currentColor; fill-opacity: .22; }
html[data-theme="dark"] .theme-bouton { color: #c9d4ff; background: rgb(157 176 255 / .1); box-shadow: inset 0 0 0 1px rgb(157 176 255 / .34), 0 0 18px -6px rgb(157 176 255 / .6); }
html[data-theme="dark"] .theme-bouton:hover { background: rgb(157 176 255 / .16); box-shadow: inset 0 0 0 1px rgb(157 176 255 / .55), 0 0 22px -6px rgb(157 176 255 / .75); }

/* la zone libre de la barre : elle prend la place qui reste, le champ s'y cale à droite, contre la loupe */
.rech-zone { position: relative; flex: 1 1 0; min-width: 0; height: 38px; align-self: center; }
.rech {
  position: absolute; right: 0; top: 0; z-index: 2; width: 38px; height: 38px; opacity: 0; pointer-events: auto;
  color: var(--r-texte); font-family: var(--police); font-size: 15px; line-height: 1.4;
  transition: width .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.rech[hidden] { display: none; }
.rech.ouverte { width: min(460px, 100%); opacity: 1; }
.rech svg { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
/* le champ : une pilule de la même matière que les bulles de la tête (30/10 : d'une seule couleur dans les deux thèmes,
   sans bloc plus foncé à l'intérieur ; la croix n'a plus de rond de fond) */
.rech-champ {
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 15px; border-radius: 999px; overflow: hidden;
  background: var(--r-champ); border: 1px solid rgb(var(--teinte-rgb) / .07);
  -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 10px 30px -18px rgb(var(--ombre-rgb) / .3);
}
.rech-champ:focus-within { border-color: rgb(var(--teinte-rgb) / .2); }
.rech-saisie { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--r-texte); font: inherit; font-size: 15px; caret-color: var(--encre); }
.rech-saisie::placeholder { color: var(--r-faible); opacity: 1; }
.rech-saisie::-webkit-search-cancel-button { display: none; }
.rech-saisie:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px transparent inset; transition: background-color 9999s; }
.rech-fermer { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--r-doux); cursor: pointer; transition: background .2s, color .2s; }
.rech-fermer:hover { background: transparent; color: var(--r-texte); }
.rech-fermer:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rech-fermer svg, .rech-fermer .rech-ic { width: 14px; height: 14px; padding: 0; background: none; border-radius: 0; stroke-width: 1.7; }

/* le panneau des suggestions, juste sous le champ */
.rech-panneau {
  position: absolute; top: calc(100% + 8px); right: 0; width: max(100%, 460px); max-width: calc(100vw - 32px); max-height: 60vh;
  overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 18px;
  background: rgb(var(--surface-rgb) / .84); border: 1px solid rgb(var(--teinte-rgb) / .08);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 26px 60px -26px rgb(var(--ombre-rgb) / .4), 0 2px 8px rgb(var(--ombre-rgb) / .05);
  scrollbar-width: thin; scrollbar-color: rgb(var(--teinte-rgb) / .18) transparent;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease .05s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.rech.ouverte .rech-panneau { opacity: 1; transform: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rech-champ { background: var(--r-champ-plein); } .rech-panneau { background: var(--surface); } }
.rech-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rech-message { margin: 0; padding: 12px 10px; color: var(--r-doux); font-size: 14px; }
.rech-gtitre { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--r-faible); }
html[lang="zh"] .rech-gtitre { letter-spacing: .02em; }
.rech-effacer { padding: 2px 6px; margin-right: -4px; border: 0; border-radius: 6px; background: none; color: var(--r-doux); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.rech-effacer:hover { background: var(--r-survol); color: var(--r-texte); }
.rech mark { background: var(--r-marque); color: inherit; border-radius: 3px; padding: 0 1px; margin: 0 -1px; }
.rech-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px 6px 6px; }
.rech-filtres[hidden] { display: none; }
.rech-filtre { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--r-marque); color: var(--r-texte); font-size: 12px; font-weight: 500; }

/* une ligne : pastille, titre et prix, puis la catégorie et une phrase (une seule ligne) */
.rech-ligne { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ic t p" "ic d d"; column-gap: 10px; row-gap: 1px; align-items: center; padding: 7px 10px; border-radius: 11px; color: var(--r-texte); text-decoration: none; cursor: pointer; }
.rech-ligne[aria-selected="true"] { background: var(--r-actif); }
.rech-ligne > .rech-ic, .rech-ligne > .rech-point { grid-area: ic; align-self: start; margin-top: 1px; }
.rech-t { grid-area: t; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rech-prix { grid-area: p; justify-self: end; font-size: 12.5px; font-weight: 600; color: var(--r-texte); white-space: nowrap; }
.rech-d { grid-area: d; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--r-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rech-c { color: var(--r-faible); }
.rech-c::after { content: " · "; }
.rech-ic { width: 20px; height: 20px; padding: 3px; border-radius: 6px; color: var(--r-doux); background: rgb(var(--teinte-rgb) / .055); box-sizing: border-box; }
.rech-point { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
/* la première ligne, un peu mise en avant ; sa réponse courte, quand c'est une question sur IMPERIUM AGENCY */
.rech-premier { background: var(--r-premier); }
.rech-premier .rech-t { font-weight: 600; }
.rech-reponse { grid-area: d; min-width: 0; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--texte); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* lignes courtes de la barre vide : une seule ligne chacune */
.rech-courte { grid-template-areas: "ic t p"; padding: 6px 10px; }
.rech-courte .rech-t { font-weight: 450; }
.rech-recent .rech-ic { background: none; padding: 2px; color: var(--r-faible); }
/* rien trouvé */
.rech-rien { padding: 10px 10px 6px; }
.rech-rien-titre { margin: 0; font-size: 15px; font-weight: 600; color: var(--r-texte); }
.rech-rien-texte { margin: 3px 0 0; color: var(--r-doux); font-size: 13px; line-height: 1.45; }
@media (hover: hover) { .rech-ligne:hover:not([aria-selected="true"]) { background: var(--r-survol); } .rech-premier:hover:not([aria-selected="true"]) { background: var(--r-actif); } }

/* téléphone et tablette : le champ prend toute la largeur, juste sous la barre du haut (03/11 : il cachait la marque
   et les boutons) */
@media (max-width: 820px) {
  .tete-in { position: relative; }
  .rech-zone { position: static; flex: 0 0 0; margin-left: -8px; }
  .rech { top: calc(100% + 8px); right: var(--tete-bord); margin-top: 0; }
  .rech.ouverte { width: calc(100% - 2 * var(--tete-bord)); }
  .rech-champ { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--r-champ-plein); }
  /* sans flou sur téléphone (il était recalculé à chaque image) : un panneau plein, le texte de la page ne transparaît pas */
  .rech-panneau { width: 100%; max-width: none; border-radius: 16px; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rech-saisie { font-size: 16px; } /* 16 px : le téléphone ne zoome pas sur le champ */
  .rech-ligne { padding: 8px 9px; grid-template-columns: 20px auto minmax(0, 1fr); grid-template-areas: "ic t t" "ic p d"; }
  .rech-ligne.sans-prix { grid-template-areas: "ic t t" "ic d d"; }
  .rech-courte { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ic t p"; }
  .rech-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rech-ligne:not(.rech-courte) .rech-prix { justify-self: start; font-size: 12px; }
  .rech-ligne:not(.rech-courte) .rech-prix + .rech-d::before { content: "·"; margin: 0 6px 0 -4px; color: var(--r-faible); }
}
@media (prefers-reduced-motion: reduce) { .rech, .rech-panneau { transition: none; transform: none; } }
@media (forced-colors: active) {
  .rech-ligne[aria-selected="true"] { outline: 2px solid Highlight; }
  .rech mark { background: Highlight; color: HighlightText; }
}

/* ---------- Présence des blocs (29/10 au soir). Sombre : du verre bleuté, un halo, un filet de lumière en haut, sans
   toucher au fond de nuit validé. Clair : du verre dépoli blanc, une ombre bleutée et un filet nacré. Aucun flou d'arrière-plan
   (coûteux au défilement) : des dégradés et des ombres seulement. */
:is(.p9, .runbooks, .communaute, .rester-boite, .fondateur, .rd, .comp-abo) { position: relative; }
:is(.p9, .runbooks, .communaute, .rester-boite, .fondateur)::before { content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: 1px; pointer-events: none; z-index: 1; }
html[data-theme="dark"] :is(.p9, .runbooks, .communaute, .rester-boite, .fondateur) {
  background:
    radial-gradient(70% 55% at 0% 0%, rgb(59 91 219 / .17), transparent 62%),
    radial-gradient(55% 50% at 100% 100%, rgb(157 176 255 / .07), transparent 66%),
    linear-gradient(180deg, rgb(20 27 52 / .7), rgb(9 12 25 / .62));
  border: 1px solid rgb(157 176 255 / .13);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 40px 120px -70px rgb(59 91 219 / .6);
}
html[data-theme="dark"] :is(.p9, .runbooks, .communaute, .rester-boite, .fondateur)::before { background: linear-gradient(90deg, transparent, rgb(157 176 255 / .6), transparent); }
html[data-theme="dark"] .fondateur:hover { background: radial-gradient(70% 55% at 0% 0%, rgb(59 91 219 / .24), transparent 62%), linear-gradient(180deg, rgb(24 32 62 / .78), rgb(11 15 30 / .66)); }
html[data-theme="dark"] :is(.rd, .comp-abo) { background: linear-gradient(180deg, rgb(26 34 64 / .6), rgb(12 16 32 / .5)); box-shadow: inset 0 0 0 1px rgb(157 176 255 / .12), inset 0 1px 0 rgb(255 255 255 / .05); }
html[data-theme="dark"] .appli { border-color: rgb(157 176 255 / .16); box-shadow: 0 60px 120px -70px rgb(59 91 219 / .55), 0 0 0 1px rgb(255 255 255 / .02); }
html[data-theme="dark"] .capture { box-shadow: 0 0 0 1px rgb(157 176 255 / .16), 0 50px 120px -55px rgb(59 91 219 / .55); }
html[data-theme="dark"] :is(h2, .ligne h3) { text-shadow: 0 0 42px rgb(157 176 255 / .2); }
html:not([data-theme="dark"]) :is(.p9, .runbooks, .communaute, .rester-boite, .fondateur) {
  background: linear-gradient(160deg, rgb(255 255 255 / .8), rgb(255 255 255 / .5) 60%, rgb(246 243 252 / .55));
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: inset 0 1px 0 #fff, 0 30px 80px -52px rgb(59 91 219 / .35), 0 2px 6px rgb(10 10 11 / .03);
}
html:not([data-theme="dark"]) :is(.p9, .runbooks, .communaute, .rester-boite, .fondateur)::before { height: 2px; background: linear-gradient(90deg, transparent, #f1d3e6, #d2dfff 35%, #d3f0e5 65%, #f2e5c9, transparent); opacity: .95; }
html:not([data-theme="dark"]) .fondateur:hover { background: linear-gradient(160deg, rgb(255 255 255 / .92), rgb(255 255 255 / .66)); }
html:not([data-theme="dark"]) .capture { box-shadow: 0 0 0 1px rgb(255 255 255 / .9), 0 50px 110px -60px rgb(40 60 140 / .45); }

/* ---------- Catalogue 03 : la carte « Chez IMPERIUM AGENCY » en sombre (elle était blanche) : bleu nuit, bord lumineux */
html[data-theme="dark"] .comp-nous {
  --sur-encre-rgb: 238 241 248; --sur-encre: #eef1f8;
  background: radial-gradient(80% 60% at 100% 0%, rgb(59 91 219 / .38), transparent 62%), linear-gradient(160deg, #142250, #0a122c 58%, #070b1c);
  box-shadow: inset 0 0 0 1px rgb(157 176 255 / .26), inset 0 1px 0 rgb(255 255 255 / .1), 0 40px 100px -50px rgb(59 91 219 / .6);
}
html[data-theme="dark"] .comp-nous .comp-barres i { background: linear-gradient(180deg, #9db0ff, #3b5bdb); box-shadow: 0 0 18px rgb(157 176 255 / .45); }
.comp-prix span { white-space: nowrap; }

/* ---------- Catalogue 03 : un logiciel en mouvement (maquette « Exemple », sans donnée réelle) */
.c3-demo { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 96px); align-items: center; margin-top: clamp(56px, 7vw, 120px); }
.c3-demo h4 { font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 18px; }
.c3-demo-texte > p:not(.numero) { color: var(--doux); font-size: 17px; max-width: 480px; }
.c3-demo-texte .appel { display: inline-block; margin-top: 24px; }
.c3-ecran { margin: 0; }
.c3-ecran figcaption { margin-top: 14px; font-size: 13.5px; color: var(--faible); }
.ecran { --ok: #1f9d6b; --alerte: #c2410c; --rappel: #3b5bdb; border-radius: 22px; overflow: hidden; background: var(--carte); border: 1px solid var(--trait); box-shadow: 0 50px 110px -70px rgb(var(--ombre-rgb) / .45), 0 2px 6px rgb(var(--ombre-rgb) / .04); font-size: 14.5px; }
html[data-theme="dark"] .ecran { --ok: #4ade9c; --alerte: #fb8f5c; --rappel: #9db0ff; border-color: rgb(157 176 255 / .16); box-shadow: 0 60px 120px -70px rgb(59 91 219 / .55); }
.ecran-barre { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; background: var(--gris-2); border-bottom: 1px solid var(--trait); }
.ecran-points { display: flex; gap: 6px; }
.ecran-points i { width: 9px; height: 9px; border-radius: 50%; background: var(--trait-2); }
.ecran-titre { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--texte); }
.ecran-exemple { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rappel); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; }
html[lang="zh"] .ecran-exemple { letter-spacing: 0; }
.ecran-corps { position: relative; padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 16px; }
.facture { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic infos montant" "ic etat etat" "jauge jauge jauge"; align-items: center; gap: 4px 14px; padding: 14px 16px 12px; border-radius: 16px; background: var(--gris); transition: box-shadow .6s ease; }
.facture-ic { grid-area: ic; display: grid; place-items: center; width: 42px; height: 48px; border-radius: 10px; background: var(--encre); color: var(--sur-encre); }
.facture-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.facture-infos { grid-area: infos; display: flex; flex-direction: column; min-width: 0; }
.facture-infos b { font-weight: 600; color: var(--encre); }
.facture-infos span { font-size: 13px; color: var(--faible); }
.facture-montant { grid-area: montant; font-size: 21px; font-weight: 500; letter-spacing: -0.03em; color: var(--encre); white-space: nowrap; }
.facture-etat { grid-area: etat; position: relative; height: 24px; }
.facture-etat em { position: absolute; left: 0; top: 0; font-style: normal; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.facture-etat em[data-e="0"] { color: var(--doux); background: rgb(var(--teinte-rgb) / .06); }
.facture-etat em[data-e="1"], .facture-etat em[data-e="2"] { color: var(--rappel); background: color-mix(in srgb, var(--rappel) 13%, transparent); }
.facture-etat em[data-e="3"] { color: var(--alerte); background: color-mix(in srgb, var(--alerte) 13%, transparent); }
.facture-etat em[data-e="4"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.ecran[data-etape="0"] em[data-e="0"], .ecran[data-etape="1"] em[data-e="1"], .ecran[data-etape="2"] em[data-e="2"], .ecran[data-etape="3"] em[data-e="3"], .ecran[data-etape="4"] em[data-e="4"] { opacity: 1; transform: none; }
.facture-jauge { grid-area: jauge; height: 3px; margin-top: 8px; border-radius: 3px; background: rgb(var(--teinte-rgb) / .07); overflow: hidden; }
.facture-jauge i { display: block; height: 100%; border-radius: 3px; background: var(--ok); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.ecran[data-etape="4"] .facture-jauge i { transform: scaleX(1); }
.ecran[data-etape="4"] .facture { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 45%, transparent); }
.etapes { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 11px; }
.etapes li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--faible); transition: color .5s ease; }
.etapes li i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--trait-2); transition: border-color .4s, background .4s; }
.etapes li i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--sur-encre); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1) .1s; }
.ecran[data-etape="1"] li[data-k="1"], .ecran[data-etape="2"] li:is([data-k="1"], [data-k="2"]), .ecran[data-etape="3"] li:not([data-k="4"]), .ecran[data-etape="4"] li { color: var(--texte); }
.ecran[data-etape="1"] li[data-k="1"] i, .ecran[data-etape="2"] li:is([data-k="1"], [data-k="2"]) i, .ecran[data-etape="3"] li:not([data-k="4"]) i, .ecran[data-etape="4"] li i { border-color: var(--rappel); background: var(--rappel); }
.ecran[data-etape="1"] li[data-k="1"] i::after, .ecran[data-etape="2"] li:is([data-k="1"], [data-k="2"]) i::after, .ecran[data-etape="3"] li:not([data-k="4"]) i::after, .ecran[data-etape="4"] li i::after { transform: rotate(45deg) scale(1); }
.ecran[data-etape="4"] li[data-k="4"] i { border-color: var(--ok); background: var(--ok); }
html[data-theme="dark"] .etapes li i::after { border-color: #070b1d; }
/* le courriel de relance : il part à chaque étape (rappel, relance, relance ferme) */
.courriel { position: absolute; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 24px); width: min(230px, 46%); padding: 13px 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 24px 50px -24px rgb(var(--ombre-rgb) / .45); opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); pointer-events: none; }
.courriel-objet { font-size: 12.5px; font-weight: 600; color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.courriel-ligne { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgb(var(--teinte-rgb) / .08); }
.courriel-ligne.court { width: 62%; }
.courriel-bouton { display: inline-block; margin-top: 11px; padding: 5px 11px; border-radius: 999px; background: var(--rappel); color: #fff; font-size: 12px; font-weight: 600; }
html[data-theme="dark"] .courriel-bouton { color: #070b1d; }
.ecran[data-etape="1"] .courriel { animation: envoi-1 2.1s cubic-bezier(.2, .8, .2, 1) both; }
.ecran[data-etape="2"] .courriel { animation: envoi-2 2.1s cubic-bezier(.2, .8, .2, 1) both; }
.ecran[data-etape="3"] .courriel { animation: envoi-3 2.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes envoi-1 { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } 18%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(26px, -10px, 0) scale(.96); } }
@keyframes envoi-2 { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } 18%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(26px, -10px, 0) scale(.96); } }
@keyframes envoi-3 { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } 18%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(26px, -10px, 0) scale(.96); } }
.ecran[data-etape="3"] .courriel-bouton { background: var(--alerte); }
@media (max-width: 1000px) { .c3-demo { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 820px) {
  .ecran { border-radius: 18px; font-size: 14px; }
  .courriel { position: static; width: auto; margin-top: 2px; }
  .ecran:not([data-etape="1"]):not([data-etape="2"]):not([data-etape="3"]) .courriel { animation: none; opacity: .35; transform: none; }
  .etapes li { font-size: 13.5px; }
  .ecran, .capture { box-shadow: 0 24px 44px -30px rgb(var(--ombre-rgb) / .45); }
}
@media (prefers-reduced-motion: reduce) {
  .facture-etat em, .facture-jauge i, .etapes li, .etapes li i, .etapes li i::after { transition: none; }
  .courriel { animation: none !important; opacity: 0; }
  .ouverture-fond { transition: none; }
}

/* ---------- Centre d'aide (aide.html, écrit par scripts/construire-aide.mjs, 31/10) : recherche, sommaire en tuiles,
   chapitres de questions repliées */
.aide-page [hidden] { display: none !important; }
.aide-haut { max-width: 860px; margin-bottom: clamp(26px, 3vw, 44px); }
.aide-haut h1 { margin: 0; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600; }
.aide-chercher { position: relative; margin-top: clamp(22px, 2.6vw, 34px); max-width: 680px; }
.aide-chercher svg { position: absolute; left: 20px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--faible); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.aide-chercher input { width: 100%; height: 58px; padding: 0 22px 0 52px; border-radius: 999px; border: 1px solid var(--trait-2); background: var(--r-champ); color: var(--encre); font: inherit; font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.aide-chercher input::placeholder { color: var(--indice); }
.aide-chercher input:focus { border-color: var(--focus); box-shadow: 0 0 0 4px var(--r-marque); }
.aide-compte { min-height: 1.4em; margin: 12px 0 0 6px; color: var(--faible); font-size: 14px; }
.aide-sommaire { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: clamp(44px, 5vw, 80px); }
.aide-tuile { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 18px; border-radius: 22px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); transition: border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), background .2s; }
.aide-tuile:hover { border-color: var(--trait-2); background: var(--gris-survol); transform: translateY(-2px); }
.aide-tuile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.aide-tuile strong { font-size: 17px; font-weight: 600; color: var(--encre); letter-spacing: -0.01em; }
.aide-tuile-d { font-size: 14px; line-height: 1.5; color: var(--faible); }
.aide-nb { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--faible); }
.aide-num { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--faible); font-variant-numeric: tabular-nums; }
.aide-chapitres { display: grid; gap: clamp(46px, 5vw, 76px); }
.aide-groupe { max-width: 860px; scroll-margin-top: 110px; }
.aide-groupe h2 { margin: 6px 0 8px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; font-weight: 600; line-height: 1.15; }
.aide-desc { margin: 0 0 16px; color: var(--faible); max-width: 70ch; line-height: 1.55; }
.aide-q { margin: 0; border-top: 1px solid var(--trait); padding: 8px 0; scroll-margin-top: 110px; }
.aide-q:last-of-type { border-bottom: 1px solid var(--trait); }
.aide-q > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 44px; font-size: 16px; line-height: 1.4; }
.aide-q > summary::after { flex: none; }
.aide-q > p { margin: 6px 0 12px; max-width: 70ch; color: var(--doux); line-height: 1.65; font-size: 15.5px; }
.aide-q > p a { color: var(--encre); text-decoration: underline; text-decoration-color: var(--trait-2); text-underline-offset: 3px; }
.aide-q > p a:hover { text-decoration-color: currentColor; }
.aide-retour { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--faible); }
.aide-retour:hover { color: var(--encre); }
.aide-rien { max-width: 680px; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--trait); background: var(--carte); color: var(--doux); }
.aide-rien p { margin: 0; }
.aide-pied { margin-top: clamp(56px, 6vw, 96px); }
.aide-pied h2 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; font-weight: 600; }
@media (max-width: 600px) {
  /* sur téléphone, 15 tuiles empilées font un très long sommaire : deux colonnes, titre et nombre seulement */
  .aide-sommaire { grid-template-columns: 1fr 1fr; gap: 8px; }
  .aide-tuile { gap: 4px; padding: 12px 13px 11px; border-radius: 16px; }
  .aide-tuile strong { font-size: 14.5px; line-height: 1.25; }
  .aide-tuile-d { display: none; }
  .aide-nb { padding-top: 4px; font-size: 12px; }
  .aide-chercher input { height: 52px; font-size: 16px; }
}


/* ---------- Confort au doigt (02/11) : sur écran tactile, toute cible fait au moins 44 px de haut et de large, et deux cibles
   voisines restent espacées. Les liens dans une phrase gardent leur place dans la ligne : seule la zone touchée s'agrandit. */
@media (pointer: coarse) {
  .annonce-lien, .appel, .fondateur-plus, .desab-lien { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
  .annonce { padding-top: 2px; padding-bottom: 2px; }
  .annonce-fermer { width: 44px; height: 44px; right: 4px; }
  .marque, .nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .rech-ouvrir, .theme-bouton { width: 44px; height: 44px; }
  .langue-bouton, .tete-actions .pilule { height: 44px; }
  .langue-menu button { min-height: 44px; }
  .plus > summary { min-height: 44px; display: flex; align-items: center; }
  .puce, .runbooks-langues button { height: 44px; }
  .runbooks-langues { gap: 8px; }
  .pied-colonnes ul { gap: 2px; }
  .pied-colonnes a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .pied-bas a, .pied-aide a { display: inline-flex; align-items: center; min-height: 44px; }
  /* la case à cocher : toute la phrase autour (son étiquette) la coche déjà ; la case un peu plus grande, les liens de la
     phrase avec une zone touchée plus haute */
  .accord { min-height: 44px; }
  .accord input { width: 22px; height: 22px; margin: 0; }
  .accord a { padding: 13px 0; margin: -13px 0; }
}
@media (pointer: coarse) and (max-width: 420px) {
  /* la tête reste sur une ligne avec des boutons de 44 px : un peu moins d'espace autour */
  .tete-actions { gap: 0; padding: 0; }
  .tete-actions .pilule { height: 44px; padding: 0 12px; }
  .langue-bouton { padding: 0 8px; gap: 5px; }
}

/* ---------- Mode léger (02/11, /commun/leger.js) : appareil modeste. Ni flou, ni mouvement continu, ombres courtes,
   apparitions directes ; le haut de page est en texte (ouverture.js), la carte de sponsor en photo (app.js). */
html.leger .tete.ombre .bulle { background: var(--surface); box-shadow: 0 6px 16px -12px rgb(var(--ombre-rgb) / .35); }
html.leger .rech-champ { background: var(--r-champ-plein); }
html.leger .rech-panneau { background: var(--surface); }
html.leger .film-lecture, html.leger .film-ecran { background: rgba(255, 255, 255, .16); }
html.leger .ouv-p { filter: none !important; }
html.leger .defiler-trait i, html.leger .appli-progres i, html.leger .film-cadre::before, html.leger .film-lecture.attente { animation: none; }
html.leger .defiler-trait i { transform: translateY(14px); opacity: 1; }
html.js.leger .revele { opacity: 1; transform: none; transition: none; }
html.js.leger .ouverture .revele { animation: none; }
html.leger .film-cadre { box-shadow: 0 18px 36px -26px rgb(var(--ombre-rgb) / .5); }
html.leger .appli { box-shadow: 0 18px 34px -26px rgb(var(--ombre-rgb) / .45); }
html.leger .capture, html.leger .p9-visuel .capture { box-shadow: 0 16px 30px -24px rgb(var(--ombre-rgb) / .45); }
html.leger .runbook img { box-shadow: 0 8px 14px -10px rgb(var(--ombre-rgb) / .5); }
html.leger .sommaire, html.leger .langue-menu { box-shadow: 0 16px 36px -24px rgb(var(--ombre-rgb) / .55); }
html.leger .sponsors-repli { filter: drop-shadow(0 16px 16px rgba(3, 8, 30, .4)); }
html.leger .jeu-carte, html.leger .runbook { will-change: auto; transition: none; }

/* ---------- Tête sur téléphone (03/11) : « Se connecter » débordait de l'écran ; il quitte la tête (il reste dans le pied,
   dans les catalogues 02 et 03). Restent le nom, la recherche, le thème et la langue, sans rien rogner. */
@media (max-width: 820px) {
  .tete-actions .pilule[data-lien="compte"] { display: none; }
}
/* 03/11 : au doigt, champs en 16 px au moins, sinon l'iPhone zoome la page dès qu'on touche la recherche */
@media (pointer: coarse) { .rech-saisie { font-size: 16px; } }

/* 03/11 : au téléphone, le catalogue 01 (sans visuel) et le catalogue 02 se suivaient sans respiration : un filet les sépare */
@media (max-width: 820px) {
  .ligne.sans-visuel { padding-bottom: 44px; }
  .ligne.sans-visuel + .ligne::before { content: ""; display: block; grid-column: 1 / -1; height: 1px; margin-bottom: 44px; background: var(--trait); }
}

/* 03/11 : offre pilote, une ligne sobre sous la présentation (3 places avant le 30/11) */
.pilotes { display: inline-block; margin: 18px 0 0; padding: 10px 16px; border: 1px solid var(--trait, rgb(0 0 0 / .12)); border-radius: 14px; font-size: 15px; line-height: 1.45; color: var(--texte); }

/* 08/11 (v2) : un grand réseau d'automatisation, au fond, sur tout l'écran (systeme.js) */
.ouverture-systeme { position: absolute; left: 0; top: -160px; width: 100%; height: calc(100% + 160px); display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }