@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Spectral+SC:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');

/* ════════════════════════════════════════════════════════════════════
   oltlo.css ◆ feuille unique du site oltlo.com.
   Fusion : polices (ex-fonts.css) + socle app (ex-oltlo-v3.css) +
   skins/lecteur/primitives (ex-v5.css). La couche typo skin-equilibre.css
   reste à part (chargée partout). Servi en prod : oltlo.min.css (build.mjs).
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ POLICES (ex-fonts.css) ═══════════ */
/* olTlo · polices locales (récupérées dans /Police après suppression de front-v3)
   Educateursportif = display (titres/labels) · Journal = serif de contenu. */
@font-face{
  font-family:'Educateursportif';
  src:url('../Police/Educateursportif.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Journal';
  src:url('../Police/Journal.woff2') format('woff2');
  font-display:swap;
}
/* Oltlo Serif = police de LECTURE maison (dérivée de Spectral, OFL).
   Patte : points en losange ◎ + esperluette calligraphique redressée. */
@font-face{
  font-family:'Oltlo Serif'; font-weight:400; font-style:normal;
  src:url('../Police/OltloSerif-Regular.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Serif'; font-weight:600; font-style:normal;
  src:url('../Police/OltloSerif-SemiBold.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Serif'; font-weight:400; font-style:italic;
  src:url('../Police/OltloSerif-Italic.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Serif'; font-weight:600; font-style:italic;
  src:url('../Police/OltloSerif-SemiBoldItalic.woff2') format('woff2');
  font-display:swap;
}
/* Oltlo Titre = TITRES romains maison (dérivée de Cinzel, OFL) : pointes gardées
   + séparateurs en losange ◎ + esperluette & et apostrophe du système (450/600/700). */
@font-face{
  font-family:'Oltlo Titre'; font-weight:400; font-style:normal;
  src:url('../Police/OltloTitre-Regular.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Titre'; font-weight:600; font-style:normal;
  src:url('../Police/OltloTitre-SemiBold.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Titre'; font-weight:700; font-style:normal;
  src:url('../Police/OltloTitre-Bold.woff2') format('woff2');
  font-display:swap;
}
/* Oltlo Mono = l'écrit tout petit / data (dérivée de JetBrains Mono, OFL) :
   grille mono intacte + points en losange ◎ (i j . : ! ?). */
@font-face{
  font-family:'Oltlo Mono'; font-weight:400; font-style:normal;
  src:url('../Police/OltloMono-Regular.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Oltlo Mono'; font-weight:600; font-style:normal;
  src:url('../Police/OltloMono-SemiBold.woff2') format('woff2');
  font-display:swap;
}


/* ═══════════ SOCLE APP (ex-oltlo-v3.css) ═══════════ */
/* ════════════════════════════════════════════════════════════════════════
   OLTLO · SOCLE (ex front-v3/oltlo-v3.css) ~ recréé localement dans front-v5
   après suppression de front-v3. Structure : shell 3 colonnes, composants,
   lecteur podcast, LA CROIX. Les COULEURS sont pilotées par v5.css (skins).
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────── TOKENS ~ THÈME CLAIR (défaut de secours) ───────────── */
:root{
  --paper:#FAF7F0; --paper2:#F3EEE2; --paper3:#ECE5D6; --card:#FFFEFB;
  --ink:#1A1611; --ink2:#5C5447; --ink3:#8E8676;
  --or:#937326; --or-deep:#6E5418; --or-bright:#C9A84C;
  --or-soft:rgba(147,115,38,.10); --or-line:rgba(147,115,38,.30);
  --line:rgba(26,22,17,.10); --line2:rgba(26,22,17,.18);
  --shadow-sm:0 1px 2px rgba(26,22,17,.05),0 2px 6px rgba(26,22,17,.04);
  --shadow:0 4px 14px rgba(26,22,17,.08),0 1px 3px rgba(26,22,17,.06);
  --shadow-lg:0 18px 50px rgba(26,22,17,.14),0 4px 12px rgba(26,22,17,.07);
  --grain-op:.035; --grain-blend:multiply;
  /* ◆ grain « sablé gravé » des boutons (standard OLTLO) */
  --btn-grain:repeating-linear-gradient(125deg,rgba(147,115,38,.07) 0 1px,transparent 1px 4px),repeating-linear-gradient(58deg,rgba(147,115,38,.045) 0 1px,transparent 1px 5px);
  --btn-grain-on:repeating-linear-gradient(125deg,rgba(147,115,38,.11) 0 1px,transparent 1px 4px);
  --btn-grain-solid:repeating-linear-gradient(125deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px);
  --fd:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --fb:'Oltlo Serif','Spectral',Georgia,'Times New Roman',serif;
  --fn:'Oltlo Mono','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-xs:3px; --r:5px; --r-lg:8px; --reading:1080px;
  --danger:#B23B2E; --ok:#3F7A4B;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100dvh;
  transition:background .35s ease,color .35s ease;}
::selection{background:var(--or-soft);color:var(--or-deep)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* reset bouton : sans fond declare, un <button> tombait sur la "face" blanche du navigateur
   (boite blanche criarde sur les skins sombres, ex. la piece Ol des listes). Faible specificite
   => ne touche QUE les boutons sans fond/couleur propres ; .v3-btn, .olp2, etc. gardent les leurs. */
button{font-family:inherit;color:inherit;background-color:transparent}

/* ── barre de glissement ── */
html{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--or-line)}
::-webkit-scrollbar-corner{background:transparent}

/* grain de papier */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");}

/* (TYPO v3-kicker/eyebrow/gold + LIGNES v3-rule/wing : RETIRÉES 2026-07-18 ~ zéro usage sur tout Educ) */

/* ───────────── BOUTONS ───────────── */
.v3-btn{font-family:var(--fd);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line2);background:var(--btn-grain),var(--card);color:var(--ink);
  padding:.7rem 1.3rem;border-radius:var(--r);transition:all .22s cubic-bezier(.2,.7,.3,1);line-height:1;white-space:nowrap}
.v3-btn:hover{border-color:var(--or);color:var(--or-deep);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.v3-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--or-soft),0 0 0 1px var(--or)}
.v3-btn.solid{background:var(--btn-grain-solid),linear-gradient(168deg,#A9863A,var(--or) 60%,var(--or-deep));color:#fff;border-color:var(--or-deep);box-shadow:0 6px 18px rgba(147,115,38,.28)}
html[data-theme="dark"] .v3-btn.solid{background:linear-gradient(168deg,var(--or-deep),var(--or-bright) 60%,#A9863A);color:#16120d}
.v3-btn.solid:hover{box-shadow:0 10px 26px rgba(147,115,38,.4)}
.v3-btn.ghost{background:none}.v3-btn.sm{padding:.5rem .9rem;font-size:.6rem}
.v3-btn.ic{padding:.55rem;width:auto}.v3-btn.ic svg{width:15px;height:15px}

/* ───────────── MÉDAILLE / ANNEAUX / SCEAU ───────────── */
.v3-medal{position:relative;width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--card);
  border:1.5px solid var(--or);box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--or-line),var(--shadow)}
.v3-medal::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px solid var(--or-line)}
.v3-medal .mk{font-family:var(--fd);font-weight:700;font-size:2rem;color:var(--or)}
.v3-medal.sm{width:46px;height:46px;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--or-line)}
.v3-medal.sm::before{inset:4px}.v3-medal.sm .mk{font-size:1.05rem}
.v3-ring{position:relative;border-radius:50%;display:grid;place-items:center;width:84px;height:84px;flex:none}
.v3-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--or) calc(var(--p,72)*1%),var(--paper3) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
.v3-ring .rc{text-align:center}.v3-ring .rc b{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--ink);display:block;line-height:1}
.v3-ring .rc span{font-family:var(--fn);font-size:.5rem;letter-spacing:.2em;color:var(--ink3);text-transform:uppercase}
.v3-seal{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fd);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-deep)}
/* ═══════════ SCEAU DE SECTION ~ CARTOUCHE À DOUBLE FILET, VARIANTE « RELIEF » ═══════════
   Remplace la pastille ronde (2026-07-20, choix d'Anthony). La pastille avait une largeur figée :
   un chiffre romain long (VIII, XIII, XVIII) ou un libellé (« Semaine 1 ») débordait ou était écrasé.
   Le cartouche s'ALLONGE avec son contenu. Dessin : filet or à l'extérieur, filet clair puis filet
   doré à l'intérieur (le « double filet »), posé sur la page par une ombre douce (le « relief »).
   ~ Le padding HAUT de .5px est une correction OPTIQUE mesurée : les chiffres romains n'ont pas de
     jambage descendant, mais la boîte de ligne en réserve la place, ce qui faisait remonter le
     chiffre de 1,4 px. Mesuré après correction : 5,53 px au-dessus / 5,47 en dessous.
   ~ Le sceau ne s'anime QUE s'il est cliquable (il ouvre alors le picker) : voir .s[data-open] plus bas.
     Partout ailleurs il garde ce dessin au repos, sans réaction, car il ne fait que numéroter. */
.v3-seal .s{min-width:26px;width:auto;height:26px;padding:.5px .55rem 0;border-radius:var(--r-xs);
  border:1px solid var(--or);background:var(--card);
  box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3px var(--or-line),var(--shadow-sm);
  display:inline-grid;place-items:center;white-space:nowrap;
  font-family:var(--fn);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-indent:0;color:var(--or-deep)}
/* CLIQUABLE (le sceau ouvre le picker de sa section) : la plaque se soulève au survol, s'enfonce au clic.
   Marqueur = [data-open] posé par les moteurs de plan, ou la classe .act pour un opt-in explicite. */
.v3-seal .s[data-open],.v3-seal .s[data-secadd],.v3-seal .s.act{cursor:pointer;transition:box-shadow .18s cubic-bezier(.2,.7,.3,1),transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s}
.v3-seal .s[data-open]:hover,.v3-seal .s.act:hover{box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3px var(--or),var(--shadow);transform:translateY(-1px)}
.v3-seal .s[data-open]:active,.v3-seal .s.act:active{transform:translateY(0) scale(.97);box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3px var(--or)}
.v3-seal .s[data-open]:focus-visible,.v3-seal .s.act:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--card),inset 0 0 0 3px var(--or),0 0 0 3px var(--or-soft)}

/* ───────────── CARTES ───────────── */
.v3-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s,border-color .25s}
.v3-card.hover:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--or-line)}
.v3-card-h{display:flex;align-items:baseline;gap:.8rem;padding:1rem 1.2rem .6rem}
.v3-card-h .t{font-family:var(--fd);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.v3-card-h .x{margin-left:auto;font-family:var(--fn);font-size:.6rem;color:var(--ink3);letter-spacing:.06em}

/* chips / badges */
.v3-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fd);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:50px;padding:.32rem .8rem;background:var(--card)}
.v3-chip.gold{color:var(--or-deep);border-color:var(--or-line);background:var(--or-soft)}
.v3-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--or)}

/* ════════════════ SHELL ~ 3 colonnes éditoriales ════════════════ */
/* largeur de la colonne droite pilotée par une variable → compose proprement avec la nav */
.v3-shell{--railw:286px;display:grid;grid-template-columns:232px 1fr var(--railw);min-height:100dvh;transition:grid-template-columns .25s ease}
.v3-shell.navcol{grid-template-columns:64px 1fr var(--railw)}
.v3-shell.navhide{grid-template-columns:1fr var(--railw)}
.v3-shell.railcol{--railw:0px}
.v3-shell.tooldock{--railw:min(440px,46vw)}        /* outil ouvert : la colonne droite s'élargit (place prise comme avant) */
/* (règle .tooldock.railcol{--railw:0px} RETIRÉE ~ demande Anthony : un outil s'ouvre TOUJOURS pleinement,
   même rail replié ; l'état railcol du rail lui-même ne change pas, il reste replié à la fermeture de l'outil) */
.v3-shell.navhide .v3-nav{display:none}
/* mode vue (Panel coach) : AUCUNE règle CSS ici ~ demande Anthony (zéro teinte, couleurs
   normales). Le seul indicateur = le bandeau riche + l'écran hors-périmètre, tous deux
   injectés par base/session.js quand la session est en vue-client. */
/* dock : l'outil se pose AU-DESSUS de la colonne du rail commu (même largeur). */
html.oldock .v3-rail{pointer-events:none}                 /* aucune interaction avec le commu tant que l'outil est ancré */
html.oldock .v3-grip.r{z-index:1300}                       /* le grip droit (repli) reste cliquable AU-DESSUS du dock */
/* (règles railcol ~ .dejov/.rm1ov/.bfov translateX(100%) RETIRÉES : elles cachaient l'outil quand le rail était replié) */
/* repli du rail : la colonne passe à 0 mais le contenu (~286px) débordait hors du viewport
   (overflow-x resté visible) → double barre de défilement + espace fantôme. On borne le rail. */
.v3-shell.railcol .v3-rail{overflow:hidden;border-left:none;padding-left:0;padding-right:0}

/* ~ colonne gauche : nav ~ (overflow-x:hidden : repliée, les popovers cachés du pied ~ skins, réglages ~ la
   rendaient défilable de côté au pavé tactile, icônes décalées) */
.v3-nav{background:var(--paper2);display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;box-shadow:inset -1px 0 0 var(--or-line)}
.v3-nav::-webkit-scrollbar{display:none}
.v3-navtop{display:flex;align-items:center;gap:.95rem;padding:1rem 1rem;border-bottom:1px solid var(--line)}
.v3-brand{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0}
.v3-brand .lg,.v3-brand-logo .lg{width:34px;height:34px;flex:none;object-fit:contain}
.v3-brand-logo{flex:none;display:inline-flex;align-items:center}
.v3-brand .tx{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;line-height:1}
.v3-brand .bn{font-family:var(--fb);font-weight:600;font-size:1.55rem;letter-spacing:.03em;color:var(--ink);line-height:1;white-space:nowrap}
.v3-brand .bn .tl{color:var(--or)}
.v3-brand .bn .flip,.sc-wordmark .flip{display:inline-block;transform:scaleX(-1)}
.v3-brand .bs{font-family:var(--fd);font-size:.42rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-top:.4rem;line-height:1.25;white-space:nowrap}
.v3-nhav{position:relative;width:38px;height:38px;flex:none;border-radius:50%;border:1.5px solid var(--or);background:var(--paper3);
  display:grid;place-items:center;font-family:var(--fb);font-size:1rem;color:var(--or-deep);cursor:pointer;
  box-shadow:0 0 0 3px var(--paper2),0 0 0 4px var(--or-line);transition:box-shadow .2s,transform .15s}
.v3-nhav:hover{transform:translateY(-1px)}
.v3-ndot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--danger);border:2px solid var(--paper2)}
/* panel utilisateur (haut de nav) : avatar + nom + rôle */
.v3-user{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1;text-decoration:none}
.v3-user .av{position:relative;width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--or);background:var(--paper3);display:grid;place-items:center;font-family:var(--fb);font-size:1.05rem;color:var(--or-deep);box-shadow:0 0 0 3px var(--paper2),0 0 0 4px var(--or-line);transition:transform .15s}
.v3-user:hover .av{transform:translateY(-1px)}
.v3-user .ui{display:flex;flex-direction:column;min-width:0;line-height:1.2;flex:1;align-items:center;text-align:center;padding-right:.4rem}
.v3-user .ui .nm{font-family:var(--fb);font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-user .ui .rl{font-family:var(--fd);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-top:.28rem;white-space:nowrap}
.v3-shell.navcol .v3-user{justify-content:center}
.v3-shell.navcol .v3-user .ui{display:none}
/* marque en pied : logo + olTlo (côté pro & visible) */
.v3-brand-logo{gap:.5rem}
.v3-brand-logo .bn{font-family:var(--fb);font-weight:600;font-size:1.25rem;letter-spacing:.03em;color:var(--ink);line-height:1;white-space:nowrap}
.v3-brand-logo .bn .tl{color:var(--or)}
.v3-brand-logo .bn .flip{display:inline-block;transform:scaleX(-1)}
.v3-brand-logo .tx{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:0}
.v3-brand-logo .bs{font-family:var(--fd);font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-top:.35rem;white-space:nowrap}
/* nav PLEINE : on montre le wordmark olTlo, le logo est caché */
.v3-brand-logo .lg{display:none}
/* nav REPLIÉE (icônes) : c'est le logo qui apparaît, le wordmark est caché */
.v3-shell.navcol .v3-brand-logo .tx{display:none}
.v3-shell.navcol .v3-brand-logo .lg{display:block}
.v3-shell.navcol .v3-navtop{flex-direction:column;justify-content:center;padding:1rem 0;gap:.6rem}
.v3-shell.navcol .v3-brand{justify-content:center;flex:none}.v3-shell.navcol .v3-brand .tx{display:none}
.v3-navlist{flex:1;padding:.7rem 0}
.v3-navi{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.2rem;font-family:var(--fd);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-left:2px solid transparent;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.v3-navi:hover{color:var(--ink);background:var(--paper3)}
/* item actif : fond = colonne centrale (--paper), texte doré, la barre passe à DROITE en couleur colonne centrale (relie à la colonne) */
.v3-navi.on{color:var(--or-deep);background:var(--paper);border-left-color:transparent;position:relative;z-index:1}
.v3-navi .ic{width:18px;height:18px;flex:none;display:grid;place-items:center;color:currentColor}.v3-navi .ic svg{width:18px;height:18px}
.v3-navi .bdg{margin-left:auto;font-family:var(--fn);font-size:.52rem;color:var(--or-deep);border:1px solid var(--or-line);border-radius:50px;padding:1px 7px;background:var(--or-soft)}
.v3-shell.navcol .v3-navi{justify-content:center;gap:0;padding:.6rem 0}.v3-shell.navcol .v3-navi .lbl,.v3-shell.navcol .v3-navi .bdg{display:none}
.v3-navgrp{font-family:var(--fn);font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink3);padding:1rem 1.2rem .35rem}
.v3-shell.navcol .v3-navgrp{text-align:center;padding:1rem 0 .35rem;font-size:.4rem}
.v3-navsep{height:1px;background:var(--line);margin:.6rem 1.2rem}
.v3-navfoot{border-top:1px solid var(--line);padding:.8rem 1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;position:relative}
.v3-brand-logo{cursor:pointer}
.v3-shell.navcol .v3-navfoot{flex-direction:column}

/* (bascule thème .v3-toggle/ic-sun/ic-moon : RETIRÉE 2026-07-18 ~ remplacée par le sélecteur de skins) */

/* ~ colonne centre ~ */
.v3-main{min-width:0;position:relative;display:flex;flex-direction:column}
.v3-grip{position:absolute;top:0;bottom:0;width:9px;cursor:pointer;z-index:25;background:transparent}
.v3-grip.l{left:0}.v3-grip.r{right:0}
.v3-grip::after{content:'';position:absolute;top:0;bottom:0;width:2px;background:var(--or);opacity:0;transition:opacity .18s,box-shadow .18s}
.v3-grip.l::after{left:0}.v3-grip.r::after{right:0}
.v3-grip:hover::after{opacity:1;box-shadow:0 0 10px var(--or-line)}
.v3-grip:active::after{background:var(--or-deep)}
.v3-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.7rem;padding:.85rem 1.6rem;
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.v3-bar .ct{font-family:var(--fd);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.v3-bar .sp{flex:1}
/* ── colonne centrale PLEINE LARGEUR (2026-08-04, demande Anthony v2) ~
   plus AUCUN plafond --reading sur la page : le contenu et toutes les barres
   (même nichées dans des sous-panneaux) occupent tout l'espace entre les
   panneaux, sur tout écran. Seule la COUCHE DE LECTURE (fiches/articles ep-*)
   garde sa largeur de lecture ~ présentation du lecteur validée, intouchable. ── */
.v3-page{width:100%;margin:0 auto;padding:1.6rem 1.6rem 4rem;min-width:0}
.v3-page>[class^="ep-"],.v3-page>[class*=" ep-"]{max-width:var(--reading);margin-left:auto;margin-right:auto}

/* bande de section éditoriale */
.v3-band{display:flex;align-items:center;gap:1rem;margin:2.4rem 0 1.3rem}
.v3-band:first-child{margin-top:0}
.v3-band .n{font-family:var(--fd);font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--or)}
.v3-band h2,.v3-band h3{font-family:var(--fb);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.v3-band .ln{flex:1;height:1px;background:var(--line2)}

/* intercalaires-onglets */
.v3-tabs{display:flex;border-bottom:1.5px solid var(--ink);overflow-x:auto;scrollbar-width:none;gap:.2rem}
.v3-tabs::-webkit-scrollbar{display:none}
.v3-tab{font-family:var(--fd);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;white-space:nowrap;color:var(--ink2);background:none;border:none;border-bottom:2px solid transparent;padding:.7rem 1rem .6rem;margin-bottom:-1.5px;transition:color .2s,border-color .2s;display:flex;gap:.5rem;align-items:baseline}
.v3-tab .ro{font-family:var(--fd);font-weight:700;font-size:.54rem;color:var(--ink3)}
.v3-tab:hover{color:var(--ink)}
.v3-tab.on{color:var(--or-deep);border-bottom-color:var(--or)}.v3-tab.on .ro{color:var(--or)}
.v3-panel{display:none;animation:v3in .35s ease both}.v3-panel.on{display:block}
/* (@keyframes v3in : défini plus bas, version 6px ~ le doublon 8px d'ici a été RETIRÉ 2026-07-18, la cascade prenait déjà le second) */

/* ~ colonne droite : rail (encadré journal) ~ */
.v3-rail{border-left:1px solid var(--line);background:var(--paper2);padding:1.4rem 1.2rem;position:sticky;top:0;height:100dvh;overflow-y:auto;scrollbar-width:thin}
.v3-railh{font-family:var(--fd);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin:1.6rem 0 .8rem;display:flex;align-items:center;gap:.6rem}
.v3-railh:first-child{margin-top:0}.v3-railh::after{content:'';flex:1;height:1px;background:var(--line)}
.v3-rshare{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.v3-rshare .up{font-family:var(--fn);font-size:.62rem;color:var(--or);display:flex;flex-direction:column;align-items:center;line-height:1.1}
.v3-rshare .tt{font-family:var(--fb);font-size:.92rem;color:var(--ink);line-height:1.3}
.v3-rshare .by{font-family:var(--fn);font-size:.54rem;color:var(--ink3);margin-top:.2rem;letter-spacing:.04em}
.v3-rshare>div{flex:1;min-width:0}
.v3-rthumb{width:46px;height:46px;flex:none;border-radius:var(--r);overflow:hidden;border:1px solid var(--or-line);
  background:radial-gradient(ellipse 80% 80% at 50% 0,var(--or-soft),transparent 70%),var(--paper3);
  display:grid;place-items:center;color:var(--or)}
.v3-rthumb svg{width:20px;height:20px;opacity:.7}
.v3-rthumb img{width:100%;height:100%;object-fit:cover}
.v3-rthread{padding:.55rem 0;border-bottom:1px solid var(--line)}
.v3-rthread .tt{font-family:var(--fb);font-size:.9rem;color:var(--ink)}
.v3-rthread .mt{font-family:var(--fn);font-size:.54rem;color:var(--ink3);margin-top:.2rem;letter-spacing:.04em}
.v3-rtags{display:flex;flex-wrap:wrap;gap:.4rem}
.v3-rtag{font-family:var(--fn);font-size:.58rem;color:var(--ink2);border:1px solid var(--line2);border-radius:50px;padding:.25rem .65rem}
.v3-rtag:hover{border-color:var(--or);color:var(--or-deep)}

/* ───────────── FORMULAIRES ───────────── */
.v3-field{margin-bottom:1rem}
.v3-field label{display:block;font-family:var(--fn);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-bottom:.4rem}
.v3-input,.v3-select,.v3-textarea{width:100%;box-sizing:border-box;background:var(--paper2);border:1px solid var(--line2);border-radius:var(--r);color:var(--ink);font-family:var(--fb);font-size:.95rem;padding:.6rem .8rem;outline:none;transition:border-color .2s,box-shadow .2s}
.v3-input:focus-visible,.v3-select:focus-visible,.v3-textarea:focus-visible{border-color:var(--or);box-shadow:0 0 0 3px var(--or-soft)}
.v3-input::placeholder,.v3-textarea::placeholder{color:var(--ink3)}
.v3-select{font-family:var(--fd);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.v3-seg{display:flex;gap:.3rem}.v3-seg .v3-btn{flex:1;justify-content:center}
.v3-seg .v3-btn.on{color:var(--or-deep);border-color:var(--or);background:var(--or-soft)}

/* ───────────── TABLES ÉDITORIALES ───────────── */
.v3-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.v3-table th{font-family:var(--fd);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-deep);font-weight:400;text-align:right;padding:.7rem .7rem .45rem;border-bottom:1px solid var(--or-line);background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--paper2) 50%,transparent) 100%)}
.v3-table th:first-child{text-align:left}
.v3-table td{padding:.6rem .7rem;border-bottom:1px solid var(--line);font-family:var(--fn);font-size:.78rem;color:var(--ink);text-align:right}
.v3-table td:first-child{font-family:var(--fb);font-size:1rem;text-align:left}
.v3-table td small{color:var(--ink3);font-size:.6rem;margin-left:2px}
.v3-table tbody tr{transition:background .15s}.v3-table:not(.lq) tbody tr:hover td{background:var(--or-soft)}
.v3-table tr.tot td{border-bottom:none;background:var(--or-soft)}
.v3-table tr.tot td:first-child{border-left:2px solid var(--or);font-family:var(--fd);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-deep)}
.v3-table:not(.lq) tr.pr td{background:var(--or-soft)}.v3-table tr.pr td:first-child{border-left:2px solid var(--or)}
.v3-prtag{font-family:var(--fd);font-size:.5rem;letter-spacing:.16em;color:var(--or-deep);border:1px solid var(--or-line);border-radius:3px;padding:1px 6px;margin-left:.5rem;background:var(--card)}
.v3-input.cell{max-width:90px;text-align:right;font-family:var(--fn);font-size:.78rem;padding:.4rem .3rem;border-color:transparent;background:transparent;margin:0 0 0 auto}
.v3-table tbody tr:hover .v3-input.cell{border-color:var(--line2);background:var(--card)}

/* KPIs */
.v3-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}
.v3-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.v3-kpi.main{border-color:var(--or-line);background:var(--or-soft)}
.v3-kpi .v{font-family:var(--fb);font-size:1.6rem;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.v3-kpi .v small{font-family:var(--fd);font-size:.62rem;color:var(--ink3);letter-spacing:.06em;margin-left:2px}
.v3-kpi .l{font-family:var(--fn);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-top:.4rem}

/* avatar rond (partagé) ~ le feed .v3-post qui l'entourait a été RETIRÉ 2026-07-18 (zéro usage) */
.v3-av{width:38px;height:38px;flex:none;border-radius:50%;background:var(--paper3);border:1px solid var(--or-line);display:grid;place-items:center;font-family:var(--fb);font-size:.95rem;color:var(--or-deep)}

/* ════════════════ LECTEUR PODCAST ════════════════ */
.v3-pl{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--card);border-top:1px solid var(--or-line);box-shadow:0 -8px 32px rgba(26,22,17,.12);transform:translateY(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.v3-pl.reduit{transform:translateY(100%)}
.v3-pl-prog{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--or);box-shadow:0 0 6px var(--or-line)}
.v3-pl-row{display:flex;align-items:center;gap:.8rem;padding:.6rem 1.2rem;max-width:1400px;margin:0 auto}
.v3-pl-play{width:40px;height:40px;border-radius:50%;background:linear-gradient(168deg,#A9863A,var(--or) 60%,var(--or-deep));color:#fff;border:none;display:grid;place-items:center;cursor:pointer;flex:none;transition:filter .15s,transform .12s}
html[data-theme="dark"] .v3-pl-play{background:var(--or-bright);color:#16120d}
.v3-pl-play:hover{filter:brightness(1.07)}.v3-pl-play:active{transform:scale(.93)}.v3-pl-play svg{width:15px;height:15px}
.v3-pl-info{min-width:0;width:180px;display:flex;flex-direction:column;gap:.1rem}
.v3-pl-info .ep{font-family:var(--fd);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-pl-info .ch{font-family:var(--fn);font-size:.66rem;color:var(--or);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-pl-seek{flex:1;min-width:60px;height:6px;background:var(--paper3);border:1px solid var(--line2);border-radius:3px;position:relative;cursor:pointer}
.v3-pl-seek .f{position:absolute;inset:0;width:38%;background:var(--or);border-radius:3px}
.v3-pl-seek .t{position:absolute;top:50%;left:38%;width:11px;height:11px;border-radius:50%;background:var(--card);border:1px solid var(--or);transform:translate(-50%,-50%)}
.v3-pl-time{font-family:var(--fn);font-size:.58rem;color:var(--ink3);white-space:nowrap}.v3-pl-time b{color:var(--or-deep);font-weight:400}
.v3-pl-tab{font-family:var(--fd);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;height:30px;padding:0 .7rem;background:none;border:1px solid var(--line2);color:var(--ink2);cursor:pointer;border-radius:var(--r);display:inline-flex;align-items:center;gap:.3rem;transition:all .15s}
.v3-pl-tab:hover{color:var(--or-deep);border-color:var(--or)}.v3-pl-tab.on{color:var(--or-deep);border-color:var(--or);background:var(--or-soft)}
.v3-pl-tab svg{width:10px;height:10px;transition:transform .2s}.v3-pl-tab.on svg{transform:rotate(180deg)}
.v3-pl-min{background:none;border:none;cursor:pointer;color:var(--ink3);padding:4px;flex:none}.v3-pl-min:hover{color:var(--or-deep)}.v3-pl-min svg{width:14px;height:14px}
.v3-pl-panel{max-height:0;overflow:hidden;background:var(--paper2);border-top:1px solid transparent;transition:max-height .38s cubic-bezier(.4,0,.2,1),border-color .38s}
.v3-pl-panel.on{max-height:46vh;border-top-color:var(--line)}
.v3-pl-pinner{max-width:1400px;margin:0 auto;padding:1rem 1.2rem 1.2rem;max-height:46vh;overflow-y:auto;scrollbar-width:thin}
.v3-pl-ph{font-family:var(--fd);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.v3-pl-ph::after{content:'';flex:1;height:1px;background:var(--line)}
.v3-chaps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.6rem}
.v3-chap{display:flex;align-items:baseline;gap:.7rem;padding:.6rem .5rem;border-bottom:1px solid var(--line);border-left:2px solid transparent;cursor:pointer;transition:background .14s,border-color .14s}
.v3-chap:hover{background:var(--or-soft)}.v3-chap.on{border-left-color:var(--or);background:var(--or-soft)}
.v3-chap .nn{font-family:var(--fn);font-size:.6rem;color:var(--or);opacity:.6;width:1.2rem;flex:none;font-variant-numeric:tabular-nums}
.v3-chap .tm{font-family:var(--fn);font-size:.64rem;font-weight:600;color:var(--or-deep);width:2.6rem;flex:none;font-variant-numeric:tabular-nums}
.v3-chap .tt{font-family:var(--fb);font-size:.9rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.v3-chap:hover .tt{color:var(--ink)}
.v3-etudes{columns:2;column-gap:1.6rem}
.v3-etude{display:block;break-inside:avoid;font-family:var(--fb);font-size:.86rem;line-height:1.45;color:var(--ink2);padding:.4rem 0 .4rem 1rem;border-bottom:1px solid var(--line);position:relative}
.v3-etude::before{content:'▸';position:absolute;left:0;top:.4rem;color:var(--or);font-size:.7rem}.v3-etude:hover{color:var(--or-deep)}
.v3-ppods{display:grid;grid-template-columns:repeat(4,1fr)}
.v3-ppod{display:flex;flex-direction:column;gap:.35rem;padding:.7rem .85rem;cursor:pointer;border-bottom:1px solid var(--line);transition:background .14s}
.v3-ppod:hover{background:var(--or-soft)}
.v3-ppod.on{background:var(--or-soft)}
.v3-ppod-top{display:flex;align-items:center;gap:.5rem}
.v3-ppod .num{font-family:var(--fd);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
.v3-ppod-lire{margin-left:auto;font-family:var(--fn);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.16rem .5rem;border:1px solid var(--line2);border-radius:3px;color:var(--ink3);text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.25rem;transition:color .14s,border-color .14s,background .14s;flex:none}
.v3-ppod-lire:hover{color:var(--or-deep);border-color:var(--or);background:var(--card)}
.v3-ppod-lire svg{width:8px;height:8px}
.v3-ppod .ttl{font-family:var(--fb);font-size:.88rem;color:var(--ink2);line-height:1.3}
.v3-ppod.on .ttl,.v3-ppod:hover .ttl{color:var(--ink)}

/* ───────────── MOBILE ───────────── */
.v3-phone{display:none}
@media(max-width:980px){
  .v3-shell{grid-template-columns:1fr}
  .v3-nav,.v3-rail,.v3-grip{display:none}
  .v3-page{padding-bottom:6rem}
  .v3-phone{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper2);border-top:1px solid var(--line);padding:.4rem .3rem .6rem;justify-content:space-around}
  .v3-pti{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem;color:var(--ink3);cursor:pointer}
  .v3-pti.on{color:var(--or-deep)}.v3-pti .ic svg{width:20px;height:20px}
  .v3-pti .lb{font-family:var(--fd);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase}
}
@media(max-width:560px){.v3-chaps{grid-template-columns:1fr}.v3-etudes{columns:1}.v3-ppods{grid-template-columns:repeat(2,1fr)}}

/* ───────────── LA CROIX ~ navigation mobile par gestes ───────────── */
.cx-glow,.cx-dim,.cx-drawer{display:none}
@media(max-width:980px){
  .v3-phone{display:none}
  .cx-glow{display:block;position:fixed;top:18%;bottom:18%;width:3px;z-index:72;pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--or) 28%,var(--or-bright) 50%,var(--or) 72%,transparent);
    box-shadow:0 0 10px var(--or-line),0 0 22px var(--or-soft);border-radius:3px;
    opacity:0;transition:opacity .4s ease}
  .cx-glow.l{left:0}.cx-glow.r{right:0}
  .cx-glow.show{opacity:.9}
  .cx-dim{display:block;position:fixed;inset:0;z-index:78;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s}
  .cx-dim.on{opacity:1;pointer-events:auto}
  .cx-drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;z-index:80;width:min(80vw,330px);
    background:var(--paper2);overflow-y:auto;scrollbar-width:none;padding:1.2rem .9rem 2rem;transition:transform .28s ease;box-shadow:var(--shadow-lg)}
  .cx-drawer::-webkit-scrollbar{display:none}
  .cx-drawer>*{flex:none}
  .cx-drawer.l{left:0;border-right:1px solid var(--or-line);transform:translateX(-100%)}
  .cx-drawer.r{right:0;border-left:1px solid var(--or-line);transform:translateX(100%)}
  .cx-drawer.open{transform:none}
  .cx-h{font-family:var(--fd);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or);display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .6rem}
  .cx-h i{flex:1;height:1px;background:var(--line)}
  .cx-x{background:none;border:1px solid var(--line2);border-radius:50%;width:30px;height:30px;color:var(--ink2);font-size:.85rem;cursor:pointer;flex:none;display:grid;place-items:center;padding:0}
  .cx-x:active{border-color:var(--or);color:var(--or-deep)}
  .cx-drawer .v3-navi{padding:.65rem .6rem}
  .cx-empty{font-family:var(--fn);font-size:.6rem;color:var(--ink3);padding:1rem 0;line-height:1.7}
}
@media(max-width:680px){.cx-drawer{width:100%;border-left:none;border-right:none}}
@media (hover:none){
  .v3-navi:hover{color:var(--ink2);background:none}
  .v3-navi:active,.v3-navi.on{color:var(--or-deep);background:var(--or-soft)}
  .v3-btn:hover{border-color:var(--line2);color:var(--ink);box-shadow:none;transform:none}
  .v3-btn:active{border-color:var(--or);color:var(--or-deep)}
  .v3-rtag:hover{border-color:var(--line2);color:var(--ink2)}
  .v3-rtag:active{border-color:var(--or);color:var(--or-deep)}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ═══════════ SKINS + LECTEUR + PRIMITIVES (ex-v5.css) ═══════════ */
/* ════════════════════════════════════════════════════════════════════════
   olTlo · FRONT-V5 « LE CODEX VIVANT » ~ socle commun
   ────────────────────────────────────────────────────────────────────────
   Fusion V3 (app compacte, 3 colonnes, lecteur + fiche) × V4 (4 skins Codex).
   STRATÉGIE : on RÉ-IMPORTE intégralement le CSS de la V3 ~ donc la fiche
   textuelle, la mécanique des 3 colonnes ET le lecteur audio sont, au pixel
   près, IDENTIQUES à la V3. On se contente ensuite de :
     1. remapper les 4 palettes Imperium sur les variables de la V3 ;
     2. ajouter quelques primitives Codex (sceau, frise, bouton-or massif) ;
     3. recopier les styles de la « fiche/lecture » (ep-*) pour les partager.
   Les 3 designs (skin-sobre / skin-equilibre / skin-planche) ne changent que
   l'HABILLAGE (polices d'apparat, densité d'ornement). Jamais la fonction.
   ════════════════════════════════════════════════════════════════════════ */

/* ═══════════ LES 4 SKINS ~ palettes Imperium mappées sur les tokens V3 ═══════════
   On écrase --paper/--ink/--or… directement : tout le CSS V3 suit sans modification. */

/* ── PAPYRUS (clair) ── REDESIGN « clarté max » : surfaces quasi-blanches, encre
   franche, or plus foncé (plus lisible), contrastes nets, grain discret. ── */
html[data-skin="papyrus"]{
  --paper:#EFEBE0; --paper2:#F6F2E8; --paper3:#E3DBC8; --card:#FCFBF6;
  --ink:#191712; --ink2:#574F3F; --ink3:#8A8170;
  --or:#8A6A1C; --or-deep:#674E12; --or-bright:#C49B45;
  --or-soft:rgba(138,106,28,.10); --or-line:rgba(138,106,28,.30);
  --line:rgba(25,23,18,.12); --line2:rgba(25,23,18,.20);
  --danger:#9A3B26; --ok:#3F7A4B;
  --shadow-sm:0 1px 2px rgba(25,23,18,.05),0 2px 5px rgba(25,23,18,.04);
  --shadow:0 4px 14px rgba(25,23,18,.09),0 1px 3px rgba(25,23,18,.06);
  --shadow-lg:0 18px 50px rgba(25,23,18,.14),0 4px 12px rgba(25,23,18,.07);
  --grain-op:.05; --grain-blend:multiply;
  --metal:linear-gradient(180deg,#FCEBB8 0%,#EAC85F 16%,#CDA03B 47%,#B0852A 55%,#EAC85F 84%,#856120 100%);
  --metal-bevel:inset 0 1.5px 0 rgba(255,252,238,.7),inset 0 -2px 3px rgba(80,50,0,.42);
  --on-metal:#2C1D06;
}
/* ── OBSIDIENNE (noir) ── REDESIGN d'après mockup-shell.html : noir NEUTRE pur + or,
   texte blanc haute lisibilité, surfaces gris neutre (zéro brun), contraste fort. ── */
html[data-skin="obsidienne"]{
  --paper:#0A0A0A; --paper2:#141414; --paper3:#242424; --card:#181818;
  --ink:rgba(255,255,255,.92); --ink2:rgba(255,255,255,.52); --ink3:rgba(255,255,255,.30);
  --or:#C9A84C; --or-deep:#E8D5A3; --or-bright:#E8D5A3;
  --or-soft:rgba(201,168,76,.10); --or-line:rgba(201,168,76,.26);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --danger:#E07A5F; --ok:#6FBF8E;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5);
  --shadow-lg:0 22px 60px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.5);
  --grain-op:.14; --grain-blend:soft-light;
  --metal:linear-gradient(180deg,#FCEBB8 0%,#EAC85F 16%,#CDA03B 47%,#B0852A 55%,#EAC85F 84%,#856120 100%);
  --metal-bevel:inset 0 1.5px 0 rgba(255,252,238,.55),inset 0 -2px 3px rgba(0,0,0,.6);
  --on-metal:#0B0B0B;
}
/* ── LAPIS (bleu nuit + or) ── */
html[data-skin="lapis"]{
  --paper:#0A1530; --paper2:#102046; --paper3:#1C356A; --card:#162A55;
  --ink:#EFE8D6; --ink2:rgba(239,232,214,.72); --ink3:rgba(239,232,214,.46);
  --or:#D4AF52; --or-deep:#EBD08A; --or-bright:#EBD08A;
  --or-soft:rgba(212,175,82,.12); --or-line:rgba(212,175,82,.30);
  --line:rgba(212,175,82,.16); --line2:rgba(212,175,82,.28);
  --danger:#C2604A; --ok:#54B79E;
  --shadow-sm:0 1px 2px rgba(0,8,30,.4);
  --shadow:0 4px 16px rgba(0,8,30,.45),0 1px 3px rgba(0,8,30,.4);
  --shadow-lg:0 22px 60px rgba(0,8,30,.6),0 4px 12px rgba(0,8,30,.45);
  --grain-op:.16; --grain-blend:overlay;
  --metal:linear-gradient(180deg,#F6E7B0 0%,#E7CB78 16%,#CBA94E 47%,#B0892F 55%,#E7CB78 84%,#8A6A24 100%);
  --metal-bevel:inset 0 1.5px 0 rgba(255,252,238,.5),inset 0 -2px 3px rgba(0,10,40,.5);
  --on-metal:#1B1304;
}
/* ── PORPHYRE (pourpre impérial + or) ── */
html[data-skin="porphyre"]{
  --paper:#26090F; --paper2:#360F18; --paper3:#511A28; --card:#421521;
  --ink:#F2E5D3; --ink2:rgba(242,229,211,.72); --ink3:rgba(242,229,211,.46);
  --or:#CDA24A; --or-deep:#E8CD86; --or-bright:#E8CD86;
  --or-soft:rgba(205,162,74,.12); --or-line:rgba(205,162,74,.30);
  --line:rgba(205,162,74,.16); --line2:rgba(205,162,74,.28);
  --danger:#D2705A; --ok:#5BAE92;
  --shadow-sm:0 1px 2px rgba(20,0,6,.4);
  --shadow:0 4px 16px rgba(20,0,6,.45),0 1px 3px rgba(20,0,6,.4);
  --shadow-lg:0 22px 60px rgba(20,0,6,.6),0 4px 12px rgba(20,0,6,.45);
  --grain-op:.16; --grain-blend:overlay;
  --metal:linear-gradient(180deg,#F6E7B0 0%,#E7CB78 16%,#CBA94E 47%,#B0892F 55%,#E7CB78 84%,#8A6A24 100%);
  --metal-bevel:inset 0 1.5px 0 rgba(255,252,238,.5),inset 0 -2px 3px rgba(40,0,12,.5);
  --on-metal:#1B1304;
}

/* ═══════════ SÉLECTEUR DE SKIN (4 pastilles, dans la barre) ═══════════ */
.v5-skinsel{display:flex;gap:.3rem;border:1px solid var(--line2);border-radius:50px;padding:.25rem}
.v5-skinsel button{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);cursor:pointer;padding:0;transition:box-shadow .18s,transform .12s}
.v5-skinsel button:active{transform:scale(.9)}
.v5-skinsel button[data-skin="papyrus"]{background:#E9DEC6}
.v5-skinsel button[data-skin="obsidienne"]{background:#16130D}
.v5-skinsel button[data-skin="lapis"]{background:#102046}
.v5-skinsel button[data-skin="porphyre"]{background:#421521}
.v5-skinsel button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--or)}
/* ── dans le pied de nav : le sélecteur devient une TOOLTIP ouverte au clic sur le logo ── */
.v3-navfoot .v5-skinsel{position:absolute;bottom:calc(100% + .5rem);left:1rem;flex-direction:column;gap:.12rem;
  border:1px solid var(--or-line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-lg);padding:.35rem;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:80}
.v3-navfoot.skinopen .v5-skinsel{opacity:1;visibility:visible;transform:none}
.v3-navfoot .v5-skinsel button{width:auto;height:auto;border-radius:var(--r-xs);border:1px solid transparent;background:none;
  display:flex;align-items:center;gap:.6rem;padding:.4rem .65rem;cursor:pointer;
  font-family:var(--fd);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.v3-navfoot .v5-skinsel button::before{content:'';width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);flex:none}
.v3-navfoot .v5-skinsel button[data-skin="papyrus"]::before{background:#E9DEC6}
.v3-navfoot .v5-skinsel button[data-skin="obsidienne"]::before{background:#16130D}
.v3-navfoot .v5-skinsel button[data-skin="lapis"]::before{background:#102046}
.v3-navfoot .v5-skinsel button[data-skin="porphyre"]::before{background:#421521}
.v3-navfoot .v5-skinsel button[data-skin="papyrus"]::after{content:'Papyrus'}
.v3-navfoot .v5-skinsel button[data-skin="obsidienne"]::after{content:'Obsidienne'}
.v3-navfoot .v5-skinsel button[data-skin="lapis"]::after{content:'Lapis'}
.v3-navfoot .v5-skinsel button[data-skin="porphyre"]::after{content:'Porphyre'}
.v3-navfoot .v5-skinsel button:hover{background:var(--or-soft);color:var(--or-deep)}
.v3-navfoot .v5-skinsel button.on{box-shadow:none;border-color:var(--or-line);background:var(--or-soft);color:var(--or-deep)}
/* ── skins PRO (Fresque · Bronze) ~ pastilles INJECTÉES par oltlo.js,
   le HTML des pages ne liste que les 4 skins Académie. Pastilles PLATES
   comme les 4 autres (le dégradé « bouton bombé » jurait ~ retiré 2026-08-04). ── */
.v5-skinsel button[data-skin="fresque"]{background:#2563EB}
.v5-skinsel button[data-skin="bronze"]{background:#C89A55}
.v3-navfoot .v5-skinsel button[data-skin="fresque"]::before{background:#2563EB}
.v3-navfoot .v5-skinsel button[data-skin="bronze"]::before{background:#C89A55}
.v3-navfoot .v5-skinsel button[data-skin="fresque"]::after{content:'Fresque'}
.v3-navfoot .v5-skinsel button[data-skin="bronze"]::after{content:'Bronze'}

/* ═══════════ PRIMITIVES CODEX (réutilisables par les 3 designs) ═══════════ */
/* sceau rond (logo serti) */
.v5-seal{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--or);
  border:1.5px solid var(--or);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--or-line),var(--shadow-sm);
  background:radial-gradient(circle at 50% 36%,var(--card),var(--paper3))}
.v5-seal svg{width:54%;height:54%}
/* frise méandre grecque (séparateur d'apparat) */
.v5-frieze{height:16px;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16'%3E%3Cpath d='M2 14 V2 H20 V11 H9 V7 H15' fill='none' stroke='%23967524' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:22px 16px;background-repeat:repeat-x;background-position:center}
/* double-filet à l'encre (intercalaire « planche ») */
.v5-rule-d{height:1px;border:none;background:linear-gradient(90deg,var(--or),var(--or-line) 60%,transparent);margin:1rem 0}
/* texte gravé (relief subtil) */
.v5-engrave{text-shadow:0 1px 0 rgba(255,250,235,.18),0 -1px 1px rgba(0,0,0,.22)}
/* bouton-or « pièce » : contour au repos, MÉTAL massif au clic (geste récompensé) */
.v3-btn.metal{background:none;color:var(--or-deep);border-color:var(--or)}
.v3-btn.metal:hover,.v3-btn.metal:active,.v3-btn.metal.on{
  background:var(--metal);color:var(--on-metal);border-color:#856120;box-shadow:var(--metal-bevel);text-shadow:0 1px 0 rgba(255,248,224,.45)}
@media (hover:none){
  .v3-btn.metal:hover{background:none;color:var(--or-deep);border-color:var(--or);box-shadow:none;text-shadow:none}
  .v3-btn.metal:active,.v3-btn.metal.on{background:var(--metal);color:var(--on-metal);border-color:#856120;box-shadow:var(--metal-bevel)}
}

/* ════════════════════════════════════════════════════════════════════════
   FICHE / LECTURE (ep-*) ~ RECOPIE FIDÈLE de la V3 (acethylcholine.html).
   Mutualisée ici pour que les 3 designs partagent EXACTEMENT la même fiche.
   ════════════════════════════════════════════════════════════════════════ */
.v3-page{padding-bottom:9rem}
.ep-hero{position:relative;padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--or-line);overflow:hidden}

/* ═══════════ ZÉRO BARRE BLANCHE ═══════════
   Les filets « encre » de la V3 (--ink) viraient au blanc sur les skins sombres.
   On les remplace par un trait doré sobre, partout. */
.v3-tabs{border-bottom:1px solid var(--or-line)}
.v3-table th{border-bottom:1px solid var(--or-line)}
.v3-tab.on{border-bottom-color:var(--or)}
.ep-hero .num{position:absolute;top:-1.6rem;right:-.4rem;font-family:var(--fb);font-size:9rem;line-height:1;color:var(--or);opacity:.06;pointer-events:none;user-select:none}
.ep-hero .kick{font-family:var(--fd);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.ep-hero .kick::before{content:'';width:32px;height:1px;background:linear-gradient(90deg,var(--or),var(--or-line))}
.ep-hero .badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--or-soft);border:1px solid var(--or-line);color:var(--or-deep);font-family:var(--fd);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.42rem 1rem;border-radius:3px;margin-bottom:1.3rem}
.ep-hero h1{font-family:var(--fb);font-weight:400;font-size:clamp(2.8rem,6.5vw,4.2rem);line-height:1.03;letter-spacing:-.025em;color:var(--ink);margin:0 0 1rem;text-wrap:balance}
.ep-hero .desc{font-family:var(--fb);font-size:1.02rem;line-height:1.9;color:var(--ink2);max-width:560px;margin:0 0 1.8rem;padding-left:1.1rem;border-left:2px solid var(--or-line)}
.ep-listen{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.ep-pbtn{width:70px;height:70px;border-radius:50%;background:transparent;color:var(--or);border:1px solid var(--or);display:grid;place-items:center;cursor:pointer;flex:none;position:relative;transition:background .22s,color .22s,box-shadow .22s,transform .15s}
.ep-pbtn::before{content:'';position:absolute;inset:5px;border-radius:50%;border:1px solid var(--or-line);transition:border-color .22s}
.ep-pbtn:hover{background:var(--or);color:#fff;box-shadow:0 12px 30px -8px var(--or-line)}
html[data-skin="obsidienne"] .ep-pbtn:hover,html[data-skin="lapis"] .ep-pbtn:hover,html[data-skin="porphyre"] .ep-pbtn:hover{color:#16120d}
.ep-pbtn:active{transform:scale(.95)}
.ep-pbtn svg{width:22px;height:22px;margin-left:3px}
.ep-listen .meta{display:flex;flex-direction:column}
.ep-listen .lbl{font-family:var(--fd);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);margin-bottom:.7rem;align-self:flex-start;transition:color .2s}
.ep-listen .lbl::after{content:'';display:block;width:0;height:1px;background:var(--or);margin-top:5px;transition:width .3s ease}
.ep-listen:hover .lbl{color:var(--or-deep)}
.ep-listen:hover .lbl::after{width:100%}
.ep-stats{display:flex;flex-wrap:wrap}
.ep-stats .s{padding-right:1.1rem;margin-right:1.1rem;border-right:1px solid var(--line)}
.ep-stats .s:last-child{border:none;margin:0;padding:0}
.ep-stats .v{font-family:var(--fb);font-size:1rem;color:var(--ink)}
.ep-stats .l{font-family:var(--fn);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:.15rem}
.ep-somm{padding:1.6rem 0;border-bottom:1px solid var(--line)}
.ep-somm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.6rem}
.ep-somm-i{display:flex;align-items:baseline;gap:.8rem;padding:.55rem .4rem;border-left:2px solid transparent;cursor:pointer;transition:background .14s,border-color .14s;text-decoration:none}
.ep-somm-i:hover{background:var(--or-soft)}/* fond doré pâle seul, sans barre gauche */
.ep-somm-i .n{font-family:var(--fn);font-size:.78rem;color:var(--or);flex:none;width:1.6rem;font-variant-numeric:tabular-nums}
.ep-somm-i .t{font-family:var(--fb);font-size:.96rem;color:var(--ink2);line-height:1.3;transition:color .14s}
.ep-somm-i:hover .t{color:var(--ink)}
@media(max-width:680px){.ep-somm-grid{grid-template-columns:1fr}}
.ep-article{max-width:720px;margin:0 auto;padding:1.8rem 0 1rem}
.ep-article h2{font-family:var(--fb);font-weight:400;font-size:1.8rem;line-height:1.12;color:var(--ink);margin:2.8rem 0 .2rem;display:flex;align-items:center;gap:.75rem;scroll-margin-top:80px}
.ep-article h2:first-child{margin-top:0}
.ep-article h2 .seal{width:28px;height:28px;border-radius:50%;border:1px solid var(--or);display:grid;place-items:center;font-family:var(--fn);font-size:.64rem;color:var(--or);flex:none;background:var(--or-soft)}
.ep-h2-rule{height:1px;background:linear-gradient(90deg,var(--or),var(--line) 45%,transparent);margin:.6rem 0 1.4rem}
.ep-article h3{font-family:var(--fd);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or-deep);margin:2rem 0 .6rem}
.ep-article p{font-family:var(--fb);font-size:1.02rem;line-height:1.75;color:var(--ink2);margin:0 0 1.1rem}
.ep-article strong{color:var(--ink);font-weight:600}
.ep-article em{color:var(--or-deep);font-style:italic}
.ep-article ul{margin:0 0 1.2rem;padding-left:1.2rem}
.ep-article li{font-family:var(--fb);font-size:1.02rem;line-height:1.65;color:var(--ink2);margin-bottom:.55rem}
.ep-article li strong{color:var(--or-deep)}
.ep-read{position:relative}
.ep-read .ep-article{max-width:760px;margin:0 auto}
.ep-toc-side{position:absolute;top:0;right:0;width:40px;height:100%}
.ep-toc-box{position:sticky;top:80px;width:40px}
.ep-toc-mini{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.3rem 0;transition:opacity .2s}
.ep-toc-mini .tick{width:16px;height:2px;border-radius:2px;background:var(--line2);transition:all .2s}
.ep-toc-mini .tick.done{background:var(--or-line)}
.ep-toc-mini .tick.active{background:var(--or);width:26px;height:3px}
.ep-toc-mini .mp{font-family:var(--fn);font-size:.5rem;color:var(--or);letter-spacing:.06em;writing-mode:vertical-rl;margin-top:.4rem}
.ep-toc-full{position:absolute;top:-.5rem;right:0;width:256px;background:var(--card);border:1px solid var(--or-line);border-top:2px solid var(--or);border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow-lg);overflow:hidden;z-index:20;opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.ep-toc-side:hover .ep-toc-full,.ep-toc-box:focus-within .ep-toc-full{opacity:1;visibility:visible;transform:none}
.ep-toc-side:hover .ep-toc-mini{opacity:.25}
.ep-toc-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem .45rem;font-family:var(--fd);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-deep)}
.ep-toc-pct{font-family:var(--fn);font-size:.6rem;letter-spacing:.04em;color:var(--or)}
.ep-toc-prog{height:3px;margin:0 .9rem .55rem;background:var(--paper3);border-radius:2px;overflow:hidden}
.ep-toc-progfill{height:100%;width:0;background:linear-gradient(90deg,var(--or),var(--or-deep));transition:width .15s ease}
.ep-toc{display:flex;flex-direction:column;gap:.02rem;padding:.15rem .3rem .5rem;margin:0}
.ep-toc-i{display:flex;align-items:baseline;gap:.6rem;padding:.4rem .55rem;border-left:2px solid transparent;text-decoration:none;transition:background .15s,border-color .15s}
@media(max-width:1200px){.ep-read{grid-template-columns:1fr}.ep-toc-side{display:none}}
.ep-toc-i:hover{background:var(--or-soft)}
.ep-toc-i .n{font-family:var(--fn);font-size:.6rem;color:var(--or);opacity:.55;flex:none;width:1.4rem;font-variant-numeric:tabular-nums}
.ep-toc-i .t{font-family:var(--fb);font-size:.86rem;color:var(--ink2);line-height:1.25}
.ep-toc-i.active{background:var(--or-soft)}/* fond doré pâle seul, sans barre gauche */
.ep-toc-i.active .t{color:var(--or-deep)}.ep-toc-i.active .n{opacity:1}
.ep-article{transition:max-width .3s ease}
.v3-shell.navcol .ep-article{max-width:min(960px,94%)}
.v3-shell.railcol .ep-article{max-width:min(1020px,94%)}
.v3-shell.navhide .ep-article{max-width:min(1000px,94%)}
.v3-shell.navcol.railcol .ep-article{max-width:min(1180px,94%)}
.v3-shell.navhide.railcol .ep-article{max-width:min(1280px,95%)}
.v3-shell.navcol .v3-page{--reading:1240px}
.v3-shell.railcol .v3-page{--reading:1340px}
.v3-shell.navcol.railcol .v3-page,.v3-shell.navhide.railcol .v3-page{--reading:1600px}
.v3-shell.navhide .v3-page{--reading:1280px}
@media(min-width:1201px){.ep-somm{display:none}}
.ep-call{border:1px solid var(--line2);border-left:3px solid var(--or);background:var(--paper2);padding:1rem 1.2rem;margin:1.4rem 0;border-radius:var(--r)}
.ep-call-t{font-family:var(--fd);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or-deep);margin-bottom:.6rem}
.ep-call ul{margin:0;padding-left:1.1rem}
.ep-call li{font-size:.92rem;margin-bottom:.4rem}
.ep-quote{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:1.5rem 1.2rem;margin:2.2rem 0}
.ep-quote p{font-family:var(--fb);font-size:1.14rem;font-style:italic;line-height:1.6;color:var(--or-deep);margin:0}
.ep-sources{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.2rem 0 1.4rem}
.ep-src{border:1px solid var(--line);background:var(--card);padding:.85rem .95rem;font-family:var(--fb);font-size:.86rem;line-height:1.5;color:var(--ink2);border-radius:var(--r)}
.ep-src strong{display:block;font-family:var(--fd);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--or-deep);margin-bottom:.4rem}
@media(max-width:600px){.ep-sources{grid-template-columns:1fr}}

/* ════════ LIGNE INTERACTIVE (.lq) ~ fiche · glisser · couleur · note · suppression ════════
   Opt-in : classe « lq » sur une .v3-table. UNE table par fiche → en-tête sticky unique,
   lignes-sections .lq-sec pleine largeur, lignes .lq-row. Aucune icône : le CURSEUR annonce. */
/* teintes de fond de ligne */
.lq-row.tint-or td{background:color-mix(in srgb,#C9A24D 14%,transparent)}
.lq-row.tint-gr td{background:color-mix(in srgb,#5E9E78 16%,transparent)}
.lq-row.tint-bl td{background:color-mix(in srgb,#5E96A8 16%,transparent)}
.lq-row.tint-rd td{background:color-mix(in srgb,#B5654E 16%,transparent)}
.lq-row.tint-vi td{background:color-mix(in srgb,#9B7BB0 16%,transparent)}
/* en-tête de colonnes UNIQUE + sticky (opaque pour passer sous les lignes au scroll) */
.lq thead th{position:sticky;top:0;z-index:5;background:var(--paper);box-shadow:inset 0 -1px 0 var(--or-line);padding:.95rem .7rem .6rem}
/* lignes-sections : dégradé doré qui s'efface vers le haut, sans filet au-dessus */
.lq tr.lq-sec td{padding:.9rem .7rem .55rem;border:none;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--paper2) 45%,transparent) 100%)}
.lq tr.lq-sec .pr3-sec,.lq tr.lq-sec .al-sec{margin:0}
.lq tr.lq-row:has(+ tr.lq-sec) td{border-bottom:none}
/* ── zones-curseurs ── : TOUTE cellule de ligne = couleur (palette) au clic SAUF le nom (glisser), la note, et les champs (édition) */
.lq-row td{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23C9A24D' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.2 0 1.8-1 1.8-2 0-1.4-1.3-1.8-1.3-3 0-.8.7-1.5 1.7-1.5H17a4 4 0 0 0 0-8h-1'/%3E%3Ccircle cx='8' cy='11' r='.8' fill='%23C9A24D' stroke='none'/%3E%3Ccircle cx='12' cy='8' r='.8' fill='%23C9A24D' stroke='none'/%3E%3Ccircle cx='16' cy='11' r='.8' fill='%23C9A24D' stroke='none'/%3E%3C/svg%3E") 9 9, pointer}
/* nom : le mot = fiche (livre), le reste de la cellule = glisser (déplacer)
   ~ même curseur pour la barre de section glissable (regroupé, ex-doublon plus bas) */
.lq-row td.lq-name,.lq tr.lq-sec .pr3-sec,.lq tr.lq-sec .al-sec{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23C9A24D' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M9 8l3-3 3 3M9 16l3 3 3-3'/%3E%3C/svg%3E") 9 9, grab}
.lq-row td.lq-name:active{cursor:grabbing}
.lq-fiche{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23C9A24D' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5A2 2 0 0 1 6 3H20v15H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 20a2 2 0 0 1 2-2h14M8 7.5h7M8 10.5h5'/%3E%3C/svg%3E") 3 3, help;transition:color .15s}
.lq-fiche:hover{color:var(--or)}
/* cuisson + grammage : italique inline doré, SÉPARÉS (multi-clic) */
.al-csep{color:var(--or);margin:0 .16rem;font-style:normal}
/* facettes inline marque · type · cuisson : même police (Spectral italique), sans soulignement */
.al-cuis,.al-marque,.al-type{font-family:var(--fb);font-style:italic;font-size:.92rem;color:var(--or-deep);cursor:pointer;transition:color .15s}
.al-cuis:hover,.al-marque:hover,.al-type:hover{color:var(--or)}
.al-q{display:inline-flex;align-items:baseline;gap:.3rem;justify-content:flex-end}
.al-q .qty{width:46px!important;max-width:46px!important;text-align:right!important;padding:.2rem .25rem!important}
.al-unit{font-family:var(--fb);font-style:italic;font-size:.84rem;color:var(--or-deep);cursor:pointer;transition:color .15s}
.al-unit:hover{color:var(--or)}
/* note : clic = note perso ; ne dore qu'au survol */
.lq-row td.lq-note{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23C9A24D' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 11h8M8 15h5'/%3E%3C/svg%3E") 5 3, text;transition:color .15s}
.lq-row td.lq-note:hover{color:var(--or)}
.lq-color.thin{width:22px;padding-left:0;padding-right:0}
/* le champ garde son curseur texte (édition) ~ priorité sur la palette de la cellule */
.lq-row td input,.lq-row td textarea{cursor:text}
/* record (.pr) : surlignage doré seulement sur le nom (jusqu'à la découpe), ne masque pas la teinte */
.lq tr.pr td.lq-name{background:var(--or-soft)}
/* section entière glissable : poignée = barre de section ~ curseur regroupé plus haut avec .lq-name */
.lq tr.lq-sec.lift .pr3-sec,.lq tr.lq-sec.lift .al-sec{cursor:grabbing}
/* état soulevé pendant le glissement (ligne ou bloc de section) */
.lq tr.lift td{background:var(--or-soft);position:relative;z-index:3}
.lq tr.lq-row.lift td{box-shadow:var(--shadow-lg)}
/* popups fiche (lecture seule) + note (perso) ~ injectés par oltlo.js */
.lq-media{position:relative;aspect-ratio:16/9;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--paper2),var(--paper3));display:grid;place-items:center;margin-bottom:1.1rem}
.lq-media .ph{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink3)}
.lq-media .ph svg{width:34px;height:34px;opacity:.6}
.lq-media .ph span{font-family:var(--fn);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase}
.lq-media .play{position:absolute;width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.32);border:1.5px solid var(--or);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.lq-media .play:hover{transform:scale(1.08)}
.lq-media .play svg{width:20px;height:20px;color:var(--or);margin-left:3px}
.lq-fh{font-family:var(--fb);font-weight:600;font-size:1.15rem;color:var(--ink);margin:0 0 .2rem}
.lq-fmeta{font-family:var(--fn);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 1rem}
.lq-fsec{font-family:var(--fn);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-deep);margin:1rem 0 .35rem}
.lq-fp{font-family:var(--fb);font-size:.92rem;line-height:1.55;color:var(--ink2);margin:0}
.lq-pop-ta{width:100%;font-family:var(--fb);font-size:.92rem;line-height:1.5;padding:.6rem .7rem;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);color:var(--ink);outline:none;resize:vertical;box-sizing:border-box}
.lq-pop-ta:focus{border-color:var(--or-line)}

/* ═══════════ OUTILS FLOTTANTS ◆ bas-droite de la COLONNE CENTRALE (partagé) ═══════════ */
/* décalé de la largeur du rail (286px) pour rester dans la colonne centrale ; recollé au bord quand le rail est replié */
.tool-fab{position:fixed;bottom:1.4rem;right:calc(286px + 1.4rem);z-index:60;display:flex;align-items:center;gap:.55rem}
/* lanceur d'outil actif (outil ancré) : accent doré, comme « Jour libre » */
.tool-fab .v3-btn.ic.dock-on{border-color:var(--or);color:var(--or-deep);background:var(--or-soft);box-shadow:var(--shadow-lg)}
/* dock : entrée glissée à l'ouverture, sortie glissée à la fermeture ; la transition transform
   sert aussi à SUIVRE le repli du rail commu (railcol) en douceur */
.dejov,.rm1ov{transition:transform .26s cubic-bezier(.4,0,.2,1)}
@keyframes oldockin{from{transform:translateX(100%);opacity:.5}to{transform:none;opacity:1}}
@keyframes oldockout{to{transform:translateX(100%);opacity:0}}
html.oldock .dejpk,html.oldock .rm1pk{animation:oldockin .3s cubic-bezier(.22,.61,.36,1) both}
.dejpk.oldock-closing,.rm1pk.oldock-closing{animation:oldockout .26s cubic-bezier(.4,0,.2,1) forwards}
/* === LE STADE & LE CANON : mêmes overlays dockables (.bfov / .bfpk) ~ actifs seulement si html.oldock === */
html.oldock .bfov{position:fixed;inset:0 0 0 auto;width:min(440px,46vw);background:transparent;backdrop-filter:none;padding:0;display:block;z-index:1200}
html.oldock .bfpk{width:100%;height:100dvh;max-height:none;border-radius:0;border-left:1px solid var(--or-line);box-shadow:-10px 0 28px rgba(0,0,0,.14);overflow-x:hidden;animation:oldockin .3s cubic-bezier(.22,.61,.36,1) both}
.bfov{transition:transform .26s cubic-bezier(.4,0,.2,1)}
.bfpk.oldock-closing{animation:oldockout .26s cubic-bezier(.4,0,.2,1) forwards}
/* (railcol ~ .bfov translateX RETIRÉ ~ l'outil s'ouvre même rail replié) */
html.oldock .bfpk .x{display:none}
html.oldock .bfpk .cl-grid,html.oldock .bfpk .cl-form,html.oldock .bfpk .vma-form,html.oldock .bfpk .bf-form{grid-template-columns:1fr}
html.oldock .bfpk [style*="1fr 1fr"]{grid-template-columns:1fr!important}
.v3-shell.railcol ~ .tool-fab,.v3-shell.navhide.railcol ~ .tool-fab{right:1.4rem}
/* dock ouvert : la grappe se cale à gauche de l'outil ET reste bornée à la colonne centrale ;
   si elle manque de place, son surplus REMONTE au-dessus du player (wrap vers le haut) au lieu
   de déborder sur le menu de gauche. Outil replié → la grappe revient au bord, sur une ligne. */
.v3-shell.tooldock ~ .tool-fab{right:calc(min(440px,46vw) + 1.4rem);max-width:calc(100vw - min(440px,46vw) - 232px - 3rem);flex-wrap:wrap-reverse;justify-content:flex-end}
/* (tooldock.railcol ~ .tool-fab RETIRÉ : outil ouvert = grappe décalée à gauche du panneau, rail replié ou non) */
/* timer logé dans le fab : pilule flottante cohérente avec les boutons icône */
.tool-fab .pr3-tmr .face{box-shadow:var(--shadow);border-color:var(--or-line)}
.tool-fab .v3-btn.ic{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--or-line);box-shadow:var(--shadow);color:var(--or-deep);transition:border-color .18s,box-shadow .2s,transform .12s}
.tool-fab .v3-btn.ic:hover{border-color:var(--or);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.tool-fab .v3-btn.ic:active{transform:scale(.94)}
.tool-fab .v3-btn.ic svg{width:15px;height:15px;display:block}
@media(max-width:980px){.tool-fab{right:1.4rem;bottom:5.2rem}}

/* action primaire logée à droite de la rangée d'onglets (remplace l'ancien bandeau de titre) */
.v3-tabs .tab-action{align-self:center;margin:0 0 .4rem auto;flex:none}
/* MENU = barre du haut pleine largeur (au même niveau/position que l'ancien bandeau de titre) */
/* le menu d'onglets ne colle plus : c'est l'en-tête de colonnes (.lq thead) qui devient sticky */
.v3-tabs.tabbar{margin:0;padding:.7rem 1.6rem .65rem;background:color-mix(in srgb,var(--paper) 90%,transparent)}
.v3-tabs.tabbar .v3-tab{padding-top:.55rem}
/* nom de la fiche ouverte, dans le menu (｜ + nom éditable) à côté des onglets */
.tab-fichenom{display:inline-flex;align-items:center;gap:.75rem;align-self:center;margin:0 .3rem .35rem;white-space:nowrap}
.tab-fichenom .bar{width:1px;height:1.15rem;background:var(--line2);flex:none}
.tab-fichenom .nm{font-family:'Educateursportif','Oltlo Titre','Cinzel',serif;font-size:1.02rem;color:var(--ink);outline:none;cursor:text;border-bottom:1px dashed transparent;padding-bottom:1px}
.tab-fichenom .nm:hover,.tab-fichenom .nm:focus{border-bottom-color:var(--or-line)}
/* popup de sauvegarde : nom + bouton unique de visibilité (Privé→Coach→Commu→Web) */
.save-lbl{display:block;font-family:var(--fd);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:1rem 0 .45rem}
.save-name{width:100%;box-sizing:border-box;font-family:var(--fb);font-size:1rem;padding:.6rem .7rem;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);color:var(--ink);outline:none}
.save-name:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--or-soft)}
.save-share{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fd);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or-deep);background:var(--btn-grain),var(--card);border:1px solid var(--or-line);border-radius:var(--r);padding:.4rem .7rem;cursor:pointer;transition:all .15s}
.save-share:hover{border-color:var(--or);box-shadow:var(--shadow-sm)}
.save-share svg{width:15px;height:15px;flex:none}
.save-foot{display:flex;justify-content:center;gap:.6rem;margin-top:1.5rem}
/* popup générique (centralisé) ~ utilisé par le popup de sauvegarde et autres modales */
.v3-ovl{display:none;position:fixed;inset:0;background:rgba(26,22,17,.5);backdrop-filter:blur(3px);z-index:1000}
.v3-ovl.open{display:block}
.v3-pop{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:94%;max-width:520px;max-height:88vh;overflow:auto;z-index:1001;background:var(--card);border:1px solid var(--or-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);scrollbar-width:thin}
.v3-pop.open{display:block;animation:popin .25s ease}
.v3-poph{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem .85rem;border-bottom:1px solid var(--line)}
.v3-poph .t{font-family:var(--fd);font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--or-deep)}
.v3-poph .x{margin-left:auto;width:30px;height:30px;border:1px solid var(--line2);border-radius:var(--r);background:none;color:var(--ink2);cursor:pointer;display:grid;place-items:center;transition:all .2s}
.v3-poph .x:hover{color:var(--or-deep);border-color:var(--or)}
.v3-poph .x svg{width:13px;height:13px}
.v3-popb{padding:1rem 1.1rem 1.15rem}
@keyframes popin{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* v3in (pour .v3-panel / autres) : simple fondu-montée, SANS translate de centrage */
@keyframes v3in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* menu du haut : onglet actif = texte doré seul ; on retire son soulignement doré propre (qui surplombait la ligne dorée de base du menu) */
.v3-tabs.tabbar .v3-tab.on{border-bottom-color:transparent}
/* SOUS-MENU (niveau 2) ◆ collé sous le menu, en continuité (pas de filet doré en haut) */
/* sous-menu collé ◆ hauteur HARMONISÉE quel que soit le contenu (onglets OU recherche) */
.tab-sub,.al-sub{background:var(--paper2);border-bottom:1px solid var(--line);margin:-1.6rem -1.6rem 1.2rem;padding:0 1.6rem;display:flex;align-items:center;min-height:2.85rem;position:relative}
.tab-sub > *,.al-sub > *{flex:1;min-width:0}
.tab-sub .v3-tabs,.al-sub .v3-tabs{border-bottom:none}
/* ── poignée de repli du 2e menu : SUR la barre (bord bas), même geste que les grips ── */
.tab-grip{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:pointer;z-index:26;background:transparent}
.tab-grip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--or);opacity:0;transition:opacity .18s,box-shadow .18s}
.tab-grip:hover::after{opacity:1;box-shadow:0 0 10px var(--or-line)}
.tab-grip:active::after{background:var(--or-deep)}
/* barre REPLIÉE : AUCUN espace ~ elle disparaît complètement (hauteur 0). La réouverture :
   une zone de survol fantôme À CHEVAL sur la ligne de séparation ~ passer dessus DORE la
   ligne (même langage que les poignées de colonnes), cliquer rouvre. Aucune bande, aucun
   filet résiduel : cohérent pages ET popups d'ajout, tous skins. */
.subhide .tab-sub:has(.smart-find),.subhide .al-sub:has(.smart-find){
  min-height:0;padding-top:0;padding-bottom:0;background:transparent;border-top:none;border-bottom:none;overflow:visible;position:relative}
/* pas de height:0 sec : la hauteur suit le max-height ANIMÉ de .smart-find (.25s ease)
   ~ la fermeture glisse exactement comme l'ouverture, puis retombe à 0 */
.subhide .tab-grip{height:14px;bottom:auto;top:-7px}   /* zone fantôme à cheval sur la ligne (0 espace pris) */
.subhide .tab-grip::after{bottom:auto;top:calc(50% - 1px)}   /* le filet doré s'allume PILE sur la ligne */
/* rabattage ANIMÉ vers le haut (mêmes .25s ease que les panneaux) : la barre se
   replie jusqu'au menu du dessus, sans liseré résiduel ; la poignée (absolue) reste cliquable */
.smart-find{max-height:2.5rem;transition:max-height .25s ease,opacity .2s ease}
.subhide .smart-find{max-height:0!important;opacity:0!important;overflow:hidden!important}
.subhide .sb-drop{display:none}
/* séparateur décoratif ◎ (remplace l'ancien losange ◆) ◆ toujours doré */
.dia{color:var(--or);font-style:normal;font-weight:inherit}
/* l'attribut hidden doit toujours l'emporter (sinon display:flex/inline-flex l'écrase) */
[hidden]{display:none!important}

/* ═══════════ SYSTÈME DE PROGRAMME / PLAN (enchaînement de fiches) ═══════════ */
/* (prog-fab/ovl/pop/h/find : RETIRÉS 2026-07-18 ~ l'ancien popup n'existe plus, la page n'utilise que prog-cad/foot/slot/trame) */
.prog-cad{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.9rem 1.2rem;border-bottom:1px solid var(--line)}
.prog-cad .lab{font-family:var(--fn);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.prog-cad .chip{font-family:var(--fd);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:var(--btn-grain),var(--card);border:1px solid var(--line2);border-radius:var(--r-xs);padding:.34rem .65rem;cursor:pointer;transition:all .15s}
.prog-cad .chip.on{color:var(--or-deep);border-color:var(--or-line);background:var(--btn-grain-on),var(--or-soft)}
.prog-cad .num{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fn);font-size:.62rem;color:var(--ink2)}
.prog-cad .num input{width:42px;font-family:var(--fn);font-size:.9rem;text-align:center;border:1px solid var(--line2);border-radius:var(--r-xs);background:var(--card);color:var(--ink);padding:.25rem;outline:none}
.prog-trame{padding:.9rem 1.2rem}
.prog-slot{display:flex;align-items:center;gap:.8rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--btn-grain),var(--card);margin-bottom:.5rem;transition:border-color .15s,box-shadow .15s,opacity .15s;cursor:grab}
.prog-slot:active{cursor:grabbing}
.prog-slot.dragging{opacity:.45}
.prog-slot.drop-before{box-shadow:inset 0 3px 0 -1px var(--or)}
.prog-slot.drop-after{box-shadow:inset 0 -3px 0 -1px var(--or)}
.prog-slot:hover{border-color:var(--or-line)}
.prog-slot.now{border-color:var(--or)}/* fin cadre doré seul ~ dorure lourde gauche retirée */
.prog-slot .grip{color:var(--ink3);cursor:grab;font-size:1rem;line-height:1;letter-spacing:-2px}
.prog-slot .day{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--or);display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:.58rem;color:var(--or);background:var(--or-soft);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--or-line)}
.prog-slot .arr{color:var(--or);flex:none}.prog-slot .arr svg{width:15px;height:15px;display:block}
.prog-slot .fiche{flex:0 1 auto;min-width:0;margin-right:auto;font-family:'Educateursportif','Oltlo Titre','Cinzel',serif;font-size:1.02rem;color:var(--ink)}
.prog-slot .meta{font-family:var(--fn);font-size:.56rem;color:var(--ink3);white-space:nowrap}
.prog-slot .slot-load{flex:none;font-size:.5rem;letter-spacing:.1em;padding:.3rem .65rem;white-space:nowrap}
/* nom de fiche éditable dans un slot */
.prog-slot .fiche[contenteditable]{outline:none;cursor:text;border-bottom:1px dashed transparent}
.prog-slot .fiche[contenteditable]:hover,.prog-slot .fiche[contenteditable]:focus{border-bottom-color:var(--or-line)}
/* nom de section éditable (programmation + alimentation) : curseur texte, pas le grab de la ligne-section */
.pr3-sec .v3-seal .snm,.al-sec .nm{outline:none;cursor:text}
/* nom de section VIDÉ : sans garde-fou le span contenteditable tombe à 0 px de large
   → impossible à recliquer. On garde une zone cliquable + un fantôme « Renommer… ». */
.pr3-sec .v3-seal .snm:empty,.al-sec .nm:empty{display:inline-block;min-width:6rem;min-height:1em}
.pr3-sec .v3-seal .snm:empty::before,.al-sec .nm:empty::before{content:'Renommer…';color:var(--ink3);opacity:.55;pointer-events:none}
.prog-slot .rest-choice{flex:1;display:flex;gap:.4rem;flex-wrap:wrap}
.prog-slot .rest-choice .chip{font-family:var(--fd);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:var(--btn-grain),var(--card);border:1px solid var(--line2);border-radius:var(--r-xs);padding:.28rem .55rem;cursor:pointer;transition:all .15s}
.prog-slot .rest-choice .chip:hover{color:var(--or-deep);border-color:var(--or)}
.prog-slot .rest-choice .chip.on{color:var(--or-deep);border-color:var(--or-line);background:var(--btn-grain-on),var(--or-soft)}
.prog-slot .act{display:flex;gap:.15rem;flex:none;align-items:center}
.prog-slot .act button{width:24px;height:22px;display:grid;place-items:center;border:none;background:none;color:var(--ink3);cursor:pointer}
.prog-slot .act button:hover{color:var(--or-deep)}.prog-slot .act svg{width:13px;height:13px}
.prog-foot{display:flex;gap:.5rem;padding:.9rem 1.2rem;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--card)}

/* ════ Barre intelligente « Mon plan » : barre lapidaire pleine hauteur + bouton-bascule de mode + déroulé ════ */
/* La barre vit DANS le bandeau collé (.tab-sub/.al-sub) ; filets dorés haut & bas, cellules à filets verticaux. */
.smart-find{display:flex;align-items:stretch;height:2.35rem;flex-wrap:nowrap;overflow:visible}
/* filet du HAUT = bordure du menu au-dessus ; filet du BAS = DORÉ (comme le menu) ; seul le bouton sélectionné le recouvre. Pas de padding à droite : la dernière source touche la bordure du rail (= son « | ») */
.tab-sub:has(.smart-find),.al-sub:has(.smart-find){align-items:stretch;min-height:0;padding:0 0 0 1.6rem;border-bottom-color:var(--or-line)}
.smart-find .sf-find{flex:1;min-width:90px;display:flex;align-items:center;gap:.55rem;padding-right:.9rem;border-right:1px solid var(--line2)}
.smart-find .sf-find > svg{width:15px;height:15px;color:var(--ink3);flex:none}
.smart-find .sf-find input{flex:1;min-width:50px;border:none;background:none;outline:none;font-family:var(--fb);font-size:.95rem;color:var(--ink)}
.smart-find .sf-find .cnt{font-family:var(--fn);font-size:.55rem;letter-spacing:.05em;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* mode = bouton-bascule : TEXTE doré, label centré ; sa sous-barre (--card) n'apparaît QUE quand le déroulé est ouvert */
.smart-find .sf-mode{display:inline-flex;align-items:center;justify-content:center;padding:0 1.3rem;cursor:pointer;white-space:nowrap;flex:none;position:relative;z-index:2;
  font-family:var(--fd);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-deep);font-weight:600;
  background:none;border:none;border-right:1px solid var(--line2);transition:opacity .15s}
.smart-find .sf-mode:hover{opacity:.85}
.smart-find .sf-mode .lbl{min-width:4.1rem;text-align:center}
/* déroulé ouvert : le mode ET la source active prennent le FOND + la sous-barre couleur du déroulé (--card) ; sinon fond normal */
.tab-sub:has(+ .sb-drop.open) .sf-mode,.al-sub:has(+ .sb-drop.open) .sf-mode,
.tab-sub:has(+ .sb-drop.open) .sf-cell.on,.al-sub:has(+ .sb-drop.open) .sf-cell.on{background:var(--card);box-shadow:0 2px 0 0 var(--card)}
/* séparateur mode | sources : filet neutre (pas de doré) */
.smart-find .sf-div{width:0;flex:none;border-left:1px solid var(--line2)}
/* sources = cellules texte plates ; l'active prend la couleur de la liste (relie le filtre au contenu), sans doré */
.smart-find .sf-srcs{display:flex;align-items:stretch;flex:none}
.smart-find .sf-cell{display:inline-flex;align-items:center;padding:0 1rem;cursor:pointer;white-space:nowrap;
  font-family:var(--fd);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);
  background:none;border:none;border-right:1px solid var(--line2);transition:color .15s,background .15s}
.smart-find .sf-srcs .sf-cell:last-child{border-right:none}
/* la barre va de BOUT EN BOUT : le dernier élément (sources, recherche seule, mode…) n'a jamais de filet vertical terminal → pas de « coin/fermeture » à droite, quel que soit l'agencement de la page */
.smart-find > :last-child{border-right:none}
.smart-find .sf-cell:hover{color:var(--ink)}
.smart-find .sf-cell.on{color:var(--or-deep);background:none;font-weight:600;position:relative;z-index:2}
/* déroulé pleine largeur (aligné sur le bandeau collé : marge négative -1.6rem) */
.sb-drop{margin:0 -1.6rem;max-height:0;overflow:hidden;background:var(--card);transition:max-height .34s cubic-bezier(.22,.61,.36,1)}
.sb-drop.open{max-height:1400px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.sb-dropbody{padding:1rem 1.6rem 1.3rem;opacity:0;transform:translateY(-7px);transition:opacity .25s .05s,transform .25s .05s}/* air à droite pour l'aperçu de fiche (tableau + pied) ; les LIGNES de résultat .sb-res débordent pour rester au ras bord */
.sb-drop.open .sb-dropbody{opacity:1;transform:none}
.sb-drophint{font-family:var(--fd);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-deep);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.sb-drophint .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--or-line),transparent)}
/* fil d'Ariane DANS le titre : chaque nom = un maillon cliquable (swap) + éditable (renommer) */
.sb-drophint .sb-names{display:inline-flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.sb-drophint .sb-name{position:relative;color:var(--ink2);text-transform:none;letter-spacing:0;font-family:var(--fb);font-size:.92rem;border-bottom:1px dashed var(--line2);outline:none;padding:0 .15rem;cursor:pointer}
.sb-drophint .sb-name:not(:first-child)::before{content:'◎';position:absolute;left:-.575rem;top:50%;transform:translate(-50%,-50%);color:var(--or);font-size:.72rem;line-height:1}
.sb-drophint .sb-name:hover{color:var(--ink)}
.sb-drophint .sb-name.on{color:var(--or-deep);border-bottom-color:var(--or)}
.sb-drophint .sb-name:focus{border-bottom-style:solid;border-bottom-color:var(--or);cursor:text}
.sb-drophint .sb-imbrik{font-family:var(--fd);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or-deep);background:var(--btn-grain),var(--card);border:1px dashed var(--or-line);border-radius:var(--r-xs);padding:.24rem .55rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle}
.sb-drophint .sb-imbrik:hover{border-style:solid;border-color:var(--or)}
.sb-drophint .sb-imbrik svg{width:9px;height:9px}
.sb-res{display:flex;align-items:center;gap:.85rem;padding:.7rem .2rem;border-bottom:1px solid var(--line);cursor:pointer;transition:background .14s}
.sb-res:last-child{border-bottom:none}
.sb-res:hover{background:var(--paper2)}
.sb-res .sl{width:34px;height:34px;border-radius:var(--r-xs);background:var(--btn-grain),var(--or-soft);border:1px solid var(--or-line);display:grid;place-items:center;flex:none;color:var(--or-deep)}
.sb-res .sl svg{width:16px;height:16px}
.sb-res .h{font-family:var(--fb);font-size:.96rem;color:var(--ink)}
.sb-res .d{font-family:var(--fn);font-size:.62rem;color:var(--ink3);letter-spacing:.02em;margin-top:.1rem}
.sb-res .go{margin-left:auto;color:var(--ink3);padding-right:.85rem}.sb-res .go svg{width:16px;height:16px}
.sb-res:hover .go{color:var(--or)}
/* réutilise prog-cad/prog-trame/obj-* à l'intérieur du déroulé (pas de double définition) */
.sb-drop .prog-cad{padding:0 0 .9rem;border-bottom:none}
.sb-drop .prog-trame{padding:0}
.sb-drop .prog-foot{position:static;padding:1rem 0 0;background:none}
.sb-drop .obj-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin:.1rem 0 1rem}
/* champ de note libre dans le pied (remplace la cadence) */
.prog-foot .foot-note{flex:1;min-width:120px;font-family:var(--fb);font-size:.92rem;padding:.5rem .7rem;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper2);color:var(--ink);outline:none}
.prog-foot .foot-note::placeholder{color:var(--ink3)}
.prog-foot .foot-note:focus{border-color:var(--or);box-shadow:0 0 0 3px var(--or-soft)}
/* synthèse « vision de l'ensemble » dans l'aperçu d'une fiche / plan / objectif (remplace le champ note → bouton Note) */
.foot-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .8rem;margin-top:.95rem;padding:.6rem .9rem;border:1px solid var(--or-line);background:var(--or-soft);border-radius:var(--r);font-family:var(--fb);font-size:.84rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.foot-stats .lbl{font-family:var(--fd);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);align-self:center;margin-right:.15rem}
.foot-stats .seg{display:inline-flex;align-items:baseline;gap:.32rem;white-space:nowrap}
.foot-stats .seg b{font-weight:600;color:var(--or-deep)}
.foot-stats .dia{color:var(--or);font-size:.7rem;align-self:center}
.prog-foot .foot-notebtn{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.prog-foot .foot-notebtn.dock-on{border-color:var(--or);color:var(--or-deep);background:var(--or-soft)}

/* ════════ TABLETTE TOTAUX JOURNALIERS (centralisée) + couche OBJECTIF (réglette V1) ════════ */
.al-totals{border:1px solid var(--or-line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm);margin-top:.2rem;position:relative}
.al-macros{display:grid;grid-template-columns:repeat(4,1fr)}
.al-macros .am{position:relative;padding:1.2rem 1.3rem .95rem;border-right:1px solid var(--line)}
.al-macros .am:last-child{border-right:none}
.al-macros .am .v{font-family:var(--fb);font-size:1.75rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.al-macros .am .v small{font-family:var(--fd);font-size:.58rem;letter-spacing:.08em;color:var(--ink3);margin-left:3px}
.al-macros .am .l{font-family:var(--fn);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-top:.6rem;display:flex;align-items:center;gap:.45rem}
.al-macros .am .l::before{content:'';width:5px;height:5px;border-radius:1px;background:var(--or-line);transform:rotate(45deg);flex:none}
.al-macros .am:nth-child(2) .l::before{background:var(--or)}
.al-macros .am:nth-child(3) .l::before{background:var(--or-bright)}
.al-macros .am:nth-child(4) .l::before{background:var(--or-soft)}
.al-macros .am.hero{background:linear-gradient(180deg,var(--or-soft),transparent 150%)}
.al-macros .am.hero::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--or),var(--or-line) 55%,transparent)}
.al-macros .am.hero .v{color:var(--or-deep)}.al-macros .am.hero .l{color:var(--or-deep)}.al-macros .am.hero .l::before{background:var(--or-deep)}
.al-sep{height:1px;background:linear-gradient(90deg,transparent,var(--or-line) 18%,var(--or-line) 82%,transparent)}
.al-micros{display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--paper2) 55%,transparent)}
.al-micro{padding:.7rem 1.3rem;border-right:1px solid var(--line);border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.al-micro:nth-child(4n){border-right:none}.al-micro:nth-child(-n+4){border-top:none}
.al-micro .v{font-family:var(--fn);font-size:.9rem;color:var(--ink)}
.al-micro .l{font-family:var(--fn);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-top:.3rem}
@media(max-width:760px){
  .al-macros{grid-template-columns:1fr 1fr}.al-macros .am:nth-child(2n){border-right:none}.al-macros .am:nth-child(n+3){border-top:1px solid var(--line)}
  .al-micros{grid-template-columns:repeat(2,1fr)}.al-micro:nth-child(2n){border-right:none}.al-micro:nth-child(n+3){border-top:1px solid var(--line)}.al-micro:nth-child(-n+2){border-top:none}
}
/* ── tooltip de survol des totaux d'une SECTION (alimentation ET programmation), toujours affiché (indépendant du réglage OltloTip) ── */
.asect-tip{position:fixed;z-index:1400;max-width:360px;background:var(--card);border:1px solid var(--or-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.9rem 1rem;pointer-events:none}
.asect-tip[hidden]{display:none}
.asect-tip .asect-cost{font-family:var(--fb);font-size:.92rem;color:var(--ink);margin-bottom:.65rem}
.asect-tip .asect-cost b{color:var(--or-deep)}
/* ════════ TOOLTIP DE SECTION DE LA TABLE (#alSecTip) ◆ largeur qui n'écrase plus la grille ════════
   COPIE EXACTE du correctif déjà appliqué à l'Arène (#prSecTip, base/programmation.css) ~ mêmes
   valeurs, seul le sélecteur change. Le socle .asect-tip ci-dessus est PARTAGÉ et volontairement
   étroit (max-width:360px) : avec .al-micros en 4 colonnes et 1.3rem de padding par cellule, il ne
   restait qu'une quarantaine de pixels utiles ⇒ « 206 mg » se coupait en deux et « Vitamine A » se
   collait. On corrige ICI, pour ce seul tooltip, sans toucher au socle ni à l'Arène.
   Le placement (glisse à gauche/en haut quand ça sort) est calculé en JS ~ alimentation.html, place(). */
#alSecTip{
  max-width:none;
  /* largeur EXPLICITE : le tooltip ne se mesure plus « à la place qu'il reste à droite ».
     Sans elle, un tooltip collé au bord droit se re-mesurait plus étroit qu'il ne serait
     au survol suivant, et le placement partait faux. */
  width:min(480px,calc(100vw - 24px));
  /* garde-fou : jamais plus haut que la fenêtre (le JS affine avec la place réelle) */
  max-height:calc(100vh - 24px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
}
#alSecTip .al-micros{
  /* colonnes AUTO : chaque cellule a au moins 140px, la grille en met autant que la largeur permet.
     Plus de nombre de colonnes codé en dur ⇒ quand le JS élargit le tooltip (fenêtre basse),
     la grille gagne des colonnes et perd des lignes toute seule. */
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  /* filets de grille par le GAP : indépendants du nombre de colonnes (les règles nth-child(4n)
     du socle, elles, supposaient 4 colonnes ~ elles laissaient des bordures orphelines). */
  gap:1px;background:var(--line);
}
#alSecTip .al-micro{padding:.6rem .85rem;border:none;min-width:0;background:color-mix(in srgb,var(--paper2) 55%,var(--card))}
/* la valeur et son unité ne se séparent JAMAIS (« 206 » d'un côté, « mg » de l'autre) */
#alSecTip .al-micro .v{white-space:nowrap}
/* le libellé, lui, a le droit de passer à la ligne ~ mais jamais au milieu d'un mot */
#alSecTip .al-micro .l{letter-spacing:.1em;line-height:1.35;word-break:normal;overflow-wrap:break-word;hyphens:none}
#alSecTip .mic-empty{padding:.6rem .85rem;font-family:var(--fb);font-size:.8rem;color:var(--ink3);background:var(--card)}
/* ── couche objectif : visible seulement si .al-totals[data-obj="on"] ── */
.al-totals[data-obj="off"] .og{display:none!important}
.al-totals .og-head{display:none;align-items:center;gap:.5rem;font-family:var(--fd);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-deep);padding:.85rem 1.3rem .85rem}
.al-totals[data-obj="on"] .og-head{display:flex}
.al-totals .og-head .dot{width:6px;height:6px;border-radius:1px;background:var(--or);transform:rotate(45deg)}
/* micros : cible inline (texte léger) */
.al-micro .v .og{font-family:var(--fn);font-size:.6rem;color:var(--ink3);margin-left:.15rem}
.al-micro .v .og b{color:var(--or-deep);font-weight:400}.al-micro .v .og.over b{color:#d9b15a}
/* macros : valeur + réglette graduée pleine largeur */
.al-macros .am .top{display:flex;align-items:center;gap:1.1rem}
.al-macros .am .gz{flex:1;position:relative;height:30px;min-width:54px}
.am .gz .ticks{position:absolute;left:0;right:0;top:7px;height:9px;opacity:.65;background:repeating-linear-gradient(90deg,var(--line2) 0,var(--line2) 1px,transparent 1px,transparent 10%)}
.am .gz .base{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--line2)}
.am .gz .fill{position:absolute;left:0;top:10px;height:3px;border-radius:2px;width:min(calc(var(--p)*1%),100%);background:linear-gradient(90deg,var(--or-deep),var(--or))}
.am .gz .now{position:absolute;top:5px;height:11px;width:2px;border-radius:2px;background:var(--or-deep);left:min(calc(var(--p)*1%),100%);transform:translateX(-1px)}
.am .gz .tgt{position:absolute;top:6px;height:10px;right:0;width:1.5px;background:var(--or)}
.am .gz .cib{position:absolute;right:0;top:20px;font-family:var(--fn);font-size:.55rem;color:var(--ink3);line-height:1}
.am.over .gz .now{background:#d9b15a}

/* ════════════════════════════════════════════════════════════════════════
   SÉLECTEURS UNIFIÉS ~ .ol-drop (champ) + .ol-bar (barre).
   Remplacent les <select> natifs (fini la surbrillance bleue de l'OS).
   Carrés, mats (or doux), ouverture soudée (boîte + panneau = un bloc).
   Le <select> reste dans le DOM (caché .ol-native) = source de valeur ⇒
   tout le JS existant (.value / change) continue de fonctionner.
   ════════════════════════════════════════════════════════════════════════ */
.ol-native{position:absolute!important;width:1px!important;height:1px!important;padding:0;margin:-1px;border:0;clip:rect(0 0 0 0);overflow:hidden;pointer-events:none}  /* !important : une règle de page (ex. .vmaport .v3-select{width:100%} au Stade) redonnait sa largeur au select caché → débord horizontal */

/* ── champ ── */
.ol-drop{position:relative}
.ol-drop>.b{display:flex;align-items:center;gap:.4rem;width:100%;padding:.46rem .6rem;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper2);cursor:pointer;font-family:var(--fb);font-size:.7rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-align:left;transition:border-color .14s,background .14s}
.ol-drop>.b:hover{border-color:var(--or-line)}
.ol-drop>.b .lab{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-drop>.b .val{font-family:var(--fn);font-size:.55rem;color:var(--or);text-transform:none;letter-spacing:0}
.ol-drop>.b .car{color:var(--or);font-size:.5rem;transition:transform .2s}
.ol-drop>.m{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--paper2);border:1px solid var(--or-line);border-top:none;border-radius:0 0 var(--r) var(--r);overflow:hidden}
.ol-drop.open>.b{border-color:var(--or-line);border-bottom-color:transparent;border-radius:var(--r) var(--r) 0 0}
.ol-drop.open>.b .car{transform:rotate(180deg)}
.ol-drop.open>.m{display:block;animation:ol-in .14s ease}
@keyframes ol-in{from{opacity:0}to{opacity:1}}
.ol-drop .o{display:flex;align-items:center;gap:.45rem;width:100%;padding:.4rem .6rem;border:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left;font-family:var(--fb);font-size:.66rem;text-transform:uppercase;letter-spacing:.01em;color:var(--ink2);transition:background .12s,color .12s}
.ol-drop .o:last-child{border-bottom:none}
.ol-drop .o:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--or-deep)}
.ol-drop .o .lab{flex:1}
.ol-drop .o .val{font-family:var(--fn);font-size:.54rem;color:var(--ink3);text-transform:none;letter-spacing:0}
.ol-drop .o.on{color:var(--or-deep);font-weight:700}.ol-drop .o.on .val{color:var(--or)}

/* ── barre (markup manuel : bandeau recherche + onglet déroulant) ── */
.ol-bar{border:1px solid var(--or-line);background:var(--card);position:relative}
.ol-bar.open{border-bottom-color:var(--or-line)}
.ol-bar .bar{display:flex;align-items:stretch;height:2.6rem;position:relative;z-index:3}
.ol-bar .find{flex:1;display:flex;align-items:center;gap:.5rem;padding:0 .8rem;min-width:0}
.ol-bar .find svg{width:12px;height:12px;color:var(--ink3);flex:none}
.ol-bar .find input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--fb);font-size:.78rem;color:var(--ink)}
.ol-bar .find input::placeholder{color:var(--ink3)}
.ol-bar .cel{display:inline-flex;align-items:center;gap:.4rem;padding:0 1rem;border:none;border-left:1px solid var(--line2);background:none;cursor:pointer;font-family:var(--fd);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--or);font-weight:700;white-space:nowrap;transition:background .14s,box-shadow .14s}
.ol-bar .cel .car{font-size:.48rem;color:var(--or);transition:transform .2s}
.ol-bar.open .cel{background:var(--card);border:none;border-left:1px solid var(--or-line);box-shadow:0 3px 0 0 var(--card);position:relative;z-index:41}
.ol-bar.open .cel .car{transform:rotate(180deg)}
.ol-bar .pan{display:none;position:absolute;top:100%;right:-1px;min-width:240px;z-index:40;background:var(--card);border:1px solid var(--or-line);padding:.3rem 0;margin-top:0}
.ol-bar.open .pan{display:block;animation:ol-in .16s ease}
.ol-bar .li{display:flex;align-items:center;gap:.5rem;width:100%;padding:.42rem .9rem;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--fd);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);transition:all .12s}
.ol-bar .li .lab{flex:1}.ol-bar .li .ct{font-family:var(--fn);font-size:.56rem;color:var(--ink3)}
.ol-bar .li:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--or-deep)}
.ol-bar .li.on{color:var(--or-deep);font-weight:700;background:color-mix(in srgb,var(--ink) 8%,transparent)}.ol-bar .li.on::before{content:'›';color:var(--or)}
.ol-bar .li.new{justify-content:center;color:var(--ink3);border-top:1px solid var(--line);margin-top:.25rem;padding-top:.5rem;letter-spacing:.14em}

/* ── catégories côte à côte dans le déroulé .sb-drop (mes-aliments / mes-plats) ──
   taille = chapitres du lecteur (.9rem), sans majuscule, actif = filet doré + or-deep. */
.sb-drop .catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--line);margin-top:.1rem}
.sb-drop .cat{position:relative;display:block;width:100%;padding:.5rem .8rem;border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left;font-family:var(--fb);font-size:.9rem;letter-spacing:.01em;color:var(--ink2);transition:background .14s,color .14s}
.sb-drop .cat:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink)}
.sb-drop .cat.on{color:var(--or-deep);font-weight:600;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sb-drop .cat.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--or)}
/* zéro espace : un bandeau suivi d'un déroulé s'y colle (mes-aliments / mes-plats / etc.) */
.tab-sub:has(+ .sb-drop),.al-sub:has(+ .sb-drop){margin-bottom:0}

/* ═══════════ FLUX « SAUVEGARDER LA SÉLECTION » (mes-aliments/plats/exercices → Organisation › Sauvegardes) ═══════════ */
/* case logée dans le cluster d'actions, révélée au survol / en mode sélection, persistante si cochée */
.sf-chk{flex:none;width:18px;display:grid;place-items:center;opacity:0;transition:opacity .18s;position:relative;cursor:pointer}
.al-ali:hover .sf-chk,.mx-row:hover .sf-chk,
body.sf-on .al-ali .sf-chk,body.sf-on .mx-row .sf-chk,
.al-ali:has(.sf-chk input:checked) .sf-chk,.mx-row:has(.sf-chk input:checked) .sf-chk{opacity:1}
.sf-chk input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.sf-chk .box{width:18px;height:18px;border:1.5px solid var(--or-line);border-radius:var(--r-xs);display:grid;place-items:center;color:transparent;background:var(--paper2);transition:all .14s}
.sf-chk .box svg{width:12px;height:12px}
.sf-chk input:checked + .box{border-color:var(--or);background:var(--or-soft);color:var(--or-deep)}
.al-ali:has(.sf-chk input:checked),.mx-row:has(.sf-chk input:checked){background:color-mix(in srgb,var(--or) 9%,transparent)}
/* l'icône Sauvegarder du fab : badge compteur quand une sélection est active */
.tool-fab .v3-btn.ic.sf-savebtn{position:relative}
.sf-badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--fn);font-size:.56rem;font-weight:700;border-radius:50px;line-height:1}
.sf-badge[hidden]{display:none}
/* récap du fab en mode sélection (cliquable = tout décocher) */
.tool-fab .sf-selmini{cursor:pointer;border-color:var(--or);color:var(--or-deep)}
.tool-fab .sf-selmini:hover{background:var(--or-soft)}
/* chips de portée (carrés gravés, comme le picker) */
.sf-scope{display:flex;flex-wrap:wrap;gap:.45rem}
.sf-scope .ch{font-family:var(--fd);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:var(--paper2);background-image:var(--btn-grain);border:1px solid var(--or-line);border-radius:var(--r);padding:.5rem .85rem;cursor:pointer;transition:all .14s;display:inline-flex;align-items:center;gap:.35rem}
.sf-scope .ch svg{width:13px;height:13px}
.sf-scope .ch:hover{color:var(--ink);border-color:var(--or)}
.sf-scope .ch.on{color:var(--or-deep);border-color:var(--or);background:var(--or-soft);background-image:var(--btn-grain);font-weight:700}
/* texte d'aide contextuel sous la portée (s'éclaire sur Communauté) */
.sf-hint{font-family:var(--fn);font-size:.66rem;line-height:1.55;color:var(--ink3);margin-top:.7rem;border-left:2px solid var(--or-line);padding:.15rem 0 .15rem .7rem;min-height:2.4em;transition:color .15s,border-color .15s}
.sf-hint b{color:var(--or-deep);font-weight:400}
.sf-hint.commu{color:var(--ink2);border-left-color:var(--or)}
/* avis anti-doublons */
.sf-dedup{display:none;margin-top:.9rem;border:1px solid var(--or-line);border-left:3px solid var(--or);border-radius:var(--r);background:color-mix(in srgb,var(--or) 8%,transparent);padding:.6rem .75rem}
.sf-dedup.show{display:block}
.sf-dedup .dt{font-family:var(--fd);font-size:.6rem;letter-spacing:.04em;color:var(--or-deep)}
.sf-dedup .dl{font-family:var(--fn);font-size:.6rem;color:var(--ink2);margin-top:.35rem;line-height:1.5}
.sf-dedup .dl s{color:var(--ink3)}
/* toast de confirmation (clic → page Sauvegardes) */
.sf-toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(180%);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--fd);font-size:.7rem;letter-spacing:.04em;padding:.7rem 1.1rem;border-radius:var(--r-lg);z-index:1300;transition:transform .26s cubic-bezier(.2,.85,.25,1),opacity .22s ease;box-shadow:var(--shadow-lg);cursor:pointer}
.sf-toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}

/* ═══════════ PICKER (aliment / exercice) ~ liste + ligne de résultat PARTAGÉES (DRY, fini le copier-coller par page) ═══════════ */
/* grille 2 colonnes (2 items côte à côte), 1 colonne en dessous de 1024px pour ne jamais tasser les noms */
.pk-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem}
@media(max-width:1024px){.pk-list{grid-template-columns:minmax(0,1fr)}}
.pk-row{display:flex;align-items:center;gap:.7rem;width:100%;min-width:0;box-sizing:border-box;padding:.55rem .1rem;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.pk-row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.pk-row.added{background:var(--or-soft)}
.pk-row .th{flex:none;width:38px;height:38px;border:1px solid var(--or-line);border-radius:var(--r-xs);background:var(--paper2);display:grid;place-items:center;color:var(--ink3);overflow:hidden}
.pk-row .th svg{width:18px;height:18px}
.pk-row .th img{width:100%;height:100%;object-fit:cover;display:block}   /* vignette photo (aliment/plat) ~ sinon le SVG placeholder */
/* nom : grandit, mais TRONQUE (…) au lieu de passer à la ligne ~ c'est ce qui manquait à alimentation */
.pk-row .nm{flex:1;min-width:0;font-family:var(--fb);font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-row .perso{font-family:var(--fn);font-size:.5rem;text-transform:uppercase;letter-spacing:.12em;color:var(--or-deep);border:1px solid var(--or-line);border-radius:var(--r-xs);padding:.04rem .3rem;margin-left:.35rem}
.pk-row .nm .v3-chip{margin-left:.35rem}
/* méta à droite : kcal (aliment) OU groupe musculaire (exercice) */
.pk-row .km,.pk-row .grp{flex:none;white-space:nowrap;font-family:var(--fn);font-variant-numeric:tabular-nums}
.pk-row .km{font-size:.66rem;color:var(--or-deep)}
.pk-row .grp{font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pk-row .add{flex:none;width:20px;height:20px;display:grid;place-items:center;border:1.5px solid var(--or-line);border-radius:var(--r-xs);background:var(--paper2);color:var(--ink3);transition:all .14s}
.pk-row .add svg{width:12px;height:12px}
.pk-row.added .add{border-color:var(--or);background:var(--or-soft);color:var(--or-deep)}

/* ═══════════ PICKER ~ COQUILLE PARTAGÉE .olpk (voile + panneau ancré en haut) ═══════════ */
/* Coquille canonique du picker « pleine largeur, ancré en haut » : voile .pkov, panneau .pk,
   barre .pk-top, corps .pk-in, liste scrollable .pk-reszone, pied épinglé .pkft.
   MUTUALISATION 2026-07-26 : elle vivait en 3 copies scopées qui divergeaient (#picker à
   l'Arène ~ base/programmation.css, #stPk au Stade ~ base/activite-gps.css, #gyPlanPk au
   Gymnase ~ gymnase.html) et chaque correctif se posait en triple (centrage, flex:none, sceau).
   RÉFÉRENCE = la copie de programmation (base/programmation.css l.171-238), correctifs communs
   inclus : panneau position:fixed top:1.4rem largeur min(98vw,1900px), barre .pk-top padding
   .7rem 1.6rem .65rem + flex:none, flex:none sur .tab-sub/.sb-drop enfants directs de .pk-in
   (la barre ne rétrécit plus), filet doré éteint quand la barre est repliée (subhide).
   Chaque règle fusionne la paire « générique + surcharge scopée » des copies d'origine :
   valeurs finales identiques, la cascade interne en moins. Le bloc vit APRÈS .v3-tabs.tabbar
   (l.797) et les .tab-sub (l.830-1109) : à spécificité égale c'est l'ordre qui tranche, comme
   l'ID le faisait avant ~ ne pas le remonter.
   USAGE : ajouter la classe .olpk au conteneur .pkov existant (markup inchangé par ailleurs)
   et supprimer la copie locale. Consommateurs : #stPk (activite-gps) + #gyPlanPk (gymnase).
   #picker (programmation) garde SA copie locale scopée, strictement équivalente ~ tout
   correctif posé ici doit y être répliqué tant qu'elle n'a pas basculé sur .olpk.
   Restent PAGE-LOCAUX (hors coquille) : .pk-empty (l'état vide diverge par page),
   #gyPlanPk .mat-grp, et les listes .pk-list/.pk-row déjà partagées juste au-dessus. */
.olpk{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:0;background:color-mix(in srgb,var(--paper) 50%,transparent);backdrop-filter:blur(1px)}
.olpk[hidden]{display:none}
.olpk .pk{position:fixed;top:1.4rem;left:50%;right:auto;transform:translate(-50%,0);width:min(98vw,1900px);max-width:1900px;max-height:calc(100dvh - 2.8rem);display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--or-line);box-shadow:var(--shadow-lg)}
.olpk .pk-top{display:flex;align-items:center;gap:.2rem;padding:.7rem 1.6rem .65rem;flex:none}   /* = spacing aéré du popup alimentation (là-bas .v3-tabs.tabbar l'emporte par spécificité) */
.olpk .pk-top .tab-fichenom{align-self:center;margin-bottom:.35rem}
.olpk .pk-top .tab-fichenom .nm{font-size:.95rem;cursor:default}
.olpk .pk-top .x{align-self:center;margin-left:auto;margin-bottom:.4rem;border:none;background:none;color:var(--ink3);cursor:pointer;display:grid;place-items:center;padding:3px;transition:color .14s}
.olpk .pk-top .x:hover{color:var(--or-deep)}.olpk .pk-top .x svg{width:15px;height:15px}
/* footer épinglé : .pk-in ne scrolle pas ~ c'est .pk-reszone (la liste) qui scrolle, le .pkft reste visible */
.olpk .pk-in{padding:1.6rem 1.6rem 1.2rem;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column}
.olpk .pk-in .tab-sub{margin:-1.6rem -1.6rem 0;border-bottom:1px solid var(--or-line)}
.olpk .pk-in>.tab-sub,.olpk .pk-in>.sb-drop{flex:none}   /* COPIE aliment (.uni-in>.tab-sub{flex:none}) : la barre ne rétrécit plus → la smart-find ne déborde plus sous le filet du bas (fini les « ticks ») */
.olpk .pk-in.subhide .tab-sub{border-bottom:none}   /* barre repliée : pas de filet doré résiduel */
.olpk .pk-in .sb-drop{margin:0 -1.6rem;position:relative;z-index:4}
.olpk .pk-in .sb-dropbody{padding:.9rem 1.6rem 1.1rem}
.olpk .pk-in .sb-drop.open{box-shadow:0 14px 24px -9px rgba(0,0,0,.45),var(--shadow)}
.olpk .pk-reszone{margin:0 -1.6rem;padding:.5rem 1.6rem 0;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
/* pied : fusion du .pkft générique (filet haut, boutons alignés) + surcharge du panneau ancré (boutons aux 2 bouts) */
.olpk .pkft{padding:.9rem 0 .2rem;margin-top:.4rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex:none}
.olpk .pkft .pk-del{color:var(--ink3);border-color:transparent;background:none}
.olpk .pkft .pk-del:hover{color:#a8322b;border-color:rgba(168,50,43,.35);background:rgba(168,50,43,.06)}

/* ═══════════ TOOLTIP « Bande ◎ » (OltloTip) ~ infobulle maison qui remplace les title= natifs ═══════════ */
/* en-tête = l'intercalaire .v3-band du site (◎ doré + titre + filet qui file), description dessous.
   Un SEUL élément, ancré sur <body>, repositionné par oltlo.js. Flèche dynamique via --ax. */
/* largeur AUTO (s'adapte au contenu) jusqu'à 360px ~ le texte n'est JAMAIS tronqué, il s'enroule.
   position:FIXED (2026-10-25) : en absolute, la bulle d'un floateur collé au bord droit débordait de
   quelques px sous la barre de défilement → une barre HORIZONTALE surgissait au survol. Fixe = elle ne
   peut plus agrandir la page (et oltlo.js la cale sur la zone VISIBLE, barre exclue). */
.ol-tip{position:fixed;top:0;left:0;z-index:9999;width:max-content;min-width:200px;max-width:min(360px,calc(100vw - 16px));
  padding:13px 16px 14px;background:var(--card);border:1px solid var(--or-line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;transform:translateY(6px)}
.ol-tip.show{opacity:1;visibility:visible;transform:translateY(0)}
.ol-tip.below{transform:translateY(-6px)}
.ol-tip.below.show{transform:translateY(0)}
.ol-tip-band{display:flex;align-items:center;gap:8px}
.ol-tip-band .n{flex:none;color:var(--or);font-family:var(--fd);font-size:.82rem;line-height:1;
  text-shadow:0 0 10px color-mix(in srgb,var(--or) 45%,transparent)}
.ol-tip-band h3{flex:0 1 auto;min-width:0;margin:0;font-family:var(--fd);font-size:.86rem;font-weight:600;
  letter-spacing:.04em;line-height:1.25;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.ol-tip-band .ln{flex:1;min-width:22px;height:1px;align-self:center;
  background:linear-gradient(90deg,color-mix(in srgb,var(--or) 60%,transparent),var(--line2) 70%,transparent)}
.ol-tip .ol-tip-d{margin:7px 0 0;font-family:var(--fb);font-size:.8rem;line-height:1.5;color:var(--ink2)}
.ol-tip .ol-tip-d:empty{display:none}
/* sous-texte ~ détail/option relégué, encore plus petit (mono codex, discret) */
.ol-tip .ol-tip-sub{margin:.5rem 0 0;font-family:var(--fn);font-size:.63rem;letter-spacing:.03em;line-height:1.45;color:var(--ink3)}
.ol-tip .ol-tip-sub:empty{display:none}
.ol-tip-arr{position:absolute;left:var(--ax,50%);width:11px;height:11px;margin-left:-5.5px;
  background:var(--card);transform:rotate(45deg)}
.ol-tip:not(.below) .ol-tip-arr{top:100%;margin-top:-6px;border-right:1px solid var(--or-line);border-bottom:1px solid var(--or-line)}
.ol-tip.below .ol-tip-arr{bottom:100%;margin-bottom:-6px;border-left:1px solid var(--or-line);border-top:1px solid var(--or-line)}

/* Cabinet des Réglages ~ titre + toggle « Aides au survol » greffés dans le popover du logo (.v3-navfoot .v5-skinsel) */
.v3-navfoot .v5-skinsel .rgl-h{font-family:var(--fn);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or-deep);padding:.05rem .35rem .3rem;opacity:.9}
.v3-navfoot .v5-skinsel .rgl-sep{height:1px;background:var(--or-line);margin:.35rem .15rem .2rem}
.v3-navfoot .v5-skinsel .rgl-tip{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;
  border:1px solid transparent;background:none;border-radius:var(--r-xs);padding:.4rem .55rem;
  font-family:var(--fb);font-size:.78rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink2);cursor:pointer;text-align:left}
.v3-navfoot .v5-skinsel .rgl-tip::before{display:none}   /* neutralise la pastille héritée des boutons de skin */
.v3-navfoot .v5-skinsel .rgl-tip:hover,
.v3-navfoot .v5-skinsel .rgl-tip.on:hover{background:var(--or-soft);color:var(--or-deep)}
.v3-navfoot .v5-skinsel .rgl-tip.on{background:none;border-color:transparent}   /* .on = tooltips activés, PAS un skin choisi */
.v3-navfoot .v5-skinsel .rgl-tip .dia{font-size:.7rem;line-height:1;color:var(--or)}
.v3-navfoot .v5-skinsel .rgl-tip .lbl{flex:1;white-space:nowrap}
/* lien Administration greffé dans le popover du logo (même gabarit que .rgl-tip, mais c'est un <a>) */
.v3-navfoot .v5-skinsel .rgl-link{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;
  border:1px solid transparent;background:none;border-radius:var(--r-xs);padding:.4rem .55rem;
  font-family:var(--fb);font-size:.78rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink2);cursor:pointer;text-align:left;text-decoration:none}
.v3-navfoot .v5-skinsel .rgl-link::before{display:none}
.v3-navfoot .v5-skinsel .rgl-link:hover{background:var(--or-soft);color:var(--or-deep)}
.v3-navfoot .v5-skinsel .rgl-link .dia{font-size:.7rem;line-height:1;color:var(--or)}
.v3-navfoot .v5-skinsel .rgl-link .lbl{flex:1;white-space:nowrap}
.v3-navfoot .v5-skinsel .rgl-link[hidden]{display:none}
/* SPA (coquille persistante) : fine barre de progression pendant le fetch d'une page */
html.spa-loading::after{content:'';position:fixed;top:0;left:0;height:2px;width:100%;z-index:99999;
  background:linear-gradient(90deg,transparent,var(--or),var(--or-deep));transform-origin:left;animation:spaBar .9s ease-in-out infinite}
@keyframes spaBar{0%{transform:scaleX(.05);opacity:1}50%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:.35}}
@media (prefers-reduced-motion: reduce){ html.spa-loading::after{animation:none;transform:scaleX(1);opacity:.5} }
.rgl-sw{flex:none;width:30px;height:17px;border-radius:50px;background:var(--line2);position:relative;transition:background .18s}
.rgl-sw::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .18s}
.rgl-tip.on .rgl-sw{background:var(--or)}
.rgl-tip.on .rgl-sw::after{transform:translateX(13px)}

/* ═══════════ « Ol » : SOBRE au repos ~ au CLIC le « Ol » se transforme en PIÈCE frappée sur place (même écriture) ═══════════ */
.cm-vote .up .ol, .cm-react button .ol{color:var(--ink2);font-style:italic;font-weight:600;transition:color .18s ease}
.cm-vote .up:hover .ol, .cm-react button:hover .ol{color:var(--or-deep)}
/* état « donné » : le « Ol » devient une pièce d'or PEINTE À LA MAIN (grain sablé + stries de pinceau, mat, simple rond) */
.cm-vote .up .ol.coined, .cm-react button .ol.coined{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;box-sizing:border-box;
  border-radius:50%;font-style:italic;font-weight:600;font-size:.62rem;color:#5d3f10;   /* même écriture italique, juste plus petite */
  background:var(--btn-grain),
    repeating-linear-gradient(122deg, rgba(255,244,210,.16) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(54deg, rgba(110,75,20,.10) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 40% 34%, rgba(255,248,225,.28), transparent 56%),
    linear-gradient(145deg, #e3c266 0%, #c39a40 44%, #9a6f2a 82%, #7d561f 100%);
  border:1.5px solid rgba(110,75,20,.75);
  box-shadow:inset 0 0 4px rgba(255,246,216,.22), inset 0 -2px 5px rgba(70,45,10,.42), 0 2px 5px rgba(0,0,0,.28);
  text-shadow:0 1px 0 rgba(255,247,215,.45), 0 -1px 1px rgba(70,45,10,.4);
  animation:olCoinPop .34s cubic-bezier(.2,.8,.3,1.25)}
@keyframes olCoinPop{0%{transform:scale(.35) rotate(-14deg)}60%{transform:scale(1.18) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
/* la pièce-flourish qui s'envole au don (spawn par oltlo.js) ~ même métal frappé */
.ol-coinfly{position:fixed;z-index:9999;pointer-events:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--fb);font-style:italic;font-weight:600;font-size:.82rem;color:#5d3f10;
  background:var(--btn-grain),
    repeating-linear-gradient(122deg, rgba(255,244,210,.16) 0 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(54deg, rgba(110,75,20,.10) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 40% 34%, rgba(255,248,225,.28), transparent 56%),
    linear-gradient(145deg, #e3c266 0%, #c39a40 44%, #9a6f2a 82%, #7d561f 100%);
  border:1.5px solid rgba(110,75,20,.75);
  box-shadow:inset 0 0 5px rgba(255,246,216,.22), inset 0 -2px 5px rgba(70,45,10,.42), 0 3px 9px rgba(0,0,0,.4);
  text-shadow:0 1px 0 rgba(255,247,215,.45), 0 -1px 1px rgba(70,45,10,.4)}
.ol-coinfly.go{animation:olCoinFly .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes olCoinFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:1;transform:translate(-50%,-70%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-185%) scale(.85) rotate(18deg)}}

/* ════════════ Cartouche macros « Grande jauge » ~ composant réutilisable ════════════
   Demi-jauge en conic-gradient pleine largeur : l'arc ENCODE la répartition énergétique des macros.
   Réglée par 2 variables (degrés sur 0..180) : --a1 = fin Protéines, --a2 = fin Glucides.
   Ex. aliment 14/65/17 % → --a1:25.2deg; --a2:142.2deg ◎ plat 31/35/34 % → --a1:56.7deg; --a2:119.5deg.
   Toujours sombre (porphyre) quel que soit le skin. La POSITION est posée par la classe hôte (.mp-card / .pp-card). */
.ol-macro{--gp:#8a5a1f;--gg:var(--or);--gl:rgba(205,162,74,.4);--gtrack:rgba(20,0,6,.35);--a1:60deg;--a2:120deg;
  background:linear-gradient(180deg,rgba(49,13,22,.95),rgba(34,8,16,.95));border:1px solid var(--or-line);
  border-radius:var(--r);padding:1rem 1.1rem .9rem;backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 0 rgba(205,162,74,.16),0 8px 26px rgba(20,0,6,.55)}
.ol-macro .por{text-align:center;font-family:var(--fn);font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-bottom:.5rem}
.ol-macro .gauge{position:relative;width:100%;max-width:258px;height:98px;margin:0 auto .45rem;overflow:hidden}
.ol-macro .gauge .disc{position:absolute;top:0;left:50%;transform:translateX(-50%);width:230px;height:230px;border-radius:50%;
  background:conic-gradient(from 270deg,var(--gp) 0 var(--a1),var(--gg) var(--a1) var(--a2),var(--gl) var(--a2) 180deg,var(--gtrack) 180deg 360deg)}
.ol-macro .gauge .disc::after{content:'';position:absolute;inset:30px;border-radius:50%;background:#2a0c14;box-shadow:inset 0 0 26px rgba(20,0,6,.6)}
.ol-macro .gauge .c{position:absolute;left:0;right:0;top:54px;text-align:center;z-index:1}
.ol-macro .gauge .c b{font-family:'Educateursportif','Oltlo Titre','Cinzel',serif;font-weight:400;font-size:2.2rem;color:#F7ECDA;line-height:1;font-variant-numeric:tabular-nums}
.ol-macro .gauge .c .u{font-family:var(--fn);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-deep);margin-left:.18rem}
.ol-macro .mac{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;text-align:center}
.ol-macro .mac .v{font-family:var(--fb);font-weight:600;font-size:1rem;color:#F7ECDA;font-variant-numeric:tabular-nums}
.ol-macro .mac .v small{font-family:var(--fn);font-size:.46rem;color:var(--ink3);margin-left:1px}
.ol-macro .mac .l{font-family:var(--fn);font-size:.44rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-top:.18rem}

/* ═ KIT CALCULATEUR & COMPOSANTS PROMUS (2026-07-18) ═
   Règles promues VERBATIM depuis les pages porteuses (version dominante) ; les pages qui divergent
   gardent leur copie inline, qui vient APRÈS ce fichier dans la cascade et surcharge (rendu inchangé).
   ~ Kit calculateur .cl-* : 17 pages (acwr, wilks, calculateur-1rm, activite-gps, age-sportif, allures,
     charges-reelles, comparateur-membres, css-natation, ftp-velo, hydratation, ma-journee,
     predicteur-chrono, programmation, sommeil-cycles, suivi-entrainement, zones-fc).
     .cl-note PAS promue : programmation.html l'utilise dans son markup sans la définir inline.
     clubs.html a un .cl-grid HOMONYME (grille de cartes) : garde-fous posés dans sa page.
   ~ .tool-fab .fab-pill : base = version dominante (clubs/communaute/gymnase, 3/7), :hover identique 7/7.
   ~ .al-fav / .al-abtn : boutons de ligne aliment injectés par base/aliments-live.js (identiques ×3 :
     arsenal, mes-aliments, mes-plats). */
.cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.cl-form{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
.cl-form .v3-field.wide{grid-column:1 / -1}
.cl-result{position:relative;overflow:hidden;border:1px solid var(--or-line);background:var(--or-soft);border-radius:var(--r-lg);padding:1.8rem 1.2rem;text-align:center}
.cl-result .lbl{font-family:var(--fd);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.cl-result .big{font-family:var(--fb);font-size:3.6rem;line-height:1;color:var(--or-deep);margin-top:.45rem;font-variant-numeric:tabular-nums}
.cl-result .big .u{font-family:var(--fd);font-size:1.1rem;color:var(--or);letter-spacing:.04em;margin-left:.15rem}
.cl-result .form{font-family:var(--fn);font-size:.6rem;color:var(--ink3);margin-top:.7rem;letter-spacing:.04em}
.cl-btnrow{display:flex;justify-content:flex-end;margin-top:.3rem}
@media(max-width:760px){.cl-grid{grid-template-columns:1fr}}
.tool-fab .fab-pill{height:36px;padding:0 .95rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--or-line);box-shadow:var(--shadow);color:var(--or-deep);cursor:pointer;font-family:var(--fd);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;transition:border-color .18s,box-shadow .2s,transform .12s}
.tool-fab .fab-pill:hover{border-color:var(--or);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.al-abtn{width:30px;height:30px;border:1px solid var(--line2);border-radius:var(--r);background:var(--card);color:var(--ink2);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.al-abtn:hover{color:var(--or-deep);border-color:var(--or);background:var(--or-soft)}
.al-abtn.del:hover{color:var(--danger);border-color:var(--danger);background:rgba(178,59,46,.08)}
.al-abtn svg{width:14px;height:14px}
.al-fav{flex:none;width:30px;height:30px;border:none;background:none;color:var(--ink3);display:grid;place-items:center;cursor:pointer;border-radius:var(--r);transition:color .15s,background .15s}
.al-fav:hover{color:var(--or-deep);background:var(--or-soft)}
.al-fav.on{color:var(--or)}
.al-fav svg{width:16px;height:16px}


/* ════════════════════════════════════════════════════════════════════════
/* ════════════════════════════════════════════════════════════════════════
   SKINS PRO (2026-08-04) ~ Fresque · Bronze ~ les 2 univers RETENUS par Anthony
   (Cristal et Marbre rejetés le 2026-08-04 ~ sources dans le scratchpad de session).
   Fresque = fluent clair (mica+acrylique) · Bronze = atelier de luxe (verre fumé).
   100 % scopés html[data-skin=…] ~ zéro impact skins Académie. Raccords inclus.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   SKIN « FRESQUE » v2 ~ FLUENT CLAIR (flat enrichi acrylique/mica)
   Positionnement : l'outil-métier limpide et confiant, version futuriste
   sobre ~ langage Fluent 2 / verre clair macOS : fond mica aux aurales
   bleutées, nav/barres/rail/drawers en acrylique givré (blur 22px),
   cartes blanches flottantes, accent bleu #2563EB à micro-dégradé.
   Base conservée de la v1 : encre slate, contrastes WCAG, casse normale,
   Manrope + JetBrains Mono. Fallback opaque si backdrop-filter absent.
   ════════════════════════════════════════════════════════════════════════ */

/* ╔═ BLOC A · TOKENS ═╗ */
html[data-skin="fresque"]{
  /* ~ surfaces : clair lumineux ; le mica vit sur body, --paper reste la base ~ */
  --paper:#F4F6FA; --paper2:#FFFFFF; --paper3:#EAEEF3; --card:#FFFFFF;
  /* ~ encre slate : 16.4:1 / 7.1:1 / 3.6:1 sur --paper ~ */
  --ink:#101828; --ink2:#475467; --ink3:#75839A;
  /* ~ accent bleu confiant : il structure, il ne décore pas ~ */
  --or:#2563EB; --or-deep:#1D4ED8; --or-bright:#60A5FA;
  --or-soft:rgba(37,99,235,.08); --or-line:rgba(37,99,235,.32);
  /* ~ filets neutres : les hairlines dessinent, les ombres flottent ~ */
  --line:rgba(16,24,40,.08); --line2:rgba(16,24,40,.16);
  --danger:#D92D20; --ok:#027A48;
  /* ~ ombres Fluent en couches : proches + ambiantes, toujours douces ~ */
  --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 2px 6px rgba(16,24,40,.04);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.07);
  --shadow-lg:0 2px 8px rgba(16,24,40,.06),0 24px 56px rgba(16,24,40,.13);
  --grain-op:0; --grain-blend:multiply;
  --r-xs:10px; --r:14px; --r-lg:20px;
  /* ~ voix sans-serif intégrale, data en mono pur ~ */
  --fb:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --fd:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --fn:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* ~ « métal » = accent à lumière-haut : dégradé bref + liseré clair ~ */
  --metal:linear-gradient(180deg,#3B82F6,#2563EB 55%);
  --metal-bevel:inset 0 1px 0 rgba(255,255,255,.28); --on-metal:#fff;
  --btn-grain:none; --btn-grain-on:none; --btn-grain-solid:none;
}
/* fond mica : base #F4F6FA + aurales bleutées à peine perceptibles, fixes */
html[data-skin="fresque"] body{font-size:16px;background:
  radial-gradient(1100px 700px at 10% -10%,rgba(37,99,235,.05),transparent 60%),
  radial-gradient(900px 600px at 92% -6%,rgba(34,211,238,.04),transparent 60%),
  radial-gradient(1000px 800px at 96% 100%,rgba(124,58,237,.03),transparent 55%),
  #F4F6FA;background-attachment:fixed}

/* ╔═ BLOC B · VOIX SOBRE ═╗ */
/* ~ bouton solide : aplat accent + micro-dégradé lumière-haut + liseré ~ */
html[data-skin="fresque"] .v3-btn.solid{background:linear-gradient(180deg,#3B82F6,#2563EB 55%);color:#fff;border-color:#2563EB;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
html[data-skin="fresque"] .v3-btn.solid:hover{background:linear-gradient(180deg,#2F74F0,#1D4ED8 60%);border-color:#1D4ED8;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 3px rgba(37,99,235,.15);transform:none}
html[data-skin="fresque"] .v3-btn.solid:active{background:#1D4ED8;border-color:#1D4ED8;box-shadow:none}
/* ~ casse normale partout (fini les petites capitales éditoriales) ~ */
html[data-skin="fresque"] .v3-btn,
html[data-skin="fresque"] .v3-chip,
html[data-skin="fresque"] .v3-tab,
html[data-skin="fresque"] .v3-bar .ct{text-transform:none;letter-spacing:0}
html[data-skin="fresque"] .v3-navi{text-transform:none;letter-spacing:0;font-size:.84rem;font-weight:600}
/* ~ titres : hiérarchie par la graisse, pas par la police d'apparat ~ */
html[data-skin="fresque"] .ep-hero h1,
html[data-skin="fresque"] .ep-article h2,
html[data-skin="fresque"] .v3-band h2,
html[data-skin="fresque"] .v3-band h3,
html[data-skin="fresque"] .v3-brand .bn,
html[data-skin="fresque"] .v3-bar .ct{font-family:var(--fd);font-weight:700;text-transform:none}
/* ~ habillage « Académie » masqué (les 2 lignes de nav restent, elles) ~ */
html[data-skin="fresque"] .v5-frieze,
html[data-skin="fresque"] .v3-kicker,
html[data-skin="fresque"] .v3-eyebrow,
html[data-skin="fresque"] .v3-brand .bs,
html[data-skin="fresque"] .dia,
html[data-skin="fresque"] .v3-band .n,
html[data-skin="fresque"] .v3-tab .ro{display:none}

/* ╔═ BLOC C · SIGNATURE FLUENT CLAIR ═╗ */
/* ── acrylique blanc givré : nav, barre, rail, popovers (surfaces majeures) ── */
html[data-skin="fresque"] .v3-nav{background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset -1px 0 0 var(--line),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-skin="fresque"] .v3-bar{background:rgba(255,255,255,.68);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
html[data-skin="fresque"] .v3-rail{background:rgba(255,255,255,.62);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-left:1px solid var(--line)}
html[data-skin="fresque"] .v3-pop{background:rgba(255,255,255,.8);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-color:var(--line2);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.7)}
html[data-skin="fresque"] .v3-navfoot .v5-skinsel{background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-color:var(--line2)}
/* fallback sans backdrop-filter : les mêmes surfaces en opaque quasi blanc */
@supports not (backdrop-filter:blur(1px)){
  html[data-skin="fresque"] .v3-nav{background:#FDFDFE}
  html[data-skin="fresque"] .v3-bar{background:#FDFDFE}
  html[data-skin="fresque"] .v3-rail{background:#FDFDFE}
  html[data-skin="fresque"] .v3-pop{background:#FDFDFE}
  html[data-skin="fresque"] .v3-navfoot .v5-skinsel{background:#FDFDFE}
  html[data-skin="fresque"] .cx-drawer{background:#FDFDFE}
}

/* ── focus : anneau lumineux, le même partout ── */
html[data-skin="fresque"] .v3-btn:focus-visible,
html[data-skin="fresque"] .v3-tab:focus-visible,
html[data-skin="fresque"] .v3-navi:focus-visible,
html[data-skin="fresque"] .v3-pti:focus-visible,
html[data-skin="fresque"] .ep-pbtn:focus-visible{outline:2px solid var(--or);outline-offset:2px;box-shadow:0 0 0 5px rgba(37,99,235,.15)}

/* ── boutons : hover teinté, active aplat, pas de lévitation ── */
html[data-skin="fresque"] .v3-btn{font-size:.78rem;font-weight:600}
html[data-skin="fresque"] .v3-btn.sm{font-size:.68rem}
html[data-skin="fresque"] .v3-btn:hover{background:var(--paper3);border-color:var(--line2);color:var(--ink);box-shadow:none;transform:none}
html[data-skin="fresque"] .v3-btn:active{background:color-mix(in srgb,var(--ink) 8%,var(--paper3));transform:none}
/* ~ le « métal » suit le langage accent : on écrase le brun #856120 en dur ~ */
html[data-skin="fresque"] .v3-btn.metal{background:none;color:var(--or-deep);border-color:var(--or-line)}
html[data-skin="fresque"] .v3-btn.metal:hover,
html[data-skin="fresque"] .v3-btn.metal:active,
html[data-skin="fresque"] .v3-btn.metal.on{background:var(--metal);color:var(--on-metal);border-color:var(--or-deep);box-shadow:var(--metal-bevel);text-shadow:none}

/* ── nav : 2 lignes gardées ; actif = pilule acrylique + rail accent 3px ── */
html[data-skin="fresque"] .v3-navi{margin:.1rem .5rem;padding:.5rem .7rem;border-radius:var(--r-xs);position:relative}
html[data-skin="fresque"] .v3-navi:hover{background:var(--paper3);color:var(--ink)}
html[data-skin="fresque"] .v3-navi.on{background:rgba(255,255,255,.92);color:var(--or-deep);box-shadow:0 1px 2px rgba(16,24,40,.07),0 2px 8px rgba(16,24,40,.05)}
html[data-skin="fresque"] .v3-navi.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:58%;border-radius:99px;background:var(--or)}
html[data-skin="fresque"] .v3-shell.navcol .v3-navi.on::before{display:none}
/* sous-titre <small> : petit, muted, casse normale ~ jamais masqué */
html[data-skin="fresque"] .v3-navi .lbl small{display:block;font-size:.62rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink3);font-family:var(--fd)}
html[data-skin="fresque"] .v3-shell.navcol .v3-nav .v3-navi .lbl small{display:none}
html[data-skin="fresque"] .v3-navgrp{font-family:var(--fd);font-weight:600;font-size:.6rem;letter-spacing:.05em;color:var(--ink3)}
html[data-skin="fresque"] .v3-navi .bdg{font-family:var(--fd);font-weight:600;border-color:transparent;background:var(--or-soft);color:var(--or-deep)}
/* avatars de nav : cercle plat, sans anneaux gravés */
html[data-skin="fresque"] .v3-user .av,
html[data-skin="fresque"] .v3-nhav{box-shadow:none;border:1px solid var(--line2);background:var(--paper3);color:var(--ink2);font-family:var(--fd);font-weight:600}
html[data-skin="fresque"] .v3-av{border-color:var(--line2);color:var(--ink2);font-family:var(--fd)}

/* ── barre de page + bandeaux : titres nets, graisse avant tout ── */
html[data-skin="fresque"] .v3-bar .ct{font-size:.95rem;letter-spacing:-.01em}
html[data-skin="fresque"] .v3-band h2,
html[data-skin="fresque"] .v3-band h3{font-size:1.35rem;letter-spacing:-.02em}
html[data-skin="fresque"] .v3-railh{font-weight:600;font-size:.66rem;letter-spacing:.08em;color:var(--ink3)}
html[data-skin="fresque"] .v3-card-h .t{text-transform:none;letter-spacing:-.01em;font-size:.85rem;font-weight:700}

/* ── onglets : souligné accent 3px arrondi ; segments .v3-seg en pilule ── */
html[data-skin="fresque"] .v3-tabs{border-bottom:1px solid var(--line2)}
html[data-skin="fresque"] .v3-tab{font-size:.82rem;font-weight:600;color:var(--ink3);position:relative}
html[data-skin="fresque"] .v3-tab:hover{color:var(--ink)}
html[data-skin="fresque"] .v3-tab.on{color:var(--or-deep);border-bottom-color:transparent}
html[data-skin="fresque"] .v3-tab.on::after{content:'';position:absolute;left:.75rem;right:.75rem;bottom:0;height:3px;border-radius:99px;background:var(--or)}
html[data-skin="fresque"] .v3-seg{background:var(--paper3);border-radius:99px;padding:3px;gap:2px}
html[data-skin="fresque"] .v3-seg .v3-btn{border-color:transparent;background:transparent;border-radius:99px;box-shadow:none}
html[data-skin="fresque"] .v3-seg .v3-btn:hover{background:rgba(255,255,255,.65);border-color:transparent}
html[data-skin="fresque"] .v3-seg .v3-btn.on{background:#fff;border-color:transparent;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.05)}

/* ── tables : th = label gris 11px, hairlines nettes, données en mono ── */
html[data-skin="fresque"] .v3-table th{background:none;border-bottom:1px solid var(--line2);color:var(--ink3);font-weight:600;font-size:.69rem;letter-spacing:.06em}
html[data-skin="fresque"] .v3-table td:first-child{font-size:.95rem}
html[data-skin="fresque"] .lq thead th{box-shadow:inset 0 -1px 0 var(--line2)}

/* ── chips : fond teinté, sans bordure ── */
html[data-skin="fresque"] .v3-chip{border-color:transparent;background:var(--paper3);color:var(--ink2);font-weight:600;font-size:.68rem}
html[data-skin="fresque"] .v3-chip.gold{border-color:transparent;background:var(--or-soft);color:var(--or-deep)}

/* ── formulaires : labels lisibles, selects en casse normale ── */
html[data-skin="fresque"] .v3-field label{font-family:var(--fd);font-weight:600;font-size:.66rem;letter-spacing:.05em;color:var(--ink2)}
html[data-skin="fresque"] .v3-select{text-transform:none;letter-spacing:0;font-size:.85rem;font-family:var(--fd)}
html[data-skin="fresque"] .smart-find .sf-mode,
html[data-skin="fresque"] .smart-find .sf-cell{text-transform:none;letter-spacing:.01em;font-size:.74rem;font-weight:600}
html[data-skin="fresque"] .tab-sub:has(.smart-find),
html[data-skin="fresque"] .al-sub:has(.smart-find){border-bottom-color:var(--line2)}

/* ── sceaux et cartouches : plaques plates, plus de double filet gravé ── */
html[data-skin="fresque"] .v3-seal .s{box-shadow:none;border:1px solid var(--line2);background:var(--paper3);color:var(--ink2)}
html[data-skin="fresque"] .v3-seal .s[data-open]:hover,
html[data-skin="fresque"] .v3-seal .s.act:hover{box-shadow:none;border-color:var(--or);background:var(--or-soft);color:var(--or-deep);transform:none}
html[data-skin="fresque"] .v3-seal .s[data-open]:active,
html[data-skin="fresque"] .v3-seal .s.act:active{box-shadow:none;transform:none}
html[data-skin="fresque"] .v3-seal .s[data-open]:focus-visible,
html[data-skin="fresque"] .v3-seal .s.act:focus-visible{box-shadow:0 0 0 5px rgba(37,99,235,.15);outline:2px solid var(--or);outline-offset:2px}
html[data-skin="fresque"] .v5-seal{box-shadow:var(--shadow-sm);border:1px solid var(--line2);background:var(--card)}
html[data-skin="fresque"] .v3-kpi .l{font-family:var(--fd);font-weight:600;letter-spacing:.08em}

/* ── tooltips et pickers : cadres neutres opaques, titres en graisse ── */
html[data-skin="fresque"] .v3-poph .t{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:700;color:var(--ink)}
html[data-skin="fresque"] .olpk .pk{border-color:var(--line2)}
html[data-skin="fresque"] .asect-tip,
html[data-skin="fresque"] .ol-tip{border-color:var(--line2)}
html[data-skin="fresque"] .ol-tip:not(.below) .ol-tip-arr{border-right-color:var(--line2);border-bottom-color:var(--line2)}
html[data-skin="fresque"] .ol-tip.below .ol-tip-arr{border-left-color:var(--line2);border-top-color:var(--line2)}

/* ── fiche / lecture : Manrope 400 serait mou, on assoit la graisse ── */
html[data-skin="fresque"] .ep-hero h1{font-weight:700;letter-spacing:-.03em;line-height:1.06}
html[data-skin="fresque"] .ep-hero .kick{letter-spacing:.12em;font-weight:600}
html[data-skin="fresque"] .ep-article h2{font-size:1.5rem;letter-spacing:-.02em}
html[data-skin="fresque"] .ep-article h3{text-transform:none;letter-spacing:0;font-size:1.02rem;font-weight:700;color:var(--ink)}
/* noms de fiche : la display antique en dur repasse en sans */
html[data-skin="fresque"] .tab-fichenom .nm,
html[data-skin="fresque"] .prog-slot .fiche{font-family:var(--fd);font-weight:600}
/* lecteur : le bouton play troque son dégradé doré pour l'accent */
html[data-skin="fresque"] .v3-pl-play{background:linear-gradient(180deg,#3B82F6,#2563EB 55%);color:#fff}

/* ── flotteurs d'outils : cadre neutre, accent à l'approche (ils flottent) ── */
html[data-skin="fresque"] .tool-fab .v3-btn.ic{border-color:var(--line2);color:var(--ink2)}
html[data-skin="fresque"] .tool-fab .v3-btn.ic:hover{border-color:var(--or);color:var(--or-deep)}
html[data-skin="fresque"] .tool-fab .fab-pill{border-color:var(--line2);color:var(--ink2)}
html[data-skin="fresque"] .tool-fab .fab-pill:hover{border-color:var(--or);color:var(--or-deep)}

/* ── raccord transverse : flip du suivi (code #1a140a en dur sur fond --or) ── */
html[data-skin="fresque"] .co-flipctl button.on{color:#fff}

/* ── mobile (LA CROIX) : re-coloration seule, drawers en acrylique ── */
@media(max-width:980px){
  html[data-skin="fresque"] .cx-drawer{background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
  html[data-skin="fresque"] .cx-drawer.l{border-right-color:var(--line2)}
  html[data-skin="fresque"] .cx-drawer.r{border-left-color:var(--line2)}
  html[data-skin="fresque"] .cx-h{color:var(--ink3);letter-spacing:.08em;font-weight:600}
  html[data-skin="fresque"] .v3-pti .lb{text-transform:none;letter-spacing:0;font-size:.62rem;font-weight:600}
}
/* tactile : le « métal » garde son accent, sans résidu doré */
@media (hover:none){
  html[data-skin="fresque"] .v3-btn.metal:hover{background:none;color:var(--or-deep);border-color:var(--or-line);box-shadow:none;text-shadow:none}
  html[data-skin="fresque"] .v3-btn.metal:active,
  html[data-skin="fresque"] .v3-btn.metal.on{background:var(--metal);color:var(--on-metal);border-color:var(--or-deep);box-shadow:var(--metal-bevel);text-shadow:none}
  html[data-skin="fresque"] .v3-btn:hover{background:var(--btn-grain),var(--card);color:var(--ink)}
  html[data-skin="fresque"] .v3-btn:active{background:var(--paper3);border-color:var(--line2);color:var(--ink)}
}

/* ════════════════════════════════════════════════════════════════════════════
   OLTLO ◆ SKIN « BRONZE » v2 ~ l'atelier de luxe : sombre chaud + verre fumé + bronze
   ────────────────────────────────────────────────────────────────────────────
   Positionnement : Apple Watch Hermès × dashboard automobile de luxe ~ scène
   espresso/charbon CHAUDE, surfaces vitrées fumées, métal bronze qui accroche
   la lumière. La signature tactile v1 est CONSERVÉE : boutons pressables,
   champs creusés ~ c'est elle qui différencie.
   Palette : fonds #17120C / #201810 / #2C2115 · carte #1E1710 · encre crème
   rgba(248,240,225,.94/.64/.40) · bronze #C89A55 (clair #E8CD9A, éclat #F2E0B8)
   · danger #E08464 · ok #7FBE8E.
   Règle du skin : les FONDS restent calmes ~ le relief vit sur l'INTERACTIF,
   la lumière (rim-light) sur les cartes, le verre sur les surfaces majeures.
   ════════════════════════════════════════════════════════════════════════════ */

/* ╔═ BLOC A · TOKENS ═╗ */
html[data-skin="bronze"]{
  /* ~ surfaces : espresso/charbon chaud, du bureau à la carte ~ */
  --paper:#17120C; --paper2:#201810; --paper3:#2C2115; --card:#1E1710;
  /* ~ encre crème (alpha : hiérarchie par transparence, façon obsidienne) ~ */
  --ink:rgba(248,240,225,.94); --ink2:rgba(248,240,225,.64); --ink3:rgba(248,240,225,.40);
  /* ~ accent bronze/champagne ~ convention skins sombres : --or-deep = variante CLAIRE ~ */
  --or:#C89A55; --or-deep:#E8CD9A; --or-bright:#F2E0B8;
  --or-soft:rgba(200,154,85,.14); --or-line:rgba(200,154,85,.32);
  /* ~ filets champagne fumés ~ */
  --line:rgba(232,205,154,.12); --line2:rgba(232,205,154,.20);
  --danger:#E08464; --ok:#7FBE8E;
  /* ~ ombres noires chaudes, profondes (la scène est sombre, l'ombre porte loin) ~ */
  --shadow-sm:0 1px 2px rgba(8,5,2,.5),0 2px 5px rgba(8,5,2,.3);
  --shadow:0 4px 12px rgba(8,5,2,.5),0 1px 3px rgba(8,5,2,.4);
  --shadow-lg:0 10px 24px rgba(8,5,2,.55),0 24px 60px rgba(8,5,2,.45);
  /* ~ matière : grain conservé, en lumière douce sur sombre ~ */
  --grain-op:.10; --grain-blend:soft-light;
  --r-xs:8px; --r:12px; --r-lg:18px;
  /* ~ métal = bronze poli, lumière champagne en haut ~ */
  --metal:linear-gradient(180deg,#E8CD9A 0%,#C89A55 55%,#8C6428 100%);
  --metal-bevel:inset 0 1px 0 rgba(255,244,214,.55),inset 0 -2px 3px rgba(30,18,5,.5);
  --on-metal:#241505;
  /* ~ grain sablé des boutons : stries champagne sur le fumé, sombres sur le métal ~ */
  --btn-grain:repeating-linear-gradient(125deg,rgba(232,205,154,.03) 0 1px,transparent 1px 4px),repeating-linear-gradient(58deg,rgba(232,205,154,.018) 0 1px,transparent 1px 5px);
  --btn-grain-on:repeating-linear-gradient(125deg,rgba(232,205,154,.06) 0 1px,transparent 1px 4px);
  --btn-grain-solid:repeating-linear-gradient(125deg,rgba(60,38,12,.10) 0 1px,transparent 1px 4px);
}

/* ╔═ BLOC B · VOIX ~ luxe pro : casse normale, zéro ornement antique ═╗ */
/* DA polices : Oltlo Serif GARDÉE en corps/titres ~ déjà éprouvée crème-sur-sombre
   par les 3 skins antiques sombres, et c'est le serif chaud + métal qui fait
   « Hermès » plutôt que Fluent générique. Manrope reste aux labels (--fd). */
html[data-skin="bronze"] .v3-btn,
html[data-skin="bronze"] .v3-chip,
html[data-skin="bronze"] .v3-tab{text-transform:none;letter-spacing:.01em}
html[data-skin="bronze"] .v3-bar .ct{text-transform:none;letter-spacing:.01em;font-size:.92rem;font-weight:600}
html[data-skin="bronze"] .v5-frieze,
html[data-skin="bronze"] .v3-kicker,
html[data-skin="bronze"] .v3-eyebrow,
html[data-skin="bronze"] .v3-brand .bs,
html[data-skin="bronze"] .dia,
html[data-skin="bronze"] .v3-band .n,
html[data-skin="bronze"] .v3-tab .ro{display:none}

/* ╔═ BLOC C · SIGNATURE ~ verre fumé / pressable / creusé / rim-light ═╗ */

/* ── 1 · VERRE FUMÉ CHAUD ~ surfaces MAJEURES seulement (nav, rail, barres,
       tiroirs, popovers) : fond translucide + blur, bordure bronze fumée,
       liseré de lumière crème en haut ── */
html[data-skin="bronze"] .v3-nav{
  background:rgba(32,24,16,.72);backdrop-filter:blur(18px);
  box-shadow:inset -1px 0 0 rgba(200,154,85,.18),inset 0 1px 0 rgba(255,240,215,.08)}
html[data-skin="bronze"] .v3-rail{
  background:rgba(32,24,16,.72);backdrop-filter:blur(18px);
  border-left-color:rgba(200,154,85,.18)}
html[data-skin="bronze"] .v3-bar{
  background:rgba(23,18,12,.66);backdrop-filter:blur(18px);
  border-bottom-color:rgba(200,154,85,.18);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.06)}
html[data-skin="bronze"] .cx-drawer{
  background:rgba(32,24,16,.78);backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.08),var(--shadow-lg)}
html[data-skin="bronze"] .v3-pop{
  background:rgba(30,22,14,.82);backdrop-filter:blur(18px);
  border-color:rgba(200,154,85,.24);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.08),var(--shadow-lg)}
html[data-skin="bronze"] .v3-navfoot .v5-skinsel{
  background:rgba(32,24,16,.85);backdrop-filter:blur(18px);
  border-color:rgba(200,154,85,.24);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.07),var(--shadow-lg)}
html[data-skin="bronze"] .v3-phone{
  background:rgba(23,18,12,.8);backdrop-filter:blur(18px);
  border-top-color:rgba(200,154,85,.2);
  box-shadow:0 -2px 10px rgba(8,5,2,.4),inset 0 1px 0 rgba(255,240,215,.07)}
/* fallback sans backdrop-filter : fonds opaques, même famille */
@supports not (backdrop-filter:blur(1px)){
  html[data-skin="bronze"] .v3-nav,
  html[data-skin="bronze"] .v3-rail,
  html[data-skin="bronze"] .cx-drawer,
  html[data-skin="bronze"] .v3-pop,
  html[data-skin="bronze"] .v3-navfoot .v5-skinsel{background:#201810}
  html[data-skin="bronze"] .v3-bar,
  html[data-skin="bronze"] .v3-phone{background:#1B140D}
}

/* ── 2 · BOUTONS PRESSABLES ~ signature v1 adaptée au sombre ── */
/* secondaire = verre fumé (simulé, sans blur : pas une surface majeure) + bordure bronze */
html[data-skin="bronze"] .v3-btn{
  font-size:.76rem;font-weight:600;color:var(--ink);border-color:rgba(200,154,85,.32);
  background:var(--btn-grain),linear-gradient(180deg,rgba(255,240,215,.08) 0%,rgba(255,240,215,.02) 55%,rgba(0,0,0,.16) 100%),rgba(46,35,22,.55);
  box-shadow:0 1px 2px rgba(8,5,2,.45),0 2px 6px rgba(8,5,2,.25),inset 0 1px 0 rgba(255,240,215,.10)}
html[data-skin="bronze"] .v3-btn.sm{font-size:.66rem}
html[data-skin="bronze"] .v3-btn:hover{
  border-color:var(--or);color:var(--or-deep);transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(8,5,2,.45),0 5px 12px rgba(8,5,2,.3),inset 0 1px 0 rgba(255,240,215,.12)}
html[data-skin="bronze"] .v3-btn:active{
  transform:translateY(1px);border-color:rgba(200,154,85,.4);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45)}
html[data-skin="bronze"] .v3-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px var(--or-soft),0 0 0 1.5px var(--or),inset 0 1px 0 rgba(255,240,215,.10)}
html[data-skin="bronze"] .v3-btn.ghost{background:none;box-shadow:none}
html[data-skin="bronze"] .v3-btn.ghost:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
/* le solide = bronze poli, texte espresso gravé (ombre claire SOUS le texte foncé) */
html[data-skin="bronze"] .v3-btn.solid{
  background:var(--btn-grain-solid),var(--metal);color:var(--on-metal);border-color:#3A250C;
  text-shadow:0 1px 0 rgba(255,244,214,.4);
  box-shadow:var(--metal-bevel),0 2px 6px rgba(8,5,2,.5)}
html[data-skin="bronze"] .v3-btn.solid:hover{
  filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:var(--metal-bevel),0 4px 10px rgba(8,5,2,.55)}
html[data-skin="bronze"] .v3-btn.solid:active{
  filter:none;transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(30,18,5,.55),inset 0 -1px 0 rgba(255,244,214,.2)}
/* (.v3-btn.metal : AUCUN override ~ avec --metal clair + --on-metal foncé, le
   bevel et le text-shadow clair du socle redeviennent corrects tels quels) */
/* lecteur : la molette play du socle = dégradé + color:#fff EN DUR ~ illisible
   sur champagne → même pièce de bronze que le solide */
html[data-skin="bronze"] .v3-pl-play{background:var(--metal);color:var(--on-metal)}

/* ── 3 · CHAMPS CREUSÉS ~ encoche sombre chaude, fond plus profond que la carte ── */
html[data-skin="bronze"] .v3-input,
html[data-skin="bronze"] .v3-select,
html[data-skin="bronze"] .v3-textarea,
html[data-skin="bronze"] .save-name,
html[data-skin="bronze"] .lq-pop-ta,
html[data-skin="bronze"] .prog-foot .foot-note{
  background:#14100A;border-color:rgba(200,154,85,.24);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,240,215,.05)}
html[data-skin="bronze"] .v3-input:focus-visible,
html[data-skin="bronze"] .v3-select:focus-visible,
html[data-skin="bronze"] .v3-textarea:focus-visible,
html[data-skin="bronze"] .save-name:focus,
html[data-skin="bronze"] .lq-pop-ta:focus,
html[data-skin="bronze"] .prog-foot .foot-note:focus{
  border-color:var(--or);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 0 3px var(--or-soft)}
/* la cellule invisible des tables RESTE invisible (édition inline) */
html[data-skin="bronze"] .v3-input.cell{background:transparent;border-color:transparent;box-shadow:none}
html[data-skin="bronze"] .v3-table tbody tr:hover .v3-input.cell{
  background:#14100A;border-color:var(--line2);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
/* dropdown maison : même encoche */
html[data-skin="bronze"] .ol-drop>.b{
  background:#14100A;border-color:rgba(200,154,85,.24);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}

/* ── 4 · CARTES RIM-LIGHT ~ le métal accroche la lumière : fin liseré champagne
       en haut + ombre noire chaude vers le bas ── */
html[data-skin="bronze"] .v3-card,
html[data-skin="bronze"] .v3-kpi{
  border-color:rgba(200,154,85,.16);
  box-shadow:inset 0 1px 0 rgba(232,205,154,.10),0 1px 2px rgba(8,5,2,.4),0 6px 16px rgba(8,5,2,.3)}
html[data-skin="bronze"] .v3-card.hover:hover{
  border-color:var(--or-line);
  box-shadow:inset 0 1px 0 rgba(232,205,154,.14),0 2px 6px rgba(8,5,2,.45),0 12px 28px rgba(8,5,2,.4)}

/* ── 5 · NAV À DEUX LIGNES ~ titre thématique crème + sous-titre discret,
       AUCUNE ligne masquée : la hiérarchie fait le travail ── */
html[data-skin="bronze"] .v3-navi{text-transform:none;letter-spacing:.01em;font-size:.84rem;font-weight:600;color:var(--ink)}
html[data-skin="bronze"] .v3-navi small{font-size:.62rem;font-weight:400;letter-spacing:.02em;color:var(--ink3)}
/* actif : barrette de bronze + champagne (le fond --paper vient du socle) */
html[data-skin="bronze"] .v3-navi.on{box-shadow:inset 3px 0 0 var(--or)}

/* ── finitions sobres (le reste du décor reste PLAT et calme) ── */
html[data-skin="bronze"] .v3-tab{font-size:.74rem}
html[data-skin="bronze"] .v3-tab.on{font-weight:700}
html[data-skin="bronze"] .v3-chip{
  font-size:.66rem;border-color:rgba(200,154,85,.28);
  background:var(--btn-grain),rgba(46,35,22,.5);
  box-shadow:inset 0 1px 0 rgba(255,240,215,.07)}
/* hero de fiche : Oltlo Serif gardée, spacing recalé pour le crème sur sombre */
html[data-skin="bronze"] .ep-hero h1{font-weight:400;letter-spacing:-.015em}
/* PIÈGE socle (oltlo.css:618-619) : .ep-pbtn:hover met color:#fff en dur sur
   var(--or), et la l.619 ne couvre que les 3 skins antiques sombres ~ sur un
   bronze CLAIR il faut du foncé → la pastille devient la pièce, texte espresso */
html[data-skin="bronze"] .ep-pbtn:hover{
  background:var(--metal);color:var(--on-metal);
  box-shadow:var(--metal-bevel),0 6px 14px rgba(8,5,2,.5)}
/* raccord transverse (suivi-entrainement.css:412 ~ color:#1a140a en dur) :
   texte espresso lisible sur l'accent champagne (6.9:1 sur #C89A55) */
html[data-skin="bronze"] .co-flipctl button.on{color:#241505}
/* touch : aucun relief fantôme au doigt (mêmes garde-fous que le socle) */
@media (hover:none){
  html[data-skin="bronze"] .v3-btn:hover{
    transform:none;color:var(--ink);border-color:rgba(200,154,85,.32);
    box-shadow:0 1px 2px rgba(8,5,2,.45),0 2px 6px rgba(8,5,2,.25),inset 0 1px 0 rgba(255,240,215,.10)}
  html[data-skin="bronze"] .v3-btn.solid:hover{
    filter:none;transform:none;box-shadow:var(--metal-bevel),0 2px 6px rgba(8,5,2,.5)}
}

/* ── PASSE AUDIT DESIGN (2026-08-04) ~ raffinements post-v2 (skill design-audit) ── */
/* Linteau profil (.h4-lintel, profil.css:359) : les 4 filets accent pleine largeur
   coupaient trop dur en bleu saturé ~ hairlines fondues (la plaque gravée reste aux skins or). */
html[data-skin="fresque"] .h4-lintel{border-top-color:rgba(37,99,235,.22);border-bottom-color:rgba(37,99,235,.22)}
html[data-skin="fresque"] .h4-lintel::before,
html[data-skin="fresque"] .h4-lintel::after{opacity:.35}
/* Manrope sans italique chargée → oblique synthétique cheap : emphases droites sur le skin sans-serif. */
html[data-skin="fresque"] .pf-name.mut{font-style:normal;font-weight:500}
html[data-skin="fresque"] .pf-devise,
html[data-skin="fresque"] .pa-intro,
html[data-skin="fresque"] .pf-tli .quote{font-style:normal}

/* ── RAMPES MÉDIA des skins PRO (2026-08-04) ~ les CSS de pages (mes-plats,
   mes-aliments, exercice-detail, fiche-souplesse, oltlo-fiche*) définissent
   des variables média --mph1/2/3, --mpink, --mpveil, --mpcart avec un DÉFAUT
   :root PORPHYRE (bordeaux) et des déclinaisons papyrus/obsidienne/lapis
   seulement → sur Fresque/Bronze, le fond des vidéos/images restait ROUGE.
   Un seul point de correction ici : html[data-skin] (0,1,1) bat :root (0,1,0). ── */
html[data-skin="fresque"]{--mph1:#3A4E78;--mph2:#22304E;--mph3:#131C30;--mpink:#F4F7FB;--mpveil:13,19,32;--mpcart:26,36,58}
html[data-skin="bronze"]{--mph1:#5C4526;--mph2:#352716;--mph3:#1E160A;--mpink:#F6EBD4;--mpveil:14,10,5;--mpcart:30,23,12}

/* ── liste de PERSONNES des barres de suivi (.svp-ac ~ module oltlo-suivi-personnes.js)
   même dessin que l'autocomplétion du Stade (.ag-ac, base/activite-gps.css) mais
   PARTAGÉE : Arène, Table, Canon. 2026-08-04. ── */
.svp-ac{position:absolute;top:calc(100% + 4px);left:0;min-width:260px;max-width:340px;z-index:40;
  background:var(--card);border:1px solid var(--or-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:.3rem;display:none}
.svp-ac.open{display:block}
.svp-ac .it{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:var(--r);cursor:pointer}
.svp-ac .it:hover{background:var(--or-soft)}
.svp-ac .it .av{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--or);display:grid;place-items:center;
  font-family:var(--fd);font-size:.6rem;color:var(--or-deep);background:var(--or-soft)}
.svp-ac .it .nm{font-family:var(--fb);font-size:.92rem;color:var(--ink)}
.svp-ac .it .rg{font-family:var(--fd);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-left:auto}
.svp-ac .empty{padding:.6rem;font-family:var(--fn);font-size:.6rem;color:var(--ink3);text-align:center}

/* ── RATTRAPAGE 48 h de l'Arène (2026-08-05) ~ bande sobre, jamais un popup ──
   Apparaît seulement si une séance prévue n'a pas été validée la veille. */
.pr-rattrap{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:0 0 1rem;padding:.7rem .95rem;border:1px solid var(--or-line);border-left:3px solid var(--or);
  border-radius:var(--r);background:var(--or-soft)}
.pr-rattrap .rt-q{font-family:var(--fb);font-size:.92rem;color:var(--ink2);flex:1;min-width:220px}
.pr-rattrap[hidden]{display:none}