/* Assemblé par build.py depuis build/css : ne pas éditer ici. */
/* ---- accueil.css ---- */
/* Accueil, retouches du 19/09/2026 : travaux de fond à la demande, tarifs en une seule zone (l'assistant en premier onglet). */
.jr-puce.td{background:#FFF4E5;border-color:rgba(154,91,0,.28);color:var(--ambre)}
[role="tabpanel"]>.ac-niveaux{margin-top:0}
[role="tabpanel"]>.ac-niveaux>.tete{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
@media (min-width:981px){.plan-options dl{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:640px){
  .onglets{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .onglets::-webkit-scrollbar{display:none}
  .onglet{flex:none;white-space:nowrap}
}
.eg-cartes{margin-top:clamp(1.6rem,3vw,2.6rem);align-items:start}
/* Sans JavaScript, tous les panneaux de prix restent lisibles (la classe js est posée en tête de page par un script). */
html:not(.js) [role="tabpanel"][hidden]{display:block!important;margin-top:2rem}
html:not(.js) .onglets{display:none}
/* Cibles tactiles de 44 px au moins */
.onglet{min-height:44px}
/* 20/09/2026 : l'accueil garde cinq questions ; le lien vers la page FAQ se range sous la liste. */
.faq-col{display:grid;gap:1rem;min-width:0}
.faq-toutes{display:flex;justify-content:flex-start}

/* 21/09/2026 : la scène du hero s'ouvre au clic. Un survol suffit à le dire ; au doigt, la pastille
   reste visible en permanence, faute de survol. Règle posée par Benj : on doit VOIR que c'est jouable. */
.hs-scene{position:relative}
.hs-ouvrir{position:absolute;right:.9rem;top:.9rem;z-index:6;display:inline-flex;align-items:center;gap:.45em;
  padding:.55em .9em;border-radius:11px;border:1px solid var(--ligne-2);background:rgba(255,255,255,.94);
  color:var(--bleu);font:600 .84rem/1.2 var(--ff);cursor:pointer;box-shadow:var(--o-2);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-4px);transition:opacity var(--moyen) var(--ease),transform var(--moyen) var(--ease)}
.hs-ouvrir .ico{width:15px;height:15px;stroke-width:2.2}
.hs-piste:hover .hs-ouvrir,.hs-ouvrir:focus-visible{opacity:1;transform:none}
@media (hover:none){.hs-ouvrir{opacity:1;transform:none}}
@media (max-width:760px){.hs-ouvrir{right:.5rem;top:.5rem;font-size:.76rem;padding:.45em .7em}}
@media (prefers-reduced-motion:reduce){.hs-ouvrir{transition:none}}

/* ---- demo.css ---- */
/* « La démo en grand », #demo-grand (sec_demo.py, js/demo.js). Racine : data-s, data-m, dc-p1..5 (pas cumulés), data-b, dc-att (attend la validation). */
.dc{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;overflow:hidden;
  padding:clamp(.5rem,2vh,1.25rem) clamp(.5rem,2vw,1.5rem);background:rgba(11,13,18,.52);backdrop-filter:blur(10px);color:var(--encre)}
.dc:not([open]){display:none}
.dc[open]{display:grid;place-items:center}
.dc-cadre{position:relative;width:min(1180px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:.75rem;
  padding:.9rem clamp(1rem,2vw,1.5rem) 1rem;background:var(--blanc);border-radius:22px;box-shadow:var(--o-4);animation:dc-entre .5s var(--sortie)}
@keyframes dc-entre{from{opacity:0;transform:translateY(14px) scale(.985)}}
.dc-tete{display:flex;align-items:center;gap:.8rem}
.dc-tete h2{font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.02em;max-width:none}
/* 21/09/2026 : « données inventées » dit une fois, ici, en texte gris */
.dc-tag{font:500 .72rem/1.2 var(--ff);color:var(--doux);white-space:nowrap}
/* 21/09/2026 : commandes fantômes (plus de disque noir devant la scène) */
.dc-rond{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:none;border:1px solid transparent;box-shadow:none;color:var(--encre);transition:var(--vite)}
.dc-rond:hover,.dc-rond:focus-visible{background:var(--gris-2)}
.dc-x{margin-left:auto}
.dc-prec .ico{transform:rotate(180deg)}
.dc-jouer{background:var(--blanc);border-color:var(--ligne-2);color:var(--encre)}
/* flèches sans effet : l'icône s'atténue, pas le bouton (anneau de focus plein) ; jamais visibility:hidden */
.dc[data-s="1"] .dc-prec,.dc[data-s="8"] [data-dc="suiv"]{pointer-events:none}
.dc[data-s="1"] .dc-prec .ico,.dc[data-s="8"] [data-dc="suiv"] .ico{opacity:.3}
.dc-i-lecture{display:none;fill:currentColor}
.dc-pause .dc-i-lecture{display:block}
.dc-pause .dc-i-pause{display:none}
.dc-scene{position:relative;container-type:size;flex:none;width:100%;aspect-ratio:16/10;max-height:calc(100dvh - 19.5rem);min-height:250px;border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 0,var(--bleu-pale),transparent 70%),var(--gris);box-shadow:inset 0 0 0 1px var(--ligne)}
.dc-plateau{position:absolute;left:50%;top:50%;width:min(100cqw,160cqh);aspect-ratio:16/10;transform:translate(-50%,-50%)}
.dc-pose{position:absolute;transition:.9s var(--sortie)}
.dc-ordi{left:5%;top:3.5%;width:88%}
.dc-tel{left:85.5%;top:40%;width:13.5%;z-index:3}
/* 21/09/2026 : pointer-events:none, la tablette invisible et le voile noir couvraient le « Valider » de la scène 3 */
.dc-tab{left:2%;top:11%;width:66%;z-index:2;opacity:0;transform:translateY(12%);pointer-events:none}
.dc[data-s="1"] .dc-tel{opacity:0;transform:translateY(14%)}
.dc[data-m="duo"] .dc-ordi{left:0;top:11%;width:72%}
.dc:not([data-m="ordi"]) .dc-tel{left:73%;top:3.5%;width:26%}
.dc[data-m="tab"] .dc-ordi{opacity:0;transform:translateX(-12%)}
.dc[data-m="tab"] .dc-tab{opacity:1;transform:none}
.dc[data-m="tab"] .ip-barres i{height:var(--h)}
.dc-tab .ip-barres{height:33cqi}
.dc-ordi{--u:2.3cqi}
.dc-tel{--u:5.9cqi}
.dc-e{position:absolute;inset:0;opacity:0;visibility:hidden;transition:.5s}
.dc-e.dc-on{opacity:1;visibility:visible}
.dc-ordi .dc-e{top:3.1cqi;padding:0 5cqi;display:grid;align-content:center}
.dc-ordi .dc-deux{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:2.2cqi;align-items:center;padding:0 2.5cqi}
.dc-a1,.dc-a2,.dc-a3,.dc-a4{opacity:0;transform:translateY(10%);transition:.55s var(--sortie)}
.dc-p1 .dc-a1,.dc-p2 .dc-a2,.dc-p3 .dc-a3,.dc-p4 .dc-a4,.dc[data-s="2"] .ecr-accueil span,.dc[data-s="2"] .dc-toast,
.dc:not([data-s="2"]) [data-e^="1"] .dc-notif,.dc[data-s="8"] .dc-alerte{opacity:1;transform:none}
.dc-noir{position:absolute;inset:0;z-index:8;background:#000;opacity:0;transition:1s;pointer-events:none}
.dc[data-s="1"]:not(.dc-p1) .dc-noir{opacity:1}
.dc-toast{position:absolute;right:3cqi;top:3cqi;display:flex;align-items:center;gap:.8cqi;padding:1.1cqi 1.7cqi;border-radius:1.3cqi;background:#fff;color:#0B0D12;font-size:1.7cqi;font-weight:600;box-shadow:0 1cqi 3cqi rgba(0,0,0,.4)}
.dc-carte .ico,.dc-toast .ico{width:1.2em;height:1.2em}
.dc-toast .ico,.dc-fait .ico{color:#0F7A4A}
.dc-carte{background:#fff;color:#0B0D12;border-radius:calc(.8*var(--u));padding:calc(1.1*var(--u)) calc(1.2*var(--u));font-size:var(--u);line-height:1.42;box-shadow:0 2cqi 5cqi rgba(0,0,0,.4)}
.dc-carte small{display:flex;align-items:center;gap:.6em;font-size:.82em;font-weight:600;color:#5F6675;margin-bottom:.5em}
.dc-carte small em{margin-left:auto}
.dc-carte p,.dc-carte dd,.dc-carte li span{max-width:none;color:#3E4553}
.dc-carte dt{font-weight:650;margin-top:.45em}
.dc-carte .ecr-b-tete{font-size:.82em;gap:.6em}
.dc-carte .ecr-b-tete i{width:.9em;height:.9em;border-radius:.2em}
.dc-carte .ecr-b-objet{font-size:1.15em;margin:.4em 0 .3em}
.dc-carte .ecr-b-texte{font-size:1em}
.dc-carte .ecr-b-actions{flex-wrap:wrap;font-size:.92em;gap:.6em;margin-top:.9em}
.dc-carte .ecr-b-actions span{padding:.5em 1em;border-radius:.6em;border-width:1px}
.dc-carte .dc-val{background:#2447F5;border-color:#2447F5;color:#fff;transition:.25s}
.dc-p3 .dc-val{transform:scale(.93);background:#1A36D6}
.dc-carte .dc-fait{display:flex;align-items:center;gap:.4em;padding:0;border:0;color:#0F7A4A;font-weight:600;white-space:nowrap}
.dc-notes{background:#FFF8DC}
.dc-notes li{padding:.35em 0;border-bottom:1px dashed rgba(11,13,18,.18);font-style:italic}
.dc-carte em{font:600 .8em/1.2 var(--ff);padding:.35em .7em;border-radius:.6em;background:#ECEFF4;color:#3E4553;white-space:nowrap}
.dc-carte .dc-l0,.dc-carte .dc-rouge{background:#FDECE8;color:#A92A15}
.dc-carte .dc-l1,.dc-carte .dc-regle{background:#EEF2FF;color:#1A36D6}
.dc-carte .dc-vert{background:#E8F5EE;color:#0B4F31}
.dc-liste li{display:flex;align-items:center;gap:.8em;padding:.55em .5em;border-top:1px solid var(--ligne);border-radius:.5em;transition:.5s}
.dc-liste b{width:24%;font-weight:600}
.dc-liste li span{flex:1}
.dc-garde{margin:.6em 0 0!important}
.dc-ordi .dc-e[data-e^="7"]{padding:0;align-content:stretch}
.dc-gestion{border-radius:0;padding:4cqi 6cqi;font-size:2.7cqi;background:#F5F7FA}
.dc-gestion li{background:#fff;margin-top:.5em;border:0;padding:.8em 1em;box-shadow:0 .1em .3em var(--ligne)}
.dc-rouge,.dc-vert{display:none}
.dc-rouge .ico{display:inline;vertical-align:-.2em;margin-right:.3em}
:is(.dc-p1,.dc[data-s="8"]) .dc-retard{background:#FDECE8;box-shadow:inset .25em 0 0 #C0341D}
:is(.dc-p1,.dc[data-s="8"]) .dc-rouge,.dc[data-s="8"].dc-p4 .dc-vert{display:block}
/* 21/09/2026 : une seule étiquette sur la ligne en retard (grise, puis rouge, puis verte) */
:is(.dc-p1,.dc[data-s="8"]) .dc-retard em:not(.dc-rouge):not(.dc-vert){display:none}
.dc[data-s="8"].dc-p4 .dc-retard{background:#E8F5EE;box-shadow:inset .25em 0 0 #0F7A4A}
.dc[data-s="8"].dc-p4 .dc-rouge{display:none}
.dc-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:3cqi;padding:0 5cqi 13cqi;background:#F5F7FA;color:#0B0D12;font:400 5.5cqi/1.35 var(--ff)}
.dc-chat>b{position:absolute;left:0;right:0;top:0;padding:16cqi 0 4cqi;text-align:center;background:#fff;box-shadow:0 .3cqi 0 var(--ligne)}
.dc-chat p{max-width:84%;padding:3cqi 4cqi;border-radius:5cqi;background:#fff;color:#0B0D12;box-shadow:0 .4cqi 1.4cqi rgba(11,13,18,.1)}
.dc-chat .dc-moi{align-self:flex-end;background:#2447F5;color:#fff}
.dc-chat .dc-lit{padding-block:0;background:none;box-shadow:none;color:#5F6675;font-size:4.4cqi}
.dc-p3 .dc-chat .dc-lit{opacity:0}
.dc-tel .dc-alerte{background:#fff;color:#0B0D12;box-shadow:0 0 0 .7cqi #C0341D,0 3cqi 8cqi rgba(0,0,0,.45)}
.dc-alerte i{background:#FDECE8}
.dc-alerte i .ico,.dc-alerte b{color:#C0341D}
.dc-alerte b{font-size:6.2cqi}
.dc-alerte span{font-size:5.5cqi}
.dc-alerte .dc-btn{position:relative;grid-column:1/-1;margin-top:1.4cqi;padding:3.2cqi 2cqi;border-radius:3.4cqi;background:#C0341D;color:#fff;font-size:4.7cqi;font-weight:600;text-align:center;cursor:pointer}
.dc-alerte .dc-btn+.dc-btn{margin-top:0;background:#ECEFF4;color:#0B0D12}
.dc-btn[data-dc="relance"]::after{content:"";position:absolute;right:14%;top:50%;width:16cqi;height:16cqi;margin:-8cqi;border-radius:50%;opacity:0;
  background:rgba(255,255,255,.4);border:.8cqi solid #fff;box-shadow:0 1cqi 3cqi rgba(0,0,0,.35)}
/* 21/09/2026 : le doigt tape puis s'efface */
.dc[data-s="8"].dc-p1:not(.dc-p2) .dc-btn::after{animation:dc-doigt 1.3s var(--sortie) both}
@keyframes dc-doigt{0%{opacity:0;transform:translate(24cqi,46cqi)}60%{opacity:1;transform:none}80%{opacity:1;transform:scale(.72)}to{opacity:0;transform:none}}
.dc-feuille{pointer-events:none}
.dc-att .dc-feuille .dc-val{pointer-events:auto;cursor:pointer}
.dc-feuille .dc-carte{position:absolute;inset:0;padding:17cqi 6cqi 0;border-radius:0;background:#F5F7FA;box-shadow:none}
.dc-feuille p,.dc-feuille ol{padding:.8em .9em .8em 2em;border-radius:.8em;background:#fff;box-shadow:0 .1em .4em rgba(11,13,18,.1)}
.dc-feuille p{padding-left:.9em}
.dc-feuille .dc-fait{margin:1em 0 0;white-space:normal;align-items:flex-start}
.dc-num{display:block;font:700 1.5em/1.2 var(--ff-d);margin-bottom:.4em}
.dc-feuille ol{display:grid;gap:.5em;list-style:decimal;color:#3E4553}
.dc[data-b="appel"] .dc-t-relance,.dc:not([data-b="appel"]) .dc-t-appel{display:none}
.dc-choix{position:absolute;left:1rem;bottom:1rem;z-index:5;display:flex;flex-wrap:wrap;gap:.5rem;animation:dc-entre .5s var(--sortie)}
.dc-choix .btn{min-height:46px;padding:.7em 1.1em;font-size:.92rem}
.dc-b-rouge{background:var(--rouge);border-color:#9E2A17;color:#fff;box-shadow:var(--o-2)}
.dc-b-rouge:hover{background:#A92A15}
/* 21/09/2026, bureau : double discret en scène 7 ; en scène 8 c'est à la personne, le rouge plein revient */
@media (min-width:761px){.dc[data-s="7"] .dc-choix .dc-b-rouge{background:var(--blanc);border-color:var(--ligne-2);color:var(--rouge);box-shadow:var(--o-1)}
.dc[data-s="7"] .dc-choix .dc-b-rouge:hover{border-color:rgba(192,52,29,.45);transform:translateY(-1px)}}
/* 21/09/2026 : le carton se pose sur le panneau net de la scène, ni voile ni flou */
.dc-fin{position:absolute;inset:0;z-index:9;display:grid;place-content:center;justify-items:center;gap:.7rem;padding:1rem;text-align:center;animation:dc-entre .5s}
.dc-coche{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;animation:dc-pop .7s var(--sortie) .1s both}
@keyframes dc-pop{from{opacity:0;transform:scale(.4)}}
.dc-coche .ico{width:22px;height:22px;stroke-width:2.6}
.dc-fin h3{font-size:clamp(1.6rem,3.2vw,2.4rem);letter-spacing:-.03em}
.dc-fin p{max-width:56ch;color:var(--texte);text-wrap:balance}
/* les TROIS boutons restent : un seul plein, deux liens discrets dessous (cible de 44 px gardée) */
.dc-fin-btns{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;gap:.5rem 1.2rem;margin-top:.3rem}
.dc-fin-btns .btn-1{grid-column:1/-1}
.dc-fin-btns .btn-2,.dc-fin-btns .btn-2:hover{background:none;border-color:transparent;box-shadow:none;transform:none;min-height:44px;padding:.5em .6em;font-weight:500;color:var(--texte);
  text-decoration:underline;text-decoration-color:var(--ligne-2);text-underline-offset:.25em}
.dc-fin-btns .btn-2:hover{color:var(--encre);text-decoration-color:currentColor}
/* Carton de fin seul à l'écran. RÈGLE : tout style du carton s'écrit .dc[data-s="8"].dc-p5, JAMAIS .dc-p5 seul : dc-p5 s'allume
   aussi un tic en fin de scène 3 (son rail a 4 étapes). Légende en visibility, pas en display : le cadre centré ne saute pas. */
.dc[data-s="8"].dc-p5 .dc-plateau{opacity:0;transition:opacity .4s}
.dc[data-s="8"].dc-p5 .dc-legendes{visibility:hidden}
.dc[data-s="8"].dc-p5 .dc-cmd{opacity:.5;transition:opacity .3s}
.dc[data-s="8"].dc-p5 .dc-cmd:is(:hover,:focus-within){opacity:1}
.dc-legendes>li{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:.7rem 2rem;align-items:center;align-content:start;min-height:6.5rem}
.dc-rail{grid-column:1/-1}
/* 21/09/2026 : plus de disque de numéro, le niveau en texte gris */
.dc-quand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;font:650 .95rem/1.2 var(--ff-d);margin-bottom:.3rem}
.dc-niv{font:500 .78rem/1.2 var(--ff);color:var(--doux)}
.dc-legendes h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
.dc-legendes>li>p{max-width:84ch;font-size:.94rem;line-height:1.5;color:var(--texte)}
.dc-legendes p span{font-weight:600}
.dc-av1{display:inline-block}
.dc-av2,.dc-p2 .dc-av1{display:none}
.dc-att .dc-av2{display:inline-block}
/* 21/09/2026 : le rail est un fil de texte ; graisse CONSTANTE allumé ou éteint, sinon les voisines sautent */
.dc-rail{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.9rem;padding-right:1.6rem;counter-reset:dc}
.dc-rail li{--c:var(--doux);--d:var(--gris-3);--n:var(--texte);position:relative;display:flex;align-items:center;gap:.5em;padding:.15em 0;
  color:var(--c);font:600 .82rem/1.25 var(--ff);counter-increment:dc;transition:color .4s}
.dc-rail li::before{content:counter(dc);flex:none;width:1.4em;height:1.4em;border-radius:50%;display:grid;place-items:center;background:var(--d);color:var(--n);font-size:.85em;transition:background-color .4s,color .4s}
.dc-rail li:not(:last-child)::after{content:"\2192";position:absolute;left:calc(100% + .45rem);top:50%;translate:0 -50%;font-size:1.25em;line-height:1;color:#8A91A0}
.dc-p1 .dc-rail li:nth-child(1),.dc-p2 .dc-rail li:nth-child(2),.dc-p3 .dc-rail li:nth-child(3),.dc-p4 .dc-rail li:nth-child(4){--c:var(--encre);--d:var(--bleu);--n:#fff}
.dc-cmd{display:flex;align-items:center;gap:.6rem;margin-top:auto}
.dc-barre{flex:1;display:flex}
.dc-barre button{flex:1;height:46px;padding:0 .15rem;display:grid;align-items:center}
.dc-barre i{position:relative;height:5px;border-radius:3px;overflow:hidden;background:#8A91A0}
.dc-barre button:hover i{background:var(--doux)}
.dc-barre i::after{content:"";position:absolute;inset:0;background:var(--bleu);transform:scaleX(0);transform-origin:0 0;transition:.5s linear}
.dc-barre .dc-vu i::after{transform:none}
.dc-barre [aria-current] i::after{transform:scaleX(var(--a,0))}
/* large et bas : légende à droite */
@media (min-width:1100px) and (max-height:820px){
.dc{padding-block:.5rem}
.dc-cadre{display:grid;grid-template:auto minmax(0,1fr) auto/minmax(0,1fr) 19rem;gap:.6rem 1.5rem;height:100%;padding-block:.6rem .7rem}
.dc-tete,.dc-cmd{grid-column:1/-1}
.dc-scene{aspect-ratio:auto;height:100%;max-height:none;min-height:0}
.dc-legendes{align-self:center;max-height:100%;overflow:auto}
.dc-legendes>li{grid-template-columns:1fr;min-height:0}
.dc-rail{flex-direction:column;align-items:flex-start;padding:0 0 .3rem}
.dc-rail li::after{display:none}
/* carton de fin : la scène prend toute la largeur, les appareils s'effacent d'un coup */
.dc[data-s="8"].dc-p5 .dc-legendes{display:none}
.dc[data-s="8"].dc-p5 .dc-scene{grid-column:1/-1}
.dc[data-s="8"].dc-p5 .dc-plateau{transition:none}
}
/* petit écran : seule la légende défile, téléphone devant */
@media (max-width:760px){
.dc{padding:0}
.dc-cadre{width:100%;height:100%;border-radius:0;gap:.5rem;overflow:hidden;padding:.6rem 1rem calc(.4rem + env(safe-area-inset-bottom))}
.dc-tete{display:block;position:relative;padding-right:54px;min-height:46px}
.dc-x{position:absolute;right:0;top:0}
.dc-inter,.dc-tag{margin-top:.3rem;vertical-align:middle}
.dc-tag{display:inline-block;margin-left:.5rem}
/* 21/09/2026 : la hauteur gagnée (en-tête, phrases, rail) va à la scène */
.dc-scene{aspect-ratio:1/1.1;max-height:calc(100dvh - 25rem)}
.dc-plateau{inset:0;width:auto;aspect-ratio:auto;transform:none}
.dc-ordi{--u:2.5cqi;left:-6%;top:12%;width:112%}
.dc-ordi [data-e="3"]{grid-template-columns:1fr;gap:1.6cqi;padding:0 7cqi}
.dc[data-m="ordi"] .dc-tel{opacity:0}
.dc[data-m="duo"] .dc-ordi{left:-5%;top:3%;width:112%}
.dc:not([data-m="ordi"]) .dc-tel{--u:5.2cqi;left:45%;top:2.5%;width:54%}
.dc-tel .dc-notif{margin-top:3cqi}
.dc-chat{justify-content:flex-start;padding-top:31cqi}
.dc-gestion{font-size:3.3cqi;padding:2cqi 4cqi}
/* 21/09/2026 : plus de fragments tronqués derrière le téléphone (scènes 2, 7 et 8) */
.dc-gestion small,.dc-gestion li:not(.dc-retard){display:none}
.dc[data-s="2"] .ecr-accueil :is(.ecr-bonjour,.ecr-question,.ecr-champ),.dc[data-s="2"] .dc-toast{opacity:0}
.dc-liste .dc-retard{display:grid;justify-items:start;gap:.4em .8em;grid-template-columns:auto 1fr}
.dc-retard b{width:auto}
.dc-retard em{grid-column:1/-1;font-size:.86em}
.dc-tab{left:-3%;top:6%;width:100%}
.dc-tab .ip-kpis{grid-template-columns:39cqi}
.dc-tab .ip-barres{display:none}
.dc-choix{left:.5rem;bottom:.5rem;flex-direction:column;gap:.35rem;max-width:43%}
.dc-choix .btn{white-space:normal;text-align:left;font-size:.8rem;line-height:1.2;padding:.4em .7em}
.dc[data-s="8"].dc-p5 .dc-scene{flex:1;aspect-ratio:auto;max-height:none}
.dc[data-s="8"].dc-p5 .dc-legendes{display:none}
.dc-fin-btns{width:100%;grid-template-columns:1fr 1fr}
.dc-fin .btn-1{width:100%}
.dc-legendes{flex:1;min-height:0;overflow:auto}
.dc-legendes>li{grid-template-columns:1fr;gap:.45rem;min-height:0}
.dc-legendes>li>p{font-size:.86rem;line-height:1.45}
.dc-rail{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:.3rem 1.5rem;padding:0 0 .2rem}
.dc-rail li{font-size:.76rem;padding:.1em 0}
.dc-rail li:not(:last-child)::after{left:calc(100% + .35rem);font-size:1.1em}
.dc-rail li:nth-child(2n)::after{display:none}
.dc-cmd{flex-wrap:wrap;justify-content:center;gap:0 1rem}
.dc-barre{order:-1;flex-basis:100%;margin:-.3rem -.75rem -.1rem}
}
@media (max-width:380px){.dc-rail{column-gap:1.2rem}.dc-rail li{font-size:.7rem}}
@media (max-width:760px) and (max-height:759px){
.dc-scene{max-height:calc(100dvh - 23.5rem)}
.dc[data-m="ordi"] .dc-ordi{left:-3%;top:3%;width:106%}
}
@media (prefers-reduced-motion:reduce){.dc,.dc *,.dc *::before,.dc *::after{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------ 21/09/2026 : la démo se voit interactive
   Règle posée par Benj : on doit comprendre AU PREMIER COUP D'ŒIL qu'on peut cliquer, et la démo doit aller
   jusqu'au bout du tunnel même si personne ne touche à rien. Le badge de l'en-tête l'annonce, les boutons
   jouables respirent tant que la personne n'a pas cliqué (.dc-mene coupe l'appel dès le premier geste). */
.dc-inter{display:inline-flex;align-items:center;gap:.4em;font:600 .72rem/1.2 var(--ff);letter-spacing:.02em;
  padding:.4em .75em;border-radius:7px;background:var(--bleu-pale);color:var(--bleu);white-space:nowrap;transition:background-color .4s,color .4s}
/* 21/09/2026 : le badge s'éteint en gris au premier clic et au carton, sans rien décaler */
.dc-mene .dc-inter,.dc[data-s="8"].dc-p5 .dc-inter{background:none;color:var(--doux)}
.dc-inter .ico{width:14px;height:14px;stroke-width:2.2}

/* La barre des moments jouables : elle double au clavier ce qui se clique dans les écrans dessinés. */
.dc-jouable{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:5;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem;animation:dc-entre .45s var(--sortie)}
.dc-b-jouable{min-height:46px;padding:.7em 1.1em;font-size:.92rem;box-shadow:0 0 0 0 rgba(36,71,245,.45)}
.dc-poser{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.45rem .55rem;border-radius:13px;
  background:rgba(255,255,255,.92);border:1px solid var(--ligne);box-shadow:var(--o-2);backdrop-filter:blur(6px)}
.dc-poser>span{font:600 .76rem/1.2 var(--ff);color:var(--doux);padding-left:.3rem}
/* 21/09/2026 : la question à poser invite (bleu), celle déjà posée se calme ; une seule respire, la suivante */
.dc-q{padding:.5em .85em;border-radius:9px;border:1px solid var(--bleu-ligne);background:var(--blanc);
  font:500 .86rem/1.25 var(--ff);color:var(--bleu);cursor:pointer;transition:background-color var(--vite),border-color var(--vite),transform var(--vite)}
.dc-q:hover{border-color:var(--bleu);background:var(--bleu-pale)}
.dc-q[aria-pressed="true"]{background:var(--bleu-pale);border-color:var(--bleu-ligne);color:var(--bleu-nuit)}
.dc[data-s="6"]:not(.dc-mene) .dc-q[aria-pressed="true"]+.dc-q{animation:dc-appel 1.7s var(--ease) infinite}

/* Ce qui se clique DANS les écrans dessinés : le bouton bleu du brouillon (scène 3) et ceux du téléphone. */
.dc-jouer-ici .ecr-b-actions .dc-val[data-dc]{pointer-events:auto;cursor:pointer}
/* 21/09/2026 : une seule pulsation par écran (bureau : le bouton de l'appareil ; téléphone : la cible de 40 px, bloc 860px) */
@media (min-width:861px){
  .dc[data-s="3"].dc-p3:not(.dc-p4):not(.dc-mene) .ecr-b-actions .dc-val[data-dc="valider3"]{animation:dc-appel 1.7s var(--ease) infinite}
  .dc-poser{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0}
}
/* fenêtre basse, espagnol : le libellé tombait sur le bord de la tablette */
@media (min-width:861px) and (max-height:820px){:lang(es) .dc-poser>span{display:none}}

/* La note qui dit que la démo repart seule : discrète, jamais un reproche. 21/09/2026 : fond clair, sans carrosserie de bouton. */
.dc-auto{position:absolute;left:1rem;bottom:4.2rem;z-index:5;margin:0;padding:.45em .8em;border-radius:9px;
  background:rgba(245,247,250,.94);color:var(--texte);font:500 .8rem/1.3 var(--ff);animation:dc-entre .45s var(--sortie)}

@keyframes dc-appel{
  0%,100%{box-shadow:0 0 0 0 rgba(36,71,245,.45)}
  55%{box-shadow:0 0 0 9px rgba(36,71,245,0)}
}
@media (max-width:860px){
  .dc-inter{font-size:.68rem;padding:.35em .6em}
  .dc-jouable{left:.5rem;right:.5rem;bottom:.5rem;gap:.35rem}
  .dc-b-jouable{font-size:.82rem;padding:.5em .8em;min-height:40px}
  .dc-jouer-ici:not(.dc-mene) .dc-b-jouable{animation:dc-appel 1.7s var(--ease) infinite}
  .dc-poser{gap:.3rem;padding:.35rem .4rem}
  .dc-poser>span{display:none}
  .dc-q{font-size:.78rem;padding:.42em .7em}
  /* en haut de la scène : en bas, la note passait sous les boutons de choix */
  .dc-auto{left:.5rem;right:auto;top:.5rem;bottom:auto;max-width:calc(100% - 1rem);font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .dc-b-jouable,.dc-q,.ecr-b-actions .dc-val[data-dc],.dc-jouable,.dc-auto{animation:none!important}
}

/* La consigne de la scène 3 n'existe qu'au moment où il faut cliquer. 21/09/2026 : masquée à la vue, gardée pour la synthèse vocale. */
.dc-av3{display:none}
.dc[data-s="3"].dc-p3:not(.dc-p4) .dc-av3{display:inline;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- fondateur.css ---- */
/* Section « Notre parti pris » (21/09/2026) : court, une citation signée, trois piliers.
   Le portrait n'est plus un bloc : il signe la citation, recadré sur le visage.
   Posé ici et pas dans site.css, où une autre session travaille la même nuit. */
.fo-bloc{max-width:min(64rem,100%)}
.fo-lead{max-width:46rem;margin-top:1.1rem}
.fo-cite{margin:1.9rem 0 0;padding:1.35rem 1.5rem;background:var(--bleu-pale);border-radius:var(--r);border-left:3px solid var(--bleu);max-width:46rem}
.fo-cite p{margin:0;font:650 clamp(1.14rem,2.1vw,1.42rem)/1.34 var(--ff-d);letter-spacing:-.018em;color:var(--encre)}
.fo-cite footer{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.fo-face{width:60px;height:60px;border-radius:50%;overflow:hidden;flex:none;background:var(--blanc);box-shadow:0 0 0 2px var(--blanc),0 1px 5px rgba(11,13,18,.2)}
.fo-face img{width:100%;height:100%;object-fit:cover;display:block}
.fo-cite cite{font-style:normal;font-size:.92rem;font-weight:600;color:var(--encre)}
.fo-piliers{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.fo-piliers li{background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;padding:.9rem 1rem;box-shadow:var(--o-1)}
.fo-piliers b{display:block;font:650 .95rem/1.25 var(--ff-d);letter-spacing:-.012em;color:var(--encre)}
.fo-piliers span{display:block;margin-top:.3rem;font-size:.85rem;line-height:1.45;color:var(--doux)}
.fo-bloc .puces-m{margin-top:1.4rem}
@media (max-width:820px){.fo-piliers{grid-template-columns:1fr;gap:.6rem}.fo-cite{padding:1.1rem 1.15rem}}

/* ---- hero-titre.css ---- */
/* Titre du hero, 21/09/2026 : « Changez de quotidien. Pas d'outils. » vit d'un rythme à deux temps.
   Avec clamp(2.2rem,4.2vw,3.5rem) de site.css, la première phrase cassait en deux vers 1280 px et le
   rythme se perdait. On baisse la pente et la borne haute pour qu'elle tienne sur une ligne.
   Posé ici et pas dans site.css, où une autre session travaille le logo la même nuit. */
.hs-texte h1{font-size:clamp(2.2rem,3.4vw,3.2rem)}

/* ---- intro.css ---- */
/* « Le rideau d'arrivée » et le bouton de la démo en grand (21/09/2026). Module : build/sec_intro.py, script : build/js/intro.js.
   Le rideau est un calque fixe par-dessus la page : il ne touche jamais à la scène du hero (#hs-scene), il réutilise
   seulement ses écrans (classes ecr-* de site.css, pilotées par .hs-scene[data-etape]) pour que le raccord soit exact.
   Phases posées par intro.js sur .in[data-ph] : a le bazar · b les fils puis l'aspiration · c l'ordinateur sort et s'ouvre
   · d il glisse à sa place, le fond s'efface · e il se fond dans celui du hero · x on a passé l'intro.
   Secours : sans intro.js, .in se retire seul au bout de 11 s (in-secours). Mouvement réduit et impression : rien. */

/* ------------------------------------------------ le bouton « Essayer la démo » du hero */
.hs-cta .hs-demo{gap:.85em;min-height:66px;padding:.62em 1.2em .62em .7em;border-radius:17px;text-align:left;isolation:isolate}
.hs-demo-rond{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--bleu);
  box-shadow:0 2px 8px rgba(11,13,18,.24);transition:transform var(--moyen) var(--ease)}
.hs-demo-rond svg{width:21px;height:21px;fill:currentColor;translate:1px 0}
.hs-demo:hover .hs-demo-rond{transform:scale(1.07)}
.hs-demo-txt{display:grid;gap:.24em;min-width:0}
.hs-demo-txt b{font:650 1.1rem/1.1 var(--ff-d);letter-spacing:-.012em}
.hs-demo-txt small{font:500 .78rem/1.25 var(--ff);opacity:.88;white-space:normal}
.hs-demo::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  animation:hs-halo 2.8s var(--sortie) 1.2s infinite}
.hs-demo:hover::after,.hs-demo:focus-visible::after{animation-play-state:paused}
html.intro-fin .hs-demo::after{animation:hs-halo-fort 1.15s var(--sortie) 2,hs-halo 2.8s var(--sortie) 2.4s infinite}
@keyframes hs-halo{0%{box-shadow:0 0 0 0 rgba(36,71,245,.42)}65%,100%{box-shadow:0 0 0 15px rgba(36,71,245,0)}}
@keyframes hs-halo-fort{0%{box-shadow:0 0 0 0 rgba(36,71,245,.6)}100%{box-shadow:0 0 0 30px rgba(36,71,245,0)}}
@media (max-width:560px){.hs-cta .hs-demo{width:100%;justify-content:flex-start}.hs-demo .ico:last-child{margin-left:auto}}

/* La pastille posée sur la scène du hero (accueil.css) ne se montrait qu'au survol : elle reste visible, en bleu,
   avec un point qui bat. Demande du 21/09 : on doit voir tout de suite que la démo se joue. */
.hs-ouvrir{opacity:1;transform:none;background:var(--bleu);border-color:var(--bleu-fonce);color:#fff;box-shadow:var(--o-bleu)}
.hs-ouvrir::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#8FF5C0;animation:hs-point 2.2s ease-out infinite}
.hs-ouvrir:hover{background:var(--bleu-fonce)}
@keyframes hs-point{0%{box-shadow:0 0 0 0 rgba(143,245,192,.75)}70%,100%{box-shadow:0 0 0 9px rgba(143,245,192,0)}}

/* ------------------------------------------------ le rideau */
.in{position:fixed;inset:0;z-index:400;display:grid;place-items:center;overflow:hidden;cursor:pointer;contain:layout paint;
  --u:clamp(34px,4.1vw,58px);font-family:var(--ff);animation:in-secours 1ms linear 11s forwards}
.in>*{grid-area:1/1}
.in-fond{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 46%,#EEF2FF 0%,#F5F7FA 55%,#FFFFFF 100%);
  transition:opacity .85s var(--ease)}
.in-objets{position:absolute;inset:0}
@keyframes in-secours{to{visibility:hidden;opacity:0}}
@keyframes in-monte{from{opacity:0;translate:0 16px}}

/* Un objet = trois boîtes : .in-o tourne autour du centre (l'orbite), .in-p porte la position (x en vw, y en vh),
   .in-f l'inclinaison, l'entrée et le flottement. Le fil part du centre : même rotation, même retrait que l'objet. */
.in-o{position:absolute;left:50%;top:50%;width:0;height:0}
.in-p{position:absolute;left:0;top:0;transform:translate(calc(var(--x)*1vw),calc(var(--y)*1vh)) scale(1)}
.in-f{position:absolute;left:0;top:0;display:block;width:max-content;transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg));
  animation:in-pop .6s var(--sortie) both,in-flotte 3.4s ease-in-out infinite alternate;
  animation-delay:calc(var(--i)*24ms),calc(var(--i)*-190ms)}
.in-fil{position:absolute;left:0;top:0;height:1.5px;margin-top:-.75px;border-radius:2px;opacity:0;
  width:hypot(calc(var(--x)*1vw),calc(var(--y)*1vh));rotate:atan2(calc(var(--y)*1vh),calc(var(--x)*1vw));
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,rgba(36,71,245,.85),rgba(36,71,245,.28))}
@keyframes in-pop{from{opacity:0;scale:.4}}
@keyframes in-flotte{from{translate:0 -5px}to{translate:0 6px}}

/* b : le fil file du centre vers l'objet (24 % du temps), puis l'objet et son fil rentrent ensemble, en spirale.
   Les animations restent posées après b (remplissage) : les objets ne reviennent jamais. */
.in:not([data-ph="a"]) .in-o{animation:in-orbite 1.55s both;animation-delay:calc(var(--i)*9ms)}
.in:not([data-ph="a"]) .in-p{animation:in-aspire 1.55s both;animation-delay:calc(var(--i)*9ms)}
.in:not([data-ph="a"]) .in-fil{animation:in-fil 1.55s both;animation-delay:calc(var(--i)*9ms)}
@keyframes in-orbite{0%,24%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.55,0,.9,.4)}100%{transform:rotate(calc(var(--t)*1deg))}}
@keyframes in-aspire{0%,24%{transform:translate(calc(var(--x)*1vw),calc(var(--y)*1vh)) scale(1);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  88%{opacity:1}100%{transform:translate(0,0) scale(.04);opacity:0}}
@keyframes in-fil{0%{transform:scaleX(0);opacity:0}24%{transform:scaleX(1);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  100%{transform:scaleX(0);opacity:.35}}

/* les objets */
.in-t{display:grid;place-items:center;width:var(--u);height:var(--u);border-radius:calc(var(--u)*.26);background:#fff;color:var(--encre);
  border:1px solid var(--ligne);box-shadow:var(--o-3)}
.in-logo{width:54%;height:54%;fill:currentColor}
.in-rond{border-radius:50%;background:var(--bleu-pale);color:var(--bleu);border-color:var(--bleu-ligne)}
.in-rond .ico{width:50%;height:50%;stroke-width:1.8}
.in-papier{display:grid;align-content:start;gap:calc(var(--u)*.1);width:calc(var(--u)*1.25);height:calc(var(--u)*1.65);
  padding:calc(var(--u)*.2) calc(var(--u)*.17);background:#fff;border:1px solid var(--ligne-2);border-radius:4px;box-shadow:var(--o-2)}
.in-papier i{height:max(2px,calc(var(--u)*.06));border-radius:2px;background:var(--gris-3)}
.in-papier i:first-child{width:55%;background:#9AA1B0}
.in-papier i:last-child{width:70%}
.in-classeur{position:relative;display:block;width:calc(var(--u)*1.2);height:calc(var(--u)*1.7);border-radius:5px;background:var(--c);
  box-shadow:var(--o-3),inset -6px 0 0 rgba(0,0,0,.14)}
.in-classeur b{position:absolute;left:18%;right:26%;top:14%;height:22%;border-radius:3px;background:rgba(255,255,255,.92)}
.in-classeur i{position:absolute;left:38%;bottom:12%;width:22%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.in-postit{display:grid;place-items:center;width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);padding:.5em;background:var(--c);color:#3A3320;
  font:600 calc(var(--u)*.25)/1.2 var(--ff);text-align:center;border-radius:2px 2px 10px 2px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 18px -8px rgba(60,50,10,.35)}
.in-tableau{display:grid;gap:.3em;width:calc(var(--u)*3.6);padding:calc(var(--u)*.2);background:#fff;border:calc(var(--u)*.08) solid #D5D9E2;
  border-radius:8px;box-shadow:var(--o-3);font:600 calc(var(--u)*.24)/1.2 var(--ff);color:var(--bleu-nuit)}
.in-tableau svg{display:block;width:100%;height:auto;fill:none;stroke:var(--rouge);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.in-tableau rect{stroke:var(--bleu)}
.in-puce{display:inline-flex;align-items:center;gap:.45em;padding:.55em .85em;border-radius:999px;background:#fff;border:1px solid var(--ligne-2);
  box-shadow:var(--o-2);font:600 clamp(.7rem,1vw,.86rem)/1 var(--ff);color:var(--encre);white-space:nowrap}
.in-puce .ico{width:1.15em;height:1.15em;color:var(--bleu)}
.in-fichier{border-radius:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}
.in-fichier .ico{color:var(--ok)}

/* le tourbillon */
.in-v{position:relative;width:min(64vmin,600px);aspect-ratio:1;border-radius:50%;opacity:0;transform:scale(.3);pointer-events:none;
  transition:opacity .5s var(--ease),transform 1.5s var(--sortie)}
.in-v i{position:absolute;inset:0;border-radius:50%;filter:blur(5px);animation:in-tourne 1.15s linear infinite;
  background:conic-gradient(from 0deg,rgba(36,71,245,0) 0deg,rgba(36,71,245,.5) 70deg,rgba(125,147,255,0) 140deg,rgba(20,37,158,.42) 215deg,rgba(36,71,245,0) 280deg,rgba(90,120,255,.45) 330deg,rgba(36,71,245,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 6%,#000 26%,transparent 100%);mask:radial-gradient(closest-side,transparent 6%,#000 26%,transparent 100%)}
.in-v::after{content:"";position:absolute;inset:41%;border-radius:50%;filter:blur(2px);
  background:radial-gradient(circle,#fff 0,#7D93FF 38%,rgba(36,71,245,0) 72%)}
@keyframes in-tourne{to{rotate:360deg}}
.in[data-ph="b"] .in-v{opacity:1;transform:scale(1)}
.in:is([data-ph="c"],[data-ph="d"],[data-ph="e"]) .in-v{opacity:0;transform:scale(.05);
  transition:opacity .45s ease .15s,transform .6s cubic-bezier(.6,0,.8,.2)}

/* l'ordinateur : il sort du centre capot fermé, le capot se lève, l'écran s'allume (data-etape, comme le hero) */
.in-mac.hs-scene{position:relative;width:min(58vw,760px,92vh);aspect-ratio:auto;opacity:0;transform:scale(.08);pointer-events:none;
  transition:opacity .35s ease,transform .75s var(--sortie),translate .85s var(--sortie);will-change:transform}
/* Capot fermé : on voit le dos du capot (coque grise), posé à plat vers soi. Perspective longue, sinon le bord proche
   déborde de la base. Fermé, l'ordinateur est remonté d'un tiers pour sortir du centre ; il redescend en s'ouvrant. */
.in-mac.hs-scene{translate:0 -30%}
.in-mac.hs-scene[data-capot="1"]{translate:0 0}
.in-mac .mbp-lid{transform-origin:50% 100%;transform:perspective(3400px) rotateX(-86deg);transition:transform .85s var(--sortie)}
.in-mac .mbp-lid::before{content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,#6A6C72 0%,#3A3C40 60%,#232428 100%);transition:opacity .45s ease .25s}
.in-mac[data-capot="1"] .mbp-lid{transform:perspective(3400px) rotateX(0deg)}
.in-mac[data-capot="1"] .mbp-lid::before{opacity:0}
.in-mac .ecr-noir{transition:opacity .5s ease}
.in[data-ph="c"] .in-mac{opacity:1;transform:none}
.in:is([data-ph="d"],[data-ph="e"]) .in-mac{opacity:1;transform:none;transition:transform .9s var(--glisse),opacity .3s ease}
.in[data-ph="d"].in-loin .in-mac{opacity:0;transform:translateY(16vh) scale(.62);transition:transform .7s var(--glisse),opacity .55s ease}
.in[data-ph="e"] .in-mac{opacity:0}

/* la légende */
.in-legende{position:relative;z-index:3;align-self:end;display:grid;justify-items:center;text-align:center;pointer-events:none;
  margin-bottom:clamp(2.6rem,9vh,6rem);padding-inline:1.2rem;transition:opacity .3s ease}
.in-legende p{grid-area:1/1;margin:0;max-width:none;font:650 clamp(1.3rem,2.7vw,2.25rem)/1.15 var(--ff-d);letter-spacing:-.02em;color:var(--encre);
  text-wrap:balance;text-shadow:0 0 18px #fff,0 0 8px #fff;opacity:0;translate:0 14px;transition:opacity .45s var(--ease),translate .6s var(--sortie)}
.in-legende p.ici{opacity:1;translate:0 0}
.in[data-ph="a"] .in-legende p.ici{animation:in-monte .7s var(--sortie) .15s both}
.in-legende small{display:block;margin-top:.4em;font:500 .5em/1.3 var(--ff);letter-spacing:0;color:var(--doux)}

/* d, e, x : la page reprend la main */
.in:is([data-ph="d"],[data-ph="e"],[data-ph="x"]){pointer-events:none;cursor:default}
.in:is([data-ph="d"],[data-ph="e"]) .in-fond,.in:is([data-ph="d"],[data-ph="e"]) .in-legende{opacity:0}
.in[data-ph="x"]{opacity:0;transition:opacity .3s ease}

.in-passer{position:fixed;right:clamp(.9rem,2.4vw,2rem);bottom:calc(clamp(.9rem,2.4vw,2rem) + env(safe-area-inset-bottom));z-index:401;
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:.6em 1em;border-radius:11px;border:1px solid var(--ligne-2);
  background:rgba(255,255,255,.92);color:var(--encre);font:600 .9rem/1 var(--ff);cursor:pointer;box-shadow:var(--o-2);backdrop-filter:blur(6px);
  animation:in-monte .5s var(--sortie) .4s both,in-secours 1ms linear 11s forwards}
.in-passer:hover{border-color:rgba(11,13,18,.26);box-shadow:var(--o-3)}
.in-passer .ico{width:15px;height:15px}

/* côté page : l'ordinateur du hero attend caché celui du rideau ; le texte du hero remonte quand le rideau se lève */
html.intro-joue #hs-scene .pose-mac{visibility:hidden}
html.intro-leve .hs-texte{animation:in-monte .9s var(--sortie) .1s backwards}

@media (max-width:700px){
  .in{--u:clamp(32px,9.5vw,44px)}
  .in-g{display:none}
  .in-mac.hs-scene{width:88vw}
  .in-v i{filter:none}
}
@media (prefers-reduced-motion:reduce){
  .in,.in-passer{display:none!important}
  .hs-demo::after,.hs-ouvrir::before{animation:none}
}
@media print{.in,.in-passer{display:none!important}}

/* ---- outils.css ---- */
/* Outils qui se branchent (19 et 20/09/2026). Module build/sec_outils.py, préfixe og-.
   Accueil (.og-accueil) : les standards, UNE rangée de logos connus (.og-vitrine), le lien vers la page des outils, les métiers.
   Page des outils : recherche, filtres par famille, mur entier. Logos monochromes (encre) tirés de la planche assets/logos.svg,
   20 px dans une pastille de 32 px ; un outil sans logo libre est cité en toutes lettres sous sa famille (.og-textes).
   Sans JavaScript : tout est visible, groupé par famille. Avec JavaScript (.og-pret) : recherche et filtres. */
.og-mur{--og-cell:46px;--og-gap:.45rem;scroll-margin-top:96px;display:grid;gap:clamp(1rem,2vw,1.35rem);min-width:0}
.og-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.8rem);align-items:start;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:1.3rem 1.4rem;box-shadow:var(--o-1)}
.og-intro h3,.og-intro h2{margin-bottom:.4rem}
/* Page des outils : le titre du bloc est un h2 (il suit le h1), habillé comme le h3 de l'accueil. */
.og-intro h2{font-size:clamp(1.1rem,1.45vw,1.28rem);font-weight:650;line-height:1.2;letter-spacing:-.018em;max-width:none}
.og-intro p{color:var(--texte);font-size:.95rem}
.og-cle{border-left:1px solid var(--ligne);padding-left:clamp(1.2rem,3vw,2.8rem);align-self:stretch}
.og-compte b{display:block;font:650 clamp(1.1rem,1.45vw,1.28rem)/1.2 var(--ff-d);letter-spacing:-.018em;color:var(--encre);margin-bottom:.4rem}
.og-legende{display:grid;gap:.5rem;margin-top:1rem;font-size:.9rem;line-height:1.4;color:var(--encre)}
.og-legende li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:.55rem;align-items:start}
.og-legende .og-point,.og-legende .og-sans{margin-top:.42em;justify-self:center}
.og-leg-n{color:var(--doux);font-variant-numeric:tabular-nums}
.og-point{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-pale)}
.og-sans{display:block;flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,13,18,.3)}

/* ----------------------------------------------------------------- filtres (posés par le script) */
.og-filtres{display:none;flex-wrap:wrap;gap:.4rem}
.og-pret .og-filtres{display:flex}
.og-filtre{flex:none;display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:.5em .95em;border-radius:11px;white-space:nowrap;
  font:500 .9rem/1.15 var(--ff);color:var(--texte);background:var(--blanc);border:1px solid var(--ligne-2);box-shadow:var(--o-1);
  transition:background-color var(--vite),border-color var(--vite),color var(--vite),box-shadow var(--moyen) var(--ease)}
.og-filtre:hover{color:var(--encre);border-color:rgba(11,13,18,.26);box-shadow:var(--o-2)}
.og-filtre[aria-pressed="true"]{background:var(--bleu-pale);border-color:var(--bleu-ligne);color:var(--bleu-nuit);font-weight:600;box-shadow:inset 0 0 0 1px var(--bleu-ligne)}
.og-n{font-size:.78rem;font-weight:500;color:var(--doux);font-variant-numeric:tabular-nums}
.og-filtre[aria-pressed="true"] .og-n{color:var(--bleu)}

/* ----------------------------------------------------------------- familles et grille */
.og-familles{display:grid;gap:clamp(.9rem,1.6vw,1.25rem);min-width:0}
.og-famille{display:grid;gap:.55rem;min-width:0;scroll-margin-top:96px}
.og-famille[hidden]{display:none}
.og-f-tete{display:flex;align-items:center;gap:.5rem;min-width:0}
.og-f-titre{font:650 .95rem/1.25 var(--ff-d);letter-spacing:-.01em;color:var(--encre)}
.og-f-nb{font-size:.78rem;color:var(--doux);font-variant-numeric:tabular-nums;padding:.12em .5em;border-radius:6px;background:var(--gris-2)}
.og-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));grid-auto-rows:var(--og-cell);gap:var(--og-gap);min-width:0}
/* position:relative : le texte masqué (.sr, en absolu) reste dans sa cellule, donc dans la rangée qui défile sur téléphone. */
.og-outil{position:relative;display:flex;align-items:center;gap:.55rem;min-width:0;height:var(--og-cell);padding:0 .7rem 0 6px;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:12px;box-shadow:var(--o-1)}
.og-pastille{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--gris);color:var(--encre);
  box-shadow:inset 0 0 0 1px var(--ligne)}
.og-logo{width:20px;height:20px;max-width:none;fill:currentColor}
/* Logos-mots (tout en largeur, très peu d'encre) : correction optique à 26 px dans la même pastille, sinon illisibles. */
.og-logo.og-mot{width:26px;height:26px}
.og-nom{min-width:0;font-size:.86rem;font-weight:500;line-height:1.2;color:var(--encre);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.og-outil .og-point{margin-left:auto}

/* ----------------------------------------------------------------- outils cités en toutes lettres (sans logo libre) */
.og-f-corps{display:grid;gap:.5rem;min-width:0}
.og-aussi{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;min-width:0}
.og-aussi-t{font-size:.8rem;font-weight:600;color:var(--doux);white-space:nowrap}
.og-textes{display:flex;flex-wrap:wrap;gap:.3rem .35rem;min-width:0}
.og-t{display:inline-flex;align-items:center;gap:.45em;padding:.28em .7em;border-radius:999px;font-size:.84rem;font-weight:500;line-height:1.3;
  color:var(--encre);background:var(--blanc);border:1px solid var(--ligne)}
.og-t .og-point{width:7px;height:7px;box-shadow:0 0 0 2px var(--ok-pale)}
.og-outil[hidden],.og-t[hidden],.og-grille[hidden],.og-aussi[hidden]{display:none}

/* ----------------------------------------------------------------- recherche (page des outils, posée par le script) */
.og-cherche{display:grid;gap:.4rem;max-width:34rem}
.og-cherche[hidden]{display:none}
.og-cherche label{font-size:.86rem;font-weight:600;color:var(--encre)}
.og-cherche input{width:100%;min-height:48px;padding:.6em .95em;border-radius:12px;border:1px solid var(--ligne-2);background:var(--blanc);
  font:500 1rem/1.3 var(--ff);color:var(--encre);box-shadow:var(--o-1);transition:border-color var(--vite),box-shadow var(--vite)}
.og-cherche input::placeholder{color:var(--doux);font-weight:400}
.og-cherche input:focus-visible{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)}
.og-vide{padding:1rem 1.2rem;border-radius:var(--r);background:var(--blanc);border:1px dashed var(--ligne-2);color:var(--texte);font-size:.95rem}
.og-vide[hidden]{display:none}

/* ----------------------------------------------------------------- vitrine de l'accueil : une rangée de logos, puis le lien */
.og-vitrine{grid-template-columns:repeat(6,minmax(0,1fr))}
.og-vers{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;color:var(--texte);font-size:.95rem}
.og-vers .btn .ico{width:1em;height:1em}
.og-apres{display:grid;gap:.8rem;justify-items:start;margin-top:.3rem}
.og-autre{color:var(--texte);font-size:.95rem}
.og-ordi{display:inline-flex;align-items:flex-start;gap:.5em;line-height:1.45;font-size:.95rem;font-weight:600;color:var(--encre);padding:.5em .85em;
  border-radius:10px;background:var(--bleu-pale);border:1px solid var(--bleu-ligne);max-width:none}
.og-ordi .ico{margin-top:.15em;color:var(--bleu)}
.og-marques{font-size:.8rem}

/* Bureau : le nom de la famille à gauche, ses outils à droite, comme un tableau. */
@media (min-width:981px){
  .og-famille{grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:.55rem 1.4rem;align-items:start}
  .og-f-tete{min-height:var(--og-cell);flex-wrap:wrap;align-content:center;gap:.15rem .5rem}
}

/* ----------------------------------------------------------------- métiers */
.og-metiers{margin-top:clamp(2.5rem,5vw,4rem)}
.og-m-tete{display:grid;gap:.5rem;margin-bottom:clamp(1.2rem,2.4vw,1.8rem)}
.og-m-tete h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em}
.og-m-tete p{color:var(--texte);max-width:62ch}
.og-m-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.og-metier{display:flex;flex-direction:column;gap:.55rem;min-width:0;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:1.2rem 1.2rem 1.25rem;box-shadow:var(--o-1);transition:transform var(--moyen) var(--ease),box-shadow var(--moyen) var(--ease),border-color var(--moyen)}
.og-metier:hover{transform:translateY(-3px);box-shadow:var(--o-3);border-color:var(--ligne-2)}
.og-pict{width:44px;height:44px;border-radius:12px;background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(36,71,245,.12)}
.og-pict .ico{width:22px;height:22px}
.og-metier h4{font:650 1.02rem/1.25 var(--ff-d);letter-spacing:-.014em;color:var(--encre);margin-top:.2rem}
.og-metier p{color:var(--texte);font-size:.92rem;line-height:1.5}

@media (max-width:980px){
  .og-m-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .og-vitrine{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .og-intro{grid-template-columns:1fr}
  .og-cle{border-left:0;padding-left:0;border-top:1px solid var(--ligne);padding-top:1.1rem}
}
@media (max-width:640px){
  .og-mur{--og-cell:44px;--og-gap:.4rem}
  /* Filtres : une seule ligne qui défile, bord à bord, sans barre de défilement. */
  .og-pret .og-filtres{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad)*-1);padding:6px var(--pad);margin-block:-4px;scroll-padding-inline:var(--pad)}
  .og-pret .og-filtres::-webkit-scrollbar{display:none}
  .og-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Téléphone : la vitrine de l'accueil tient en six rangées de deux, sans défilement de côté. */
  .og-vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}
  .og-vers .btn{width:100%;justify-content:center}
  .og-outil{padding-right:.55rem;gap:.45rem}
  .og-nom{font-size:.8rem}
  /* Métiers au téléphone : l'icône à gauche, le métier et sa phrase à droite (carte plus basse, douze cartes à suivre). */
  .og-m-grille{gap:.6rem}
  .og-metier{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.2rem .85rem;align-items:start;padding:.95rem 1rem 1rem}
  .og-pict{grid-row:1/3}
  .og-metier h4{margin-top:.1rem}
  .og-metier p{font-size:.9rem;line-height:1.45}
}
@media (max-width:560px){
  .og-m-grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .og-filtre,.og-metier,.og-cherche input{transition:none}
  .og-metier:hover{transform:none}
  .og-pret .og-filtres,.og-pret .og-grille{scroll-behavior:auto;scroll-snap-type:none}
}
@media print{
  .og-filtres,.og-cherche,.og-vide{display:none!important}
  .og-famille[hidden]{display:grid!important}
  .og-outil[hidden],.og-aussi[hidden]{display:flex!important}
  .og-grille[hidden]{display:grid!important}
  .og-t[hidden]{display:inline-flex!important}
}

/* ---- plateformes.css ---- */
/* ----------------------------------------------------------------- plateformes métier + VIGIE sur quatre appareils (19/09/2026)
   Module : build/sec_plateformes.py · préfixe pf- · aucun script. Les deux grands blocs réutilisent .projet.large, .visuel,
   .lueur, .texte, .etiq, .tags et la composition .c-duo de site.css (donc son parallaxe et ses survols). */

/* tablette à image : complète .ipad / .ipad-ecran de site.css (coque sombre, écran 1180 × 820) */
.pf-ipad{box-shadow:0 0 0 .1vw #55575c,inset 0 0 0 .1vw rgba(255,255,255,.10),0 2.2vw 3.2vw -1vw rgba(8,10,18,.42)}
.pf-ipad-ecran{background:#000}
.pf-ipad-ecran>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.pf-ipad-cam{position:absolute;left:50%;top:1.25%;width:.75%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#1b2130;box-shadow:inset 0 0 .1vw #3a4a6a}
.pf-ipad-reflet{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04) 100%)}
.pf-ipad--portrait{padding:3.7%;border-radius:7.4%/5.2%}
.pf-ipad--portrait .pf-ipad-ecran{aspect-ratio:820/1180;border-radius:3.8%/2.6%}
.pf-ipad--portrait .pf-ipad-cam{top:.95%;width:1.05%}

/* ----------------------------------------------------------------- VIGIE : une famille de quatre appareils sur une ligne de sol */
.pf-vigie{position:relative;border-radius:22px;overflow:hidden;overflow:clip;background:var(--blanc);border:1px solid var(--ligne);box-shadow:var(--o-2)}
.pf-vg-scene{position:relative;overflow:hidden;overflow:clip;padding:clamp(1.2rem,2.6vw,2.2rem) clamp(.6rem,2vw,2rem) 0;background:linear-gradient(180deg,var(--gris) 0%,#EEF1F6 100%)}
.pf-vg-scene::before{content:"";display:block;width:100%;max-width:1000px;margin-inline:auto;aspect-ratio:1/.4}
.pf-vg-lueur{position:absolute;inset:0;pointer-events:none;background:radial-gradient(48% 60% at 46% 52%,rgba(36,71,245,.11),transparent 70%)}
.pf-vg-sol{position:absolute;left:50%;bottom:6.5%;width:min(94%,1000px);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--ligne-2) 14%,var(--ligne-2) 86%,transparent)}
/* les poses se placent dans un cadre centré de 1000 px au plus : --g est le bord gauche de ce cadre, --l sa largeur */
.pf-vg-scene{--l:min(100% - 2 * clamp(.6rem,2vw,2rem),1000px);--g:calc((100% - var(--l)) / 2)}
.pf-vg-pose{position:absolute;bottom:6.5%;transition:transform .6s var(--ease)}
.pf-vg-tab{left:calc(var(--g) + var(--l) * .045);width:calc(var(--l) * .172);z-index:2}
.pf-vg-ordi{left:calc(var(--g) + var(--l) * .195);width:calc(var(--l) * .54);z-index:1}
.pf-vg-tel{left:calc(var(--g) + var(--l) * .722);width:calc(var(--l) * .104);z-index:3}
.pf-vg-montre{left:calc(var(--g) + var(--l) * .862);width:calc(var(--l) * .092);z-index:3}
@media (hover:hover){
  .pf-vigie:hover .pf-vg-tel{transform:translateY(-6px)}
  .pf-vigie:hover .pf-vg-montre,.pf-vigie:hover .pf-vg-tab{transform:translateY(-4px)}
}
.pf-vg-legende{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem 1.4rem;padding:1rem clamp(1rem,2.4vw,2rem) 1.1rem;border-top:1px solid var(--ligne);background:var(--blanc)}
.pf-vg-themes{display:flex;flex-wrap:wrap;gap:.4rem}
.pf-vg-theme{display:inline-flex;align-items:center;gap:.45em;font:500 .8rem/1.2 var(--ff);color:var(--doux);padding:.42em .7em;border-radius:9px;border:1px solid var(--ligne-2);background:var(--blanc);white-space:nowrap}
.pf-vg-theme::before{content:"";flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--pf-t,var(--bleu));box-shadow:inset 0 0 0 1px rgba(11,13,18,.12)}
.pf-vg-theme b{font-weight:600;color:var(--encre)}
.pf-vg-reseau{--pf-t:#35B59B}.pf-vg-borealis{--pf-t:#7C6BE6}.pf-vg-jupiter{--pf-t:#C49A5A}.pf-vg-terre{--pf-t:#2F72D6}
.pf-vg-perso{display:inline-flex;align-items:flex-start;gap:.55em;max-width:none;font-size:.9rem;line-height:1.45;color:var(--encre);padding:.55em .9em;border-radius:10px;background:var(--bleu-pale);border:1px solid var(--bleu-ligne)}
.pf-vg-perso .ico{margin-top:.17em;color:var(--bleu)}
.pf-vg-perso b{color:var(--bleu-fonce)}
@media (max-width:640px){
  .pf-vg-scene::before{aspect-ratio:1/.5}
  .pf-vg-tab{left:var(--g);width:calc(var(--l) * .205)}
  .pf-vg-ordi{left:calc(var(--g) + var(--l) * .135);width:calc(var(--l) * .6)}
  .pf-vg-tel{left:calc(var(--g) + var(--l) * .725);width:calc(var(--l) * .128)}
  .pf-vg-montre{left:calc(var(--g) + var(--l) * .875);width:calc(var(--l) * .125)}
  .pf-vg-legende{padding:.9rem 1rem 1rem}
}

/* ----------------------------------------------------------------- section « Plateformes métier » : deux grands blocs alternés */
.pf-blocs{display:grid;gap:1.1rem}
.pf-bloc .visuel{align-items:center;padding-bottom:clamp(1.4rem,3vw,2.6rem)}
.pf-bloc .pf-entete{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.25rem}
.pf-pict{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bleu-pale);color:var(--bleu);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(36,71,245,.12)}
.pf-pict .ico{width:22px;height:22px}
.pf-bloc .btn-s{min-height:44px}
.pf-note-demo{align-self:center;font-size:.82rem;color:var(--doux)}
/* suivi immobilier : la tablette tient la place de l'ordinateur, le téléphone passe à gauche */
.c-duo.pf-c-immo .p-mbp{left:auto;right:0;width:80%;top:5%}
.c-duo.pf-c-immo .p-iph{right:auto;left:0;width:22.5%;top:15%}
@media (min-width:981px){
  .projet.large.pf-inverse{grid-template-columns:1fr 1.55fr}
  .projet.large.pf-inverse .visuel{order:2}
  .projet.large.pf-inverse .texte{border-left:0;border-right:1px solid var(--ligne)}
}
.pf-devis{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .9rem;max-width:none;margin-top:1.5rem;font-size:.95rem;color:var(--texte)}
.pf-devis .lien{min-height:44px}

@media (prefers-reduced-motion:reduce){
  .pf-vg-pose{transition:none}
  .pf-vigie:hover .pf-vg-pose{transform:none}
}