/* Almil Agentic — page Octavec (octavec.html), version 2 du 22 octobre 2026.
   Se charge après style.css et bichromie.css : même papier, mêmes polices, mêmes boutons, même pied de page.
   Identité « moyenne » (l'entonnoir) : pas de pieuvre ; une monographie en quatre planches numérotées,
   une nomenclature, une échelle graphique ESQ · APS · APD · DCE qui sert de navigation, un cartouche.
   Chaque section tient dans un écran de navigateur (hauteurs liées à la hauteur de la fenêtre).
   Texte courant à l'encre (réversible : remplacer --oc-encre par var(--bleu)) ; Klein pour les titres, la marque et les boutons.
   Convention : bleu = ce qu'Octavec propose ou écrit ; écarlate = ce qui attend votre validation ; encre = ce qui est validé.
   Les fenêtres de logiciels sont recomposées en gris neutres, en IBM Plex Sans (la seule entrée de cette police).
   Échelle des tailles (23 octobre) : cinq tailles, chacune un rôle. 60 px la promesse (h1) ; 44 px l'idée de chaque section (h2) ;
   24 px ce qu'il faut retenir (livrables, sous-titre, offre) ; 17 px le texte, une ligne ou deux ; 14 px les libellés et les boutons
   (13 px pour les légendes et les en-têtes de tableau). Silkscreen reste un ornement (numéros). */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}

.oc{--oc-encre:#1C1C22;--oc-gris:#55545B;--oc-filet:#D6CFC2;--oc-carte:#FAF7F1;--oc-ui:'IBM Plex Sans',system-ui,sans-serif;
  --oc-tete:4.5rem;color:var(--oc-encre)}
.oc ::selection{background:color-mix(in srgb,var(--bleu) 18%,transparent)}
.oc :focus-visible{outline:2px solid var(--bleu);outline-offset:0.1875rem}
.oc .footer :focus-visible{outline-color:var(--papier)}
.oc em{font-style:italic}
.oc-cache{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.oc-symboles{position:absolute;width:0;height:0;overflow:hidden}
.oc-afaire{display:inline-block;white-space:nowrap;font:500 0.75rem/1.3 var(--pixel);color:var(--oc-gris);border:1px dashed currentColor;padding:1px 0.375rem;margin-left:0.25rem;vertical-align:1px;font-style:normal;letter-spacing:0}
.oc-trou{font-style:italic;color:var(--oc-gris)}

/* ---------- En-tête : Octavec par Almil Agentic ---------- */
.oc-tete{position:sticky;top:0;z-index:50;background:var(--papier);transition:box-shadow .2s}
.oc-tete.defile{box-shadow:0 1px 0 var(--bleu)}
.oc-tete__in{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;height:var(--oc-tete)}
.oc-marque{margin:0;display:flex;align-items:center;gap:0.75rem;color:var(--bleu);white-space:nowrap}
.oc-marque__nom{font:var(--marque-poids) 1.4375rem/1 var(--marque);letter-spacing:.005em;text-transform:uppercase;text-decoration:none;color:inherit}
.oc-nav{display:flex;gap:1.75rem;margin-left:auto;font:500 0.875rem/1 var(--pixel);color:var(--bleu)}
.oc-nav a{color:inherit;text-decoration:none;padding:0.375rem 0;border-bottom:1px solid transparent;transition:border-color .2s}
.oc-nav a:hover,.oc-nav a[aria-current]{border-bottom-color:currentColor}
.oc-tete .btn-ambre{padding:0.8125rem 1.125rem;white-space:nowrap}

/* ---------- Boutons ---------- */
.oc-cta{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0.375rem;background:var(--bleu);color:var(--papier)!important;text-decoration:none;padding:1rem 1.375rem 0.9375rem;box-shadow:0.3125rem 0.3125rem 0 var(--ecarlate);transition:transform .2s,box-shadow .2s;font:500 0.9375rem/1.15 var(--pixel);border:0;cursor:pointer;text-align:left}
.oc-cta small{font:400 0.8125rem/1.25 var(--pixel);opacity:.88}
.oc-cta:hover{transform:translate(2px,2px);box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
.oc-cta__l span{display:inline-block;transition:transform .2s}
.oc-cta:hover .oc-cta__l span{transform:translateX(0.25rem)}
.oc .lien{color:var(--bleu)}
.oc .lien--bas:hover span{transform:translateY(0.1875rem)}

/* ---------- Sections : une planche par écran ---------- */
.oc-sec{padding:4rem 0}
@media (min-width:1000px) and (min-height:600px){
  .oc-ecran{min-height:calc(100svh - var(--oc-tete));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(1rem,3.1vh,3rem);padding-bottom:clamp(1rem,3.1vh,3rem)}
}
.oc-pl{display:flex;align-items:center;gap:1rem;margin:0 0 clamp(0.625rem,1.6vh,1.125rem);color:var(--bleu);font:500 0.875rem/1 var(--pixel)}
.oc-pl span{font:400 1.5rem/1 var(--silk);border:1px solid var(--ecarlate);padding:0.4375rem 0.5625rem 0.3125rem;flex:none}
.oc-pl::after{content:"";flex:1;height:0.75rem;margin-left:0.5rem;border-bottom:1px solid var(--bleu);
  background:linear-gradient(90deg,var(--bleu) 1px,transparent 1px) left bottom/0.75rem 0.3125rem repeat-x,
             linear-gradient(90deg,var(--bleu) 1px,transparent 1px) left bottom/3.75rem 0.75rem repeat-x}
.oc-tete-sec{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(0.375rem,1.2vh,0.75rem) 4rem;align-items:end;margin-bottom:clamp(0.75rem,2.3vh,1.875rem)}
.oc-tete-sec .oc-pl{grid-column:1/-1}
.oc h2{font:400 clamp(2rem,min(3.1vw,4.9vh),2.75rem)/1.08 var(--serif);letter-spacing:-.01em;color:var(--bleu);margin:0;text-wrap:balance}
.oc-chapo{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--oc-gris);text-wrap:pretty}

/* ---------- Haut de page ---------- */
.oc-hero{padding:clamp(1.75rem,4vh,3.5rem) 0 0}
.oc-hero__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:center;width:100%;box-sizing:border-box}
.oc-statut{display:table;margin:0 0 1rem;padding:0.375rem 0.5rem;border:1px solid var(--bleu);font:500 0.8125rem/1.2 var(--pixel);color:var(--bleu)}
.oc h1{font:400 clamp(2.625rem,min(4.1vw,7.4vh),3.75rem)/1.03 var(--serif);letter-spacing:-.018em;color:var(--bleu);margin:0 0 1.375rem;text-wrap:balance}
.oc-hero__sous{font-size:1.5rem;line-height:1.35;margin:0 0 1.875rem;max-width:22em;text-wrap:balance}
.oc-actions{display:flex;flex-wrap:wrap;gap:1.125rem 1.875rem;align-items:center}
.oc-pour{margin:1.75rem 0 0;padding-top:0.875rem;border-top:1px solid var(--oc-filet);font:500 0.875rem/1.4 var(--pixel);color:var(--oc-gris);max-width:34em}

/* figure 1 : une référence, partout ; les traits de rappel sont tracés par octavec.js */
.oc-fig1{margin:0}
.oc-quatre{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2.875rem 3.25rem;padding:0.375rem}
.oc-quatre > *:not(svg){position:relative;z-index:1}
.oc-traits{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.oc-traits line{stroke:var(--bleu);stroke-width:1.3}
.oc-traits line.halo{stroke:#fff;stroke-width:5;stroke-opacity:.85}
.oc-traits .pt{fill:var(--bleu)}
.oc-traits .porte{fill:var(--ecarlate)}
.oc-ref{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3!important;margin:0;background:var(--bleu);color:var(--papier);padding:0.5625rem 0.875rem 0.625rem;text-align:center;white-space:nowrap;box-shadow:0.25rem 0.25rem 0 var(--ecarlate)}
.oc-ref b{display:block;font:500 0.9375rem/1.2 var(--pixel)}
.oc-ref small{display:block;font:italic 400 0.9375rem/1.2 var(--serif);opacity:.9;margin-top:2px}
.oc-legende{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;margin-top:1.375rem;border:1px solid var(--bleu);font:500 0.8125rem/1.35 var(--pixel);color:var(--oc-encre);background:var(--oc-carte)}
.oc-legende > *{padding:0.5625rem 0.75rem;margin:0;display:flex;align-items:center}
.oc-legende > * + *{border-left:1px solid var(--bleu)}
.oc-legende .oc-fig{font:400 1rem/1 var(--silk);color:var(--bleu)}
.oc-cles{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:0.25rem;white-space:nowrap}
.oc-cle{display:flex;align-items:center;gap:0.4375rem}
.oc-cle i{width:0.625rem;height:0.625rem;flex:none}
.oc-cle--b i{background:var(--bleu)}.oc-cle--r i{background:var(--ecarlate)}
.oc-cle--r{color:var(--rouge-texte)}

/* figure 1 en mouvement (grand écran ; octavec.js, section 8) : la vidéo se pose exactement sur la figure.
   Elle couvre la figure et ses marges (26,3 px de côté, 18 px en haut et en bas pour 630 px de large),
   en pourcentages de la largeur, pour suivre la figure à toutes les tailles ; bords fondus dans le papier. */
.oc-fig1__cadre{position:relative;isolation:isolate}
/* quand la vidéo peut jouer, la figure garde la mise en page de référence (630 px de large) et suit la colonne par
   mise à l'échelle : elle reste ainsi identique à la première image de la vidéo, à toutes les tailles d'écran */
.oc-fig1__cadre.cale > .oc-quatre{width:39.375rem;transform:scale(var(--k,1));transform-origin:0 0}
/* mêmes couleurs que la vidéo (sRVB), pour que le passage de l'une à l'autre ne se voie pas sur les écrans à large gamut */
html:not(.gris) .oc-fig1__cadre.cale{--bleu:#1028FF;--encre:#1028FF;--ciel:#1028FF;--prof-2:#1028FF;--ambre:#FF2400;--ecarlate:#FF2400}
.oc-anim{position:absolute;z-index:4;left:-4.173%;right:-4.173%;top:0;bottom:0;margin:-2.857% 0;cursor:pointer;
  opacity:0;transition:opacity .5s ease;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 0.75rem,#000 calc(100% - 0.75rem),transparent),linear-gradient(transparent,#000 0.625rem,#000 calc(100% - 0.625rem),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 0.75rem,#000 calc(100% - 0.75rem),transparent),linear-gradient(transparent,#000 0.625rem,#000 calc(100% - 0.625rem),transparent);
  mask-composite:intersect}
.oc-anim.joue{opacity:1;pointer-events:auto}
.oc-anim__video{display:block;width:100%;height:100%;object-fit:fill;background:var(--papier)}
.oc-legende{position:relative}
.oc-legende__l{transition:opacity .2s}
.oc-legende__l.change{opacity:0}
.oc-legende__l b{font-weight:inherit;color:var(--bleu)}
/* le bouton : un onglet posé sur la légende, à droite */
.oc-legende > .oc-anim__bouton{position:absolute;right:-1px;bottom:100%;height:1.5625rem;padding:1px 0.6875rem 0;margin:0;gap:0.4375rem;
  border:1px solid var(--bleu);border-bottom:0;background:var(--oc-carte);color:var(--bleu);
  font:500 0.6875rem/1 var(--pixel);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.oc-legende > .oc-anim__bouton[hidden]{display:none}
.oc-anim__bouton:hover{background:var(--bleu);color:var(--papier)}
.oc-anim__ic{fill:currentColor;flex:none}
.oc-anim__bouton .ic-lire,.oc-anim__bouton.lire .ic-pause{display:none}
.oc-anim__bouton.lire .ic-lire{display:inline}

/* ---------- Fenêtres de logiciels, recomposées ---------- */
.oc-win{background:#fff;border:1px solid #cdcdcd;box-shadow:0 0.75rem 1.875rem rgba(16,24,60,.09),0 2px 0.3125rem rgba(16,24,60,.06);min-width:0;overflow:hidden;font:400 0.8125rem/1.35 var(--oc-ui);color:#262626;container-type:inline-size}
.oc-win__barre{display:flex;align-items:center;gap:0.5rem;margin:0;height:1.75rem;padding:0 0.625rem;background:#ececec;border-bottom:1px solid #d9d9d9;font:500 0.78125rem/1 var(--oc-ui);color:#3a3a3a;white-space:nowrap;overflow:hidden}
.oc-win__barre::before{content:"";width:1.75rem;height:0.5rem;flex:none;background:radial-gradient(circle,#c8c8c8 0.21875rem,transparent 0.25rem) 0 0/0.625rem 0.5rem repeat-x}
.oc-win__app{font-weight:600}
.oc-win__fic{color:#6a6a6a;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.45}
.oc-win--xl .oc-win__barre{background:#e6efe9}
.oc-win--id{background:#3b3b3b}
.oc-win--id .oc-win__barre,.oc-win--bl .oc-win__barre,.oc-win--photo .oc-win__barre{background:#2f3133;color:#ddd;border-bottom-color:#1f1f1f}
.oc-win--id .oc-win__fic,.oc-win--bl .oc-win__fic,.oc-win--photo .oc-win__fic{color:#aaa}
.oc-win--id .oc-win__barre::before,.oc-win--bl .oc-win__barre::before,.oc-win--photo .oc-win__barre::before{background:radial-gradient(circle,#5a5c5e 0.21875rem,transparent 0.25rem) 0 0/0.625rem 0.5rem repeat-x}
.oc-win--bl{background:#d9d3c8}
.oc-win--web .oc-win__barre{background:#f1f1f1}
.oc-win--web .oc-win__fic{flex:1;background:#fff;border:1px solid #dedede;border-radius:0.3125rem;padding:0.1875rem 0.5625rem;font-size:0.71875rem;color:#555}
.oc-ext{flex:none;font:500 0.6875rem/1 var(--pixel);color:var(--papier);background:var(--bleu);padding:0.3125rem 0.4375rem 0.25rem}
.oc-dessin{display:block;width:100%;height:auto}

/* tableur : les colonnes se retirent quand la fenêtre rétrécit (requêtes de conteneur) */
.oc-xl{width:100%;border-collapse:collapse;table-layout:fixed;font:400 0.78125rem/1.2 var(--oc-ui)}
.oc-xl th{background:#f3f3f3;color:#6a6a6a;font-weight:400;border:1px solid #e0e0e0;height:1.25rem;font-size:0.6875rem;padding:0}
.oc-xl tr:first-child th:first-child{width:1.5rem}
.oc-xl .w-code{width:12%}.oc-xl .w-dim{width:25%}.oc-xl .w-fin{width:24%}.oc-xl .w-prix{width:14%}
.oc-xl td{border:1px solid #e6e6e6;padding:0.3125rem 0.375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:0.9375rem}
.oc-xl tr.entete td{font-weight:600;background:#fafafa}
.oc-xl td.code{font:500 0.75rem/1.2 var(--pixel)}
.oc-xl tr.sel td{background:color-mix(in srgb,var(--bleu) 9%,#fff);color:#0b1b9e;transition:background .25s,color .25s}
.oc-xl tr.sel td:first-of-type{box-shadow:inset 0.1875rem 0 0 var(--bleu)}
.oc-xl td.oc-att-cel{box-shadow:inset 0 0 0 2px var(--ecarlate)!important;color:var(--rouge-texte)!important;background:#fff!important}
.oc-xl__fx{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;border-bottom:1px solid #e0e0e0;font-size:0.75rem;color:#555;min-height:1.625rem;box-sizing:border-box}
.oc-xl__fx b{font-weight:500;border:1px solid #d6d6d6;padding:1px 0.375rem}
.oc-xl__fx i{color:#999}
@container (max-width:29.375rem){.oc-xl .fin{display:none}}
@container (max-width:22.5rem){.oc-xl .dim{display:none}.oc-xl .w-code{width:19%}.oc-xl .w-prix{width:24%}}
@container (max-width:18.75rem){.oc-xl--court tr.opt{display:none}}
@container (max-width:14.375rem){
  .oc-xl--court tr:last-child{display:none}
  .oc-xl{font-size:0.65625rem}
  .oc-xl td{padding:0.1875rem 0.25rem;height:0.75rem}.oc-xl td.code{font-size:0.65625rem}
  .oc-xl th{height:1rem;font-size:0.59375rem}
  .oc-xl tr:first-child th:first-child{width:1rem}
  .oc-xl .w-code{width:25%}.oc-xl .w-prix{width:29%}
}

/* dessins : figure 1 */
.oc-plan .m{fill:none;stroke:#2b2b2b;stroke-width:5;stroke-linecap:square}
.oc-plan .p{fill:none;stroke:#8a8a8a;stroke-width:1;stroke-dasharray:3 3}
.oc-plan .g rect,.oc-plan .g circle{fill:#f1f1f1;stroke:#6b6b6b;stroke-width:1}
.oc-plan .g text{font:500 8.5px var(--oc-ui);fill:#6b6b6b;text-anchor:middle}
.oc-plan .s rect,.oc-plan .s circle{fill:color-mix(in srgb,var(--bleu) 10%,#fff);stroke:var(--bleu);stroke-width:1.8}
.oc-plan .s text{font:600 10px var(--pixel);fill:var(--bleu)}
.oc-plan .cote line{stroke:#8a8a8a;stroke-width:.8}
.oc-plan .cote text{font:400 8.5px var(--oc-ui);fill:#6b6b6b;text-anchor:middle}
.oc-svg-b{font:600 10.5px var(--pixel);fill:var(--bleu)}
.oc-svg-t{font:400 10.5px var(--serif);fill:#333}
.oc-svg-g{font:400 8px var(--oc-ui);fill:#6b6b6b}
.oc-sel{fill:#f3efe8;stroke:var(--bleu);stroke-width:1.6}
.oc-rendu__sel path{fill:#f8f6f1;stroke:var(--bleu);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.oc-rendu__obj path{fill:#f8f6f1;stroke:#b3ab9c;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.oc-vue{position:relative}
.oc-tag{position:absolute;right:0.5rem;bottom:0.5rem;font:500 0.75rem/1 var(--pixel);color:var(--rouge-texte);background:#fff;border:1.5px solid var(--ecarlate);padding:0.25rem 0.375rem 0.1875rem;white-space:nowrap}
.oc-tag--haut{right:auto;left:0.5rem;bottom:auto;top:0.5rem;color:#444;border:0;background:rgba(255,255,255,.9);font-size:0.71875rem}

/* dessins : démonstration (02) */
.oc-cl{fill:none;stroke:var(--bleu);stroke-width:2.2;stroke-linecap:square;transition:stroke .3s}
.oc-cl-n{fill:none;stroke:#4a4a4a;stroke-width:2.2;stroke-linecap:square}
.oc-mb rect{fill:color-mix(in srgb,var(--bleu) 7%,#fff);stroke:var(--bleu);stroke-width:.8;transition:fill .3s,stroke .3s}
.oc-mb-n rect{fill:#f1f1f1;stroke:#8a8a8a;stroke-width:.8}
.oc-pc text{font:600 6.6px var(--pixel);fill:var(--bleu);letter-spacing:.02em;transition:fill .3s}
.oc-pc text:not([text-anchor]):not([class]){text-anchor:middle}
.oc-att rect{fill:color-mix(in srgb,var(--ecarlate) 8%,#fff);stroke:var(--ecarlate);stroke-width:1.2;stroke-dasharray:3 2;transition:fill .3s,stroke .3s}
.oc-att text{font:600 6.6px var(--pixel);fill:var(--rouge-texte);transition:fill .3s}
.oc-att text:not([text-anchor]):not([class]){text-anchor:middle}
.oc-att .oc-pan__carre{fill:var(--ecarlate);stroke:none}
.oc-att .oc-pan__r{font:500 7.6px var(--oc-ui);fill:var(--rouge-texte)}
.oc-att .oc-pan__g,.oc-att .oc-svg-g{font:400 7px var(--oc-ui);fill:#6b6b6b}
.oc-att .oc-att__t{font:600 8.5px var(--pixel)}
.oc-pan{fill:#f6f6f6;stroke:#dcdcdc}
.oc-pan__t{font:600 8px var(--oc-ui);fill:#333}
.oc-pan__filet{stroke:#dcdcdc}
.oc-pan__l{font:400 7.6px var(--oc-ui);fill:#333}
.oc-pan__g{font:400 7px var(--oc-ui);fill:#6b6b6b}
.oc-pan__ok path{fill:none;stroke:#2b2b2b;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.oc-brief text{font:400 7.6px var(--oc-ui);fill:#333}
.oc-cote-g line{stroke:#8a8a8a;stroke-width:.7}
.oc-cote-g text{font:400 7px var(--oc-ui);fill:#6b6b6b;text-anchor:middle}
.oc-graphite path{fill:none;stroke:#5d5a54;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.oc-main{font:italic 400 11px var(--serif);fill:#5d5a54}
.oc-f-m{font:500 6.4px var(--oc-ui);fill:#6a6a6a;letter-spacing:.06em}
.oc-f-n{font:500 15px var(--oc-ui);fill:#222}
.oc-f-g{font:400 8px var(--oc-ui);fill:#6a6a6a}
.oc-f-p{font:600 11px var(--oc-ui);fill:#222}
.oc-f-v{font:400 8px var(--oc-ui);fill:#222}
.oc-f-b{font:500 7.5px var(--oc-ui);fill:#fff}
.oc-lu-s rect{fill:var(--bleu);transition:fill .3s}
.oc-banquette .haut{fill:#d2b287}.oc-banquette .face{fill:#a8845a}.oc-banquette .long{fill:#bf9a6c}.oc-banquette .niche{fill:#5e4831}
.oc-elev rect{fill:none;stroke:#2b2b2b;stroke-width:1}
.oc-cote-b line{stroke:var(--bleu);stroke-width:.8}
.oc-cote-b text{font:500 7.5px var(--pixel);fill:var(--bleu);text-anchor:middle}
.oc-cote-t{font:500 7.5px var(--pixel);fill:var(--bleu)}
.oc-puce rect{fill:color-mix(in srgb,var(--bleu) 8%,#fff);stroke:var(--bleu);stroke-width:.8}
.oc-puce text{font:500 7px var(--pixel);fill:var(--bleu)}
.oc-cam path{fill:none;stroke:#2b2b2b;stroke-width:.9;stroke-dasharray:3 2}
.oc-cam rect{fill:#2b2b2b}
.oc-cam text{font:600 6.6px var(--pixel);fill:#2b2b2b}
.oc-gab rect{fill:none;stroke:#c9c9c9;stroke-width:.8}
.oc-gab rect.t{fill:#e6e6e6;stroke:none}
.oc-gab path{fill:none;stroke:#dcdcdc;stroke-width:.6}
.oc-livret-ref text{font:600 7.5px var(--pixel);fill:var(--bleu)}

/* ---------- 01 · Le constat : une nomenclature ---------- */
.oc-nomenclature{width:100%;border-collapse:collapse;border-top:1.5px solid var(--oc-encre);border-bottom:1.5px solid var(--oc-encre)}
.oc-nomenclature thead th{font:500 0.8125rem/1.2 var(--pixel);text-align:left;color:var(--oc-gris);padding:0.5625rem 1.125rem 0.5625rem 0;border-bottom:1px solid var(--oc-encre);font-weight:500}
.oc-nomenclature tbody tr{border-bottom:1px solid var(--oc-filet);cursor:pointer;transition:background .15s}
.oc-nomenclature tbody tr:last-child{border-bottom:0}
.oc-nomenclature tbody tr:hover{background:var(--oc-carte)}
.oc-nomenclature td,.oc-nomenclature tbody th{padding:clamp(0.5rem,1.7vh,1.0625rem) 1.125rem clamp(0.5rem,1.7vh,1.0625rem) 0;vertical-align:baseline;text-align:left;font-weight:400}
.oc-nomenclature .n{font:400 1rem/1 var(--silk);color:var(--bleu);width:3.25rem;padding-left:0.25rem}
.oc-nomenclature tbody th{font:400 1.5rem/1.15 var(--serif);color:var(--oc-encre);width:31%}
.oc-nomenclature td.ph{font:500 0.8125rem/1.2 var(--pixel);color:var(--oc-gris);width:6.5rem;white-space:nowrap}
.oc-nomenclature td.avec{color:var(--oc-encre);font-size:1.0625rem;line-height:1.4}
.oc-nomenclature td.avec i{font-style:normal;color:var(--bleu);padding:0 .2em}
.oc-nomenclature td.avec b{font-weight:400;color:var(--bleu)}
.oc-nomenclature td.voir{width:2.25rem;padding-right:0.25rem;text-align:right}
.oc-nomenclature td.voir a{display:inline-block;font:500 1.125rem/1 var(--pixel);color:var(--bleu);text-decoration:none;padding:0.25rem 0.375rem;transition:transform .2s}
.oc-nomenclature tbody tr:hover td.voir a{transform:translateX(0.1875rem)}

/* ---------- 02 · Comment ça marche : l'échelle graphique sert de navigation ---------- */
.oc-phases{display:grid;grid-template-columns:1.4fr 1.4fr 1.1fr 1.1fr;margin:0 0 clamp(0.75rem,2.2vh,1.375rem)}
.oc-phase{min-width:0;display:flex;flex-direction:column}
.oc-phase__nom{margin:0 0 0.375rem;display:flex;align-items:baseline;gap:0.5rem;font:500 0.8125rem/1.2 var(--pixel);color:var(--oc-gris);padding-right:0.75rem;flex-wrap:wrap;white-space:normal}
.oc-phase__nom b{font:400 1rem/1 var(--silk);color:var(--bleu)}
.oc-phase__barre{display:block;height:0.5625rem;box-sizing:border-box;border:1.5px solid var(--bleu);border-left-width:0;background:var(--bleu)}
.oc-phase:first-child .oc-phase__barre{border-left-width:1.5px}
.oc-phase__onglets{display:flex;flex:1;gap:0.375rem;padding:0.5rem 0.75rem 0 0}
.oc-phase__onglets [role=tab]{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.4375rem;position:relative;cursor:pointer;flex:1 1 0;min-width:0;padding:0.5rem 0.625rem 0.4375rem;border:1px solid var(--bleu);background:var(--papier);color:var(--bleu);font:500 0.875rem/1.25 var(--pixel);text-align:center;white-space:normal;overflow:hidden;transition:background .15s,color .15s}
.oc-tab__repere{flex:none;font:400 1rem/1 var(--silk)}
.oc-tab__libelle{min-width:0;text-wrap:balance;overflow-wrap:anywhere}
.oc-phase__onglets [role=tab]:hover{background:color-mix(in srgb,var(--bleu) 8%,var(--papier))}
.oc-phase__onglets [role=tab][aria-selected=true]{background:var(--bleu);color:var(--papier)}
.oc-phase__onglets [role=tab][aria-selected=true]::after{content:"";position:absolute;left:50%;bottom:-0.375rem;width:0.625rem;height:0.625rem;background:var(--bleu);transform:translateX(-50%) rotate(45deg)}
.oc-phase__onglets [role=tab]:focus-visible{outline:2px solid var(--bleu);outline-offset:0.1875rem}
.oc-taches{border:1px solid var(--bleu);background:var(--oc-carte);padding:clamp(0.75rem,2vh,1.25rem) clamp(0.875rem,1.8vw,1.5rem)}
.oc-tache[hidden]{display:none}
.oc-flux{display:grid;grid-template-columns:minmax(0,1fr) clamp(10.625rem,16vw,14.5rem) minmax(0,1fr);align-items:stretch}
.oc-flux__col{min-width:0;display:flex;flex-direction:column}
.oc-flux__tete{margin:0 0 0.5rem;display:flex;align-items:baseline;gap:0.5rem;font:500 0.875rem/1.3 var(--pixel);color:var(--oc-encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-flux__tete b,.oc-flux__n b{display:inline-block;font:600 0.8125rem/1 var(--pixel);color:var(--bleu);border:1px solid var(--bleu);padding:2px 0.3125rem 1px;flex:none}
.oc-flux__l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.oc-flux__l em{font-style:normal;color:var(--oc-gris)}
.oc-flux__tete strong{font-weight:600}
.oc-win__corps{height:clamp(8.75rem,calc(100svh - 35rem),18.75rem);overflow:hidden;background:#fff}
.oc-win__corps .oc-dessin{width:100%;height:100%}
.oc-win--doc .oc-win__corps{background:#e6e6e6}
.oc-win--photo .oc-win__corps{background:#3b3d40}
.oc-win--id .oc-win__corps{background:#3b3b3b}
.oc-win--bl .oc-win__corps{background:#d9d3c8}
.oc-flux__oc{position:relative;display:flex;align-items:center;justify-content:center;padding:1.75rem clamp(0.625rem,1.2vw,1.125rem) 0}
.oc-flux__oc::before{content:"";position:absolute;left:0;right:0.375rem;top:calc(50% + 0.875rem);height:1.5px;background:var(--bleu)}
.oc-flux__oc::after{content:"";position:absolute;right:0;top:calc(50% + 0.875rem);transform:translateY(-45%);border:0.375rem solid transparent;border-left:0.5rem solid var(--bleu);border-right:0}
.oc-flux__bloc{position:relative;z-index:1;background:var(--oc-carte);padding:0.625rem 0.375rem;text-align:center}
.oc-flux__n{margin:0 0 0.375rem;display:flex;align-items:baseline;justify-content:center;gap:0.4375rem;font:500 0.875rem/1.3 var(--pixel);color:var(--oc-encre)}
.oc-flux__clic{margin:0 0 0.25rem;font:italic 400 1.5rem/1.1 var(--serif);color:var(--bleu)}
.oc-flux__txt{margin:0;font-size:1.0625rem;line-height:1.4;text-wrap:pretty}
.oc-valide{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem 1.125rem;margin-top:clamp(0.5rem,1.6vh,0.875rem);padding-top:clamp(0.5rem,1.6vh,0.875rem);border-top:1px solid var(--oc-filet)}
.oc-valide p{margin:0;flex:1 1 20rem;font-size:1.0625rem;line-height:1.4}
.oc-valide__q i{display:inline-block;width:0.5625rem;height:0.5625rem;background:var(--ecarlate);margin-right:0.5625rem;vertical-align:1px}
.oc-valide__q b{font:500 0.875rem/1 var(--pixel);color:var(--rouge-texte);margin-right:0.25rem}
.oc-valide__btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;font:500 0.875rem/1 var(--pixel);color:var(--papier);background:var(--bleu);padding:0.6875rem 1rem 0.625rem;box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate);transition:transform .15s,box-shadow .15s}
.oc-valide__btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ecarlate)}
.oc-valide__btn:focus-visible{outline:2px solid var(--bleu);outline-offset:0.25rem}
.oc-valide__ok{display:none}
.oc-valide__ok b{font:500 0.875rem/1 var(--pixel);color:var(--bleu);margin-right:0.25rem}
.oc-valide__ok button{all:unset;cursor:pointer;margin-left:0.5rem;font:500 0.875rem/1 var(--pixel);color:var(--oc-encre);text-decoration:underline;text-underline-offset:0.1875rem}
.oc-valide__ok button:focus-visible{outline:2px solid var(--bleu);outline-offset:0.1875rem}
.oc-tache[data-valide] .oc-valide__q,.oc-tache[data-valide] .oc-valide__btn{display:none}
.oc-tache[data-valide] .oc-valide__ok{display:block}
/* validé : ce qu'Octavec proposait (bleu) et ce qui attendait (rouge) passent à l'encre, comme le reste du fichier */
.oc-tache[data-valide] .oc-cl{stroke:#2b2b2b}
.oc-tache[data-valide] .oc-mb rect{fill:#f1f1f1;stroke:#8a8a8a}
.oc-tache[data-valide] .oc-pc text,.oc-tache[data-valide] .oc-livret-ref text{fill:#2b2b2b}
.oc-tache[data-valide] .oc-att:not(.oc-att--reste) rect{fill:#f1f1f1;stroke:#8a8a8a;stroke-dasharray:none}
.oc-tache[data-valide] .oc-att:not(.oc-att--reste) text{fill:#2b2b2b}
.oc-tache[data-valide] .oc-att:not(.oc-att--reste) .oc-pan__carre{fill:#8a8a8a}
.oc-tache[data-valide] .oc-lu-s rect{fill:transparent}
.oc-tache[data-valide] .oc-xl tr.sel td{background:#fff;color:#262626;box-shadow:none}
.oc-tache[data-valide] .oc-xl td.oc-att-cel{box-shadow:none!important;color:#262626!important}
.oc-tache[data-valide] .oc-att-tag{display:none}
.oc-fiab{margin:clamp(0.5rem,1.4vh,0.875rem) 0 0;font-size:1.0625rem;line-height:1.45;color:var(--oc-gris)}
.oc-fiab b{color:var(--oc-encre);font-weight:600}

/* ---------- 03 · Vos données : un cartouche régulier ---------- */
.oc-cartouche{border:1.5px solid var(--oc-encre);background:var(--oc-carte)}
.oc-cartouche__titre{display:grid;grid-template-columns:1fr;align-items:stretch;margin:0;border-bottom:1.5px solid var(--oc-encre);font:500 0.875rem/1.3 var(--pixel);color:var(--oc-encre)}
.oc-cartouche__titre > span{display:flex;align-items:center;padding:0.6875rem 1.125rem}
.oc-cartouche__titre > span + span{border-left:1px solid var(--oc-encre)}
.oc-cartouche__titre .oc-cartouche__objet{font:400 1.5rem/1.15 var(--serif);color:var(--bleu)}
.oc-cartouche__grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--oc-encre);margin:0}
.oc-cartouche__grille > div{background:var(--oc-carte);padding:clamp(0.75rem,2vh,1.125rem) 1.125rem clamp(0.875rem,2.2vh,1.25rem)}
.oc-cartouche dt{font:500 0.875rem/1.2 var(--pixel);color:var(--bleu);margin:0 0 0.5rem}
.oc-cartouche dd{margin:0;font-size:1.0625rem;line-height:1.42}

/* ---------- 04 · Rendez-vous ---------- */
.oc-rdv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center;width:100%;box-sizing:border-box}
.oc-rdv__chapo{margin:clamp(0.625rem,1.8vh,1.125rem) 0 0;font-size:1.5rem;line-height:1.3;max-width:28em}
.oc-qr{margin:clamp(0.75rem,2.4vh,1.5rem) 0 0;padding-top:clamp(0.625rem,1.8vh,1rem);border-top:1px solid var(--oc-filet);display:grid;gap:clamp(0.5rem,1.6vh,0.875rem)}
.oc-qr div{margin:0}
.oc-qr dt{font:600 1.0625rem/1.3 var(--serif);color:var(--oc-encre);margin:0 0 2px}
.oc-qr dd{margin:0;font-size:1.0625rem;line-height:1.45;color:var(--oc-gris)}
.oc-adresse{margin:clamp(0.75rem,2.2vh,1.375rem) 0 0;font:500 0.875rem/1.5 var(--pixel);display:flex;gap:0.625rem;align-items:center;flex-wrap:wrap}
.oc-adresse button{all:unset;cursor:pointer;font:500 0.8125rem/1 var(--pixel);border:1px solid var(--bleu);color:var(--bleu);padding:0.375rem 0.5rem}
.oc-adresse button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.oc-form{border:1px solid var(--bleu);background:var(--oc-carte);padding:clamp(1rem,2.6vh,1.625rem) 1.625rem clamp(1.125rem,2.8vh,1.75rem);box-shadow:0.375rem 0.375rem 0 var(--ecarlate)}
.oc-form fieldset{border:0;margin:0 0 clamp(0.625rem,1.8vh,1rem);padding:0;min-width:0}
.oc-form legend,.oc-form label > span{display:block;font:500 0.875rem/1.3 var(--pixel);color:var(--oc-encre);margin-bottom:0.375rem;padding:0}
.oc-form label{display:block;margin-bottom:clamp(0.625rem,1.8vh,1rem)}
.oc-form .oc-intention{display:grid;gap:0.5rem}
.oc-form .oc-intention label{display:flex;gap:0.625rem;align-items:center;margin:0;border:1px solid var(--oc-filet);background:var(--papier);padding:0.5625rem 0.75rem;cursor:pointer;font-size:1.0625rem;line-height:1.3}
.oc-form .oc-intention label:has(input:checked){border-color:var(--bleu);box-shadow:inset 0.1875rem 0 0 var(--bleu)}
.oc-form .oc-intention label > span{display:block;font:400 1.0625rem/1.3 var(--serif);margin:0;color:var(--oc-encre)}
.oc-intention small{display:block;margin-top:2px;font:500 0.8125rem/1.3 var(--pixel);color:var(--oc-gris)}
.oc-intention input{accent-color:var(--bleu);width:1rem;height:1rem;margin:0;flex:none}
.oc-form input[type=text],.oc-form select{width:100%;box-sizing:border-box;font:400 1.0625rem/1.4 var(--serif);color:var(--oc-encre);background:#fff;border:1px solid #a8a194;border-radius:0;padding:0.5625rem 0.75rem}
.oc-form input:focus,.oc-form select:focus{outline:2px solid var(--bleu);outline-offset:0;border-color:var(--bleu)}
.oc-deux{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem}
.oc-form .oc-cta{margin-top:0.25rem}
.oc-form__note{margin:0.875rem 0 0;font:500 0.8125rem/1.45 var(--pixel);color:var(--oc-gris)}

/* ---------- Apparitions au défilement, une seule fois ---------- */
@media (prefers-reduced-motion:no-preference){
  html.oc-js .oc-apparait{opacity:0;transform:translateY(1rem);transition:opacity .45s cubic-bezier(.2,0,0,1),transform .45s cubic-bezier(.2,0,0,1)}
  html.oc-js .oc-apparait.vu{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .oc-cta,.oc-cta__l span,.oc-cl,.oc-mb rect,.oc-att rect,.oc-att text,.oc-pc text,.oc-lu-s rect,.oc-xl tr.sel td{transition:none}
}

/* ---------- Écrans moyens (tablettes, petits portables) ---------- */
@media (max-width:1280px){.oc-nav{display:none}}
@media (max-width:1180px){
  .oc-nav{display:none}
  .oc-hero__grille{grid-template-columns:1fr;gap:2.5rem}
  .oc-hero__texte{max-width:47.5rem}
  .oc-tete-sec{grid-template-columns:1fr;gap:0.75rem}
  .oc-phase__nom span{display:none}
  .oc-phase__onglets [role=tab]{white-space:normal;min-height:3.25rem;display:flex;align-items:center;justify-content:center;line-height:1.2}
  .oc-flux{grid-template-columns:minmax(0,1fr) 8.125rem minmax(0,1fr)}
  .oc-flux__txt{font-size:1rem}
  .oc-cartouche__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .oc-rdv{grid-template-columns:1fr;gap:2.25rem}
}

/* ---------- Téléphone ---------- */
@media (max-width:760px){
  .oc{--oc-tete:3.75rem}
  .oc-sec{padding:3.5rem 0}
  .oc-tete .btn-ambre{padding:0.625rem 0.75rem}
  .oc h1{font-size:2.625rem}
  .oc-hero__sous{font-size:1.3125rem}
  .oc-actions{flex-direction:column;align-items:flex-start}
  .oc-quatre{gap:1.625rem 1rem;padding:0}
  .oc-win__barre{height:1.375rem;font-size:0.6875rem;padding:0 0.4375rem;gap:0.375rem}
  .oc-win__barre::before{width:1.25rem;height:0.375rem;background-size:0.4375rem 0.375rem}
  .oc-win__fic{display:none}
  .oc-win--web .oc-win__fic{display:block;padding:2px 0.4375rem;font-size:0.6875rem}
  .oc-ref{padding:0.375rem 0.5625rem 0.4375rem;box-shadow:0.1875rem 0.1875rem 0 var(--ecarlate)}
  .oc-ref b{font-size:0.78125rem}.oc-ref small{display:none}
  .oc-tag{font-size:0.65625rem;padding:0.1875rem 0.25rem 2px}
  .oc-tag:not(.oc-tag--haut){right:0.3125rem;bottom:0.3125rem}
  .oc-tag--haut{left:0.3125rem;top:0.3125rem}
  .oc-legende{grid-template-columns:auto 1fr}
  .oc-legende .oc-cles{grid-column:1/-1;border-left:0;border-top:1px solid var(--bleu);flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:0.375rem 1rem}
  .oc-pl{gap:0.75rem}
  .oc-pl span{font-size:1rem;padding:0.375rem 0.5rem 0.25rem}
  .oc h2{font-size:2.0625rem}
  .oc-chapo{font-size:1.0625rem}
  /* nomenclature : une fiche par tâche (phase, livrable, ce qu'Octavec en fait) */
  .oc-nomenclature thead{display:none}
  .oc-nomenclature,.oc-nomenclature tbody,.oc-nomenclature tr{display:block}
  .oc-nomenclature tbody tr{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1.75rem;gap:0.1875rem 0;padding:0.875rem 0}
  .oc-nomenclature td,.oc-nomenclature tbody th{display:block;padding:0;width:auto!important}
  .oc-nomenclature .n{grid-row:1/3;grid-column:1;padding-top:0.1875rem}
  .oc-nomenclature td.ph{grid-row:1;grid-column:2}
  .oc-nomenclature tbody th{grid-row:2;grid-column:2;font-size:1.375rem}
  .oc-nomenclature td.voir{grid-row:1/3;grid-column:3;align-self:center}
  .oc-nomenclature td.avec{grid-row:3;grid-column:2/4;margin-top:2px}
  /* l'échelle : les phases en titres, les onglets en grille */
  .oc-phases{grid-template-columns:1fr;gap:0.75rem}
  .oc-phase__nom span{display:inline}
  .oc-phase__onglets{padding-right:0}
  .oc-phase .oc-phase__barre{border-left-width:1.5px;height:0.375rem}
  .oc-phase__onglets [role=tab]{font-size:0.84375rem;padding:0.5625rem 0.5rem 0.5rem}
  .oc-taches{padding:0.875rem 0.75rem 1rem;margin:0 -0.375rem}
  .oc-flux{grid-template-columns:minmax(0,1fr)}
  .oc-flux__oc{padding:0.875rem 0}
  .oc-flux__oc::before{left:50%;right:auto;top:0;bottom:0.5rem;width:1.5px;height:auto}
  .oc-flux__oc::after{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);border:0.375rem solid transparent;border-top:0.5rem solid var(--bleu);border-bottom:0}
  .oc-win__corps{height:auto;aspect-ratio:16/9.5}
  .oc-win__corps--html{aspect-ratio:auto}
  .oc-flux__tete{white-space:normal}
  .oc-valide p{flex-basis:100%}
  .oc-cartouche__grille{grid-template-columns:1fr}
  .oc-form{padding:1.125rem 1rem 1.25rem}
  .oc-deux{grid-template-columns:1fr;gap:0}
}

/* ---------- Le film : un lien dans le haut de page, la lecture dans une boîte de dialogue ----------
   Rien ne se charge avant le clic (preload="none", affiche posée par octavec.js) ; la vidéo tient dans la fenêtre,
   en largeur comme en hauteur. Cadre Klein, sans ombre écarlate : ce n'est pas un bouton. */
.oc-liens{display:flex;flex-wrap:wrap;align-items:center;gap:0.875rem 1.75rem;margin:0}
.oc .lien--film span{vertical-align:0}
.oc .lien--film svg{display:block;fill:currentColor}
.oc-film{width:min(77.5rem,calc(100vw - 2rem),calc((100vh - 10.625rem) * 16 / 9));max-width:none;max-height:calc(100vh - 1.5rem);padding:0;
  border:2px solid var(--bleu);background:var(--papier);color:var(--oc-encre);overflow:auto}
.oc-film::backdrop{background:color-mix(in srgb,var(--oc-encre) 80%,transparent)}
.oc-film__tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.625rem 1rem;border-bottom:1px solid var(--oc-filet)}
.oc-film__titre{margin:0;font:500 0.875rem/1.3 var(--pixel);color:var(--bleu)}
.oc-film__fermer{font:500 0.875rem/1 var(--pixel);color:var(--bleu);background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:0.4375rem 0;cursor:pointer}
.oc-film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--papier)}
.oc-film__legende{margin:0;padding:0.6875rem 1rem 0.8125rem;font:400 1rem/1.45 var(--serif);color:var(--oc-gris)}
html.oc-film-ouvert{overflow:hidden}

/* ===================== 23 octobre : la page relue (remake validé par Paul : planches 01, 02, 04, 05, 06) =====================
   R1 : la validation sous le résultat · R2 : les six tâches par phase · R3 : le cartouche · R4, R7 : le formulaire et son retour
   R5 : l'onglet Pause · R9 : la section 02 ne bouge plus d'un onglet à l'autre (nécessaire à R1) */
/* R2 · 01 : les tâches rangées par phase, un pictogramme du livrable, le nom de la tâche est le lien */
.oc-nomenclature--phases td,.oc-nomenclature--phases tbody th{vertical-align:middle}
.oc-nomenclature--phases .oc-ph{cursor:default;border-bottom:0}
.oc-nomenclature--phases .oc-ph:hover{background:none}
@media (min-width:761px){ .oc-nomenclature--phases tbody tr:not(.oc-ph) td,.oc-nomenclature--phases tbody tr:not(.oc-ph) th{padding-top:clamp(0.375rem,1.2vh,0.75rem);padding-bottom:clamp(0.375rem,1.2vh,0.75rem)} }
.oc-nomenclature--phases .oc-ph th{padding:clamp(0.625rem,1.5vh,0.9375rem) 0 0.375rem;font:500 0.8125rem/1.2 var(--pixel);color:var(--oc-gris);border-bottom:1px solid var(--oc-encre);width:auto}
.oc-nomenclature--phases tbody:first-of-type .oc-ph th{padding-top:clamp(0.375rem,1vh,0.625rem)}
.oc-nomenclature--phases .oc-ph th b{font:400 1rem/1 var(--silk);color:var(--bleu);margin-right:0.625rem}
.oc-nomenclature--phases tbody tr:last-child{border-bottom:0}
.oc-nomenclature--phases td.pic{width:3.5rem;padding-right:0.875rem}
.oc-pic{display:block;width:2.625rem;height:1.75rem;fill:none;stroke:var(--bleu);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.oc-pic .m{stroke-width:2.6}
.oc-pic .fin{stroke-width:1}
.oc-pic .f{fill:color-mix(in srgb,var(--bleu) 16%,transparent);stroke-width:1}
.oc-pic .sel{fill:color-mix(in srgb,var(--bleu) 18%,transparent)}
.oc-pic .crayon{stroke:var(--oc-gris);stroke-width:1.3}
.oc-nomenclature--phases tbody th{width:30%}
.oc-nomenclature--phases tbody th a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .2s}
.oc-nomenclature--phases tbody tr:hover th a,.oc-nomenclature--phases tbody th a:focus-visible{background-size:100% 1px}

/* R1 · 02 : la décision posée sous le résultat, là où se trouve ce qui attend */
.oc-flux__col > .oc-valide{margin-top:0.625rem;padding:0.6875rem 0.875rem 0.75rem;border:1.5px solid var(--ecarlate);background:color-mix(in srgb,var(--ecarlate) 5%,var(--oc-carte));gap:0.625rem 0.875rem}
.oc-flux__col > .oc-valide p{flex:1 1 13.75rem}
.oc-tache[data-valide] .oc-flux__col > .oc-valide{border-color:var(--bleu);background:color-mix(in srgb,var(--bleu) 5%,var(--oc-carte))}

/* R3 · 03 : trois engagements en grand, le reste sur une ligne */
.oc-cartouche__grille--forts{grid-template-columns:repeat(3,minmax(0,1fr))}
.oc-cartouche__grille--forts > div{padding:clamp(0.875rem,2.2vh,1.375rem) 1.25rem clamp(1rem,2.4vh,1.5rem)}
.oc-cartouche__grille--forts dd{font:400 1.5rem/1.25 var(--serif);color:var(--oc-encre)}
.oc-cartouche__suite{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;padding:0.75rem 1.25rem;border-top:1.5px solid var(--oc-encre);font:500 0.875rem/1.4 var(--pixel);color:var(--oc-gris)}

/* R4 · 04 : deux champs (la case « agence fondatrice » est retirée le 23 octobre) */

/* R5 · haut de page : l'onglet de la vidéo à 14 px (la taille des libellés), sans capitales */
.oc-legende > .oc-anim__bouton{font:500 0.875rem/1 var(--pixel);letter-spacing:0;text-transform:none}

/* R7 · 04 : le retour après « Préparer l'e-mail » ; sans messagerie, l'e-mail se copie */
.oc-form__etat{margin:0.875rem 0 0;padding:0.625rem 0.75rem 0.6875rem;border-left:0.1875rem solid var(--bleu);background:color-mix(in srgb,var(--bleu) 6%,var(--oc-carte));font:400 1rem/1.5 var(--serif);color:var(--oc-encre)}
.oc-form__etat:empty{display:none}
.oc-form__etat b{font-weight:600;color:var(--bleu)}
.oc-form__etat button{all:unset;cursor:pointer;font:500 0.8125rem/1 var(--pixel);border:1px solid var(--bleu);color:var(--bleu);background:var(--papier);padding:0.3125rem 0.4375rem 0.25rem;white-space:nowrap}
.oc-form__etat button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}

/* R9 · 02 : rien ne bouge quand on change d'onglet. La section garde sa largeur (elle se calait sur le contenu
   de l'onglet ouvert) et la zone des panneaux garde une hauteur, celle du plus haut (panneaux superposés). */
@media (min-width:1000px) and (min-height:600px){ .oc-ecran > .wrap{width:100%} }
@media (min-width:1000px) and (max-width:1180px){ .oc-win__corps{height:clamp(8.75rem,calc(100svh - 36.5rem),18.75rem)} }
@media (min-width:761px){
  .oc-taches{display:grid}
  .oc-taches > .oc-tache{grid-area:1/1}
  .oc-taches > .oc-tache[hidden]{display:block;visibility:hidden}
}

@media (max-width:760px){
  .oc-nomenclature--phases tbody th a{display:inline-block;padding:0.25rem 0}
  .oc-nomenclature--phases tbody{display:block}
  .oc-nomenclature--phases .oc-ph{display:block;padding:0}
  .oc-nomenclature--phases .oc-ph th{display:block;padding:1.125rem 0 0.375rem}
  .oc-nomenclature--phases tbody tr:not(.oc-ph){grid-template-columns:2.125rem 3.75rem minmax(0,1fr);align-items:center}
  .oc-nomenclature--phases .n{grid-row:1;grid-column:1;padding-top:0}
  .oc-nomenclature--phases td.pic{grid-row:1;grid-column:2;padding:0}
  .oc-nomenclature--phases tbody tr:not(.oc-ph) th{grid-row:1;grid-column:3;font-size:1.375rem}
  .oc-nomenclature--phases td.avec{grid-row:2;grid-column:2/4;margin-top:0.375rem}
  .oc-cartouche__grille--forts{grid-template-columns:1fr}
}

/* 23 octobre (demande de Paul) : le logo Almil Agentic, la pastille à l'œil de la pieuvre (01-logo/almil-logo-pastille,
   fond transparent, réduite à 128 px), à gauche d'« Octavec » ; elle mène à l'accueil, comme « par Almil Agentic ».
   Règles du logo : pas sous 32 px, une marge d'au moins un quart de la pastille autour. */
.oc-marque{gap:0.875rem;--pastille:2.5rem}
.oc-marque__logo{align-self:center;display:block;flex:none;line-height:0;border-radius:50%}
.oc-marque__logo img{display:block;width:var(--pastille);height:var(--pastille)}
/* 23 octobre, 19 h 16 (Paul, option A) : fil d'Ariane « Almil Agentic / Octavec ». La pastille et « Almil Agentic »
   mènent à l'accueil (un seul lien pour les lecteurs d'écran : celui du texte ; la pastille est un doublon caché) ;
   « Octavec » est la page en cours. Sur téléphone : « Almil / Octavec », bouton un peu plus petit. */
.oc-marque__almil{font:var(--marque-poids) 1.4375rem/1 var(--marque);color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.3125rem}
.oc-marque__almil:hover{text-decoration-thickness:2px}
.oc-marque__sep{font:300 1.875rem/1 var(--serif);opacity:.45;margin:0 -2px}
@media (max-width:760px){
  .oc-marque{--pastille:2.125rem;gap:0.5rem}
  .oc-marque__almil{font-size:1.1875rem}
  .oc-marque__ag{display:none}
  .oc-marque__sep{font-size:1.5rem}
  .oc-marque__nom{font-size:1.1875rem}
  .oc-tete__in{gap:0.875rem}
  .oc-tete .btn-ambre{font-size:0.8125rem;padding:0.625rem}
}
/* petits téléphones : pastille à 32 px (le minimum du kit), écarts et bouton resserrés */
@media (max-width:380px){
  .oc-marque{--pastille:2rem;gap:0.375rem}
  .oc-marque__almil{font-size:1.125rem}
  .oc-marque__nom{font-size:1.125rem}
  .oc-tete__in{gap:0.625rem}
  .oc-tete .btn-ambre{font-size:0.75rem;padding:0.625rem 0.5rem}
}
/* très petits téléphones (moins de 341 px) : la place manque pour « Almil / » ; la pastille seule mène à l'accueil */
@media (max-width:340px){
  .oc-marque__almil,.oc-marque__sep{display:none}
  .oc-marque{gap:0.625rem}
}

/* 23 octobre, 11 h 24 : les engagements sur les données, en cinq cases sous les trois engagements forts
   (contrat, traitement, hébergement, entraînement, conservation) */
.oc-cartouche__grille--donnees{grid-template-columns:repeat(5,minmax(0,1fr));border-top:1.5px solid var(--oc-encre)}
.oc-cartouche__grille--donnees > div{padding:clamp(0.625rem,1.6vh,0.875rem) 1rem clamp(0.75rem,1.8vh,1rem)}
.oc-cartouche__grille--donnees dt{font-size:0.8125rem;margin-bottom:0.375rem}
.oc-cartouche__grille--donnees dd{font-size:0.9375rem;line-height:1.38}
.oc-cartouche__grille--donnees .oc-afaire{margin:0.375rem 0 0;display:table}
@media (max-width:1180px){
  .oc-cartouche__grille--donnees{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .oc-cartouche__grille--donnees{grid-template-columns:1fr}
}