/* 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: 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 > :last-child .section .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; 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; }
}