/* 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 */
.fil-pont { position: fixed; z-index: 30; left: 0; right: 0; top: 84px; height: 7px; background: repeating-linear-gradient(90deg, #C8AA8C 0 14px, #8A6A4C 14px 17px); box-shadow: 0 2px 5px rgba(36, 54, 45, .2); }
.fil-pont i { position: absolute; left: calc(var(--lecture, 0) * (100% - 18px)); top: -6px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: #A65A52; transition: left .2s ease-out; }
.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; } .fil-pont { top: 84px; } }

.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-carte 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-carte 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-carte 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-chemin.choisi { background: #E9B872; color: #24362D; }
.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; }
.cj-lieu.ici span { background: #E9B872; color: #24362D; }
.cj-lieu.ici span::after { color: #3E5A4B; }
.cj-glisser { display: none; }
.cj-bas { margin-top: 18px; }
.cj-compte { margin: 0 0 12px; text-align: center; color: rgba(255, 255, 255, .84); font-weight: 600; }
.cj-compte b { color: #E9B872; font-size: 1.25rem; }
.cj-apercus { max-width: 760px; margin: 0 auto; }
.cj-apercu { padding: 20px 24px; border-radius: 22px; background: #FFFDF8; color: var(--encre); text-align: center; box-shadow: 0 16px 34px rgba(0, 0, 0, .25); }
.cj-apercu + .cj-apercu { margin-top: 10px; }
.js .cj-apercu + .cj-apercu { margin-top: 0; }
.js .cj-apercu:not(.actif) { display: none; }
.js .cj-apercu.actif { animation: apparait .45s ease; }
.cj-apercu h3 { margin: 0 0 6px; color: var(--encre); font-size: 1.5rem; }
.cj-apercu p { margin: 0 0 14px; color: var(--doux); }
@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; } }
@media (max-width: 1000px) { .cj-glisser { display: block; margin: 8px 0 0; color: rgba(255, 255, 255, .7); font-size: .88rem; text-align: center; } }

/* 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)); } }
.cj-bas { position: sticky; bottom: 12px; z-index: 5; }
.cj-compte { margin-bottom: 8px; }
.cj-apercu { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 14px 20px; text-align: left; }
.js .cj-apercu.actif { display: grid; }
.cj-apercu h3 { font-size: 1.2rem; margin: 0 0 2px; }
.cj-apercu p { grid-column: 1; margin: 0; font-size: .95rem; line-height: 1.3; }
.cj-apercu .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
@media (max-width: 620px) { .cj-apercu { grid-template-columns: minmax(0, 1fr); } .cj-apercu .btn { grid-column: 1; grid-row: auto; margin-top: 8px; text-align: center; justify-content: center; } .cj-apercu p { font-size: .88rem; } }
.cj-compte { width: fit-content; margin: 0 auto 8px; padding: 4px 14px; border-radius: 999px; background: #24362D; color: #fff; }

@media (max-width: 620px) {
  .cj-apercu { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
  .cj-apercu p { display: none; }
  .cj-apercu h3 { font-size: 1rem; margin: 0; }
  .cj-apercu .btn { grid-column: 2; grid-row: 1; margin: 0; padding: 9px 14px; font-size: .9rem; white-space: normal; }
  .cj-bas { padding-left: 62px; }
  .cj-compte { font-size: .85rem; }
}

/* 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; }
.cj-lieu.suivant span { animation: mAppel 2.2s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(233, 184, 114, .75), 0 6px 14px rgba(20, 32, 26, .32); }
@media (prefers-reduced-motion: reduce) { .cj-lieu.suivant span { animation: none; } }
/* 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-chemin.choisi { background: #3E5A4B; border-color: #3E5A4B; color: #fff; }
.cj-grand::before { width: 160px; height: 210px; }
.cj-glisser { color: #3F5247 !important; }
.cj-bas { margin-top: 0; }
@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; }
.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] { 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; } }
@media (prefers-reduced-motion: reduce) { .cj-entrer.apparait { animation: none; } }

/* Le logo : un médaillon blanc bien lisible, qui déborde de l'en-tête puis se fait discret au défilement */
.logo { display: block; flex: none; width: 100px; height: 60px; transition: width .3s; }
.logo img { display: block; box-sizing: border-box; width: 100px; height: 100px; max-width: none; padding: 12px; object-fit: contain; background: #fff; border-radius: 50%; box-shadow: 0 0 0 3px #E9D3BC, 0 8px 22px rgba(36, 54, 45, .22); transition: width .3s, height .3s, padding .3s, scale .25s; }
.logo:hover img, .logo:focus-visible img { scale: 1.05; }
.entete.plein .logo { width: 78px; }
.entete.plein .logo img { width: 78px; height: 78px; padding: 10px; }
.pied .logo-pied { box-sizing: border-box; width: 110px; height: 110px; padding: 14px; object-fit: contain; background: #fff; box-shadow: 0 0 0 3px #E9D3BC; }
@media (max-width: 700px) {
  .logo { width: 88px; }
  .logo img { width: 88px; height: 88px; padding: 11px; }
  .entete.plein .logo { width: 66px; }
  .entete.plein .logo img { width: 66px; height: 66px; padding: 8px; }
}

/* 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) + 114px); } }