/* OPAAL : styles du site (thème enfant de Twenty Twenty-Five).
   Concept « le plan » : la machine dessinée comme une pièce, des cotes, le O posé sur son trait à pleine échelle.
   Règles : l'orange est réservé au diagnostic et aux repères ; le mono sert aux mesures et aux données.
   Toutes les classes du site commencent par « o- ». */

:root{
  --o-marine:#142B54; --o-nuit:#0B1630; --o-marine-trait:#24365C; --o-marine-doux:#1D3866;
  --o-signal:#F0641E; --o-signal-survol:#F57D40; --o-signal-texte:#C2410C; --o-signal-pale:#FDEBDF;
  --o-calque:#F4F6F9; --o-blanc:#FFFFFF; --o-encre:#1E2B45; --o-acier:#5A6B85; --o-trait:#D5DCE6; --o-trait-doux:#E8EDF5;
  --o-sur-marine:#D3DBE8; --o-sur-marine-fort:#F4F6F9; --o-sur-marine-doux:#9AA8BF;
  --o-vert:#1F6B4A; --o-vert-pale:#E2F1EA; --o-ambre:#8A5A00; --o-ambre-pale:#FBF0D9; --o-rouge:#A3271B; --o-rouge-pale:#FBE3E1;
  --o-display:Jost,Futura,"Century Gothic",sans-serif;
  --o-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --o-mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --o-r:6px;
  --o-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --o-oui:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --o-non:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth;scrollbar-color:var(--o-acier) var(--o-calque)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
::selection{background:var(--o-signal);color:var(--o-nuit)}
:where(.o-scope) :focus-visible{outline:3px solid var(--o-signal);outline-offset:3px;border-radius:2px}
[id]{scroll-margin-top:84px}

/* Remise à zéro des marges de WordPress dans les blocs du site : l'espacement vient des grilles ci-dessous */
.o-scope :is(h1,h2,h3,p,ul,ol,figure,details,.wp-block-buttons,.wp-block-group){margin-block:0}
.o-scope .is-layout-flow > *,.o-scope .is-layout-constrained > *{margin-block-start:0;margin-block-end:0}
.o-scope :is(h1,h2,h3){font-family:var(--o-display);font-weight:500;color:var(--o-marine);text-wrap:balance}
.o-scope h2{font-size:clamp(32px,4.6vw,62px);line-height:1.04;letter-spacing:-.02em}
.o-scope h3{font-size:20px;line-height:1.3;letter-spacing:-.005em}
.o-scope p{font-size:inherit}
.o-scope mark.has-inline-color{background:transparent}

.o-wrap{max-width:1180px;margin-inline:auto !important;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px));box-sizing:border-box;width:100%}
.o-sec{padding-block:clamp(72px,9vw,128px)}
.o-calque{background:var(--o-calque)}
.o-tete{display:grid;gap:18px;max-width:880px;margin-bottom:clamp(36px,5vw,64px) !important}
.o-tete p{color:var(--o-acier);font-size:19px;max-width:40em}

/* Boutons (bloc Bouton de WordPress) */
.o-scope .wp-block-button__link{transition:background .15s,border-color .15s;text-decoration:none}
.o-scope .o-fleche .wp-block-button__link{display:inline-flex;align-items:center;gap:10px}
.o-scope .o-fleche .wp-block-button__link::after{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--o-fleche) center/contain no-repeat;mask:var(--o-fleche) center/contain no-repeat;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.o-scope .o-fleche .wp-block-button__link:hover::after{transform:translateX(4px)}
.wp-block-button.is-style-clair .wp-block-button__link{background:transparent;color:var(--o-sur-marine-fort);border:2px solid var(--o-sur-marine-doux)}
.wp-block-button.is-style-clair .wp-block-button__link:hover{background:transparent;color:var(--o-sur-marine-fort);border-color:var(--o-sur-marine-fort)}
.wp-block-button.is-style-nuit .wp-block-button__link{background:var(--o-nuit);color:var(--o-sur-marine-fort)}
.wp-block-button.is-style-nuit .wp-block-button__link:hover{background:var(--o-marine);color:var(--o-sur-marine-fort)}
.wp-block-button.is-style-outline .wp-block-button__link{background:var(--o-blanc);color:var(--o-marine);border:2px solid var(--o-trait)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--o-marine);color:var(--o-marine)}
.o-scope .o-lien a,.o-scope a.o-lien{font-weight:600;color:var(--o-marine);text-underline-offset:5px;text-decoration:underline;text-decoration-color:var(--o-signal);text-decoration-thickness:2px}

/* WordPress ajoute un espace entre l'en-tête, le contenu et le pied de page : on le retire, les sections se touchent */
.wp-site-blocks > header.wp-block-template-part,.wp-site-blocks > main.o-scope,.wp-site-blocks > footer.wp-block-template-part{margin-block-start:0}

/* En-tête : marine, collé en haut, dans la continuité du héros */
header.wp-block-template-part:has(.o-header){position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50}
.o-header{position:relative;background:var(--o-marine);color:var(--o-sur-marine)}
/* Sous la barre, une règle de cote au lieu d'un simple trait (1.9.12) : la barre se détache du héros marine,
   dans l'esprit « plan » du site. Une ligne, des graduations courtes tous les 24 px et longues tous les 120 px. */
.o-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9px;pointer-events:none;background-image:linear-gradient(rgba(211,219,232,.42),rgba(211,219,232,.42)),repeating-linear-gradient(90deg,rgba(211,219,232,.42) 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,rgba(211,219,232,.28) 0 1px,transparent 1px 24px);background-size:100% 1px,100% 9px,100% 5px;background-position:0 100%;background-repeat:no-repeat,repeat-x,repeat-x}
.o-header-barre{display:flex !important;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.o-logo{display:block;width:112px;height:auto}
.o-logo-lien{display:block;line-height:0}
.o-header-droite{display:flex !important;align-items:center;gap:28px}
.o-header .wp-block-navigation{font-size:16px;gap:28px}
.o-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--o-sur-marine);text-decoration:none}
.o-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{color:var(--o-sur-marine-fort);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--o-signal)}
.o-header .wp-block-navigation__responsive-container-open{color:var(--o-sur-marine-fort)}
.o-header .wp-block-navigation .wp-block-navigation__submenu-icon{color:var(--o-sur-marine);width:.7em;height:.7em;margin-left:4px}
.o-header .wp-block-navigation .wp-block-navigation__submenu-container{background:var(--o-nuit) !important;color:var(--o-sur-marine) !important;border:1px solid var(--o-marine-trait) !important;border-radius:10px;padding:8px 0 !important;min-width:270px !important;box-shadow:0 26px 50px -22px rgba(5,12,28,.75);top:calc(100% + 10px) !important}
.o-header .wp-block-navigation .wp-block-navigation__submenu-container::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.o-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content{display:block;padding:10px 18px;font-size:15px;color:var(--o-sur-marine)}
.o-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover{background:var(--o-marine);color:var(--o-sur-marine-fort);text-decoration:none}
.o-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{background:transparent !important;border:0 !important;box-shadow:none;padding:4px 0 10px 14px !important;min-width:0 !important}
.o-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content{font-size:17px;padding:6px 0;color:var(--o-sur-marine)}
.o-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--o-marine) !important;color:var(--o-sur-marine-fort) !important}
.o-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--o-sur-marine-fort);font-size:22px}
.o-header .o-header-cta .wp-block-button__link{padding:11px 16px;font-size:15px}
@media (max-width:520px){.o-header .o-header-cta{display:none}.o-logo{width:100px}}

/* Héros */
.o-hero{background:var(--o-marine);color:var(--o-sur-marine)}
.o-hero-grille{display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px clamp(32px,5vw,72px);align-items:start;padding-block:clamp(28px,3.5vw,52px) 40px}
/* Le dessin et la plaque deviennent des cases de la grille : le dessin à droite du texte, la plaque en dessous, sur toute la largeur */
.o-hero-texte{grid-column:1;grid-row:1}
.o-plan-zone{grid-column:2;grid-row:1;min-width:0}
.o-plaque.o-plaque{grid-column:1/-1;grid-row:2;margin-top:0}
.o-hero-texte{display:grid !important;gap:24px;min-width:0}
.o-scope .o-hero h1{color:var(--o-sur-marine-fort);font-size:clamp(44px,6.4vw,90px);line-height:.98;letter-spacing:-.025em}
.o-scope .o-slogan{font:400 clamp(21px,2.1vw,29px)/1.3 var(--o-display);color:var(--o-sur-marine-fort);max-width:22em;margin-top:-6px !important}
.o-scope .o-lede{font-size:clamp(18px,1.5vw,20px);line-height:1.55;max-width:31em;color:var(--o-sur-marine)}
.o-scope .o-lede strong{color:var(--o-sur-marine-fort);font-weight:600}
.o-cta{display:grid !important;gap:14px;justify-items:start}
.o-scope ul.o-rassure{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14.5px;color:var(--o-sur-marine-doux)}
.o-scope ul.o-rassure li{display:inline-flex;align-items:center;gap:8px;margin:0}
.o-scope ul.o-rassure li::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--o-signal)}
.o-scope .o-hero .o-lien a{color:var(--o-sur-marine-fort)}

/* Le plan de la LB-500 et sa plaque */
.o-plan{margin:0;display:contents}
.o-plan-dessin{display:block;width:100%;height:auto}
.o-plan-dessin .o-repere circle{transition:fill .2s}
.o-plan-dessin .o-repere.actif circle{fill:var(--o-sur-marine-fort)}
/* Le zoom sur la plaque : une fois à l'arrivée du dessin, puis au clic sur « Voir la plaque CE » */
.o-plan-zone{position:relative}
.o-plan-dessin .o-repere{transition:opacity .35s ease-out}
.o-plan.o-zoom .o-plan-dessin .o-repere{opacity:0}
.o-plan-zoom{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;min-height:40px;border:1px solid var(--o-marine-trait);border-radius:999px;background:var(--o-nuit);color:var(--o-sur-marine-fort);font:500 14px/1 var(--o-body);cursor:pointer;transition:border-color .2s}
.o-plan-zoom::before{content:"";width:15px;height:15px;background:var(--o-signal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.o-plan-zoom:hover{border-color:var(--o-signal)}
.o-plan:not(.o-js) .o-plan-zoom{display:none}
.o-scope .o-plan-legende{position:absolute;left:10px;right:10px;bottom:10px;padding:11px 14px;border-radius:6px;background:rgba(11,22,48,.9);color:var(--o-sur-marine-fort);font-size:14.5px;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .35s ease-out,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.o-plan.o-zoom .o-plan-legende{opacity:1;transform:none;transition-delay:.6s}
.o-plaque{background:var(--o-calque);color:var(--o-encre);border-radius:6px;padding:22px 24px 20px;position:relative;margin-top:20px;box-shadow:0 24px 44px -26px rgba(5,12,28,.75);display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 26px;align-items:start}
.o-rivet{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--o-trait);box-shadow:inset 0 1px 1px rgba(20,43,84,.35)}
.o-r1{top:9px;left:9px}.o-r2{top:9px;right:9px}.o-r3{bottom:9px;left:9px}.o-r4{bottom:9px;right:9px}
.o-plaque-tete{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font:500 12px/1 var(--o-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--o-acier);border-bottom:1px solid var(--o-trait);padding-bottom:12px;margin-bottom:6px}
.o-plaque-chiffre{display:grid;gap:4px;padding-right:22px;border-right:1px solid var(--o-trait)}
.o-plaque-chiffre b{font:500 64px/.9 var(--o-display);color:var(--o-marine);font-variant-numeric:tabular-nums}
.o-plaque-chiffre span{font-size:14.5px;line-height:1.35;max-width:9em}
.o-plaque ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.4}
.o-plaque li{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:start;border-radius:4px;padding:2px 4px;margin:-2px -4px;transition:background .2s}
.o-plaque li.actif{background:var(--o-signal-pale)}
.o-plaque li .o-n{width:22px;height:22px;border-radius:50%;background:var(--o-signal);color:var(--o-nuit);font:600 12.5px/22px var(--o-display);text-align:center}
.o-nouv{font:500 11px/1 var(--o-mono);color:var(--o-signal-texte);background:var(--o-blanc);border:1px solid var(--o-signal);padding:2px 6px;border-radius:3px;margin-left:4px;white-space:nowrap}
.o-plaque .o-plus{grid-column:2;font-size:13.5px;color:var(--o-acier);margin:0}
@media (min-width:1001px){.o-plaque ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px}.o-plaque .o-plus{grid-column:2}}
@media (max-width:1000px){.o-hero-grille{grid-template-columns:1fr}.o-plan-zone{grid-column:1;grid-row:auto;max-width:540px}.o-plaque.o-plaque{grid-column:1;grid-row:auto;max-width:540px}}
@media (max-width:560px){.o-plaque{grid-template-columns:1fr;padding:20px}.o-plaque-chiffre{border-right:0;padding-right:0;grid-template-columns:auto 1fr;align-items:end;gap:12px}.o-plaque .o-plus{grid-column:1}}

/* La cote du temps qui reste */
.o-cote{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;gap:18px;align-items:center;padding-block:28px 40px;border-top:1px solid var(--o-marine-trait);margin-top:24px;font-size:15px}
.o-cote-bout{color:var(--o-sur-marine-doux)}
.o-cote-fin{color:var(--o-sur-marine);text-align:right}
.o-cote-fin b{color:var(--o-sur-marine-fort);font-weight:600}
.o-cote-fin a{color:inherit;text-decoration:none}
.o-cote-fin a:hover b,.o-cote-fin a:hover .o-detail{text-decoration:underline;text-decoration-color:var(--o-signal);text-underline-offset:4px}
.o-plaque .o-plus a{color:var(--o-marine);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--o-signal)}
.o-cote-ligne{position:relative;height:1.5px;background:var(--o-sur-marine-doux)}
.o-cote-ligne::before,.o-cote-ligne::after{content:"";position:absolute;top:-7px;width:1.5px;height:16px;background:var(--o-sur-marine-doux)}
.o-cote-ligne::before{left:0}.o-cote-ligne::after{right:0}
.o-cote-val{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--o-marine);padding:0 12px;font:500 15px/1 var(--o-mono);color:var(--o-signal-survol);white-space:nowrap}
.o-cote.passee{grid-template-columns:1fr}
@media (max-width:640px){.o-cote{gap:10px;font-size:13.5px}.o-cote-fin .o-detail{display:none}}

/* Disponible dès maintenant (1.9.13) : juste sous le haut de page, ce que le visiteur peut utiliser aujourd'hui.
   Le site joue la boussole en attendant l'ouverture ; la carte du diagnostic porte le liseré orange (couleur réservée au diagnostic). */
.o-maintenant{background:var(--o-calque);padding-block:clamp(40px,5vw,64px)}
.o-maintenant-grille{display:grid !important;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:clamp(24px,4vw,56px);align-items:start}
.o-maintenant-tete{display:grid !important;gap:10px}
.o-scope .o-maintenant h2{font-size:clamp(26px,2.6vw,36px);line-height:1.1}
.o-scope .o-maintenant-tete p{font-size:16px;line-height:1.5;color:var(--o-acier)}
.o-scope ul.o-maintenant-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.o-scope .o-maintenant-liste li{margin:0}
.o-maintenant-liste a{position:relative;display:block;height:100%;box-sizing:border-box;padding:18px 50px 18px 20px;background:var(--o-blanc);border:1px solid var(--o-trait);border-radius:10px;text-decoration:none;color:var(--o-acier);font-size:15px;line-height:1.45;transition:border-color .2s}
.o-maintenant-liste a b{display:block;margin-bottom:4px;font:500 19px/1.25 var(--o-display);color:var(--o-marine)}
.o-maintenant-liste a::after{content:"";position:absolute;right:18px;top:20px;width:20px;height:20px;background:var(--o-marine);-webkit-mask:var(--o-fleche) center/contain no-repeat;mask:var(--o-fleche) center/contain no-repeat;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.o-maintenant-liste a:hover{border-color:var(--o-marine)}
.o-maintenant-liste a:hover::after{transform:translateX(4px)}
.o-maintenant-liste li.o-si-diag a{border-color:var(--o-signal);box-shadow:inset 4px 0 0 var(--o-signal)}
.o-maintenant-liste li.o-si-diag a::after{background:var(--o-signal-texte)}
@media (max-width:900px){.o-maintenant-grille{grid-template-columns:1fr}}
@media (max-width:560px){.o-scope ul.o-maintenant-liste{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.o-maintenant-liste a,.o-maintenant-liste a::after{transition:none}}

/* Le problème : les 4 livrables du marquage CE. Le n° 1 (analyse des risques et exigences essentielles)
   prend la moitié de la largeur, en marine : c'est là qu'OPAAL intervient. Les 3 autres en découlent. */
.o-livrables{margin:0;display:grid;gap:10px}
.o-livrables-cotes,.o-livrables-liste{display:grid;grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr));column-gap:14px}
.o-livrables-cotes{height:34px;align-items:center}
.o-livrables-cote{position:relative;height:2px;background:var(--c)}
.o-livrables-cote::before,.o-livrables-cote::after{content:"";position:absolute;top:-8px;width:2px;height:18px;background:var(--c)}
.o-livrables-cote::before{left:0}.o-livrables-cote::after{right:0}
.o-livrables-cote span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--o-blanc);padding:0 12px;font:500 14px/1 var(--o-mono);color:var(--t);white-space:nowrap}
.o-livrables-cote-gros{--c:var(--o-signal);--t:var(--o-signal-texte)}
.o-livrables-cote-reste{--c:var(--o-trait);--t:var(--o-acier);grid-column:2/span 3}
.o-livrables-liste{list-style:none;margin:0;padding:0}
.o-livrable{position:relative;margin:0;display:flex;flex-direction:column;gap:10px;padding:22px 20px 24px;border:2px solid var(--o-marine);border-radius:12px;background:var(--o-blanc);min-width:0}
.o-livrable-num{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;border:2px solid var(--o-marine);font:500 15px/1 var(--o-display);color:var(--o-marine);box-sizing:border-box}
.o-livrable-ill{width:64px;height:auto;margin-top:6px}
.o-scope .o-livrable h3{font-size:19px;line-height:1.25}
.o-scope .o-livrable p{font-size:15px;line-height:1.45;color:var(--o-acier)}
.o-livrable-principal{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:24px;row-gap:14px;padding:26px 28px 28px;border:0;background:var(--o-marine);color:var(--o-sur-marine)}
.o-livrable-haut{grid-column:1;grid-row:1;align-self:start;display:flex;align-items:center;gap:12px}
.o-livrable-principal .o-livrable-num{border:0;background:var(--o-signal);color:var(--o-nuit)}
.o-livrable-tag{background:var(--o-signal);color:var(--o-nuit);font:600 14.5px/1 var(--o-body);padding:9px 12px;border-radius:5px;white-space:nowrap}
.o-livrable-matrice{grid-column:2;grid-row:1;width:clamp(84px,8vw,104px);margin:0;align-self:start}
.o-scope .o-livrable-principal h3{grid-column:1/-1;font-size:clamp(24px,2.5vw,34px);line-height:1.1;letter-spacing:-.015em;color:var(--o-sur-marine-fort)}
.o-livrable-liste{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px;line-height:1.4}
.o-livrable-liste li{position:relative;padding-left:18px;margin:0}
.o-livrable-liste li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--o-signal)}
.o-scope .o-livrables figcaption{font-size:16px;color:var(--o-encre);max-width:48em;margin-top:10px}
@media (max-width:1000px){
  .o-livrables-cotes{display:none}
  .o-livrables-liste{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .o-livrable-principal{grid-column:1/-1}
}
@media (max-width:640px){
  .o-livrables-liste{grid-template-columns:1fr;gap:10px}
  .o-livrable:not(.o-livrable-principal){display:grid;grid-template-columns:auto 64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;padding:16px}
  .o-livrable:not(.o-livrable-principal) .o-livrable-num{grid-row:1/span 2}
  .o-livrable:not(.o-livrable-principal) .o-livrable-ill{grid-row:1/span 2;margin:0}
  .o-livrable:not(.o-livrable-principal) h3,.o-livrable:not(.o-livrable-principal) p{grid-column:3}
  .o-livrable-principal{padding:22px 20px}
  .o-livrable-tag{font-size:13px;padding:8px 10px}
  .o-livrable-principal{grid-template-columns:1fr auto}
  .o-livrable-matrice{width:76px}
}

/* Ce que la loi demande : 4 étapes, et ce qui coince à chacune */
.o-etapes-intro{display:grid !important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center;margin-bottom:clamp(36px,5vw,64px) !important}
.o-etapes-intro .o-tete{margin-bottom:0 !important}
.o-etapes-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:30% 50%;border-radius:12px}
@media (max-width:860px){.o-etapes-intro{grid-template-columns:1fr}.o-etapes-photo img{aspect-ratio:16/10}}
.o-etapes{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.5vw,32px)}
.o-etape{display:grid !important;grid-template-rows:auto auto auto 1fr;gap:6px;align-content:start;padding-top:18px;border-top:3px solid var(--o-marine)}
.o-scope .o-etape h3{font-size:clamp(24px,2.2vw,30px)}
.o-scope .o-q{font-style:italic;font-size:16.5px}
.o-scope .o-loi{margin-top:6px !important;font-size:15px;color:var(--o-encre)}
.o-scope .o-loi strong{font-weight:600;color:var(--o-marine)}
.o-scope .o-coince{position:relative;align-self:start;margin-top:10px !important;padding:14px 16px 14px 42px;background:var(--o-blanc);border:1px solid var(--o-trait);border-radius:6px;font-size:15px;line-height:1.5;color:var(--o-encre)}
.o-scope .o-coince::before{content:"";position:absolute;left:15px;top:17px;width:15px;height:15px;background:var(--o-rouge);-webkit-mask:var(--o-non) center/contain no-repeat;mask:var(--o-non) center/contain no-repeat}
.o-scope .o-coince strong{color:var(--o-rouge);font-weight:600}
.o-scope .o-dispo{display:inline-block;justify-self:start;font:500 11.5px/1 var(--o-mono);padding:5px 8px;border-radius:4px;white-space:nowrap;background:#173C33;color:#9FDCBE}
@media (max-width:1000px){.o-etapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}}
@media (max-width:560px){.o-etapes{grid-template-columns:1fr;gap:34px}}

/* La démo, dans sa section : le titre à gauche, la fenêtre à droite */
.o-demo-grille{display:grid !important;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,5vw,64px);align-items:start}
.o-demo-tete{position:sticky;top:110px;margin-bottom:0 !important}
.o-scope .o-demo-tete h2{font-size:clamp(32px,3.4vw,48px);line-height:1.06}
@media (max-width:1000px){.o-demo-grille{grid-template-columns:1fr;gap:0}.o-demo-tete{position:static;margin-bottom:clamp(28px,4vw,40px) !important}}

/* La solution : un schéma à plat. Votre machine et les textes entrent, l'IA d'OPAAL les relie,
   les 4 étapes s'enchaînent, le dossier sort. Puis les 3 bénéfices, dans une même bande. */
.o-icones{position:absolute;width:0;height:0;overflow:hidden}
.o-flux{display:grid;justify-items:center}
.o-scope .o-flux{margin-bottom:clamp(40px,6vw,72px)}
.o-flux-ic{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--o-calque);color:var(--o-marine);position:relative}
.o-flux-ic svg{width:26px;height:26px;fill:currentColor}
.o-flux-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(32px,72px) auto minmax(32px,72px) minmax(0,1fr);align-items:center;width:100%;max-width:1060px}
.o-flux-entree{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;background:var(--o-blanc);border-radius:14px;padding:18px 20px}
.o-flux-entree .o-flux-ic{grid-row:1/span 2}
.o-flux-entree b{font:500 19px/1.2 var(--o-display);color:var(--o-marine)}
.o-flux-entree > span:last-child{font-size:14px;line-height:1.4;color:var(--o-acier)}
.o-flux-lien{position:relative;height:2px;background:var(--o-marine)}
.o-flux-lien::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:6px solid transparent}
.o-flux-lien-d::after{right:-3px;border-left:10px solid var(--o-marine);border-right:0}
.o-flux-lien-g::after{left:-3px;border-right:10px solid var(--o-marine);border-left:0}
.o-flux-ia{box-sizing:border-box;display:grid;justify-items:center;text-align:center;gap:8px;width:clamp(220px,24vw,280px);padding:24px 22px;border-radius:18px;background:var(--o-signal);color:var(--o-nuit)}
.o-flux-ia .o-flux-ic{width:60px;height:60px;background:var(--o-nuit);color:var(--o-signal-survol)}
.o-flux-marque svg{fill:none !important}
.o-flux-ia .o-flux-ic svg{width:30px;height:30px}
.o-flux-ia b{font:500 23px/1.15 var(--o-display)}
.o-flux-ia > span:last-child{font-size:15px;line-height:1.4}
.o-flux-descente{position:relative;width:2px;height:40px;background:var(--o-marine)}
.o-flux-descente::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);border:6px solid transparent;border-top:10px solid var(--o-marine);border-bottom:0}
.o-flux-crochet{position:relative;width:75%;height:18px;margin-top:8px;border:2px solid var(--o-marine);border-bottom:0}
.o-flux-crochet::before,.o-flux-crochet::after{content:"";position:absolute;top:0;width:2px;height:16px;background:var(--o-marine)}
.o-flux-crochet::before{left:calc(100% / 3 - 1px)}.o-flux-crochet::after{left:calc(200% / 3 - 1px)}
.o-flux-crochet-bas{margin-top:0;margin-bottom:0;border-top:0;border-bottom:2px solid var(--o-marine)}
.o-flux-crochet-bas::before,.o-flux-crochet-bas::after{top:auto;bottom:0}
.o-flux-etapes{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.o-flux-etapes li{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:6px;margin:0;padding:0 12px}
.o-flux-etapes li + li::before{content:"";position:absolute;top:34px;left:calc(-50% + 46px);width:calc(100% - 92px);height:2px;background:repeating-linear-gradient(90deg,var(--o-marine) 0 6px,transparent 6px 11px)}
.o-flux-etapes .o-flux-ic{width:70px;height:70px;background:var(--o-blanc)}
.o-flux-etapes .o-flux-ic svg{width:32px;height:32px}
.o-flux-num{position:absolute;top:-3px;right:-3px;width:26px;height:26px;border-radius:50%;background:var(--o-signal);color:var(--o-nuit);font:600 13px/26px var(--o-display);text-align:center}
.o-flux-etapes b{margin-top:6px;font:500 22px/1.2 var(--o-display);color:var(--o-marine)}
.o-flux-etapes li > span:not(.o-flux-ic){font-size:15px;line-height:1.45;color:var(--o-encre);max-width:16em}
.o-flux-ia-note{display:block;margin-top:4px;padding-top:8px;border-top:1px dashed var(--o-trait);font-size:13.5px;line-height:1.45;color:var(--o-acier);max-width:16em}
.o-flux-sortie{display:grid;grid-template-columns:auto auto;gap:3px 16px;align-items:center;margin-top:0;padding:18px 26px 18px 18px;border-radius:14px;background:var(--o-marine);color:var(--o-sur-marine)}
.o-flux-sortie .o-flux-ic{grid-row:1/span 2;background:var(--o-signal);color:var(--o-nuit)}
.o-flux-sortie b{font:500 21px/1.2 var(--o-display);color:var(--o-sur-marine-fort)}
.o-flux-sortie > span:last-child{font-size:14.5px}
.o-benefices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--o-blanc);border-radius:16px}
.o-benefice{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;margin:0;padding:clamp(22px,2.6vw,32px)}
.o-benefice + .o-benefice{border-left:1px solid var(--o-trait)}
.o-benefice .o-flux-ic{grid-row:1/span 2;width:56px;height:56px;background:var(--o-vert-pale);color:var(--o-vert)}
.o-scope .o-benefice h3{font-size:23px;color:var(--o-vert)}
.o-scope .o-benefices-titre{font-size:clamp(24px,2.4vw,32px);margin-bottom:18px !important}
.o-scope .o-benefice p{font-size:16px;line-height:1.5;color:var(--o-encre)}
.o-solution-cta{display:flex !important;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:40px !important}
.o-scope .o-solution-cta p{color:var(--o-acier);font-size:15.5px;max-width:34em}
@media (max-width:900px){
  .o-flux-haut{grid-template-columns:1fr 1fr;gap:14px;max-width:560px}
  .o-flux-ia{grid-column:1/-1;grid-row:2;justify-self:center;width:100%;max-width:340px}
  .o-flux-lien{display:none}
  .o-flux-entree{grid-template-columns:1fr;justify-items:start;padding:16px}
  .o-flux-entree .o-flux-ic{grid-row:auto}
  .o-flux-crochet{display:none}
  .o-flux-etapes{grid-template-columns:1fr;max-width:460px;gap:0;margin:0}
  .o-flux-etapes li{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:16px;row-gap:2px;padding:0 0 22px}
  .o-flux-etapes li .o-flux-ic{grid-row:1/span 3}
  .o-flux-ia-note{grid-column:2}
  .o-flux-etapes b{margin-top:8px}
  .o-flux-etapes li + li::before{top:-22px;left:34px;width:2px;height:22px}
  .o-flux-etapes li::after{content:"";position:absolute;left:34px;top:70px;width:2px;height:calc(100% - 70px);background:var(--o-trait)}
  .o-flux-etapes li:last-child::after{display:none}
  .o-flux-etapes li + li::before{display:none}
  .o-benefices{grid-template-columns:1fr}
  .o-benefice + .o-benefice{border-left:0;border-top:1px solid var(--o-trait)}
}

/* Aperçu du logiciel : la fenêtre « Mes machines › LB-500 » */
.o-apercu{margin:0;display:grid;gap:12px;min-width:0}
.o-ecran{border:1px solid var(--o-trait);border-radius:10px;background:var(--o-blanc);box-shadow:0 26px 50px -28px rgba(20,43,84,.5)}
.o-ecran-barre{border-radius:9px 9px 0 0;background:var(--o-marine);color:var(--o-sur-marine);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;font-size:13.5px}
.o-tag{font:500 12.5px/1 var(--o-mono);background:var(--o-blanc);color:var(--o-signal-texte);padding:4px 7px;border-radius:4px}
.o-ecran-corps{padding:20px 20px 18px;display:grid;gap:14px}
.o-machine-id{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.o-machine-id b{font:500 24px/1 var(--o-display);color:var(--o-marine)}
.o-machine-id span{font-size:14px;color:var(--o-acier)}
.o-avant-signer{background:var(--o-calque);border-radius:6px;padding:12px 14px;font-size:14.5px}
.o-avant-signer b{color:var(--o-signal-texte);font-weight:600}
.o-apercu figcaption{font-size:13.5px;color:var(--o-acier)}
.o-statut{font:500 12px/1 var(--o-mono);padding:5px 8px;border-radius:4px;justify-self:start;white-space:nowrap}
.s-ok{background:var(--o-vert-pale);color:var(--o-vert)}
.s-comp{background:var(--o-ambre-pale);color:var(--o-ambre)}
.s-inad{background:var(--o-rouge-pale);color:var(--o-rouge)}
.s-manq{background:var(--o-trait-doux);color:var(--o-marine)}
.s-app{background:var(--o-trait-doux);color:var(--o-marine)}
.s-couv{background:transparent;color:var(--o-acier);box-shadow:inset 0 0 0 1px var(--o-trait)}

/* Démo cliquable LB-500 : 5 écrans rangés sous Savoir, Faire, Prouver. OPAAL propose en pointillés ;
   un clic valide (la marque se remplit) et passe à l'écran suivant. Le bouton reste à la même place d'un écran à l'autre.
   Sans JavaScript (ou dans l'éditeur), les 5 écrans s'affichent les uns sous les autres. */
.o-scope .o-d-invite{font-size:16.5px;line-height:1.6;color:var(--o-encre);max-width:46em}
.o-d-invite b{color:var(--o-marine);font-weight:600}
.o-d-legende{white-space:nowrap}
.o-d-m{display:inline-block;width:13px;height:13px;margin:0 6px 0 2px;vertical-align:-1px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--o-acier)}
.o-d-m-plein{border:0;background:var(--o-marine)}
.o-demo .o-ecran-corps{gap:16px;padding-bottom:0}
.o-d-onglets{display:flex;flex-wrap:wrap;gap:4px 22px;border-bottom:1px solid var(--o-trait)}
.o-d-groupe{display:grid;gap:4px;align-content:end}
.o-d-groupe-nom{--c:var(--o-trait);position:relative;display:block;font-size:12.5px;line-height:1;color:var(--o-acier);padding:0 3px 7px;border-bottom:1.5px solid var(--c);transition:color .3s ease-out}
.o-d-groupe-nom::before,.o-d-groupe-nom::after{content:"";position:absolute;bottom:-4.5px;width:1.5px;height:7.5px;background:var(--c)}
.o-d-groupe-nom::before{left:0}.o-d-groupe-nom::after{right:0}
.o-d-groupe:has(.o-d-onglet[aria-selected="true"]) .o-d-groupe-nom{--c:var(--o-signal);color:var(--o-marine);font-weight:600}
.o-d-groupe-onglets{display:flex;gap:2px}
.o-d-onglet{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 8px 11px;display:inline-flex;align-items:center;gap:6px;font:500 14.5px/1 var(--o-body);color:var(--o-acier);cursor:pointer;white-space:nowrap;border-radius:0}
.o-d-onglet:hover{color:var(--o-marine)}
.o-d-onglet[aria-selected="true"]{color:var(--o-marine);font-weight:600;border-bottom-color:var(--o-marine)}
.o-d-onglet.fait{color:var(--o-marine)}
.o-d-onglet.fait::after{content:"";width:12px;height:12px;background:var(--o-marine);-webkit-mask:var(--o-oui) center/contain no-repeat;mask:var(--o-oui) center/contain no-repeat}
.o-d-panneaux{display:grid}
.o-d-panneau{display:flex;flex-direction:column;gap:12px;min-width:0}
.o-d-panneau + .o-d-panneau{margin-top:28px;padding-top:24px;border-top:1px solid var(--o-trait)}
.o-demo.o-js .o-d-panneau{grid-area:1/1;margin-top:0;padding-top:0;border-top:0}
.o-demo.o-js .o-d-panneau:not(.actif){visibility:hidden}
.o-demo:not(.o-js) :is(.o-d-onglets,.o-d-pied){display:none}
.o-scope .o-d-titre{margin:0;font:500 20px/1.25 var(--o-display);letter-spacing:-.005em;color:var(--o-marine);text-wrap:balance}
.o-scope .o-d-consigne{font-size:14.5px;line-height:1.5;color:var(--o-encre)}
.o-d-lignes{list-style:none;margin:0;padding:0;display:grid}
.o-d-ligne{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:8px 0;border-bottom:1px solid var(--o-trait-doux);align-items:start}
.o-d-ligne:last-child{border-bottom:0}
.o-d-marque{grid-column:1;grid-row:1/span 3;position:relative;width:16px;height:16px;margin-top:2px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--o-acier);transition:background-color .4s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*110ms),border-color .4s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*110ms)}
.o-d-marque::after{content:"";position:absolute;inset:2.5px;background:var(--o-blanc);-webkit-mask:var(--o-oui) center/contain no-repeat;mask:var(--o-oui) center/contain no-repeat;opacity:0;transform:scale(.3);transition:transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*110ms + 80ms),opacity .2s linear calc(var(--i,0)*110ms + 80ms)}
.o-d-panneau.valide .o-d-marque{background:var(--o-marine);border-color:var(--o-marine);border-style:solid}
.o-d-panneau.valide .o-d-marque::after{opacity:1;transform:none}
.o-d-quoi{grid-column:2;font-weight:600;font-size:14.5px;line-height:1.35;color:var(--o-marine)}
.o-d-val{grid-column:2;font-size:14px;line-height:1.45;color:var(--o-encre)}
.o-d-src{grid-column:2;font-size:12.5px;line-height:1.45;color:var(--o-acier)}
.o-d-ligne > .o-statut,.o-d-num{grid-column:3;grid-row:1/span 3;align-self:start}
.o-d-num{font:500 12.5px/1.5 var(--o-mono);color:var(--o-marine);font-variant-numeric:tabular-nums;white-space:nowrap}
.o-d-note{background:var(--o-calque);border-radius:6px;padding:12px 14px;font-size:14px;line-height:1.55}
.o-d-note b{font-weight:600;color:var(--o-marine)}
.o-d-risque{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--o-acier)}
.o-d-risque svg{width:18px;height:18px;flex:none;color:var(--o-acier)}
.o-d-risque b{margin-left:4px;font:500 12px/1 var(--o-mono);padding:5px 8px;border-radius:4px}
.o-d-eleve{background:var(--o-rouge-pale);color:var(--o-rouge)}
.o-d-accept{background:var(--o-vert-pale);color:var(--o-vert)}
.o-d-pied{position:sticky;bottom:0;z-index:1;margin-top:auto;background:var(--o-blanc);display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 0 14px;border-top:1px solid var(--o-trait)}
.o-scope .o-d-etat{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.4;color:var(--o-acier);flex:1 1 200px}
.o-d-etat::before{content:"";flex:none;width:12px;height:12px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--o-acier)}
.o-d-panneau.valide .o-d-etat{color:var(--o-marine)}
.o-d-panneau.valide .o-d-etat::before{border:0;background:var(--o-marine)}
.o-d-btn{appearance:none;border:0;border-radius:var(--o-r);background:var(--o-marine);color:var(--o-blanc);font:600 15px/1 var(--o-body);padding:13px 20px;min-height:44px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease-out,opacity .2s ease-out}
.o-d-btn:hover{background:var(--o-marine-doux)}
.o-d-btn[aria-disabled="true"]{opacity:.6;cursor:default}
@media (max-width:520px){
  .o-demo .o-ecran-corps{padding:16px 14px 0}
  .o-d-onglets{flex-wrap:nowrap;gap:0 8px;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding-inline:14px}
  .o-d-onglets::-webkit-scrollbar{display:none}
  .o-d-groupe{flex:none}
  .o-d-onglet{padding:10px 5px 11px;font-size:13px}
  .o-d-onglet.fait::after{display:none}
  .o-d-ligne{grid-template-columns:16px minmax(0,1fr)}
  .o-d-ligne > .o-statut,.o-d-num{grid-column:2;grid-row:auto;margin-top:4px}
  .o-d-pied{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: reduce){.o-d-marque,.o-d-marque::after,.o-etape,.o-d-groupe-nom{transition:none}}

/* Trois dossiers : le statut en grand, comme un tampon */
.o-dossiers{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px)}
.o-dossier{display:grid !important;gap:14px;align-content:start}
.o-scope .o-d-statut{font:500 clamp(30px,3.3vw,44px)/1 var(--o-display);letter-spacing:-.015em;padding-top:18px;border-top:3px solid currentColor}
.o-d-comp .o-d-statut{color:var(--o-ambre)}
.o-d-inad .o-d-statut{color:var(--o-rouge)}
.o-d-manq .o-d-statut{color:var(--o-marine)}
.o-scope .o-dossier h3{font-size:21px}
.o-scope .o-dossier p{font-size:16px}
.o-scope .o-d-verdict{position:relative;color:var(--o-marine);font-weight:500;background:var(--o-calque);border-radius:6px;padding:14px 16px 14px 46px}
.o-scope .o-d-verdict::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;background:var(--o-signal-texte);-webkit-mask:var(--o-fleche) center/contain no-repeat;mask:var(--o-fleche) center/contain no-repeat}
@media (max-width:900px){.o-dossiers{grid-template-columns:1fr;gap:44px}}

/* Noir sur blanc */
.o-noir{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px)}
.o-colonne{display:grid !important;gap:18px;align-content:start}
.o-scope .o-colonne h3{font-size:24px;padding-bottom:14px;border-bottom:2px solid var(--o-marine)}
.o-scope ul.o-coches{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:17px;line-height:1.45}
.o-scope ul.o-coches li{position:relative;padding-left:38px;margin:0}
.o-scope ul.o-coches li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;background:var(--o-vert);-webkit-mask:var(--o-oui) center/contain no-repeat;mask:var(--o-oui) center/contain no-repeat}
.o-scope ul.o-croix li::before{background:var(--o-signal-texte);-webkit-mask-image:var(--o-non);mask-image:var(--o-non)}
.o-scope ul.o-coches li strong{color:var(--o-marine);font-weight:600}
@media (max-width:860px){.o-noir{grid-template-columns:1fr}}

/* PME pilotes : le O posé sur son trait, à pleine échelle */
.o-pilote{background:var(--o-marine);color:var(--o-sur-marine);position:relative;overflow:hidden}
.o-pilote-motif{position:absolute;right:-6%;bottom:0;width:min(58vw,700px);height:auto;pointer-events:none}
.o-pilote-grille{position:relative;display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(72px,9vw,120px)}
.o-scope .o-pilote h1{color:var(--o-sur-marine-fort);font-size:clamp(36px,5vw,68px);line-height:1.02;letter-spacing:-.02em}
.o-pilote-texte{display:grid !important;gap:20px}
.o-scope .o-pilote-texte > p{font-size:19px;max-width:32em}
.o-scope .o-pilote ul.o-coches li::before{background:var(--o-signal)}
.o-carte-pilote{background:var(--o-nuit);border:1px solid var(--o-marine-trait);border-radius:8px;padding:26px;display:grid !important;gap:12px;align-self:end;max-width:400px}
.o-scope .o-carte-pilote h2{color:var(--o-sur-marine-fort);font-size:21px;line-height:1.3;letter-spacing:0;margin-bottom:4px !important}
.o-scope .o-pilote-adresse{font-size:15px;color:var(--o-sur-marine-doux)}
.o-scope .o-pilote-adresse strong{color:var(--o-sur-marine-fort);font-weight:600}
.o-scope .o-carte-pilote p{font-size:15.5px;color:var(--o-sur-marine-fort)}
.o-scope .o-carte-pilote strong{display:inline-block;min-width:5.5em;font-weight:400;color:var(--o-sur-marine-doux)}
.o-scope .o-carte-pilote .o-lien a{color:var(--o-sur-marine-fort)}
@media (max-width:860px){.o-pilote-grille{grid-template-columns:1fr}.o-pilote-motif{width:90vw;right:-30%;opacity:.55}}

/* Vos questions : les 4 guides à gauche, les questions fréquentes à droite */
.o-faq-grille{display:grid !important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
.o-guides,.o-faq-col{display:grid !important;min-width:0}
.o-scope :is(.o-guides,.o-faq-col) > h3{font-size:22px;padding-bottom:14px;border-bottom:2px solid var(--o-marine)}
.o-guides-liste{list-style:none;margin:0;padding:0;display:grid}
.o-guides-liste a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--o-trait);font:500 clamp(19px,1.8vw,23px)/1.3 var(--o-display);color:var(--o-marine);text-decoration:none}
.o-guides-liste svg{width:26px;height:26px;flex:none;transition:transform .25s cubic-bezier(.16,1,.3,1),color .2s}
.o-guides-liste a:hover span{text-decoration:underline;text-decoration-color:var(--o-signal);text-decoration-thickness:2px;text-underline-offset:6px}
.o-guides-liste a:hover svg{transform:translateX(5px);color:var(--o-signal-texte)}
.o-scope .o-guides-pied{margin-top:16px !important;font-size:15px;color:var(--o-acier)}
.o-faq-col .o-faq{border-top:0;max-width:none}
@media (max-width:900px){.o-faq-grille{grid-template-columns:1fr}}
.o-faq{display:grid !important;max-width:860px;border-top:2px solid var(--o-marine)}
.o-faq details{border-bottom:1px solid var(--o-trait)}
.o-faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;font:500 clamp(19px,1.8vw,23px)/1.35 var(--o-display);color:var(--o-marine);position:relative}
.o-faq summary::-webkit-details-marker{display:none}
.o-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:2px solid var(--o-signal);border-bottom:2px solid var(--o-signal);transform:rotate(45deg);transition:transform .2s}
.o-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.o-scope .o-faq details > p{padding:0 0 24px;max-width:62ch;font-size:17px}
.o-scope .o-maj{font-size:14px;color:var(--o-acier);margin-top:18px !important}

/* Appel final, en orange : on referme sur le diagnostic */
.o-final{background:var(--o-marine);color:var(--o-sur-marine);border-top:4px solid var(--o-signal)}
.o-final-grille{display:grid !important;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-block:clamp(64px,8vw,104px)}
.o-scope .o-final h2{color:var(--o-sur-marine-fort);font-size:clamp(34px,5vw,68px)}
.o-scope .o-final p{margin-top:14px !important;font-size:18px;color:var(--o-sur-marine)}
.o-scope .o-final .o-final-diag{grid-column:1/-1;margin-top:4px !important;padding-top:20px;border-top:1px solid var(--o-marine-trait);font-size:16px}
.o-scope .o-final-diag a{color:var(--o-sur-marine-fort);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--o-signal)}
@media (max-width:820px){.o-final-grille{grid-template-columns:1fr;align-items:start}}

/* Pied de page */
.o-footer{background:var(--o-nuit);color:var(--o-sur-marine-doux);font-size:15px}
.o-footer-grille{display:grid !important;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:56px 28px}
.o-footer.o-scope h3{font:600 14px/1 var(--o-body);color:var(--o-sur-marine);margin-bottom:14px !important}
.o-footer.o-scope ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.o-footer.o-scope a{text-decoration:none;color:var(--o-sur-marine-fort)}
.o-footer.o-scope a:hover{text-decoration:underline;text-decoration-color:var(--o-signal)}
.o-signature{display:grid !important;gap:14px}
.o-bas{grid-column:1/-1;border-top:1px solid var(--o-marine-trait);padding-top:20px;display:flex !important;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
/* Tablette et téléphone : la signature, puis « Nous joindre » sur toute la largeur, puis « Comprendre » et « Confiance » côte à côte (1.9.11).
   Avant, « Nous joindre » (une seule ligne) faisait face aux 5 liens de « Comprendre » et laissait un grand vide. */
@media (max-width:860px){.o-footer-grille{grid-template-columns:1fr 1fr}.o-signature,.o-footer-grille > :nth-child(2){grid-column:1/-1}}
@media (max-width:480px){.o-footer-grille{gap:28px 20px;padding-block:40px 24px}.o-footer.o-scope ul{gap:12px}.o-bas{flex-direction:column;gap:6px}}

/* Page pilier « Directive machine 2027 » (modèle Pleine largeur) */
.o-scope .wp-block-post-content > *{margin-block:0}
.o-pilier-grille{display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,80px)}
.o-scope .o-fil{font-size:14px;color:var(--o-sur-marine-doux);margin-bottom:-6px !important}
.o-scope .o-fil a{color:var(--o-sur-marine-doux)}
.o-scope .o-pilier-grille h1{color:var(--o-sur-marine-fort);font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-.025em}
.o-scope .o-reponse{font-size:clamp(18px,1.5vw,20px);line-height:1.55;max-width:34em;color:var(--o-sur-marine)}
.o-scope .o-reponse strong{color:var(--o-sur-marine-fort);font-weight:600}
.o-scope .o-verif{font-size:14px;color:var(--o-sur-marine-doux)}
.o-scope .o-verif a{color:var(--o-sur-marine)}
.o-cases-bloc{display:grid;gap:14px;min-width:0}
.o-cases-total{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--o-marine-trait);padding-bottom:12px;color:var(--o-sur-marine)}
.o-cases-total b{font:500 56px/.9 var(--o-display);color:var(--o-sur-marine-fort)}
.o-cases-total span{font-size:16px;line-height:1.35}
.o-cases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.o-case{font:500 12.5px/1 var(--o-mono);color:var(--o-sur-marine);text-decoration:none !important;border:1.5px solid var(--o-marine-trait);border-radius:4px;padding:14px 4px;text-align:center;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.o-case:hover{border-color:var(--o-sur-marine-doux);background:var(--o-marine-doux);color:var(--o-sur-marine-fort)}
.o-case.o-nv{background:var(--o-signal);border-color:var(--o-signal);color:var(--o-nuit)}
.o-case.o-nv:hover{background:var(--o-signal-survol);color:var(--o-nuit)}
.o-case.o-lev{border-style:dashed;color:var(--o-sur-marine-doux)}
.o-legende{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--o-sur-marine-doux)}
.o-legende span{display:inline-flex;align-items:center;gap:8px}
.o-legende i{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--o-marine-trait)}
.o-legende i.o-nv{background:var(--o-signal);border-color:var(--o-signal)}
.o-legende i.o-lv{border-style:dashed}
@media (max-width:960px){.o-pilier-grille{grid-template-columns:1fr}}
@media (max-width:480px){.o-cases{grid-template-columns:repeat(5,minmax(0,1fr))}.o-case{font-size:11px;padding:12px 2px}}

.o-reperes{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--o-marine)}
.o-repere{display:grid !important;gap:8px;align-content:start;padding:24px 24px 4px 0}
.o-repere + .o-repere{padding-left:24px;border-left:1px solid var(--o-trait)}
.o-scope .o-cle{font:500 15px/1 var(--o-mono);color:var(--o-signal-texte)}
.o-scope .o-repere h3{font-size:24px}
@media (max-width:820px){.o-reperes{grid-template-columns:1fr}.o-repere,.o-repere + .o-repere{padding:20px 0;border-left:0;border-top:1px solid var(--o-trait)}.o-repere:first-child{border-top:0}}

.o-sujets{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.o-sujet{display:grid !important;gap:10px;align-content:start;border-top:2px solid var(--o-marine);padding-top:16px}
.o-scope .o-sujet-n{font:500 48px/1 var(--o-display);color:var(--o-marine)}
.o-scope .o-sujet p{font-size:15.5px}
.o-sujet-refs{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.o-sujet-refs a{font:500 12.5px/1 var(--o-mono);text-decoration:none;color:var(--o-marine);border:1px solid var(--o-trait);border-radius:4px;padding:5px 7px;background:var(--o-blanc)}
.o-sujet-refs a.o-nv{border-color:var(--o-signal);color:var(--o-signal-texte)}
.o-sujet-refs a:hover{border-color:var(--o-marine)}
@media (max-width:1100px){.o-sujets{grid-template-columns:repeat(2,minmax(0,1fr))}.o-sujet:last-child{grid-column:1/-1}}
@media (max-width:560px){.o-sujets{grid-template-columns:1fr}}

.o-filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.o-filtres button{font:500 14.5px/1 var(--o-body);color:var(--o-marine);background:var(--o-blanc);border:1.5px solid var(--o-trait);border-radius:999px;padding:9px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.o-filtres button span{font:500 12.5px/1 var(--o-mono);color:var(--o-acier)}
.o-filtres button:hover{border-color:var(--o-marine)}
.o-filtres button[aria-pressed="true"]{background:var(--o-marine);border-color:var(--o-marine);color:var(--o-sur-marine-fort)}
.o-filtres button[aria-pressed="true"] span{color:var(--o-sur-marine-doux)}
.o-scope .o-compte{font-size:14.5px;color:var(--o-acier);margin-bottom:12px !important}
.o-lignes{border-top:2px solid var(--o-marine)}
.o-ligne,.o-ligne-tete{display:grid !important;grid-template-columns:90px minmax(0,1fr) 110px minmax(0,1.3fr);grid-template-areas:"num titre evol txt" "num fam evol txt";column-gap:20px;row-gap:4px;padding-block:18px;border-bottom:1px solid var(--o-trait)}
.o-ligne-tete{grid-template-areas:none;padding-block:14px 10px}
.o-scope .o-ligne-tete p{font:600 13px/1.3 var(--o-body);color:var(--o-acier)}
.o-ligne[hidden]{display:none !important}
.o-ligne:target{background:var(--o-signal-pale)}
.o-scope .o-l-num{grid-area:num;font:500 14px/1.4 var(--o-mono);color:var(--o-marine)}
.o-scope .o-l-titre{grid-area:titre;font:600 17px/1.35 var(--o-body);color:var(--o-marine);letter-spacing:0}
.o-scope .o-l-fam{grid-area:fam;font-size:14px;color:var(--o-acier)}
.o-scope .o-l-evol{grid-area:evol;justify-self:start;align-self:start;font:500 12px/1 var(--o-mono);padding:5px 8px;border-radius:4px;background:var(--o-trait-doux);color:var(--o-marine)}
.o-scope .o-l-evol.o-nv{background:var(--o-signal);color:var(--o-nuit)}
.o-scope .o-l-txt{grid-area:txt;font-size:16px}
.o-f-levage .o-l-txt{color:var(--o-acier)}
@media (max-width:760px){
  .o-ligne-tete{display:none !important}
  .o-ligne{grid-template-columns:auto 1fr;grid-template-areas:"num evol" "titre titre" "fam fam" "txt txt";column-gap:12px}
  .o-scope .o-l-txt{margin-top:6px !important}
}

.o-sources-grille{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding-block:48px;font-size:15.5px}
.o-scope .o-sources h3{font-size:19px;margin-bottom:10px !important}
.o-scope .o-sources ul{padding-left:18px;display:grid;gap:6px}
@media (max-width:820px){.o-sources-grille{grid-template-columns:1fr}}

/* Guides « questions de périmètre » (modèle Pleine largeur) */
.o-guide-tete{display:grid !important;gap:22px;max-width:920px;padding-block:clamp(36px,5vw,64px) clamp(44px,5vw,72px)}
/* Pages SEO : le schéma propre à chaque page, à droite du titre, numéroté comme les étapes de la section suivante */
.o-seo-tete{display:grid !important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.o-seo-tete .o-guide-tete{max-width:none}
.o-schema-seo{margin:0;padding-block:clamp(20px,3vw,40px)}
.o-schema-seo-dessin{display:block;width:100%;max-width:500px;height:auto;margin-inline:auto}
@media (max-width:900px){.o-seo-tete{grid-template-columns:1fr;gap:0}.o-schema-seo{padding-top:0;padding-bottom:36px}.o-schema-seo-dessin{max-width:440px;margin-inline:0}}
.o-scope .o-guide-tete h1{color:var(--o-sur-marine-fort);font-size:clamp(34px,4.6vw,60px);line-height:1.05;letter-spacing:-.02em}
.o-scope .o-reponse-guide{font-size:clamp(19px,1.7vw,22px);line-height:1.55;color:var(--o-sur-marine);max-width:36em}
.o-scope .o-reponse-guide strong{color:var(--o-sur-marine-fort);font-weight:600}
.o-regle{display:grid !important;counter-reset:o-regle;border-top:2px solid var(--o-marine);max-width:920px}
.o-regle-item{position:relative;display:grid !important;gap:6px;padding:22px 0 22px 60px;border-bottom:1px solid var(--o-trait)}
.o-regle-item::before{counter-increment:o-regle;content:counter(o-regle);position:absolute;left:0;top:22px;width:38px;height:38px;box-sizing:border-box;border-radius:50%;border:2px solid var(--o-signal);display:grid;place-items:center;font:500 17px/1 var(--o-display);color:var(--o-marine)}
.o-scope .o-regle-item h3{font-size:21px}
.o-scope .o-regle-item p{font-size:17px;max-width:62ch}
.o-exemples{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,28px)}
.o-exemple{display:grid !important;gap:12px;align-content:start;background:var(--o-blanc);border:1px solid var(--o-trait);border-radius:8px;padding:22px}
.o-scope .o-verdict{justify-self:start;font:500 12.5px/1 var(--o-mono);padding:6px 9px;border-radius:4px;background:var(--o-trait-doux);color:var(--o-marine)}
.o-v-quasi .o-verdict,.o-v-examiner .o-verdict{background:var(--o-ambre-pale);color:var(--o-ambre)}
.o-v-machine .o-verdict,.o-v-vous .o-verdict,.o-v-oui .o-verdict{background:var(--o-marine);color:var(--o-sur-marine-fort)}
.o-v-non .o-verdict{background:var(--o-vert-pale);color:var(--o-vert)}
.o-v-autre .o-verdict{background:var(--o-signal-pale);color:var(--o-signal-texte)}
.o-scope .o-situation{font-weight:600;color:var(--o-marine);font-size:17px;line-height:1.4}
.o-scope .o-exemple p:last-child{font-size:15.5px}
@media (max-width:900px){.o-exemples{grid-template-columns:1fr}}
.o-docs{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);max-width:1000px}
.o-doc{display:grid !important;gap:14px;align-content:start}
.o-scope .o-doc h3{font-size:22px;padding-bottom:12px;border-bottom:2px solid var(--o-marine)}
.o-scope .o-doc ul{list-style:none;padding:0;display:grid;gap:10px;font-size:17px}
.o-scope .o-doc li{position:relative;padding-left:22px}
.o-scope .o-doc li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--o-signal)}
@media (max-width:760px){.o-docs{grid-template-columns:1fr}}
.o-nouveaute{display:grid !important;gap:8px;max-width:920px;background:var(--o-calque);border-radius:8px;padding:22px 24px;margin-top:clamp(32px,4vw,48px) !important}
.o-scope .o-nouveaute p:last-child{font-size:17px}

/* Encart du diagnostic flash : refermable, dans le coin (en bas sur téléphone), masqué sur la démo et le pied de page.
   Carte claire à liseré orange : elle ressort sur le héros marine comme sur les sections blanches (1.9.10). */
.o-encart{position:fixed;z-index:60;right:max(20px, env(safe-area-inset-right, 0px));bottom:max(20px, env(safe-area-inset-bottom, 0px));width:min(340px, calc(100vw - 32px));box-sizing:border-box;display:grid;gap:8px;padding:20px 22px;border-radius:10px;background:var(--o-blanc);color:var(--o-encre);border:1px solid var(--o-trait);border-top:4px solid var(--o-signal);box-shadow:0 26px 56px -16px rgba(5,12,28,.6),0 2px 6px rgba(5,12,28,.12);visibility:hidden;opacity:0;transform:translateY(16px);transition:opacity .3s ease-out,transform .45s cubic-bezier(.16,1,.3,1),visibility .45s}
.o-encart[hidden]{display:none}
.o-encart.visible{visibility:visible;opacity:1;transform:none}
.o-encart .o-encart-titre{margin:0;padding-right:30px;font:500 18px/1.3 var(--o-display);color:var(--o-marine)}
.o-encart .o-encart-texte{margin:0;font-size:14px;line-height:1.45;color:var(--o-acier)}
.o-encart-lien{justify-self:start;margin-top:6px;background:var(--o-signal);color:var(--o-nuit);font:600 15px/1 var(--o-body);text-decoration:none;border-radius:var(--o-r);padding:13px 16px}
.o-encart-lien:hover{background:var(--o-signal-survol)}
.o-encart-fermer{position:absolute;top:8px;right:8px;width:40px;height:40px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:6px;color:var(--o-acier);cursor:pointer}
.o-encart-fermer:hover{background:var(--o-calque);color:var(--o-marine)}
.o-encart-fermer svg{width:18px;height:18px}
@media (max-width:760px){
  .o-encart{left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom, 0px));width:auto;padding:14px 16px;gap:10px}
  .o-encart .o-encart-titre{font-size:16px}
  .o-encart .o-encart-texte{display:none}
  .o-encart-lien{margin-top:0}
}
@media (prefers-reduced-motion: reduce){.o-encart,.o-guides-liste svg,.o-scope .o-fleche .wp-block-button__link::after{transition:none}}

/* Page du diagnostic : le texte sous le questionnaire (composition « Page · Diagnostic, texte sous le questionnaire ») */
.o-diag-texte{margin-top:clamp(48px,6vw,80px) !important;display:grid;gap:18px}
.o-scope.o-diag-texte h2{font-size:clamp(26px,3vw,36px);line-height:1.15;text-align:left;margin-top:16px !important}
.o-scope.o-diag-texte > p{font-size:17px;line-height:1.6;max-width:65ch}

/* Animations de l'accueil (1.9.14). Chacune ne joue qu'une fois, quand sa section arrive à l'écran, et rien ne joue
   si le visiteur a demandé moins d'animations à son système. L'état de départ n'est posé que par JavaScript :
   sans script, tout est visible. */

/* 1. Le tracé du dessin : caché jusqu'à ce que le script le prépare ; secours CSS au bout de 2,5 s */
.o-anim .o-plan-dessin:not(.o-trace){opacity:0;animation:o-secours 0s linear 2.5s forwards}
@keyframes o-secours{to{opacity:1}}

/* 2. La cote : elle se trace depuis son centre (le polygone déborde en hauteur pour garder les petits traits) */
.o-cote-anim .o-cote-ligne{clip-path:polygon(50% -20px,50% -20px,50% 30px,50% 30px)}
.o-cote-anim.o-joue .o-cote-ligne{clip-path:polygon(0 -20px,100% -20px,100% 30px,0 30px);transition:clip-path .9s cubic-bezier(.16,1,.3,1)}

/* 3. Les 4 livrables : le n° 1 se déploie de gauche à droite avec sa cote orange, puis les 3 autres arrivent */
.o-liv-anim .o-livrable-principal{clip-path:inset(0 100% 0 0 round 12px)}
.o-liv-anim .o-livrable:not(.o-livrable-principal){opacity:0;transform:translateY(14px)}
.o-liv-anim .o-livrables-cote{transform:scaleX(0);transform-origin:left center}
.o-liv-anim .o-livrables-cote span{opacity:0}
.o-liv-anim.o-joue .o-livrable-principal{clip-path:inset(0 0 0 0 round 12px);transition:clip-path .85s cubic-bezier(.16,1,.3,1)}
.o-liv-anim.o-joue .o-livrables-cote-gros{transform:none;transition:transform .85s cubic-bezier(.16,1,.3,1)}
.o-liv-anim.o-joue .o-livrables-cote-gros span{opacity:1;transition:opacity .3s ease-out .75s}
.o-liv-anim.o-joue .o-livrable:not(.o-livrable-principal){opacity:1;transform:none;transition:opacity .45s ease-out,transform .6s cubic-bezier(.16,1,.3,1)}
.o-liv-anim.o-joue .o-livrable:nth-child(2){transition-delay:.55s}
.o-liv-anim.o-joue .o-livrable:nth-child(3){transition-delay:.67s}
.o-liv-anim.o-joue .o-livrable:nth-child(4){transition-delay:.79s}
.o-liv-anim.o-joue .o-livrables-cote-reste{transform:none;transition:transform .6s cubic-bezier(.16,1,.3,1) .6s}
.o-liv-anim.o-joue .o-livrables-cote-reste span{opacity:1;transition:opacity .3s ease-out 1.1s}

/* 4. Le signal du schéma de la solution : chaque élément s'éclaire en orange quand le signal passe */
.o-flux-lien,.o-flux-descente,.o-flux-crochet::before,.o-flux-crochet::after{transition:background-color .25s ease-out}
.o-flux-lien::after,.o-flux-descente::after,.o-flux-crochet{transition:border-color .25s ease-out}
.o-flux-entree,.o-flux-ia,.o-flux-sortie,.o-flux-etapes .o-flux-ic{transition:box-shadow .3s ease-out}
.o-flux-lien.o-sig,.o-flux-descente.o-sig,.o-flux-crochet.o-sig::before,.o-flux-crochet.o-sig::after{background-color:var(--o-signal)}
.o-flux-lien-d.o-sig::after{border-left-color:var(--o-signal)}
.o-flux-lien-g.o-sig::after{border-right-color:var(--o-signal)}
.o-flux-descente.o-sig::after{border-top-color:var(--o-signal)}
.o-flux-crochet.o-sig{border-color:var(--o-signal)}
.o-flux-entree.o-sig{box-shadow:0 0 0 2px var(--o-signal)}
.o-flux-ia.o-sig{box-shadow:0 0 0 7px rgba(240,100,30,.28)}
.o-flux-etapes li.o-sig .o-flux-ic{box-shadow:0 0 0 3px var(--o-signal)}
.o-flux-etapes li.o-sig + li::before,.o-flux-etapes li.o-sig::before{background:repeating-linear-gradient(90deg,var(--o-signal) 0 6px,transparent 6px 11px)}
.o-flux-etapes li.o-sig::after{background:var(--o-signal)}
.o-flux-sortie.o-sig{box-shadow:0 0 0 7px rgba(240,100,30,.35)}
@media (prefers-reduced-motion: reduce){
  .o-anim .o-plan-dessin:not(.o-trace){opacity:1;animation:none}
  .o-cote-anim .o-cote-ligne,.o-liv-anim .o-livrable-principal{clip-path:none}
  .o-liv-anim .o-livrable,.o-liv-anim .o-livrables-cote,.o-liv-anim .o-livrables-cote span{opacity:1;transform:none}
}