/* Paraphe — feuille de style unique.
   Jetons de couleur et de typographie en tête ; thème sombre automatique (prefers-color-scheme)
   ou forcé par data-theme="dark|light" sur <html>. */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Mise en page « minute d'acte » : une marge de renvois à gauche, le corps de l'acte à droite. */
:root{
  --bg:#f5f6f3; --surface:#ffffff; --ink:#18212a; --muted:#59646c; --rule:#d8ddd8;
  --accent:#1c5a50; --accent-soft:#e3eeea; --accent-ink:#ffffff;
  --violet:#4a3d8c; --warn:#7a4f00; --warn-soft:#f6ecd6;
  --font-display:"Gloock","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Libre Franklin","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-hand:"Mrs Saint Delafield","Brush Script MT","Segoe Script",cursive;
  --margin-col:190px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1518; --surface:#162024; --ink:#e6ebe8; --muted:#9ba8a4; --rule:#2a373b;
    --accent:#72c2b2; --accent-soft:#1b3330; --accent-ink:#0b1513;
    --violet:#aea2f2; --warn:#e7b85c; --warn-soft:#33290f; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1518; --surface:#162024; --ink:#e6ebe8; --muted:#9ba8a4; --rule:#2a373b;
  --accent:#72c2b2; --accent-soft:#1b3330; --accent-ink:#0b1513;
  --violet:#aea2f2; --warn:#e7b85c; --warn-soft:#33290f; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:44px;height:26px;flex:none}
.brand b{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.01em}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto;font-size:14px}
.nav a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--accent)}
@media (max-width:760px){.nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:16px;padding-bottom:2px}.nav a{white-space:nowrap}}

/* La « folio » : marge de renvois + corps */
.folio{display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);gap:0 40px}
.margin{border-right:1px solid var(--rule);padding-right:20px;display:flex;flex-direction:column;gap:22px}
.renvoi{font-size:13px;line-height:1.5;color:var(--muted)}
.renvoi .n{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:4px}
.renvoi strong{color:var(--ink);font-weight:600}
.body{min-width:0}
@media (max-width:860px){
  .folio{grid-template-columns:minmax(0,1fr)}
  .margin{border-right:0;padding-right:0;order:2;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:24px}
  .renvoi{flex:1 1 220px;border-left:2px solid var(--violet);padding-left:12px}
}
section{padding-block:72px;border-bottom:1px solid var(--rule)}
section h2{font-size:clamp(30px,4vw,44px);margin-bottom:14px}
.lead{font-size:18px;color:var(--muted);max-width:62ch}

/* Ouverture */
.hero{padding-block:56px 64px}
.hero h1{font-size:clamp(40px,6.4vw,76px);max-width:15ch}
.hero .flourish{display:block;width:min(420px,80%);height:auto;margin:10px 0 22px;color:var(--violet)}
.hero .flourish path{stroke-dasharray:900;stroke-dashoffset:0;animation:sign 1.4s ease-out both}
@keyframes sign{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.hero .flourish path{animation:none}}
.hero .lead{font-size:19px;max-width:58ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--font-body);padding:13px 18px;border-radius:3px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:hover{filter:brightness(1.06)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--ink)}
.fact{padding:14px 16px 0 0}
.fact b{display:block;font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.1}
.fact span{font-size:13px;color:var(--muted)}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}}
.notice{display:flex;gap:12px;align-items:flex-start;margin-top:32px;padding:14px 16px;background:var(--warn-soft);color:var(--ink);border-radius:3px;font-size:14px;max-width:72ch}
.notice .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--warn);margin-top:6px}

/* Catalogue */
.cat-controls{display:flex;flex-direction:column;gap:14px;margin:26px 0 18px}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:3px;overflow:hidden;align-self:flex-start;max-width:100%}
.seg button{font:600 14px/1 var(--font-body);padding:12px 16px;background:transparent;color:var(--ink);border:0;cursor:pointer}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{font:500 13px/1 var(--font-body);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.search{flex:1 1 220px;min-width:0;max-width:320px;font:15px var(--font-body);padding:9px 12px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink)}
.cat-head,.row{display:grid;grid-template-columns:66px minmax(0,1fr) 150px 170px 22px;gap:16px;align-items:baseline}
.cat-head{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px 8px;border-bottom:1px solid var(--ink)}
.rows{display:flex;flex-direction:column}
.row{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--rule);padding:16px 4px;color:var(--ink);font:inherit;cursor:pointer}
.row:hover{background:var(--surface)}
.row .code{font-family:var(--font-mono);font-size:13px;color:var(--violet)}
.row .t{font-weight:600;font-size:16px;line-height:1.35}
.row .s{display:block;font-size:13px;color:var(--muted);margin-top:4px;font-weight:400}
.row .d,.row .p{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.row .p{text-align:right}
.row .go{color:var(--accent);font-size:18px}
.tag{display:inline-block;font:500 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;padding:4px 6px;border-radius:2px;margin-right:6px;background:var(--accent-soft);color:var(--ink)}
.tag.lvl{background:transparent;border:1px solid var(--violet);color:var(--violet)}
.empty{padding:28px 4px;color:var(--muted)}
@media (max-width:760px){
  .cat-head{display:none}
  .row{grid-template-columns:52px minmax(0,1fr);row-gap:6px}
  .row .d{grid-column:2}
  .row .p{grid-column:2;text-align:left}
  .row .go{display:none}
}

/* Offres groupées */
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;margin-top:28px;border-top:1px solid var(--ink)}
.pack{padding:18px 18px 20px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px;min-width:0}
.pack .who{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
.pack h3{font-size:22px}
.pack .price{font-family:var(--font-mono);font-size:15px}
.pack p{font-size:14px;color:var(--muted)}

/* Financement */
.fund{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}
@media (max-width:900px){.fund{grid-template-columns:minmax(0,1fr)}}
.fund article{min-width:0;border-top:3px solid var(--accent);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.fund h3{font-size:24px}
.fund .who{font-size:13px;color:var(--muted)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;font-size:14px;border-top:1px solid var(--rule);padding-top:10px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-family:var(--font-mono);text-align:right}
.fund ul{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.small{font-size:13px;color:var(--muted)}

/* Méthode */
.steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{padding:18px 20px 22px 0;border-bottom:1px solid var(--rule);min-width:0}
.steps .k{font-family:var(--font-mono);font-size:12px;color:var(--violet)}
.steps h3{font-size:22px;margin:4px 0 6px}
.steps p{font-size:14px;color:var(--muted)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:36px}
@media (max-width:760px){.cols2{grid-template-columns:minmax(0,1fr)}}
.cols2 h3{font-size:22px;margin-bottom:8px}
.cols2 p,.cols2 li{font-size:15px}
.cols2 ul{margin:0;padding-left:18px}

/* Équipe */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;margin-top:28px;border-top:1px solid var(--ink)}
.person{padding:18px 18px 20px 0;border-bottom:1px solid var(--rule);min-width:0}
.person h3{font-size:22px}
.person .role{font-size:14px;color:var(--muted);margin-top:4px}
.person .pending{display:inline-block;margin-top:10px;font-size:12px;line-height:1.3;padding:4px 8px;border-radius:2px;background:var(--warn-soft);color:var(--ink)}
.person .mods{font-family:var(--font-mono);font-size:12px;color:var(--violet);margin-top:10px}

/* Demande */
.req{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;margin-top:28px}
@media (max-width:900px){.req{grid-template-columns:minmax(0,1fr)}}
.req-list{border-top:1px solid var(--ink)}
.req-item{display:grid;grid-template-columns:minmax(0,1fr) 74px 96px 30px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule);font-size:14px}
.req-item .ti{min-width:0}
.req-item .ti b{display:block;font-weight:600}
.req-item input{width:100%;font:14px var(--font-mono);padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink)}
.req-item .pr{font-family:var(--font-mono);text-align:right}
.req-item button{background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.req-total{display:flex;justify-content:space-between;padding:12px 0;font-weight:600}
.req-total span:last-child{font-family:var(--font-mono)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.form{grid-template-columns:minmax(0,1fr)}}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.form input,.form select,.form textarea{font:15px var(--font-body);padding:9px 10px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink);width:100%}
.out{width:100%;min-height:190px;font:13px/1.5 var(--font-mono);padding:12px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink);resize:vertical;margin-top:14px}
.contact-box{margin-top:18px;padding:16px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.contact-box .ph{font-family:var(--font-mono);font-size:22px;user-select:all}
.toast{font-size:13px;color:var(--accent);min-height:1.4em}

/* Pied */
footer{padding-block:44px 56px;font-size:13px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr)}}
footer b{color:var(--ink);font-weight:600}
.clos{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;margin-top:14px}

/* Fiche programme */
dialog{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--rule);border-radius:4px;background:var(--bg);color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(10,16,18,.55)}
.f-head{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--rule);padding:14px 20px;display:flex;gap:12px;align-items:center;z-index:2}
.f-head .code{font-family:var(--font-mono);color:var(--violet);font-size:13px}
@media (max-width:520px){.f-head .tag{display:none}}
.f-head .x{margin-left:auto;background:transparent;border:1px solid var(--rule);border-radius:3px;color:var(--ink);font:500 14px var(--font-body);padding:6px 10px;cursor:pointer}
.f-body{padding:22px 20px 28px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}
@media (max-width:820px){.f-body{grid-template-columns:minmax(0,1fr)}}
.f-body h2{font-size:clamp(28px,3.4vw,38px);margin:6px 0 10px}
.f-body h4{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px}
.f-body .acc{color:var(--muted)}
.f-body ul.obj{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.status{display:inline-flex;gap:8px;align-items:center;font-size:13px;padding:6px 10px;background:var(--warn-soft);border-radius:3px;margin-top:12px}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.seqs{width:100%;border-collapse:collapse;font-size:14px}
.seqs td{border-bottom:1px solid var(--rule);padding:9px 6px 9px 0;vertical-align:top}
.seqs td.n{font-family:var(--font-mono);color:var(--violet);width:28px}
.seqs td.m{width:46px}
.seqs td.du{font-family:var(--font-mono);text-align:right;white-space:nowrap;width:70px}
.seqs tr.tot td{font-weight:600;border-bottom:0}
.mod{font:500 10px/1 var(--font-mono);padding:4px 5px;border-radius:2px;background:var(--accent-soft);color:var(--ink)}
.mod.cv{background:transparent;border:1px solid var(--violet);color:var(--violet)}
.aside{display:flex;flex-direction:column;gap:6px;min-width:0}
.fmt{border:1px solid var(--rule);background:var(--surface);border-radius:3px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.fmt b{font-weight:600}
.fmt .pz{font-family:var(--font-mono);font-size:16px;text-align:right}
.fmt .dt{grid-column:1/-1;font-size:13px;color:var(--muted)}
.aside p,.aside li{font-size:14px}
.aside ul{margin:0;padding-left:18px}
.add{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.add select{font:14px var(--font-body);padding:10px;border:1px solid var(--rule);border-radius:3px;background:var(--surface);color:var(--ink);flex:1 1 180px;min-width:0}

/* ---------- Logo animé : le paraphe se trace à l'ouverture et au survol ---------- */
.brand svg.mark{width:51px;height:40px;color:var(--violet);overflow:visible}
.mark path{stroke-dasharray:1;stroke-dashoffset:0;animation:ink 1.7s cubic-bezier(.65,.05,.3,1) .25s both}
.brand:hover .mark path,.brand:focus-visible .mark path{animation:ink-again 1.2s cubic-bezier(.65,.05,.3,1) both}
@keyframes ink{0%{stroke-dashoffset:1;fill-opacity:0}70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes ink-again{0%{stroke-dashoffset:1;fill-opacity:0}70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}

/* ---------- Photographies ---------- */
.photo{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--rule)}
.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.photo.zoom.ready img{transform:scale(1.08)}
.photo.zoom.ready.in img{transform:scale(1)}

/* Ouverture : texte à gauche, photo à droite */
.hero h1{font-size:clamp(38px,5.2vw,66px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center}
.hero-text{min-width:0}
.hero-photo{aspect-ratio:4/5;max-height:560px;animation:unveil 1.2s cubic-bezier(.7,0,.2,1) .2s both}
.hero-photo img{object-position:62% 50%}
@keyframes unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.hero-photo{aspect-ratio:16/10;max-height:none}}

/* Deux publics */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:28px}
@media (max-width:760px){.aud{grid-template-columns:minmax(0,1fr)}}
.aud-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.aud-card .photo{aspect-ratio:16/10}
.aud-card h3{font-size:30px;margin-top:8px}
.aud-card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.aud-card .btn{align-self:flex-start;margin-top:auto}

/* Figure pleine largeur */
.fig{margin:30px 0 0}
.fig .wide{aspect-ratio:21/9}
.fig figcaption{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:8px}
@media (max-width:640px){.fig .wide{aspect-ratio:4/3}}

/* ---------- Mouvements du site ---------- */
/* Soulignés tracés sous les titres de section */
.u{display:block;width:150px;height:12px;margin:-4px 0 16px;color:var(--violet);overflow:visible}
.u path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.65,.05,.3,1)}
.u.ready path{stroke-dashoffset:1}
.u.ready.in path{stroke-dashoffset:0}
/* Lignes du catalogue qui se posent l'une après l'autre */
.row{animation:rowin .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row .go{transition:transform .25s ease}
.row:hover .go{transform:translateX(4px)}
/* Point « en cours » qui respire */
.notice .dot,.status .dot{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}60%{box-shadow:0 0 0 7px color-mix(in srgb,var(--warn) 0%,transparent)}}
/* Fiche programme */
dialog[open]{animation:pop .28s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.btn{transition:filter .2s ease,transform .2s ease}
.btn:active{transform:translateY(1px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- Portraits des formateurs ---------- */
/* Initiales en attendant la photo ; la photo img/formateurs/<nom>.jpg remplace les initiales dès qu'elle existe. */
.avatar{position:relative;display:grid;place-items:center;width:72px;height:72px;margin-bottom:14px;border-radius:50%;overflow:hidden;background:var(--accent-soft);color:var(--accent);font-family:var(--font-display);font-size:26px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px var(--violet)}
.avatar svg{width:36px;height:28px;color:var(--violet)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:fadein .5s ease both}
.avatar.pending{background:transparent;box-shadow:none;border:1px dashed var(--muted)}
.avatar.pending svg{color:var(--muted)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- Photos supplémentaires ---------- */
.hero-photo img{object-position:42% 30%}
.hero-ink{position:absolute;left:18px;bottom:16px;width:150px;height:75px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));pointer-events:none}
.hero-ink path{stroke-dasharray:1;stroke-dashoffset:1;animation:ink 1.8s cubic-bezier(.65,.05,.3,1) 1.3s forwards}
.fig .banner{aspect-ratio:3/1}
@media (max-width:640px){.fig .banner{aspect-ratio:16/9}}
.packs{margin-top:24px}
.margin-photo{aspect-ratio:2/3;margin-top:4px}
@media (max-width:860px){.margin-photo{display:none}}
.req-photo{aspect-ratio:16/7;margin-bottom:18px}

/* ---------- Mouvements supplémentaires ---------- */
/* Barre d'encre : avancement de la lecture */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;pointer-events:none}
/* Renvois qui glissent depuis la marge */
.renvoi{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s ease}
.renvoi.ready{transform:translateX(-12px);opacity:.4}
.renvoi.ready.in{transform:none;opacity:1}
/* Filet d'accent des blocs Financement qui se trace */
.fund article{border-top:0;position:relative;padding-top:17px}
.fund article::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,.05,.3,1)}
.fund article.ready::before{transform:scaleX(0)}
.fund article.ready.in::before{transform:scaleX(1)}
/* Étapes de la méthode en cascade */
.steps li{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease;transition-delay:calc(var(--d,0) * 90ms)}
.steps li.ready{transform:translateY(14px);opacity:.35}
.steps li.ready.in{transform:none;opacity:1}
/* Packs : souligné à l'encre au survol */
.pack h3::after{content:"";display:block;height:2px;margin-top:4px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.65,.05,.3,1)}
.pack:hover h3::after{transform:scaleX(1)}
/* Portraits : anneau qui s'épaissit au survol */
.person .avatar{transition:box-shadow .3s ease}
.person:hover .avatar{box-shadow:inset 0 0 0 2px var(--violet)}
/* Chiffres d'ouverture qui se posent */
.fact{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.fact:nth-child(2){animation-delay:.08s}.fact:nth-child(3){animation-delay:.16s}.fact:nth-child(4){animation-delay:.24s}
@keyframes rise{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
/* Signature finale du pied de page */
.foot-ink{display:block;width:128px;height:100px;margin-top:16px;color:var(--violet)}
.foot-ink path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.65,.05,.3,1),fill-opacity .6s ease 1.4s}
.foot-ink.ready path{stroke-dashoffset:1;fill-opacity:0}
.foot-ink.ready.in path{stroke-dashoffset:0;fill-opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-ink path{stroke-dashoffset:0}
  .progress{display:none}
}

/* ---------- Signature manuscrite « by Digivoda » ---------- */
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-line{display:flex;align-items:baseline;gap:6px}
.brand .by{font-family:var(--font-hand);font-size:26px;line-height:.8;color:var(--violet);transform:rotate(-5deg) translateY(5px);white-space:nowrap;clip-path:inset(0 0 0 0);animation:write 1.4s cubic-bezier(.6,.05,.3,1) 1.5s both}
.brand:hover .by{animation:write-again 1.1s cubic-bezier(.6,.05,.3,1) both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
@keyframes write-again{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.brand small{margin-top:6px}

/* ---------- Vidéo de signature en fond d'ouverture ---------- */
:root{--vfilter:none;--veil-strong:var(--bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--vfilter:brightness(.45) saturate(.9)}}
:root[data-theme="dark"]{--vfilter:brightness(.45) saturate(.9)}
.hero-video{position:relative;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--bg)}
.hero-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 55%;filter:var(--vfilter)}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(0deg, var(--bg) 0%, var(--bg) 26%, color-mix(in srgb,var(--bg) 0%,transparent) 58%),
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, color-mix(in srgb,var(--bg) 72%,transparent) 52%, color-mix(in srgb,var(--bg) 8%,transparent) 100%)}
@media (max-width:860px){.hero-veil{background:color-mix(in srgb,var(--bg) 82%,transparent)}}
.hero .hero-grid{display:block}
.hero .hero-text{max-width:640px}
.hero h1{font-size:clamp(40px,6vw,76px);max-width:13ch}
.hero .margin{border-right-color:color-mix(in srgb,var(--rule) 60%,transparent)}
.vid-toggle{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:16px;z-index:2;font:500 12px/1 var(--font-body);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--ink);cursor:pointer}
.vid-toggle:hover{border-color:var(--violet)}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--ink);margin-top:26px}
details.qa{border-bottom:1px solid var(--rule)}
details.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 4px;font-weight:600;font-size:16px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font-family:var(--font-mono);color:var(--violet);font-size:18px;line-height:1;transition:transform .25s ease}
details.qa[open] summary::after{transform:rotate(45deg)}
details.qa p{padding:0 4px 16px;color:var(--muted);max-width:72ch}
details.qa[open] p{animation:fadein .35s ease both}
.f-faq{margin-top:4px}
.f-faq details.qa summary{font-size:14px;padding:12px 2px}
.f-faq details.qa p{font-size:14px;padding:0 2px 12px}

/* ---------- Fiche pratique (toutes les rubriques) ---------- */
.fp{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:0;border-top:1px solid var(--ink);margin:0}
.fp dt,.fp dd{padding:9px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:1.45}
.fp dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-right:10px}
.fp dd{margin:0}

/* ---------- Nos centres ---------- */
.centres{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;margin-top:26px;align-items:start}
@media (max-width:900px){.centres{grid-template-columns:minmax(0,1fr)}}
.map{position:relative;width:100%;max-width:560px}
.map svg{display:block;width:100%;height:auto}
.map .land{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}
.map .pin{cursor:pointer}
.map .pin .nib{fill:var(--violet)}
.map .pin .slit{stroke:var(--bg);stroke-width:1.4;stroke-linecap:round}
.map .pin .hole{fill:var(--bg)}
.map .pin text{font:600 12px var(--font-body);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.map .pin:hover .nib,.map .pin:focus .nib,.map .pin.on .nib{fill:var(--accent)}
.map .pin .drop{transition:transform .7s cubic-bezier(.3,1.4,.5,1),opacity .5s ease;transition-delay:calc(var(--d,0) * 70ms)}
.map.ready .pin .drop{transform:translateY(-26px);opacity:0}
.map.ready.in .pin .drop{transform:none;opacity:1}
.map .pin text{font-size:11px}
.map .traces path{fill:none;stroke-linecap:round}
.map .trace{stroke:var(--violet);stroke-width:1.1;opacity:.42;stroke-dasharray:1 1;stroke-dashoffset:0}
.map .flow{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:.035 .965;stroke-dashoffset:1;opacity:0}
.map .hub .core{fill:var(--accent)}
.map .hub .ring{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .map .land{stroke-dasharray:1 1}
  .map.ready .land{stroke-dashoffset:1;fill-opacity:0}
  .map.ready.in .land{stroke-dashoffset:0;fill-opacity:1;transition:stroke-dashoffset 2.2s ease,fill-opacity 1s ease 1.4s}
  .map.ready .trace{stroke-dashoffset:1}
  .map.ready.in .trace{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.5,0,.2,1) calc(var(--d,0) * 90ms + .6s)}
  .map .flow{animation:flow 3.6s linear infinite;animation-delay:calc(var(--d,0) * -0.37s)}
  .map .hub .ring{animation:pulse 2.6s ease-out infinite}
  .map .hub .r2{animation-delay:1.3s}
  .map .pin:hover .drop,.map .pin:focus .drop,.map .pin.on .drop{animation:bob .9s ease-in-out infinite alternate}
}
@keyframes flow{0%{stroke-dashoffset:1;opacity:0}8%{opacity:.9}88%{opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(4.2);opacity:0}}
@keyframes bob{to{transform:translateY(-5px)}}
.map .pin.on text{fill:var(--accent)}
.centre-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
@media (max-width:520px){.centre-list{grid-template-columns:minmax(0,1fr)}}
.centre-list li{padding:12px 0;border-bottom:1px solid var(--rule);min-width:0}
.centre-list b{display:block;font-family:var(--font-display);font-weight:400;font-size:20px}
.centre-list span{display:block;font-size:13px;color:var(--muted)}
.centre-list a{font-size:13px}
.centre-list li.on b{color:var(--accent)}
@media (prefers-reduced-motion: reduce){.brand .by{clip-path:none}}

/* ---------- Signature « by Digivoda » : ne chevauche plus la ligne du dessous ---------- */
.brand .by{transform:rotate(-6deg) translateY(-4px)}
.brand small{margin-top:9px}

/* ---------- L'équipe Digivoda ---------- */
.dv-video{margin:28px 0 8px;border:1px solid var(--rule);background:var(--surface)}
.dv-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#11324f}
.dv-video figcaption{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:12px 16px;font-size:14px;color:var(--muted)}
.dv-video figcaption span:last-child{flex:1 1 260px}
.hand{font-family:var(--font-hand);color:var(--violet);font-size:40px;line-height:.9;transform:rotate(-4deg);display:inline-block}
.dv-grid{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:26px 18px}
.dv-grid li{display:flex;flex-direction:column;align-items:center;text-align:center}
.dv-grid img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);background:var(--surface);filter:grayscale(.15)}
.dv-grid li:hover img{filter:none}
.hand-name{font-family:var(--font-hand);font-size:36px;line-height:1;color:var(--violet);margin-top:8px;padding:0 8px;transform:rotate(-4deg);white-space:nowrap;clip-path:inset(-30% -10% -30% -10%)}
.dv-role{font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:4px;max-width:18ch}
.dv-src{margin-top:22px}
.dv-grid li.ready:not(.in) .hand-name{clip-path:inset(-30% 110% -30% -10%)}
.dv-grid li.ready:not(.in) img{opacity:0;transform:scale(.92)}
.dv-grid li.in img{animation:dv-pop .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms) both}
.dv-grid li.in .hand-name{animation:dv-write 1.1s cubic-bezier(.6,.05,.3,1) calc(var(--i,0)*70ms + .25s) both}
@keyframes dv-write{from{clip-path:inset(-30% 110% -30% -10%)}to{clip-path:inset(-30% -10% -30% -10%)}}
@keyframes dv-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (max-width:560px){.dv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}.hand-name{font-size:32px}}

/* ---------- Financeurs ---------- */
.financeurs{margin-top:34px;border-top:1px solid var(--ink);padding-top:16px}
.financeurs ul{list-style:none;margin:10px 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.financeurs li{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--rule);background:var(--surface)}
.fin-name{align-self:flex-start;font-family:var(--font-mono);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--accent);border:1.5px solid currentColor;padding:4px 10px;border-radius:3px}
.fin-desc{font-size:14px;color:var(--muted)}

/* ---------- Informations légales ---------- */
details.legal{border-top:1px solid var(--rule)}
details.legal:last-of-type{border-bottom:1px solid var(--rule)}
details.legal summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 4px;font-family:var(--font-display);font-size:22px}
details.legal summary::-webkit-details-marker{display:none}
details.legal summary::after{content:"+";font-family:var(--font-mono);color:var(--violet);font-size:20px;line-height:1.2;transition:transform .25s ease}
details.legal[open] summary::after{transform:rotate(45deg)}
.legal-body{padding:0 4px 24px;max-width:78ch;font-size:15px}
.legal-body h3{font-family:var(--font-body);font-weight:600;font-size:15px;margin:18px 0 6px}
.legal-body p,.legal-body ul{color:var(--muted);margin:0 0 8px}
.legal-body ul{padding-left:20px}
.legal-body .todo{background:var(--warn-soft);color:var(--warn);padding:8px 12px;border-radius:3px;font-size:14px}
details.legal[open] .legal-body{animation:fadein .35s ease both}
.foot-links{margin-top:8px}
.foot-links a{color:inherit}

@media (prefers-reduced-motion: reduce){
  .dv-grid li.in img,.dv-grid li.in .hand-name{animation:none}
  .dv-grid li.ready:not(.in) img{opacity:1;transform:none}
  .dv-grid li.ready:not(.in) .hand-name{clip-path:none}
}
details.legal{scroll-margin-top:150px}
.dv-role{margin-top:9px}
.aud{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.nw{white-space:nowrap}

/* ---------- Site en plusieurs pages : lien du menu de la page en cours ---------- */
.nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Quatre publics : les onglets passent à la ligne sur petit écran ---------- */
.seg{flex-wrap:wrap}
.seg button{transition:background-color .25s ease,color .25s ease}
@media (max-width:640px){.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.seg button+button{border-left:0}.seg button{border-bottom:1px solid var(--ink)}.seg button:nth-child(odd){border-right:1px solid var(--ink)}}

/* ---------- FAQ par thème ---------- */
.faq-filters{margin-top:22px}
.faq-list .qa.flash{animation:qa-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0) * 40ms)}
@keyframes qa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
details.qa summary{transition:color .2s ease,padding-left .25s ease}
details.qa summary:hover{color:var(--accent);padding-left:10px}

@media (prefers-reduced-motion: no-preference){
  /* Page qui apparaît, puis s'efface au changement de page */
  body{animation:page-in .45s ease both}
  body.leaving main,body.leaving footer{opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
  @keyframes page-in{from{opacity:0}to{opacity:1}}

  /* Titre d'accueil mot par mot */
  .hero h1 .w{display:inline-block;animation:word-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--w,0) * 70ms + .15s)}
  @keyframes word-in{from{opacity:0;transform:translateY(.45em) rotate(2deg)}to{opacity:1;transform:none}}

  /* Cartes qui montent en cascade à l'entrée dans l'écran */
  .rise{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s ease,box-shadow .3s ease;transition-delay:calc(var(--k,0) * 60ms)}
  .rise.ready{opacity:0;transform:translateY(18px)}
  .rise.ready.in{opacity:1;transform:none}

  /* Survol : les cartes se soulèvent légèrement */
  .aud-card,.pack,.person,.financeurs li,.centre-list li{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
  .aud-card:hover,.financeurs li:hover{transform:translateY(-4px)}
  .pack:hover,.person:hover,.centre-list li:hover{transform:translateY(-3px)}
  .aud-card:hover .photo img{transform:scale(1.04)}
  .person:hover .avatar img{transform:scale(1.06);transition:transform .4s ease}

  /* Boutons : reflet qui passe au survol */
  .btn{position:relative;overflow:hidden}
  .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,#fff 28%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
  .btn:hover::after{transform:translateX(120%)}

  /* Lien du menu de la page en cours : souligné qui se trace */
  .nav a[aria-current="page"]{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;border-bottom-color:transparent;animation:nav-ink .6s .3s cubic-bezier(.65,.05,.3,1) forwards}
  @keyframes nav-ink{to{background-size:100% 1px}}
}

/* ---------- Bouton « Haut de page » ---------- */
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid var(--violet);background:var(--bg);color:var(--violet);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .3s ease,background-color .2s ease,color .2s ease}
.to-top svg{width:20px;height:20px}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--violet);color:var(--bg)}

/* Formulaire de demande */
.form .wide,.form-send{grid-column:1/-1}
.form textarea{resize:vertical;min-height:120px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-send{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.form-send .btn[disabled]{opacity:.65;cursor:wait}
.form-msg{margin:0;font-size:14px;flex:1 1 220px}
.form-msg.ok{color:var(--accent);font-weight:600}
.form-msg.err{color:var(--warn)}