/* Ax&compétences — design « chemin » (piste E). Charte : sauge #8AA997, sable #C8AA8C, gris #F3F3F3 / #E6E6E6 */
@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque-latin-wght-normal.014c5c931b53.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght-normal.91c1abde2699.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --sauge: #8AA997;
  --sauge-f: #4F6B5B;        /* textes/boutons verts : 5.9:1 sur blanc */
  --sauge-p: #E3ECE6;
  --sable: #C8AA8C;
  --sable-f: #8A6A4C;
  --sable-p: #F1E6DA;
  --creme: #FBF7F2;
  --encre: #2B2E2C;
  --doux: #626763;
  --nuit: #24362D;
  --rayon: 18px;
  --rayon-l: 32px;
  --ombre: 0 2px 10px rgba(43,46,44,.05);
  --ombre-l: 0 18px 40px rgba(43,46,44,.10);
  --large: 1220px;
  --titre: "Bricolage", "Outfit", system-ui, sans-serif;
  --texte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 93.75%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--texte); color: var(--encre); background: var(--creme); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sauge-f); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
h1, h2, h3 { font-family: var(--titre); color: var(--encre); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.75rem); }
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--sable); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--encre); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--large), 100% - 36px); margin-inline: auto; }
.etiq { display: inline-flex; gap: 8px; align-items: center; background: #fff; padding: 7px 16px; border-radius: 999px; font-weight: 500; font-size: .9rem;
  color: var(--encre); box-shadow: var(--ombre); margin-bottom: 14px; }
.prose > :last-child { margin-bottom: 0; }
.prose { max-width: 72ch; }
.prose li { margin-bottom: .35em; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 18px; font: 600 1rem/1 var(--texte);
  text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.btn-p { background: var(--sable); color: var(--encre); }
.btn-p:hover { color: var(--encre); background: #D3B89C; }
.btn-v { background: var(--sauge-f); color: #fff; }
.btn-v:hover { color: #fff; background: #44604F; }
.btn-s { background: #fff; color: var(--encre); }
.btn-s:hover { color: var(--encre); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* En-tête : transparent sur le ciel vert, plein au défilement */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s; }
.entete.plein { background: rgba(251,247,242,.94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 #EADFD3; }
.entete .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo img { width: 56px; height: 56px; border-radius: 50%; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav li { position: relative; }
.nav a.niv1 { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 500; transition: color .3s, background .2s; }
.entete.plein .nav a.niv1 { color: var(--encre); }
.nav a.niv1:hover, .nav li:focus-within > a.niv1 { background: rgba(255,255,255,.12); }
.entete.plein .nav a.niv1:hover { background: var(--sable-p); }
.nav li:has(.sous) > a.niv1::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.sous { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 290px; list-style: none; margin: 0; padding: 10px; background: #fff;
  border-radius: 20px; box-shadow: var(--ombre-l); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: .18s; }
.sous::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav li:hover > .sous, .nav li:focus-within > .sous { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.sous a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--encre); text-decoration: none; font-size: .98rem; }
.sous a:hover { background: var(--sauge-p); }
.nav .btn { margin-left: 10px; padding: 12px 22px; }
.menu-mobile { display: none; margin-left: auto; }
@media (max-width: 1060px) {
  .nav { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary { list-style: none; cursor: pointer; padding: 10px 18px; background: #fff; border-radius: 14px; font-weight: 600; color: var(--encre); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile[open] .panneau { position: absolute; left: 0; right: 0; top: 84px; background: var(--creme); padding: 12px 18px 24px; max-height: calc(100vh - 84px); overflow: auto; box-shadow: var(--ombre-l); }
  .panneau ul { list-style: none; margin: 0; padding: 0; }
  .panneau > ul > li { border-bottom: 1px solid #EADFD3; padding: 8px 0; }
  .panneau a { display: block; padding: 8px 4px; color: var(--encre); text-decoration: none; font-weight: 600; }
  .panneau ul ul a { font-weight: 400; padding-left: 16px; }
  .panneau .btn { margin-top: 16px; display: flex; }
}

/* Scène : ciel + crêtes jurassiennes en couches (parallaxe) */
.scene { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, #24362D 0%, #3E5A4B 40%, #8AA997 75%, #E9D3BC 100%); }
.scene .couche { position: absolute; left: 0; width: 100%; will-change: transform; pointer-events: none; }
.scene svg { width: 100%; height: auto; display: block; }
.soleil { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #F6E3C8 0%, #E9C8A4 55%, rgba(233,200,164,0) 72%); }
.scene-accueil { height: min(112vh, 1040px); min-height: 720px; }
.scene .couche.soleil { width: 150px; height: 150px; left: auto; right: 13%; top: 16%; }
.intro { position: relative; z-index: 5; text-align: center; padding: 150px 20px 0; }
.intro .sur { font-weight: 500; letter-spacing: .08em; font-size: .95rem; opacity: .9; }
.intro h1 { color: #fff; font-size: clamp(3.2rem, 8.4vw, 8rem); line-height: .92; margin: 18px auto 22px; max-width: 12ch; text-shadow: 0 4px 30px rgba(0,0,0,.18); }
.intro h1 em { font-style: normal; color: var(--sable); }
.intro p { font-size: 1.25rem; max-width: 46ch; margin: 0 auto 30px; opacity: .92; }
.defiler { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 6; color: var(--encre); font-size: .85rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.defiler i { width: 2px; height: 30px; background: var(--encre); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scaleY(.4); opacity: .4; } }

/* Bande de titre des pages internes (même paysage, plus compact) */
.scene-page { padding: 140px 0 120px; }
.scene-page .couche.soleil { right: 9%; top: 90px; width: 110px; height: 110px; }
.scene-page .wrap { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.scene-page.sans-image .wrap { grid-template-columns: 1fr; }
.scene-page h1 { color: #fff; max-width: 18ch; }
.scene-page .accroche { font: 400 1.25rem/1.5 var(--texte); color: rgba(255,255,255,.88); max-width: 60ch; margin: 0; letter-spacing: 0; }
.scene-page .image img { border-radius: 28px; aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.ariane { font-size: .9rem; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.ariane a { color: rgba(255,255,255,.85); text-decoration: none; }
.ariane a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .scene-page .wrap { grid-template-columns: 1fr; gap: 28px; } .scene-page { padding: 120px 0 100px; } }

/* Sections génériques */
.section { padding: 100px 0; }
.section.fond-gris { background: #F4EEE7; }
.section.fond-sauge { background: var(--sauge-p); }
.section.fond-sombre { background: var(--nuit); color: #D9E2DC; }
.section.fond-sombre h2, .section.fond-sombre h3 { color: #fff; }
.section.serre { padding: 24px 0; }
.section-tete { max-width: 760px; margin-bottom: 52px; }
.section-tete.centre { margin-inline: auto; text-align: center; }
.section-tete p { color: var(--doux); font-size: 1.2rem; }
.section-media { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.section-media img { border-radius: var(--rayon-l); }
@media (max-width: 860px) { .section { padding: 64px 0; } .section-media { grid-template-columns: 1fr; gap: 32px; } }

/* Manifeste */
.manifeste { text-align: center; padding: 110px 0 60px; }
.manifeste h2 { margin-bottom: 26px; }
.manifeste p { margin: 6px 0; font-size: 1.25rem; color: var(--doux); }
.manifeste strong { color: var(--encre); font-weight: 600; }

/* Parcours en chapitres */
.parcours { padding: 30px 0 60px; }
.chapitre { min-height: min(86vh, 700px); display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 40px 0; scroll-margin-top: 90px; }
.chapitre:nth-child(even) .visuel { order: -1; }
.chapitre .num { font: 800 7rem/1 var(--titre); color: var(--sable); opacity: .55; letter-spacing: -.04em; }
.chapitre h3 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.03em; margin: 4px 0 18px; font-weight: 800; }
.chapitre .prose { font-size: 1.2rem; color: var(--doux); }
.chapitre .prose ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--encre); }
.chapitre .prose li::before { content: "✦ "; color: var(--sauge-f); }
.chapitre .btn { margin-top: 26px; }
.visuel { border-radius: 40px; aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; background: var(--sauge-p); }
.visuel svg { width: 62%; height: auto; }
.visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel.chemin { background: var(--sable-p); }
.visuel.medaille { background: var(--nuit); }
.chapitres-nav { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 15; display: grid; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.chapitres-nav.visible { opacity: 1; pointer-events: auto; }
.chapitres-nav a { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: .82rem; font-weight: 600; color: var(--doux); text-decoration: none; }
.chapitres-nav span { opacity: 0; transform: translateX(6px); transition: .25s; background: #fff; padding: 4px 10px; border-radius: 999px; box-shadow: var(--ombre); }
.chapitres-nav i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sauge); background: var(--creme); transition: .25s; }
.chapitres-nav a.actif i { background: var(--sauge-f); border-color: var(--sauge-f); transform: scale(1.3); }
.chapitres-nav a.actif span, .chapitres-nav a:hover span { opacity: 1; transform: none; color: var(--encre); }
@media (max-width: 900px) { .chapitre { grid-template-columns: 1fr; gap: 28px; min-height: 0; } .chapitre:nth-child(even) .visuel { order: 0; } .chapitres-nav { display: none; } .chapitre .num { font-size: 4.5rem; } }

/* Équipe */
.equipe { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; background: #fff; border-radius: 40px; padding: clamp(28px, 5vw, 64px); }
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portraits figure { margin: 0; }
.portraits figure:nth-child(2) { margin-top: 48px; }
.portraits img { border-radius: 28px; aspect-ratio: 3/4; object-fit: cover; object-position: top; width: 100%; background: var(--sable-p); }
.portraits figcaption { font-weight: 600; margin-top: 10px; }
.portraits figcaption small { display: block; color: var(--doux); font-weight: 400; font-size: .9rem; line-height: 1.4; }
.equipe .prose { color: var(--doux); }
@media (max-width: 900px) { .equipe { grid-template-columns: 1fr; gap: 32px; } }

/* Cartes illustrées (formations) */
.grille-formations { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; }
.carte-f { position: relative; background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.carte-f:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--ombre-l); }
.carte-f .illu { aspect-ratio: 4/3; display: grid; place-items: center; position: relative; }
.carte-f .illu svg { width: 50%; height: auto; }
.carte-f .duree { position: absolute; top: 14px; right: 14px; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; }
.carte-f .corps { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.carte-f h3 { font-size: 1.25rem; margin: 0 0 8px; }
.carte-f h3 a { color: inherit; text-decoration: none; }
.carte-f h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-f p { font-size: .97rem; color: var(--doux); margin: 0; }
.illu.bureautique { background: #C9D8CE; } .illu.m365 { background: #F1E6DA; } .illu.ia { background: #E5D6C6; } .illu.numerique { background: #DCE6E0; }
.illu.creation { background: #EBDCCB; } .illu.securite { background: #3E5A4B; } .illu.efficacite { background: #D6E1DA; } .illu.autre { background: var(--sauge-p); }
.centre { text-align: center; margin-top: 44px; }

/* Cartes génériques (bloc section) */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.carte { position: relative; border-radius: 32px; display: flex; flex-direction: column; overflow: hidden; background: #fff; transition: transform .3s; }
.carte:hover { transform: translateY(-6px) rotate(-.5deg); }
.cartes .carte:nth-child(3n+1) { background: var(--sauge-p); }
.cartes .carte:nth-child(3n+2) { background: var(--sable-p); }
.cartes .carte:nth-child(3n+3) { background: var(--encre); color: #fff; }
.cartes .carte:nth-child(3n+3) h3 { color: #fff; }
.carte .visuel-c { aspect-ratio: 16/10; overflow: hidden; }
.carte .visuel-c img { width: 100%; height: 100%; object-fit: cover; }
.carte .corps { padding: 34px; display: flex; flex-direction: column; flex: 1; }
.carte .icone { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.8rem; background: rgba(255,255,255,.6); margin-bottom: 14px; }
.cartes .carte:nth-child(3n+3) .icone { background: rgba(255,255,255,.1); }
.carte .pastille { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.carte h3 { font-size: 2rem; line-height: 1.05; margin: 6px 0 16px; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.carte ul li { display: flex; gap: 10px; }
.carte ul li::before { content: "✦"; opacity: .6; }
.carte .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 2; }
.carte .actions .btn { padding: 12px 18px; font-size: .92rem; }
.carte .plus { margin-top: auto; font-weight: 600; display: flex; justify-content: space-between; border-top: 1px solid rgba(0,0,0,.1); padding-top: 18px; }
.carte .note { font-size: .88rem; opacity: .7; margin: 14px 0 0; }
.carte .ruban { position: absolute; top: 22px; right: -40px; z-index: 2; background: var(--sauge-f); color: #fff; font-size: .72rem; font-weight: 700; padding: 6px 46px; transform: rotate(35deg); letter-spacing: .06em; text-transform: uppercase; }

/* Encarts horizontaux et panneau */
.encart-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; border-radius: var(--rayon-l); padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px); background: var(--sauge-p); }
.encart-h h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .3em; }
.encart-h .prose p:last-child { margin: 0; }
.encart-h .btns { margin: 0; }
.encart-h.sombre { background: var(--sable); }
.encart-h.avec-image { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.encart-h.avec-image img { border-radius: 20px; }
@media (max-width: 760px) { .encart-h, .encart-h.avec-image { grid-template-columns: 1fr; } }
.panneau-bento { background: #fff; border-radius: 40px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.panneau-bento .boite h3 { font-size: 1.1rem; }
.panneau-bento .note { font-size: .95rem; color: var(--doux); margin: 18px 0 0; }
.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puces a { padding: 11px 20px; border-radius: 16px; background: var(--creme); font-weight: 500; text-decoration: none; color: var(--encre); box-shadow: 0 2px 0 rgba(0,0,0,.06); transition: .2s; }
.puces a:nth-child(3n) { background: var(--sauge-p); } .puces a:nth-child(4n) { background: var(--sable-p); }
.puces a:hover { transform: translateY(-3px) rotate(-2deg); background: var(--sauge-f); color: #fff; }
@media (max-width: 860px) { .panneau-bento { grid-template-columns: 1fr; } }

/* Témoignages en bulles */
.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.temoignage { margin: 0; background: #fff; border-radius: 28px 28px 28px 6px; padding: 30px; display: flex; flex-direction: column; }
.temoignage:nth-child(even) { background: var(--sauge-p); transform: translateY(20px); }
.temoignage blockquote { margin: 0 0 18px; }
.temoignage figcaption { margin-top: auto; font-size: .92rem; color: var(--doux); }
@media (max-width: 760px) { .temoignage:nth-child(even) { transform: none; } }

/* Fiche formation */
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 14px; background: rgba(255,255,255,.14); font-size: .92rem; font-weight: 500; color: #fff; backdrop-filter: blur(6px); }
.badge svg { width: 16px; height: 16px; color: var(--sable); }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; padding: 64px 0 90px; align-items: start; }
.fiche-bloc { margin-bottom: 64px; scroll-margin-top: 100px; }
.fiche-bloc:last-child { margin-bottom: 0; }
.fiche-bloc .num { display: block; font: 800 3rem/1 var(--titre); color: var(--sable); opacity: .6; letter-spacing: -.04em; }
.fiche-bloc h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.coches-rt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.coches-rt li { position: relative; padding: 16px 20px 16px 54px; background: #fff; border-radius: 18px; margin: 0; }
.coches-rt li::before { content: "✦"; position: absolute; left: 22px; top: 15px; color: var(--sauge-f); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.encart { background: #fff; border-radius: 22px; padding: 24px; }
.encart strong { display: block; color: var(--sable-f); margin-bottom: 6px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.modalites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.modalites .encart:nth-child(1) { background: var(--sauge-p); } .modalites .encart:nth-child(4) { background: var(--sable-p); }
.modalites .encart h3 { font-size: 1.05rem; margin-bottom: .3em; font-family: var(--texte); font-weight: 600; letter-spacing: 0; }
.modalites .encart p { margin: 0; color: var(--doux); }
.aside { position: sticky; top: 108px; background: #fff; border-radius: 30px; padding: 30px; box-shadow: var(--ombre-l); }
.aside h2 { font-size: 1.5rem; }
.aside dl { margin: 0 0 22px; }
.aside dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed #E6DCD0; }
.aside dt { color: var(--doux); }
.aside dd { margin: 0; font-weight: 600; text-align: right; }
.aside .btn { width: 100%; margin-top: 10px; }
@media (max-width: 980px) { .fiche { grid-template-columns: 1fr; gap: 40px; } .aside { position: static; } }
@media (max-width: 600px) { .duo, .modalites { grid-template-columns: 1fr; } }

/* FAQ */
.faq-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq details { border-radius: 20px; background: #fff; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 62px 20px 24px; position: relative; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
  background: var(--sable-p); display: grid; place-items: center; font-size: 1.3rem; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .reponse { padding: 0 24px 20px; color: var(--doux); }
@media (max-width: 860px) { .faq-grille { grid-template-columns: 1fr; gap: 24px; } }

/* Sessions */
.sessions { display: grid; gap: 14px; }
.session { display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center; background: #fff; border-radius: 22px; padding: 18px 22px; }
.session .jour { text-align: center; background: var(--sauge-f); border-radius: 16px; padding: 12px 6px; color: rgba(255,255,255,.8); line-height: 1.1; font-size: .8rem; font-weight: 600; text-transform: uppercase; }
.session .jour b { display: block; font: 800 1.8rem/1 var(--titre); color: #fff; }
.session h3 { margin: 0 0 4px; font-size: 1.15rem; }
.session .meta { font-size: .95rem; color: var(--doux); }
.etat { font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--sable-p); color: var(--sable-f); }
@media (max-width: 640px) { .session { grid-template-columns: 70px 1fr; } .session > :last-child { grid-column: 1 / -1; } }

/* Formulaires */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .plein { grid-column: 1 / -1; }
.form label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 1rem; padding: 14px 16px; border: 2px solid #EADFD3; border-radius: 14px; background: var(--creme); color: var(--encre); transition: .2s; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--sauge); background: #fff; outline: none; box-shadow: 0 0 0 4px var(--sauge-p); }
.form textarea { min-height: 130px; resize: vertical; }
.form .piege { position: absolute; left: -9999px; }
.form .btn { width: 100%; }
.carte-form { background: #fff; border-radius: var(--rayon-l); padding: clamp(24px, 4vw, 44px); box-shadow: var(--ombre-l); }
.contact-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.coordonnees { display: grid; gap: 12px; margin-top: 28px; }
.coordonnees a, .coordonnees div { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: #fff; border-radius: 16px; text-decoration: none; color: var(--encre); font-weight: 500; }
.coordonnees span { width: 40px; height: 40px; border-radius: 12px; background: var(--sauge-p); color: var(--sauge-f); display: grid; place-items: center; flex: none; }
.coordonnees svg { width: 18px; height: 18px; }
.plan { margin-top: 12px; border-radius: 20px; overflow: hidden; height: 240px; background: var(--sauge-p); }
.plan iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .contact-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }

/* Clients */
.clients { padding: 80px 0 60px; }
.clients h2 { font: 600 .82rem/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--doux); text-align: center; margin-bottom: 32px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 56px; }
.logos img { height: 42px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: .25s; }
.logos a:hover img { filter: none; opacity: 1; }

/* Fin : retour au paysage + pied de page */
.fin { position: relative; overflow: hidden; text-align: center; color: #fff; padding: 110px 20px 0; background: linear-gradient(180deg, var(--creme) 0%, #E9D3BC 18%, #8AA997 55%, #3E5A4B 100%); }
.fin h2 { color: #fff; font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: .95; margin: 0 auto 26px; max-width: 14ch; position: relative; z-index: 2; }
.fin .btns { justify-content: center; position: relative; z-index: 2; margin: 0; }
.fin svg { display: block; width: 100%; margin-top: 60px; }
.pied { background: var(--nuit); color: #B9C6BE; padding: 20px 0 30px; font-size: .97rem; }
.pied a { color: #E2EAE5; text-decoration: none; }
.pied a:hover { color: #fff; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 30px; }
.pied h3 { font: 600 .78rem/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--sable); margin-bottom: 18px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied .logo-pied { border-radius: 50%; width: 70px; height: 70px; margin-bottom: 16px; }
.pied-bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .88rem; }
.reseaux { display: flex; gap: 10px; margin-top: 18px; }
.reseaux a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); transition: .2s; }
.reseaux a:hover { background: var(--sauge-f); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-grille { grid-template-columns: 1fr; } }

/* Catalogue */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; justify-content: center; }
.filtres a { padding: 11px 20px; border-radius: 16px; background: #fff; text-decoration: none; color: var(--encre); font-weight: 500; box-shadow: 0 2px 0 rgba(0,0,0,.06); transition: .2s; }
.filtres a span { color: var(--doux); margin-left: 4px; }
.filtres a:hover { background: var(--sauge-f); color: #fff; transform: translateY(-2px); }
.filtres a:hover span { color: rgba(255,255,255,.75); }
.categorie { margin-bottom: 72px; scroll-margin-top: 110px; }
.categorie h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* Apparition au défilement */
@media (prefers-reduced-motion: no-preference) {
  .js .revele { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
  .js .revele.vu { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .defiler i { animation: none; } }

/* Pages internes : paysage plus bas pour ne pas recouvrir le titre */
.scene-page { padding-bottom: 190px; }
.scene-page .couche svg { height: 150px; }
.scene-page .couche:last-of-type svg { height: 80px; }
/* Variété dans le catalogue : teintes alternées */
.carte-f:nth-child(3n+2) .illu:not(.securite) { background: var(--sable-p); }
.carte-f:nth-child(3n+3) .illu:not(.securite) { background: #DCE6E0; }
/* Téléphone : bannière d'accueil plus compacte */
@media (max-width: 700px) {
  .scene-accueil { height: auto; min-height: 0; padding-bottom: 210px; }
  .scene .couche svg { min-height: 110px; }
  .intro { padding-top: 120px; }
}
.badge { background: rgba(36,54,45,.6); }
@media (max-width: 700px) { .scene .couche.soleil { width: 80px; height: 80px; right: 5%; top: 92px; } }
.visuel.plan { background: var(--sable-p); }
/* Principes en grille 2×2 dans la section équipe */
.equipe .prose ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.equipe .prose li { background: var(--creme); border-radius: 18px; padding: 16px 18px; margin: 0; color: var(--encre); }
@media (max-width: 600px) { .equipe .prose ul { grid-template-columns: 1fr; } }
.nav .lien-contact { color: #fff; text-decoration: none; font-weight: 500; padding: 10px 14px; transition: color .3s; }
.entete.plein .nav .lien-contact { color: var(--encre); }
.intro .secondaire { display: inline-block; margin-top: 18px; color: #fff; font-weight: 500; opacity: .9; }
.intro .secondaire:hover { color: var(--sable); }

/* Aiguillage : 3 profils, la page se déroule selon le choix */
.aiguillage { padding: 90px 0 0; position: relative; }
.aiguillage h2 { text-align: center; margin-bottom: 40px; }
.choix { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; }
.choix-carte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px; border-radius: 32px; background: #fff; color: var(--encre);
  text-decoration: none; transition: transform .3s, background .3s, color .3s, box-shadow .3s; box-shadow: 0 4px 0 rgba(0,0,0,.06); }
.choix-carte:hover { transform: translateY(-4px); color: var(--encre); }
.choix-carte[aria-selected="true"] { background: var(--nuit); color: #fff; box-shadow: 0 24px 50px rgba(36,54,45,.28); transform: translateY(-6px); }
.choix-illu { width: 96px; color: var(--sauge-f); }
.choix-carte[aria-selected="true"] .choix-illu { color: var(--sauge); }
.choix-titre { font: 800 1.75rem/1.05 var(--titre); letter-spacing: -.025em; }
.choix-texte { opacity: .8; }
.choix-fleche { margin-top: auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sable-p); color: var(--encre); font-weight: 700; transition: .3s; }
.choix-carte[aria-selected="true"] .choix-fleche { background: var(--sable); animation: rebond 1.6s infinite; }
@keyframes rebond { 50% { transform: translateY(5px); } }
.choix-badge { position: absolute; top: -12px; left: 28px; background: var(--sable); color: var(--encre); font-size: .78rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; letter-spacing: .02em; }
.choix-barre { position: sticky; top: 96px; z-index: 30; width: fit-content; margin: 40px auto 0; display: flex; gap: 4px; padding: 6px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); border-radius: 999px; box-shadow: var(--ombre-l); }
.choix-barre a { padding: 10px 18px; border-radius: 999px; text-decoration: none; color: var(--encre); font-weight: 600; font-size: .95rem; transition: .2s; }
.choix-barre a:hover { background: var(--sable-p); }
.choix-barre a.actif { background: var(--nuit); color: #fff; }
.js .panneau-profil[hidden] { display: none; }
.panneau-profil { animation: apparait .6s ease; scroll-margin-top: 150px; }
@keyframes apparait { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 900px) { .choix { grid-template-columns: 1fr; } .choix-barre { top: 92px; max-width: calc(100% - 24px); overflow-x: auto; } .choix-barre a { white-space: nowrap; padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .panneau-profil, .choix-carte[aria-selected="true"] .choix-fleche { animation: none; } }
/* En-tête : libellés longs sur une ligne */
.entete .wrap { width: min(1400px, 100% - 36px); gap: 18px; }
.nav a.niv1, .nav .lien-contact { white-space: nowrap; font-size: .93rem; padding: 9px 10px; }
.nav .btn { white-space: nowrap; padding: 12px 18px; font-size: .93rem; }
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary { list-style: none; cursor: pointer; padding: 10px 18px; background: #fff; border-radius: 14px; font-weight: 600; color: var(--encre); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile[open] .panneau { position: absolute; left: 0; right: 0; top: 84px; background: var(--creme); padding: 12px 18px 24px; max-height: calc(100vh - 84px); overflow: auto; box-shadow: var(--ombre-l); }
  .panneau ul { list-style: none; margin: 0; padding: 0; }
  .panneau > ul > li { border-bottom: 1px solid #EADFD3; padding: 8px 0; }
  .panneau a { display: block; padding: 8px 4px; color: var(--encre); text-decoration: none; font-weight: 600; }
  .panneau ul ul a { font-weight: 400; padding-left: 16px; }
  .panneau .btn { margin-top: 16px; display: flex; }
}

/* Bannière d'accueil allégée : tient dans le 1er écran avec l'appel à découvrir */
.scene-accueil { height: 100vh; height: 100svh; min-height: 640px; max-height: 1000px; }
.intro { padding-top: clamp(110px, 16vh, 170px); }
.intro h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .98; max-width: 13ch; margin: 16px auto 20px; }
.intro p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 40ch; margin-bottom: 30px; }
.decouvrir { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--encre); font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.decouvrir span { display: inline-block; animation: rebond 1.6s infinite; }
.decouvrir:hover { color: var(--encre); background: var(--sable-p); }

/* Chemin au défilement : derrière le contenu, se trace avec la lecture */
body.accueil { position: relative; isolation: isolate; }
.chemin { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; overflow: visible; }
.chemin-fond { fill: none; stroke: var(--sable); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; opacity: .55; }
.chemin-trace { fill: none; stroke: var(--sable); stroke-width: 5; stroke-linecap: round; }
.chemin-point { fill: var(--sauge-f); stroke: #fff; stroke-width: 4; }
@media (prefers-reduced-motion: reduce) { .decouvrir span { animation: none; } }
@media (max-width: 700px) { .scene-accueil .couche svg { min-height: 190px; } }

/* Cartes : uniquement des tons clairs (pas de noir) ; la 1re carte « vedette » est soulignée */
.cartes .carte:nth-child(3n+3) { background: #fff; color: var(--encre); }
.cartes .carte:nth-child(3n+3) h3 { color: var(--encre); }
.cartes .carte:nth-child(3n+3) .icone { background: var(--creme); }
.cartes .carte:has(.ruban) { box-shadow: inset 0 0 0 3px var(--sauge); }

/* Barre de profils : petit dock flottant en bas de l'écran (ne recouvre plus les titres) */
.choix-barre { position: fixed; top: auto; bottom: 18px; left: 50%; margin: 0; transform: translate(-50%, 140%); opacity: 0;
  transition: transform .35s, opacity .35s; box-shadow: 0 12px 40px rgba(36,54,45,.25); }
.choix-barre.visible { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 900px) { .choix-barre { top: auto; bottom: 12px; } }

/* Récit suisse */
.panneau-rando { display: block; width: min(360px, 90%); margin: 0 auto 10px; }
.panneau-rando a { cursor: pointer; }
.panneau-rando a:hover path { fill: #FFD452; }
/* Balises de randonnée : losange jaune numéroté */
.chapitre .num { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 0 18px 10px; font-size: 2rem; color: var(--encre); opacity: 1;
  background: var(--sable); transform: rotate(45deg); border-radius: 14px; box-shadow: 0 0 0 5px #fff; }
.viaduc { position: relative; margin-top: 40px; overflow: hidden; }
.viaduc svg { display: block; width: 100%; height: clamp(240px, 29.2vw, 640px); } /* 29.2vw = proportions du dessin (1440×420) : les sommets ne sont plus rognés */
.viaduc-legende { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); margin: 0; text-align: center; font: 700 clamp(1.1rem, 2vw, 1.6rem)/1.25 var(--titre); color: var(--encre); width: min(760px, 90%); }
.domaines-section { position: relative; }
.engrenages { position: absolute; right: 2%; top: 30px; width: clamp(120px, 14vw, 220px); opacity: .55; pointer-events: none; }
.engrenages g { transform-box: view-box; }
@media (max-width: 760px) { .engrenages { opacity: .3; } }
.chapitre .num span { transform: rotate(-45deg); }
.fin svg { overflow: visible; }
/* Pas de noir : tons verts et clairs */
.visuel.medaille { background: var(--sauge-p); }
.choix-carte[aria-selected="true"] { background: var(--sauge-f); box-shadow: 0 24px 50px rgba(79,107,91,.3); }
.choix-carte[aria-selected="true"] .choix-illu { color: #fff; }
.choix-barre a.actif { background: var(--sauge-f); }
.panneau-rando { width: min(460px, 94%); }
.carte .icone { color: var(--sauge-f); background: #fff; }
.carte .icone svg { width: 28px; height: 28px; }
/* Dock caché : aucune ombre résiduelle */
.choix-barre { visibility: hidden; }
.choix-barre.visible { visibility: visible; }
/* Le chemin passe « sous » les textes posés sur le fond crème */
body.accueil :is(.chapitre, .section-tete, .manifeste, .contact-grille > div:first-child, .aiguillage > .wrap > h2) :is(h2, h3, p, li, .etiq) {
  text-shadow: 0 0 6px var(--creme), 0 0 12px var(--creme), 0 0 18px var(--creme);
}
.viaduc-legende { top: 5%; }

/* Logos clients : en couleur (par respect) ; le blanc des fichiers se fond dans le crème */
.logos img { filter: none; opacity: 1; mix-blend-mode: multiply; height: 48px; max-width: 170px; }
.logos a { display: inline-flex; transition: transform .25s; }
.logos a:hover { transform: translateY(-3px); }
.logos a:hover img { filter: none; }
.clients { background: var(--creme); position: relative; } /* fond explicite : nécessaire pour que le blanc des logos se fonde (mix-blend-mode) */

/* Pages internes importées : intégrations (Calaméo, prise de rendez-vous) et galerie d'images */
.integration iframe { display:block; width:100%; height:min(760px, 85vh); border:0; border-radius:var(--r, 20px); background:#fff; box-shadow:0 10px 30px rgba(43,46,44,.08); }
.galerie { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; }
.galerie img { width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:12px; padding:10px; }
.integration-lien { text-align:center; margin-top:16px; }
.form-retour { padding:14px 18px; border-radius:14px; margin:0 0 18px; font-weight:600; }
.form-retour.ok { background:var(--sauge-p); color:var(--sauge-f); }
.form-retour.erreur { background:#F6E3E0; color:#8A3E36; }

/* Menu façon ancien site : logo plus présent, page courante encadrée, Contact en bouton blanc */
.logo img { width: 76px; height: 76px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.nav > ul { gap: 6px; }
.nav a.niv1 { font-size: 1.02rem; }
.nav a.niv1[aria-current="page"] { box-shadow: inset 0 0 0 2px currentColor; }
.nav .btn-contact { margin-left: 14px; padding: 12px 24px; background: #fff; color: var(--encre); border: 0; }
.nav .btn-contact:hover { background: var(--sable-p); }
.entete.plein .nav .btn-contact { background: var(--sauge-f); color: #fff; }

/* ===== Pages intérieures recomposées (Entreprises…) ===== */
/* En-tête : surtitre, boutons, pastilles */
.surtitre-page { display: inline-block; color: var(--sable); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.scene-page .btns { margin-top: 30px; }
.pastilles-page { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles-page li { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: .9rem; font-weight: 500; backdrop-filter: blur(4px); }

/* Cartes : phrase d'accroche et mots-clés */
.carte .sous-titre { font-weight: 600; color: var(--sauge-f); margin: -8px 0 12px; font-size: 1rem; }
.carte .mots { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.carte .mots li { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: .82rem; font-weight: 500; }
.carte .mots li::before { content: none; }
.cartes .carte:nth-child(3n+3) .mots li { background: var(--creme); }
.cartes.serrees .carte h3, .carte h3:only-of-type { hyphens: auto; }

/* Étapes reliées par le chemin pointillé */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; position: relative; }
.etapes::before { content: ""; position: absolute; top: 31px; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); border-top: 3px dashed var(--sable); }
.etapes li { position: relative; text-align: center; }
.etape-num { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sauge-f); color: #fff; font: 800 1.5rem/1 var(--titre); box-shadow: 0 0 0 8px var(--creme); }
.fond-gris .etape-num { box-shadow: 0 0 0 8px #F4EEE7; }
.fond-sauge .etape-num { box-shadow: 0 0 0 8px var(--sauge-p); }
.etapes li:nth-child(even) .etape-num { background: var(--sable); color: var(--encre); }
.etapes h3 { font-size: 1.3rem; margin-bottom: 8px; }
.etapes p { color: var(--doux); font-size: 1rem; margin: 0 auto; max-width: 28ch; }
@media (max-width: 800px) {
  .etapes { grid-template-columns: 1fr; gap: 26px; }
  .etapes::before { top: 32px; bottom: 32px; left: 31px; right: auto; border-top: 0; border-left: 3px dashed var(--sable); }
  .etapes li { text-align: left; display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }
  .etape-num { grid-row: span 2; margin: 0; }
  .etapes p { margin: 0; max-width: none; }
}

/* Texte + encadré */
.liste-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.liste-texte { color: var(--doux); }
.liste-texte ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--encre); }
.liste-texte li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.liste-texte li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--sauge-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6B5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.liste-note { display: flex; gap: 12px; align-items: flex-start; background: var(--sauge-p); border-radius: 18px; padding: 16px 18px; color: var(--sauge-f); font-weight: 500; margin: 22px 0 0; }
.liste-note svg { width: 22px; height: 22px; flex: none; }
.liste-encadre { background: #fff; border-radius: var(--rayon-l); padding: clamp(26px, 4vw, 44px); box-shadow: var(--ombre-l); }
.liste-encadre h3 { font-size: 1.6rem; }
.liste-sur { display: block; color: var(--sable-f); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.liste-intro { color: var(--doux); margin: 0 0 20px; }
.liste-encadre ul { list-style: none; padding: 0; margin: 0; }
.liste-encadre.coches ul { display: grid; }
.liste-encadre.coches li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid #EFE7DE; }
.liste-encadre.coches li:last-child { border-bottom: 0; }
.coche { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sauge-p); color: var(--sauge-f); }
.coche svg { width: 16px; height: 16px; }
.liste-encadre.tuiles { background: transparent; box-shadow: none; padding: 0; }
.liste-encadre.tuiles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.liste-encadre.tuiles li { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--ombre); font-weight: 600; line-height: 1.3; transition: transform .25s; }
.liste-encadre.tuiles li:hover { transform: translateY(-3px) rotate(-.6deg); }
.liste-encadre.tuiles li:nth-child(4n+2), .liste-encadre.tuiles li:nth-child(4n+3) { background: var(--sable-p); }
.tuile-icone { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sauge-p); color: var(--sauge-f); }
.tuile-icone svg { width: 24px; height: 24px; }
.liste-encadre li small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); font-weight: 600; margin-bottom: 2px; }
.liste-encadre.pastilles ul { display: flex; flex-wrap: wrap; gap: 10px; }
.liste-encadre.pastilles li { padding: 11px 18px; border-radius: 16px; background: var(--creme); font-weight: 500; }
.liste-encadre.pastilles li:nth-child(3n+2) { background: var(--sauge-p); } .liste-encadre.pastilles li:nth-child(3n) { background: var(--sable-p); }
.liste-encadre.sombre { background: var(--nuit); color: #D9E2DC; box-shadow: var(--ombre-l); }
.liste-encadre.sombre h3 { color: #fff; }
.liste-encadre.sombre .liste-sur { color: var(--sable); }
.liste-encadre.sombre .liste-intro { color: #C3CFC7; }
.liste-encadre.sombre.pastilles li { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 900px) { .liste-grille { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .liste-encadre.tuiles ul { grid-template-columns: 1fr; } }

/* Schéma des modules U-CH */
.uch-schema { background: #fff; border-radius: var(--rayon-l); padding: clamp(26px, 4vw, 48px); box-shadow: var(--ombre-l); }
.uch-titre { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.uch-titre strong { background: var(--sauge-f); color: #fff; font: 800 clamp(1.4rem, 3vw, 2rem)/1 var(--titre); padding: 18px 34px; border-radius: 999px; }
.uch-titre span { background: var(--sable); color: var(--encre); font-weight: 700; padding: 9px 16px; border-radius: 999px; }
.uch-modules { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.uch-modules li { position: relative; background: var(--sable-p); border-radius: 18px; padding: 20px 16px 16px; font-weight: 600; text-align: center; }
.uch-modules li.niv2 { background: var(--sauge-p); }
.uch-modules li b { position: absolute; top: -10px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--sauge-f); color: #fff; display: grid; place-items: center; font-size: .9rem; }
.uch-schema p { color: var(--doux); margin: 0 0 10px; }
.scene-page:has(.pastilles-page) { padding-bottom: 250px; }
.pastilles-page li { background: rgba(36,54,45,.45); }
.uch-modules { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.uch-modules li.niv2 + li.niv1 { grid-column-start: 1; }
@media (max-width: 700px) { .uch-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Univers Entreprises : l'entreprise à explorer ===== */
.univers-entreprises .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.coupe { position: relative; width: 100%; max-width: 560px; margin-left: auto; aspect-ratio: 520 / 400; }
.coupe svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 26px 40px rgba(20, 32, 26, .28)); }
.coupe .point { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 38px; height: 38px; margin: -19px; padding: 0;
  border: 0; border-radius: 50%; background: var(--sable); color: var(--encre); font: 800 1rem/1 var(--titre); cursor: pointer;
  box-shadow: 0 0 0 0 rgba(200,170,140,.75); animation: point-pulse 2.2s infinite; transition: background .2s, transform .2s; }
.coupe .point:hover { transform: scale(1.12); }
.coupe .point.vu { background: #fff; }
.coupe .point[aria-expanded="true"] { background: var(--sauge-f); color: #fff; animation: none; }
.coupe .point.ici { background: var(--sauge-f); color: #fff; animation: none; box-shadow: 0 0 0 6px rgba(255,255,255,.55); }
.coupe .point.ici::after { content: "Vous êtes ici"; position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap;
  background: var(--nuit); color: #fff; font: 600 .72rem/1 var(--texte); padding: 6px 10px; border-radius: 999px; pointer-events: none; }
@keyframes point-pulse { 70% { box-shadow: 0 0 0 16px rgba(200,170,140,0); } 100% { box-shadow: 0 0 0 0 rgba(200,170,140,0); } }
.coupe .bulle { position: absolute; z-index: 6; width: min(290px, 78vw); left: calc(var(--x) * 1% - 34px); top: calc(var(--y) * 1% + 30px);
  background: #fff; color: var(--encre); border-radius: 22px; padding: 18px 20px; box-shadow: 0 24px 50px rgba(20,32,26,.3); text-align: left; animation: bulle-monte .25s ease; }
.coupe .bulle.droite { left: auto; right: calc((100 - var(--x)) * 1% - 34px); }
.coupe .bulle.haut { top: auto; bottom: calc((100 - var(--y)) * 1% + 30px); }
@keyframes bulle-monte { from { opacity: 0; transform: translateY(8px); } }
.coupe .bulle small { color: var(--sable-f); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }
.coupe .bulle-titre { font: 800 1.3rem/1.1 var(--titre); letter-spacing: -.02em; margin: 4px 0 6px; color: var(--encre); }
.coupe .bulle p { font-size: .93rem; color: var(--doux); margin: 0 0 10px; }
.coupe .bulle a { font-weight: 700; color: var(--sauge-f); text-decoration: none; }
.coupe .bulle a:hover { text-decoration: underline; }
.coupe .bulle-ici { display: inline-block; background: var(--sauge-p); color: var(--sauge-f); font-weight: 700; font-size: .85rem; padding: 5px 12px; border-radius: 999px; }
.coupe .compteur { position: absolute; right: 0; bottom: -14px; margin: 0; background: rgba(36,54,45,.6); color: #fff; padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; backdrop-filter: blur(4px); }
@media (max-width: 860px) {
  .univers-entreprises .wrap { grid-template-columns: 1fr; }
  .coupe { margin: 10px auto 0; }
  .coupe .bulle, .coupe .bulle.droite { left: 0; right: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .coupe .point, .coupe .bulle { animation: none; } }

/* Univers Entreprises : accès direct en 1 clic (cartes façon aiguillage), le survol éclaire la pièce */
.coupe .zone { fill: var(--sable); opacity: 0; transition: opacity .25s; pointer-events: none; }
.coupe .zone.eclaire { opacity: .45; }
.coupe .point.eclaire { transform: scale(1.18); background: var(--sauge-f); color: #fff; animation: none; }
.univers-cartes { position: relative; z-index: 6; margin-top: -96px; padding-bottom: 20px; }
.univers-cartes .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.u-carte { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 26px; background: #fff; color: var(--encre); text-decoration: none;
  box-shadow: 0 14px 34px rgba(36,54,45,.14); transition: transform .3s, background .3s, color .3s, box-shadow .3s; }
.u-carte:hover, .u-carte:focus-visible, .u-carte.eclaire { transform: translateY(-5px); background: var(--sauge-f); color: #fff; box-shadow: 0 24px 50px rgba(79,107,91,.3); }
.u-carte[aria-current="page"] { box-shadow: inset 0 0 0 3px var(--sauge), 0 14px 34px rgba(36,54,45,.14); }
.u-icone { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sauge-p); color: var(--sauge-f); margin-bottom: 4px; }
.u-icone svg { width: 24px; height: 24px; }
.u-carte small { color: var(--sable-f); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }
.u-titre { font: 800 1.25rem/1.08 var(--titre); letter-spacing: -.02em; }
.u-texte { font-size: .92rem; line-height: 1.45; opacity: .8; }
.u-lien { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .9rem; color: var(--sauge-f); }
.u-carte:is(:hover, :focus-visible, .eclaire) :is(small, .u-lien) { color: #fff; }
.u-carte:is(:hover, :focus-visible, .eclaire) .u-icone { background: rgba(255,255,255,.18); color: #fff; }
.u-carte[aria-current="page"] .u-lien { color: var(--sable-f); }
@media (max-width: 1100px) { .univers-cartes .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .univers-cartes { margin-top: -70px; } .univers-cartes .wrap { grid-template-columns: 1fr 1fr; gap: 10px; } .u-carte { padding: 16px 14px; border-radius: 20px; } .u-carte:last-child { grid-column: span 2; } .u-titre { font-size: 1.05rem; } .u-texte, .u-carte small { display: none; } .u-lien { font-size: .8rem; } }

/* Chemin au défilement aussi sur les pages d'univers */
body.u-entreprises { position: relative; isolation: isolate; }
body.u-entreprises :is(.section-tete, .contact-grille > div:first-child, .liste-grille > div:first-child) :is(h2, h3, p, li, .etiq) {
  text-shadow: 0 0 6px var(--creme), 0 0 12px var(--creme), 0 0 18px var(--creme);
}

/* Illustrations d'en-tête des univers Particuliers et Coaching */
:is(.univers-particuliers, .univers-coaching, .univers-passerelle, .univers-horloger, .univers-renards, .univers-noel, .univers-gastrojura) .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.univers-illu { display: block; width: 100%; max-width: 560px; margin-left: auto; filter: drop-shadow(0 26px 40px rgba(20, 32, 26, .28)); }
@media (max-width: 860px) { :is(.univers-particuliers, .univers-coaching, .univers-passerelle, .univers-horloger, .univers-renards, .univers-noel, .univers-gastrojura) .wrap { grid-template-columns: 1fr; } .univers-illu { margin: 0 auto; max-width: 420px; } }

/* ===== Univers Particuliers : la Ligne ===== */
body.u-particuliers { position: relative; isolation: isolate; }
.voie { position: absolute; z-index: 3; left: max(10px, calc(50% - 662px)); top: 0; width: 46px; pointer-events: none; }
.voie .rail { position: absolute; left: 13px; top: 0; bottom: 0; width: 20px; background: repeating-linear-gradient(to bottom, transparent 0 10px, #CDB79F 10px 14px); }
.voie .rail::before, .voie .rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #9F8770; }
.voie .rail::before { left: 2px; } .voie .rail::after { right: 2px; }
.voie .train-v { position: absolute; left: 8px; top: 0; width: 30px; height: 74px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); transition: transform .15s linear; }
.voie .gare { position: absolute; left: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--creme); border: 4px solid var(--sauge-f); }
.voie .gare.passee { background: var(--sauge-f); }
@media (max-width: 1340px) { .u-particuliers main .section > .wrap { width: auto; margin-left: 66px; margin-right: 18px; } }
@media (max-width: 600px) { .voie { left: 4px; transform: scale(.8); transform-origin: top left; } .u-particuliers main .section > .wrap { margin-left: 46px; margin-right: 14px; } }
/* gares : panneaux façon CFF (le numéro de voie suit l'ordre des sections) */
.u-particuliers main { counter-reset: gare; }
.u-particuliers main .section { counter-increment: gare; }
.u-particuliers main .section .etiq { border-radius: 6px; background: var(--sauge-f); color: #fff; font-weight: 700; letter-spacing: .02em; padding: 8px 0 8px 14px; gap: 0; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.u-particuliers main .section .etiq::after { content: "Voie " counter(gare); margin: -8px 0 -8px 14px; padding: 8px 12px; background: #fff; color: var(--sauge-f); border-left: 3px solid #A65A52; }
.u-particuliers main > :nth-last-child(2) .section .etiq::after, .u-particuliers .gare-terminus .etiq::after { content: "Terminus"; }
/* étapes affichées comme un horaire de départs */
.u-particuliers .etapes { display: block; max-width: 760px; margin: 0 auto; background: #3E5A4B; color: #fff; border-radius: 22px; padding: 8px 28px; box-shadow: var(--ombre-l); }
.u-particuliers .etapes::before { display: none; }
.u-particuliers .etapes li { display: grid; grid-template-columns: 54px 1fr auto; gap: 2px 18px; align-items: center; text-align: left; padding: 18px 0; border-bottom: 1px dashed rgba(255,255,255,.22); }
.u-particuliers .etapes li:last-child { border-bottom: 0; }
.u-particuliers .etapes .etape-num, .u-particuliers .etapes li:nth-child(even) .etape-num { grid-row: span 2; width: auto; height: auto; margin: 0; background: none; box-shadow: none; color: var(--sable); font: 800 1.9rem/1 var(--titre); font-variant-numeric: tabular-nums; }
.u-particuliers .etapes h3 { color: #fff; margin: 0; }
.u-particuliers .etapes p { grid-column: 2; color: #C3CFC7; margin: 0; max-width: none; }
.u-particuliers .etapes li::after { content: "arrêt"; grid-column: 3; grid-row: 1 / span 2; color: #C3CFC7; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.u-particuliers .etapes li:first-child::after { content: "départ"; color: var(--sable); }
.u-particuliers .etapes li:last-child::after { content: "terminus"; color: var(--sable); }
@media (max-width: 600px) { .u-particuliers .etapes { padding: 4px 18px; } .u-particuliers .etapes li { grid-template-columns: 34px 1fr; } .u-particuliers .etapes li::after { grid-column: 2; grid-row: auto; } }
/* sessions : tableau des départs */
.u-particuliers .session .jour { background: #3E5A4B; color: var(--sable); }

/* ===== Univers Coaching (essai) : le Belvédère, inspiration japonaise ===== */
.u-coaching .scene-page { background: linear-gradient(#3E5A4B 0%, #7F9C8B 52%, #EADBC8 100%); }
.u-coaching .scene-page .couche.soleil { display: none; }
.univers-illu.belvedere { filter: none; }
.belvedere .brume { animation: brume 18s ease-in-out infinite alternate; }
.belvedere .brume-2 { animation-duration: 24s; animation-direction: alternate-reverse; }
.belvedere .brume-3 { animation-duration: 30s; }
@keyframes brume { to { transform: translateX(28px); } }
.boussole, .repere { position: fixed; z-index: 40; right: 22px; bottom: 22px; width: 72px; height: 72px; filter: drop-shadow(0 8px 16px rgba(36,54,45,.2)); pointer-events: none; }
.boussole-aig { transform-box: view-box; transform-origin: 60px 60px; transition: transform .3s ease-out; }
/* numéros d'étapes en ensō (cercle tracé d'un geste, ouvert) */
.u-coaching .etape-num, .u-coaching .etapes li:nth-child(even) .etape-num { background: var(--creme); color: var(--sauge-f); box-shadow: none; }
.u-coaching .etape-num::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--sauge-f); border-top-color: transparent; transform: rotate(-20deg); }
.u-coaching .etapes li:nth-child(even) .etape-num::before { border-color: var(--sable); border-top-color: transparent; transform: rotate(160deg); }
.u-coaching .etapes::before { border-top: 2px solid rgba(138,169,151,.5); }
.u-coaching main .section .etiq { background: var(--sable-p); color: var(--sable-f); font-weight: 700; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .belvedere .brume { animation: none; } }
@media (max-width: 600px) { .boussole, .repere { width: 54px; height: 54px; right: 12px; bottom: 12px; } }
@media (max-width: 800px) { .u-coaching .etapes::before { border-top: 0; border-left: 2px solid rgba(138,169,151,.5); } }
/* besoins à cocher */
.besoins { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 22px; }
.besoins legend { font-weight: 600; margin-bottom: 14px; }
.besoins-groupe { display: grid; gap: 10px; }
.besoins-groupe strong { font-size: .95rem; font-weight: 600; color: var(--doux); }
/* Nuage de bulles de l'ancien site ; inspiration japonaise : le cercle ensō se referme quand la bulle est choisie */
.nuage { display: flex; flex-wrap: wrap; gap: 12px; }
.bulle-choix { position: relative; margin: 0; cursor: pointer; }
.bulle-choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bulle-choix span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: #fff; font-weight: 700;
  box-shadow: 0 10px 30px rgba(36,54,45,.09); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; }
.bulle-choix span::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--sauge); border-top-color: transparent; transform: rotate(-30deg); transition: inherit; }
.bulle-choix:hover span { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(36,54,45,.13); }
.bulle-choix input:checked + span { background: var(--sauge-f); color: #fff; box-shadow: 0 16px 40px rgba(79,107,91,.35); }
.bulle-choix input:checked + span::before { border-color: #fff; background: rgba(255,255,255,.3); }
.bulle-choix input:focus-visible + span { outline: 3px solid var(--sable); outline-offset: 3px; }
.besoins-barre { position: sticky; bottom: 14px; z-index: 2; display: flex; gap: 12px; align-items: center; justify-content: center; }
.besoins-compte { padding: 10px 18px; border-radius: 999px; background: #fff; font-weight: 700; box-shadow: 0 12px 36px rgba(36,54,45,.12); }
.u-coaching #contact .contact-grille { grid-template-columns: 1fr; max-width: 1000px; gap: 28px; }
.u-coaching #contact .carte-form { background: var(--creme); box-shadow: none; }

/* Titres de cartes longs (ex. « accompagnement ») : coupure plutôt que débordement */
.cartes .carte h3 { hyphens: auto; overflow-wrap: break-word; }

/* Un seul appel : promesse de réponse près des formulaires et du bouton principal */
.promesse { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .9rem; font-weight: 600; color: var(--sauge-f); }
.promesse::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
:is(.intro, .scene-page, .fin) .promesse { color: rgba(255,255,255,.9); }
.intro .promesse { margin-top: 16px; }
.fin .promesse { position: relative; z-index: 2; display: flex; justify-content: center; }

/* Jalons du trait de l'accueil : la méthode (Évaluer → Concevoir → Former → Suivre), révélée au défilement */
.jalon { opacity: 0; transform-box: fill-box; transition: opacity .5s; }
.jalon.atteint { opacity: 1; }
.jalon circle { fill: var(--sable); stroke: #fff; stroke-width: 4; }
.jalon-num { font: 800 15px var(--titre); fill: var(--encre); }
.jalon-texte { font: 800 22px var(--titre); letter-spacing: -.01em; fill: var(--sauge-f); paint-order: stroke; stroke: var(--creme); stroke-width: 8px; stroke-linejoin: round; }
/* arrivée du trait : le drapeau du sommet, dans le pied de page */
.fin .sommet { position: relative; z-index: 2; width: fit-content; margin: 34px auto -6px; padding: 6px 16px; border-radius: 999px; background: var(--sable); color: var(--encre); font: 800 .95rem/1.2 var(--titre); letter-spacing: .01em; }
@media (max-width: 700px) { .jalon-texte { font-size: 17px; } }

/* ---------- Univers Institutions « La Passerelle » et À propos « L'Atelier horloger » : --lecture (0 → 1) posé en JS ---------- */
:is(.u-passerelle, .u-horloger, .u-renards) .scene-page { background: linear-gradient(#3E5A4B 0%, #7F9C8B 52%, #EADBC8 100%); }
:is(.u-passerelle, .u-horloger, .u-renards) .scene-page .couche.soleil { display: none; }
.univers-illu:is(.passerelle, .horloger, .renards, .noel, .releve) { filter: none; -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 46%, #000 48%, transparent 96%); mask-image: radial-gradient(ellipse 54% 54% at 50% 46%, #000 48%, transparent 96%); }
.passerelle .flots { animation: brume 6s ease-in-out infinite alternate; }
.marcheur { transform: translate(calc(var(--lecture, 0) * 68px), calc(sin(var(--lecture, 0) * 180deg) * 6px)); transition: transform .3s ease-out; }
.u-passerelle .etape-num { border-radius: 10px; background: var(--sable); }
.horloger .rouage { transform-box: fill-box; transform-origin: center; transition: transform .3s ease-out; }
.horloger .r1 { transform: rotate(calc(var(--lecture, 0) * 540deg)); }
.horloger .r2 { transform: rotate(calc(var(--lecture, 0) * -900deg)); }
.horloger .aiguilles { transform-box: view-box; transform-origin: 90px 270px; transform: rotate(calc(var(--lecture, 0) * 360deg)); }
.repere :is(.rep-h, .rep-m) { transform-box: view-box; transform-origin: 60px 60px; transition: transform .3s ease-out; }
.rep-h { transform: rotate(calc(var(--lecture, 0) * 90deg)); }
.rep-m { transform: rotate(calc(var(--lecture, 0) * 1080deg)); }
@media (prefers-reduced-motion: reduce) { .passerelle .flots { animation: none; } }
.mention-donnees { margin: 0; font-size: .86rem; }
.form .accord { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; } .form .accord input { width: auto; margin-top: 4px; }

/* Fil conducteur des univers Passerelle (corde et planches) et Atelier horloger (chaînette de montre) */
.u-passerelle .chemin-fond { stroke: var(--sable); stroke-width: 12; stroke-linecap: butt; stroke-dasharray: 4 7; opacity: .6; }
.u-passerelle .chemin-trace { stroke: #8A6A4C; stroke-width: 4; }
.u-horloger .chemin-fond { stroke: var(--sable); stroke-width: 6; stroke-dasharray: 7 5; opacity: .5; }
.u-horloger .chemin-trace { stroke: var(--sable); stroke-width: 6; stroke-dasharray: none; }
.u-horloger .chemin-point { fill: var(--sable); stroke: #fff; stroke-width: 5; }

/* ---------- Atelier Canva de Noël : nuit d'hiver, crêtes enneigées, neige qui tombe ---------- */
.u-noel .scene-page { background: linear-gradient(#24362D 0%, #3E5A4B 55%, #7F9C8B 100%); }
.u-noel .scene-page .couche.soleil { display: none; }
.u-noel .scene-page .couche path { fill: #E9EFEB; }
.u-noel .scene-page .couche:nth-of-type(3) path { fill: #F6F8F6; }
.u-noel .scene-page .couche:nth-of-type(4) path { fill: #FBF7F2; }
.noel .flocons { animation: neige 7s linear infinite; }
.noel .flocons-2 { animation-duration: 11s; animation-delay: -4s; }
@keyframes neige { from { transform: translateY(-30px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(60px); opacity: 0; } }
.u-noel .fiche-bloc .num { color: #A65A52; }
@media (prefers-reduced-motion: reduce) { .noel .flocons { animation: none; } }

/* ---------- GastroJura : DA du partenaire (rouge, beige, blocs blancs à angles droits, Helvetica légère) ---------- */
.u-gastrojura { --sauge: #C8161D; --sauge-f: #C8161D; --sauge-p: #FFFFFF; --sable: #C8161D; --sable-f: #C8161D; --sable-p: #FFFFFF; --creme: #E4DFD9;
  --encre: #1E1E1E; --doux: #4A4A4A; --rayon: 0px; --rayon-l: 0px; --titre: "Helvetica Neue", Helvetica, Arial, sans-serif; --texte: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.u-gastrojura :is(h1, h2, h3) { font-weight: 400; letter-spacing: -.01em; line-height: 1.15; }
.u-gastrojura .scene-page { background: #C8161D; }
.u-gastrojura .scene-page .couche { display: none; }
.u-gastrojura .scene-page :is(.surtitre-page, .accroche, h1) { color: #fff; }
.u-gastrojura .scene-page .pastilles-page li { background: rgba(255,255,255,.16); border-radius: 0; }
.u-gastrojura .btn { border-radius: 0; box-shadow: none; font-weight: 400; }
.u-gastrojura .btn:hover { transform: none; box-shadow: none; filter: brightness(.92); }
.u-gastrojura .scene-page .btn-p { background: #fff; color: #C8161D; }
.u-gastrojura .scene-page .btn-s { background: transparent; color: #fff; outline: 1px solid #fff; }
.u-gastrojura main .btn-v::after { content: "↗"; }
.u-gastrojura .univers-illu.gastrojura { filter: none; }
.u-gastrojura .etiq, .u-gastrojura main .section .etiq { border-radius: 0; background: #C8161D; color: #fff; }
.u-gastrojura .section.fond-gris { background: #E4DFD9; }
.u-gastrojura .section.fond-blanc, .u-gastrojura .section:not([class*="fond-"]) { background: #fff; }
.u-gastrojura :is(.carte, .liste-encadre, .tuile, .carte-form, .section-media img, .notes, .note) { border-radius: 0 !important; box-shadow: none; }
.u-gastrojura .chemin { display: none; }
/* Pages d'univers : le trait (qui évite les textes) passe au-dessus des fonds de section au lieu de disparaître dessous */
body:not(.accueil) .chemin { z-index: 1; }
.besoins-barre .btn { width: auto; flex: none; padding: 10px 18px; } .besoins-compte { white-space: nowrap; }

/* Coaching (Belvédère) : le trait devient un chemin de pas japonais, pierres posées dans le jardin */
.u-coaching .chemin-fond { stroke: var(--sauge); stroke-width: 12; stroke-dasharray: 1 22; opacity: .5; }
.u-coaching .chemin-trace { stroke: var(--sauge-f); stroke-width: 4; }

/* Formations : contenus indicatifs, tout est construit sur mesure */
.mention-mesure { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 0 0 28px; padding: 14px 18px; border-radius: var(--rayon); background: var(--sauge-p); color: var(--encre); font-size: .98rem; }
.mention-mesure svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--sauge-f); }
.filtres + .mention-mesure, .section .wrap > .mention-mesure { margin-inline: auto; }

/* Refuges sur les jalons de l'accueil : feu de camp qui s'allume quand le jalon est atteint */
.refuge path:first-child { stroke: var(--sable-f); stroke-width: 4; stroke-linecap: round; }
.refuge .flamme { fill: #D98E5A; transform-box: fill-box; transform-origin: 50% 100%; }
.refuge .flamme-coeur { fill: #F3D7B6; }
.jalon.atteint .flamme { animation: flamme 1.2s ease-in-out infinite alternate; }
@keyframes flamme { from { transform: scale(.9, .85); } to { transform: scale(1.05, 1.12); } }
@media (prefers-reduced-motion: reduce) { .jalon.atteint .flamme { animation: none; } }
.fin .sommet { cursor: default; user-select: none; }

/* Page 404 « On se relève » */
.page-404 { min-height: 78vh; }
.page-404 .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 860px) { .page-404 .wrap { grid-template-columns: 1fr; } }
.releve { filter: none; }
.releve-grimpeur { animation: releve 2.6s ease-out both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes releve { from { transform: translate(262px, 340px) rotate(-70deg); } 60% { transform: translate(262px, 340px) rotate(8deg); } to { transform: translate(262px, 340px) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .releve-grimpeur { animation: none; } }

/* Jeu caché « L'ascension » */
.ascension { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(36,54,45,.75); backdrop-filter: blur(4px); }
.ascension-cadre { position: relative; display: grid; gap: 10px; justify-items: center; }
.ascension canvas { display: block; width: min(360px, 92vw, calc((100svh - 150px) * 360 / 560)); aspect-ratio: 360 / 560; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.35); touch-action: none; }
.ascension-fermer { position: absolute; top: -14px; right: -14px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--encre); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--ombre-l); }
.ascension-touches { display: flex; gap: 14px; }
.ascension-touches button { width: 64px; height: 52px; border: 0; border-radius: 16px; background: rgba(251,247,242,.92); color: var(--sauge-f); font-size: 1.3rem; cursor: pointer; touch-action: none; user-select: none; }
.ascension-aide { margin: 0; color: var(--creme); font-size: .9rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .ascension-touches { display: none; } }

/* En-tête des fiches formation : le pictogramme de la formation dans une carte arrondie */
.fiche-entete:not(.univers-noel) .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
.illu-fiche { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--rayon-l); box-shadow: var(--ombre-l); max-width: 440px; width: 100%; justify-self: end; }
.illu-fiche svg { width: 62%; height: auto; }
@media (max-width: 860px) { .fiche-entete:not(.univers-noel) .wrap { grid-template-columns: 1fr; } .illu-fiche { max-width: 300px; justify-self: start; } }
/* La grimpeuse du jeu caché sautille au pied de la montagne du pied de page ; un clic lance « L'ascension » */
.fin { position: relative; }
.grimpeuse-pied { position: absolute; right: clamp(16px, 6vw, 90px); bottom: clamp(14px, 3vw, 36px); z-index: 3; width: 46px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer; }
.grimpeuse-pied svg { width: 100%; height: 100%; margin: 0; overflow: visible; animation: sautille 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.grimpeuse-pied:hover svg, .grimpeuse-pied:focus-visible svg { animation-duration: .7s; }
.grimpeuse-pied:focus-visible { outline: 3px solid var(--sable); outline-offset: 4px; border-radius: 12px; }
@keyframes sautille { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(0) scale(1); } 45% { transform: translateY(-14px) scale(.97, 1.04); } 75% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .grimpeuse-pied svg { animation: none; } }
/* Mobile : un mot très long d'un grand titre (« accompagnements ») ne doit jamais élargir la colonne, sans césure automatique */
h1, h2 { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 860px) { .scene-page .wrap { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 600px) { .scene-page h1 { font-size: clamp(2rem, 9vw, 2.6rem); } }
/* Mobile : le soleil de l'accueil se lève derrière les crêtes au lieu de chevaucher le surtitre */
@media (max-width: 700px) { .scene-accueil .couche.soleil { top: auto; bottom: 30%; right: 8%; width: 110px; height: 110px; } }

/* Menu mobile : les catégories d'abord, leurs pages à la demande ; 100dvh pour que le bas reste au-dessus de la barre du navigateur */
@media (max-width: 1000px) {
  .menu-mobile[open] .panneau { max-height: calc(100dvh - 84px); }
  .panneau summary { display: flex; align-items: center; padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .panneau summary a { flex: 1; }
  .panneau summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 18px 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
  .panneau details[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
}
@media (max-width: 700px) { .logo img { width: 62px; height: 62px; } }
/* Une suite sans espace (« Exchange/OneDrive/SharePoint/Teams ») ne doit pas élargir la page sur téléphone */
.prose, .aside dd { overflow-wrap: anywhere; }
/* Mobile : tous les profils visibles d'un coup, sur toute la largeur, sans défilement horizontal */
@media (max-width: 900px) {
  .choix-barre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: calc(100% - 24px); max-width: none; overflow: visible; border-radius: 22px; }
  .choix-barre a { display: flex; align-items: center; justify-content: center; padding: 8px 6px; border-radius: 16px; font-size: .82rem; line-height: 1.15; text-align: center; white-space: normal; }
}
/* Mobile : appel, WhatsApp et e-mail à portée de pouce, au-dessus du dock de l'accueil quand il est affiché */
.contact-rapide { display: none; }
@media (max-width: 1000px) {
  .contact-rapide { display: block; position: fixed; left: 14px; bottom: 16px; z-index: 40; transition: bottom .35s; }
  body:has(.choix-barre.visible) .contact-rapide { bottom: 84px; }
  .contact-rapide summary { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sauge-f); color: #fff; cursor: pointer; list-style: none; box-shadow: 0 6px 18px rgba(36,54,45,.3); }
  .contact-rapide summary::-webkit-details-marker { display: none; }
  .contact-rapide summary svg { width: 26px; height: 26px; }
  .contact-rapide div { position: absolute; left: 4px; bottom: 60px; display: grid; gap: 8px; }
  .contact-rapide a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--sauge-f); box-shadow: 0 4px 14px rgba(36,54,45,.25); }
  .contact-rapide a svg { width: 20px; height: 20px; }
}
/* Guides et textes légaux : texte long aligné à gauche, plus facile à lire */
body.lecture .section-tete.centre:has(.prose) { max-width: 760px; margin-inline: auto; text-align: left; }
body.lecture .section-tete .prose { margin-inline: 0 !important; }

/* Guides : une couleur et une illustration par guide */
.guide { --g: #3E5A4B; --gp: #E3EBE5; }
.guide-introduire-ia-entreprise { --g: #3F6B66; --gp: #DEEAE7; }
.guide-evaluer-competences-numeriques { --g: #8A6A48; --gp: #F3E9DD; }
.guide-sensibiliser-employes-phishing { --g: #A5574B; --gp: #F6E6E1; }
.guide-gagner-du-temps-excel-outlook-teams { --g: #5F7242; --gp: #EBEFDF; }
.guide .scene-page .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; }
.guide-illu { justify-self: center; width: min(100%, 460px); }
.guide-illu svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 34px rgba(20, 35, 28, .22)); }
.guide .section.fond-gris, .guide .encart-h { background: var(--gp); }
.guide .etiq { background: var(--g); color: #fff; }
.guide .encart-h .etiq { background: #fff; color: var(--g); }
.guide .section-tete h2::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 16px; border-radius: 5px; background: var(--g); }
.guide .section-tete.centre:not(:has(.prose)) h2::after { margin-inline: auto; }
.guide .section a:not(.btn):not(.plus) { color: var(--g); }
/* Cartes : même fond pour toutes, liseré et pictogramme à la couleur du guide */
.guide .cartes .carte { background: #fff; color: var(--encre); border: 1px solid rgba(62, 90, 75, .1); border-top: 6px solid var(--g); border-radius: 26px; box-shadow: 0 14px 34px rgba(36, 54, 45, .08); }
.guide .cartes .carte h3, .guide .cartes .carte h3 a { color: var(--encre); }
.guide .cartes .carte p { color: var(--doux); }
.guide .carte .icone { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--gp); color: var(--g); }
.guide .carte .icone svg { width: 32px; height: 32px; }
.guide .carte .plus { color: var(--g); }
.guide .carte:hover { transform: translateY(-5px); }
/* Étapes : de vraies cartes numérotées, lisibles même à six */
.guide .etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; counter-reset: none; }
.guide .etapes::before, .guide .etapes::after, .guide .etapes li::before, .guide .etapes li::after { display: none !important; }
.guide .etapes li { position: relative; padding: 30px 28px; border-radius: 26px; background: #fff; text-align: left; box-shadow: 0 14px 34px rgba(36, 54, 45, .08); overflow: hidden; }
.guide .etape-num { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 16px; border-radius: 18px; background: var(--g) !important; color: #fff !important; font-size: 1.35rem; }
.guide .etapes h3 { margin-bottom: 8px; font-size: 1.28rem; line-height: 1.15; }
.guide .etapes p { margin: 0; color: var(--doux); }
/* Encarts : un moment fort dans la lecture */
.guide .encart-h { border-left: 8px solid var(--g); }
.guide .encart-h h2 { color: var(--encre); }
.guide .encart-h .btn-v, .guide .encart-h .btn-p { background: var(--g); color: #fff; }
@media (max-width: 860px) {
  .guide .scene-page .wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .guide-illu { width: min(92%, 360px); margin-top: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .g-flotte { animation: gFlotte 5s ease-in-out infinite; }
  .g-flotte-lente { animation: gFlotte 7s ease-in-out infinite reverse; }
  .g-pulse { transform-box: fill-box; transform-origin: center; animation: gPulse 4s ease-in-out infinite; }
  .g-balance { transform-origin: 198px 8px; animation: gBalance 6s ease-in-out infinite; }
  .g-aiguille { transform-origin: 346px 178px; animation: gAiguille 6s ease-in-out infinite; }
  .g-aiguille-temps { transform-origin: 302px 196px; animation: gTemps 12s linear infinite; }
}
@keyframes gFlotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes gPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes gBalance { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes gAiguille { 0%, 100% { rotate: -6deg; } 50% { rotate: 8deg; } }
@keyframes gTemps { to { rotate: 360deg; } }

/* ===== Direction artistique propre à chaque guide ===== */
.v-guide figure { margin: 0; }
.v-note { margin: 22px auto 0; max-width: 620px; text-align: center; font-size: .92rem; color: var(--doux); }
.guide:not(.guide-organiser-formation-entreprise):not(.guide-conseils) .chemin { display: none; }
.guide:not(.guide-organiser-formation-entreprise):not(.guide-conseils) .scene-page { padding-bottom: 96px; }
.guide:not(.guide-organiser-formation-entreprise):not(.guide-conseils) .scene-page .couche { display: none; }

/* 1. Organiser : le carnet d'expédition, un sentier qui serpente */
.guide-organiser-formation-entreprise .v-route figure { max-width: 900px; margin-inline: auto; padding: clamp(14px, 3vw, 34px); border-radius: 30px; background: #fff; box-shadow: 0 20px 44px rgba(36, 54, 45, .1); }
.guide-organiser-formation-entreprise .v-route svg { display: block; width: 100%; height: auto; }
.guide-organiser-formation-entreprise .section.fond-gris { background: #F4EEE4; }
.guide-organiser-formation-entreprise .cartes .carte { border: 0; border-radius: 6px 26px 6px 26px; }
.guide-organiser-formation-entreprise .cartes .carte:nth-child(odd) { rotate: -.7deg; }
.guide-organiser-formation-entreprise .cartes .carte:nth-child(even) { rotate: .7deg; }
@media (min-width: 761px) {
  .guide-organiser-formation-entreprise .etapes { position: relative; max-width: 900px; margin-inline: auto; grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 14px; }
  .guide-organiser-formation-entreprise .etapes li:nth-child(even) { margin-top: 74px; }
  .guide-organiser-formation-entreprise .etapes::before { content: ""; display: block !important; position: absolute; inset: 0 auto 0 50%; border-left: 5px dotted #C8AA8C; }
}
.guide-organiser-formation-entreprise .etapes li { border-radius: 6px 26px 6px 26px; }
.guide-organiser-formation-entreprise .etape-num { border-radius: 50% 50% 50% 6px; rotate: -45deg; }
.guide-organiser-formation-entreprise .etape-num { font-size: 0; }
.guide-organiser-formation-entreprise .etapes { counter-reset: camp; }
.guide-organiser-formation-entreprise .etapes li { counter-increment: camp; }
.guide-organiser-formation-entreprise .etapes .etape-num::after { content: counter(camp); font-size: 1.35rem; rotate: 45deg; display: block; }

/* 2. IA : le laboratoire, sombre, en circuits et en police technique */
.guide-introduire-ia-entreprise .scene-page { background: #123330; background-image: linear-gradient(rgba(127, 195, 185, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 195, 185, .09) 1px, transparent 1px); background-size: 34px 34px; }
.guide-introduire-ia-entreprise .surtitre-page, .guide-introduire-ia-entreprise .etiq { font-family: ui-monospace, Consolas, monospace; }
.guide-introduire-ia-entreprise .surtitre-page { color: #7FD6C6; }
.guide-introduire-ia-entreprise .section { background: #F2F7F6; background-image: radial-gradient(rgba(63, 107, 102, .2) 1.4px, transparent 1.5px); background-size: 22px 22px; }
.guide-introduire-ia-entreprise .section.fond-gris, .guide-introduire-ia-entreprise .v-feux { background: #123330; background-image: linear-gradient(rgba(127, 195, 185, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 195, 185, .08) 1px, transparent 1px); background-size: 34px 34px; }
.guide-introduire-ia-entreprise :is(.section.fond-gris, .v-feux) .section-tete h2 { color: #fff; }
.guide-introduire-ia-entreprise :is(.section.fond-gris, .v-feux) .etiq { background: #7FD6C6; color: #123330; }
.guide-introduire-ia-entreprise .v-note { color: #BFD8D2; }
.guide-introduire-ia-entreprise .cartes .carte { border: 2px solid #3F6B66; border-radius: 8px; box-shadow: 6px 6px 0 #3F6B66; }
.guide-introduire-ia-entreprise .carte .icone { border-radius: 8px; background: #123330; color: #7FD6C6; }
.guide-introduire-ia-entreprise .etapes { position: relative; max-width: 780px; margin-inline: auto; grid-template-columns: 1fr; gap: 16px; }
.guide-introduire-ia-entreprise .etapes::before { content: ""; display: block !important; position: absolute; inset: 20px auto 20px 26px; border-left: 2px solid #7FD6C6; }
.guide-introduire-ia-entreprise .etapes li { display: grid; grid-template-columns: 54px 1fr; column-gap: 20px; padding: 0; background: none; box-shadow: none; overflow: visible; }
.guide-introduire-ia-entreprise .etape-num { grid-row: span 2; margin: 0; border-radius: 8px; background: #7FD6C6 !important; color: #123330 !important; font-family: ui-monospace, Consolas, monospace; z-index: 1; }
.guide-introduire-ia-entreprise .etapes h3 { color: #fff; }
.guide-introduire-ia-entreprise .etapes p { color: #BFD8D2; }
.feux { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.feu { padding: 28px; border-radius: 8px; background: #0D2725; border: 2px solid #2C5450; color: #E4F1EE; }
.feu i { display: block; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: currentColor; box-shadow: 0 0 26px currentColor; }
.feu.vert i { color: #6FCF97; } .feu.orange i { color: #E9B872; } .feu.rouge i { color: #E58B78; }
.feu h3 { color: #fff; font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; letter-spacing: 0; }
.feu ul { margin: 0; padding-left: 18px; line-height: 1.7; }

/* 3. Évaluer : le bulletin, sur papier quadrillé, avec des paliers qui montent */
.guide-evaluer-competences-numeriques .scene-page { background: #7A5C3C; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 24px 24px; }
.guide-evaluer-competences-numeriques .surtitre-page { color: #F3DDBB; }
.guide-evaluer-competences-numeriques .section { background: #FBF6EE; background-image: linear-gradient(rgba(138, 106, 72, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 106, 72, .1) 1px, transparent 1px); background-size: 24px 24px; }
.guide-evaluer-competences-numeriques .cartes .carte { border: 2px solid #8A6A48; border-radius: 4px; box-shadow: none; }
.guide-evaluer-competences-numeriques .carte .icone { border-radius: 50%; background: none; border: 3px solid #8A6A48; }
@media (min-width: 761px) {
  .guide-evaluer-competences-numeriques .etapes { align-items: end; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .guide-evaluer-competences-numeriques .etapes li:nth-child(1) { padding-top: 26px; }
  .guide-evaluer-competences-numeriques .etapes li:nth-child(2) { padding-top: 66px; }
  .guide-evaluer-competences-numeriques .etapes li:nth-child(3) { padding-top: 106px; }
  .guide-evaluer-competences-numeriques .etapes li:nth-child(4) { padding-top: 186px; }
}
.guide-evaluer-competences-numeriques .etapes li { border-radius: 4px 4px 0 0; background: #fff; border: 2px solid #8A6A48; border-bottom-width: 8px; box-shadow: none; }
.guide-evaluer-competences-numeriques .etape-num { border-radius: 50%; }
.releve { position: relative; max-width: 900px; margin-inline: auto; padding: clamp(14px, 3vw, 30px); border: 2px solid #8A6A48; border-radius: 4px; background: #fff; }
.releve table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(.68rem, 2.1vw, .95rem); }
.releve caption { margin-bottom: 14px; text-align: left; color: var(--doux); font-size: .92rem; }
.releve th, .releve td { padding: 11px 4px; border: 1px solid #E5D6C2; text-align: center; overflow-wrap: anywhere; }
.releve td[data-n="1"] { background: #F7E6DF; } .releve td[data-n="2"] { background: #F3E9DD; } .releve td[data-n="3"] { background: #DCE8DF; font-weight: 600; }
.tampon { position: absolute; right: 18px; bottom: -22px; margin: 0; padding: 6px 16px; border: 3px solid #A5574B; border-radius: 6px; background: #fff; color: #A5574B; font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .05em; rotate: -3deg; }

/* 4. Phishing : l'affiche d'alerte, franche et rayée */
.guide-sensibiliser-employes-phishing .scene-page { background: #8E4337; border-bottom: 18px solid; border-image: repeating-linear-gradient(-45deg, #E9C98F 0 22px, #5E2C24 22px 44px) 18; }
.guide-sensibiliser-employes-phishing .scene-page h1, .guide-sensibiliser-employes-phishing h2 { text-transform: uppercase; letter-spacing: -.01em; }
.guide-sensibiliser-employes-phishing .scene-page h1 { font-size: clamp(1.7rem, 4.3vw, 3.5rem); line-height: 1.05; }
.guide-sensibiliser-employes-phishing .surtitre-page { color: #F3D49B; }
.guide-sensibiliser-employes-phishing .section { background: #FBF3EF; }
.guide-sensibiliser-employes-phishing .section.fond-gris, .guide-sensibiliser-employes-phishing .v-mail { background: #F6E0D9; }
.guide-sensibiliser-employes-phishing .section-tete h2::after { width: 100%; height: 8px; background: repeating-linear-gradient(-45deg, #A5574B 0 10px, transparent 10px 20px); border-radius: 0; }
.guide-sensibiliser-employes-phishing .cartes .carte { border: 0; border-radius: 10px; overflow: hidden; }
.guide-sensibiliser-employes-phishing .cartes .carte::before { content: ""; display: block; height: 30px; background: #A5574B radial-gradient(circle at 18px 15px, #F6E0D9 5px, transparent 6px) , #A5574B; }
.guide-sensibiliser-employes-phishing .carte .icone { border-radius: 50%; background: #A5574B; color: #fff; }
.guide-sensibiliser-employes-phishing .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-sensibiliser-employes-phishing .etapes li { border-radius: 10px; border-left: 10px solid #A5574B; }
.guide-sensibiliser-employes-phishing .etape-num { width: auto; height: auto; padding: 4px 14px; border-radius: 4px; background: #5E2C24 !important; font-size: .9rem; justify-content: start; width: fit-content; }
.guide-sensibiliser-employes-phishing .etapes { counter-reset: alerte; }
.guide-sensibiliser-employes-phishing .etapes li { counter-increment: alerte; }
.guide-sensibiliser-employes-phishing .etape-num { font-size: 0; }
.guide-sensibiliser-employes-phishing .etape-num::after { content: "RÉFLEXE " counter(alerte); font-size: .84rem; letter-spacing: .05em; }
.mail-etude { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; max-width: 1000px; margin-inline: auto; }
.faux-mail { padding: 0 26px 26px; border-radius: 12px; background: #fff; box-shadow: 0 22px 44px rgba(94, 44, 36, .2); overflow-wrap: anywhere; }
.faux-mail .barre { display: flex; gap: 7px; margin: 0 -26px 18px; padding: 12px 16px; border-radius: 12px 12px 0 0; background: #5E2C24; }
.faux-mail .barre i { width: 11px; height: 11px; border-radius: 50%; background: #E9C98F; }
.faux-mail p { margin: 0 0 12px; }
.faux-mail hr { margin: 14px 0; border: 0; border-top: 1px solid #EAD5CD; }
.faux-lien { color: #A5574B; text-decoration: underline; font-weight: 600; }
.indice { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #A5574B; color: #fff; font-size: .86rem; font-weight: 700; }
.enq-indices { margin: 0; padding: 0; list-style: none; counter-reset: i; display: grid; gap: 14px; }
.enq-indices li { position: relative; padding-left: 42px; counter-increment: i; }
.enq-indices li::before { content: counter(i); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #A5574B; color: #fff; font-weight: 700; }

/* 5. Gagner du temps : le tableur, ses cellules et ses numéros de ligne */
.guide-gagner-du-temps-excel-outlook-teams .scene-page { background: #4A5A32; background-image: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px); background-size: 92px 30px; }
.guide-gagner-du-temps-excel-outlook-teams .surtitre-page { color: #DCE6BC; }
.guide-gagner-du-temps-excel-outlook-teams .etiq { border-radius: 0; font-family: ui-monospace, Consolas, monospace; }
.guide-gagner-du-temps-excel-outlook-teams .section { background: #F7F8F1; }
.guide-gagner-du-temps-excel-outlook-teams .section.fond-gris, .guide-gagner-du-temps-excel-outlook-teams .v-feuille { background: #EBEFDF; }
.guide-gagner-du-temps-excel-outlook-teams .section-tete h2::after { display: none; }
.guide-gagner-du-temps-excel-outlook-teams .cartes { gap: 0; counter-reset: colonne; border: 1px solid #B8C49A; background: #fff; }
.guide-gagner-du-temps-excel-outlook-teams .cartes .carte { counter-increment: colonne; border: 0; border-right: 1px solid #B8C49A; border-bottom: 1px solid #B8C49A; border-radius: 0; box-shadow: none; }
.guide-gagner-du-temps-excel-outlook-teams .cartes .carte::before { content: counter(colonne, upper-alpha); padding: 4px; background: #E2E8CF; color: #4A5A32; text-align: center; font: 600 .86rem ui-monospace, Consolas, monospace; }
.guide-gagner-du-temps-excel-outlook-teams .cartes .carte:hover { transform: none; outline: 3px solid #5F7242; outline-offset: -3px; z-index: 1; }
.guide-gagner-du-temps-excel-outlook-teams .carte .icone { border-radius: 0; background: #5F7242; color: #fff; }
.guide-gagner-du-temps-excel-outlook-teams .etapes { max-width: 820px; margin-inline: auto; grid-template-columns: 1fr; gap: 0; border: 1px solid #B8C49A; background: #fff; }
.guide-gagner-du-temps-excel-outlook-teams .etapes li { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; padding: 0 18px 0 0; border-bottom: 1px solid #B8C49A; border-radius: 0; box-shadow: none; }
.guide-gagner-du-temps-excel-outlook-teams .etape-num { grid-row: span 2; width: 58px; height: 100%; min-height: 84px; margin: 0; border-radius: 0; background: #E2E8CF !important; color: #4A5A32 !important; font: 600 1rem ui-monospace, Consolas, monospace; }
.guide-gagner-du-temps-excel-outlook-teams .etapes h3 { margin-top: 16px; }
.guide-gagner-du-temps-excel-outlook-teams .etapes p { margin-bottom: 16px; }
.guide-gagner-du-temps-excel-outlook-teams .encart-h { border-radius: 0; }
.feuilles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; max-width: 900px; margin-inline: auto; }
.feuille { border: 1px solid #B8C49A; background: #fff; }
.feuille h3 { margin: 0; padding: 10px 16px; font-size: 1.05rem; color: #fff; letter-spacing: 0; }
.feuille.avant h3 { background: #A5574B; } .feuille.apres h3 { background: #5F7242; }
.feuille ol { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.feuille li { display: grid; grid-template-columns: 40px 1fr; align-items: center; min-height: 44px; border-top: 1px solid #DCE2C8; counter-increment: l; }
.feuille li::before { content: counter(l); display: grid; place-items: center; height: 100%; background: #F0F3E4; color: #4A5A32; font: .82rem ui-monospace, Consolas, monospace; }
.feuille li { padding-right: 10px; column-gap: 12px; }
.fleche { font-size: 2.2rem; color: #5F7242; font-weight: 700; }

/* Page d'accueil des guides : chaque carte à la couleur de son guide */
.guide-conseils .cartes .carte:nth-child(1) { --g: #3E5A4B; --gp: #E3EBE5; }
.guide-conseils .cartes .carte:nth-child(2) { --g: #123330; --gp: #DEEAE7; }
.guide-conseils .cartes .carte:nth-child(3) { --g: #8A6A48; --gp: #F3E9DD; }
.guide-conseils .cartes .carte:nth-child(4) { --g: #A5574B; --gp: #F6E6E1; }
.guide-conseils .cartes .carte:nth-child(5) { --g: #5F7242; --gp: #EBEFDF; }

@media (max-width: 1100px) { .guide-sensibiliser-employes-phishing .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .guide-sensibiliser-employes-phishing .etapes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mail-etude, .feuilles { grid-template-columns: minmax(0, 1fr); }
  .fleche { justify-self: center; rotate: 90deg; }
  .tampon { position: static; display: inline-block; margin-top: 14px; }
  .guide-sensibiliser-employes-phishing .scene-page h1 { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
}
.guide h2 { text-wrap: balance; }
.guide .etapes p, .guide .etapes h3 { max-width: none; width: auto; }
.guide .etapes li > * { min-width: 0; }
.guide-gagner-du-temps-excel-outlook-teams .carte .icone { background: #5F7242 !important; color: #fff !important; }
.guide-introduire-ia-entreprise .carte .icone { background: #123330 !important; color: #7FD6C6 !important; }
.guide-sensibiliser-employes-phishing .carte .icone { background: #A5574B !important; color: #fff !important; }
.guide-evaluer-competences-numeriques .carte .icone { background: none !important; color: #8A6A48 !important; }
.guide-organiser-formation-entreprise .carte .icone, .guide-conseils .carte .icone { background: var(--gp) !important; color: var(--g) !important; }

/* ===== Seconde série de guides : un univers par sujet ===== */
.guide-mots-de-passe-double-authentification { --g: #22384F; --gp: #E6ECF2; }
.guide-charte-utilisation-ia { --g: #2F4057; --gp: #F3EBD9; }
.guide-phishing-que-faire-si-on-a-clique { --g: #43321A; --gp: #FBF1D3; }
.guide-adoption-microsoft-365-teams { --g: #4C4A8F; --gp: #E8E8F5; }
.guide-refaire-son-cv { --g: #8B4F61; --gp: #F6E8EC; }
.guide-reprendre-confiance-ordinateur { --g: #A85A2F; --gp: #FCEBDD; }
@media (prefers-reduced-motion: no-preference) {
  .g-coffre { transform-origin: 218px 206px; animation: gCoffre 10s ease-in-out infinite; }
  .g-aiguille-chrono { transform-origin: 234px 206px; animation: gTemps 8s linear infinite; }
  .g-balance-plume { transform-origin: 300px 202px; animation: gBalance 5s ease-in-out infinite; }
}
@keyframes gCoffre { 0%, 100% { rotate: 0deg; } 50% { rotate: 80deg; } }

/* A. Mots de passe : le coffre-fort, bleu nuit et or */
.guide-mots-de-passe-double-authentification .scene-page { background: #22384F radial-gradient(circle at 78% 42%, #3F6386 0, #22384F 56%); }
.guide-mots-de-passe-double-authentification .surtitre-page { color: #E5C583; }
.guide-mots-de-passe-double-authentification .section { background: #F4F6F8; }
.guide-mots-de-passe-double-authentification .section.fond-gris, .guide-mots-de-passe-double-authentification .v-force { background: #22384F; }
.guide-mots-de-passe-double-authentification :is(.section.fond-gris, .v-force) .section-tete h2, .guide-mots-de-passe-double-authentification .etapes h3 { color: #fff; }
.guide-mots-de-passe-double-authentification :is(.section.fond-gris, .v-force) .etiq { background: #D9AE5F; color: #22384F; }
.guide-mots-de-passe-double-authentification .section-tete h2::after { background: #D9AE5F; }
.guide-mots-de-passe-double-authentification .v-note { color: #C9D6E2; }
.guide-mots-de-passe-double-authentification .cartes .carte { border: 0; border-left: 8px solid #D9AE5F; border-radius: 40px 12px 12px 40px; }
.guide-mots-de-passe-double-authentification .carte .icone { border-radius: 50%; background: #22384F !important; color: #D9AE5F !important; }
.guide-mots-de-passe-double-authentification .etapes li { border: 2px solid #D9AE5F; background: #2B4661; }
.guide-mots-de-passe-double-authentification .etapes p { color: #D5E0E9; }
.guide-mots-de-passe-double-authentification .etape-num { border-radius: 50%; border: 4px solid #D9AE5F; background: #22384F !important; color: #E5C583 !important; }
.forces { display: grid; gap: 16px; max-width: 820px; margin-inline: auto; }
.force { padding: 20px 24px; border-radius: 14px; background: #fff; overflow-wrap: anywhere; }
.force code { font: 700 1.14rem ui-monospace, Consolas, monospace; color: #22384F; }
.force p { margin: 8px 0 0; color: var(--doux); }
.jauge { display: block; height: 11px; margin-top: 12px; border-radius: 9px; background: #E4E9EE; overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 9px; }
.f1 .jauge i { width: 22%; background: #B4442F; } .f2 .jauge i { width: 42%; background: #D99A3C; } .f3 .jauge i { width: 94%; background: #4E9A6E; }
.deux-cles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; max-width: 820px; margin: 40px auto 0; color: #fff; }
.deux-cles > div { padding: 24px; border: 2px dashed #D9AE5F; border-radius: 18px; text-align: center; }
.deux-cles span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%; background: #D9AE5F; color: #22384F; font-weight: 700; }
.deux-cles h3 { margin-bottom: 4px; color: #fff; font-size: 1.2rem; }
.deux-cles p { margin: 0; color: #D5E0E9; }
.deux-cles > b { font-size: 2.2rem; color: #D9AE5F; }

/* B. Charte IA : le document officiel, papier, encre et cire */
.guide-charte-utilisation-ia .scene-page { background: #2F4057; }
.guide-charte-utilisation-ia .surtitre-page { color: #E4D3AC; font-family: Georgia, serif; letter-spacing: .08em; }
.guide-charte-utilisation-ia .scene-page h1, .guide-charte-utilisation-ia h2, .guide-charte-utilisation-ia .cartes h3, .guide-charte-utilisation-ia .etapes h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.01em; }
.guide-charte-utilisation-ia .section { background: #F7F1E3; }
.guide-charte-utilisation-ia .section.fond-gris { background: #EDE3CC; }
.guide-charte-utilisation-ia .etiq { background: none; border: 1px solid #2F4057; border-radius: 2px; color: #2F4057; font-family: Georgia, serif; }
.guide-charte-utilisation-ia .section-tete h2::after { width: 120px; height: 3px; background: #9A3D3D; }
.guide-charte-utilisation-ia .cartes .carte { border: 1px solid #2F4057; outline: 1px solid #2F4057; outline-offset: -7px; border-radius: 2px; background: #FFFDF7; box-shadow: none; }
.guide-charte-utilisation-ia .carte .icone { border-radius: 2px; background: none !important; color: #9A3D3D !important; }
.guide-charte-utilisation-ia .etapes { counter-reset: art; }
.guide-charte-utilisation-ia .etapes li { counter-increment: art; border: 1px solid #C9B48A; border-radius: 2px; background: #FFFDF7; box-shadow: none; }
.guide-charte-utilisation-ia .etape-num { width: auto; height: auto; padding: 0; background: none !important; color: #9A3D3D !important; font-size: 0; justify-content: start; }
.guide-charte-utilisation-ia .etape-num::after { content: "Étape " counter(art); font: italic 1.05rem Georgia, serif; }
.guide-charte-utilisation-ia .encart-h { border-left: 0; border: 1px solid #2F4057; border-radius: 2px; background: #FFFDF7; }
.parchemin { position: relative; max-width: 820px; margin-inline: auto; padding: clamp(26px, 6vw, 64px); border: 1px solid #C9B48A; outline: 2px solid #2F4057; outline-offset: -12px; background: #FFFDF7; box-shadow: 0 24px 50px rgba(47, 64, 87, .16); font-family: Georgia, serif; }
.parchemin h3 { margin: 0 0 8px; text-align: center; font: 700 clamp(1.3rem, 3.4vw, 1.9rem)/1.2 Georgia, serif; letter-spacing: 0; color: #2F4057; }
.preambule { margin: 0 0 26px; text-align: center; font-style: italic; color: #6D6A60; }
.parchemin ol { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 16px; }
.parchemin li { position: relative; padding-left: 74px; counter-increment: a; line-height: 1.6; color: #333E4D; }
.parchemin li::before { content: "Art. " counter(a); position: absolute; left: 0; top: 0; font-weight: 700; color: #9A3D3D; }
.sceau { position: absolute; right: clamp(14px, 4vw, 44px); bottom: -24px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 47% 53% 50% 50%; background: #9A3D3D; color: #F5D8D8; font: 700 1.5rem Georgia, serif; box-shadow: inset 0 0 0 7px #872F2F, 0 8px 18px rgba(0, 0, 0, .2); rotate: -8deg; }

/* C. Phishing, que faire : le plan d'urgence, jaune signal */
.guide-phishing-que-faire-si-on-a-clique .scene-page { background: #43321A; }
.guide-phishing-que-faire-si-on-a-clique .surtitre-page { color: #F2C14E; }
.guide-phishing-que-faire-si-on-a-clique .section { background: #FFFBEF; }
.guide-phishing-que-faire-si-on-a-clique .section.fond-gris, .guide-phishing-que-faire-si-on-a-clique .v-urgence { background: #F2C14E; }
.guide-phishing-que-faire-si-on-a-clique .etiq { background: #43321A; color: #F2C14E; }
.guide-phishing-que-faire-si-on-a-clique .section-tete h2 { display: inline; background: linear-gradient(transparent 62%, #F7D97F 62%); }
.guide-phishing-que-faire-si-on-a-clique :is(.section.fond-gris, .v-urgence) .section-tete h2 { background: none; }
.guide-phishing-que-faire-si-on-a-clique .section-tete h2::after { display: none; }
.guide-phishing-que-faire-si-on-a-clique .section-tete .etiq { display: table; margin: 0 auto 16px; }
.guide-phishing-que-faire-si-on-a-clique .cartes .carte { border: 3px solid #43321A; border-radius: 6px; box-shadow: 7px 7px 0 #F2C14E; }
.guide-phishing-que-faire-si-on-a-clique .carte .icone { border-radius: 6px; background: #F2C14E !important; color: #43321A !important; }
.guide-phishing-que-faire-si-on-a-clique .etapes li { border: 3px solid #43321A; border-radius: 6px; }
.guide-phishing-que-faire-si-on-a-clique .etape-num { border-radius: 6px; background: #43321A !important; color: #F2C14E !important; }
.guide-phishing-que-faire-si-on-a-clique .encart-h { border: 3px solid #43321A; border-radius: 6px; background: #FFF4CF; }
.temps-reaction { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.temps-reaction article { position: relative; padding: 26px; border: 3px solid #43321A; border-radius: 6px; background: #fff; }
.pastille-temps { display: inline-block; padding: 4px 12px; border-radius: 3px; background: #43321A; color: #F2C14E; font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; }
.temps-reaction h3 { margin: 12px 0 10px; font-size: 2rem; }
.temps-reaction ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.temps-reaction li + li { margin-top: 8px; }

/* D. Microsoft 365 et Teams : le tableau d'équipe, notes colorées */
.guide-adoption-microsoft-365-teams .scene-page { background: #4C4A8F radial-gradient(rgba(255, 255, 255, .15) 1.5px, transparent 1.6px); background-size: 24px 24px; }
.guide-adoption-microsoft-365-teams .surtitre-page { color: #F7DD84; }
.guide-adoption-microsoft-365-teams .section { background: #F5F5FB; }
.guide-adoption-microsoft-365-teams .section.fond-gris, .guide-adoption-microsoft-365-teams .v-kanban { background: #E8E8F5; }
.guide-adoption-microsoft-365-teams .etiq { border-radius: 8px; background: #4C4A8F; color: #fff; }
.guide-adoption-microsoft-365-teams .cartes .carte { border: 0; border-radius: 4px; box-shadow: 0 12px 22px rgba(76, 74, 143, .18); }
.guide-adoption-microsoft-365-teams .cartes .carte:nth-child(4n+1) { background: #FBEBA9; rotate: -1deg; }
.guide-adoption-microsoft-365-teams .cartes .carte:nth-child(4n+2) { background: #D8D7F4; rotate: 1deg; }
.guide-adoption-microsoft-365-teams .cartes .carte:nth-child(4n+3) { background: #CFEBD9; rotate: -.6deg; }
.guide-adoption-microsoft-365-teams .cartes .carte:nth-child(4n) { background: #F8D6DE; rotate: .8deg; }
.guide-adoption-microsoft-365-teams .cartes .carte p { color: #3A3A52; }
.guide-adoption-microsoft-365-teams .carte .icone { background: rgba(255, 255, 255, .72) !important; color: #4C4A8F !important; }
.guide-adoption-microsoft-365-teams .etapes li { border-radius: 8px; border-top: 8px solid #4C4A8F; }
.guide-adoption-microsoft-365-teams .etape-num { border-radius: 50%; background: #4C4A8F !important; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 22px 44px rgba(76, 74, 143, .14); }
.colonne { padding: 14px; border-radius: 12px; background: #F1F1FA; }
.colonne h3 { margin: 0 0 14px; font-size: 1.1rem; color: #4C4A8F; letter-spacing: 0; }
.note-k { margin: 0 0 12px; padding: 18px 14px; border-radius: 3px; box-shadow: 0 6px 10px rgba(50, 50, 90, .13); font-weight: 500; }
.note-k.n1 { background: #FBEBA9; rotate: -1deg; } .note-k.n2 { background: #F8D6DE; rotate: 1deg; } .note-k.n3 { background: #D8D7F4; rotate: -.5deg; }
.note-k.n4 { background: #D8D7F4; rotate: .8deg; } .note-k.n5 { background: #FBEBA9; rotate: -.7deg; } .note-k.n6 { background: #CFEBD9; rotate: .6deg; }

/* E. CV : la page de magazine, serif et rose poudré */
.guide-refaire-son-cv .scene-page { background: #6E3E4D; }
.guide-refaire-son-cv .surtitre-page { color: #F2CBD6; letter-spacing: .12em; }
.guide-refaire-son-cv .scene-page h1, .guide-refaire-son-cv h2, .guide-refaire-son-cv .cartes h3, .guide-refaire-son-cv .etapes h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.01em; }
.guide-refaire-son-cv .section { background: #FFF9F7; }
.guide-refaire-son-cv .section.fond-gris, .guide-refaire-son-cv .v-cv { background: #F6E8EC; }
.guide-refaire-son-cv .etiq { padding: 0; background: none; border-bottom: 2px solid #8B4F61; border-radius: 0; color: #8B4F61; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.guide-refaire-son-cv .section-tete h2::after { display: none; }
.guide-refaire-son-cv .cartes { gap: 0; border-block: 1px solid #C89AA7; }
.guide-refaire-son-cv .cartes .carte { border: 0; border-right: 1px solid #E3C6CE; border-radius: 0; background: none; box-shadow: none; }
.guide-refaire-son-cv .cartes .carte:hover { transform: none; }
.guide-refaire-son-cv .carte .icone { background: none !important; color: #8B4F61 !important; width: auto; height: auto; justify-items: start; }
.guide-refaire-son-cv .etapes { counter-reset: none; gap: 34px; }
.guide-refaire-son-cv .etapes li { padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.guide-refaire-son-cv .etape-num { width: auto; height: auto; margin-bottom: 4px; background: none !important; color: #C89AA7 !important; font: 400 4.2rem/1 Georgia, serif; justify-content: start; }
.guide-refaire-son-cv .encart-h { border: 0; border-radius: 0; background: #6E3E4D; }
.guide-refaire-son-cv .encart-h h2, .guide-refaire-son-cv .encart-h p { color: #fff; }
.guide-refaire-son-cv .encart-h .etiq { background: none; color: #F2CBD6; border-color: #F2CBD6; }
.guide-refaire-son-cv .encart-h .btn { background: #fff; color: #6E3E4D; }
.cv-etude { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 38px; align-items: center; max-width: 1020px; margin-inline: auto; }
.cv-feuille { display: grid; grid-template-columns: 34% 1fr; background: #fff; box-shadow: 0 26px 50px rgba(110, 62, 77, .2); font-size: .92rem; rotate: -1deg; overflow-wrap: anywhere; }
.cv-feuille aside { padding: 22px 16px; background: #6E3E4D; color: #FBEFF2; }
.cv-feuille > div { padding: 24px 20px; }
.cv-feuille h3 { margin: 0; font: 400 1.65rem/1.1 Georgia, serif; letter-spacing: 0; }
.cv-titre { margin: 4px 0 12px; color: #8B4F61; font-weight: 600; }
.cv-feuille h4 { margin: 14px 0 4px; font: 700 .76rem Outfit, sans-serif; text-transform: uppercase; letter-spacing: .09em; color: inherit; }
.cv-feuille p { margin: 0; line-height: 1.45; }
.cv-photo { display: block; width: 70px; height: 70px; margin: 0 auto 8px; border-radius: 50%; background: #D9A5B3; }
.cv-notes { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 18px; }
.cv-notes li { position: relative; padding-left: 48px; counter-increment: n; line-height: 1.5; }
.cv-notes li::before { content: counter(n); position: absolute; left: 0; top: -8px; color: #8B4F61; font: 400 2.2rem Georgia, serif; }

/* F. Reprendre confiance : un coin chaleureux, de grands caractères */
.guide-reprendre-confiance-ordinateur .scene-page { background: #A85A2F linear-gradient(#92491F, #C7773F); }
.guide-reprendre-confiance-ordinateur .surtitre-page { color: #FFE2BE; }
.guide-reprendre-confiance-ordinateur .scene-page h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.guide-reprendre-confiance-ordinateur .scene-page .accroche { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.guide-reprendre-confiance-ordinateur .section { background: #FFF8EF; font-size: 1.15rem; }
.guide-reprendre-confiance-ordinateur .section.fond-gris, .guide-reprendre-confiance-ordinateur .v-touches { background: #FCEBDD; }
.guide-reprendre-confiance-ordinateur .etiq { background: #A85A2F; font-size: 1rem; }
.guide-reprendre-confiance-ordinateur .section-tete h2::after { display: none; }
.guide-reprendre-confiance-ordinateur .cartes .carte { border: 0; border-radius: 44px; background: #fff; box-shadow: 0 14px 30px rgba(168, 90, 47, .13); }
.guide-reprendre-confiance-ordinateur .cartes .carte p { font-size: 1.14rem; }
.guide-reprendre-confiance-ordinateur .carte .icone { width: 76px; height: 76px; border-radius: 50%; background: #FCEBDD !important; color: #A85A2F !important; }
.guide-reprendre-confiance-ordinateur .etapes li { border-radius: 44px; text-align: center; }
.guide-reprendre-confiance-ordinateur .etape-num { width: 76px; height: 76px; margin-inline: auto; border-radius: 50%; background: #A85A2F !important; font-size: 2rem; }
.guide-reprendre-confiance-ordinateur .etapes p { font-size: 1.14rem; }
.guide-reprendre-confiance-ordinateur .encart-h { border: 0; border-radius: 44px; }
.touches { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.touches > div { flex: 1 1 200px; max-width: 280px; padding: 26px 18px; border-radius: 34px; background: #fff; text-align: center; box-shadow: 0 12px 24px rgba(168, 90, 47, .12); }
.touches kbd { display: inline-grid; place-items: center; min-width: 66px; height: 66px; padding: 0 12px; border: 2px solid #D9A77F; border-bottom-width: 7px; border-radius: 13px; background: #FFF8EF; color: #6E3C1E; font: 700 1.25rem Outfit, sans-serif; }
.touches i { margin: 0 6px; font-style: normal; font-size: 1.5rem; color: #A85A2F; }
.touches p { margin: 14px 0 0; font-size: 1.1rem; }

/* Page d'accueil des guides : les six nouvelles couleurs */
.guide-conseils .cartes .carte:nth-child(6) { --g: #22384F; --gp: #E6ECF2; }
.guide-conseils .cartes .carte:nth-child(7) { --g: #2F4057; --gp: #F3EBD9; }
.guide-conseils .cartes .carte:nth-child(8) { --g: #8A6414; --gp: #FBF1D3; }
.guide-conseils .cartes .carte:nth-child(9) { --g: #4C4A8F; --gp: #E8E8F5; }
.guide-conseils .cartes .carte:nth-child(10) { --g: #8B4F61; --gp: #F6E8EC; }
.guide-conseils .cartes .carte:nth-child(11) { --g: #A85A2F; --gp: #FCEBDD; }

@media (max-width: 900px) {
  .temps-reaction, .kanban { grid-template-columns: minmax(0, 1fr); }
  .cv-etude { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .deux-cles { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .parchemin li { padding-left: 0; }
  .parchemin li::before { position: static; display: block; }
  .sceau { width: 64px; height: 64px; bottom: -18px; font-size: 1.15rem; }
  .guide-refaire-son-cv .cartes .carte { border-right: 0; border-bottom: 1px solid #E3C6CE; }
  .cv-feuille { rotate: 0deg; }
}
.cv-feuille aside h4 { font-size: .68rem; letter-spacing: .03em; overflow-wrap: normal; }

/* G. ATS : le centre de tri, acier, orange signal et étiquettes à code-barres */
.guide-ats-recherche-emploi { --g: #33424D; --gp: #E9EDEF; }
@media (prefers-reduced-motion: no-preference) {
  .g-tapis { animation: gTapis 4s ease-in-out infinite alternate; }
  .g-scan { animation: gScan 3s ease-in-out infinite alternate; }
}
@keyframes gTapis { from { translate: -10px 0; } to { translate: 10px 0; } }
@keyframes gScan { from { translate: 0 0; } to { translate: 0 8px; } }
html:has(.guide-ats-recherche-emploi) { scroll-padding-top: 96px; }
.guide-ats-recherche-emploi .scene-page { background: #33424D; border-bottom: 14px solid; border-image: repeating-linear-gradient(90deg, #E8743B 0 44px, #1F2A31 44px 66px) 14; }
.guide-ats-recherche-emploi .surtitre-page { color: #FFB48C; }
.guide-ats-recherche-emploi .section { background: #F6F7F8; }
.guide-ats-recherche-emploi .section.fond-gris, .guide-ats-recherche-emploi .v-tri { background: #E9EDEF; }
.guide-ats-recherche-emploi .etiq { border-radius: 3px; background: #E8743B; color: #1F2A31; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.guide-ats-recherche-emploi .section-tete h2::after { background: #E8743B; height: 7px; border-radius: 0; }
.guide-ats-recherche-emploi .section a:not(.btn):not(.plus) { color: #B5491A; }
.guide-ats-recherche-emploi .carte .plus { color: #B5491A; }
.guide-ats-recherche-emploi .cartes .carte { border: 0; border-radius: 4px; box-shadow: 0 10px 24px rgba(31, 42, 49, .12); }
.guide-ats-recherche-emploi .cartes .carte::before { content: ""; display: block; height: 22px; background: repeating-linear-gradient(90deg, #33424D 0 3px, transparent 3px 6px, #33424D 6px 8px, transparent 8px 13px); background-color: #fff; border-bottom: 1px solid #DDE2E5; }
.guide-ats-recherche-emploi .carte .icone { border-radius: 4px; background: #33424D !important; color: #FFB48C !important; }
.guide-ats-recherche-emploi .etapes { counter-reset: tri; }
.guide-ats-recherche-emploi .etapes li { border-radius: 4px; border-top: 7px solid #E8743B; }
.guide-ats-recherche-emploi .etape-num { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; background: #33424D !important; color: #FFB48C !important; }
.guide-ats-recherche-emploi .encart-h { border-left: 10px solid #E8743B; border-radius: 4px; background: #fff; }
.guide-ats-recherche-emploi .encart-h .btn { background: #33424D; color: #fff; }
.guide-ats-recherche-emploi .faq .etiq { color: #1F2A31; }
.sommaire-ats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0; list-style: none; }
.sommaire-ats a { display: block; padding: 9px 16px; border: 2px solid #33424D; border-radius: 3px; background: #fff; color: #33424D !important; font-weight: 600; text-decoration: none; }
.sommaire-ats a:hover { background: #33424D; color: #fff !important; }
.tri-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tri-etapes li { position: relative; padding: 22px 16px 22px 24px; background: #33424D; color: #fff; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.tri-etapes b { display: block; margin-bottom: 6px; color: #FFB48C; font-size: 1.1rem; }
.tri-etapes span { font-size: .9rem; line-height: 1.35; display: block; }
.tri-titre { margin-top: 72px; }
.tri-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin-inline: auto; }
.tri-duo article { padding: 24px; border-radius: 4px; background: #fff; box-shadow: 0 10px 24px rgba(31, 42, 49, .12); }
.tri-duo h3 { margin: 0 0 16px; font-size: 1.1rem; letter-spacing: 0; }
.cv-deux { display: grid; grid-template-columns: 38% 1fr; border: 1px solid #DDE2E5; font-size: .9rem; }
.cv-deux > div { padding: 14px; }
.cv-deux > div:first-child { background: #33424D; color: #fff; }
.cv-deux p { margin: 6px 0 0; }
.cv-texte pre { margin: 0; padding: 16px; border-radius: 4px; background: #1F2A31; color: #DDE7EC; font: .86rem/1.65 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-texte mark { background: #E8743B; color: #1F2A31; padding: 0 3px; }
.correspondance { width: 100%; max-width: 860px; margin-inline: auto; border-collapse: collapse; background: #fff; box-shadow: 0 10px 24px rgba(31, 42, 49, .1); }
.correspondance th { padding: 13px 16px; background: #33424D; color: #fff; text-align: left; }
.correspondance td { padding: 13px 16px; border-top: 1px solid #DDE2E5; vertical-align: top; }
.correspondance td:first-child { width: 34%; font-weight: 600; }
.ats-html .wrap { max-width: 980px; }
.ats-html { padding-block: 72px; }
.controle-ats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.controle-ats label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 4px; background: #fff; cursor: pointer; }
.controle-ats input { flex: none; width: 21px; height: 21px; margin-top: 3px; accent-color: #E8743B; }
.controle-ats input:checked + span { color: var(--doux); text-decoration: line-through; }
.guide-conseils .cartes .carte:nth-child(12) { --g: #33424D; --gp: #E9EDEF; }
@media (max-width: 900px) {
  .tri-etapes { grid-template-columns: minmax(0, 1fr); }
  .tri-etapes li { padding: 16px 18px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); padding-bottom: 24px; }
  .tri-duo, .controle-ats { grid-template-columns: minmax(0, 1fr); }
  .correspondance td, .correspondance th { padding: 10px; font-size: .92rem; overflow-wrap: anywhere; }
}
.guide-conseils .cartes .carte h3 a, .guide-conseils .cartes .carte h3 { color: var(--encre) !important; }

/* Accueil : le slogan respire, sur deux lignes dès que la largeur le permet */
.intro h1 { max-width: 24ch; margin: 18px auto 24px; font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.intro p { line-height: 1.55; }
@media (min-width: 701px) { .scene-accueil .couche.soleil { right: 4%; } }

/* Cartes de choix : comme un écran de sélection de jeu, un halo passe de carte en carte jusqu'au choix */
.choix-invite { margin: -8px 0 26px; text-align: center; font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge-f); }
.aiguillage.choisi .choix-invite { visibility: hidden; }
.choix-carte { transition: transform .2s ease, box-shadow .2s ease; }
.choix-carte:hover, .choix-carte:focus-visible { transform: translateY(-9px) scale(1.02); box-shadow: 0 0 0 4px var(--sable), 0 26px 50px rgba(36, 54, 45, .24); }
.choix-carte:hover .choix-fleche { background: var(--sable); }
@media (prefers-reduced-motion: no-preference) {
  .choix-invite { animation: choixInvite 1.5s ease-in-out infinite; }
  .choix-invite span { display: inline-block; animation: choixPointe 1.5s ease-in-out infinite; }
  .aiguillage:not(.choisi) .choix-carte { animation: choixHalo 4.2s ease-in-out infinite; }
  .aiguillage:not(.choisi) .choix-carte:nth-child(2) { animation-delay: 1.4s; }
  .aiguillage:not(.choisi) .choix-carte:nth-child(3) { animation-delay: 2.8s; }
  .aiguillage:not(.choisi) .choix-carte:hover { animation: none; }
  .aiguillage:not(.choisi) .choix-fleche { animation: rebond 1.4s infinite; }
}
@keyframes choixInvite { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes choixPointe { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes choixHalo { 0%, 34%, 100% { box-shadow: 0 8px 22px rgba(36, 54, 45, .08); scale: 1; } 12%, 22% { box-shadow: 0 0 0 4px var(--sable), 0 0 38px 6px rgba(200, 170, 140, .75); scale: 1.025; } }

/* Menu : icônes, barre en verre et sous-menus illustrés */
@media (min-width: 1001px) {
  .nav > ul { gap: 2px; padding: 5px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); transition: background .3s, border-color .3s; }
  .entete.plein .nav > ul { border-color: #EADFD3; background: #fff; box-shadow: 0 6px 18px rgba(36, 54, 45, .07); }
  .nav a.niv1 { gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: .98rem; transition: background .2s, color .2s; }
  .nav a.niv1:hover, .nav li:focus-within > a.niv1 { background: rgba(255, 255, 255, .17); }
  .nav a.niv1[aria-current] { background: #fff; color: var(--encre); box-shadow: none; }
  .entete.plein .nav a.niv1[aria-current] { background: var(--sauge-f); color: #fff; }
  .nav li:has(.sous) > a.niv1::after { transition: transform .2s; }
  .nav li:hover > a.niv1::after, .nav li:focus-within > a.niv1::after { transform: rotate(225deg) translate(-2px, -2px); }
  .sous { min-width: 310px; padding: 10px; border-radius: 22px; }
  .sous::after { content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; background: #fff; rotate: 45deg; translate: -50% 0; border-radius: 3px; }
  .sous a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; font-weight: 500; transition: background .15s, translate .15s; }
  .sous a:hover { background: var(--creme); translate: 3px 0; }
  .nav .btn-contact { transition: transform .2s, box-shadow .2s, background .2s; }
  .nav .btn-contact:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
}
/* Menu mobile : les mêmes icônes */
.panneau a { align-items: center; }
.panneau > ul > li > a, .panneau summary a, .panneau ul ul a { display: flex; gap: 12px; }

@media (min-width: 701px) and (max-width: 1300px) { .scene-accueil .couche.soleil { top: 92px; right: 2%; width: 112px; height: 112px; } }

/* ===== Coaching : le Belvédère devient un monde, de l'aube au couchant ===== */
.u-coaching { background: transparent; }
.belv-monde { position: fixed; inset: 0; z-index: -1; overflow: hidden; --p: 0; }
.belv-monde > i { position: absolute; inset: 0; display: block; }
.belv-ciel { background: linear-gradient(#263F35 0%, #456656 62%, #A9A58D 84%, #EBCFAE 100%); }
.belv-jour { background: linear-gradient(#9FC5BD 0%, #D7E8DF 52%, #F7EFE0 100%); opacity: calc(var(--p) * 2.6); }
.belv-soir { background: linear-gradient(#5F5C72 0%, #C98F7A 56%, #F2C79A 100%); opacity: calc((var(--p) - .62) * 2.6); }
.belv-monde > .belv-soleil { inset: auto; left: 74%; top: calc(58% - sin(var(--p) * 3.14rad) * 44%); width: clamp(90px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%; background: #F9DFC0; box-shadow: 0 0 70px 26px rgba(249, 223, 192, .55); }
.belv-colline { position: absolute; left: 0; bottom: 0; width: 100%; height: 44vh; display: block; }
.belv-colline.c1 { translate: 0 calc(var(--p) * 60px); }
.belv-colline.c2 { translate: 0 calc(var(--p) * 120px); }
.belv-colline.c3 { translate: 0 calc(var(--p) * 190px); }
.belv-monde > .belv-brume { inset: auto -10% 16vh; height: 18vh; background: linear-gradient(90deg, transparent, rgba(251, 247, 242, .72) 28%, rgba(251, 247, 242, .4) 62%, transparent); filter: blur(14px); }
.belv-monde b { position: absolute; top: -24px; width: 13px; height: 10px; border-radius: 70% 10% 70% 10%; background: #F2C1BF; opacity: .85; }
.belv-monde b:nth-of-type(1) { left: 6%; } .belv-monde b:nth-of-type(2) { left: 17%; background: #FBEAE7; } .belv-monde b:nth-of-type(3) { left: 29%; } .belv-monde b:nth-of-type(4) { left: 41%; background: #E8A9A6; } .belv-monde b:nth-of-type(5) { left: 52%; }
.belv-monde b:nth-of-type(6) { left: 63%; background: #FBEAE7; } .belv-monde b:nth-of-type(7) { left: 72%; } .belv-monde b:nth-of-type(8) { left: 81%; background: #E8A9A6; } .belv-monde b:nth-of-type(9) { left: 90%; } .belv-monde b:nth-of-type(10) { left: 97%; background: #FBEAE7; }
@media (prefers-reduced-motion: no-preference) {
  .belv-monde b { animation: belvPetale 15s linear infinite; }
  .belv-monde b:nth-of-type(2n) { animation-duration: 19s; animation-delay: -6s; } .belv-monde b:nth-of-type(3n) { animation-duration: 23s; animation-delay: -11s; } .belv-monde b:nth-of-type(5n) { animation-delay: -3s; } .belv-monde b:nth-of-type(7n) { animation-delay: -14s; }
  .belv-monde > .belv-brume { animation: belvBrume 22s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .belv-monde b { display: none; } .belv-monde { --p: .3 !important; } }
@keyframes belvPetale { to { transform: translate(-16vw, 112vh) rotate(620deg); } }
@keyframes belvBrume { from { translate: -5% 0; } to { translate: 5% 0; } }
/* Tout flotte sur le paysage, comme du papier posé sur une estampe */
.u-coaching .scene-page { background: transparent; padding-bottom: 150px; }
.u-coaching .scene-page .couche { display: none; }
.u-coaching main section.section { background: transparent; }
.u-coaching main section.section > .wrap { padding: clamp(28px, 5vw, 62px); border-radius: 38px; background: rgba(251, 247, 242, .9); backdrop-filter: blur(7px); box-shadow: 0 24px 60px rgba(36, 54, 45, .12); }
.u-coaching main .surtitre-page { color: #F7E5CF; letter-spacing: .14em; }
.u-coaching .chemin { display: none; }
.u-coaching main section.v-sentiers > .wrap { background: transparent; backdrop-filter: none; box-shadow: none; padding-inline: 0; }
.u-coaching main .v-sentiers .section-tete { padding: 26px 30px; border-radius: 30px; background: rgba(251, 247, 242, .9); backdrop-filter: blur(7px); }
/* Trois sentiers, présentés comme des rouleaux suspendus */
.sentiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.sentier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 44px 28px 38px; background: #FFFDF8; box-shadow: 0 22px 44px rgba(36, 54, 45, .2); transition: rotate .4s, translate .4s; }
.sentier:nth-child(2) { margin-top: 42px; }
.sentier:nth-child(3) { margin-top: 84px; }
.sentier::before, .sentier::after { content: ""; position: absolute; left: -10px; right: -10px; height: 13px; border-radius: 8px; background: linear-gradient(#A98660, #7D5E40); }
.sentier::before { top: -6px; } .sentier::after { bottom: -6px; }
.sentier:hover { rotate: -.8deg; translate: 0 -6px; }
.hanko { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: #A65A52; color: #FFF3EE; font-size: 1.7rem; rotate: -5deg; }
.sentier h3 { margin: 6px 0 0; font-size: 1.65rem; }
.sentier p { margin: 0; color: var(--doux); }
.sentier ul { margin: 2px 0 8px; padding: 0; list-style: none; display: grid; gap: 7px; }
.sentier li { padding-left: 24px; position: relative; }
.sentier li::before { content: ""; position: absolute; left: 3px; top: .52em; width: 9px; height: 9px; border-radius: 50%; background: #E8A9A6; }
.sentier .btn { justify-content: center; }
.sentier-lien { text-align: center; font-size: .95rem; }
.sentier-outils { background: #FFF8EC; }
/* La montée : les étapes grimpent vers la droite, chacune avec sa lanterne */
.u-coaching .etapes::before { display: none; }
@media (min-width: 801px) {
  .u-coaching .etapes { align-items: start; }
  .u-coaching .etapes li:nth-child(1) { margin-top: 138px; } .u-coaching .etapes li:nth-child(2) { margin-top: 92px; } .u-coaching .etapes li:nth-child(3) { margin-top: 46px; }
}
.u-coaching .etape-num { filter: drop-shadow(0 0 13px rgba(242, 193, 110, .85)); }
/* Une pause pour souffler */
.belv-souffle { padding-block: 70px; }
.u-coaching main section.belv-souffle > .wrap { background: rgba(47, 74, 62, .92); color: #FBF7F2; text-align: center; }
.belv-souffle h2 { color: #fff; }
.belv-souffle p { margin: 0 auto; max-width: 46ch; }
.souffle { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin: 0 auto 26px; }
.souffle i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #F9DFC0, #E8A9A6 72%); opacity: .75; }
.souffle span { position: relative; font-weight: 700; color: #24362D; }
.souffle span + span { position: absolute; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .souffle i { animation: belvSouffle 10s ease-in-out infinite; }
  .souffle span:first-of-type { animation: belvMot 10s linear infinite; }
  .souffle span + span { animation: belvMot 10s linear infinite -5s; }
}
@keyframes belvSouffle { 0%, 100% { scale: .55; } 50% { scale: 1; } }
@keyframes belvMot { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 900px) {
  .sentiers { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sentier:nth-child(n) { margin-top: 0; }
  .u-coaching main section.section > .wrap { border-radius: 26px; }
  .u-coaching main section.v-sentiers > .wrap { padding-inline: 16px; }
}

/* Sous-menus : petites illustrations pleines */
@media (min-width: 1001px) {
  .sous a { gap: 14px; padding: 9px 12px; }
  .menu-illu { flex: none; width: 34px; height: 34px; transition: rotate .2s, scale .2s; }
  .sous a:hover .menu-illu { rotate: -6deg; scale: 1.14; }
}
@media (max-width: 1000px) { .menu-illu { display: none; } }
/* Coaching : en-tête lisible et moins haut */
.u-coaching .scene-page h1 { max-width: 22ch; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.06; }
.u-coaching .scene-page .accroche { color: #fff; text-shadow: 0 1px 12px rgba(20, 40, 30, .55); }

/* Coaching : montagne interactive */
.montagne { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.montagne-scene { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 22px 44px rgba(36, 54, 45, .18); }
.montagne-scene svg.m-fond { display: block; width: 100%; height: auto; }
.m-trace { fill: none; stroke: #A65A52; stroke-width: 6; stroke-linecap: round; }
.m-drapeau { opacity: 0; transform-origin: 610px 92px; scale: .3; transition: opacity .4s .9s, scale .4s .9s; }
.montagne.sommet .m-drapeau { opacity: 1; scale: 1; }
.m-lueur { opacity: 0; transition: opacity .8s .8s; }
.montagne.sommet .m-lueur { opacity: 1; }
.halte { position: absolute; left: 12%; top: 80%; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; translate: -21px -21px; }
.halte span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid #fff; border-radius: 50%; background: #6F8F7D; color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(20, 40, 30, .3); transition: background .25s, scale .2s; }
.halte em { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .93); color: var(--encre); font-style: normal; font-weight: 600; font-size: .9rem; box-shadow: 0 4px 12px rgba(20, 40, 30, .16); }
.halte.atteinte span { background: #A65A52; }
.halte:hover span, .halte:focus-visible span { scale: 1.14; }
.halte:focus-visible { outline: 3px solid #E9C98F; outline-offset: 3px; border-radius: 999px; }
.halte:not(.atteinte) span { animation: mAppel 2.2s ease-in-out infinite; }
.halte[aria-pressed="true"] em { background: #A65A52; color: #fff; }
.m-marcheuse { position: absolute; z-index: 3; width: 38px; height: 54px; margin: -68px 0 0 -19px; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(20, 40, 30, .35)); }
.m-marcheuse svg { display: block; width: 100%; height: 100%; }
.halte-texte { display: none; }
.halte-texte.actif { display: block; animation: apparait .45s ease; }
html:not(.js) .halte-texte { display: block; }
.halte-texte small { display: block; margin-bottom: 8px; color: #A65A52; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.halte-texte h3 { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.halte-texte p { margin: 0 0 8px; color: var(--doux); }
.halte-texte p b { color: var(--encre); }
.montagne-nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.montagne-nav button[data-prec] { flex: none; width: 48px; height: 48px; border: 2px solid var(--sauge-f); border-radius: 50%; background: none; color: var(--sauge-f); font-size: 1.15rem; cursor: pointer; }
.montagne-nav button[data-prec]:disabled { opacity: .3; cursor: default; }
.montagne-nav [hidden] { display: none; }
@keyframes mAppel { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 201, 143, .9); } 60% { box-shadow: 0 0 0 13px rgba(233, 201, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .halte:not(.atteinte) span { animation: none; } }
@media (max-width: 860px) {
  .montagne { grid-template-columns: minmax(0, 1fr); }
  .halte em { display: none; }
  .halte[aria-pressed="true"] em { display: block; position: absolute; left: 50%; bottom: 46px; translate: -50% 0; white-space: nowrap; }
  .halte:first-of-type[aria-pressed="true"] em { left: 0; translate: 0; }
  .halte span { width: 36px; height: 36px; }
  .halte { translate: -18px -18px; }
  .m-marcheuse { width: 28px; height: 40px; margin: -52px 0 0 -14px; }
}

/* Coaching : les choix, par thèmes, avec de vraies cases à cocher */
.besoins { display: block; }
.besoins legend { display: block; width: 100%; margin-bottom: 18px; font: 800 clamp(1.35rem, 2.4vw, 1.75rem)/1.1 var(--titre); color: var(--encre); letter-spacing: -.02em; }
.besoins legend small { display: block; margin-top: 6px; font: 500 .95rem var(--texte); color: var(--doux); letter-spacing: 0; }
.besoins-grille { columns: 2; column-gap: 16px; }
.besoins-groupe { display: block; break-inside: avoid; margin-bottom: 16px; padding: 18px 16px 12px; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(36, 54, 45, .06); }
.besoins-groupe strong { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--encre); font: 700 1.03rem var(--titre); }
.besoins-groupe strong::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: #A65A52; rotate: 45deg; }
.nuage { display: grid; gap: 2px; }
.bulle-choix { display: block; }
.bulle-choix span { display: flex; gap: 12px; align-items: flex-start; padding: 9px 8px; border-radius: 11px; background: none; box-shadow: none; font-weight: 500; line-height: 1.3; transition: background .15s, color .15s; }
.bulle-choix span::before { width: 22px; height: 22px; margin-top: -1px; border: 2px solid #A8BBAE; border-radius: 7px; background: #fff center / 15px no-repeat; transform: none; transition: background-color .15s, border-color .15s; }
.bulle-choix:hover span { background: var(--sauge-p); box-shadow: none; transform: none; }
.bulle-choix input:checked + span { background: var(--sauge-p); color: var(--encre); box-shadow: none; font-weight: 600; }
.bulle-choix input:checked + span::before { border-color: var(--sauge-f); background-color: var(--sauge-f); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.500 3.200 3.200L13 4.800' fill='none' stroke='%23fff' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.besoins-barre { justify-content: space-between; margin-top: 8px; padding: 9px 10px 9px 22px; border-radius: 999px; background: #2F4A3E; box-shadow: 0 14px 30px rgba(36, 54, 45, .28); }
.besoins-compte { flex: 1; padding: 0; background: none; box-shadow: none; color: #fff; font-weight: 500; }
.besoins-compte strong { font-size: 1.15rem; color: #F2CFA6; }
.besoins-barre .btn-s { background: transparent; border: 1px solid rgba(255, 255, 255, .45); box-shadow: none; color: #fff; }
.besoins-barre .btn-v { background: var(--sable); box-shadow: none; color: var(--encre); padding: 10px 18px; }
@media (max-width: 760px) {
  .besoins-grille { columns: 1; }
  .besoins-barre { padding-left: 16px; gap: 6px; }
  .besoins-barre .btn-s { padding-inline: 12px; }
}

/* ===== Entreprises : votre entreprise, étage par étage ===== */
.u-entreprises .chemin { display: none; }
.u-entreprises .scene-page { padding-bottom: 150px; overflow: visible; }
@media (min-width: 861px) { .u-entreprises .scene-page .wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; align-items: start; } }
.u-entreprises .scene-page h1 { max-width: 15ch; font-size: clamp(2.5rem, 4.8vw, 4.6rem); line-height: 1.04; }
.immeuble { position: relative; z-index: 6; width: min(100%, calc((100svh - 118px) * .831)); min-width: min(100%, 340px); margin-left: auto; }
.imm-batiment { position: relative; }
.imm-batiment > svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 44px rgba(20, 32, 26, .32)); }
.imm-cabine { position: absolute; left: 46.1%; top: 11.7%; width: 10.2%; margin-top: .5%; transition: top 1.2s cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
.imm-cabine svg { display: block; width: 100%; height: auto; }
.imm-etage { position: absolute; left: 9.4%; width: 81.2%; height: 14.3%; display: flex; align-items: flex-end; gap: 8px; padding: 0 0 6px 10px; background: transparent; color: var(--encre); text-decoration: none; transition: background .25s; }
.imm-etage:hover, .imm-etage.actif { background: rgba(233, 184, 114, .22); }
.imm-etage:focus-visible { outline: 3px solid #A65A52; outline-offset: -3px; }
.imm-etage span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #3E5A4B; color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 3px 8px rgba(20, 40, 30, .25); transition: background .2s, scale .2s; }
.imm-etage em { padding: 3px 11px; border-radius: 999px; background: #fff; color: var(--encre); font-style: normal; font-weight: 600; font-size: .84rem; box-shadow: 0 3px 8px rgba(20, 40, 30, .16); transition: background .2s, color .2s; }
.imm-etage:hover span, .imm-etage.actif span { background: #A65A52; scale: 1.12; }
.imm-etage.actif em, .imm-etage:hover em { background: #A65A52; color: #fff; }
.imm-etincelle { transform-box: fill-box; transform-origin: center; }
.imm-barres rect { transform-box: fill-box; transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .imm-etincelle { animation: immEtincelle 2.6s ease-in-out infinite; }
  .imm-barres rect { animation: immBarres 3.2s ease-in-out infinite alternate; }
  .imm-barres rect:nth-child(2) { animation-delay: -.8s; } .imm-barres rect:nth-child(3) { animation-delay: -1.6s; } .imm-barres rect:nth-child(4) { animation-delay: -2.4s; }
}
@media (prefers-reduced-motion: reduce) { .imm-cabine { transition: none; } }
@keyframes immEtincelle { 0%, 100% { scale: .75; opacity: .6; } 50% { scale: 1.1; opacity: 1; } }
@keyframes immBarres { from { scale: 1 .78; } to { scale: 1 1; } }
/* L'ascenseur de la page */
.ascenseur { position: fixed; z-index: 40; right: 16px; top: 50%; translate: 0 -50%; display: grid; gap: 5px; padding: 7px; border-radius: 999px; background: #3E5A4B; box-shadow: 0 12px 26px rgba(36, 54, 45, .3); }
.ascenseur a { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none; transition: background .2s; }
.ascenseur a b { font-size: .92rem; }
.ascenseur a span { position: absolute; right: 44px; padding: 5px 13px; border-radius: 999px; background: #fff; color: var(--encre); box-shadow: 0 6px 16px rgba(36, 54, 45, .2); font-size: .85rem; font-weight: 600; white-space: nowrap; opacity: 0; translate: 6px 0; pointer-events: none; transition: .18s; }
.ascenseur a:hover span, .ascenseur a:focus-visible span, .ascenseur a.actif span { opacity: 1; translate: 0 0; }
.ascenseur a:hover, .ascenseur a.actif { background: var(--sable); color: var(--encre); }
@media (max-width: 1100px) { .ascenseur { display: none; } }
/* Chaque partie de la page est un étage */
.u-entreprises main section.section { position: relative; scroll-margin-top: 90px; }
.u-entreprises main section.section:not(.serre)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--sauge-f); }
.u-entreprises main .etiq { background: #3E5A4B; color: #fff; font-weight: 600; }
/* Les solutions : des portes de bureau */
/* La méthode : un escalier qui monte */
.u-entreprises .etapes-section .etapes::before { display: none; }
@media (min-width: 801px) {
  .u-entreprises .etapes { align-items: start; gap: 14px; }
  .u-entreprises .etapes li:nth-child(1) { margin-top: 126px; } .u-entreprises .etapes li:nth-child(2) { margin-top: 84px; } .u-entreprises .etapes li:nth-child(3) { margin-top: 42px; }
}
.u-entreprises .etapes li { padding: 22px; border-radius: 22px; background: #fff; border-bottom: 10px solid var(--sauge-f); box-shadow: 0 12px 24px rgba(36, 54, 45, .08); }
/* Les engagements : des fenêtres éclairées */
@media (max-width: 860px) {
  .immeuble { margin: 18px auto 0; }
  .imm-etage span { width: 26px; height: 26px; }
  .u-entreprises .scene-page { padding-bottom: 130px; }
  .imm-etage em { font-size: .74rem; padding: 2px 9px; }
  }

/* Coaching : les outils d'accompagnement */
.outils-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; align-items: center; }
.outils-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.belv-outils h2 { margin-top: 12px; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.belv-outils p { color: var(--doux); }
.outils-noms { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; padding: 0; list-style: none; }
.outils-noms li { padding: 6px 13px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-size: .92rem; font-weight: 600; }
@media (max-width: 860px) { .outils-duo { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
/* Coaching : le bouton d'ambiance sonore, au-dessus de la boussole */
.belv-son { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 14px 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #3E5A4B; font: 600 .84rem var(--texte); box-shadow: 0 6px 16px rgba(36, 54, 45, .18); cursor: pointer; }
.belv-son i { display: block; width: 3px; height: 8px; border-radius: 3px; background: #8AA997; }
.belv-son i:nth-child(2) { height: 13px; }
.belv-son span { margin-left: 7px; }
.belv-son[aria-pressed="true"] { background: #3E5A4B; color: #fff; }
.belv-son[aria-pressed="true"] i { background: #F2CFA6; }
@media (prefers-reduced-motion: no-preference) {
  .belv-son[aria-pressed="true"] i { animation: belvOnde 1.5s ease-in-out infinite; }
  .belv-son[aria-pressed="true"] i:nth-child(2) { animation-delay: -.5s; } .belv-son[aria-pressed="true"] i:nth-child(3) { animation-delay: -1s; }
}
@keyframes belvOnde { 0%, 100% { scale: 1 .7; } 50% { scale: 1 1.4; } }
@media (max-width: 600px) { .belv-son { right: 12px; bottom: 14px; } .belv-son span { display: none; } .belv-son { padding-inline: 12px; } }

/* Entreprises : la descente, un monde par étage */
.etage { position: relative; scroll-margin-top: 84px; min-height: min(100svh, 880px); display: flex; flex-direction: column; justify-content: center; gap: 34px; padding: 84px 0 34px; border-top: 14px solid #3E5A4B; overflow: hidden; }
.etage > .wrap { position: relative; z-index: 1; }
.etage-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.etage-4 .etage-texte, .etage-2 .etage-texte { order: 2; }
.etage-num { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #3E5A4B; color: #fff; font-weight: 600; font-size: .92rem; }
.etage-num b, .etage-rez b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E9B872; color: var(--encre); }
.etage h2 { margin: 16px 0 12px; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.06; }
.etage-texte ul { display: grid; gap: 7px; margin: 16px 0 20px; padding: 0; list-style: none; font-weight: 500; }
.etage-texte li { position: relative; padding-left: 26px; }
.etage-texte li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: #A65A52; }
.etage-lien { color: var(--sauge-f); font-weight: 700; }
.etage-jeu { position: relative; overflow: hidden; padding: 26px; border-radius: 30px; background: #fff; color: var(--encre); box-shadow: 0 24px 50px rgba(36, 54, 45, .16); }
.jeu-titre { margin: 0 0 16px; font: 800 1.25rem/1.15 var(--titre); color: inherit; }
.jeu-action { margin-top: 18px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.jeu-suite { margin: 14px 0 0; font-weight: 600; animation: apparait .45s ease; }
.jeu-suite[hidden] { display: none; }
.etage-suite { position: relative; z-index: 1; align-self: center; display: inline-flex; gap: 10px; padding: 11px 24px; border-radius: 999px; background: #3E5A4B; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 22px rgba(36, 54, 45, .22); }
.etage-suite span { display: inline-block; animation: rebond 1.6s infinite; }
.etage-suite:hover { background: #A65A52; }
/* Portes de l'ascenseur */
.portes { display: none; }
.js .portes { position: absolute; inset: 0; z-index: 8; display: block; pointer-events: none; overflow: hidden; }
.js .portes i { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #6F8F7D, #8AA997); transition: translate 1.1s .2s cubic-bezier(.65, 0, .35, 1); }
.js .portes i:first-child { left: 0; box-shadow: inset -3px 0 0 #3E5A4B; }
.js .portes i:last-child { right: 0; box-shadow: inset 3px 0 0 #3E5A4B; }
.etage.ouvert .portes i:first-child { translate: -101% 0; }
.etage.ouvert .portes i:last-child { translate: 101% 0; }
/* 5e : l'atelier */
.etage-5 { background: #F6E9D8; }
.ruban { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: repeating-linear-gradient(90deg, #5E4632 0 2px, transparent 2px 12px) bottom/100% 11px no-repeat, repeating-linear-gradient(90deg, #5E4632 0 3px, transparent 3px 60px) bottom/100% 19px no-repeat, #E9B872; }
.atelier { border: 3px dashed #C8AA8C; }
.atelier-groupe { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.atelier-groupe small { flex: 0 0 100%; color: #A65A52; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.atelier-groupe button { padding: 7px 13px; border: 2px solid #C8AA8C; border-radius: 999px; background: #fff; color: #5E4632; font: 600 .93rem var(--texte); cursor: pointer; transition: background .2s, color .2s; }
.atelier-groupe button:first-letter { text-transform: uppercase; }
.atelier-groupe button[aria-pressed="true"] { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.atelier-fiche { position: relative; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #FFF8EC; }
.atelier-fiche small { color: #A65A52; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.atelier-phrase { min-height: 2.6em; margin: 4px 42px 12px 0; font: 700 1.1rem/1.3 var(--titre); }
.atelier-phrase:first-letter { text-transform: uppercase; }
.ciseaux { position: absolute; right: 14px; top: 14px; width: 38px; }
/* 4e : la salle des jauges */
.etage-4 { background: radial-gradient(circle at 75% 40%, #4F6B5B, #2F4A3C 70%); color: #fff; }
.etage-4 h2, .etage-4 .etage-lien { color: #fff; }
.etage-4 .etage-num { background: rgba(255, 255, 255, .14); }
.etage-4 li::before { background: #E9B872; }
.etage-4 .etage-texte p { color: rgba(255, 255, 255, .86); }
.jauges { background: #2A4135; color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 24px 50px rgba(0, 0, 0, .25); }
.jauges-salle { position: relative; height: 372px; }
.jeu-jauge { position: absolute; left: 50%; top: 0; width: 150px; height: 83px; translate: -50% 0; }
.jauge-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease; }
.jauge-aiguille { transform-origin: 100px 100px; transition: rotate 1.2s cubic-bezier(.65, 0, .35, 1); }
.classe .jauge-arc { stroke-dashoffset: 18; }
.classe .jauge-aiguille { rotate: 110deg; }
.zone { position: absolute; left: var(--z); top: 31%; translate: -50% 8px; padding: 3px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .84rem; font-weight: 600; opacity: 0; transition: opacity .5s, translate .5s; }
.classe .zone { opacity: 1; translate: -50% 0; transition-delay: .9s; }
.perso { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 36px; margin: 10px 0 0 -14px; border-radius: 13px 13px 7px 7px; background: #C9D8CE; transition: left 1s cubic-bezier(.65, 0, .35, 1), top 1s cubic-bezier(.65, 0, .35, 1), background .6s; }
.perso::before { content: ""; position: absolute; left: 50%; top: -17px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #F3D7B6; }
.classe .perso { left: var(--gx); top: var(--gy); background: var(--gc); transition-delay: .3s; }
/* 3e : le bureau d'enquête */
.etage-3 { background: radial-gradient(#E6DCCB 1.5px, transparent 1.5px) 0 0/22px 22px, #FBF7F2; }
.enquete-bureau { position: relative; height: 300px; border-radius: 20px; overflow: hidden; touch-action: pan-y; cursor: none; }
.enquete-bureau > svg { width: 100%; height: 100%; display: block; }
.enq-indice { position: absolute; z-index: 2; translate: -50% -50%; display: block; padding: 0; border: 0; background: none; font: inherit; cursor: none; }
.enq-indice span { display: grid; place-items: center; width: 34px; height: 34px; margin: auto; border: 3px solid #fff; border-radius: 50%; background: #A65A52; color: #fff; font-weight: 800; box-shadow: 0 5px 12px rgba(36, 54, 45, .3); animation: mAppel 2.2s ease-in-out infinite; }
.enq-indice em { position: absolute; left: 50%; top: 100%; width: 142px; margin-top: 5px; padding: 5px 10px; border-radius: 13px; background: #fff; color: var(--encre); font-style: normal; font-weight: 600; font-size: .84rem; line-height: 1.2; box-shadow: 0 6px 14px rgba(36, 54, 45, .22); opacity: 0; translate: -50% 6px; transition: opacity .3s, translate .3s; pointer-events: none; }
html:not(.js) .enq-indice em, .enq-indice.trouve em { opacity: 1; translate: -50% 0; }
.enq-indice.trouve span { background: #4F6B5B; animation: none; }
.loupe { position: absolute; z-index: 3; left: 72%; top: 66%; width: 104px; height: 104px; translate: -50% -50%; border: 8px solid #5E4632; border-radius: 50%; background: rgba(255, 255, 255, .2); backdrop-filter: saturate(1.5) brightness(1.08); box-shadow: 0 10px 22px rgba(36, 54, 45, .3); pointer-events: none; }
.loupe::after { content: ""; position: absolute; left: 83%; top: 83%; width: 48px; height: 14px; border-radius: 7px; background: #5E4632; rotate: 45deg; transform-origin: 0 50%; }
.enquete-compte { margin: 14px 0 0; font-weight: 600; }
.enquete-compte b { color: #A65A52; font-size: 1.25rem; }
/* 2e : la salle des machines */
.etage-2 { background: #F2DDD2; }
.etage-2 .engrenages { position: absolute; right: -60px; top: -40px; width: 420px; pointer-events: none; }
.eng1, .eng2 { transform-box: fill-box; transform-origin: center; }
.machine-salle { position: relative; height: 310px; border-radius: 20px; background: #FBF1EA; overflow: hidden; }
.machine-cadre { position: absolute; inset: 14px; border: 6px solid #3E5A4B; border-radius: 20px; opacity: 0; scale: 1.12; transition: opacity .5s, scale .5s; }
.cadre .machine-cadre { opacity: 1; scale: 1; }
.robot { position: absolute; left: 50%; top: 34px; width: 126px; translate: -50% 0; }
.robot-oeil { fill: #A65A52; transition: fill .4s; }
.robot-antenne { fill: #A65A52; transition: fill .4s; }
.cadre .robot-oeil, .cadre .robot-antenne { fill: #4F6B5B; }
.etiquette { position: absolute; display: block; padding: 6px 12px; border-radius: 999px; background: #A65A52; color: #fff; font-weight: 600; font-size: .86rem; white-space: nowrap; transition: left .8s, top .8s, rotate .8s, background .5s, translate .8s; }
.etiquette .avec { display: none; }
.e1 { left: 7%; top: 14%; rotate: -9deg; } .e2 { left: 56%; top: 68%; rotate: 8deg; } .e3 { left: 8%; top: 74%; rotate: 5deg; }
.cadre .etiquette { background: #4F6B5B; rotate: 0deg; left: 50%; translate: -50% 0; }
.cadre .etiquette .sans { display: none; } .cadre .etiquette .avec { display: inline; }
.cadre .e1 { top: 170px; } .cadre .e2 { top: 206px; } .cadre .e3 { top: 242px; }
.cadre .robot { top: 22px; width: 112px; }
@media (prefers-reduced-motion: no-preference) {
  .eng1 { animation: tourne 26s linear infinite; } .eng2 { animation: tourne 18s linear infinite reverse; }
  .machine:not(.cadre) .etiquette { animation: agite 1.6s ease-in-out infinite alternate; }
  .machine:not(.cadre) .e2 { animation-delay: -.5s; } .machine:not(.cadre) .e3 { animation-delay: -1s; }
}
@keyframes tourne { to { rotate: 360deg; } }
@keyframes agite { to { translate: 0 -9px; } }
/* 1er : la salle de remise */
.etage-1 { background: #F7E7C6; }
.fanions { position: absolute; left: 0; top: 0; width: 100%; height: 60px; }
.remise-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.remise-modules button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border: 2px solid #C8AA8C; border-radius: 999px; background: #FFF8EC; color: var(--encre); font: 600 .93rem var(--texte); cursor: pointer; transition: background .2s, color .2s; }
.remise-modules b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E9B872; color: var(--encre); font-size: .82rem; }
.remise-modules button[aria-pressed="true"] { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.remise-barre { height: 14px; margin-top: 18px; border-radius: 999px; background: #F2E5D6; overflow: hidden; }
.remise-barre i { display: block; width: 0; height: 100%; border-radius: 999px; background: #E9B872; transition: width .5s ease; }
.remise-compte { margin: 8px 0 0; font-weight: 600; }
.remise-compte b { font-size: 1.25rem; color: #A65A52; }
.medaille { position: absolute; right: 22px; bottom: 16px; width: 92px; opacity: 0; scale: 2.2; rotate: -18deg; pointer-events: none; transition: opacity .25s, scale .4s cubic-bezier(.3, 1.6, .5, 1), rotate .4s; }
.medaille svg { display: block; width: 100%; }
.obtenu .medaille { opacity: 1; scale: 1; rotate: 0deg; }
.medaille i { position: absolute; left: 50%; top: 40%; width: 9px; height: 9px; border-radius: 3px; background: #A65A52; opacity: 0; }
.medaille i:nth-of-type(even) { background: #6F8F7D; }
.obtenu .medaille i { animation: confetti 1s ease-out .25s; }
.medaille i:nth-of-type(1) { --cx: -80px; --cy: -70px; } .medaille i:nth-of-type(2) { --cx: -40px; --cy: -100px; } .medaille i:nth-of-type(3) { --cx: 10px; --cy: -110px; } .medaille i:nth-of-type(4) { --cx: 50px; --cy: -80px; } .medaille i:nth-of-type(5) { --cx: -100px; --cy: -20px; } .medaille i:nth-of-type(6) { --cx: -60px; --cy: 10px; }
@keyframes confetti { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: var(--cx) var(--cy); rotate: 200deg; } }
.remise .jeu-suite { margin-right: 100px; }
/* L'escalier, le hall, la bibliothèque, puis l'accueil */
.etage-rez { position: relative; padding: 44px 16px 26px; border-top: 14px solid #3E5A4B; background: #E3ECE6; text-align: center; }
.etage-rez svg { display: block; width: min(100%, 620px); margin: 0 auto; }
.etage-rez p { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font: 700 1.2rem var(--titre); }
@media (prefers-reduced-motion: reduce) { .js .portes { display: none; } .etage-suite span { animation: none; } .enq-indice span { animation: none; } }
@media (max-width: 860px) {
  .etage { min-height: 0; padding: 62px 0 28px; }
  .etage-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .etage-4 .etage-texte, .etage-2 .etage-texte { order: 0; }
  .etage-jeu { padding: 18px; }
  .etage-2 .engrenages { width: 260px; opacity: .6; }
  .enq-indice em { width: 122px; font-size: .78rem; }
  .loupe { width: 84px; height: 84px; }
  .etiquette { font-size: .78rem; padding: 5px 10px; }
  .e2 { left: 42%; }
  .zone { font-size: .76rem; padding: 2px 8px; }
}

/* Coaching : les sentiers, et l'invitation à continuer */
.belv-suite { display: inline-flex; gap: 10px; padding: 12px 24px; border-radius: 999px; background: #A65A52; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 22px rgba(36, 54, 45, .25); }
.belv-suite span { display: inline-block; animation: rebond 1.6s infinite; }
.belv-suite:hover { background: #3E5A4B; }
.sentiers-guide { max-width: 620px; margin: 76px auto 0; padding: 26px 30px; border-radius: 30px; background: rgba(251, 247, 242, .9); backdrop-filter: blur(7px); text-align: center; }
.sentiers-guide h3 { margin: 0 0 6px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sentiers-guide p { margin: 0 0 16px; color: var(--doux); }
.belv-souffle .belv-suite, .belv-outils .belv-suite { margin-top: 24px; }
.belv-outils > .wrap { text-align: left; }
/* Coaching : préparer son sac */
.u-coaching main section.belv-sac > .wrap { background: transparent; backdrop-filter: none; box-shadow: none; padding-inline: 0; }
.u-coaching main .belv-sac .section-tete { padding: 26px 30px; border-radius: 30px; background: rgba(251, 247, 242, .9); backdrop-filter: blur(7px); }
.sac-jeu { max-width: 880px; margin: 30px auto 0; text-align: center; }
.sac-scene { position: relative; height: 470px; }
.sac-dos { position: absolute; left: 50%; top: 44%; width: 250px; translate: -50% 0; filter: drop-shadow(0 22px 26px rgba(20, 40, 30, .32)); }
.hop .sac-dos { animation: sacHop .5s ease; }
@keyframes sacHop { 40% { translate: -50% -14px; rotate: -3deg; } 70% { translate: -50% 0; rotate: 2deg; } }
.sac-objet { position: absolute; left: var(--x); top: var(--y); width: 118px; translate: -50% 0; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transition: left .55s cubic-bezier(.6, 0, .4, 1), top .55s cubic-bezier(.6, 0, .4, 1), scale .55s, opacity .2s .4s; }
.sac-objet svg { width: 88px; height: 88px; padding: 15px; border-radius: 50%; background: #FFFDF8; box-shadow: 0 10px 22px rgba(36, 54, 45, .24); transition: scale .2s; }
.sac-objet:hover svg, .sac-objet:focus-visible svg { scale: 1.1; }
.sac-objet:focus-visible { outline: none; }
.sac-objet:focus-visible svg { outline: 3px solid #E9B872; outline-offset: 3px; }
.sac-objet span { padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .93); color: var(--encre); font-weight: 600; font-size: .9rem; }
.sac-objet.pris { left: 50%; top: 56%; scale: .25; opacity: 0; pointer-events: none; }
.sac-etat { display: inline-block; margin: 0 0 14px; padding: 6px 18px; border-radius: 999px; background: #3E5A4B; color: #fff; font-weight: 600; }
.sac-carnet { max-width: 620px; margin: 0 auto 22px; padding: 0; list-style: none; text-align: left; display: grid; gap: 8px; }
.sac-carnet li { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 18px; background: rgba(255, 253, 248, .95); box-shadow: 0 8px 18px rgba(36, 54, 45, .12); }
.sac-carnet li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E3ECE6; color: #3E5A4B; font-weight: 800; }
.js .sac-carnet li:not(.pris) { display: none; }
.js .sac-carnet li.pris { animation: apparait .45s ease; }
@media (prefers-reduced-motion: reduce) { .sac-objet { transition: none; } .hop .sac-dos, .belv-suite span { animation: none; } }
@media (max-width: 700px) {
  .u-coaching main section.belv-sac > .wrap { padding-inline: 16px; }
  .sac-scene { height: 410px; }
  .sac-dos { width: 170px; top: 48%; }
  .sac-objet { width: 92px; }
  .sac-objet svg { width: 66px; height: 66px; padding: 11px; }
  .sac-objet span { font-size: .78rem; padding: 2px 9px; }
  .sac-objet:nth-child(1) { --x: 15% !important; --y: 36% !important; } .sac-objet:nth-child(2) { --x: 22% !important; --y: 8% !important; } .sac-objet:nth-child(3) { --x: 78% !important; --y: 8% !important; } .sac-objet:nth-child(4) { --x: 85% !important; --y: 36% !important; }
  .sentiers-guide { margin-top: 44px; }
}

/* Coaching : le départ du voyage */
.voyage-depart { position: relative; z-index: 7; width: fit-content; max-width: calc(100% - 32px); margin: 30px auto 0; padding: 22px 30px; border-radius: 30px; background: rgba(36, 54, 45, .78); backdrop-filter: blur(7px); text-align: center; box-shadow: 0 18px 40px rgba(20, 32, 26, .25); }
.voyage-depart p { margin: 0; color: #F7E5CF; font-weight: 600; font-size: 1.08rem; }
.voyage-depart .btns { justify-content: center; margin-top: 14px; }
.voyage-depart .btn span { display: inline-block; animation: rebond 1.6s infinite; }
.voyage-direct { display: inline-block; margin-top: 14px; color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: .95rem; text-decoration: none; }
.u-coaching .scene-page, .u-particuliers .scene-page { padding-bottom: 60px; }
.belv-fil { top: 42%; }
/* Coaching : le sentier choisi éclaire ses catégories */
.besoins-sentier { margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: #E3ECE6; color: #24362D; font-weight: 600; }
.besoins-sentier[hidden] { display: none; }
.besoins-groupe.conseille { box-shadow: 0 0 0 3px #C8AA8C; background: #FFF8EC; }
/* Coaching : la météo intérieure */
.meteo { margin-top: 34px; padding: 22px 24px; border-radius: 24px; background: #F2E5D6; }
.meteo h3 { margin: 0 0 14px; font-size: 1.35rem; }
.meteo-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.meteo-choix button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 2px solid transparent; border-radius: 999px; background: #fff; color: var(--encre); font: 600 1rem var(--texte); cursor: pointer; }
.meteo-choix svg { width: 40px; height: 40px; }
.meteo-choix button:hover { border-color: #8AA997; }
.meteo-choix button[aria-pressed="true"] { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.meteo-reponse { margin: 14px 0 0; font-weight: 600; animation: apparait .45s ease; }
.meteo-reponse[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .voyage-depart .btn span { animation: none; } }

/* Fin de chaque univers : les autres mondes du site */
.destinations { position: relative; z-index: 2; padding: clamp(52px, 7vw, 92px) 0; background: #FBF7F2; text-align: center; }
.dest-sur { color: #A65A52; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.destinations h2 { margin: 8px 0 30px; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.dest-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; text-align: left; }
.dest { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; border-radius: 26px; color: var(--encre); text-decoration: none; transition: translate .25s, box-shadow .25s; }
.dest:hover, .dest:focus-visible { translate: 0 -7px; box-shadow: 0 18px 34px rgba(36, 54, 45, .16); color: var(--encre); }
.dest svg { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.dest strong { font: 800 1.25rem/1.15 var(--titre); }
.dest span { color: var(--doux); font-size: .96rem; line-height: 1.35; }
.dest-e { background: #E3ECE6; } .dest-p { background: #F2E5D6; } .dest-c { background: #DCE7E0; } .dest-i { background: #EFE7DA; } .dest-a { background: #F7E7C6; }
.dest svg * { transition: translate 1.1s cubic-bezier(.65, 0, .35, 1), rotate 1.1s cubic-bezier(.65, 0, .35, 1), scale 1.1s; }
.dest:hover .dest-cabine, .dest:focus-visible .dest-cabine { translate: 0 78px; }
.dest:hover .dest-train, .dest:focus-visible .dest-train { translate: 42px 0; }
.dest:hover .dest-marcheur, .dest:focus-visible .dest-marcheur { translate: 106px 0; }
.dest-soleil { transform-box: fill-box; transform-origin: center; }
.dest:hover .dest-soleil, .dest:focus-visible .dest-soleil { translate: -8px -12px; scale: 1.14; }
.dest-h, .dest-m { transform-origin: 100px 60px; }
.dest:hover .dest-m, .dest:focus-visible .dest-m { rotate: 360deg; }
.dest:hover .dest-h, .dest:focus-visible .dest-h { rotate: 60deg; }
@media (prefers-reduced-motion: reduce) { .dest, .dest svg * { transition: none; } }
@media (max-width: 560px) { .dest-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .dest { padding: 12px 13px 16px; } .dest strong { font-size: 1.05rem; } .dest span { font-size: .86rem; } }

/* Particuliers : le voyage en train, une gare et un choix par section */
.u-particuliers .univers-train { transition: translate 1.4s cubic-bezier(.6, 0, .9, .4); }
.u-particuliers .univers-train.parti { translate: 640px 0; }
.gare-sortie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 30px; }
.ligne-suite { display: inline-flex; gap: 10px; padding: 12px 24px; border-radius: 999px; background: #A65A52; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 22px rgba(36, 54, 45, .22); }
.ligne-suite span { display: inline-block; animation: rebond 1.6s infinite; }
.ligne-suite:hover { background: #3E5A4B; color: #fff; }
.choisi .ligne-suite { animation: mAppel 2.2s ease-in-out infinite; }
.ligne-lien { color: inherit; font-weight: 600; }
.u-particuliers main section.section[id^="gare-"], .u-particuliers #a-bord { scroll-margin-top: 80px; }
/* Gare 1 : le quai au petit matin */
.gare-depart { background: linear-gradient(#FBEFDD, #F6E9D8); }
.quai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 20px; border-bottom: 12px solid #C8AA8C; border-radius: 0 0 8px 8px; }
.quai-choix { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px; border: 3px solid transparent; border-radius: 26px; background: #fff; color: var(--encre); font: inherit; text-align: center; cursor: pointer; box-shadow: 0 14px 28px rgba(36, 54, 45, .1); transition: translate .2s, border-color .2s; }
.quai-choix svg { height: 84px; }
.quai-choix strong { font: 800 1.25rem/1.15 var(--titre); }
.quai-choix span { color: var(--doux); font-size: .96rem; line-height: 1.35; }
.quai-choix:hover { translate: 0 -5px; }
.quai-choix[aria-pressed="true"] { border-color: #A65A52; background: #FFF8EC; }
/* Gare 2 : le tableau des départs */
.u-particuliers main section.gare-aiguillage { background: #2F4A3C; color: #fff; overflow: hidden; }
.gare-aiguillage h2, .gare-aiguillage .ligne-lien { color: #fff; }
.gare-aiguillage .section-tete p { color: rgba(255, 255, 255, .84); }
.aiguilles { display: block; width: 100%; height: 70px; margin-bottom: 14px; overflow: hidden; }
.aig-train { translate: -100px 0; }
.aig-train.part { animation: aigPasse 1.6s cubic-bezier(.5, 0, .5, 1); }
@keyframes aigPasse { to { translate: 820px 0; } }
.tableau { overflow: hidden; border: 5px solid #1F332A; border-radius: 22px; background: #1F332A; }
.tableau-tete { display: flex; justify-content: space-between; padding: 8px 20px; color: #E9B872; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.tableau button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 16px; width: 100%; padding: 13px 20px; border: 0; border-top: 1px solid rgba(255, 255, 255, .13); background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.tableau b { font: 700 1.15rem/1.2 var(--titre); color: #F9DFC0; }
.tableau span { grid-column: 1; color: rgba(255, 255, 255, .72); font-size: .93rem; }
.tableau i { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 11px; border-radius: 7px; background: #fff; color: #2F4A3C; font-style: normal; font-weight: 700; font-size: .85rem; }
.tableau button:hover { background: rgba(255, 255, 255, .08); }
.tableau button[aria-pressed="true"] { background: #A65A52; }
.tableau button[aria-pressed="true"] b, .tableau button[aria-pressed="true"] span { color: #fff; }
/* Gare 3 : la rame */
.gare-wagons { background: linear-gradient(#E3ECE6, #C9D8CE); }
.rame { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 10px; border-bottom: 8px solid #8A6A4C; }
.loco { flex: 0 1 150px; min-width: 0; }
.wagon { flex: 0 1 200px; min-width: 0; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--encre); font: inherit; cursor: pointer; transition: translate .25s; }
.wagon svg { display: block; width: 100%; }
.wagon strong { order: -1; padding: 3px 8px; border-radius: 999px; background: #fff; font-size: .92rem; text-align: center; box-shadow: 0 4px 10px rgba(36, 54, 45, .12); }
.wagon:hover { translate: 0 -5px; }
.wagon[aria-pressed="true"] { translate: 0 -8px; }
.wagon[aria-pressed="true"] strong { background: #A65A52; color: #fff; }
.wagon-details { max-width: 720px; margin: 22px auto 0; }
.wagon-detail { padding: 22px 26px; border-radius: 24px; background: #fff; box-shadow: 0 14px 28px rgba(36, 54, 45, .1); }
.wagon-detail + .wagon-detail { margin-top: 12px; }
.wagon-detail h3 { margin: 0 0 8px; font-size: 1.4rem; }
.wagon-detail ul { margin: 0 0 12px; padding-left: 20px; }
.js .wagon-detail:not(.actif) { display: none; }
.js .wagon-detail.actif { margin-top: 0; animation: apparait .45s ease; }
/* À bord et prochains départs */
.u-particuliers main section#sessions { background: #2F4A3C; color: #fff; }
.u-particuliers #sessions h2 { color: #fff; }
.u-particuliers #sessions .prose { color: rgba(255, 255, 255, .84) !important; }
.u-particuliers #sessions .session { color: var(--encre); }
/* Le billet numérique */
.billet { max-width: 560px; margin: 0 auto; overflow: hidden; border-radius: 28px; background: #fff; color: var(--encre); box-shadow: 0 26px 60px rgba(36, 54, 45, .22); transition: translate .4s, box-shadow .4s; }
.billet.composte { translate: 0 -6px; box-shadow: 0 34px 70px rgba(36, 54, 45, .3); }
.billet small { display: block; color: var(--doux); font-size: .8rem; }
.billet b { display: block; color: #A99B88; font: 800 1.2rem/1.15 var(--titre); overflow-wrap: anywhere; }
.billet b.rempli { color: var(--encre); }
.billet-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: linear-gradient(120deg, #2F4A3C, #4F6B5B); color: #fff; }
.billet-tete strong { font: 800 1.1rem var(--titre); }
.billet-statut { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .85rem; font-weight: 600; transition: background .3s, color .3s; }
.composte .billet-statut { background: #E9B872; color: #24362D; }
.billet-trajet { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 10px; padding: 22px 24px 10px; }
.billet-trajet > div:last-child { text-align: right; }
.billet-trajet i { position: relative; height: 3px; border-radius: 2px; background: #C8AA8C; }
.billet-trajet i::after { content: ""; position: absolute; right: -2px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #A65A52; }
.billet-trajet i::before { content: ""; position: absolute; left: -2px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: #3E5A4B; }
.billet-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 24px 20px; }
.billet-infos > div:last-child { text-align: right; }
.billet-infos b { font-size: 1.02rem; }
.billet-infos > div:last-child b { color: var(--encre); }
.billet-pied { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-top: 2px dashed #E0D3C0; background: #FBF7F2; }
.billet-pied::before, .billet-pied::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: #F4EEE6; }
.billet-pied::before { left: -12px; } .billet-pied::after { right: -12px; }
.billet-code { flex: none; width: 76px; height: 76px; padding: 6px; border-radius: 12px; background: #fff; opacity: .28; transition: opacity .4s; }
.composte .billet-code { opacity: 1; }
.billet-pied .btn { justify-content: center; text-align: center; }
.billet-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 24px auto 0; padding: 0; list-style: none; }
.billet-points li { padding: 6px 14px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-weight: 600; font-size: .9rem; }
.billet-barre { position: fixed; z-index: 45; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 150px); padding: 9px 18px; border-radius: 999px; background: #FFF8EC; color: var(--encre); font-size: .88rem; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 26px rgba(36, 54, 45, .28); transition: opacity .25s; }
.billet-barre[hidden] { display: none; }
.billet-barre.masquee { opacity: 0; pointer-events: none; }
.billet-barre b { color: #A65A52; }
.billet-barre span { color: #A08D76; overflow: hidden; text-overflow: ellipsis; }
.billet-barre span.rempli { color: var(--encre); font-weight: 600; }
.billet-barre i { color: #C8AA8C; font-style: normal; }
@media (prefers-reduced-motion: reduce) { .u-particuliers .univers-train, .billet { transition: none; } .aig-train.part, .choisi .ligne-suite, .ligne-suite span { animation: none; } }
@media (max-width: 860px) { .billet-barre { left: 76px; right: 12px; translate: none; max-width: none; } .billet-barre b, .billet-barre i { display: none; } .billet-barre span { flex: 0 1 auto; font-size: .76rem; } }
@media (max-width: 700px) {
  .quai { grid-template-columns: minmax(0, 1fr); }
  .quai-choix { grid-template-columns: 44px minmax(0, 1fr); justify-items: start; text-align: left; padding: 14px 16px; }
  .quai-choix svg { grid-row: span 2; height: 62px; }
  .loco { display: none; }
  .wagon strong { font-size: .76rem; padding: 3px 4px; }
}

/* À propos : la visite de l'atelier, une pièce de la montre par poste */
.u-horloger .chemin { display: none; }
.u-horloger .scene-page { padding-bottom: 60px; }
.montre-compte { position: fixed; z-index: 41; right: 18px; bottom: 102px; padding: 6px 13px; border-radius: 999px; background: #3E5A4B; color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; box-shadow: 0 8px 18px rgba(36, 54, 45, .25); }
.montre-compte[hidden] { display: none; }
.montre-compte b { color: #F2CFA6; }
.jeu-titre.centre { text-align: center; }
.poste-relais { display: flex; justify-content: center; padding: 26px 16px 44px; background: #EFE3D2; }
/* Poste 1 : le mouvement */
.u-horloger main section.poste-mouvement { background: #E3ECE6; }
.rouages-duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.rouages-scene { position: relative; aspect-ratio: 420 / 450; max-width: 480px; width: 100%; margin: 0 auto; }
.engr { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; font: inherit; cursor: pointer; }
.engr svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: var(--a, 0deg); transition: rotate 1.4s cubic-bezier(.45, 0, .3, 1); filter: drop-shadow(0 10px 14px rgba(36, 54, 45, .25)); }
.engr span { position: relative; font: 800 clamp(.72rem, 1.35vw, 1.05rem)/1.1 var(--titre); }
.engr:hover svg { filter: drop-shadow(0 14px 20px rgba(36, 54, 45, .38)) brightness(1.06); }
.engr:focus-visible { outline: 3px solid #A65A52; outline-offset: 6px; }
.engr-texte { display: block; margin-bottom: 12px; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 22px rgba(36, 54, 45, .1); }
.js .engr-texte:not(.actif) { display: none; }
.js .engr-texte.actif { animation: apparait .45s ease; }
.engr-texte small { color: #A65A52; font-weight: 700; }
.engr-texte h3 { margin: 2px 0 6px; font-size: 1.5rem; }
.engr-texte p { margin: 0; color: var(--doux); }
/* Poste 2 : les établis */
.u-horloger main section.poste-equipe, .u-horloger main #joanna, .u-horloger main #jonathan { background: #EFE3D2; }
.u-horloger main section.poste-equipe { padding-bottom: 20px; }
.u-horloger main section.poste-equipe > .wrap { margin-bottom: 0; }
.etablis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; padding-bottom: 14px; border-bottom: 14px solid #8A6A4C; border-radius: 0 0 6px 6px; }
.etablis button { display: grid; gap: 3px; padding: 14px 16px; border: 3px solid transparent; border-radius: 20px; background: #FBF7F2; color: var(--encre); font: inherit; text-align: center; cursor: pointer; transition: translate .2s; }
.etablis strong { font: 800 1.2rem/1.1 var(--titre); }
.etablis span { color: var(--doux); font-size: .9rem; line-height: 1.25; }
.etablis button:hover { translate: 0 -4px; }
.etablis button[aria-pressed="true"] { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.etablis button[aria-pressed="true"] span { color: rgba(255, 255, 255, .82); }
.atelier-masque { display: none !important; }
.u-horloger #joanna li::marker, .u-horloger #jonathan li::marker { color: #A65A52; }
/* Poste 3 : le remontoir */
.u-horloger main section.poste-remontoir { background: #2F4A3C; color: #fff; }
.poste-remontoir h2 { color: #fff; }
.poste-remontoir .section-tete p { color: rgba(255, 255, 255, .84); }
.remontoir { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 46px; align-items: center; }
.remontoir-montre { position: relative; max-width: 320px; width: 100%; margin: 0 auto; }
.remontoir-montre svg { display: block; width: 100%; }
.rem-h, .rem-m { transform-origin: 120px 120px; transition: rotate 1.2s cubic-bezier(.45, 0, .3, 1); }
.rem-h { rotate: calc(var(--tours, 0) * 40deg); }
.rem-m { rotate: calc(var(--tours, 0) * 120deg); }
.couronne { position: absolute; right: -11%; top: 50%; width: 15%; aspect-ratio: 3 / 4; translate: 0 -50%; padding: 0; border: 0; border-radius: 9px; background: repeating-linear-gradient(0deg, #E9B872 0 5px, #C8894A 5px 9px); cursor: pointer; box-shadow: 0 0 0 0 rgba(233, 184, 114, .6); animation: couronneAppel 1.9s ease-out infinite; }
.couronne.fini { animation: none; opacity: .75; cursor: default; }
.couronne:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes couronneAppel { 70%, 100% { box-shadow: 0 0 0 18px rgba(233, 184, 114, 0); } }
.remontoir-etapes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.remontoir-etapes li { padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .1); }
.js .remontoir-etapes li:not(.actif) { opacity: .28; }
.js .remontoir-etapes li { transition: opacity .5s; }
.remontoir-etapes h3 { margin: 0 0 3px; color: #F9DFC0; font-size: 1.3rem; }
.remontoir-etapes p { margin: 0; color: rgba(255, 255, 255, .86); }
/* Les réglages */
.u-horloger main #reglages { background: #F6E9D8; }
/* Poste 4 : les poinçons */
.u-horloger main section.poste-poincons { background: #FBF7F2; }
.poincons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.poincon { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 14px; border: 3px dashed #C8AA8C; border-radius: 26px; background: #fff; color: var(--encre); font: inherit; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.poincon-marque { display: grid; place-items: center; width: 68px; height: 68px; border: 5px double #C8AA8C; border-radius: 50%; color: #C8AA8C; font: 800 1.5rem var(--titre); transition: scale .35s cubic-bezier(.3, 1.6, .5, 1), color .2s, border-color .2s; }
.poincon strong { font: 800 1.15rem/1.15 var(--titre); }
.poincon em { font-style: normal; color: var(--doux); font-size: .95rem; line-height: 1.35; }
.js .poincon em { display: none; }
.js .poincon[aria-pressed="true"] em { display: block; animation: apparait .45s ease; }
.poincon:hover { border-color: #A65A52; }
.poincon[aria-pressed="true"] { border-style: solid; border-color: #A65A52; background: #FFF8EC; }
.poincon[aria-pressed="true"] .poincon-marque { color: #A65A52; border-color: #A65A52; rotate: -10deg; scale: 1.08; }
/* La vitrine et la fin de visite */
.u-horloger main #vitrine { background: #E3ECE6; }
.u-horloger main #vitrine .carte { border: 3px solid #C8AA8C; border-radius: 26px; box-shadow: inset 0 0 0 6px #FBF7F2; }
.u-horloger main section.poste-fin { background: #F7E7C6; }
.fin-duo { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 46px; align-items: center; }
.montre-finale { display: block; width: 100%; max-width: 280px; margin: 0 auto; }
.montre-finale .piece { opacity: .12; transition: opacity .7s; }
.montre-finale .piece.posee { opacity: 1; }
.montre-etat { margin: 14px 0 6px; color: #A65A52; font-weight: 700; }
.fin-h, .fin-m { transform-origin: 120px 150px; }
.complete .fin-m { animation: tourne 8s linear infinite; }
.complete .fin-h { animation: tourne 96s linear infinite; }
@media (prefers-reduced-motion: reduce) { .engr svg, .rem-h, .rem-m { transition: none; } .couronne, .complete .fin-m, .complete .fin-h { animation: none; } }
@media (max-width: 860px) {
  .rouages-duo, .remontoir, .fin-duo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .poincons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .poincon { padding: 16px 10px; }
  .remontoir-montre { max-width: 240px; }
  .montre-finale { max-width: 190px; }
}
@media (max-width: 600px) { .montre-compte { right: 10px; bottom: 74px; font-size: .78rem; padding: 5px 10px; } .etablis strong { font-size: 1rem; } }

/* Particuliers : tout mène aux formations publiques */
.ligne-relais { display: grid; justify-items: center; gap: 12px; padding: 0 16px 56px; background: #2F4A3C; color: #fff; text-align: center; }
.ligne-relais p { margin: 0; font-weight: 600; }
.lignes { margin-top: 18px; }
.js .ligne:not(.actif) { display: none; }
.ligne { padding: 20px 24px; border-radius: 22px; background: #FFF8EC; color: var(--encre); animation: apparait .45s ease; }
.ligne + .ligne { margin-top: 10px; }
.js .ligne + .ligne { margin-top: 0; }
.ligne h3 { margin: 0 0 8px; color: var(--encre); font-size: 1.3rem; }
.ligne-depart { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font-weight: 600; }
.ligne-depart:empty { display: none; }
.ligne ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ligne li a { display: inline-block; padding: 6px 13px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-weight: 600; font-size: .92rem; text-decoration: none; }
.ligne li a:hover { background: #3E5A4B; color: #fff; }
.u-particuliers #sessions .btns .btn-s, .u-particuliers #sessions .boutons .btn-s { color: var(--encre); }
.wagon-detail .btn { margin: 0 12px 8px 0; }

/* Conseils : la bibliothèque, le fichier puis les rayons */
.guide-conseils main section.salle-fichier { background: #F2E5D6; }
.fichier { display: grid; gap: 10px; max-width: 980px; margin-inline: auto; padding: 14px; border-radius: 22px; background: #8A6A4C; box-shadow: 0 22px 44px rgba(36, 54, 45, .2); }
.rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 44px; align-items: end; gap: 22px; width: 100%; padding: 14px 18px 0; border: 0; border-bottom: 9px solid #6E5238; border-radius: 10px 10px 4px 4px; background: #FFF3E0; color: #24362D; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .25s, box-shadow .25s; }
.rangee-nom { align-self: center; display: grid; gap: 2px; padding-bottom: 12px; }
.rangee-nom strong { font: 800 1.2rem/1.15 var(--titre); }
.rangee-nom small { color: #8A6A4C; font-weight: 600; font-size: .85rem; }
.rangee svg { display: block; width: 100%; height: 60px; }
.rangee svg rect { transition: translate .25s; }
.rangee i { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: #3E5A4B; color: #fff; font-style: normal; font-weight: 800; transition: translate .25s; }
.rangee:hover, .rangee:focus-visible { background: #fff; color: #24362D; box-shadow: 0 0 22px rgba(233, 184, 114, .7); }
.rangee:hover i, .rangee:focus-visible i { translate: 5px 0; }
.rangee:hover svg rect:nth-child(3n), .rangee:focus-visible svg rect:nth-child(3n) { translate: 0 -6px; }
.rangee[aria-pressed="true"] { background: #F9DFA8; box-shadow: 0 0 26px rgba(233, 184, 114, .9); }
.rangee-flaner { background: #E3ECE6; }
@media (max-width: 620px) {
  .rangee { grid-template-columns: minmax(0, 1fr) 44px; gap: 0 12px; padding-inline: 14px; }
  .rangee-nom strong { font-size: 1.05rem; }
  .rangee i { grid-column: 2; grid-row: 1; }
  .rangee svg { grid-column: 1 / -1; grid-row: 2; height: 46px; }
}
/* Les rayons */
.guide-conseils main section.salle-rayons { background: #2F4A3C; color: #fff; scroll-margin-top: 80px; }
.salle-rayons .rayons-titre { color: rgba(255, 255, 255, .86); font-weight: 600; }
.rayon { scroll-margin-top: 96px; margin-top: 38px; padding: 8px 10px 0; border-radius: 22px; transition: background .5s, box-shadow .5s; }
.rayon.eclaire { background: radial-gradient(ellipse at 50% 0, rgba(249, 223, 192, .3), transparent 70%); }
.rayon-plaque { display: inline-grid; gap: 1px; margin-bottom: 14px; padding: 8px 18px; border: 3px solid #C8AA8C; border-radius: 10px; background: #FFF8EC; color: var(--encre); }
.rayon-plaque small { color: #A65A52; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.rayon-plaque h2 { margin: 0; color: var(--encre); font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.rayon-planche { display: flex; align-items: flex-end; gap: 5px; height: 270px; padding: 0 14px; border-bottom: 18px solid #8A6A4C; border-radius: 0 0 6px 6px; box-shadow: 0 16px 16px -10px rgba(0, 0, 0, .35); }
.tranche { flex: 0 1 62px; min-width: 0; height: var(--h); display: flex; align-items: center; justify-content: center; padding: 8px 2px; border: 0; border-radius: 6px 6px 2px 2px; background: var(--c); color: #24362D; font: 700 .93rem/1.05 var(--texte); cursor: pointer; box-shadow: inset 5px 0 0 rgba(255, 255, 255, .16), inset -5px 0 0 rgba(0, 0, 0, .13); transition: translate .25s; }
.tranche span { writing-mode: vertical-rl; rotate: 180deg; max-height: 100%; overflow: hidden; }
.tranche[style*="#3E5A4B"], .tranche[style*="#A65A52"], .tranche[style*="#8A6A4C"] { color: #fff; }
.tranche:hover, .tranche:focus-visible { translate: 0 -12px; }
.tranche:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tranche[aria-pressed="true"] { translate: 0 -22px; }
.rayon-deco { flex: 0 0 auto; width: 62px; height: auto; margin-left: 12px; }
.rayon-livres { margin-top: 18px; }
.livre { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-bottom: 12px; border-radius: 14px; background: linear-gradient(90deg, #FFF8EC 62%, #F5EAD8 62%); color: var(--encre); box-shadow: 0 14px 28px rgba(0, 0, 0, .25); }
.js .livre { display: none; margin-bottom: 0; }
.js .livre.actif { display: grid; animation: apparait .45s ease; }
.livre-page { padding: 20px 24px; }
.livre-page + .livre-page { display: grid; place-items: center; border-left: 2px solid #E0CFB5; }
.livre h3 { margin: 0 0 6px; color: var(--encre); font-size: 1.3rem; }
.livre p { margin: 0; color: var(--doux); }
.livre .btn { text-align: center; }
/* La table de lecture */
.guide-conseils main section.salle-table { background: #F6E9D8; }
.table-lecture { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.table-lecture svg { display: block; width: 100%; max-width: 260px; margin: 0 auto; }
.table-lecture h2 { margin: 12px 0 8px; }
.dest-b { background: #E8DCCB; }
.dest:hover .dest-livre, .dest:focus-visible .dest-livre { translate: 0 -14px; }
@media (max-width: 760px) {
  .rayon-planche { height: 230px; gap: 3px; padding: 0 6px; }
  .tranche { flex: 1 1 0; font-size: .78rem; }
  .rayon-deco { display: none; }
  .rayon:last-child .rayon-deco { display: block; width: 58px; }
  .livre { grid-template-columns: minmax(0, 1fr); background: #FFF8EC; }
  .livre-page + .livre-page { border-left: 0; border-top: 2px solid #E0CFB5; padding-block: 14px; }
  .table-lecture { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .table-lecture svg { max-width: 180px; }
}

/* À propos : les molettes des réglages */
.reglages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reglage { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px; border-radius: 26px; background: #FFFDF8; text-align: center; box-shadow: 0 14px 28px rgba(36, 54, 45, .1); }
.reglage small { color: #A65A52; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.molette { width: 118px; height: 118px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.molette svg { display: block; width: 100%; height: 100%; rotate: var(--a, 0deg); transition: rotate .6s cubic-bezier(.3, 1.4, .5, 1); filter: drop-shadow(0 8px 10px rgba(36, 54, 45, .28)); }
.molette:hover svg { filter: drop-shadow(0 12px 14px rgba(36, 54, 45, .38)) brightness(1.05); }
.molette:focus-visible { outline: 3px solid #A65A52; outline-offset: 4px; }
.reglage-val { font: 800 1.3rem/1.15 var(--titre); color: var(--encre); }
.reglage p { margin: 0; color: var(--doux); font-size: .96rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .molette svg { transition: none; } }
@media (max-width: 760px) { .reglages { grid-template-columns: minmax(0, 1fr); } }

/* Voie 5 : le trajet */
.u-particuliers main section.gare-trajet { background: #F4EEE6; scroll-margin-top: 80px; }
.trajet { max-width: 860px; margin: 0 auto; }
.trajet-ligne { position: relative; padding-top: 54px; }
.trajet-train { position: absolute; left: calc(12.5% + var(--p, 0) * 25%); top: 8px; width: 84px; translate: -50% 0; transition: left 1s cubic-bezier(.6, 0, .3, 1); filter: drop-shadow(0 6px 8px rgba(36, 54, 45, .25)); }
.arrets { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.arrets::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 8px; background: repeating-linear-gradient(90deg, #8A6A4C 0 3px, transparent 3px 10px), linear-gradient(#C8AA8C, #C8AA8C) center/100% 3px no-repeat; }
.arret { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 4px; border: 0; background: none; color: var(--encre); font: 600 .95rem/1.15 var(--texte); text-align: center; cursor: pointer; }
.arret i { width: 26px; height: 26px; border: 5px solid #3E5A4B; border-radius: 50%; background: #fff; transition: background .3s, scale .3s; }
.arret.passe i { background: #3E5A4B; }
.arret[aria-pressed="true"] i { background: #A65A52; border-color: #A65A52; scale: 1.2; }
.arret[aria-pressed="true"] span { color: #A65A52; font-weight: 800; }
.trajet-panneau { display: grid; justify-items: center; gap: 14px; margin-top: 22px; padding: 24px 26px; border-radius: 24px; background: #2F4A3C; color: #fff; text-align: center; box-shadow: 0 18px 36px rgba(36, 54, 45, .2); }
.trajet-texte { width: 100%; }
.js .trajet-texte:not(.actif) { display: none; }
.js .trajet-texte.actif { animation: apparait .45s ease; }
.trajet-texte small { color: #E9B872; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.trajet-texte h3 { margin: 4px 0 6px; color: #fff; font-size: 1.5rem; }
.trajet-texte p { margin: 0; color: rgba(255, 255, 255, .86); }
.trajet-panneau .btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; background: #E9B872; color: #24362D; }
/* Voie 6 : à bord du wagon */
.u-particuliers main section.gare-bord { background: #F2E5D6; scroll-margin-top: 80px; }
.wagon-bord { position: relative; isolation: isolate; max-width: 960px; margin: 0 auto 26px; padding: 26px; border-radius: 34px; background: #A65A52; box-shadow: 0 24px 44px rgba(36, 54, 45, .22); }
.wagon-bord::before, .wagon-bord::after { content: ""; position: absolute; bottom: -18px; width: 38px; height: 38px; border-radius: 50%; background: #3E5A4B; z-index: -1; }
.wagon-bord::before { left: 12%; } .wagon-bord::after { right: 12%; }
.fenetres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fenetre { display: grid; gap: 7px; padding: 0; border: 0; background: none; color: #fff; font: 600 .95rem var(--texte); cursor: pointer; }
.fenetre-vue { display: block; height: 118px; border: 6px solid #FBF7F2; border-radius: 20px; background: radial-gradient(ellipse 70% 60% at 30% 110%, #6F8F7D 98%, transparent) 0 0/200px 100% repeat-x, radial-gradient(ellipse 60% 80% at 70% 110%, #8AA997 98%, transparent) 0 0/260px 100% repeat-x, linear-gradient(#E3ECE6, #F6E9D8); transition: scale .25s; }
.fenetre:hover .fenetre-vue { scale: 1.03; }
.fenetre[aria-pressed="true"] .fenetre-vue { border-color: #E9B872; animation: paysage 6s linear infinite; }
.fenetre[aria-pressed="true"] span { color: #F9DFC0; font-weight: 800; }
.fenetre:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 20px; }
@keyframes paysage { to { background-position: -200px 0, -260px 0, 0 0; } }
.bord-textes { margin-top: 16px; }
.bord-texte { padding: 18px 22px; border-radius: 20px; background: #FFF8EC; color: var(--encre); }
.bord-texte + .bord-texte { margin-top: 8px; }
.js .bord-texte + .bord-texte { margin-top: 0; }
.js .bord-texte:not(.actif) { display: none; }
.js .bord-texte.actif { animation: apparait .45s ease; }
.bord-texte h3 { margin: 0 0 6px; color: var(--encre); font-size: 1.35rem; }
.bord-texte p { margin: 0; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .trajet-train { transition: none; } .fenetre[aria-pressed="true"] .fenetre-vue { animation: none; } }
@media (max-width: 700px) {
  .arret { font-size: .76rem; }
  .trajet-train { width: 62px; }
  .wagon-bord { padding: 16px; border-radius: 24px; }
  .fenetres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fenetre-vue { height: 76px; }
  .billet-tete, .billet-trajet, .billet-infos, .billet-pied { padding-inline: 18px; }
  .billet-trajet { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); }
  .billet b { font-size: 1.02rem; }
  .billet-code { width: 58px; height: 58px; }
}

/* Contact : le bureau de poste, quatre guichets et une lettre */
.poste-illu svg { filter: drop-shadow(0 22px 34px rgba(20, 35, 28, .22)); }

.u-poste .scene-page { padding-bottom: 60px; }
.guichets-depart { width: min(100% - 32px, 860px); max-width: none; }
.guichets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.guichet { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 8px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; transition: translate .2s, background .2s; }
.guichet svg { width: 50px; height: 50px; margin-bottom: 2px; }
.guichet b { font: 800 1.08rem/1.15 var(--titre); }
.guichet span { color: rgba(255, 255, 255, .8); font-size: .85rem; line-height: 1.25; }
.guichet:hover, .guichet:focus-visible { translate: 0 -5px; background: rgba(255, 255, 255, .24); color: #fff; }
/* La lettre */
.u-poste main section#contact { background: linear-gradient(112deg, rgba(255, 244, 214, .9) 0 18%, transparent 18% 22%, rgba(255, 244, 214, .7) 22% 40%, transparent 40%), linear-gradient(#F3DDBE, #F6E9D8); scroll-margin-top: 80px; }
.u-poste .contact-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.u-poste .carte-form { order: -1; position: relative; scroll-margin-top: 100px; width: min(100%, 820px); margin: 0 auto; background: #FFFDF8; border-radius: 12px; box-shadow: 0 26px 56px rgba(36, 54, 45, .18); }
.u-poste .carte-form::before { content: ""; position: absolute; inset: 10px; border: 2px dashed #E9DCC9; border-radius: 8px; pointer-events: none; }
.u-poste .contact-grille > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-content: start; }
.u-poste .contact-grille > div:first-child > * { grid-column: 1; }
.u-poste .plan { grid-column: 2 !important; grid-row: 1 / span 8; margin: 0; scroll-margin-top: 100px; }
.lettre { position: relative; }
.lettre-titre { margin: 0; text-align: center; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.lettre-route { position: relative; display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 34px; color: var(--doux); font-size: .85rem; font-weight: 600; text-align: center; border-bottom: 3px dotted #C8AA8C; padding-bottom: 8px; }
.lettre-pion { position: absolute; left: calc(12.5% + var(--p, 0) * 25%); top: 0; width: 38px; translate: -50% 0; transition: left .7s cubic-bezier(.5, 0, .3, 1); }
.lettre-nav { display: none; justify-content: space-between; gap: 12px; }
.lettre-nav .btn { width: auto; margin-left: auto; }
.lettre-nav [data-retour] { margin: 0 auto 0 0; }
.lettre-nav [hidden] { display: none; }
.js .lettre.pret .lettre-route { display: grid; }
.js .lettre.pret .lettre-nav { display: flex; }
.lettre-etape { min-width: 0; margin: 0; padding: 0; border: 0; }
.js .lettre.pret .lettre-etape:not(.actif) { display: none; }
.js .lettre.pret .lettre-etape.actif { animation: apparait .45s ease; }
.lettre-etape legend { padding: 0; margin-bottom: 16px; font: 800 1.45rem/1.15 var(--titre); color: var(--encre); }
.timbres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.timbre { display: grid; justify-items: center; gap: 8px; padding: 6px; border: 0; background: none; color: var(--encre); font: 600 .9rem/1.15 var(--texte); text-align: center; cursor: pointer; transition: translate .25s, rotate .25s; }
.timbre svg { display: block; width: 100%; max-width: 116px; filter: drop-shadow(0 6px 10px rgba(36, 54, 45, .18)); }
.timbre:hover { translate: 0 -6px; rotate: -3deg; }
.timbre:focus-visible { outline: 3px solid #A65A52; outline-offset: 2px; border-radius: 8px; }
.timbre[aria-pressed="true"] { translate: 0 -8px; rotate: 3deg; color: #A65A52; font-weight: 800; }
.lettre-intro { margin: 0; text-align: center; color: var(--doux); font-style: italic; }
.lettre-etape legend { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.machine { position: relative; max-width: 620px; margin: 0 auto; }
.u-poste .form .machine textarea { display: block; width: 88%; margin: 0 auto; min-height: 210px; padding: 12px 18px 6px; border: 1px solid #E0D3C0; border-bottom: 0; border-radius: 4px 4px 0 0; background: #fff repeating-linear-gradient(transparent 0 31px, #F1E8DA 31px 32px); font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; line-height: 32px; box-shadow: 0 -6px 16px rgba(36, 54, 45, .08); }
.machine-corps { display: block; width: 100%; height: 96px; margin-top: -2px; }
.machine.frappe textarea { animation: frappe .1s; }
@keyframes frappe { 50% { translate: 2px 1px; } }
.lettre-signature input[name="nom"] { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.enveloppe [data-signature] { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.3rem; }
.sceau { position: absolute; left: 50%; bottom: -18px; width: 60px; translate: -50% 0; opacity: 0; scale: 1.9; rotate: -14deg; transition: opacity .15s, scale .35s cubic-bezier(.3, 1.5, .5, 1), rotate .35s; filter: drop-shadow(0 4px 5px rgba(36, 54, 45, .35)); }
.postee .sceau { opacity: 1; scale: 1; rotate: -6deg; }
.lettre-signature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.lettre-signature legend { grid-column: 1 / -1; }
.poste-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 22px; align-items: end; margin-bottom: 16px; }
.enveloppe { position: relative; overflow: visible; min-height: 180px; padding: 18px 92px 18px 20px; border: 2px solid #C8AA8C; border-radius: 10px; background: linear-gradient(155deg, #FFF8EC 50%, #F7EEDD 50%); box-shadow: 0 12px 24px rgba(36, 54, 45, .14); transition: translate 1s cubic-bezier(.6, 0, .6, 1) .55s, scale 1s .55s, opacity .2s 1.4s, rotate 1s .55s; }
.enveloppe p { margin: 0 0 10px; line-height: 1.3; }
.enveloppe small { display: block; color: var(--doux); font-size: .78rem; }
.enveloppe b { display: block; font: 800 1.15rem/1.2 var(--titre); overflow-wrap: anywhere; }
.enveloppe-timbre { position: absolute; right: 14px; top: 12px; width: 62px; rotate: 3deg; }
.enveloppe-timbre svg { display: block; width: 100%; }
.boite { width: 100%; }
.boite-drapeau { transform-origin: 128px 74px; rotate: 90deg; transition: rotate .5s 1.35s; }
.postee .enveloppe { translate: 66% -10%; scale: .16; rotate: 10deg; opacity: 0; }
.postee .boite-drapeau { rotate: 0deg; }
.postee .lettre-nav, .postee .lettre-poster { visibility: hidden; }
.lettre-poster { margin-top: 12px; }
.lettre-arrivee { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: center; }
.lettre-arrivee svg { width: 100%; }
.lettre-arrivee h2 { margin: 0 0 6px; }
.lettre-arrivee p { margin: 0 0 14px; color: var(--doux); }
/* Le guichet des rendez-vous */
.u-poste main section#rendez-vous { background: #E3ECE6; scroll-margin-top: 80px; }

@media (max-width: 760px) {
  .guichets { grid-template-columns: minmax(0, 1fr); }
  .guichet { padding: 12px 6px; }
  .timbres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lettre-route { font-size: .72rem; }
  .lettre-signature { grid-template-columns: minmax(0, 1fr); }
  .poste-scene { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
  .enveloppe { padding: 14px 58px 14px 14px; min-height: 160px; }
  .enveloppe b { font-size: 1rem; }
  .enveloppe-timbre { width: 44px; right: 8px; }
  .u-poste .contact-grille > div:first-child { grid-template-columns: minmax(0, 1fr); }
  .u-poste .plan { grid-column: 1 !important; grid-row: auto; margin-top: 18px; }
  .lettre-arrivee { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
}


/* Le relais entre deux sections reprend le fond de celle qu'il prolonge */
.poste-relais.fond-vitrine { background: #E3ECE6; }
.poste-relais.fond-blanc { background: var(--creme); padding-top: 0; }
.poste-relais.fond-gris { background: #F4EEE6; padding-top: 0; }

/* Entreprises : l'escalier */
.u-entreprises main section.salle-escalier { background: #F4EEE6; }
.escalier { max-width: 900px; margin: 0 auto; }
.escalier-marches { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0; padding-top: 74px; }
.escalier .arret { display: grid; justify-items: center; align-content: start; gap: 6px; height: calc(92px + var(--i) * 46px); padding: 12px 8px; border-radius: 16px 16px 0 0; background: #E3DACB; box-shadow: inset 0 8px 0 #8A6A4C; transition: background .3s; }
.escalier .arret i { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #3E5A4B; color: #fff; font-style: normal; font-weight: 700; font-size: .9rem; scale: 1; }
.escalier .arret.passe { background: #E9DAC0; }
.escalier .arret[aria-pressed="true"] { background: #F7E7C6; }
.escalier .arret[aria-pressed="true"] i { background: #A65A52; scale: 1; }
.escalier-perso { position: absolute; z-index: 2; left: calc(12.5% + var(--p, 0) * 25%); bottom: calc(92px + var(--p, 0) * 46px); width: 40px; translate: -50% 0; transition: left .8s cubic-bezier(.5, 0, .3, 1), bottom .8s cubic-bezier(.5, 1.4, .5, 1); filter: drop-shadow(0 5px 6px rgba(36, 54, 45, .3)); }
.escalier .trajet-panneau { margin-top: 0; border-radius: 0 0 24px 24px; }
.escalier .trajet-panneau .btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; background: #E9B872; color: #24362D; }
/* Entreprises : le hall */
.u-entreprises main section.salle-hall { background: #24362D; color: #fff; }
body.u-entreprises .salle-hall .section-tete :is(h2, p) { color: #fff !important; text-shadow: none !important; }
.salle-hall .jeu-titre, .salle-hall .jeu-suite { color: #F9DFC0; }
.salle-hall .jeu-suite.centre { text-align: center; }
.hall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hall-fenetre { display: grid; justify-items: center; align-content: start; gap: 8px; min-height: 190px; padding: 20px 14px; border: 5px solid #3E5A4B; border-radius: 80px 80px 18px 18px; background: #2F4A3C; color: #E3ECE6; font: inherit; text-align: center; cursor: pointer; transition: background .4s, color .4s, box-shadow .4s; }
.hall-fenetre svg { width: 42px; }
.ampoule { fill: #5E7B6B; transition: fill .3s; }
.hall-fenetre strong { font: 800 1.1rem/1.15 var(--titre); }
.hall-fenetre span { display: none; font-size: .94rem; line-height: 1.35; }
html:not(.js) .hall-fenetre span, .hall-fenetre[aria-pressed="true"] span { display: block; animation: apparait .45s ease; }
.hall-fenetre:hover { border-color: #E9B872; }
.hall-fenetre[aria-pressed="true"] { border-color: #E9B872; background: #FFF6E6; color: var(--encre); box-shadow: 0 0 44px rgba(233, 184, 114, .55); }
.hall-fenetre[aria-pressed="true"] .ampoule { fill: #E9B872; }
/* Entreprises : le mur d'outils */
.u-entreprises main section.salle-outils { background: #F2E5D6; }
.salle-outils .rayon { margin-top: 12px; padding: 0; }
.salle-outils .rayon-planche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 16px; height: auto; padding: 34px 26px 26px; border: 10px solid #8A6A4C; border-radius: 20px; background: radial-gradient(#A8947A 2.5px, transparent 3px) 0 0 / 24px 24px, #DCCBB2; }
.salle-outils .tranche { position: relative; flex: none; width: auto; max-width: none; height: auto; min-height: 88px; padding: 18px 10px 14px; border-radius: 14px; box-shadow: 0 10px 16px rgba(36, 54, 45, .22); font: 700 1.02rem/1.15 var(--titre); transform-origin: 50% -10px; transition: rotate .3s, translate .25s; }
.salle-outils .tranche::before { content: ""; position: absolute; left: 50%; top: -12px; width: 14px; height: 22px; translate: -50% 0; border: 4px solid #5E4632; border-bottom: 0; border-radius: 8px 8px 0 0; }
.salle-outils .tranche span { writing-mode: horizontal-tb; rotate: 0deg; }
.salle-outils .tranche:hover, .salle-outils .tranche:focus-visible { translate: 0 0; rotate: -5deg; }
.salle-outils .tranche[aria-pressed="true"] { translate: 0 8px; rotate: 0deg; outline: 4px solid #FFF8EC; outline-offset: 2px; }
.livre-liens { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.livre-liens a { display: inline-block; padding: 6px 13px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-weight: 600; font-size: .92rem; text-decoration: none; }
.livre-liens a:hover { background: #3E5A4B; color: #fff; }
.outils-texte { max-width: 780px; margin: 22px auto 0; }
@media (prefers-reduced-motion: reduce) { .escalier-perso, .hall-fenetre { transition: none; } }
@media (max-width: 860px) { .hall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hall-fenetre { padding: 16px 10px; border-radius: 56px 56px 16px 16px; } }
@media (max-width: 700px) { .escalier .arret { font-size: .72rem; padding: 12px 3px; } .escalier-perso { width: 32px; } }

/* Coaching : le sentier choisi reste avec la personne pendant tout le voyage */
.sentier.choisi-sentier { outline: 4px solid #E9B872; outline-offset: 4px; }
.sentier-rappel { display: inline-block; margin: 0 0 12px !important; padding: 5px 14px; border-radius: 999px; background: #3E5A4B; color: #fff !important; font-weight: 600; font-size: .9rem; }
.belv-raccourci { display: block; margin-top: 14px; color: var(--doux); font-size: .9rem; }
/* Contact : l'étiquette garde sa taille dans la colonne */
.u-poste .contact-grille > div:first-child > .etiq { justify-self: start; }

/* Entreprises : l'invitation à descendre tient à l'écran dès l'arrivée */
.u-entreprises .scene-page:has(.voyage-depart) { padding-top: 112px; padding-bottom: 44px; }
.voyage-depart .voyage-promesse { margin-top: 10px; color: #fff; font-size: .88rem; }
@media (min-width: 861px) { .scene-page:has(.voyage-depart) .immeuble { width: min(100%, calc((100svh - 330px) * .831)); min-width: 300px; } }

/* Ambiance sonore : le bouton laisse la place aux repères fixes de chaque univers */
.u-coaching .belv-son, .u-passerelle .belv-son { bottom: 104px; }
.u-horloger .belv-son { bottom: 146px; }
.voyage-son { display: block; margin: 14px auto 0; padding: 6px 16px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; background: none; color: #fff; font: 600 .9rem var(--texte); cursor: pointer; }
.voyage-son:hover { background: rgba(255, 255, 255, .16); }
.voyage-son[aria-pressed="true"] { background: #fff; color: #3E5A4B; }
@media (max-width: 600px) { .u-coaching .belv-son, .u-passerelle .belv-son { bottom: 76px; } .u-horloger .belv-son { bottom: 112px; } }

/* Contact : l'écritoire de l'en-tête */
.ecritoire-feuille { animation: feuilleMonte 5s ease-in-out infinite alternate; }
@keyframes feuilleMonte { to { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .ecritoire-feuille, .machine.frappe textarea { animation: none; } .sceau, .enveloppe, .boite-drapeau { transition: none; } }

@media (max-width: 700px) { .salle-outils .rayon-planche { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 26px 14px 16px; } }

/* Contact : le courrier dans le vent, les pétales de violette */
.lettres-vent { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.lettres-vent > * { position: absolute; left: -60px; top: var(--y, 20%); opacity: 0; animation: venLettre var(--d, 20s) linear var(--r, 0s) infinite; }
.lettres-vent i { width: 30px; height: 21px; border-radius: 3px; background: linear-gradient(145deg, #FFF8EC 49%, #E9DCC9 50%); box-shadow: 0 4px 8px rgba(20, 32, 26, .25); }
.lettres-vent b { width: 11px; height: 8px; border-radius: 60% 40% 60% 40%; background: #B7A6D6; }
.lettres-vent > :nth-child(1) { --y: 16%; --d: 19s; --r: -2s; } .lettres-vent > :nth-child(2) { --y: 44%; --d: 25s; --r: -11s; } .lettres-vent > :nth-child(3) { --y: 28%; --d: 22s; --r: -17s; } .lettres-vent > :nth-child(4) { --y: 62%; --d: 28s; --r: -6s; } .lettres-vent > :nth-child(5) { --y: 8%; --d: 31s; --r: -23s; }
.lettres-vent > :nth-child(6) { --y: 24%; --d: 13s; --r: -3s; } .lettres-vent > :nth-child(7) { --y: 52%; --d: 16s; --r: -9s; } .lettres-vent > :nth-child(8) { --y: 36%; --d: 12s; --r: -6s; } .lettres-vent > :nth-child(9) { --y: 70%; --d: 18s; --r: -13s; } .lettres-vent > :nth-child(10) { --y: 12%; --d: 15s; --r: -11s; } .lettres-vent > :nth-child(11) { --y: 58%; --d: 14s; --r: -1s; }
@keyframes venLettre { 0% { opacity: 0; translate: 0 40px; rotate: -12deg; } 6% { opacity: .95; } 50% { translate: 55vw -30px; rotate: 16deg; } 94% { opacity: .95; } 100% { opacity: 0; translate: 110vw 30px; rotate: -8deg; } }
.lettre-aide { max-width: 620px; margin: 12px auto 0; color: var(--doux); font-size: .92rem; text-align: center; }
.enveloppe { background: linear-gradient(90deg, transparent 72%, rgba(122, 104, 166, .75) 72% 75%, transparent 75%), linear-gradient(155deg, #FFF8EC 50%, #F7EEDD 50%); }
.guichets-depart .btns { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .lettres-vent { display: none; } }

/* Institutions : la traversée de la passerelle */
.u-passerelle .chemin { display: none; }
.u-passerelle .scene-page { padding-bottom: 60px; }
.u-passerelle main section[id] { scroll-margin-top: 80px; }
.u-passerelle main section.salle-rive { background: #DCE7E0; }
.rive-choix-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; padding-bottom: 16px; border-bottom: 12px solid #6F8F7D; border-radius: 0 0 8px 8px; }
.rive-choix { min-height: 74px; padding: 12px 14px; border: 3px solid transparent; border-radius: 18px; background: #fff; color: var(--encre); font: 700 1rem/1.2 var(--texte); cursor: pointer; box-shadow: 0 8px 18px rgba(36, 54, 45, .1); transition: translate .2s; }
.rive-choix:hover { translate: 0 -4px; }
.rive-choix[aria-pressed="true"] { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.rive-note { max-width: 720px; margin: 16px auto 0; color: var(--doux); text-align: center; }
/* Les onglets, communs aux interventions et au dossier */
.u-passerelle main section.salle-interventions { background: #F2E5D6; }
.onglets { max-width: 860px; margin: 0 auto; }
.onglets-tete { display: flex; flex-wrap: wrap; gap: 6px; }
.onglet { flex: 1 1 0; min-width: 130px; display: grid; gap: 2px; padding: 12px 14px; border: 0; border-radius: 16px 16px 0 0; background: #E3D3BD; color: var(--encre); font: 700 1rem/1.15 var(--titre); cursor: pointer; transition: translate .2s, background .2s; }
.onglet small { color: #A65A52; font-family: var(--texte); }
.onglet:hover { translate: 0 -3px; }
.onglet[aria-pressed="true"] { background: #FFFDF8; }
.onglet-panneau { padding: 24px 26px; border-radius: 0 0 20px 20px; background: #FFFDF8; box-shadow: 0 16px 30px rgba(36, 54, 45, .12); }
.onglet-panneau + .onglet-panneau { margin-top: 8px; }
.js .onglet-panneau + .onglet-panneau { margin-top: 0; }
.js .onglet-panneau:not(.actif) { display: none; }
.js .onglet-panneau.actif { animation: apparait .45s ease; }
.onglet-panneau h3 { margin: 0 0 8px; font-size: 1.4rem; }
.onglet-panneau p { margin: 0 0 12px; color: var(--doux); }
.onglet-panneau ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.onglet-panneau li { padding: 5px 12px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-weight: 600; font-size: .9rem; }
/* La traversée */
.u-passerelle main section.salle-traversee { background: #2F4A3C; color: #fff; }
.salle-traversee h2 { color: #fff; }
.salle-traversee .section-tete p { color: rgba(255, 255, 255, .84); }
.pont { max-width: 900px; margin: 0 auto; }
.pont-riviere { position: relative; padding-top: 58px; }
.pont-riviere::after { content: ""; display: block; height: 34px; margin-top: 10px; border-radius: 14px; background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, .35) 8% 24%, transparent 24% 58%, rgba(255, 255, 255, .25) 58% 80%, transparent 80%) 0 9px / 170px 3px repeat-x, linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .28) 30% 52%, transparent 52%) 40px 22px / 130px 3px repeat-x, #5E7B6B; }
.pont-perso { position: absolute; z-index: 2; left: calc(12.5% + var(--p, 0) * 25%); top: 4px; width: 36px; translate: -50% 0; transition: left .9s cubic-bezier(.5, 0, .3, 1); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.pont .arrets::before { display: none; }
.pont .arret { color: #fff; gap: 8px; padding: 0 3px; }
.pont .arret i { width: 100%; height: 16px; border: 3px dashed rgba(255, 255, 255, .55); border-radius: 5px; background: transparent; scale: 1; transition: background .4s, border .4s; }
.pont .arret.passe i, .pont .arret[aria-pressed="true"] i { border: 3px solid #8A6A4C; background: #C8AA8C; scale: 1; }
.pont .arret[aria-pressed="true"] span { color: #F9DFC0; }
.salle-traversee .trajet-panneau { background: rgba(255, 255, 255, .1); box-shadow: none; }
.salle-traversee .trajet-panneau .btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; background: #E9B872; color: #24362D; }
/* Le lieu, puis l'exemple */
.u-passerelle main section.salle-format { background: #E3ECE6; }
.u-passerelle main section.salle-exemple { background: #F6E9D8; }
.duo-format { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 42px; align-items: center; }
.format-carte { padding: 24px 26px; border-radius: 24px; background: #2F4A3C; color: #fff; }
.format-carte small { color: #E9B872; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.format-carte h3 { margin: 4px 0 8px; color: #fff; font-size: 1.5rem; }
.format-carte p { color: rgba(255, 255, 255, .85); }
.format-carte .jeu-titre { margin-top: 16px; color: #F9DFC0; font-size: 1.05rem; }
.lieux { display: flex; flex-wrap: wrap; gap: 8px; }
.lieu { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 .95rem var(--texte); cursor: pointer; }
.lieu i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #E9B872; }
.lieu[aria-pressed="true"] { background: #FFF8EC; color: var(--encre); }
.lieu[aria-pressed="true"] i { background: #A65A52; }
.dossier .dossier-valeur { margin: 0; color: var(--encre); font: 800 1.35rem/1.2 var(--titre); }
.dossier .onglet { min-width: 90px; }
.dossier-barre span { max-width: 180px; }
@media (prefers-reduced-motion: reduce) { .pont-perso { transition: none; } }
@media (max-width: 860px) { .duo-format { grid-template-columns: minmax(0, 1fr); gap: 24px; } .rive-choix-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pont .arret { font-size: .74rem; } .onglet { font-size: .9rem; padding: 10px; min-width: 96px; } .dossier-barre span { max-width: 92px; } }

.u-passerelle .scene-page h1 { font-size: clamp(2.1rem, 3.7vw, 3.9rem); line-height: 1.06; overflow-wrap: normal; hyphens: none; }

/* Catalogue : l'archipel des compétences */
.u-archipel .scene-page { padding-bottom: 60px; }
.archipel-bateau { animation: bercer 3.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bercer { from { rotate: -3deg; } to { rotate: 3deg; translate: 0 -5px; } }
.u-archipel main section.salle-archipel { background: #DCE7E0; scroll-margin-top: 80px; }
.u-archipel main #liste { scroll-margin-top: 90px; }
.caps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.caps span { font-weight: 700; }
.cap { padding: 7px 14px; border: 2px solid #3E5A4B; border-radius: 999px; background: #fff; color: #3E5A4B; font: 600 .93rem var(--texte); cursor: pointer; transition: translate .2s; }
.cap:hover { translate: 0 -3px; }
.cap.choisi { background: #3E5A4B; color: #fff; }
.mer { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 30px; background: radial-gradient(ellipse 60% 4px at 20% 22%, rgba(255, 255, 255, .22), transparent), radial-gradient(ellipse 50% 4px at 75% 48%, rgba(255, 255, 255, .2), transparent), radial-gradient(ellipse 40% 4px at 40% 82%, rgba(255, 255, 255, .2), transparent), linear-gradient(#6F8F7D, #4F6B5B); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .22), 0 22px 44px rgba(36, 54, 45, .2); }
.ile { position: absolute; left: var(--x); top: var(--y); width: min(22%, 200px); translate: -50% -50%; display: grid; justify-items: center; color: #fff; text-decoration: none; transition: scale .25s; z-index: 1; }
.ile svg { display: block; width: 100%; filter: drop-shadow(0 8px 8px rgba(20, 40, 30, .28)); }
.ile span { display: grid; justify-items: center; margin-top: -4px; padding: 3px 11px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--encre); text-align: center; line-height: 1.1; }
.ile b { font: 800 .92rem/1.1 var(--titre); }
.ile small { color: var(--doux); font-size: .74rem; }
.ile:hover, .ile:focus-visible { scale: 1.07; color: #fff; }
.ile:focus-visible { outline: 3px solid #E9B872; outline-offset: 3px; border-radius: 14px; }
.ile[aria-pressed="true"] span { background: #A65A52; }
.ile[aria-pressed="true"] b, .ile[aria-pressed="true"] small { color: #fff; }
.ile[data-ile="bureautique"] { --x: 14%; --y: 28%; } .ile[data-ile="m365"] { --x: 38%; --y: 22%; } .ile[data-ile="ia"] { --x: 62%; --y: 28%; } .ile[data-ile="numerique"] { --x: 86%; --y: 24%; }
.ile[data-ile="creation"] { --x: 24%; --y: 73%; } .ile[data-ile="securite"] { --x: 50%; --y: 72%; } .ile[data-ile="efficacite"] { --x: 76%; --y: 74%; }
.bateau { position: absolute; z-index: 2; left: 8%; top: 50%; width: 52px; translate: -50% -50%; transition: left 1.3s cubic-bezier(.5, 0, .3, 1), top 1.3s cubic-bezier(.5, 0, .3, 1); pointer-events: none; animation: bercer 3s ease-in-out infinite alternate; filter: drop-shadow(0 5px 5px rgba(20, 40, 30, .35)); }
.escale { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 0 0 26px; font: 800 1.25rem var(--titre); }
.escale[hidden], .categorie[hidden], .filtres[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .archipel-bateau, .bateau { animation: none; transition: none; } }
@media (max-width: 760px) {
  .mer { aspect-ratio: 3 / 4.6; }
  .ile { width: 44%; }
  .ile b { font-size: .78rem; } .ile small { font-size: .68rem; }
  .ile[data-ile="bureautique"] { --x: 26%; --y: 11%; } .ile[data-ile="m365"] { --x: 74%; --y: 21%; } .ile[data-ile="ia"] { --x: 26%; --y: 36%; } .ile[data-ile="numerique"] { --x: 74%; --y: 47%; } .ile[data-ile="creation"] { --x: 26%; --y: 62%; } .ile[data-ile="securite"] { --x: 74%; --y: 73%; } .ile[data-ile="efficacite"] { --x: 26%; --y: 88%; }
  .bateau { width: 40px; left: 74%; top: 90%; }
  .bouteille { width: 24px; }
}

/* Institutions : la gorge, un même paysage de haut en bas */
.u-passerelle main section.salle-rive { background: linear-gradient(#EAF0EA, #DCE7E0); padding-bottom: 0; }
.rive-choix-liste { border-bottom: 0; padding-bottom: 0; }
.rive-choix { position: relative; background: #C8AA8C; color: #24362D; border-radius: 10px; box-shadow: 0 6px 0 #8A6A4C; }
.rive-choix::before, .rive-choix::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #8A6A4C; translate: 0 -50%; }
.rive-choix::before { left: 8px; } .rive-choix::after { right: 8px; }
.rive-choix:hover { translate: 0 -3px; box-shadow: 0 9px 0 #8A6A4C; }
.rive-choix[aria-pressed="true"] { border-color: transparent; background: #E9B872; color: #24362D; translate: 0 4px; box-shadow: 0 2px 0 #8A6A4C; }
.salle-rive .gare-sortie { padding-bottom: 46px; }
/* Les trois façons de traverser */
.u-passerelle main section.salle-interventions { background: #DCE7E0; }
.traverser .onglets-tete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.traverser { max-width: 980px; }
.traverser .onglet { display: grid; gap: 8px; min-width: 0; padding: 10px 10px 14px; border-radius: 22px 22px 0 0; background: #F2F5F1; text-align: center; opacity: .78; transition: opacity .25s, translate .25s; }
.traverser .onglet svg { display: block; width: 100%; height: auto; }
.traverser .onglet small { display: none; }
.traverser .onglet:hover { opacity: 1; translate: 0 -4px; }
.traverser .onglet[aria-pressed="true"] { background: #FFFDF8; opacity: 1; }
/* La gorge */
.u-passerelle main section.salle-traversee { background: linear-gradient(#DCE7E0, #F3ECE0); color: var(--encre); }
.salle-traversee h2 { color: var(--encre); }
.salle-traversee .section-tete p { color: var(--doux); }
.pont { max-width: 1120px; }
.pont-riviere { padding-top: 0; }
.pont-riviere::after { display: none; }
.pont-scene { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 30px 30px 0 0; }
.planche { opacity: clamp(.12, calc(var(--p, 0) + 1 - var(--n)), 1); transition: opacity .6s .15s; }
.pont-marcheurs { transform: translate(calc(267px + var(--p, 0) * 155px), calc(211px + sin(var(--p, 0) * 60deg) * 18.5px)); transition: transform .9s cubic-bezier(.5, 0, .3, 1); }
.pont .arrets { padding: 14px 8px; background: #3E5A4B; }
.pont .arret { font-size: .95rem; }
.pont .arret i { display: none; }
.pont .arret span { padding: 6px 4px; border-radius: 10px; opacity: .72; }
.pont .arret.passe span { opacity: 1; }
.pont .arret[aria-pressed="true"] span { opacity: 1; background: #E9B872; color: #24362D; font-weight: 800; }
.salle-traversee .trajet-panneau { margin-top: 0; border-radius: 0 0 30px 30px; background: #2F4A3C; color: #fff; }
/* Les lieux */
.u-passerelle main section.salle-format { background: #F3ECE0; }
.format-carte { background: #FFFDF8; color: var(--encre); box-shadow: 0 20px 40px rgba(36, 54, 45, .14); }
.format-carte small { color: #A65A52; }
.format-carte h3 { color: var(--encre); }
.format-carte p { color: var(--doux); }
.format-carte .jeu-titre { color: var(--encre); }
.lieux { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.lieu { display: grid; justify-items: center; gap: 5px; padding: 12px 6px; border: 2px solid #E9DCC9; border-radius: 16px; background: #fff; color: var(--encre); font-size: .9rem; line-height: 1.15; transition: translate .2s; }
.lieu svg { width: 42px; height: 42px; }
.lieu:hover { translate: 0 -4px; }
.lieu[aria-pressed="true"] { border-color: #3E5A4B; background: #E3ECE6; color: var(--encre); }
/* L'exemple et l'autre rive */
.u-passerelle main section.salle-exemple { background: #F3ECE0; padding-top: 0; }
.dossier { rotate: 1deg; }
.dossier .onglet-panneau { min-height: 96px; }
.autre-rive { position: relative; background: #F3ECE0; text-align: center; }
.autre-rive svg { display: block; width: 100%; height: 150px; }
.autre-rive p { margin: 0; padding: 12px 16px 26px; background: #8AA997; color: #fff; font: 800 clamp(1.1rem, 2.3vw, 1.6rem)/1.2 var(--titre); }
.u-passerelle main section#devis { background: #EEF2EC; }
@media (prefers-reduced-motion: reduce) { .pont-marcheurs, .planche { transition: none; } }
@media (max-width: 760px) { .traverser .onglets-tete { gap: 6px; } .traverser .onglet { padding: 6px 4px 10px; font-size: .78rem; } .pont-scene { border-radius: 18px 18px 0 0; } .pont .arret { font-size: .72rem; } }

.rive-choix { padding-inline: 24px; }

/* Catalogue : la mer, la carte qui se complète, la bouteille */
.vagues { position: absolute; inset: 0 -160px 0 0; width: calc(100% + 160px); height: 100%; pointer-events: none; animation: houle 26s linear infinite; }
@keyframes houle { to { translate: -150px 0; } }
.ile svg { transition: filter .8s; filter: saturate(.6) brightness(1.06) drop-shadow(0 8px 8px rgba(20, 40, 30, .28)); }
.ile.vue svg, .ile:hover svg, .ile:focus-visible svg { filter: drop-shadow(0 8px 8px rgba(20, 40, 30, .28)); }
.ile.vue b::after { content: " ✓"; color: #6F8F7D; }
.ile[aria-pressed="true"] b::after { color: #fff; }
.bouteille { position: absolute; z-index: 2; left: 88%; top: 50%; width: 30px; padding: 0; border: 0; background: none; translate: -50% -50%; rotate: 62deg; cursor: pointer; transition: left 2.4s ease-in-out, top 2.4s ease-in-out, scale .2s; animation: flotte 2.8s ease-in-out infinite alternate; filter: drop-shadow(0 4px 4px rgba(20, 40, 30, .35)); }
.bouteille svg { display: block; width: 100%; }
.bouteille:hover, .bouteille:focus-visible { scale: 1.25; }
.bouteille:focus-visible { outline: 3px solid #E9B872; outline-offset: 3px; border-radius: 8px; }
@keyframes flotte { to { rotate: 74deg; margin-top: -8px; } }
.carnet-iles { margin: 14px 0 0; text-align: center; font-weight: 600; }
.carnet-iles b { color: #A65A52; font-size: 1.2rem; }
.bouteille-message { max-width: 640px; margin: 12px auto 0; padding: 12px 18px; border-radius: 4px; background: #FFF8EC; box-shadow: 0 10px 20px rgba(36, 54, 45, .14); font-style: italic; text-align: center; rotate: -.6deg; animation: apparait .45s ease; }
.bouteille-message[hidden] { display: none; }
.bouteille-message a { font-style: normal; font-weight: 700; }
/* Coaching : le banc et le reflet */
.banc { margin: 30px auto 6px; max-width: 640px; }
.banc-scene { position: relative; overflow: hidden; border-radius: 22px; }
.banc-scene > svg { display: block; width: 100%; height: auto; }
.banc-assis, .banc-reflet { opacity: 0; transition: opacity 1.4s; }
.assis .banc-assis { opacity: 1; }
.reflet .banc-reflet { opacity: .5; transition-duration: 3s; }
.banc-eau { animation: brume 6s ease-in-out infinite alternate; }
.point-dore { position: absolute; left: 70%; top: 38%; width: 34px; padding: 0; border: 0; background: none; cursor: pointer; animation: scintille 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px #F2C16E); }
.point-dore[hidden] { display: none; }
.point-dore svg { display: block; width: 100%; }
@keyframes scintille { 50% { scale: .68; opacity: .7; } }
.banc-asseoir { margin: 16px auto 0; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.banc-asseoir[hidden] { display: none; }
.banc-phrase { margin: 18px auto 0 !important; color: #F9DFC0; font: 800 clamp(1.25rem, 2.6vw, 1.75rem)/1.25 var(--titre); animation: apparait 1.6s ease; }
.banc-mot { margin: 10px auto 0 !important; color: #fff; font-style: italic; animation: apparait 1s ease; }
.banc-phrase[hidden], .banc-mot[hidden] { display: none; }
.au-repos .belv-monde b { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .vagues, .bouteille, .banc-eau, .point-dore { animation: none; } }

/* Fiches de formation : l'escale */
.u-escale .fiche-entete { padding-bottom: 54px; }
.escale-depart { margin-top: 26px; }
.u-escale .fiche { position: relative; }
.u-escale .fiche-bloc .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 4px solid #fff; border-radius: 50%; background: #A65A52; color: #fff; font-weight: 800; font-size: .92rem; box-shadow: 0 5px 10px rgba(36, 54, 45, .2); }
.escale-carnet { margin-bottom: 30px; padding: 24px 26px; border-radius: 6px 24px 24px 6px; border-left: 12px solid #8A6A4C; background: repeating-linear-gradient(transparent 0 33px, #EFE5D6 33px 34px), #FFFDF8; box-shadow: 0 16px 32px rgba(36, 54, 45, .14); scroll-margin-top: 100px; }
.escale-carnet[hidden] { display: none; }
.escale-carnet h2 { margin: 10px 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.moi-q, .moi-fin { display: none; }
.moi-q.actif, .moi-fin.actif { display: block; animation: apparait .45s ease; }
.moi-titre { margin: 0 0 6px; font: 800 1.15rem/1.2 var(--titre); color: var(--encre); }
.moi-q p:not(.moi-titre) { margin: 0 0 14px; color: var(--doux); }
.moi-rep { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.moi-rep button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.moi-encore { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--sauge-f); font: 600 .92rem var(--texte); text-decoration: underline; cursor: pointer; }
.moi-encore[hidden] { display: none; }
.a-noter li { cursor: pointer; transition: background .2s, translate .2s; }
.a-noter li:hover { translate: 3px 0; }
.a-noter li:focus-visible { outline: 3px solid #A65A52; outline-offset: 2px; }
.a-noter li.note { background: #F7E7C6; box-shadow: inset 0 0 0 2px #E9B872; }
.a-noter::before { content: "Touchez ce qui vous intéresse : nous le reprendrons dans votre demande."; display: block; margin-bottom: 10px; color: var(--doux); font-size: .9rem; font-style: italic; }
.notes-barre { font-weight: 700; }

/* Sous-pages : un fil commun */
.u-entreprises main section[id], .u-particuliers main section[id], .u-romande main section[id] { scroll-margin-top: 80px; }
.etage-jeu .jeu-titre:first-child { margin-top: 0; }
.onglet-note { margin: 10px 0 0 !important; color: #A65A52 !important; font-weight: 600; }
.a-cocher { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.a-cocher button { position: relative; padding: 9px 15px 9px 36px; border: 2px solid #C8AA8C; border-radius: 12px; background: #fff; color: var(--encre); font: 600 .95rem/1.2 var(--texte); text-align: left; cursor: pointer; }
.a-cocher button::before { content: ""; position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; translate: 0 -50%; border: 2px solid #8A6A4C; border-radius: 4px; background: #FFF8EC; }
.a-cocher button[aria-pressed="true"] { border-color: #3E5A4B; background: #E3ECE6; }
.a-cocher button[aria-pressed="true"]::before { content: "✓"; display: grid; place-items: center; background: #3E5A4B; border-color: #3E5A4B; color: #fff; font-size: .72rem; }
/* Sur mesure : l'atelier */
.u-entreprises main section.salle-atelier { position: relative; background: #F6E9D8; padding-top: 64px; }
.atelier-duo { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: 34px; align-items: center; max-width: 1000px; margin: 0 auto; }
.mannequin { display: block; width: 100%; max-width: 230px; margin: 0 auto; filter: drop-shadow(0 16px 18px rgba(36, 54, 45, .2)); }
.mannequin-pieces path { opacity: 0; transition: opacity .5s; }
.piece-1 { opacity: clamp(0, var(--pieces, 0), 1) !important; }
.piece-2 { opacity: clamp(0, calc(var(--pieces, 0) - 1), 1) !important; }
.piece-3 { opacity: clamp(0, calc(var(--pieces, 0) - 2), 1) !important; }
.piece-4 { opacity: clamp(0, calc(var(--pieces, 0) - 3), 1) !important; }
.u-entreprises main section.salle-tissus { background: #F2E5D6; }
.etoffes .onglet { min-height: 92px; color: var(--encre); align-content: end; background: repeating-linear-gradient(45deg, #E3D3BD 0 8px, #EADFCB 8px 16px); }
.etoffes .onglet:nth-child(2) { background: repeating-linear-gradient(90deg, #C9D8CE 0 6px, #DCE7E0 6px 12px); }
.etoffes .onglet:nth-child(3) { background: radial-gradient(#E9B872 2px, transparent 2.5px) 0 0 / 12px 12px, #F7E7C6; }
.etoffes .onglet[aria-pressed="true"] { outline: 3px solid #3E5A4B; outline-offset: -3px; }
/* Diagnostic : le bureau d'enquête */
.u-entreprises main section.salle-enquete { background: radial-gradient(#E6DCCB 1.5px, transparent 1.5px) 0 0 / 22px 22px, #FBF7F2; }
.enquete-grande { max-width: 780px; margin: 0 auto; }
.enquete-grande .enquete-bureau { height: 360px; }
.enq-notes { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.enq-notes li { padding: 8px 12px; border-left: 4px solid #A65A52; background: #FFF8EC; transition: opacity .4s; }
.js .enq-notes li:not(.vue) { opacity: .28; }
.enq-notes strong { display: block; }
.u-entreprises main section.salle-dossiers { background: #2F4A3C; color: #fff; }
.salle-dossiers h2 { color: #fff; }
body.u-entreprises .salle-dossiers .section-tete :is(h2, p) { color: #fff !important; text-shadow: none !important; }
.dossiers .onglet { background: #E9DCC9; border-radius: 14px 34px 0 0; }
.dossiers .onglet-panneau { color: var(--encre); }
.u-entreprises main section.salle-piste { background: #F4EEE6; }
.u-entreprises main section.salle-rapport { background: #E3ECE6; }
.rapport-feuille { padding: 22px 24px; border-radius: 4px; background: #FFFDF8; box-shadow: 0 16px 34px rgba(36, 54, 45, .16); rotate: -.8deg; }
.rapport-aide { margin: 0 0 12px; color: var(--doux); font-style: italic; }
.rapport-feuille .a-cocher { justify-content: flex-start; }
.u-entreprises main section.salle-suite { background: #FBF7F2; }
.chips-suite { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; padding: 0; list-style: none; }
.chips-suite li { padding: 6px 14px; border-radius: 999px; background: #F2E5D6; color: #5E4632; font-weight: 600; }
/* Certification : la salle de remise */
.u-entreprises main section.salle-remise { position: relative; background: #F7E7C6; padding-top: 84px; }
.remise-grande { max-width: 780px; margin: 0 auto; min-height: 330px; }
.u-entreprises main section.salle-preparation { background: #FFF6E6; }
/* Ateliers */
.a-cocher-tableau { max-width: 880px; margin: 0 auto; padding: 18px; border-radius: 20px; background: #1F332A; }
.a-cocher-tableau button { background: #2F4A3C; border-color: #3E5A4B; color: #F9DFC0; }
.a-cocher-tableau button[aria-pressed="true"] { background: #E9B872; border-color: #E9B872; color: #24362D; }
.u-particuliers main section.salle-horaire, .u-particuliers main section.salle-destinations { background: #F4EEE6; }
.u-particuliers main section.salle-compart { background: #F2E5D6; }
/* Suisse romande : la carte */
.u-carte .scene-page { padding-bottom: 60px; }
.u-romande main section.salle-carte { background: #EEF2EC; }
.carte-duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: 26px; align-items: center; }
.carte-romande { position: relative; }
.carte-fond { display: block; width: 100%; height: auto; }
.canton { position: absolute; left: var(--x); top: var(--y); min-width: 0; flex: none; width: auto; translate: -50% -100%; display: grid; justify-items: center; padding: 0 0 22px; border: 0; border-radius: 0; background: none !important; font: 700 .9rem/1.1 var(--titre); opacity: 1; }
.canton span { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--encre); white-space: nowrap; box-shadow: 0 4px 10px rgba(36, 54, 45, .2); transition: background .2s, color .2s; }
.canton::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 18px; translate: -50% 0; border: 3px solid #fff; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #3E5A4B; transition: background .2s, scale .25s; }
.canton:hover { translate: -50% -104%; }
.canton[aria-pressed="true"] span { background: #A65A52; color: #fff; }
.canton[aria-pressed="true"]::after { background: #A65A52; scale: 1.25; }
.c-jura { --x: 44%; --y: 15%; } .c-bienne { --x: 60%; --y: 26%; } .c-neuchatel { --x: 38%; --y: 33%; } .c-fribourg { --x: 58%; --y: 50%; } .c-vaud { --x: 33%; --y: 57%; } .c-geneve { --x: 11%; --y: 87%; } .c-valais { --x: 68%; --y: 86%; } .c-distance { --x: 88%; --y: 14%; }
.carte-panneaux .onglet-panneau { border-radius: 20px; }
.carte-panneaux .btn { margin-top: 12px; }
.u-romande main section[id="sujets"] { background: #F4EEE7; }
@media (max-width: 860px) {
  .atelier-duo, .carte-duo { grid-template-columns: minmax(0, 1fr); }
  .mannequin { max-width: 150px; }
  .canton { font-size: .68rem; padding-bottom: 16px; }
  .canton span { padding: 3px 6px; }
  .canton::after { width: 13px; height: 13px; }
  .enquete-grande .enquete-bureau { height: 300px; }
}
.voyage-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }

/* Accueil : le départ, puis la carte du pays */
.depart-accueil { margin-top: 20px; }
.scene-accueil .intro .depart-accueil p { margin: 0; font-size: 1.1rem; color: #F7E5CF; }
.salle-jura { position: relative; z-index: 2; padding: 64px 0 56px; background: #24362D; color: #fff; scroll-margin-top: 70px; }
.cj-tete { text-align: center; }
.salle-jura h2 { margin: 12px 0 10px; color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.salle-jura .cj-tete p { max-width: 60ch; margin: 0 auto; color: rgba(255, 255, 255, .84); }
.cj-chemins { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 22px; font-weight: 600; }
.cj-chemin { padding: 9px 18px; border: 2px solid #E9B872; border-radius: 999px; background: transparent; color: #fff; font: 700 1rem var(--texte); cursor: pointer; transition: background .2s, color .2s, translate .2s; }
.cj-chemin:hover { translate: 0 -3px; }
.cj-defile { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.cj-carte { position: relative; width: 100%; min-width: 980px; max-width: 1560px; margin: 0 auto; aspect-ratio: 1440 / 860; }
.cj-fond { display: block; width: 100%; height: 100%; filter: saturate(calc(.34 + var(--v, 0) * .083)) brightness(calc(1.06 - var(--v, 0) * .0075)); transition: filter 1.8s ease; }
.cj-trait-fond { stroke: #FBF7F2; stroke-opacity: .75; stroke-width: 6; stroke-dasharray: 3 15; stroke-linecap: round; }
.cj-trait { stroke: #A65A52; stroke-width: 7; stroke-linecap: round; }
.cj-drapeau { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; scale: .3; transition: opacity .6s, scale .6s cubic-bezier(.3, 1.6, .5, 1); }
.pays-complet .cj-drapeau { opacity: 1; scale: 1; }
.cj-lieu { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; min-width: 110px; padding: 0; border: 0; background: none; cursor: pointer; }
.cj-lieu::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 110px; height: 90px; translate: -50% 0; border-radius: 50%; }
.cj-lieu span { display: inline-block; padding: 6px 15px; border-radius: 999px; background: #FFFDF8; color: var(--encre); font: 800 1.02rem/1.1 var(--titre); box-shadow: 0 6px 14px rgba(20, 32, 26, .32); transition: background .2s, color .2s, scale .2s; }
.cj-grand span { padding: 9px 20px; font-size: 1.25rem; background: #A65A52; color: #fff; }
.cj-grand::before { width: 200px; height: 270px; }
.cj-lieu:hover span, .cj-lieu:focus-visible span { scale: 1.1; }
.cj-lieu:focus-visible { outline: none; }
.cj-lieu:focus-visible span { outline: 3px solid #E9B872; outline-offset: 2px; }
.cj-lieu.vu span::after { content: " ✓"; color: #6F8F7D; }
.cj-grand.vu span::after { color: #F9DFC0; }
@media (prefers-reduced-motion: no-preference) {
  .cj-cabine { animation: cjCabine 9s ease-in-out infinite alternate; }
  .cj-train { animation: cjTrain 14s ease-in-out infinite alternate; }
  .cj-bateau { animation: cjBateau 7s ease-in-out infinite alternate; }
  .cj-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: cjFlamme 1.1s ease-in-out infinite alternate; }
  .cj-lettre { animation: cjLettre 6s ease-in-out infinite alternate; }
  .cj-aiguille { transform-origin: 170px 294px; animation: tourne 12s linear infinite; }
  .cj-soleil { animation: cjSoleil 8s ease-in-out infinite alternate; }
}
@keyframes cjCabine { to { translate: 0 200px; } }
@keyframes cjTrain { to { translate: 360px 0; } }
@keyframes cjBateau { to { translate: 34px -6px; rotate: 2deg; } }
@keyframes cjFlamme { to { scale: .86 1.12; } }
@keyframes cjLettre { to { translate: 24px -22px; rotate: 8deg; } }
@keyframes cjSoleil { to { translate: 0 -8px; } }

/* La carte tient à l'écran, l'aperçu du lieu reste visible pendant la lecture */
@media (min-width: 1001px) { .cj-carte { max-width: min(1560px, calc((100svh - 130px) * 1.674)); } }

@media (max-width: 620px) {
}

/* Le retour à la carte du site, depuis chaque univers */
.retour-carte { position: fixed; z-index: 41; left: 18px; top: 96px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px; background: #24362D; color: #fff; font-weight: 600; font-size: .88rem; text-decoration: none; box-shadow: 0 8px 18px rgba(20, 32, 26, .3); transition: translate .2s, background .2s; }
.retour-carte:hover, .retour-carte:focus-visible { translate: 0 -2px; background: #3E5A4B; color: #fff; }
.retour-carte svg { width: 22px; height: 22px; }
.retour-carte b { padding: 1px 7px; border-radius: 999px; background: #E9B872; color: #24362D; font-size: .78rem; }
.retour-carte b[hidden] { display: none; }
.dest-carte { display: inline-block; margin-bottom: 18px; padding: 8px 18px; border-radius: 999px; background: #24362D; color: #fff; font-weight: 700; text-decoration: none; }
.dest-carte:hover { background: #3E5A4B; color: #fff; }
/* Sur téléphone, le bouton rejoint le bas de l'écran, à côté du contact rapide */
@media (max-width: 760px) { .retour-carte { left: 76px; top: auto; bottom: 16px; } .billet-barre:not([hidden]) ~ .retour-carte, .u-passerelle .retour-carte { bottom: 66px; left: 12px; } .retour-carte span { font-size: .82rem; } }

/* La carte n'a plus de cadre : le paysage occupe toute la largeur, du ciel jusqu'au sable */
.salle-jura { overflow: hidden; background: none; color: var(--encre); padding-bottom: 28px; }
.salle-jura::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#BFD6CF, #F7E7C6 42%, #F7E7C6 62%, #E9D3BC 62%); filter: saturate(calc(.34 + var(--v, 0) * .083)) brightness(calc(1.06 - var(--v, 0) * .0075)); transition: filter 1.8s ease; }
.salle-jura > * { position: relative; }
.salle-jura h2 { color: var(--encre); }
.salle-jura .cj-tete p { color: #3F5247; }
.cj-chemin { border-color: #3E5A4B; color: #24362D; background: rgba(255, 255, 255, .55); }
.cj-grand::before { width: 160px; height: 210px; }
@media (min-width: 1001px) { .cj-defile { overflow: visible; } .cj-fond { overflow: visible; } }
@media (max-width: 1000px) { .cj-fond { overflow: hidden; } }

/* Les destinations : tous les univers du site, sur deux rangées centrées */
.dest-carte { display: table; margin: 0 auto 20px; }
.dest-sur { display: block; }
.dest-grille { display: flex; flex-wrap: wrap; justify-content: center; }
.dest { flex: 0 1 calc(25% - 14px); min-width: 210px; }
.dest-f { background: #DCE7E0; } .dest-l { background: #ECE7F2; }
.dest:hover .dest-bateau, .dest:focus-visible .dest-bateau { translate: 30px -4px; }
.dest:hover .dest-feuille, .dest:focus-visible .dest-feuille { translate: 0 -8px; }
@media (max-width: 560px) { .dest { flex: 0 1 calc(50% - 6px); min-width: 0; } }

/* La carte : l'aperçu reste visible, et le bouton d'entrée suit le lieu choisi */
.salle-jura { overflow: clip; }

/* Le logo : une plaque blanche suspendue au haut de la page, plus discrète au défilement */
.logo { display: block; flex: none; align-self: flex-start; width: 118px; height: 84px; transition: width .3s; }
.logo img { display: block; box-sizing: border-box; width: 118px; height: 106px; max-width: none; padding: 10px 9px 9px; object-fit: contain; background: #fff; border-radius: 0 0 20px 20px; border-bottom: 4px solid #8AA997; box-shadow: 0 10px 24px rgba(36, 54, 45, .2); transition: width .3s, height .3s, padding .3s, translate .25s; }
.logo:hover img, .logo:focus-visible img { padding-top: 15px; height: 111px; }
.entete.plein .logo { width: 92px; }
.entete.plein .logo img { width: 92px; height: 84px; padding: 7px 8px 6px; }
.pied .logo-pied { box-sizing: border-box; width: 136px; height: 120px; padding: 12px; object-fit: contain; background: #fff; border-radius: 20px; border-bottom: 4px solid #8AA997; }
@media (max-width: 700px) {
  .logo { width: 96px; }
  .logo img, .logo:hover img, .logo:focus-visible img { width: 96px; height: 86px; padding: 8px 8px 7px; }
  .entete.plein .logo { width: 80px; }
  .entete.plein .logo img { width: 80px; height: 72px; padding: 6px 7px 5px; }
}

/* La carte du site se range dans l'en-tête, juste à droite du logo */
@media (min-width: 761px) { .retour-carte { z-index: 51; top: 24px; left: calc(max(18px, (100vw - 1400px) / 2) + 130px); } }

/* Institutions : le pont expliqué dès le haut, qui se construit au fil des décisions */
.u-passerelle main section.salle-pont { background: #EAF0EA; }
.u-passerelle main section.salle-rive { background: #EAF0EA; }
.u-passerelle main section.salle-format { background: linear-gradient(#DCE7E0, #F3ECE0); }
.u-passerelle main section.salle-traversee { background: #F3ECE0; padding-top: 0; }
.pont-riviere { position: relative; max-width: 1120px; margin-inline: auto; }
.pont-scene { border-radius: 30px; }
.pont-etiq { position: absolute; top: 7%; padding: 6px 14px; border-radius: 999px; background: #FFF8EC; color: var(--encre); font: 800 clamp(.78rem, 1.6vw, 1.1rem)/1.1 var(--titre); box-shadow: 0 4px 12px rgba(36, 54, 45, .18); }
.pont-etiq-g { left: 3%; } .pont-etiq-d { right: 3%; }
.planche { opacity: clamp(.12, calc(var(--pont, 0) - var(--n)), 1); }
.pont-marcheurs { transform: translate(calc(190px + var(--pont, 0) * 155px), calc(200px + sin(var(--pont, 0) * 45deg) * 31px)); }
.salle-pont .jeu-titre { margin-top: 26px; }
.pont-idee { max-width: 760px; margin-inline: auto; }
.pont-idee .onglets-tete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pont-idee .onglet { min-width: 0; text-align: center; }
.pont-idee .onglet-panneau p { margin: 0; text-align: center; }
.pont .arrets { border-radius: 24px 24px 0 0; }
.salle-traversee .jeu-titre { margin-bottom: 18px; }
.autre-rive { padding: 0 18px 30px; background: linear-gradient(#F3ECE0, #EEF2EC); }
.autre-rive svg { height: auto; }
.autre-rive p { max-width: 900px; margin: 18px auto 12px; padding: 0; background: none; color: var(--encre); }
.pont-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pont-choix li { padding: 6px 14px; border-radius: 999px; background: #E9B872; color: #24362D; font-weight: 600; font-size: .92rem; }
.pont-choix li:not(.rempli) { display: none; }
/* La barre : le même pont, en petit, avec la prochaine planche à poser */
.dossier-barre { flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 8px 20px 9px; border-radius: 20px; white-space: normal; }
.dossier-barre small { font-weight: 700; font-size: .78rem; color: #5E4632; }
.dossier-barre b { flex-basis: 100%; order: 3; color: var(--encre); font-size: .88rem; text-align: center; }
.pb-pont { position: relative; display: flex; gap: 3px; width: min(230px, 40vw); padding-top: 14px; overflow: visible; }
.dossier-barre .pb-pont i { flex: 1; height: 10px; border-radius: 3px; }
.pb-pont i:nth-child(1) { --n: 0; } .pb-pont i:nth-child(2) { --n: 1; } .pb-pont i:nth-child(3) { --n: 2; } .pb-pont i:nth-child(4) { --n: 3; }
.dossier-barre .pb-pont i { display: block; border: 2px solid #8A6A4C; background: #C8AA8C; opacity: clamp(.25, calc(var(--pont, 0) - var(--n)), 1); transition: opacity .5s; }
.pb-pont u { position: absolute; top: 0; left: calc(var(--pont, 0) * 25%); width: 12px; height: 13px; translate: -50% 0; border-radius: 6px 6px 2px 2px; background: #A65A52; text-decoration: none; transition: left .8s cubic-bezier(.5, 0, .3, 1); }
.dossier-barre span.pb-pont { flex: 0 1 auto; max-width: none; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .pb-pont u { transition: none; } }
@media (max-width: 860px) {
  .dossier-barre { justify-content: center; left: 12px; }
  .dossier-barre b { display: block; font-size: .78rem; }
  .dossier-barre small { font-size: .68rem; }
  .dossier-barre span.pb-pont { flex: 1 1 0; }
  .pont-etiq { top: 4%; padding: 3px 9px; }
  .pont-scene { border-radius: 18px; }
}

/* Retours visiteurs : plus de bandeau au défilement, seul le menu reste */
.entete { pointer-events: none; }
.entete .wrap > * { pointer-events: auto; }
.entete.plein { background: none; backdrop-filter: none; box-shadow: none; }

/* Les barres (billet, pont) passent en haut : elles ne recouvrent plus l'action suivante */
.billet-barre { top: 92px; bottom: auto; }
.u-passerelle .belv-son { bottom: 22px; }
@media (max-width: 860px) {
  .billet-barre { top: 90px; left: 12px; right: 12px; }
  .billet-barre:not([hidden]) ~ .retour-carte, .u-passerelle .retour-carte { bottom: 16px; left: 76px; }
}

/* La carte : tout sur un écran à l'ordinateur, des liens directs */
.cj-fond, .salle-jura::before { filter: none; }
.cj-defile { overflow: visible; }
.cj-carte { min-width: 0; }
.cj-chemin { display: inline-block; text-decoration: none; }
.cj-chemin:hover { background: #3E5A4B; color: #fff; }
.cj-lieu { display: block; text-align: center; text-decoration: none; color: inherit; z-index: 1; }
.cj-lieu:hover, .cj-lieu:focus-visible { z-index: 6; }
.cj-lieu small { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 210px; translate: -50% 4px; padding: 8px 12px; border-radius: 12px; background: #FFFDF8; color: var(--encre); font-size: .84rem; line-height: 1.25; box-shadow: 0 8px 18px rgba(20, 32, 26, .3); opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
@media (min-width: 1001px) {
  .salle-jura { box-sizing: border-box; min-height: 100svh; padding: 88px 0 10px; scroll-margin-top: 0; }
  .salle-jura h2 { margin: 0 0 2px; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
  .cj-tete .etiq { display: none; }
  .cj-chemins { margin: 8px 0 6px; }
  .cj-carte { max-width: min(1560px, calc((100svh - 232px) * 1.674)); }
}
/* Au téléphone : un aperçu de la carte, puis les lieux en liste, sans défilement de côté */
@media (max-width: 760px) {
  .salle-jura { padding-bottom: 24px; }
  .cj-carte { aspect-ratio: auto; }
  .cj-fond { height: auto; }
  .cj-lieu { position: relative; left: auto; top: auto; translate: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-width: 0; margin: 8px 14px 0; padding: 11px 14px; border-radius: 16px; background: #FFFDF8; text-align: left; box-shadow: 0 6px 14px rgba(20, 32, 26, .18); }
  .cj-lieu::before { display: none; }
  .cj-lieu::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; color: #3E5A4B; font-weight: 800; font-size: 1.2rem; }
  .cj-lieu span { grid-column: 1; padding: 0; background: none; box-shadow: none; font-size: 1.05rem; }
  .cj-lieu small, .cj-lieu:hover small, .cj-lieu:focus-visible small, .cj-lieu[data-lieu]:is(:hover, :focus-visible) small, .cj-lieu[data-lieu] small { position: static; grid-column: 1; width: auto; translate: none; padding: 0; background: none; box-shadow: none; opacity: 1; color: var(--doux); }
  .cj-grand { background: #A65A52; }
  .cj-grand span, .cj-lieu.cj-grand small, .cj-grand::after { color: #fff; }
  .cj-lieu:hover span, .cj-lieu:focus-visible span { scale: 1; }
}

/* Au téléphone, tout un peu moins grand */
@media (max-width: 600px) {
  html { font-size: 87.5%; }
  .section { padding-block: 64px; }
}

/* La question d'orientation sous « En bref » */
.fiche-cote { display: grid; gap: 20px; min-width: 0; }
.fiche-cote .aside { position: static; }
.fiche-cote .escale-carnet { margin: 0; padding: 20px; scroll-margin-top: 100px; }
.fiche-cote .escale-carnet h2 { font-size: 1.3rem; }
@media (max-width: 980px) { .fiche-cote { order: -1; } }

/* Le descriptif de chaque session */
.session h3 a { color: inherit; text-decoration: none; }
.session h3 a:hover { text-decoration: underline; }
.session-descriptif { display: inline-block; margin-top: 6px; color: var(--sauge-f); font-weight: 700; font-size: .92rem; }
.etablis, .ateliers-duo { overflow-anchor: none; }
.jeu-titre { text-wrap: balance; }

/* Le menu s'efface en descendant et revient en remontant (il reste si on l'utilise au clavier ou s'il est ouvert) */
.entete { transition: background .3s, box-shadow .3s, translate .3s; }
html.menu-cache .entete:not(:has(:focus-visible, details[open])) { translate: 0 -130px; }
.billet-barre { transition: opacity .25s, top .3s; }
html.menu-cache .billet-barre { top: 12px; }
@media (min-width: 761px) {
  .retour-carte { transition: translate .3s, background .2s; }
  html.menu-cache .retour-carte { translate: 0 -130px; }
}
@media (prefers-reduced-motion: reduce) { .entete, .billet-barre, .retour-carte { transition: none; } }
.session-prix { margin: 6px 0 0; color: var(--encre); font-weight: 700; }

/* « Votre chemin » : le lieu conseillé se signale et dit qu'il suffit de le toucher */
.cj-chemin { cursor: pointer; }
.cj-chemin.choisi, .cj-chemin.choisi:hover { background: #3E5A4B; border-color: #3E5A4B; color: #fff; }
.cj-lieu.cible { z-index: 5; scroll-margin: 100px 0; }
.cj-lieu.cible span { background: #E9B872; color: #24362D; animation: mAppel 2.2s ease-in-out infinite; }
.cj-lieu.cible small::after { content: "Touchez encore pour entrer →"; display: block; margin-top: 4px; color: #A65A52; font-weight: 800; }
@media (max-width: 760px) {
  .cj-lieu.cible, .cj-grand.cible { background: #F9DFA8; }
  .cj-lieu.cible span { background: none; animation: none; }
  .cj-lieu.cible small, .cj-lieu.cible:hover small { translate: none; color: var(--encre); }
  .cj-lieu.cible::after { color: #24362D; }
  .cj-lieu.cj-grand.cible span, .cj-lieu.cj-grand.cible small { color: #24362D; }
}
@media (prefers-reduced-motion: reduce) { .cj-lieu.cible span { animation: none; } }
@media (max-width: 760px) { .cj-lieu.cible small::after { content: "Touchez pour entrer →"; } }

/* La carte : le bouton d'entrée à côté du lieu choisi, sa description en bas */
.cj-entrer { position: absolute; z-index: 4; translate: -50% 26px; padding: 9px 18px; border-radius: 999px; background: #A65A52; color: #fff; font: 800 1rem/1.1 var(--titre); text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px rgba(20, 32, 26, .4), 0 0 0 3px #fff; }
.cj-entrer[hidden], .cj-apercu[hidden] { display: none; }
.cj-entrer.au-dessus { translate: -50% calc(-100% - 26px); }
.cj-entrer:hover, .cj-entrer:focus-visible { background: #3E5A4B; color: #fff; }
.cj-entrer.apparait { animation: cjEntrer .5s cubic-bezier(.3, 1.6, .5, 1), mAppel 2.2s ease-in-out .6s infinite; }
@keyframes cjEntrer { from { opacity: 0; scale: .6; } }
.cj-apercu { display: grid; gap: 2px; width: min(720px, 90%); margin: 12px auto 0; padding: 10px 20px; border-radius: 18px; background: #FFFDF8; color: var(--encre); text-align: center; box-shadow: 0 12px 26px rgba(20, 32, 26, .25); }
.cj-apercu b { font: 800 1.1rem/1.2 var(--titre); }
.cj-apercu span { color: var(--doux); font-size: .95rem; line-height: 1.3; }
@media (min-width: 761px) { .cj-lieu small { display: none; } }
@media (min-width: 1001px) { .salle-jura > .cj-apercu { position: absolute; z-index: 7; left: 50%; bottom: 12px; translate: -50% 0; margin: 0; } }
@media (max-width: 760px) { .cj-entrer, .cj-apercu { display: none; } }
@media (prefers-reduced-motion: reduce) { .cj-entrer.apparait { animation: none; } }

/* À propos : le choix de l'établi et le profil tiennent sur le même écran */
.poste-equipe.section { padding: 34px 0 8px; }
.poste-equipe .section-tete { margin-bottom: 14px; max-width: 900px; }
.poste-equipe .section-tete h2 { margin: 6px 0 4px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.poste-equipe .section-tete p { margin: 0; font-size: .95rem; line-height: 1.35; }
.poste-equipe .etablis button { padding: 8px 14px; }
:is(#joanna, #jonathan).section { padding: 14px 0 36px; }
:is(#joanna, #jonathan) .section-media { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; }
:is(#joanna, #jonathan) .section-tete { margin: 0; text-align: left; }
:is(#joanna, #jonathan) h2 { margin: 4px 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
:is(#joanna, #jonathan) .prose { font-size: .95rem; line-height: 1.4; }
:is(#joanna, #jonathan) .prose p { margin: 0 0 6px; }
:is(#joanna, #jonathan) .prose ul { margin: 0; }
:is(#joanna, #jonathan) .prose li { margin: 0 0 2px; }
:is(#joanna, #jonathan) .section-media img { display: block; width: 100%; height: min(42svh, 340px); object-fit: cover; object-position: 50% 15%; border-radius: 24px; }
@media (max-width: 760px) {
  :is(#joanna, #jonathan) .section-media { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  :is(#joanna, #jonathan) .section-media > div:last-child { order: -1; }
  :is(#joanna, #jonathan) .section-media img { width: auto; height: 180px; aspect-ratio: 1; margin-inline: auto; }
}

:is(#joanna, #jonathan) .prose { margin-inline: 0 !important; max-width: none; }
.autre-rive .gare-sortie { margin-top: 18px; padding: 0; }

/* À l'ordinateur, chaque étape du parcours occupe un écran : rien de la suivante ne vient distraire */
@media (min-width: 761px) {
  .etage { min-height: 100svh; box-sizing: border-box; }
  :is(.u-entreprises, .u-particuliers, .u-coaching, .u-passerelle, .u-horloger, .guide-conseils) main section.section[id]:not(.poste-equipe, #joanna, #jonathan) { box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 84px 36px; }
}

/* Des titres plus compacts pour que chaque étape tienne sur un écran */
@media (min-width: 761px) {
  :is(.u-entreprises, .u-particuliers, .u-coaching, .u-passerelle, .u-horloger, .guide-conseils) main section.section[id] .section-tete { margin-top: 0; margin-bottom: 18px; }
  :is(.u-entreprises, .u-particuliers, .u-coaching, .u-passerelle, .u-horloger, .guide-conseils) main section.section[id] .section-tete h2 { margin-block: 6px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; }
  :is(.u-entreprises, .u-particuliers, .u-coaching, .u-passerelle, .u-horloger, .guide-conseils) main section.section[id] .section-tete p { margin-block: 0; }
  .u-coaching main section.section[id] .section-tete { padding-block: 14px; }
  .sentier:nth-child(n) { margin-top: 0; padding: 26px 22px 20px; gap: 8px; }
  .sentiers-guide { margin-top: 16px; }
  .salle-pont .pont-riviere { max-width: min(1120px, calc((100svh - 500px) * 2.63)); }
  .salle-pont .jeu-titre { margin: 12px 0 10px; }
}
/* Le mur d'outils : le détail reste à portée de clic */
.outils-plus { max-width: 780px; margin: 14px auto 0; }
.outils-plus summary { width: fit-content; margin: 0 auto; color: var(--sauge-f); font-weight: 700; cursor: pointer; }
.outils-plus[open] summary { margin-bottom: 10px; }

/* Les sentiers et leur consigne tiennent sur un écran */
@media (min-width: 761px) {
  .sentier p, .sentier li { font-size: .95rem; line-height: 1.35; }
  .sentier ul { margin-block: 2px; }
  .sentiers-guide { padding: 12px 24px; }
  .sentiers-guide h3 { margin: 0; font-size: 1.3rem; }
  .sentiers-guide p { margin: 2px 0 8px; }
}

@media (min-width: 761px) { #pause svg { max-height: 24svh; } }

/* Les entrées cachées de la cave */
.ascenseur a.asc-cave { opacity: .35; }
.ascenseur a.asc-cave:hover, .ascenseur a.asc-cave:focus-visible { opacity: 1; }
.pied-trappe { display: none; width: 34px; margin: 0 0 10px; opacity: .5; }
@media (max-width: 1100px) { .pied-trappe { display: block; } }
.dest-m { background: #F2E5D6; }

/* La cave : de la pierre, de la pénombre et une lanterne */
.cave { position: relative; min-height: 100svh; box-sizing: border-box; padding: 104px 0 44px; overflow: hidden; color: #FBF1E0; --mx: 50%; --my: 42%; background: repeating-linear-gradient(0deg, rgba(90, 70, 52, .35) 0 2px, transparent 2px 46px), repeating-linear-gradient(90deg, rgba(90, 70, 52, .22) 0 2px, transparent 2px 92px), #3B2F24; }
.cave-nuit { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle 340px at var(--mx) var(--my), transparent 0 32%, rgba(30, 22, 15, .6) 66%, rgba(30, 22, 15, .93) 100%); }
.cave-lanterne { position: absolute; z-index: 5; left: var(--mx); top: var(--my); width: 34px; translate: 16px -20px; pointer-events: none; filter: drop-shadow(0 0 14px rgba(249, 223, 168, .9)); }
.cave .wrap { position: relative; }
.cave-tete { position: relative; z-index: 4; max-width: 640px; margin: 0 auto 22px; text-align: center; }
.cave-tete h1 { margin: 0 0 6px; color: #FBF1E0; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.cave-tete p { margin: 0; color: #E9D3BC; }
.cave-rang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; margin-bottom: 26px; padding: 0 16px; border-bottom: 14px solid #6E5238; box-shadow: 0 10px 14px rgba(30, 22, 15, .5); }
.cave-objet { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 10px; color: #FBF1E0; text-align: center; text-decoration: none; transition: translate .2s; }
.cave-objet:hover, .cave-objet:focus-visible { translate: 0 -6px; color: #F9DFA8; }
.cave-objet svg { display: block; height: clamp(84px, 13svh, 120px); width: auto; }
.cave-objet strong { font: 800 1.02rem/1.15 var(--titre); }
.cave-objet small { color: #E9D3BC; font-size: .84rem; line-height: 1.25; }
.cave-sortie { position: relative; z-index: 4; margin: 0; text-align: center; }
.cave-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: cjFlamme 1.1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .cave-flamme { animation: none; } }
@media (max-width: 760px) {
  .cave-rang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cave-nuit { background: radial-gradient(circle 260px at var(--mx) var(--my), transparent 0 40%, rgba(30, 22, 15, .35) 75%, rgba(30, 22, 15, .6) 100%); }
}

/* L'histoire de Marthe */
.m-temps { box-sizing: border-box; padding: 84px 0 40px; background: #F6EEE3; scroll-margin-top: 0; }
.m-temps:nth-child(even) { background: #EEF2EC; }
@media (min-width: 761px) { .m-temps { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; } }
.js .m-verrou { display: none; }
.m-ouverture { text-align: center; background: linear-gradient(#DCE7E0, #F6EEE3); }
.m-ouverture h1 { margin: 12px auto 10px; max-width: 18ch; color: var(--encre); font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; }
.m-chapeau { color: var(--doux); font-size: 1.2rem; }
.m-ouverture .btns { justify-content: center; }
.m-trait { display: block; margin: 18px auto 0; border: 0; background: none; color: var(--doux); font: inherit; text-decoration: underline; cursor: pointer; }
.m-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.m-recit h2 { margin: 10px 0 12px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; }
.m-recit p { color: var(--encre); font-size: 1.08rem; line-height: 1.5; }
.js .m-apres:not(.vu) { display: none; }
.m-apres.vu { animation: apparait .6s ease; }
.m-apres .gare-sortie { justify-content: flex-start; margin: 14px 0 0; padding: 0; }
.m-gens { display: flex; justify-content: center; align-items: flex-end; gap: 10px; }
.m-gens svg { width: 72px; height: auto; }
.m-bulle { min-height: 2.8em; display: grid; place-items: center; margin: 4px auto 8px; color: var(--encre); font-weight: 700; text-align: center; }
.m-ecran { position: relative; overflow: hidden; border: 6px solid #3E5A4B; border-radius: 16px; background: #FFFDF8; box-shadow: 0 16px 30px rgba(36, 54, 45, .18); }
.m-barre { display: flex; align-items: center; gap: 5px; padding: 7px 12px; background: #DCE7E0; color: #3E5A4B; font-weight: 700; font-size: .86rem; }
.m-barre i { width: 9px; height: 9px; border-radius: 50%; background: #8AA997; }
.m-barre i:last-of-type { margin-right: 8px; }
.m-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 34px 16px; }
.m-boutons[hidden] { display: none; }
.m-choix { padding: 11px 16px; border: 2px solid #C8AA8C; border-radius: 10px; background: #fff; color: var(--encre); font: 700 .96rem var(--texte); cursor: pointer; transition: background .2s, scale .15s; }
.m-choix:hover { background: #F2E5D6; }
.m-choix.fait { border-color: #3E5A4B; background: #3E5A4B; color: #fff; }
.m-choix.montre { animation: mAppel 1.8s ease-in-out infinite; border-color: #E9B872; }
.m-curseur { position: absolute; left: 50%; top: 110%; width: 22px; transition: left .6s ease, top .6s ease; pointer-events: none; }
.m-lettre { padding: 16px 20px 0; color: var(--encre); font-size: .95rem; line-height: 1.5; }
.m-lettre em { color: #3E5A4B; font-style: normal; font-weight: 700; }
.m-envoyer { background: #A65A52; border-color: #A65A52; color: #fff; }
.m-envoyer:hover { background: #8A4A44; }
.m-envoyer:disabled { background: #3E5A4B; border-color: #3E5A4B; cursor: default; }
.m-enveloppe { position: absolute; right: 16px; bottom: 16px; width: 44px; opacity: 0; }
.envole .m-enveloppe { animation: mEnvol 1.6s ease-out forwards; }
@keyframes mEnvol { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 90px -150px; rotate: 18deg; } }
.m-fin { text-align: center; background: linear-gradient(#EEF2EC, #F6EEE3); }
.m-fin .wrap { max-width: 760px; }
.m-fin p { color: var(--encre); font-size: 1.12rem; line-height: 1.5; }
.m-fin blockquote { margin: 18px 0; color: #A65A52; font: 800 clamp(1.9rem, 4.4vw, 3.2rem)/1.1 var(--titre); }
.m-fin .m-note { color: var(--doux); font-size: .98rem; font-style: italic; }
.m-fin h2 { margin: 16px 0 10px; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.m-fin .btns { justify-content: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .m-choix.montre, .envole .m-enveloppe { animation: none; } }
@media (max-width: 760px) {
  .m-temps { padding: 76px 0 36px; }
  .m-duo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .m-gens svg { width: 54px; }
  .m-boutons { padding: 20px 12px; }
}

.cave-nuit, .cave-lanterne { display: none; }
.js .cave-nuit, .js .cave-lanterne { display: block; }

/* Les deux nageuses : discrètes, le temps d'une traversée */
.cj-eau { position: absolute; left: 67.2%; top: 71.3%; width: 30.8%; height: 21.4%; overflow: hidden; border-radius: 50%; pointer-events: none; }
.nageuse { position: absolute; left: -44px; width: 34px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; animation: nageAller 13s linear forwards; }
.nageuse.retour { animation-name: nageRetour; }
.nageuse svg { display: block; width: 100%; animation: nageFlot 1.5s ease-in-out infinite alternate; }
.nageuse.attrapee { animation-play-state: paused; }
.nageuse.attrapee svg { animation: nageHop .7s ease-out forwards; }
@keyframes nageAller { from { left: -44px; } to { left: 100%; } }
@keyframes nageRetour { from { left: 100%; } to { left: -44px; } }
@keyframes nageFlot { from { translate: 0 -2px; rotate: -4deg; } to { translate: 0 3px; rotate: 4deg; } }
@keyframes nageHop { 50% { translate: 0 -22px; rotate: 10deg; } 100% { translate: 0 -6px; opacity: 0; } }
.nageuses-bravo { position: fixed; z-index: 60; left: 50%; bottom: 84px; translate: -50% 0; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 22px; border-radius: 18px; background: #FFF8EC; color: var(--encre); font-weight: 700; text-align: center; box-shadow: 0 12px 26px rgba(36, 54, 45, .28); animation: apparait .4s ease; }

/* L'histoire de Marthe, en grand : la page reprend ses couleurs avec elle */
[data-marthe] { --m: 0; }
.m-temps .wrap { width: min(1560px, 100% - 64px); }
.m-elle { transform-origin: 50% 100%; scale: calc(.78 + var(--m) * .3); filter: saturate(calc(.12 + var(--m) * .88)); transition: scale 1s cubic-bezier(.3, 1.5, .5, 1), filter 1.2s; }
.m-temps.m-gris { background: #DADAD5; }
.m-temps.m-aube { background: #E9E4D8; }
.m-temps.m-jour { background: #F4E9D2; }
.m-temps.m-nuit { background: radial-gradient(circle at 72% 30%, #4F6B5B 0, #2F4A3C 34%, #24362D 70%); color: #FBF1E0; transition: background .8s; }
.m-nuit .m-recit p, .m-nuit h2, .m-nuit .m-bulle { color: #FBF1E0; }
.m-temps.m-nuit.m-allume { background: radial-gradient(circle at 72% 30%, #FFF3D0 0, #F9DFA8 45%, #E9B872 100%); }
.m-nuit.m-allume .m-recit p, .m-nuit.m-allume h2 { color: var(--encre); }
/* Ouverture */
.m-ouverture { min-height: 100svh; }
.m-ouverture h1 { max-width: 15ch; font-size: clamp(3rem, 8.4vw, 7.6rem); line-height: .98; }
.m-chapeau { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.m-souris { display: block; width: clamp(70px, 13svh, 130px); margin: 0 auto 6px; transform-origin: 50% 90%; animation: mTremble 2.6s ease-in-out infinite; }
.m-souris:hover { animation-duration: .3s; }
@keyframes mTremble { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -5deg; } 92% { rotate: 5deg; } 95% { rotate: -3deg; } 98% { rotate: 2deg; } }
/* Texte en grand, qui monte à l'arrivée */
.m-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 72px); }
.m-recit h2 { font-size: clamp(2.4rem, 5.2vw, 5.4rem); line-height: 1.02; }
.m-recit p { font-size: clamp(1.1rem, 1.65vw, 1.55rem); line-height: 1.4; }
.js .m-temps:not(.en-vue) :is(.m-recit > :not(.m-apres), .m-scene) { opacity: 0; }
.en-vue .m-recit > :not(.m-apres) { animation: mMonte .8s cubic-bezier(.2, .8, .3, 1) both; }
.en-vue .m-recit > :nth-child(2) { animation-delay: .15s; }
.en-vue .m-recit > :nth-child(3) { animation-delay: .4s; }
.en-vue .m-recit > :nth-child(4) { animation-delay: .7s; }
.en-vue .m-scene { animation: mEntre .9s .25s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mMonte { from { opacity: 0; translate: 0 34px; } }
@keyframes mEntre { from { opacity: 0; scale: .92; translate: 40px 0; } }
/* La scène en grand */
.m-gens svg { width: min(13vw, 22svh); min-width: 84px; }
.m-bulle { min-height: 2.4em; font-size: clamp(1.1rem, 2vw, 1.9rem); font-family: var(--titre); line-height: 1.15; }
.m-ecran { border-width: 10px; border-radius: 24px; box-shadow: 0 26px 50px rgba(36, 54, 45, .28); }
.m-barre { padding: 10px 16px; font-size: 1rem; }
.m-barre i { width: 12px; height: 12px; }
.m-boutons { gap: 14px; padding: clamp(24px, 4.5svh, 52px) 18px; }
.m-choix { padding: 16px 22px; border-width: 3px; border-radius: 14px; font-size: clamp(1rem, 1.35vw, 1.3rem); transition: background .2s, scale .15s, translate .15s; }
.m-choix:hover { scale: 1.05; translate: 0 -2px; }
.m-choix:active { scale: .95; }
.m-choix.fait { animation: mPop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes mPop { 40% { scale: 1.18; } }
.m-secoue { animation: mSecoue .4s; }
@keyframes mSecoue { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.m-curseur { width: 34px; transition: left .3s ease-out, top .3s ease-out; }
.m-lettre { font-size: clamp(1rem, 1.3vw, 1.25rem); }
/* Le dernier bouton bat comme un cœur, et la lettre s'envole loin */
.m-nuit .m-ecran { overflow: visible; }
.m-envoyer { padding: 22px 38px; font-size: clamp(1.15rem, 1.8vw, 1.7rem); }
.m-envoyer:not(:disabled) { animation: mCoeur 1.3s ease-in-out infinite; }
@keyframes mCoeur { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.07; } 26% { scale: 1.02; } 34% { scale: 1.06; } }
.m-enveloppe { width: 76px; z-index: 3; }
@keyframes mEnvol { 0% { opacity: 1; translate: -160px 0; scale: .6; } 35% { opacity: 1; scale: 1.5; } 100% { opacity: 0; translate: 40vw -70svh; rotate: 24deg; scale: .5; } }
/* La fin */
.m-temps.m-fin { background: linear-gradient(#F9DFA8, #FBF1E0 62%); }
.m-fin .wrap { width: min(1200px, 100% - 48px); max-width: none; }
.m-fin .m-gens svg { width: min(9vw, 12svh); }
.m-fin p { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.m-fin blockquote { margin: 14px 0; font-size: clamp(2.8rem, 8vw, 7.4rem); line-height: 1; }
.m-fin blockquote span { display: inline-block; }
.en-vue blockquote span { animation: mMot .7s calc(.5s + var(--i) * .22s) cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes mMot { from { opacity: 0; translate: 0 44px; scale: .8; } }
.m-fin h2 { font-size: clamp(1.5rem, 3vw, 2.6rem); }
@media (prefers-reduced-motion: reduce) {
  .m-souris, .m-envoyer:not(:disabled), .m-secoue, .en-vue .m-recit > *, .en-vue .m-scene, .en-vue blockquote span, .m-choix.fait { animation: none; }
}
@media (max-width: 760px) {
  .m-temps .wrap { width: calc(100% - 32px); }
  .m-gens svg, .m-fin .m-gens svg { width: 84px; }
  .m-ouverture { display: flex; flex-direction: column; justify-content: center; }
  .m-envoyer { padding: 18px 26px; }
}

/* La grotte : l'entrée sur la carte, puis le sous-sol du pays */
.cj-grotte { position: absolute; z-index: 1; left: 30%; top: 25%; width: 40px; transition: scale .2s; }
.cj-grotte svg { display: block; width: 100%; }
.cj-grotte:hover, .cj-grotte:focus-visible { scale: 1.3; }
.cave { background: radial-gradient(ellipse 70% 60% at 25% 75%, rgba(120, 100, 80, .35), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 30%, rgba(95, 110, 95, .28), transparent 70%), radial-gradient(ellipse 30% 18% at 60% 62%, rgba(30, 22, 15, .3), transparent), #4A3C2F; }
.cave-voute { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 170px; }
.cave-goutte { position: absolute; z-index: 2; left: var(--x); top: 96px; width: 6px; height: 11px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: #BCD3DA; opacity: 0; animation: caveGoutte 6.5s var(--d) ease-in infinite; }
@keyframes caveGoutte { 0%, 72% { opacity: 0; translate: 0 0; } 76% { opacity: .9; translate: 0 0; } 100% { opacity: .4; translate: 0 76svh; } }
/* Les objets reposent dans des niches de pierre */
.cave-rang { gap: 18px; padding: 0; border-bottom: 0; box-shadow: none; }
.cave-objet { padding: 18px 10px 14px; border-radius: 70px 70px 14px 14px; background: linear-gradient(rgba(38, 29, 21, .78), rgba(58, 46, 35, .6)); box-shadow: inset 0 6px 16px rgba(30, 22, 15, .7), 0 5px 0 #6B5A49; }
@media (prefers-reduced-motion: reduce) { .cave-goutte { animation: none; } }
.m-laisser { display: block; margin: 16px auto 0; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* Le plan de la carte porte le dessin, l'eau et la grotte : ils gardent leur place au téléphone */
.cj-plan { position: absolute; inset: 0; pointer-events: none; }
.cj-grotte { pointer-events: auto; }
.cj-riviere { position: absolute; inset: 0; pointer-events: none; }
.cj-riviere .nageuse { translate: -50% -50%; animation: nageRiviere 13s linear forwards; }
@keyframes nageRiviere { 0% { left: 63.9%; top: 39.5%; opacity: 0; } 6% { opacity: 1; } 22% { left: 62.8%; top: 50%; } 44% { left: 61.1%; top: 64%; } 66% { left: 58%; top: 79%; } 90% { left: 54.9%; top: 91.9%; opacity: 1; } 100% { left: 53.5%; top: 98.8%; opacity: 0; } }
@media (max-width: 760px) {
  .cj-plan { position: relative; inset: auto; }
  .nageuse { width: 28px; }
  .cj-grotte { width: 24px; }
}

/* Les deux parents sans âme, sur leur banc au bord du lac */
.cj-parents { position: absolute; left: 91%; top: 63%; width: 56px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transition: scale .2s; }
.cj-parents:hover, .cj-parents:focus-visible { scale: 1.15; }
.cj-parents svg { display: block; width: 100%; overflow: visible; }
.cj-tete, .cj-cheveux, .cj-habit { transition: fill 1.6s; }
.cj-tete { fill: #C9CCC6; }
.cj-cheveux { fill: #9AA39C; }
.cj-habit { fill: #A7AEA8; }
.cj-parent { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 .92; transition: scale 1.2s cubic-bezier(.3, 1.6, .5, 1); }
.cj-ame { fill: #FFFDF8; opacity: 0; }
.ames-revenues .cj-tete { fill: #F3D7B6; }
.ames-revenues .cj-cheveux { fill: #5E4632; }
.ames-revenues .cj-habit { fill: #4F6B5B; }
.ames-revenues .cj-habit-2 { fill: #C8924A; }
.ames-revenues .cj-parent { scale: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cj-parents:not(.ames-revenues) .cj-ame { animation: cjAme 8s ease-in-out infinite; }
  .cj-parents:not(.ames-revenues) .cj-ame-2 { animation-delay: 3.5s; }
  .ames-revenues .cj-ame { animation: cjAmeRetour 1.8s ease-in forwards; }
}
/* Elles s'envolent vers l'eau où nagent les enfants */
@keyframes cjAme { 0% { opacity: 0; translate: 0 8px; } 18% { opacity: .85; } 80% { opacity: .35; } 100% { opacity: 0; translate: -70px 34px; } }
@keyframes cjAmeRetour { 0% { opacity: .9; translate: -60px -30px; } 85% { opacity: .9; } 100% { opacity: 0; translate: 0 14px; } }
@media (max-width: 760px) { .cj-parents { width: 34px; } }

/* Le lien vers l'histoire de Marthe */
.lien-histoire { display: block; width: fit-content; margin: 14px auto 0; color: inherit; font-weight: 700; text-align: center; text-underline-offset: 3px; }
.lien-histoire:hover { color: inherit; opacity: .8; }
.poste-relais .lien-histoire { margin: 0 auto 14px; }

.poste-relais:has(.lien-histoire) { flex-direction: column; align-items: center; }

/* Corrections du test complet : lisibilité et petites cartes */
.dest span { color: #55615A; }
.billet b { color: #75654F; }
.billet-barre span { color: #75654F; }
.u-particuliers .session .jour { color: #F2E5D6; }
.session .jour { color: #fff; }
.montre-etat { color: #8A4A44; }
.etage-lien { color: #3E5A4B; }
@media (max-width: 1000px) {
  .cj-lieu span { padding: 4px 10px; font-size: .86rem; }
  .cj-grand span { padding: 6px 13px; font-size: 1rem; }
}

/* Le petit livre, à l'écart sur la carte */
@media (min-width: 761px) {
  .cj-lieu.cj-petit { min-width: 0; }
  .cj-petit::before { width: 44px; height: 34px; }
  .cj-petit span { padding: 2px 8px; font-size: .72rem; font-weight: 700; box-shadow: 0 3px 8px rgba(20, 32, 26, .25); }
}

/* Le carnet de secrets de la grotte */
.cave-rang-papiers { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.cave-carnet { display: none; position: relative; z-index: 4; padding: 14px 18px; border-radius: 14px; background: #FBF1E0; color: var(--encre); font-size: .88rem; line-height: 1.3; box-shadow: 0 8px 18px rgba(30, 22, 15, .5); transform: rotate(-.6deg); }
.js .cave-carnet { display: block; }
.cave-carnet h2 { margin: 0 0 4px; color: var(--encre); font-size: 1.1rem; }
.cave-carnet p { margin: 0 0 8px; color: #5E4632; font-weight: 700; }
.cave-carnet a { color: #A65A52; }
.cave-carnet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.cave-carnet li { color: #5E4632; }
.cave-carnet li.trouve { color: #3E5A4B; }
.cave-carnet li.trouve::before { content: "✓ "; font-weight: 800; }
@media (max-width: 760px) { .cave-rang-papiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La fiche de parcours */
.recap-fiche { box-sizing: border-box; width: min(900px, 100% - 32px); margin: 36px auto; padding: 0 0 22px; overflow: hidden; border-radius: 24px; background: #FFFDF8; color: var(--encre); box-shadow: 0 16px 40px rgba(36, 54, 45, .14); }
.recap-tete { display: flex; align-items: center; gap: 18px; padding: 20px 28px; background: #3E5A4B; color: #FBF7F2; }
.recap-logo { flex: none; box-sizing: border-box; width: 74px; height: 74px; padding: 7px; border-radius: 16px; background: #fff; object-fit: contain; }
.recap-tete h2 { margin: 0 0 3px; color: #fff; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.recap-tete p { margin: 0; color: #DCE7E0; font-size: .92rem; line-height: 1.35; }
.recap-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; padding: 22px 28px 4px; }
.recap-bloc { --c: #3E5A4B; padding: 15px 18px; border-top: 5px solid var(--c); border-radius: 6px 6px 16px 16px; background: #F7F2EA; }
.recap-bloc[data-univers="Formations publiques"] { --c: #A65A52; }
.recap-bloc[data-univers="Coaching"] { --c: #6F8F7D; }
.recap-bloc[data-univers="Institutions"] { --c: #8A6A4C; }
.recap-bloc h3 { margin: 0 0 8px; color: var(--c); font-size: 1.08rem; }
.recap-bloc ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.recap-bloc li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.35; }
.recap-bloc li::before { content: "✓"; position: absolute; left: 0; color: var(--c); font-weight: 800; }
.recap-pied { display: none; }
.recap-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 28px 0; }
.recap-effacer { margin-left: auto; border: 0; background: none; color: var(--doux); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
  .recap-tete { padding: 16px 18px; gap: 12px; }
  .recap-logo { width: 54px; height: 54px; border-radius: 12px; }
  .recap-grille { padding: 16px 18px 2px; }
  .recap-boutons { padding: 14px 18px 0; }
  .recap-boutons .btn { width: 100%; box-sizing: border-box; text-align: center; }
  .recap-effacer { margin: 0 auto; }
}
/* À l'impression : la fiche seule, sur une feuille A4 (format imposé par imprimerEn) */
@media print {
  html.imprime-recap body > *:not(main) { display: none !important; }
  html.imprime-recap main :not(.recap-fiche, .recap-fiche *, :has(.recap-fiche)) { display: none !important; }
  html.imprime-recap .recap-fiche { width: 100%; min-height: min(292mm, 100vh); margin: 0; padding: 0 0 26mm; position: relative; border-radius: 0; box-shadow: none; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html.imprime-recap .recap-tete { padding: 14mm 16mm 10mm; }
  html.imprime-recap .recap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; padding: 10mm 16mm 0; }
  html.imprime-recap .recap-bloc { break-inside: avoid; }
  html.imprime-recap .recap-boutons { display: none; }
  html.imprime-recap .recap-pied { display: block; position: absolute; left: 16mm; right: 16mm; bottom: 10mm; margin: 0; padding-top: 4mm; border-top: 1px solid #C8AA8C; color: #5E4632; font-size: 10pt; text-align: center; }
}

/* Le lien vers le mode simplifié */
.lien-simple { border: 0; background: none; color: inherit; font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-simple-haut { display: block; position: relative; z-index: 3; margin: 12px auto 0; color: #fff; opacity: .8; }
.si-simple { display: none; }
html.simple .si-guide { display: none; }
html.simple .si-simple { display: inline; }

/* Le titre plus long de l'histoire d'équipe tient sur l'écran */
[data-marthe="nadia"] .m-ouverture h1 { max-width: 19ch; font-size: clamp(2.4rem, 6.2vw, 5.8rem); }

/* Le bouton pour continuer reste en vue tant que l'étape dépasse de l'écran */
.etage, .u-particuliers main section.gare-aiguillage { overflow: clip; }
:is(.gare-sortie, .etage-suite, a.belv-suite) { position: sticky; bottom: 14px; z-index: 6; }
a.belv-suite { display: flex; width: fit-content; margin-inline: auto; }
.gare-sortie .ligne-lien { padding: 6px 12px; border-radius: 999px; background: rgba(255, 253, 248, .92); color: var(--encre); }
.etage-jeu.remise { overflow: visible; }
.cj-repere { display: none; }
@media (max-width: 760px) {
  :is(.gare-sortie, .etage-suite, a.belv-suite) { bottom: 76px; }
  .gare-sortie { margin-top: 18px; }
  :is(.ligne-suite, .etage-suite, a.belv-suite) { padding: 10px 18px; font-size: .95rem; }
  /* Les sentiers vont à l'essentiel */
  .sentier ul { display: none; }
  /* La carte du téléphone se touche directement */
  .cj-eau { z-index: 2; }
  .cj-riviere { z-index: 2; }
  .cj-repere { display: block; position: absolute; z-index: 1; width: 40px; height: 40px; translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
  .cj-repere::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; translate: -50% -50%; border: 2px solid #fff; border-radius: 50%; background: #A65A52; box-shadow: 0 2px 5px rgba(20, 32, 26, .4); animation: mAppel 2.4s ease-in-out infinite; }
  .nageuse { box-sizing: border-box; width: 34px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cj-repere::after { animation: none; } }

section > .wrap:has(> .gare-sortie:only-child) { display: contents; }
@media (max-width: 760px) { #pause a.belv-suite { position: static; } #pause .souffle { scale: .72; margin-block: -20px; } }

/* Accueil au téléphone : la carte de départ a toute la place dont elle a besoin */
@media (max-width: 700px) {
  .scene-accueil { height: auto; max-height: none; min-height: 100svh; padding-bottom: 56px; }
}

/* Au téléphone, rien ne flotte pendant qu'on descend : tout revient dès qu'on remonte */
@media (max-width: 760px) {
  :is(.gare-sortie, a.belv-suite) { position: static; }
  .etage-suite { position: relative; bottom: auto; }
  :is(.contact-rapide, .retour-carte, .belv-son, .boussole, .repere, .montre-compte, .billet-barre) { transition: opacity .25s, translate .25s; }
  html.menu-cache :is(.contact-rapide:not([open]), .retour-carte, .belv-son, .boussole, .repere, .montre-compte, .billet-barre) { opacity: 0; translate: 0 14px; pointer-events: none; }
  html.menu-cache .billet-barre { translate: 0 -14px; }
}

/* ===== Le mode simplifié : un site classique, clair et sans jeu ===== */
html.simple { scroll-behavior: auto; }
html.simple *, html.simple *::before, html.simple *::after { animation: none !important; transition: none !important; }
/* Tout le décor et tous les jeux disparaissent */
html.simple :is(.couche, .coupe-col, .univers-illu, .chemin, .belv-monde, .belv-fil, .ascenseur, .fanions, .engrenages, .viaduc, .w-block-viaduc, .boussole, .repere, .belv-son, .retour-carte, .montre-compte, .billet-barre, .voie, .train-v,
  .etage-jeu, .enquete-bureau, .jauges-salle, .machine-salle, .etage-num, .etage-rez, .etage-suite, .jeu-titre, .jeu-suite, .gare-sortie .ligne-suite, .poste-relais, .belv-suite, .sentiers-guide, .voyage-depart > p, .voyage-depart .btns,
  .atelier-duo, .sac-scene, .sac-etat, .montagne-scene, .montagne-nav, .outils-scene, .meteo-choix, .banc, .souffle, .aiguilles, .quai, .rame, .wagon, .trajet-ligne, .arrets, .escalier-marches, .trajet-panneau [data-prochain], .fenetres > button, .billet, .billet-pied,
  .pont-riviere, .pont-idee, .autre-rive, .dossier, .rouages-scene, .etablis, .remontoir-montre, .molette, .montre-finale, .montre-etat, .fin-duo > svg, .fichier, .rayon-planche, .table-lecture svg, .mer, .caps, .remise-modules, .medaille, .a-cocher, .timbres, .timbre, .onglets-tete, .choix-barre,
  .cj-plan, .cj-chemins, .cj-apercu, .cj-entrer, .m-scene, .m-trait, .m-souris, .m-ouverture .btns, .m-gens, .cave-nuit, .cave-lanterne, .cave-goutte, .cave-carnet, .etiq) { display: none !important; }
/* Les étapes qui ne sont que du jeu */
html.simple :is(#pont, #pause, #reglages, #fichier, .salle-jeu) { display: none !important; }
/* Une présentation sobre, section après section */
html.simple body { background: #fff; }
html.simple .scene, html.simple .scene-accueil, html.simple .scene-page { height: auto; min-height: 0; max-height: none; padding: 112px 0 40px; background: #3E5A4B !important; }
html.simple .scene .wrap { display: block; width: min(900px, 100% - 40px); margin-inline: auto; text-align: left; }
html.simple .voyage-depart { width: auto; max-width: none; margin: 18px 0 0; padding: 0; background: none; box-shadow: none; backdrop-filter: none; text-align: left; }
html.simple .voyage-liens { justify-content: flex-start; }
html.simple .lien-simple-haut { margin: 14px 0 0; opacity: 1; }
html.simple main :is(section, .etage, .section):not(.scene, .scene-page, .scene-accueil, .cave) { min-height: 0 !important; display: block; padding-block: 44px !important; background: #fff !important; background-image: none !important; border: 0 !important; color: var(--encre) !important; overflow: visible; }
html.simple main > :nth-child(even) > :is(section, .section), html.simple main > section:nth-of-type(even):not(.scene, .cave) { background: #F4EEE7 !important; }
html.simple main :is(h2, h3, h4, p, li, small, strong, b, dt, dd, label):not(.scene *, .jour *, .btn *, .cave *) { color: var(--encre) !important; text-shadow: none !important; }
html.simple main section:not(.scene, .scene-page, .scene-accueil, .cave) :is(a:not(.btn), .prose a) { color: var(--sauge-f); }
html.simple main section:not(.scene, .scene-page, .scene-accueil, .cave) h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
html.simple :is(.etage-grille, .duo-format, .section-media, .m-duo, .fin-duo) { display: block !important; }
html.simple :is(.section-tete, .prose) { max-width: 760px; margin-inline: 0 !important; text-align: left !important; }
html.simple .wrap { width: min(900px, 100% - 40px); }
/* Les cartes et panneaux deviennent de simples blocs */
html.simple :is(.format-carte, .trajet-panneau, .onglet-panneau, .wagon-detail, .wagon-details, .hall, .hall-fenetre, .tableau, .sentier, .parchemin, .livre, .rayon, .lieux, .lieu, .rive-choix, .poincon) { background: #fff !important; box-shadow: none !important; rotate: none !important; transform: none !important; color: var(--encre) !important; }
html.simple :is(.sentier, .format-carte, .wagon-detail, .trajet-texte, .livre, .onglet-panneau) { margin-block: 10px; padding: 14px 16px; border: 1px solid #E2D6C5; border-radius: 10px; display: block !important; }
html.simple .sentier::before, html.simple .sentier::after, html.simple .rive-choix::before, html.simple .rive-choix::after { display: none; }
html.simple .sentiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
html.simple .sentier ul { display: block; }
html.simple .sentier .btn, html.simple .sentier a.btn { display: none; }
/* Ce qui reste de cliquable sans le code est un simple texte */
html.simple main button:not(.lien-simple, [type="submit"], form button) { pointer-events: none; cursor: default; padding: 6px 10px; border: 1px solid #E2D6C5; border-radius: 8px; background: #fff; color: var(--encre); box-shadow: none; translate: none; font-weight: 600; }
html.simple main button svg { display: none; }
html.simple :is(.rive-choix-liste, .lieux, .tableau, .hall, .poincons) { display: flex !important; flex-wrap: wrap; gap: 8px; height: auto; }
html.simple :is(.rayon, .rayon-livres) { display: block; margin: 0; padding: 0; }
html.simple .js-seul { display: none !important; }
/* La carte de l'accueil devient la liste des lieux */
html.simple .salle-jura::before { display: none; }
html.simple .cj-defile { width: min(900px, 100% - 40px); margin: 16px auto 0; overflow: visible; }
html.simple .cj-carte { aspect-ratio: auto; max-width: none; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
html.simple .cj-lieu { position: static; translate: none !important; display: block; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid #E2D6C5; border-radius: 10px; background: #fff; text-align: left; text-decoration: none; box-shadow: none; }
html.simple .cj-lieu::before, html.simple .cj-lieu::after { display: none; }
html.simple .cj-lieu span { display: block; padding: 0; background: none; box-shadow: none; color: var(--encre); font-size: 1.05rem; }
html.simple .cj-lieu small { position: static; display: block; width: auto; translate: none; padding: 2px 0 0; background: none; box-shadow: none; opacity: 1; color: var(--doux); }
html.simple .cj-lieu.cj-grand { background: #fff; }
/* La grotte reste lisible, sans lanterne */
html.simple .cave { background: #fff; color: var(--encre); padding: 96px 0 40px; }
html.simple .cave-tete :is(h1, p), html.simple .cave-objet, html.simple .cave-objet small { color: var(--encre); }
html.simple .cave-rang { border-bottom: 0; box-shadow: none; }
html.simple .cave-objet { background: none; box-shadow: none; border: 1px solid #E2D6C5; border-radius: 10px; }
html.simple .cave-objet svg { height: 50px; }
/* Les histoires se lisent comme un texte */
html.simple .m-temps { display: block !important; min-height: 0 !important; padding-block: 28px !important; }
html.simple .m-ouverture { padding-top: 112px !important; }
html.simple .m-recit h2 { font-size: 1.6rem; }
html.simple .m-fin blockquote { font-size: clamp(1.7rem, 4vw, 2.6rem); }
/* Le pied de page garde son décor léger */
html.simple .lien-simple { font-weight: 600; }

/* Mode simplifié : un menu lisible partout, qui défile avec la page */
html.simple .entete { position: absolute; }
html.simple .nav > ul { border: 1px solid #EADFD3; background: #fff; box-shadow: 0 6px 18px rgba(36, 54, 45, .07); }
html.simple .nav a.niv1 { color: var(--encre); }
html.simple .nav a.niv1[aria-current] { background: var(--sauge-f); color: #fff; }
html.simple .nav .btn-contact { background: #fff; color: var(--encre); }
/* Derniers éléments de décor */
html.simple :is(.ruban, a.ligne-suite, .guide-illu, .enveloppe, .poste-scene, .machine-corps, .besoins-compte, [data-effacer], .lettre-etapes, .hanko) { display: none !important; }
html.simple .section-tete { padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
html.simple .voyage-depart { width: min(900px, 100% - 40px); margin: 18px auto 0; }

/* Mode simplifié : aucun texte clair ne reste sur un fond clair */
html.simple body main section.section :is(h2, h3, p, li, small, strong, b):not(.jour *, .btn *) { color: var(--encre) !important; }

/* L'ascension : la carte de secrets y mène, et les touches sont grandes au téléphone */
.ascension-touches { touch-action: none; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) {
  .ascension-touches { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; }
  .ascension-touches button { width: auto; height: auto; min-height: 72px; font-size: 1.5rem; touch-action: none; }
  .ascension canvas { width: min(360px, 92vw, calc((100svh - 230px) * 360 / 560)); }
  .ascension-touches { width: min(360px, 92vw); }
}

/* La grotte : les rayons à gauche, le carnet à droite */
.cave-corps { position: relative; margin-bottom: 26px; }
@media (min-width: 1000px) {
  .cave-corps { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
  .cave-rayons .cave-rang:last-child { margin-bottom: 0; }
}
/* Trois secrets de plus : ils n'existent que pendant la visite guidée */
.cave-chauve, .cave-attente, .cj-cigogne { display: none; }
.js .cave-chauve, .js .cj-cigogne { display: block; }
.js .cave-attente { display: grid; grid-column: span 2; align-content: end; justify-items: center; gap: 6px; }
.cave-chauve, .cj-cigogne, .cave-attente button { padding: 0; border: 0; background: none; cursor: pointer; }
.cave-chauve svg, .cj-cigogne svg { display: block; width: 100%; overflow: visible; }
.cave-chauve { position: absolute; z-index: 5; left: 77%; top: 92px; width: 30px; }
.cave-attente { position: relative; }
.cave-attente button { width: min(100%, 260px); }
.cave-attente svg { display: block; width: 100%; }
.cave-attente p { position: relative; z-index: 4; margin: 0; color: #FBF1E0; font-size: .86rem; text-align: center; font-variant-numeric: tabular-nums; }
.cave-attente.ouverte svg path:nth-child(2) { fill: #F9DFA8; }
.cj-cigogne { position: absolute; z-index: 1; left: 11.8%; top: 25.6%; width: 34px; translate: -50% -86%; pointer-events: auto; }
.envol .oiseau { animation: envol 3s ease-in-out; }
.cave-chauve.envol .oiseau { animation-name: envolChauve; }
@keyframes envol { 45% { transform: translate(260px, -120px) rotate(-8deg); } 55% { transform: translate(260px, -120px) rotate(8deg) scaleX(-1); } }
@keyframes envolChauve { 25% { transform: translate(-90px, 50px) rotate(170deg); } 50% { transform: translate(-200px, 10px) rotate(190deg); } 75% { transform: translate(-90px, 60px) rotate(170deg); } }
@media (prefers-reduced-motion: reduce) { .envol .oiseau { animation: none; } }
@media (max-width: 700px) { .cj-cigogne { width: 22px; } }

/* La fissure de la grotte, puis la salle des étoiles */
.cave-fissure { position: relative; z-index: 4; margin: 0 0 18px; text-align: center; }
.cave-fissure button { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px; border: 0; background: none; color: #F9DFA8; font: 800 1.05rem/1.25 var(--titre); cursor: pointer; }
.cave-fissure svg { flex: none; width: 26px; filter: drop-shadow(0 0 12px #F9DFA8); animation: fissure 2.4s ease-in-out infinite alternate; }
@keyframes fissure { to { filter: drop-shadow(0 0 26px #F9DFA8); scale: 1.08; } }
.salle { --n: 0; position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden auto; color: #FBF1E0; background: linear-gradient(#1C2A44, #33375A 55%, #6A5A78); }
.salle::backdrop { background: #1C2A44; }
.salle-ciel, .salle-trait { position: absolute; inset: 0 0 auto; width: 100%; height: 100dvh; }
.salle-trait { pointer-events: none; }
.salle-trait line { stroke: #F9DFA8; stroke-width: 2; opacity: 0; transition: opacity 1.2s ease; }
.salle-trait line.tire { opacity: .75; }
.salle-ciel { opacity: 0; pointer-events: none; transition: opacity 1.4s; }
.salle.ouverte .salle-ciel { opacity: 1; pointer-events: auto; }
.salle-etoile { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.salle-etoile i { width: 12px; height: 12px; background: #DCE3F2; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); scale: 1.5; animation: salleScintille 2.6s var(--d) ease-in-out infinite alternate; transition: background .5s, scale .5s; }
.salle-etoile:hover i, .salle-etoile:focus-visible i { scale: 2.2; }
.salle-etoile.allumee { cursor: default; }
.salle-etoile.allumee i { background: #F9DFA8; scale: 2.6; animation: none; filter: drop-shadow(0 0 8px #F9DFA8); }
@keyframes salleScintille { to { opacity: .4; } }
.salle-pays { position: absolute; left: 0; right: 0; top: 32dvh; width: 100%; height: 36dvh; pointer-events: none; box-shadow: 0 32dvh 0 #2F4A3C; }
.salle-feu { transform-box: fill-box; transform-origin: 50% 100%; scale: calc(.7 + var(--n) * .05); transition: scale 1.2s ease; }
.salle-texte { position: absolute; z-index: 2; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; box-sizing: border-box; width: min(600px, 100% - 32px); padding: 14px 20px; border-radius: 18px; background: rgba(28, 42, 68, .82); text-align: center; line-height: 1.4; }
.salle-texte h2 { margin: 0 0 4px; color: #F9DFA8; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.salle-texte p { margin: 0 0 6px; color: #FBF1E0; }
.salle-texte p:last-child { margin-bottom: 0; }
.salle-texte a { color: #F9DFA8; font-weight: 700; }
.salle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px !important; }
.salle-note { font-size: .86rem; opacity: .8; }
.salle-fermer { position: fixed; top: 14px; right: 14px; }
.salle.complete { background: linear-gradient(#26395A, #4A4670 55%, #A98A86); transition: background 2s; }
@media (prefers-reduced-motion: reduce) { .cave-fissure svg, .salle-etoile i { animation: none; } }

/* Derrière la vieille porte */
.cave-attente a { color: #F9DFA8; }
.cave-attente.ouverte svg { filter: drop-shadow(0 0 14px #F9DFA8); }
.porte-salle { box-sizing: border-box; width: min(820px, 100% - 24px); max-height: calc(100dvh - 24px); padding: 20px; border: 0; border-radius: 18px; background: #4A3829; color: #FBF1E0; text-align: center; }
.porte-salle::backdrop { background: rgba(30, 22, 15, .85); }
.porte-salle > p { margin: 0 0 12px; }
.porte-prenom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; font-weight: 700; }
.porte-prenom input { width: min(260px, 100%); padding: 9px 14px; border: 0; border-radius: 12px; background: #FBF1E0; color: var(--encre); font: inherit; }
.porte-papier { display: flex; flex-direction: column; align-items: center; padding: 30px 40px 22px; border: 2px solid #8A6A4C; outline: 1px solid #C8AA8C; outline-offset: -9px; border-radius: 4px; background: radial-gradient(circle at 50% 42%, #FFFBF2, #F6EAD4); color: var(--encre); }
.porte-haut { margin: 0 0 10px; color: #8A6A4C; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.porte-papier h2 { margin: 0; color: #3E5A4B; font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.1; }
.porte-pour { margin: 12px 0 0; font-style: italic; }
.porte-nom { min-width: 60%; margin: 2px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #C8AA8C; color: #A65A52; font: 800 clamp(1.9rem, 6vw, 3rem)/1.15 var(--titre); overflow-wrap: anywhere; }
.porte-motif { margin: 0 0 16px; font-size: 1.05rem; }
.porte-papier dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 0 0 14px; padding: 12px 0; border-block: 1px solid #E2D2B9; }
.porte-papier dt { color: #8A6A4C; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.porte-papier dd { margin: 3px 0 0; font-size: .92rem; line-height: 1.3; }
.porte-bas { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; width: 100%; }
.porte-dessin { width: 84px; justify-self: start; }
.porte-signe { margin: 0; color: #5E4632; font-size: .86rem; }
.porte-signe b { display: block; min-width: 190px; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid #8A6A4C; color: #3E5A4B; font: italic 700 1.35rem/1.2 var(--titre); }
.porte-sceau { width: 82px; justify-self: end; rotate: -9deg; }
.porte-papier small { margin-top: 8px; color: #5E4632; font-size: .76rem; }
.porte-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 0 !important; }
@media (max-width: 560px) {
  .porte-papier { padding: 24px 20px 18px; }
  .porte-papier dl { grid-template-columns: 1fr; gap: 8px; }
  .porte-dessin, .porte-sceau { width: 56px; }
  .porte-signe b { min-width: 0; font-size: 1.1rem; }
}
/* À l'impression : une seule feuille A4 en paysage (format imposé par imprimerEn), couleurs comprises */
@media print {
  body:has(.porte-salle[open]) > :not(.porte-salle) { display: none !important; }
  .porte-salle { position: static; width: 100%; max-width: none; max-height: none; padding: 0; overflow: visible; border-radius: 0; background: none; }
  .porte-salle::backdrop, .porte-salle > p, .porte-prenom, .porte-empreinte { display: none !important; }
  .porte-papier { box-sizing: border-box; justify-content: center; width: 100%; height: min(205mm, 100vh); overflow: hidden; break-inside: avoid; margin: 0; padding: 14mm 22mm; border: 3mm solid #8A6A4C; outline-offset: -6mm; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .porte-papier h2 { font-size: 40pt; }
  .porte-nom { font-size: 46pt; }
  .porte-motif { font-size: 15pt; }
  .porte-papier dd { font-size: 12pt; }
  .porte-dessin { width: 34mm; }
  .porte-sceau { width: 34mm; }
}

/* Le petit dinosaure de la carte : il marche, et ses empreintes restent un moment */
.cj-dino { display: none; position: absolute; z-index: 1; left: 34%; top: 57%; width: 42px; padding: 0; border: 0; background: none; cursor: pointer; translate: -50% -50%; pointer-events: auto; }
.js .cj-dino { display: block; }
.cj-dino svg { display: block; width: 100%; overflow: visible; }
.cj-dino .traces { opacity: 0; }
.cj-dino:hover .oiseau, .cj-dino:focus-visible .oiseau { transform: translateY(-2px); }
.cj-dino.envol .oiseau { animation-name: dinoMarche; }
.cj-dino.envol .traces { animation: dinoTraces 3s linear; }
@keyframes dinoMarche { 45%, 55% { transform: translateX(30px); } }
@keyframes dinoTraces { 30%, 85% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .cj-dino.envol .traces { animation: none; opacity: .7; } }
@media (max-width: 700px) { .cj-dino { width: 28px; } }
@media (pointer: coarse) { .cj-dino, .cj-cigogne { box-sizing: content-box; padding: 10px; } }

/* Le lien vers la vieille porte, en bas de chaque guide */
.guide-ombre { margin: 26px auto; text-align: center; font-size: .92rem; }
.guide-ombre a { color: #5E4632; }
.porte-papier { position: relative; }
.porte-empreinte { position: absolute; right: 6px; bottom: 5px; width: 9px; line-height: 0; color: #E9D3BC; }
.porte-empreinte svg { display: block; width: 100%; fill: currentColor; }
.porte-empreinte::after { content: ""; position: absolute; inset: -10px; }

/* La fausse fiche de l'épreuve du dinosaure */
.empreinte { padding: 130px 0 70px; background: #FBF7F2; }
.empreinte .wrap { max-width: 760px; }
.empreinte h1 { margin: 0 0 12px; }
.empreinte-sur { color: #A65A52; font-weight: 700; }
.empreinte-chapo { font-size: 1.15rem; }
.empreinte-fiche { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 22px 0; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(36, 54, 45, .08); }
.empreinte-fiche dt { font-weight: 800; }
.empreinte-fiche dd { margin: 0; }
.empreinte-note { font-style: italic; }
.empreinte-message { font-weight: 700; color: #A65A52; }
.empreinte-form { display: grid; gap: 16px; justify-items: start; }
.empreinte-form label { display: grid; gap: 6px; width: 100%; font-weight: 700; }
.empreinte-form input { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid #C8AA8C; border-radius: 12px; font: inherit; font-weight: 400; background: #fff; }
.empreinte-form .empreinte-piege { position: absolute; left: -9999px; width: 1px; }
.empreinte-texte { margin: 18px 0; padding: 18px 20px; border-left: 6px solid #8A6A4C; border-radius: 6px; background: #fff; font-weight: 700; user-select: all; }
@media (max-width: 560px) { .empreinte-fiche { grid-template-columns: 1fr; gap: 4px; } .empreinte-fiche dd { margin-bottom: 10px; } }


/* La fausse fiche a un fond clair : le menu y reste lisible */
.page-empreinte .nav > ul { border: 1px solid #EADFD3; background: #fff; }
.page-empreinte .nav a.niv1 { color: var(--encre); }