/* PORTÉ depuis site-final/src/css/accueil.css par tools/site/porter-site-final.mjs : ne pas modifier à la main. */
/* Accueil : le héros, le film (animatique), « la bonne notion au bon moment » et les sections de la V1 « La clarté ». */

.anim{max-width:1080px;margin:0 auto;color:var(--texte);font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.an-stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--bordure);box-shadow:var(--ombre);isolation:isolate}
.an-sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.an-sc.an-on{opacity:1;visibility:visible;transition:opacity .7s ease}
.an-jour,.an-jourbg{background:linear-gradient(180deg,#E8F7FB 0%,#FFFFFF 62%)}
.an-nuit{background:radial-gradient(120% 100% at 50% 0%,#0F4A57 0%,#0A3A45 55%,#072C35 100%)}
.an-jourbg{position:absolute;inset:0}
.an-l{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.an-l [class]{transform-box:fill-box;transform-origin:50% 50%}
.an-cam{transform-origin:50% 55%}
.an-mask{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.an-mo{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em}
.an-in{font-family:Inter,system-ui,sans-serif}
.an-ha{font-family:Caveat,cursive;font-weight:700}
/* image fixe = etat final de chaque plan */
.an-out,.an-drawout,.an-blurout,.an-inout,.an-flip,[data-swap]{opacity:0}
.an-draw{stroke-dasharray:1 1}
.an-train{offset-distance:var(--od,100%);offset-rotate:auto}
/* mouvement : seulement si le plan joue */
.an-motion .an-go [data-b]:not(.an-go){opacity:0}
.an-motion .an-go [data-b]:not(.an-go) *{animation:none!important}
.an-motion .an-go [data-b].an-go{animation:an-fade .5s ease both}
.an-motion .an-go [data-swap]{opacity:1}
.an-motion .an-go [data-b="1"].an-go~[data-swap="1"],.an-motion .an-go [data-b="2"].an-go~[data-swap="2"],.an-motion .an-go [data-b="3"].an-go~[data-swap="3"]{animation:an-out .5s ease both}
.an-motion .an-go .an-draw{animation:an-draw var(--t,1.2s) cubic-bezier(.65,0,.35,1) var(--d,0s) both}
.an-motion .an-go .an-drawout{animation:an-draw var(--t,1.2s) cubic-bezier(.65,0,.35,1) var(--d,0s) both,an-out .7s ease calc(var(--d,0s) + var(--t,1.2s) + .6s) both}
.an-motion .an-go .an-pop{animation:an-pop var(--t,.6s) cubic-bezier(.3,1.35,.5,1) var(--d,0s) both}
.an-motion .an-go .an-up{animation:an-up var(--t,.7s) cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.an-motion .an-go .an-fade{animation:an-fade var(--t,.6s) ease var(--d,0s) both}
.an-motion .an-go .an-out{animation:an-out var(--t,.6s) ease var(--d,0s) both}
.an-motion .an-go .an-inout{animation:an-inout var(--t,2s) ease var(--d,0s) both}
.an-motion .an-go .an-fly{animation:an-fly var(--t,.9s) cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
.an-motion .an-go .an-pulse{animation:an-pulse var(--t,2.4s) ease-in-out var(--d,0s) infinite both}
.an-motion .an-go .an-ring{animation:an-ring var(--t,1.4s) ease-out var(--d,0s) both}
.an-motion .an-go .an-spin{animation:an-spin var(--t,3s) linear var(--d,0s) infinite}
.an-motion .an-go .an-scroll{animation:an-scroll var(--t,12s) linear var(--d,0s) infinite}
.an-motion .an-go .an-flow{animation:an-flow var(--t,1.2s) linear infinite}
.an-motion .an-go .an-wig{animation:an-wig var(--t,3s) ease-in-out var(--d,0s) infinite alternate both}
.an-motion .an-go .an-pan{animation:an-pan var(--t,4s) cubic-bezier(.6,0,.25,1) var(--d,0s) both}
.an-motion .an-go .an-train{animation:an-train var(--t,2.4s) cubic-bezier(.45,0,.3,1) var(--d,0s) both}
.an-motion .an-go .an-scan{animation:an-scan var(--t,2s) ease-in-out var(--d,0s) both}
.an-motion .an-go .an-flip{animation:an-flip var(--t,.9s) cubic-bezier(.5,0,.3,1) var(--d,0s) both}
.an-motion .an-go .an-flipin{animation:an-flipin var(--t,.8s) cubic-bezier(.3,.7,.3,1) var(--d,0s) both}
.an-motion .an-go .an-grow{animation:an-grow var(--t,.7s) cubic-bezier(.5,0,.3,1) var(--d,0s) both}
.an-motion .an-go .an-iris{animation:an-iris var(--t,.9s) cubic-bezier(.3,.8,.3,1) var(--d,0s) both}
.an-motion .an-go .an-blurout{animation:an-blurout var(--t,1.6s) ease var(--d,0s) both}
.an-motion .an-go .an-blurin{animation:an-blurin var(--t,1.8s) cubic-bezier(.3,.6,.3,1) var(--d,0s) both}
.an-motion .an-go .an-cam{animation:an-cam var(--dur,8s) linear both}
.anim.an-hold .an-sc,.anim.an-hold .an-sc *{animation-play-state:paused!important}
@keyframes an-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes an-pop{from{opacity:0;transform:scale(.3)}}
@keyframes an-up{from{opacity:0;transform:translateY(16px)}}
@keyframes an-fade{from{opacity:0}}
@keyframes an-out{from{opacity:1}to{opacity:0}}
@keyframes an-inout{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes an-fly{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg))}}
@keyframes an-pulse{0%,100%{transform:scale(.82);opacity:.32}50%{transform:scale(1.12);opacity:.1}}
@keyframes an-ring{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
@keyframes an-spin{to{transform:rotate(360deg)}}
@keyframes an-scroll{to{transform:translateY(var(--sy,-50%))}}
@keyframes an-flow{to{stroke-dashoffset:-26}}
@keyframes an-wig{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
@keyframes an-pan{from{transform:translate(var(--x0,0px),var(--y0,0px))}}
@keyframes an-train{from{offset-distance:0%}to{offset-distance:var(--od,100%)}}
@keyframes an-scan{0%,30%{transform:translateY(var(--s0,0px))}62%,100%{transform:none}}
@keyframes an-flip{0%{transform:scaleX(1);opacity:1}80%{opacity:1}100%{transform:scaleX(-1);opacity:0}}
@keyframes an-flipin{from{transform:scaleX(0)}}
@keyframes an-grow{from{transform:scaleX(0)}}
@keyframes an-iris{from{transform:scale(.06);opacity:.3}}
@keyframes an-blurout{from{filter:blur(0);opacity:1}to{filter:blur(14px);opacity:0}}
@keyframes an-blurin{from{filter:blur(16px);opacity:0;transform:scale(1.04)}}
@keyframes an-cam{from{transform:scale(1)}to{transform:scale(1.045)}}
/* sous l'image : la phrase, puis les commandes */
.an-cap{margin:16px 2px 0;min-height:2.9em;font-size:clamp(16px,1.7vw,19px);line-height:1.45;font-weight:500;color:var(--texte);transition:opacity .3s ease;text-wrap:pretty}
.an-cap.an-chg{opacity:0}
.an-ctl{display:flex;align-items:center;gap:14px;margin-top:10px}
.an-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--accent);color:var(--bg);display:grid;place-items:center;cursor:pointer;transition:transform .15s ease}
.an-play:active{transform:scale(.94)}
.an-play svg{width:22px;height:22px;fill:currentColor}
.an-play .an-i-pause,.an-play .an-i-again{display:none}
.anim.an-playing .an-play .an-i-play{display:none}.anim.an-playing .an-play .an-i-pause{display:block}
.anim.an-ended .an-play .an-i-play{display:none}.anim.an-ended .an-play .an-i-again{display:block}
.an-bar{flex:1;position:relative;height:44px;cursor:pointer;touch-action:none}
.an-bar::before,.an-fill{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.an-bar::before{background:var(--bordure)}
.an-fill{background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.an-tick{position:absolute;top:50%;width:3px;height:8px;margin:-4px 0 0 -1.5px;background:var(--bg)}
.an-time{flex:none;font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--texte-2);font-variant-numeric:tabular-nums}
.an-chips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding:2px 32px 4px 2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.an-chips::-webkit-scrollbar{display:none}
.an-chip{flex:none;min-height:40px;padding:0 14px 0 8px;border-radius:20px;border:1px solid var(--bordure);background:var(--surface);color:var(--texte-2);font:500 14px/1 Inter,system-ui,sans-serif;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.an-chip b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-2);font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--texte-2)}
.an-chip[aria-current="true"]{border-color:var(--accent);color:var(--accent);background:var(--teinte-bg)}
.an-chip[aria-current="true"] b{background:var(--accent);color:var(--bg)}
.an-play:focus-visible,.an-chip:focus-visible,.an-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover){.an-chip:hover{border-color:var(--accent);color:var(--texte)}}
@media (max-width:760px){.an-cap{min-height:4.35em}}
@media (max-width:520px){.an-stage{border-radius:10px}.an-cap{min-height:5.8em;font-size:16px;margin-top:12px}.an-chip{min-height:44px}.an-ctl{gap:10px}.an-time{font-size:12px}}
@media (prefers-reduced-motion:reduce){.an-sc,.an-sc.an-on,.an-cap{transition:none}}

.hx-hero{position:relative;max-width:1180px;margin:0 auto;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,var(--teinte-bg) 0%,var(--bg) 72%);border:1px solid var(--bordure);color:var(--texte);font-family:Inter,system-ui,sans-serif;isolation:isolate;box-sizing:border-box}
.hx-hero *,.hx-hero *::before,.hx-hero *::after{box-sizing:border-box}
.hx-sur{margin:0;font:500 12.5px/1.35 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hx-titre{font-weight:800;font-size:clamp(34px,3.9vw,50px);line-height:1.06;letter-spacing:-.032em;color:var(--texte);text-wrap:balance}
.hx-acc{color:var(--accent)}
.hx-ben{list-style:none;margin:0;padding:0}
.hx-ben-t{font-weight:600}
.hx-svg{display:block;width:100%;height:auto;overflow:visible}
.hx-small{display:none}
/* bouton du film (evenement hx-film) */
.hx-film{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:5px 18px 5px 5px;border-radius:999px;border:1px solid var(--bordure);background:var(--surface);color:var(--texte);font:600 15px/1 Inter,system-ui,sans-serif;box-shadow:var(--ombre);cursor:pointer;white-space:nowrap;transition:border-color .2s,transform .2s}
.hx-film:hover{border-color:var(--accent)}.hx-film:active{transform:scale(.97)}
.hx-film:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hx-film-i{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.hx-film-i svg{width:16px;height:16px;fill:var(--bg)}
.hx-film-d{color:var(--texte-2);font-weight:500}
/* dessins : couleurs par variables (theme sombre) */
.hx-sh{fill:#062A33;opacity:.08}
.hx-paper{fill:var(--surface);stroke:var(--bordure);stroke-width:1.2}
.hx-mo{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.08em}
.hx-in{font-family:Inter,system-ui,sans-serif}
.hx-ha{font-family:Caveat,cursive;font-weight:700;fill:var(--accent)}
.hx-mu{fill:var(--texte-2)}.hx-ac{fill:var(--accent)}.hx-acf{fill:var(--ligne)}.hx-ink,.hx-nuit{fill:var(--texte)}.hx-t2{fill:var(--texte-2)}
.hx-bar{fill:var(--bordure)}.hx-tint{fill:var(--teinte-bg)}
.hx-ax{stroke:var(--bordure);stroke-width:2;fill:none}
.hx-dash{stroke:var(--texte-2);stroke-width:1.4;stroke-dasharray:4 5;fill:none;opacity:.55}
.hx-curve,.hx-prog,.hx-ul,.hx-chk{stroke:var(--ligne);fill:none;stroke-linecap:round;stroke-linejoin:round}
.hx-dot{fill:var(--ligne)}
.hx-ring{fill:none;stroke:var(--ligne);stroke-width:1.8;opacity:.75}
.hx-arc{fill:none;stroke:var(--ligne);stroke-width:1.6;opacity:.8}
.hx-arc2{fill:none;stroke:var(--ligne);stroke-width:1.8}
.hx-marge{stroke:var(--ligne);stroke-width:1.4;opacity:.28}
.hx-scan{fill:var(--ligne);opacity:.1}
.hx-wav{fill:none;stroke:var(--texte-2);stroke-width:1.8}
.hx-lien{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:2 4}
.hx-line{fill:none;stroke:var(--ligne);stroke-linecap:round;stroke-linejoin:round}
.hx-line2{fill:none;stroke:var(--rail-fort);stroke-linecap:round;stroke-linejoin:round}
.hx-st{fill:var(--surface);stroke:var(--ligne)}.hx-st2{fill:var(--surface);stroke:var(--rail-fort)}
.hx-tap{fill:none;stroke:var(--accent);opacity:.8}
/* ---------- h1 : composition editoriale */
.hx-h1{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6fr);align-items:center;gap:20px;min-height:620px;padding:52px 36px 52px 64px}
.hx-h1 .hx-tex{position:absolute;inset:0 0 0 38%;z-index:-1;background-image:radial-gradient(var(--bordure) 1.1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.hx-h1 .hx-titre{margin:18px 0 34px}
.hx-h1 .hx-ben{position:relative;display:grid;gap:16px}
.hx-h1 .hx-ben::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--ligne)}
.hx-h1 .hx-ben li{position:relative;padding-left:38px;font-size:18px;line-height:1.35;color:var(--texte)}
.hx-h1 .hx-ben li::before{content:"";position:absolute;left:0;top:.68em;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--surface);border:4.5px solid var(--ligne)}
.hx-h1 .hx-scene{position:relative}
.hx-h1 .hx-film{position:absolute;right:6px;bottom:10px}
/* ---------- h2 : la table de travail */
.hx-h2{padding:52px 40px 40px;text-align:center}
.hx-h2 .hx-top{max-width:900px;margin:0 auto}
.hx-h2 .hx-titre{margin:16px auto 46px}
.hx-desk{position:relative;border-radius:18px;background-color:var(--bg-2);background-image:radial-gradient(var(--bordure) 1.1px,transparent 1.4px);background-size:20px 20px;padding:44px 28px 28px}
.hx-objs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.hx-obj{margin:0;display:flex;flex-direction:column;align-items:center}
.hx-art{position:relative;width:100%}
.hx-rl{display:block;position:absolute;left:-28px;right:-28px;top:50%;height:6px;margin-top:-3px;background:var(--ligne);border-radius:3px;z-index:0}
.hx-obj:not(:first-child) .hx-art::after{content:"";position:absolute;left:-14px;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--surface);border:4.5px solid var(--ligne);z-index:1}
.hx-art .hx-svg{position:relative;z-index:1;transform:rotate(var(--rot,0deg))}
.hx-tag{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;font-size:17px;line-height:1.3;color:var(--texte);text-align:left}
.hx-num{flex:none;width:26px;height:26px;border-radius:50%;border:4px solid var(--ligne);background:var(--surface);display:grid;place-items:center;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--accent)}
.hx-h2 .hx-film{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:2}
.hx-h2 .hx-film:active{transform:translate(-50%,-50%) scale(.97)}
/* entree douce, annulee si mouvement reduit */
@media (prefers-reduced-motion:no-preference){
  .hx-in1,.hx-in2{animation:hx-rise .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .12s + .05s) both}
  .hx-art1{animation:hx-rise 1s cubic-bezier(.2,.8,.2,1) .3s both}
  .hx-h1 .hx-film{animation:hx-rise .8s cubic-bezier(.2,.8,.2,1) 1.1s both}
}
@keyframes hx-rise{from{opacity:0;transform:translateY(14px)}}
/* ---------- telephone */
@media (max-width:640px){
  .hx-hero{border-radius:18px}
  .hx-h1{grid-template-columns:minmax(0,1fr);min-height:0;gap:0;padding:28px 20px 24px}
  .hx-h1 .hx-txt{display:contents}
  .hx-h1 .hx-sur{order:1}.hx-h1 .hx-titre{order:2}.hx-h1 .hx-scene{order:3}.hx-h1 .hx-ben{order:4}
  .hx-titre{font-size:clamp(28px,7.7vw,36px);line-height:1.08}
  .hx-h1 .hx-titre{margin:12px 0 18px}
  .hx-h1 .hx-tex{inset:30% 0 0 0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
  .hx-big{display:none}.hx-small{display:block}
  .hx-h1 .hx-film{position:static;margin:14px 0 22px}
  .hx-h1 .hx-ben{gap:12px}
  .hx-h1 .hx-ben li{font-size:17px}
  .hx-sur{font-size:11.5px}
  .hx-h2{padding:28px 16px 16px}
  .hx-h2 .hx-titre{margin:12px auto 40px}
  .hx-desk{padding:40px 14px 16px;border-radius:14px}
  .hx-objs{grid-template-columns:minmax(0,1fr);gap:16px}
  .hx-obj{display:grid;grid-template-columns:40% minmax(0,1fr);align-items:center;gap:14px}
  .hx-rl{left:auto;right:auto;top:-8px;bottom:-8px;width:4px;height:auto;margin:0;left:calc(100% + 7px)}
  .hx-obj:first-child .hx-rl{top:50%}.hx-obj:last-child .hx-rl{bottom:50%}
  .hx-obj:not(:first-child) .hx-art::after{display:none}
  .hx-tag{margin:0;padding-left:16px;font-size:16px;gap:8px}
  .hx-num{position:relative;left:-27px;margin-right:-24px}
}

.bm{margin:0 auto;max-width:1000px;color:var(--texte);font-family:Inter,system-ui,sans-serif}
.bm *{box-sizing:border-box}
.bm-svg{display:block;width:100%;height:auto;overflow:visible}
.bm-tall{display:none;max-width:400px;margin:0 auto}
.bm-sh{fill:#062A33;opacity:.08}
.bm-paper{fill:var(--surface);stroke:var(--bordure);stroke-width:1.2}
.bm-mo{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.08em}
.bm-in{font-family:Inter,system-ui,sans-serif}
.bm-ha{font-family:Caveat,cursive;font-weight:700;fill:var(--accent)}
.bm-mu{fill:var(--texte-2)}.bm-ac{fill:var(--accent)}.bm-acf,.bm-acff{fill:var(--ligne)}.bm-ink{fill:var(--texte)}.bm-t2{fill:var(--texte-2)}.bm-tint{fill:var(--teinte-bg)}
.bm-ax{stroke:var(--bordure);stroke-width:3.5;stroke-linecap:round;fill:none}
.bm-prog{stroke:var(--ligne);stroke-width:3.5;stroke-linecap:round;fill:none;stroke-dasharray:1 1;stroke-dashoffset:.55}
.bm-scan{fill:var(--ligne);opacity:.1}
.bm-wav{fill:none;stroke:var(--texte-2);stroke-width:1.8}
.bm-chk{fill:none;stroke:var(--ligne);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bm-line{fill:none;stroke:var(--ligne);stroke-width:8;stroke-linecap:round}
.bm-dim{stroke:var(--bordure)}
.bm-relit{stroke-dasharray:1 1}
.bm-back{fill:none;stroke:var(--ligne);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;opacity:.8}
.bm-arrow{fill:none;stroke:var(--ligne);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.bm-stem{stroke:var(--bordure);stroke-width:2;stroke-dasharray:3 4}
.bm-st{fill:var(--surface);stroke:var(--ligne);stroke-width:4.6}
.bm-st-off{stroke:var(--bordure)}.bm-st-bloc{stroke:var(--texte-2)}
.bm-dot{fill:var(--ligne)}.bm-dot2{fill:var(--texte-2)}
.bm-halo{fill:var(--ligne);opacity:.16}.bm-halo2{fill:var(--texte-2);opacity:.12}
.bm-pulse{transform-box:fill-box;transform-origin:50% 50%}
.bm-train{opacity:0;offset-path:path('M300 262 H700');offset-rotate:0deg;offset-distance:0%}
.bm-train-v{offset-path:path('M52 350 V130')}
.bm:not(.bm-run) .bm-err{opacity:0}
.bm-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bm-step{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:15.5px;line-height:1.35;color:var(--texte);transition:opacity .5s ease}
.bm-n{flex:none;width:26px;height:26px;border-radius:50%;border:4px solid var(--ligne);background:var(--surface);display:grid;place-items:center;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--accent)}
.bm-t{padding-top:3px;font-weight:600}
/* boucle douce (seulement si le mouvement est permis : le script n'ajoute bm-run qu'alors) */
.bm-run [data-s]{opacity:0;transition:opacity .6s ease}
.bm-run.bm-s1 [data-s="1"],.bm-run.bm-s2 [data-s="2"],.bm-run.bm-s3 [data-s="3"],.bm-run.bm-s4 [data-s="4"]{opacity:1}
.bm-run .bm-back,.bm-run .bm-relit{stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.6,0,.3,1),opacity .4s ease}
.bm-run.bm-s2 .bm-back,.bm-run.bm-s4 .bm-relit{stroke-dashoffset:0}
.bm-run .bm-up{transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.bm-run.bm-s3 .bm-up{transform:none}
.bm-run .bm-prog{stroke-dashoffset:1;transition:none}
.bm-run.bm-s3 .bm-prog{stroke-dashoffset:.3;transition:stroke-dashoffset 3s linear .4s}
.bm-run .bm-err{transition:opacity .4s ease}
.bm-run.bm-s4 .bm-err{opacity:0}
.bm-run.bm-s4 .bm-train{opacity:1;offset-distance:100%;transition:offset-distance 1.3s cubic-bezier(.5,0,.3,1),opacity .3s ease}
.bm-run .bm-step{opacity:.42}
.bm-run[data-cur="1"] .bm-step:nth-child(1),.bm-run[data-cur="2"] .bm-step:nth-child(2),.bm-run[data-cur="3"] .bm-step:nth-child(3),.bm-run[data-cur="4"] .bm-step:nth-child(4){opacity:1}
.bm-run .bm-pulse{animation:bm-pulse 2.4s ease-in-out infinite}
@keyframes bm-pulse{0%,100%{transform:scale(.85)}50%{transform:scale(1.15)}}
@media (max-width:640px){
  .bm-wide{display:none}.bm-tall{display:block}
  .bm-steps{grid-template-columns:1fr;gap:10px;margin:18px auto 0;max-width:340px}
  .bm-step{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.bm-run .bm-pulse{animation:none}}

/* barre de maquette : les versions */
.maq .seg a{color:#E8F7FB;text-decoration:none;padding:4px 9px;font:500 11.5px "IBM Plex Mono",monospace;white-space:nowrap}
.maq .seg a[aria-current="true"]{background:#E8F7FB;color:#0A3A45}
.maq .seg-v{flex-wrap:wrap;border-radius:14px}
.manque{padding:30px;border:2px dashed var(--erreur);border-radius:14px;color:var(--erreur);font:500 13px "IBM Plex Mono"}

/* héros : l'animatique à la place du film */
.hv>.col-m .anim{max-width:980px;margin-left:auto;margin-right:auto}
.hero h1 .acc{color:var(--accent)}

/* le problème */
.pb-illu{max-width:880px;margin:0 auto 34px}
.pb-liste{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;max-width:980px;text-align:left}
.pb-liste li{grid-column:span 2;align-content:start;background:var(--surface);border:1px solid var(--bordure);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--ombre);display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.pb-liste li:nth-child(4){grid-column:2/span 2}
.pb-liste li:nth-child(5){grid-column:4/span 2}
.pb-liste li b,.pb-cons li b{font-size:16.5px;line-height:1.3;grid-column:2}
.pb-liste li>span:last-child,.pb-cons li>span:last-child{grid-column:2;color:var(--texte-2);font-size:15px;line-height:1.45;margin-top:4px}
.pb-ic{grid-row:1/span 2;width:44px;height:44px;border-radius:12px;background:var(--teinte-bg);color:var(--accent);display:grid;place-items:center}
.pb-ic svg{width:28px;height:28px}
.pb-cons{max-width:980px;margin:34px auto 0;padding:24px 26px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--bordure);text-align:left}
.pb-cons h3{margin:0 0 14px;font-size:14px;font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-3)}
.pb-cons ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pb-cons li{align-content:start;display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start}
.pb-cons .pb-ic{background:var(--bg-2);color:var(--texte-2)}
.pb-chute{text-align:center;max-width:24ch;margin:40px auto 0;font-weight:700;letter-spacing:-.01em}

/* l'impact : capsules et fiches */
.centre>.col-m.im-large{max-width:1100px}
.im-caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.im-caps figure{margin:0}
.im-caps figcaption:not(.cp-barre){margin-top:12px;font-size:15px;line-height:1.5;color:var(--texte-2);text-align:left}
.im-k{display:block;font:500 11px "IBM Plex Mono";letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.im-fiches{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:40px;align-items:start;margin-top:64px;text-align:left}
.im-ft{position:sticky;top:90px}
.im-ft h3{font-size:24px;line-height:1.2;margin:0 0 10px;letter-spacing:-.01em}
.im-ft p{color:var(--texte-2);margin:0}
.im-fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.im-pts{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.im-pts li{position:relative;padding-left:30px;font-size:16px;line-height:1.45;color:var(--texte-2)}
.im-pts li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:4px solid var(--ligne);background:var(--bg)}
.im-mission{margin:22px 0 0;padding-left:16px;border-left:3px solid var(--ligne);font-weight:600;color:var(--texte)}

/* la pratique */
.pa-deux{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.pa-deux>div{background:var(--surface);border:1px solid var(--bordure);border-radius:14px;padding:14px 16px}
.pa-deux b{display:block;font-size:15.5px;margin-bottom:4px}
.pa-deux p{margin:0;font-size:14.5px;color:var(--texte-2);line-height:1.45}
.duo>.col-m>.onglets{display:flex;width:max-content;margin:0 auto 14px}

/* la valeur */
.va-et{margin-top:26px}
.pa-par .col-t{max-width:720px}

/* synthèse */
.sy-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sy-c{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--bordure);border-radius:18px;padding:24px 24px 20px;text-decoration:none;color:var(--texte);box-shadow:var(--ombre);transition:transform .2s,border-color .2s}
.sy-c:hover{transform:translateY(-2px);border-color:var(--ligne)}
.sy-n{font:500 11.5px "IBM Plex Mono";letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sy-h{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.sy-p{color:var(--texte-2);font-size:15.5px;line-height:1.5}
.sy-l{font-size:14.5px;color:var(--texte-2)}
.sy-l i{font-style:normal;font:500 11px "IBM Plex Mono";letter-spacing:.08em;text-transform:uppercase;color:var(--texte-3);margin-right:8px}
.sy-go{margin-top:auto;padding-top:8px;font-weight:600;color:var(--accent)}
#versions .article h3{margin-top:28px}
#versions .article ul{padding-left:20px}
#versions .article li{margin:8px 0;color:var(--texte-2)}

/* stratégie */
.st h2{margin-top:44px}
.st p,.st li{color:var(--texte-2)}
.st ul{padding-left:20px}
.st-tab{overflow-x:auto;margin:18px 0;max-width:none!important;width:min(1100px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
.st-tab table{border-collapse:collapse;font-size:13.5px;line-height:1.4;min-width:820px;width:100%}
.st-tab th,.st-tab td{border-bottom:1px solid var(--bordure);padding:8px 8px;text-align:left;vertical-align:top}
.st-tab th{font:500 10.5px "IBM Plex Mono";letter-spacing:.06em;text-transform:uppercase;color:var(--texte-3)}
.st-tab td:nth-child(n+3):nth-child(-n+8){text-align:center;font-family:"IBM Plex Mono";white-space:nowrap}
.st-tab td:nth-child(8){font-weight:600;color:var(--accent)}

@media (max-width:980px){
 .pb-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pb-liste li,.pb-liste li:nth-child(4),.pb-liste li:nth-child(5){grid-column:auto}
 .pb-liste li:nth-child(5){grid-column:1/-1}
 .im-fiches{grid-template-columns:1fr;gap:20px}
 .im-ft{position:static}
}
@media (max-width:760px){
 .im-caps,.im-fl,.sy-g{grid-template-columns:1fr}
 .pb-cons ul{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
 /* téléphone : la vidéo d'abord, un titre court, deux boutons, rien dans l'en-tête */
 .tete .btn.mini{display:none}
 .hv{display:flex;flex-direction:column}
 .hv>.col-m{order:-1;margin-top:0!important;width:100%;min-width:0}
 .hv>.col-m .anim{max-width:100%;min-width:0}
 .hv>.col-t{margin-top:18px}
 .hero .hv h1{font-size:27px;line-height:1.15}
 .hero .hv .sur{display:none}
 .pb-liste{grid-template-columns:1fr;gap:10px}
 .pb-liste li:nth-child(5){grid-column:auto}
 .pb-liste li{padding:14px;box-shadow:none}
 .pb-liste li>span:last-child{display:none}
 .pb-cons{padding:18px}
 .pb-cons li>span:last-child{display:none}
 .pa-deux{grid-template-columns:1fr}
 .im-fiches .im-fl>:nth-child(2){display:none}
 .pb-illu{margin-bottom:22px}
}

/* jamais de rouge chez l'élève : la règle (ardoise) est désormais commune, dans silex-2026.css */
.pa-cta{margin-top:26px}
/* téléphone et tablette : de l’air entre la liste et les onglets de l’exemple */
@media (max-width:979px){#pratique .col-m{margin-top:28px}}
.duo>.col-t .petit{margin-top:8px}
@media (max-width:640px){
 .im-fl .cp-fiche{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
 .pa-deux,.im-pts li:nth-child(n+3){display:none}
 .im-fiches{margin-top:40px}
 .pb-chute{margin-top:26px}
}

.im-og{margin-top:18px;flex-wrap:wrap}
.im-ft .note{margin-top:14px}
.im-vraies figure{margin:0}
.im-vraies img{width:100%;height:auto;border-radius:14px;border:1px solid var(--bordure);box-shadow:var(--ombre);display:block}
.im-vraies figcaption{font-size:13.5px;color:var(--texte-3);margin-top:8px}
@media (max-width:640px){.im-vraies figure:nth-child(2){display:none}}

/* === V1 la clarté === */
.hx-sec .wrap{display:block}
.hx-bas{text-align:center;margin-top:28px}
.hx-bas .lead{margin:0 auto 18px;max-width:52ch}
.hx-bas .ctas{justify-content:center}
.hx-bas .petit{margin-top:10px}

/* problème : titres seuls, cartes plus basses */
.pb-liste li.seul,.pb-cons li.seul{align-items:center}
.pb-liste li.seul .pb-ic,.pb-cons li.seul .pb-ic{grid-row:auto}
.pb-cons li b{align-self:center}

/* pourquoi ça marche */
.re-g{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1100px;text-align:left}
.re-g li{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--bordure);border-radius:16px;padding:20px 18px 18px;box-shadow:var(--ombre)}
.re-g .pb-ic{margin-bottom:8px}
.re-g b{font-size:16.5px;line-height:1.3}
.re-g li>span:last-child{color:var(--texte-2);font-size:15px;line-height:1.45}
@media (max-width:980px){.re-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.re-g{grid-template-columns:1fr;gap:10px}.re-g li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:14px;box-shadow:none}.re-g .pb-ic{margin:0}.re-g b{flex:1}.re-g li>span:last-child{flex-basis:100%;padding-left:58px;margin-top:-6px}}

/* vraies fiches roulées */
.vf-roul{background:var(--surface);border:1px solid var(--bordure);border-radius:14px;box-shadow:var(--ombre);overflow:hidden}
.vf-roul summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;padding-right:52px}
.vf-roul summary::-webkit-details-marker{display:none}
.vf-roul summary span{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.vf-roul summary b{font-size:16.5px;line-height:1.3}
.vf-roul summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.vf-roul[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.vf-roul img{border:0!important;border-top:1px solid var(--bordure)!important;border-radius:0!important;box-shadow:none!important}
@media (max-width:640px){.im-vraies figure:nth-child(2),.im-vraies .vf-roul{display:block}}

/* le film, dans une fenêtre */
.hx-modal{border:0;padding:0;background:transparent;max-width:min(1040px,calc(100vw - 24px));width:100%;color:var(--texte)}
.hx-modal::backdrop{background:rgba(6,30,36,.78);backdrop-filter:blur(4px)}
.hx-modal-in{background:var(--surface);border-radius:20px;padding:14px 14px 10px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.hx-modal-t{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 12px}
.hx-modal-t span{font:500 11.5px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2)}
.hx-fermer{font:600 14px Inter,sans-serif;border:1px solid var(--bordure);background:var(--bg);color:var(--texte);border-radius:999px;padding:7px 14px;cursor:pointer}
.hx-modal{max-height:calc(100vh - 24px)}
.hx-modal-in{max-height:calc(100vh - 24px);overflow:auto}
.hx-modal .anim{max-width:min(100%,calc((100vh - 230px)*16/9));margin:0 auto}
.hx-modal .note{margin:10px 4px 2px}
/* héros A : texte aligné à gauche sur ordinateur, bénéfices toujours à gauche du rail */
@media (min-width:641px){.hx-choix[data-hx="h1"] .hx-txt{text-align:left}}
.hx-choix .hx-ben,.hx-choix .hx-ben li{text-align:left}
.hx-bas .lead{max-width:62ch}

.pb-liste li b,.pb-cons li b,.pb-liste li>span,.pb-cons li>span{text-align:left}
/* .pa-par : bande autonome depuis le 23 octobre (plus de liste dessous) */

/* retours du 23 oct. au soir */
.pb-titre{max-width:30ch;margin-left:auto;margin-right:auto}
.pb-cons-n{list-style:none;margin:6px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px;text-align:left}
.pb-cons-n li{display:flex;align-items:center;gap:14px;background:rgba(232,247,251,.07);border:1px solid rgba(232,247,251,.16);border-radius:16px;padding:18px}
.pb-cons-n .pb-ic{flex:none;background:rgba(24,180,214,.16);color:#9fd9e8}
.pb-cons-n b{color:#fff;font-size:17px;line-height:1.3}
.pb-cons-n li>span:not(.pb-ic){display:none}
.pb-chute-n{color:#fff;text-align:center;max-width:22ch;margin:52px auto 0!important}
.pb-chute-n .acc{color:#18B4D6}
@media (max-width:760px){.pb-cons-n{grid-template-columns:1fr;gap:10px}.pb-chute-n{margin-top:34px!important}}
/* fiches : titre centré au-dessus, deux colonnes comme les capsules */
.im-fiches{grid-template-columns:1fr!important;gap:22px!important;text-align:center;margin-top:88px}
.im-ft{position:static!important;max-width:640px;margin:0 auto}
.im-ft h3{font-size:28px}
.im-og{justify-content:center;margin:18px auto 0!important;width:max-content;max-width:100%}
.im-ft .note{text-align:left}
.im-fl{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px!important;text-align:left;align-items:start;max-width:900px;margin-inline:auto}
@media (max-width:760px){.im-fl{grid-template-columns:1fr!important}}
.bm-large{max-width:1040px!important}
@media (max-width:640px){.im-fiches .im-fl>:nth-child(2){display:block}.im-fl .cp-fiche{max-height:none;-webkit-mask-image:none;mask-image:none}}

/* Allègement (retour du 23 octobre) : la charte Silex est fine. Titres en semi-gras, plus de gras dans les textes courants. */
h1,h2{font-weight:600!important;letter-spacing:-.028em}
h3,h4{font-weight:600!important}
.hx-titre{font-weight:600!important}
.phrase{font-weight:600!important}
.sur{font-weight:600!important}
.btn{font-weight:600!important}
.cp-f-titre,.pr-pc-t,.av .av-t,.pr-fp-t{font-weight:600!important}
main p b,main p strong,main li b,main li strong{font-weight:600}
.faq summary{font-weight:600}

/* ── les fonctionnalités (venues de l’ancienne page Démonstration) : une grille légère, sans cartes ── */
.fo .col-t>p{color:var(--texte-2)}
.centre>.col-m.fo-m{max-width:1100px}
.fo-g{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0;text-align:left}
.fo-g li{border-top:1px solid var(--bordure)}
.fo-g li>a,.fo-g li>div{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 0;color:inherit;text-decoration:none}
.fo-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--teinte-bg);color:var(--accent)}
.fo-ic svg{width:24px;height:24px}
.fo-g b{font-weight:600;font-size:17px;line-height:1.3;color:var(--texte)}
.fo-g a:hover b{color:var(--accent)}
@media (min-width:700px){.fo-g{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (min-width:1020px){.fo-g{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}}
/* engagements : le seul bouton de fin de page */
.eg-cta{justify-content:center;margin-top:40px}