/* Boubacar Soumaré : feuille du site. Source : web/boubacarsoumare/assets/style.css. */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url("polices/cinzel-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url("polices/cinzel-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url("polices/cinzel-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;src:url("polices/cinzel-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("polices/manrope-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("polices/manrope-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("polices/manrope-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("polices/manrope-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("polices/manrope-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("polices/manrope-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("polices/manrope-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("polices/manrope-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("polices/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("polices/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* boubacarsoumare.com : la maquette v2 du 24 septembre 2026, validée le 29,
   avec le canevas et le schéma de workflow des propositions du 29 septembre.
   Couleurs de la charte du site, et d'elles seules : aucune teinte calculée,
   aucun bordeaux en transparence (sur l'ivoire, il vire au rose). Les seules
   transparences sont celles du fond, de l'encre, de la cendre et de l'or. */
:root{
  color-scheme:light;
  --fond:#F7F4EF; --surface:#EFEAE2; --encre:#1B1418; --cendre:#6F6268; --filet:#D9D1C8;
  --accent:#6E1423; --survol:#4E0E19; --cle:#6E1423; --sur-accent:#F7F4EF; --ico:#6E1423;
  --halo:rgba(111,98,104,.28);
  --trait:rgba(111,98,104,.62); --trait-doux:rgba(111,98,104,.32); --point:rgba(111,98,104,.24);
  --carte:#F7F4EF; --carte-bord:rgba(111,98,104,.46); --voile:rgba(247,244,239,.9);
  --ombre:0 18px 50px -24px rgba(27,20,24,.35);
  --serif:"Cinzel",Georgia,serif; --sans:"Manrope","Segoe UI",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
}
:root[data-theme="nuit"]{
  color-scheme:dark;
  --fond:#0B0809; --surface:#110B0D; --encre:#EDE6DA; --cendre:#A79E93; --filet:#3A0F18;
  --accent:#6E1423; --survol:#6E1423; --cle:#C9A227; --sur-accent:#EDE6DA; --ico:#EDE6DA;
  --halo:rgba(201,162,39,.25);
  --trait:rgba(167,158,147,.56); --trait-doux:rgba(167,158,147,.26); --point:rgba(167,158,147,.15);
  --carte:#0B0809; --carte-bord:rgba(167,158,147,.4); --voile:rgba(11,8,9,.88);
  --ombre:0 18px 50px -20px rgba(11,8,9,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-theme="nuit"] :focus-visible{outline-color:var(--cle)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.in{max-width:1480px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.015em}
h2{font-size:clamp(30px,3.4vw,44px);font-weight:800}
h3{font-size:19px;font-weight:700}
p{margin:0 0 16px}
.sur{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cendre);margin:0 0 14px}
.intro{font-size:19px;max-width:62ch;color:var(--cendre);margin-bottom:38px}
.k{color:var(--cle)}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
section+section{border-top:1px solid var(--filet)}
.saut{position:absolute;left:-9999px;top:0}
.saut:focus{left:12px;top:12px;z-index:50;background:var(--encre);color:var(--fond);padding:10px 14px;border-radius:3px}

/* révélation au défilement, seulement quand le script tourne : sans lui,
   tout reste visible */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* barre de navigation */
.nav{position:sticky;top:0;z-index:20;background:var(--voile);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--filet)}
.nav .in{display:flex;align-items:center;gap:22px;height:64px}
.wordmark{font:600 14px/1 var(--serif);letter-spacing:.2em;position:relative;padding-bottom:10px;white-space:nowrap}
.wordmark::after{content:"";position:absolute;left:44%;right:44%;bottom:0;height:2px;background:var(--accent)}
.nav .liens{display:flex;gap:4px;margin-left:12px}
.nav .liens a{font:500 13px/1 var(--sans);padding:9px 11px;border-radius:3px;color:var(--cendre);transition:color .15s,background .15s;white-space:nowrap}
.nav .liens a:hover,.nav .liens a.on{color:var(--encre);background:var(--surface)}
/* « .nav » obligatoire : un « .liens » nu masquait aussi svg.liens, les traits
   des deux schémas, sous 1420 px (mesuré le 29 sept. 2026, téléphone et portable) */
@media (max-width:1420px){.nav .liens{display:none}}
.ctrl{margin-left:auto;display:flex;gap:6px;align-items:center}
.ctrl a,.ctrl button{font:500 12px/1 var(--mono);letter-spacing:.06em;background:transparent;border:1px solid var(--filet);color:var(--cendre);padding:8px 10px;cursor:pointer;border-radius:3px;transition:all .15s}
.ctrl [aria-pressed="true"],.ctrl [aria-current="true"]{color:var(--fond);background:var(--encre);border-color:var(--encre)}
.ctrl a{display:inline-flex;align-items:center;gap:6px}
/* les drapeaux du sélecteur : leurs couleurs réelles vivent dans le SVG (seule exception à la charte), le filet les détache du fond en Jour comme en Nuit */
.drapeau{display:block;flex:none;width:18px;height:12px;border-radius:1px;box-shadow:0 0 0 1px var(--filet)}
.ctrl .sep{width:1px;height:18px;background:var(--filet);margin:0 4px}
/* la barre étroite : les drapeaux prennent de la place, le mot-marque et les boutons se resserrent par paliers, mesurés de 320 à 1920 px */
@media (max-width:560px){.wordmark{font-size:12px;letter-spacing:.1em}.nav .in{gap:10px}.ctrl{gap:4px}.ctrl a,.ctrl button{padding:7px 7px}.ctrl a{gap:4px}.ctrl .sep{margin:0 1px}.drapeau{width:15px;height:10px}}
@media (max-width:420px){.wordmark{font-size:11px;letter-spacing:.05em}.ctrl a,.ctrl button{padding:6px 5px;font-size:11px}.ctrl .sep{display:none}.drapeau{width:14px;height:9px}}
@media (max-width:360px){.nav .in{padding:0 12px;gap:8px}.wordmark{font-size:10.5px;letter-spacing:.03em}.ctrl{gap:3px}.ctrl a{gap:3px;padding:6px 3px}.ctrl button{padding:6px 4px}.drapeau{width:12px;height:8px}}
@media (max-width:340px){.nav .in{gap:6px}.wordmark{letter-spacing:0}.ctrl{gap:2px}}
.progres{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent);transition:width .1s linear}

/* héros */
.hero{min-height:calc(100vh - 64px);display:grid;align-items:center;padding:0;border:0;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .in{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(28px,5vw,80px);align-items:center;padding-top:56px;padding-bottom:56px;width:100%}
@media (max-width:900px){.hero .in{grid-template-columns:1fr}.hero .photo{order:-1;max-width:300px}}
.hero h1{font-size:clamp(38px,5.4vw,74px);font-weight:800;max-width:15ch}
.hero .sous{font-size:clamp(18px,1.6vw,22px);color:var(--cendre);max-width:46ch;margin:26px 0 34px;line-height:1.5}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{font:600 14px/1 var(--sans);padding:15px 22px;border-radius:3px;border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:transparent;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex;align-items:center;gap:10px}
.btn.plein{background:var(--accent);color:#F7F4EF}
.btn:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.btn.plein:hover{background:var(--survol);border-color:var(--survol)}
:root[data-theme="nuit"] .btn{color:var(--encre);border-color:var(--filet)} :root[data-theme="nuit"] .btn.plein{background:var(--accent);border-color:var(--accent)}
.photo{position:relative;justify-self:end;width:min(100%,420px);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:4px;display:block;filter:saturate(.92);box-shadow:var(--ombre)}
.photo::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--accent);border-radius:4px;opacity:.55;pointer-events:none}
.photo .tag{position:absolute;left:-14px;bottom:-14px;background:var(--encre);color:var(--fond);font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;padding:10px 14px;border-radius:3px}
:root[data-theme="nuit"] .photo .tag{background:var(--surface);color:var(--encre);border:1px solid var(--filet)}
@media (max-width:900px){.photo{justify-self:start}.photo .tag{left:0}}
.defile{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--cendre);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.defile i{display:block;width:1px;height:34px;background:linear-gradient(var(--cendre),transparent);animation:goutte 1.8s infinite}
@keyframes goutte{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.defile i{animation:none}}
@media (max-width:900px){.defile{display:none}}

/* relevé */
.releve{background:var(--surface);border:0}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 32px}
.chiffre{border-left:2px solid var(--filet);padding-left:18px;transition:border-color .3s}
.chiffre.on{border-left-color:var(--accent)}
.chiffre .n{font:500 clamp(40px,4.4vw,58px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--cle);letter-spacing:-.02em}
.chiffre .q{font-weight:700;margin:10px 0 4px}
.chiffre .c{font:400 12.5px/1.5 var(--mono);color:var(--cendre)}
.releve .pied{display:flex;align-items:center;gap:10px;font:400 12.5px/1.5 var(--mono);color:var(--cendre);margin-top:34px;flex-wrap:wrap}
.releve .exemple{flex-basis:100%;margin:0;padding-left:18px}
.releve .exemple[hidden],.releve [hidden]{display:none}
.releve .absent{flex:1 1 300px}
.chiffres.sans .chiffre .n{font-size:clamp(20px,2vw,26px);color:var(--cendre);letter-spacing:.04em}
.pt{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:pouls 2.4s infinite}
:root[data-theme="nuit"] .pt{background:var(--cle)}
@keyframes pouls{0%{box-shadow:0 0 0 0 var(--halo)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pt{animation:none}}

/* la mise en production : une chaîne verticale au style du canevas.
   Le trait qui relie deux étapes vit DANS le maillon du haut (son ::after
   descend de l'icône jusqu'au bas du maillon, écart compris) : il ne peut
   sortir d'aucun cadre, et aucune ligne ne défile de côté. Disposition A de
   docs/propositions-frise-2026-09-29.html. */
.chaine-v{list-style:none;margin:0;padding:0;counter-reset:m;max-width:1120px}
.maillon{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 clamp(16px,2.4vw,28px);padding-bottom:26px}
.maillon:last-child{padding-bottom:0}
.maillon .port{position:relative;display:flex;justify-content:center}
.maillon .boite{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border:1.5px solid var(--carte-bord);border-radius:11px;background:var(--carte);transition:border-color .2s,transform .2s}
.maillon:first-child .boite{border-radius:29px 11px 11px 29px}
.maillon:first-child .boite::before{content:"";position:absolute;left:-7px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--cle)}
.maillon .boite svg{width:26px;height:26px;stroke:var(--ico);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.maillon:not(:last-child)::after{content:"";position:absolute;left:31px;top:58px;bottom:0;width:2px;background-image:linear-gradient(var(--trait) 55%,transparent 0);background-size:2px 10px;animation:flux-v 1.4s linear infinite}
.maillon:not(:last-child)::before{content:"";position:absolute;left:28px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--trait);z-index:2}
@keyframes flux-v{to{background-position:0 10px}}
.maillon .carte-m{background:var(--fond);border:1.5px solid var(--carte-bord);border-radius:10px;padding:16px clamp(16px,2vw,24px) 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px 28px;transition:border-color .25s,box-shadow .25s,transform .25s}
@media (min-width:900px){.maillon .carte-m{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:baseline}.maillon .carte-m .num{grid-column:1/-1}}
.maillon:hover .carte-m{border-color:var(--cle);box-shadow:var(--ombre);transform:translateX(4px)}
.maillon:hover .boite{border-color:var(--cle);transform:translateY(-2px)}
.maillon .num{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--cle);text-transform:uppercase}
.maillon h3{margin:8px 0 4px;font-size:18px;line-height:1.3}
.maillon p{font-size:15px;color:var(--cendre);margin:0}
@media (max-width:520px){.maillon{grid-template-columns:44px minmax(0,1fr);gap:0 12px}.maillon .boite{width:44px;height:44px;border-radius:10px}.maillon:first-child .boite{border-radius:22px 10px 10px 22px}.maillon .boite svg{width:21px;height:21px}.maillon:not(:last-child)::after{left:21px;top:44px}.maillon:not(:last-child)::before{left:18px}}
@media (prefers-reduced-motion:reduce){.maillon:not(:last-child)::after{animation:none}.maillon .carte-m,.maillon .boite{transition:none}}

/* la bande de compétences, sous le héros : chaque mot mène à sa preuve */
.bande{padding:clamp(28px,4vw,44px) 0;background:var(--surface);border-top:1px solid var(--filet)}
.bande ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.bande li>button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;width:100%;height:100%;padding:14px 16px;border:1px solid var(--filet);border-radius:4px;background:var(--fond);color:var(--encre);font:inherit;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.bande li>button:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--ombre)}
.bande li>button[aria-expanded="true"]{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
:root[data-theme="nuit"] .bande li>button:hover,:root[data-theme="nuit"] .bande li>button[aria-expanded="true"]{border-color:var(--cle)}
:root[data-theme="nuit"] .bande li>button[aria-expanded="true"]{box-shadow:inset 0 -3px 0 var(--cle)}
.bande .chevron{display:inline-block;width:7px;height:7px;margin-left:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.bande [aria-expanded="true"] .chevron{transform:translateY(1px) rotate(-135deg)}
/* le panneau de preuve, juste sous la bande : il pousse la suite vers le bas, rien au-dessus ne bouge */
.bande li.bande-p{grid-column:1/-1;padding:18px 20px;border:1px solid var(--filet);border-left:3px solid var(--accent);border-radius:4px;background:var(--fond)}
.bande-p>div{max-width:78ch}
.bande li.bande-p[hidden]{display:none}
:root[data-theme="nuit"] .bande li.bande-p{border-left-color:var(--cle)}
.bande-p p{margin:0 0 10px;font:400 15px/1.6 var(--sans)}
.bande-p .bande-mot{font:700 15px/1.25 var(--sans)}
.bande-actions{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:4px 0 0!important}
.bande-actions a{font:600 13px/1 var(--sans);color:var(--accent)}
:root[data-theme="nuit"] .bande-actions a{color:var(--cle)}
.bande-fermer{font:500 12px/1 var(--mono);letter-spacing:.06em;background:transparent;border:1px solid var(--filet);color:var(--cendre);padding:8px 10px;border-radius:3px;cursor:pointer}
.bande .mot{font:700 15px/1.25 var(--sans)}
.bande .preuve{font:400 12.5px/1.45 var(--mono);color:var(--cendre)}
.bande .va{margin-top:auto;font:600 12px/1 var(--sans);color:var(--accent)}
:root[data-theme="nuit"] .bande .va{color:var(--cle)}

/* la livraison : les missions, puis la chaîne de la plateforme */
.sous-titre{font-size:clamp(20px,2vw,26px);margin:0 0 18px}
.missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px;margin-bottom:clamp(48px,6vw,80px)}
.mission-c{background:var(--surface);border:1px solid var(--filet);border-top:3px solid var(--accent);border-radius:4px;padding:20px 22px;transition:transform .25s,box-shadow .25s}
.mission-c:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.mission-c .secteur{font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cendre);margin:0 0 10px}
.mission-c h4{font-size:19px;line-height:1.25;margin:0 0 8px}
.mission-c .chiffre-m{font:500 15px/1.4 var(--mono);color:var(--cle);margin:0 0 10px}
.mission-c p:last-child{font-size:15px;color:var(--cendre);margin:0}
.livraison .intro{margin-bottom:24px}
.maillons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 40px}
.maillons li{border-top:1px solid var(--filet);padding:16px 0 18px}
.maillons h4{font-size:17px;margin:8px 0 6px}
.maillons p{font-size:15px;color:var(--cendre);margin:0}
.maillons .etat{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:3px;border:1px solid var(--filet);color:var(--cendre)}
.maillons .e-service .etat{border-color:var(--accent);color:var(--accent)}
:root[data-theme="nuit"] .maillons .e-service .etat{border-color:var(--cle);color:var(--cle)}
.maillons .e-suite .etat{border-style:dashed}


/* la plateforme : le canevas, puis le schéma de workflow */
.plateforme{background:var(--surface)}
.plateforme .figure{background-color:var(--fond)}
.plateforme .plongee{background:var(--fond)}
.workflow{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--filet)}
.workflow h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:10px}
.workflow .intro{margin-bottom:0}

/* pour des agents */
.meca{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;margin-bottom:56px}
.carte{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:22px 24px;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre);border-color:var(--accent)}
.carte .num{font:400 12px/1 var(--mono);color:var(--cendre);letter-spacing:.1em;margin-bottom:14px}
.carte h3{margin-bottom:10px}
.carte pre{margin:12px 0;font:400 12.5px/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--fond);border:1px solid var(--filet);padding:12px 14px;border-radius:3px;color:var(--encre)}
.carte pre .k{font-weight:500}
.carte p{font-size:15px;color:var(--cendre);margin:0}
.regles-titre{margin-bottom:8px}
.regles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 40px}
.regles details{border-top:1px solid var(--filet);padding:4px 0}
.regles summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:38px 1fr 24px;gap:12px;align-items:baseline;padding:16px 0;font-weight:700;font-size:17px}
.regles summary::-webkit-details-marker{display:none}
.regles summary .i{font:400 12.5px/1.7 var(--mono);color:var(--cendre)}
.regles summary .pm{font:400 20px/1 var(--mono);color:var(--cendre);justify-self:end;transition:transform .2s}
.regles details[open] summary .pm{transform:rotate(45deg)}
.regles .cout{padding:0 0 18px 50px;color:var(--cendre);font-size:15.5px;margin:0}

/* études */
.etudes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.etude{text-align:left;background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:24px;cursor:pointer;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;display:flex;flex-direction:column;gap:12px;min-height:250px;font:inherit}
.etude:hover{transform:translateY(-6px);box-shadow:var(--ombre);border-color:var(--accent)}
.etude .m{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cendre)}
.etude h3{font-size:20px;line-height:1.25}
.etude .r{margin-top:auto;font:500 15px/1.4 var(--mono);color:var(--cle)}
.etude .lire{font:600 13px/1 var(--sans);color:var(--accent);display:flex;align-items:center;gap:8px}
:root[data-theme="nuit"] .etude .lire{color:var(--encre)}
dialog{border:0;border-radius:6px;background:var(--fond);color:var(--encre);padding:0;width:min(860px,94vw);max-height:90vh;box-shadow:0 40px 100px -30px rgba(11,8,9,.6)}
dialog::backdrop{background:rgba(11,8,9,.62);backdrop-filter:blur(4px)}
dialog .corps{padding:34px clamp(22px,4vw,48px) 40px;overflow:auto;max-height:90vh}
dialog .fermer{position:sticky;top:0;float:right;background:var(--surface);border:1px solid var(--filet);border-radius:50%;width:38px;height:38px;cursor:pointer;color:var(--encre);font:400 18px/1 var(--mono)}
dialog h3{font-size:clamp(24px,2.6vw,32px);margin:8px 0 6px;max-width:20ch}
dialog .m{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cendre)}
dialog .res{font-family:var(--mono);color:var(--cle)}
dialog dl{margin:24px 0 0}
dialog dt{font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;color:var(--cendre);text-transform:uppercase;margin:20px 0 6px}
dialog dd{margin:0;max-width:66ch}
.mesure{background:var(--surface);border:1px solid var(--filet);border-left:3px solid var(--accent);padding:14px 16px;font:400 14px/1.6 var(--mono);border-radius:3px}
.mesure b{color:var(--cle);font-weight:500}

/* parcours */
.deux{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,80px)}
@media (max-width:900px){.deux{grid-template-columns:1fr}}
.postes{list-style:none;margin:0;padding:0;border-left:1px solid var(--filet)}
.postes li{position:relative;padding:0 0 30px 30px}
.postes li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--fond)}
.postes time{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cle)}
.postes h3{margin:10px 0 6px}
.postes p{font-size:15.5px;color:var(--cendre);margin:0}
.comp h3{font:500 12px/1.4 var(--mono);letter-spacing:.12em;color:var(--cendre);text-transform:uppercase;margin:22px 0 10px}
.comp h3:first-child{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font:500 13px/1 var(--sans);padding:9px 12px;border:1px solid var(--filet);border-radius:3px;background:var(--surface);transition:all .15s}
.chips span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
:root[data-theme="nuit"] .chips span:hover{color:var(--cle);border-color:var(--cle)}

/* CV */
.cv{background:var(--surface)}
.cvbloc{background:var(--fond);border:1px solid var(--filet);border-radius:6px;padding:clamp(24px,4vw,48px);box-shadow:var(--ombre)}
.cv-tete{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;border-bottom:1px solid var(--filet);padding-bottom:24px;margin-bottom:26px}
@media (max-width:700px){.cv-tete{grid-template-columns:1fr}}
.cv-tete img{width:120px;height:150px;object-fit:cover;object-position:top;border-radius:4px}
.cv-tete h3{font:700 clamp(22px,2.4vw,30px)/1.1 var(--sans)}
.cv-tete .t{color:var(--cendre);margin:6px 0 10px}
.cv-tete .c{font:400 13px/1.7 var(--mono);color:var(--cendre);margin:0;overflow-wrap:anywhere}
.cv-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.cv-grille{display:grid;grid-template-columns:1fr 1.7fr;gap:clamp(24px,4vw,56px)}
@media (max-width:800px){.cv-grille{grid-template-columns:1fr}}
.cvbloc h4{font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--cendre);text-transform:uppercase;margin:0 0 10px}
.cvbloc .b{margin-bottom:26px}
.cvbloc .b p{font-size:15px;margin:0 0 8px}
.cvbloc .xp{margin-bottom:22px}
.cvbloc .xp b{display:block}
.cvbloc .xp time{font:500 12px/1.6 var(--mono);color:var(--cle)}
.cvbloc .xp ul{margin:6px 0 0;padding-left:18px;font-size:15px;color:var(--cendre)}
.cvbloc .xp li{margin:2px 0}
.cvbloc .xp .d{font:400 12px/1 var(--mono);color:var(--cendre);white-space:nowrap}
.cv-complet .cv-s{margin-bottom:26px}
.cv-complet .profil{max-width:none;font-size:15.5px;margin:0}
.cv-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:6px 32px;margin:0}
.cv-comp div{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;font-size:14.5px;line-height:1.5}
.cv-comp dt{font-weight:700;display:inline}
.cv-comp dd{margin:0;color:var(--cendre)}
.cv-complet .poste{margin-bottom:18px}
.cv-complet .poste-t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;border-bottom:1px solid var(--filet);padding-bottom:6px;margin-bottom:10px}
.cv-complet .poste-t b{font-size:16.5px}
.cv-complet time{font:500 12px/1.6 var(--mono);color:var(--cle)}
.cv-complet .mission{margin:0 0 14px}
.cv-complet .mission-t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px}
.cv-complet .role{font-style:italic;color:var(--cendre);font-size:14.5px;margin:2px 0 4px}
.cv-complet ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.5}
.cv-complet li{margin:2px 0}
.cv-complet .env{font:400 12.5px/1.5 var(--mono);color:var(--cendre);margin:6px 0 0}
.cv-complet .env span{color:var(--encre)}
.cv-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 32px}
.cv-blocs .b p{font-size:14.5px}
.page-cv{padding:clamp(28px,5vw,64px) 0}

/* contact */
.contact .in{text-align:center}
.contact h2{margin-bottom:16px}
.contact p{max-width:52ch;margin:0 auto 30px;color:var(--cendre);font-size:18px}
.contact .grand{font:500 clamp(16px,2.6vw,30px)/1.4 var(--mono);display:block;margin-bottom:14px;color:var(--encre);overflow-wrap:anywhere}
.contact .grand:hover{color:var(--accent)}
:root[data-theme="nuit"] .contact .grand:hover{color:var(--cle)}
footer{border-top:1px solid var(--filet);padding:26px 0 40px}
footer .in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:400 12.5px/1.6 var(--mono);color:var(--cendre)}
footer a{text-decoration:underline;text-underline-offset:3px}

/* le canevas au style des workflows n8n (propositions du 29 sept.) */
.puces{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:4px 26px;margin:14px 0 18px;padding:0;list-style:none}
.puces li{font-size:14.5px;color:var(--cendre);border-top:1px solid var(--filet);padding-top:8px}
.puces li b{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bouton{font:600 13px/1 var(--sans);border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:4px;padding:10px 14px;cursor:pointer}
:root[data-theme="nuit"] .bouton{color:var(--encre);border-color:var(--cendre)}
.bouton:hover{background:var(--accent);color:var(--sur-accent);border-color:var(--accent)}
.legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin:20px 0 14px;padding:0;list-style:none;font:400 12px/1.4 var(--mono);color:var(--cendre)}
.legende li{display:flex;align-items:center;gap:7px}
.legende i{display:inline-block;width:18px;height:14px;border:1.5px solid var(--carte-bord);border-radius:4px;background:var(--carte)}
.legende i.d{border-radius:8px 3px 3px 8px}
.legende i.x{border-style:dashed}
.legende i.s{box-shadow:3px 3px 0 -1px var(--carte),3px 3px 0 0 var(--carte-bord)}
.legende i.t{border:0;border-top:1.6px dashed var(--trait);border-radius:0;height:0;width:22px;background:none}
.legende i.f{border:0;border-top:1.6px solid var(--trait);border-radius:0;height:0;width:22px;background:none}

/* la figure commune */
.figure{position:relative;border:1px solid var(--filet);border-radius:8px;background-color:var(--surface);background-image:radial-gradient(circle,var(--point) 1px,transparent 1.3px);background-size:18px 18px}
.figure>svg.liens{position:absolute;left:0;top:0;margin:0;pointer-events:none;overflow:hidden;z-index:0}
.plongee{margin-top:12px;background:var(--fond);border:1px solid var(--filet);border-left:3px solid var(--accent);border-radius:4px;padding:14px 18px;min-height:112px}
.plongee .pl-sur{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cendre);margin:0 0 4px}
.plongee h4{font-size:18px;font-weight:700;margin:0 0 2px}
.plongee .pl-fn{font:400 12.5px/1.5 var(--mono);color:var(--cendre);margin:0 0 8px}
.plongee .pl-mes{margin:0 0 8px;max-width:78ch}
.plongee .pl-m{font:400 13px/1.6 var(--mono);color:var(--cendre);border-top:1px solid var(--filet);padding-top:8px;margin:0}
.plongee .pl-m b{color:var(--cle);font-weight:500}
.plongee .pl-el{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.plongee .pl-el span{font:400 12px/1 var(--mono);border:1px solid var(--filet);border-radius:3px;padding:6px 8px;color:var(--cendre)}

/* canevas au style n8n */
.canevas{padding:34px 42px 30px}
.canevas[data-mode="etroit"]{padding:26px var(--pad-e,20px) 22px}
.canevas .grille{position:relative;z-index:1;display:grid}
.canevas[data-mode="large"] .grille{grid-template-columns:repeat(var(--cols-l),minmax(0,1fr));column-gap:var(--gx-l);row-gap:var(--gy-l)}
.canevas[data-mode="etroit"] .grille{grid-template-columns:var(--cols-e);column-gap:var(--gx-e);row-gap:var(--gy-e)}
.canevas[data-mode="large"] .noeud{grid-column:var(--cl);grid-row:var(--rl)}
.canevas[data-mode="etroit"] .noeud{grid-column:var(--ce);grid-row:var(--re)}
.noeud{position:relative;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border-radius:10px}
.noeud .boite{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;border:1.5px solid var(--carte-bord);border-radius:11px;background:var(--carte);transition:border-color .2s,box-shadow .2s,transform .2s}
.noeud .boite svg{width:26px;height:26px;stroke:var(--ico);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.noeud .textes{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.noeud .nom{font:700 12.5px/1.25 var(--sans);overflow-wrap:anywhere}
.noeud .sous{font:400 11px/1.35 var(--mono);color:var(--cendre);overflow-wrap:anywhere}
.noeud:hover .boite,.noeud.choisi .boite{border-color:var(--cle);transform:translateY(-2px)}
.noeud.k-declencheur .boite{border-radius:29px 11px 11px 29px}
.noeud.k-declencheur .boite::before{content:"";position:absolute;left:-7px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--cle)}
.noeud.externe .boite{border-style:dashed}
.noeud.k-sous .boite{box-shadow:4px 4px 0 -1.5px var(--carte),4px 4px 0 0 var(--carte-bord)}
.noeud.k-controle .boite{border-color:var(--cle)}
.noeud.k-erreur .boite{border-color:var(--accent);border-width:2px}
.noeud .badge{position:absolute;right:-8px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--cle);display:none;place-items:center}
.noeud .badge svg{width:12px;height:12px;stroke:var(--fond);stroke-width:3;fill:none}
.noeud.fait .badge,.noeud.echec .badge{display:grid}
.noeud.echec .badge{background:var(--accent)}
.noeud.echec .badge svg{stroke:#F7F4EF}
/* aucun bordeaux en transparence : sur l'ivoire, il vire au rose */
.noeud.en-cours .boite{border-color:var(--cle);border-width:2px;animation:bat .8s ease-in-out infinite}
@keyframes bat{50%{transform:scale(1.07)}}
.noeud.fait .boite,.noeud.echec .boite{border-color:var(--cle)}
.figure.eteint .noeud:not(.voisin){opacity:.4;filter:grayscale(1)}
/* forme carte : icône à gauche, texte à droite (téléphone, colonne principale).
   La colonne de côté garde la tuile, trop étroite pour une carte. */
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote){flex-direction:row;align-items:center;gap:10px;text-align:left;padding:9px 11px;border:1.5px solid var(--carte-bord);border-radius:10px;background:var(--carte)}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote) .boite{width:32px;height:32px;border:0;border-radius:7px;background:none;box-shadow:none;transform:none}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote) .boite svg{width:22px;height:22px}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).k-declencheur{border-radius:24px 10px 10px 24px}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).k-declencheur .boite::before{left:-9px}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).externe{border-style:dashed}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).k-sous{box-shadow:4px 4px 0 -1.5px var(--carte),4px 4px 0 0 var(--carte-bord)}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).k-controle,.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).k-erreur{border-color:var(--cle)}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote):hover,.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).choisi,.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).fait,.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).en-cours{border-color:var(--cle)}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).en-cours .boite{animation:none}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote).en-cours{border-width:2px;animation:bat-carte .8s ease-in-out infinite}
@keyframes bat-carte{50%{transform:scale(1.025)}}
.canevas[data-mode="etroit"][data-forme-e="carte"] .noeud:not(.cote) .badge{right:-7px;top:-7px}
.canevas[data-mode="etroit"] .noeud.cote .boite,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .boite{width:44px;height:44px;border-radius:10px}
.canevas[data-mode="etroit"] .noeud.cote.k-declencheur .boite,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud.k-declencheur .boite{border-radius:22px 10px 10px 22px}
.canevas[data-mode="etroit"] .noeud.cote .boite svg,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .boite svg{width:21px;height:21px}
.canevas[data-mode="etroit"] .noeud.cote .nom,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .nom{font-size:11.5px}
.canevas[data-mode="etroit"] .noeud.cote .sous,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .sous{font-size:10px}
/* les traits */
svg.liens .trait{fill:none;stroke:var(--trait);stroke-width:1.6}
svg.liens .trait.tirets{stroke-dasharray:5 5}
svg.liens .trait.passe{stroke:var(--cle)}
svg.liens .flux{fill:none;stroke:var(--cle);stroke-width:2.4;stroke-dasharray:7 10;stroke-linecap:round;opacity:0}
svg.liens .flux.actif{opacity:1;animation:couler .7s linear infinite}
@keyframes couler{to{stroke-dashoffset:-34}}
svg.liens .fleche path{fill:none;stroke:var(--trait);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.liens .sortie{font:500 10px/1 var(--mono);fill:var(--cendre)}
svg.liens .groupe rect{fill:var(--fond);fill-opacity:.55;stroke:var(--trait-doux);stroke-width:1}
svg.liens .groupe.externe rect{fill:none;stroke-dasharray:4 5;stroke:var(--trait)}
svg.liens .groupe text{font:500 10px/1 var(--mono);letter-spacing:.12em;fill:var(--cendre);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.noeud.en-cours .boite,.canevas .noeud.en-cours,svg.liens .flux.actif{animation:none}.noeud .boite{transition:none}}

/* mentions */
.mentions{padding:clamp(40px,6vw,88px) 0}
.mentions h1{font-size:clamp(30px,3.4vw,44px);font-weight:800;margin-bottom:30px}
.mentions h2{font-size:19px;font-weight:700;margin:26px 0 8px}
.mentions p{max-width:66ch;color:var(--cendre)}

/* LE TÉLÉPHONE, de 320 à 600 px (retours du 29 sept. 2026, soir,
   docs/proposition-mobile-2026-09-29.html) : héros centré, photo à une taille
   qui laisse voir le titre dans le premier écran, aucun effet de survol qui
   reste collé au toucher et fait glisser une carte de côté, aucun texte sous
   11 px dans les schémas. */
@media (max-width:600px){
  .hero{min-height:0}
  .hero .in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:26px;padding-top:30px;padding-bottom:48px}
  .hero .photo{order:-1;justify-self:center;width:clamp(150px,44vw,184px);aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .hero .photo img{aspect-ratio:4/5;height:auto}
  .hero .photo::before{inset:-8px 8px auto -8px;aspect-ratio:4/5;width:100%}
  .hero .photo .tag{position:static;width:max-content;max-width:calc(100vw - 40px);margin-top:12px;font-size:11px;padding:7px 11px;text-align:center}
  .hero .sur{margin-bottom:12px}
  .hero h1{font-size:clamp(30px,8.8vw,38px);max-width:14ch;margin:0 auto}
  .hero .sous{font-size:17px;margin:18px auto 26px}
  .hero .btns{justify-content:center}
  .canevas[data-mode="etroit"] .noeud.cote .nom,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .nom{font-size:12px}
  .canevas[data-mode="etroit"] .noeud.cote .sous,.canevas[data-mode="etroit"][data-forme-e="tuile"] .noeud .sous{font-size:11px}
  .canevas[data-mode="etroit"] svg.liens .sortie,.canevas[data-mode="etroit"] svg.liens .groupe text{font-size:11px}
}
@media (hover:none){
  .maillon:hover .carte-m,.maillon:hover .boite,.mission-c:hover,.carte:hover,.etude:hover,.bande li>button:hover,.chips span:hover,.btn:hover,.noeud:hover .boite{transform:none;box-shadow:none}
}

@media print{
  @page{size:A4;margin:10mm 11mm}
  .nav,.hero,.bande,.livraison,.releve,.production,.plateforme,.agents,.etudes-s,.parcours,.contact,footer,.btns,.cv-actions,.cv>.in>.sur,.cv>.in>h2,.cv>.in>.intro,.saut{display:none!important}
  /* à l'impression, toujours le thème Jour : la charte, sans fond */
  :root[data-theme="nuit"]{--fond:#F7F4EF;--surface:#EFEAE2;--encre:#1B1418;--cendre:#6F6268;--filet:#D9D1C8;--cle:#6E1423}
  html,body{background:#F7F4EF}
  body{font-size:8.6pt;line-height:1.38;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .in{padding:0;max-width:none}
  .cv,.page-cv{padding:0;background:none}.cvbloc{border:0;box-shadow:none;padding:0;background:none}
  .js .rv{opacity:1;transform:none}
  /* le CV complet tient en deux pages A4 (mesuré par le PDF de Chromium) */
  .cv-complet .cv-tete{grid-template-columns:62px 1fr;gap:14px;padding-bottom:8px;margin-bottom:8px}
  .cv-complet .cv-tete img{width:62px;height:78px}
  .cv-complet .cv-tete h3{font-size:17pt}
  .cv-complet .cv-tete .t{margin:2px 0 3px;font-size:9.5pt}
  .cv-complet .cv-tete .c{font-size:8pt;line-height:1.4}
  .cv-complet h4{font-size:7.6pt;margin:0 0 4px}
  .cv-complet .cv-s{margin-bottom:8px}
  .cv-complet .profil{font-size:8.6pt;line-height:1.4}
  .cv-comp{grid-template-columns:1fr 1fr;gap:1px 18px}
  .cv-comp div{font-size:8.1pt;line-height:1.35}
  .cv-complet .poste{margin-bottom:6px}
  .cv-complet .poste-t{padding-bottom:2px;margin-bottom:4px}
  .cv-complet .poste-t b{font-size:9.6pt}
  .cv-complet time{font-size:7.8pt;line-height:1.3}
  .cv-complet .mission{margin:0 0 5px;break-inside:avoid}
  .cv-complet .mission-t b{font-size:8.8pt}
  .cv-complet .role{font-size:8.3pt;margin:0 0 1px}
  .cv-complet ul{font-size:8.3pt;line-height:1.33;padding-left:13px}
  .cv-complet li{margin:0}
  .cv-complet .env{font-size:7.4pt;margin:1px 0 0}
  .cv-blocs{grid-template-columns:1fr 1fr 1fr;gap:0 14px}
  .cv-blocs .b{margin-bottom:0}
  .cv-blocs .b p{font-size:8.2pt;margin:0 0 2px;line-height:1.35}
}