@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/bricolage-800.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-400i.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}

/* Layout : une page d'accueil courte (titre + quatre portes colorées), puis une page par public, routée par l'ancre (#intervenant, #ecoles, #parcours, #documents). Chaque page reprend la couleur de sa porte dans son bandeau. Palette Sossusvlei. */
:root{
  --ink:#3A2620;        /* brun nuit : titres, bandeaux */
  --glow:#B6452C;       /* rouge dune : accent, appels à l'action */
  --ochre:#E0A040;      /* ocre : petits détails */
  --sage:#A8673F;       /* argile : libellés secondaires */
  --mist:#FCEED8;       /* sable doré : fond */
  --paper:#FFFFFF;      /* surfaces */
  --text:#2E211C;
  --muted:#7A665A;
  --line:#EFD7B6;
  --on-ink:#FFF6EE;
  --glow-soft:#F8DDB8;
  --dune1:#D9764F; --dune2:#E9A77E;
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
/* Rendu clair unique, choisi délibérément : le site garde sa charte sable doré même en mode sombre. */
:root{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{background:var(--mist);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance;line-height:1.1;margin:0}
h2{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0;max-width:65ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px;border-radius:4px}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sage)}
.todo{background:var(--glow-soft);border-radius:4px;padding:0 .3em;font-style:italic;color:var(--text)}

/* En-tête */
header{padding-block:22px}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.mark{width:40px;height:40px;flex:none}
.dot{width:12px;height:12px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 6px color-mix(in srgb,var(--ochre) 25%,transparent)}
.topnav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.95rem}
.topnav a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--ink);border-bottom-color:var(--glow)}

/* Hero */
.hero{padding-block:28px 40px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:0;bottom:0;width:55%;height:60%;background:radial-gradient(ellipse 70% 100% at 80% 100%,var(--dune1) 0 45%,transparent 46%),radial-gradient(ellipse 60% 90% at 30% 100%,var(--dune2) 0 40%,transparent 41%);opacity:.4;pointer-events:none}
.hero > *{position:relative;z-index:1}
.hero h1{font-size:clamp(2.3rem,6.5vw,4.4rem);font-weight:800;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--glow)}
.hero p{margin-top:18px;font-size:1.12rem;color:var(--muted)}

/* Portes d'entrée */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:56px}
.door{--fg:var(--ink);--lab:var(--sage);--arr:var(--glow);display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:18px;text-decoration:none;min-height:220px;transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.door:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(58,38,32,.14)}
.door h3,.door .go{color:var(--fg)}
.door .who{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--lab)}
.door h3{font-size:1.3rem}
.door .go{margin-top:auto;font-weight:700;display:flex;align-items:center;gap:8px}
.door .go::after{content:"→";color:var(--arr);font-size:1.2em;transition:transform .2s}
.door:hover .go::after{transform:translateX(4px)}
.d-red{background:var(--glow);--fg:var(--on-ink);--lab:#FBDCC9;--arr:var(--on-ink)}
.d-night{background:var(--ink);--fg:var(--on-ink);--lab:var(--ochre);--arr:var(--ochre)}
.d-ochre{background:var(--ochre);--fg:var(--text);--lab:var(--ink);--arr:var(--ink)}
.d-sand{background:var(--glow-soft);--fg:var(--ink);--lab:var(--sage);--arr:var(--glow)}

/* Bandeaux de page */
.band{padding-block:36px 44px}
.band .wrap{display:flex;flex-direction:column;gap:12px}
.band h2{color:inherit;max-width:24ch}
.band p{max-width:65ch}
.back{align-self:flex-start;font-size:.9rem;font-weight:700;text-decoration:none;opacity:.85;margin-bottom:6px}
.back::before{content:"← "}
.back:hover{opacity:1;text-decoration:underline}
.b-red{background:var(--glow);color:var(--on-ink)} .b-red .eyebrow{color:#FBDCC9}
.b-night{background:var(--ink);color:var(--on-ink)} .b-night .eyebrow{color:var(--ochre)}
.b-ochre{background:var(--ochre);color:var(--text)} .b-ochre .eyebrow{color:var(--ink)} .b-ochre h2{color:var(--ink)}
.b-sand{background:var(--glow-soft);color:var(--text)} .b-sand h2{color:var(--ink)}

section{padding-block:56px;border-top:1px solid var(--line)}
.band + section{border-top:0}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.section-head p{color:var(--muted)}

/* Thèmes / formats */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tile p{color:var(--muted);font-size:.98rem}
.tag{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--glow-soft);color:var(--text)}
.tag.sage{background:color-mix(in srgb,var(--sage) 22%,transparent)}
.formats{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.formats span{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:8px 16px;font-size:.95rem}
.formats b{color:var(--ink);font-family:var(--display)}

/* Pédagogie */
.method{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-radius:16px;overflow:hidden}
.step{padding:22px;display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--text)}
.step .n{font-family:var(--display);font-weight:800;color:var(--ink);font-size:1.6rem}
.step p{font-size:.95rem}
.s1{background:var(--paper)} .s2{background:var(--glow-soft)} .s3{background:var(--dune2)} .s4{background:var(--dune1)}
.ref{margin-top:16px;font-size:.85rem;color:var(--muted)}

/* Parcours */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:14px;border-bottom:1px dashed var(--line)}
.timeline .y{font-family:var(--display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.timeline .w{min-width:0}
.timeline .w small{display:block;color:var(--muted);font-size:.9rem}
.side{display:flex;flex-direction:column;gap:16px}
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.portrait{aspect-ratio:4/5;max-width:100%;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--sage) 35%,var(--paper)),var(--paper));border:1px dashed var(--sage);display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:16px}

/* Contact */
.contact{background:var(--ink);border-top:0}
.contact h2,.contact p{color:var(--on-ink)}
.contact p{opacity:.85}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.addr{font-family:var(--display);font-size:1.15rem;color:var(--on-ink);background:color-mix(in srgb,var(--on-ink) 12%,transparent);padding:10px 16px;border-radius:10px;user-select:all;overflow-wrap:anywhere}
.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:11px 18px;background:var(--ochre);color:#2E211C;cursor:pointer}
.status{font-size:.9rem;color:var(--on-ink);opacity:.85}
footer{padding-block:24px;font-size:.85rem;color:var(--muted)}

/* Documents */
.doc-tools{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-bottom:28px}
.doc-tools input{font:inherit;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text)}
.doc-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doc-cat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.doc{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:10px 12px;border-radius:10px;background:var(--mist)}
.doc:hover{background:var(--glow-soft)}
.doc-t{font-weight:700;color:var(--ink)}
.doc-m{font-size:.85rem;color:var(--muted)}
.doc-empty{color:var(--muted);font-size:.95rem;font-style:italic}

@media (max-width:820px){
  .doors{grid-template-columns:1fr 1fr}
  .grid-3,.doc-list{grid-template-columns:1fr}
  .grid-2,.about{grid-template-columns:1fr}
  .method{grid-template-columns:1fr 1fr}
  .portrait{max-width:280px}
}
@media (max-width:480px){
  .method{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
  .door{min-height:0}
  .timeline li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.legal h3{margin-top:28px}
.legal p{margin-top:8px}
.page-legal section{border-top:0}

.langs-sw{display:flex;gap:2px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line)}
.langs-sw a{font-size:.85rem;font-weight:700;letter-spacing:.06em;padding:4px 6px;border-radius:6px;color:var(--muted);text-decoration:none;border:0}
.langs-sw a:hover{color:var(--ink);background:var(--glow-soft)}
.langs-sw a[aria-current="true"]{color:var(--on-ink);background:var(--ink)}
@media (max-width:480px){.langs-sw{margin-left:0;padding-left:0;border-left:0}}

/* Mise en page élargie et accueil tenant sur un écran */
.wrap{max-width:1320px;padding-left:max(clamp(16px,4vw,64px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,64px),env(safe-area-inset-right,0px))}
body[data-current="accueil"]{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body[data-current="accueil"] main{flex:1;display:flex;flex-direction:column;justify-content:center}
body[data-current="accueil"] header{padding-block:clamp(10px,2.2vh,22px)}
body[data-current="accueil"] footer{padding-block:clamp(10px,2vh,24px)}
.home .hero{padding-block:clamp(4px,2vh,24px) clamp(16px,3.5vh,40px)}
.home .hero h1{font-size:clamp(2.1rem,min(5.6vw,7.4vh),4.8rem);max-width:20ch}
.home .hero p{margin-top:clamp(8px,1.8vh,18px)}
.home .doors{padding-bottom:clamp(12px,3vh,40px)}
.home .door{min-height:clamp(130px,19vh,230px)}
@media (max-width:820px){body[data-current="accueil"]{display:block}}
/* Les dunes vont jusqu'au bord droit de l'écran au lieu d'être coupées net */
html,body{overflow-x:clip}
.home .hero{overflow:visible}
.home .hero::after{right:calc(-1 * max(0px,(100vw - 1320px) / 2));width:calc(55% + max(0px,(100vw - 1320px) / 2))}