/* Passerelle — un mélange d'ASphere et de Viventis (Benjamin, 16/10/2026) :
   - de Viventis : la photographie argentique en plein cadre, la typographie légère et
     très grande, les pilules « ↗ », les filets, le texte translucide qui défile à l'infini,
     le mot-marque géant en pied de page ;
   - d'ASphere : le fond crème, les titres à empattements avec le mot clé en bleu, le
     framboise en point d'accent, les orbites, Qualiopi ;
   - de CallGPT et Loge : l'IA montrée comme un objet, une carte vitrée posée sur la photo.
   Les polices sont servies par le site : aucune requête vers Google ou Fontshare. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fraunces-normal-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: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/fraunces-normal-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+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/fraunces-italic-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: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/fraunces-italic-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+20A0-20AB, U+20AD-20C0, U+A720-A7FF; }
@font-face { font-family: "Switzer"; font-weight: 400; font-display: swap; src: url(fonts/switzer-400.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 500; font-display: swap; src: url(fonts/switzer-500.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 600; font-display: swap; src: url(fonts/switzer-600.woff2) format("woff2"); }
@font-face { font-family: "Switzer"; font-weight: 700; font-display: swap; src: url(fonts/switzer-700.woff2) format("woff2"); }
:root {
  --creme: #f7f4ec;
  --papier: #fffdf8;
  --encre: #10222e;
  --marine: #0b3a5d;
  --bleu: #0078c0;
  --bleu-clair: #8ecbf0;
  --framboise: #d81854;
  --gris: #6c7a83;
  --gris-fonce: #3c4a52;
  --trait: #e2ddd0;
  --ombre-douce: 0 1px 1px rgba(16, 34, 46, .04), 0 18px 40px -22px rgba(16, 34, 46, .32);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--bleu); color: #fff; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.conteneur { width: min(1320px, 100% - 40px); margin-inline: auto; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Typographie ---------- */
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; font-variation-settings: "opsz" 144; }
.titre-grand { font-size: clamp(2.6rem, 6vw, 5.4rem); }
.titre-moyen { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.bleu { color: var(--bleu); }
.framboise { color: var(--framboise); }
.chapo { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--gris-fonce); max-width: 42rem; }
.sur { display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .24em; text-transform: uppercase; color: #4f46e5; }
.sur::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--framboise); }
.reperes { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--gris); letter-spacing: .04em; width: 100%; }

/* ---------- Boutons : la pilule et sa flèche ---------- */
.bouton { display: inline-flex; align-items: center; gap: 14px; padding: 9px 9px 9px 22px; border-radius: 999px;
  font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--encre); color: #fff; border: 0; cursor: pointer; white-space: nowrap; }
.bouton.bleu-plein { background: var(--bleu); }
.bouton.clair { background: #fff; color: var(--encre); }
.bouton.verre { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .4); }
.bouton.contour { background: transparent; color: var(--encre); border: 1px solid rgba(16, 34, 46, .35); }
.fleche { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--encre); flex: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bouton.clair .fleche, .bouton.contour .fleche { background: var(--encre); color: #fff; }
.fleche svg { width: 15px; height: 15px; }
.bouton:hover .fleche { transform: rotate(45deg); }

/* L'enfoncement 3D au survol, sur tout ce qui se clique */
.appui { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s, border-color .25s; box-shadow: var(--ombre-douce); transform: perspective(900px) translate3d(0, 0, 0); }
.appui:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, 2px, -22px); box-shadow: 0 1px 1px rgba(16, 34, 46, .03), 0 8px 16px -12px rgba(16, 34, 46, .45); }
.appui:active { transform: perspective(900px) translate3d(0, 3px, -40px); box-shadow: 0 1px 2px rgba(16, 34, 46, .1); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 80; background: rgba(247, 244, 236, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(226, 221, 208, .7); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.marque { display: flex; align-items: center; gap: 12px; }
.marque .nom { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -.02em; text-decoration: none; }
.marque .nom svg { width: 30px; height: 30px; }
.marque .par { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--gris); text-decoration: none; }
.marque .par img { height: 18px; width: auto; transition: transform .25s; }
.marque .par:hover img { transform: translateY(-1px) scale(1.04); }
.menu { display: flex; align-items: center; gap: 28px; }
.menu .lien { font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--gris-fonce); }
.menu .lien:hover { color: var(--bleu); }
@media (max-width: 1040px) { .menu .lien { display: none; } }
@media (max-width: 640px) { .menu .bouton { display: none; } .marque .nom { font-size: 1.3rem; } }

/* ---------- Ouverture : la photo, le titre, la carte de l'IA, le texte qui défile ---------- */
.ouverture { position: relative; min-height: min(94vh, 1000px); color: #fff; overflow: hidden; background: #2f3f3d; display: flex; align-items: flex-end; }
.ouverture .photo { position: absolute; inset: 0; }
.ouverture .photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); animation: respire 26s ease-in-out infinite alternate; }
@keyframes respire { to { transform: scale(1.0) translate3d(0, -1.6%, 0); } }
.ouverture::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(7, 30, 48, .66) 0%, rgba(7, 30, 48, .34) 48%, rgba(7, 30, 48, .08) 100%),
  linear-gradient(180deg, rgba(7, 30, 48, .34) 0%, rgba(7, 30, 48, 0) 34%, rgba(6, 22, 34, .82) 100%); }
.ouverture .conteneur { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 70px); align-items: end; padding: 120px 0 clamp(40px, 6vw, 76px); }
@media (max-width: 980px) { .ouverture .conteneur { grid-template-columns: minmax(0, 1fr); } }
.ouverture .sur { color: #fff; }
.ouverture h1 { font-size: clamp(2.9rem, 6.4vw, 6.4rem); margin: 18px 0 18px; text-shadow: 0 2px 34px rgba(0, 0, 0, .2); }
.ouverture h1 .bleu { color: var(--bleu-clair); }
.rotatif { display: block; position: relative; overflow: hidden; height: 1.16em; }
.rotatif span { position: absolute; left: 0; top: .04em; white-space: nowrap; transform: translateY(110%); opacity: 0; color: var(--bleu-clair); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.rotatif span.visible { transform: none; opacity: 1; }
.rotatif span.sortie { transform: translateY(-110%); opacity: 0; }
.ouverture .chapo { color: rgba(255, 255, 255, .9); }
.ouverture .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.preuves { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .86rem; color: rgba(255, 255, 255, .86); }
.preuves a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.preuves a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.preuves .qualiopi-pastille { background: #fff; border-radius: 10px; padding: 5px 8px; }
.preuves .qualiopi-pastille img { height: 24px; width: auto; }
.preuves b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: #fff; }

/* La carte de l'IA, posée sur la photo */
.carte-ia { background: rgba(255, 253, 248, .94); color: var(--encre); border-radius: 26px; padding: 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .6); }
.carte-ia .tete { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--gris); margin-bottom: 14px; }
.carte-ia .tete b { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); font-weight: 600; }
.carte-ia .tete b i { width: 8px; height: 8px; border-radius: 50%; background: #18a058; box-shadow: 0 0 0 4px rgba(24, 160, 88, .16); animation: pouls 2s infinite; }
@keyframes pouls { 50% { box-shadow: 0 0 0 8px rgba(24, 160, 88, 0); } }
.carte-ia label { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px; }
.invite { display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 12px 18px; border-radius: 18px; border: 1px solid var(--trait); background: #fff; transition: border-color .25s, box-shadow .25s; }
.invite:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(0, 120, 192, .12); }
.invite textarea { flex: 1; min-width: 0; width: 100%; resize: none; border: 0; outline: 0; background: transparent; font: 400 1.04rem/1.45 var(--sans); color: var(--encre); min-height: 3em; padding: 2px 0; }
.invite textarea::placeholder { color: #9aa4ab; }
.invite .bouton { padding: 8px 8px 8px 18px; flex: none; }
@media (max-width: 520px) { .invite { flex-direction: column; align-items: stretch; } .invite .bouton { justify-content: space-between; } .carte-ia { padding: 18px; } .carte-ia label { font-size: 1.3rem; } }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pilule { font: 500 .8rem/1 var(--sans); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--trait); background: #fff; color: var(--gris-fonce); cursor: pointer; }
.pilule:hover { border-color: var(--bleu); color: var(--bleu); }
.carte-ia .note { margin-top: 12px; font-size: .74rem; color: var(--gris); }

/* Le texte translucide qui défile à l'infini */
.defile { overflow: hidden; white-space: nowrap; user-select: none; pointer-events: none; }
.defile .piste { display: inline-flex; animation: defile 70s linear infinite; will-change: transform; }
.defile.inverse .piste { animation-direction: reverse; animation-duration: 85s; }
.defile span { font-family: var(--serif); font-weight: 600; font-style: italic; letter-spacing: -.04em; font-size: clamp(5rem, 13vw, 12.5rem); line-height: 1.05; padding-right: .45em; }
.ouverture .defile span { font-size: clamp(3.4rem, 8.6vw, 8.6rem); }
.defile span::after { content: "✦"; font-style: normal; font-size: .38em; vertical-align: .5em; padding-left: .45em; }
.ouverture .defile { position: absolute; left: 0; right: 0; top: 4%; z-index: 2; }
.ouverture .defile span { color: rgba(255, 255, 255, .17); }
.defile.sur-creme span { color: rgba(16, 34, 46, .07); }
@keyframes defile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Sections ---------- */
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
section.papier { background: var(--papier); }
section.marine { background: radial-gradient(120% 90% at 85% 10%, #0f4a75 0%, var(--marine) 48%, #072b45 100%); color: #fff; }
section.marine .chapo { color: rgba(255, 255, 255, .78); }
section.marine .sur { color: var(--bleu-clair); }
section.marine .reponse-quiz .sur { color: #4f46e5; }
.entete-centre { text-align: center; display: grid; gap: 22px; justify-items: center; margin-bottom: clamp(44px, 6vw, 80px); }
.entete-centre .chapo { margin: 0 auto; }
.orbites { position: absolute; pointer-events: none; opacity: .55; }
.orbites.droite { right: -180px; top: -120px; width: 620px; }
.orbites.gauche { left: -200px; bottom: -160px; width: 540px; }

/* Le programme proposé par l'IA */
.programme-zone { max-width: 1040px; margin: 0 auto; }
.chargement { display: none; justify-content: center; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--gris); }
.chargement.visible { display: flex; }
.chargement i { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); animation: point 1.1s infinite; }
.chargement i:nth-child(2) { animation-delay: .15s; } .chargement i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 80%, 100% { opacity: .2; transform: scale(.6); } 40% { opacity: 1; transform: none; } }
.programme { display: none; }
.programme.visible { display: block; animation: monte .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.feuille { background: #fff; border: 1px solid var(--trait); border-top: 6px solid var(--bleu); border-radius: 28px; padding: clamp(24px, 4vw, 52px); box-shadow: var(--ombre-douce); }
.feuille h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05; margin: 14px 0 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.etiquette { font-size: .78rem; padding: 7px 13px; border-radius: 999px; background: rgba(0, 120, 192, .08); color: #005f99; }
.etiquette.forte { background: var(--bleu); color: #fff; }
.colonnes { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; }
@media (max-width: 800px) { .colonnes { grid-template-columns: 1fr; } }
.feuille h4 { font: 600 .68rem/1 ui-monospace, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; color: #4f46e5; margin: 0 0 12px; }
.modules { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.modules li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--trait); counter-increment: m; }
.modules li::before { content: counter(m, decimal-leading-zero); font-family: var(--serif); color: var(--bleu); width: 26px; }
.modules li span { flex: 1; font-size: 1.04rem; }
.modules li b { font-weight: 600; color: var(--bleu); white-space: nowrap; }
.objectifs { margin: 0; padding-left: 18px; color: var(--gris-fonce); }
.objectifs li { margin: 6px 0; }
.piste-financement { padding: 15px 0; border-top: 1px solid var(--trait); }
.piste-financement b { font-weight: 600; display: block; }
.piste-financement span { font-size: .9rem; color: var(--gris); }
.feuille .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.avertissement { font-size: .8rem; color: var(--gris); margin-top: 22px; }

/* ---------- Le film ---------- */
.film { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--marine); box-shadow: 0 50px 100px -60px rgba(16, 34, 46, .7); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.son { position: absolute; right: 22px; bottom: 22px; }
.legende-film { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: .85rem; color: var(--gris); }
.legende-film a { color: var(--bleu); }

/* ---------- Les chiffres ---------- */
.entete-duo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: end; margin-bottom: 56px; }
@media (max-width: 760px) { .entete-duo { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--trait); }
@media (max-width: 900px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }
.chiffre { padding: 34px 26px 6px 0; text-decoration: none; display: block; box-shadow: none; border-radius: 0; }
.chiffre .valeur { font-family: var(--serif); font-size: clamp(3rem, 5.4vw, 5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.chiffre .valeur em { font-style: normal; color: var(--bleu); }
.chiffre b { display: block; font-weight: 600; font-size: .92rem; margin-top: 18px; }
.chiffre p { font-size: .86rem; color: var(--gris); margin-top: 6px; }

/* ---------- Domaines ---------- */
.cartes-domaines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .cartes-domaines { grid-template-columns: 1fr; } }
.domaine { text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--trait); padding: 12px 12px 22px; cursor: pointer; display: grid; gap: 14px; border-radius: 26px; }
.domaine .cadre { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--creme); }
.domaine img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), filter .6s; }
.domaine:hover img { transform: scale(1.05); filter: saturate(1.02); }
.domaine h3 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; letter-spacing: -.02em; padding: 0 8px; }
.domaine p { color: var(--gris); font-size: .92rem; padding: 0 8px; }
.domaine .lien-ia { padding: 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu); }
.liste-domaines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 46px; }

/* ---------- La démarche ---------- */
.etapes { display: grid; gap: clamp(56px, 8vw, 110px); }
.etape { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.etape:nth-child(even) .etape-texte { order: 2; }
@media (max-width: 860px) { .etape { grid-template-columns: 1fr; } .etape:nth-child(even) .etape-texte { order: 0; } }
.numero { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0, 120, 192, .35); display: grid; place-items: center; font-family: var(--serif); color: var(--bleu); margin-bottom: 24px; }
.etape h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 16px; }
.etape p { color: var(--gris-fonce); max-width: 32rem; }
.etape .meta { margin: 22px 0 0; }
.etape-image { border-radius: 26px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--ombre-douce); }
.etape-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.etape-image:hover img { transform: scale(1.04); }

/* ---------- Financement ---------- */
.quiz { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .quiz { grid-template-columns: 1fr; } }
.choix-statut { display: grid; border-top: 1px solid rgba(255, 255, 255, .18); }
.choix-statut button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; font: 400 1.15rem/1.3 var(--sans); padding: 22px 6px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); cursor: pointer; box-shadow: none; border-radius: 0; }
.choix-statut button span { transition: transform .3s; }
.choix-statut button:hover, .choix-statut button.actif { color: #fff; }
.choix-statut button.actif span { transform: rotate(-45deg); color: var(--bleu-clair); }
.reponse-quiz { background: #fff; color: var(--encre); border-radius: 28px; padding: clamp(26px, 4vw, 48px); min-height: 330px; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .6); }
.reponse-quiz h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; font-size: clamp(2rem, 3.6vw, 3rem); margin: 16px 0 12px; }
.reponse-quiz ul { padding-left: 18px; color: var(--gris-fonce); margin: 18px 0 28px; }
.reponse-quiz li { margin: 6px 0; }

/* ---------- Formateurs ---------- */
.formateurs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .formateurs { grid-template-columns: 1fr; } }
.formateurs ul { list-style: none; padding: 0; margin: 28px 0 34px; border-top: 1px solid var(--trait); }
.formateurs li { padding: 16px 0; border-bottom: 1px solid var(--trait); color: var(--gris-fonce); }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 4px; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -.015em; display: flex; justify-content: space-between; gap: 18px; }
.faq summary:hover { color: var(--bleu); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.7rem; line-height: .8; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 26px; color: var(--gris-fonce); max-width: 46rem; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
form.formulaire { display: grid; gap: 22px; background: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--trait); box-shadow: var(--ombre-douce); }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .formulaire .duo { grid-template-columns: 1fr; } }
.formulaire label { display: grid; gap: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
.formulaire input, .formulaire textarea { font: 400 1.08rem/1.4 var(--sans); color: var(--encre); border: 0; border-bottom: 1px solid var(--trait); background: transparent; padding: 10px 0; width: 100%; border-radius: 0; transition: border-color .25s; }
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--bleu); }
.formulaire textarea { resize: vertical; min-height: 96px; }
.profils { display: flex; flex-wrap: wrap; gap: 10px; }
.profils label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--gris-fonce); padding: 10px 16px; border: 1px solid var(--trait); border-radius: 999px; cursor: pointer; }
.profils input { width: auto; accent-color: var(--bleu); }
.profils label:has(input:checked) { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.consentement { display: flex !important; gap: 10px !important; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-size: .85rem !important; color: var(--gris) !important; font-weight: 400 !important; }
.consentement input { width: auto !important; margin-top: 4px; accent-color: var(--bleu); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.retour { display: none; padding: 14px 18px; border-radius: 14px; font-size: .95rem; }
.retour.ok { display: block; background: rgba(0, 120, 192, .1); color: #005f99; }
.retour.erreur { display: block; background: #fdecef; color: #9b1239; }
.programme-joint { display: none; font-size: .9rem; color: #005f99; padding: 12px 16px; border: 1px dashed rgba(0, 120, 192, .4); border-radius: 14px; }
.programme-joint.visible { display: block; }

/* ---------- Pied de page ---------- */
.pied { padding: 90px 0 26px; border-top: 1px solid var(--trait); background: var(--papier); overflow: hidden; }
.pied .colonnes-pied { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; font-size: .92rem; }
@media (max-width: 800px) { .pied .colonnes-pied { grid-template-columns: 1fr; } }
.pied h3 { font: 600 .68rem/1 ui-monospace, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; color: #4f46e5; margin-bottom: 16px; }
.pied a { display: block; text-decoration: none; margin: 7px 0; color: var(--gris-fonce); }
.pied a:hover { color: var(--bleu); }
.pied .qualiopi { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; }
.pied .qualiopi img { height: 44px; width: auto; }
.pied .qualiopi span { font-size: .78rem; color: var(--gris); line-height: 1.3; }
.mot-geant { font-family: var(--serif); font-weight: 600; letter-spacing: -.05em; font-size: clamp(4.4rem, 25.5vw, 23.5rem); line-height: .85; margin: 70px 0 22px; white-space: nowrap; }
.mot-geant em { font-style: normal; color: var(--bleu); }
.pied .bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--gris); }

/* ---------- Barre d'action mobile et encart de consentement ---------- */
.action-mobile { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: none; gap: 10px; }
.action-mobile .bouton { flex: 1 1 0; min-width: 0; justify-content: space-between; padding: 7px 7px 7px 16px; font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 640px) { .action-mobile { display: flex; } .pied { padding-bottom: 110px; } }
.consentement-replay { position: fixed; left: 18px; right: 18px; bottom: 18px; margin: 0 auto; z-index: 90; max-width: 1020px; display: flex; align-items: center; gap: 22px; background: rgba(255, 253, 248, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--encre); border: 1px solid var(--trait); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(16, 34, 46, .45); padding: 12px 12px 12px 22px; font-size: .82rem; line-height: 1.45; animation: monte .6s cubic-bezier(.2, .8, .2, 1) both; }
.consentement-replay p { margin: 0; flex: 1; color: var(--gris-fonce); }
.consentement-replay a { color: var(--bleu); }
.actions-consentement { display: flex; gap: 8px; flex: none; }
.actions-consentement .bouton { justify-content: center; padding: 11px 18px; min-width: 112px; }
@media (max-width: 760px) { .consentement-replay { display: block; left: 12px; right: 12px; bottom: 12px; padding: 14px; font-size: .78rem; } .consentement-replay p { margin-bottom: 12px; } .actions-consentement .bouton { flex: 1; } }
@media (max-width: 640px) { .consentement-replay { bottom: 80px; } }

/* ---------- Apparition au défilement ---------- */
.revele { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1); }
.revele.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .revele { opacity: 1; transform: none; }
}