/* ---------- Polices auto-hébergées ----------
   Inter et Manrope servies depuis votre domaine plutôt que depuis
   Google Fonts : une requête externe de moins, pas d'attente sur un
   tiers, et le site s'affiche même sans accès à fonts.googleapis.com
   — ce qui arrive sur un réseau de mine. font-display:swap laisse le
   texte lisible pendant le chargement.                              */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   H2O CONSULTING — Design System
   Hydro & Dewatering Expertise
   ========================================================================== */

:root{
  /* Brand */
  --navy-900:#04223c;
  --navy-800:#062f52;
  --navy-700:#0a3f6b;
  --blue-600:#1b75bc;
  --blue-500:#2b8ed4;
  --cyan-400:#29abe2;
  --cyan-300:#63c8ef;
  --cyan-100:#d9f0fb;
  --gold-500:#e2a230;
  --gold-100:#fbf0d9;

  /* Neutrals */
  --ink:#0c1b28;
  --ink-2:#33475b;
  --muted:#61758a;
  --line:#e2e9f0;
  --line-2:#eef3f7;
  --surface:#f5f9fc;
  --white:#ffffff;

  /* Status */
  --ok:#1f9d6b;
  --warn:#d98324;
  --risk:#c8452f;

  /* Type */
  --font-head:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* Space & shape */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(6,47,82,.06),0 2px 8px rgba(6,47,82,.05);
  --shadow-md:0 4px 12px rgba(6,47,82,.08),0 16px 40px rgba(6,47,82,.08);
  --shadow-lg:0 10px 30px rgba(6,47,82,.12),0 40px 80px rgba(6,47,82,.12);
  --container:100%;
  --gutter:clamp(20px,3vw,68px);
  --nav-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue-600); text-decoration:none}
a:hover{color:var(--cyan-400)}
h1,h2,h3,h4,h5{font-family:var(--font-head); color:var(--navy-900); margin:0 0 .5em; line-height:1.18; letter-spacing:-.02em}
h1{font-size:clamp(2.15rem,4.6vw,3.6rem); font-weight:800}
h2{font-size:clamp(1.65rem,3vw,2.5rem); font-weight:800}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:700}
h4{font-size:1.02rem; font-weight:700}
p{margin:0 0 1.05em}

/* ---------- Justification ----------
   Le texte courant de toute la plateforme est justifié et occupe la largeur
   de sa colonne. Deux précautions rendent la chose lisible plutôt que
   décorative :

     · la césure automatique, sans laquelle une ligne longue justifiée creuse
       des rivières de blanc entre les mots ;
     · text-align-last:left, pour que la dernière ligne d'un paragraphe ne
       soit pas étirée d'un bord à l'autre.

   Une ligne unique n'est jamais justifiée par le navigateur — c'est sa
   dernière ligne — de sorte que les libellés courts ne bougent pas. */
@media (min-width:640px){
  p, .lead, .measure, .detail-texte, blockquote{
    text-align:justify; text-align-last:left; hyphens:auto; -webkit-hyphens:auto;
  }
  /* Colonnes étroites et éléments d'interface : la justification y écarte
     les mots au lieu de les aligner. */
  .card p, .course-body p, .ebook-body p, .buy-box p, .note-carte p,
  .kpi p, .stat p, .metrics p, .pl-placeholder p, .rv-vide p,
  td p, th p, figcaption, .sub, .an-ch, .form-hint, .cert-subject,
  .chain small, .hero-pills small, .badge, .pill{
    text-align:left; text-align-last:auto; hyphens:manual;
  }
}
ul{margin:0 0 1em; padding-left:1.15em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--cyan-300);color:var(--navy-900)}
:focus-visible{outline:3px solid var(--cyan-400); outline-offset:2px; border-radius:4px}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container-narrow{max-width:none}
/* Garde-fou de lisibilité sur très grands écrans : le texte courant ne dépasse
   pas une longueur de ligne confortable, même en pleine largeur. */
.measure{max-width:none}
.section{padding:clamp(56px,7vw,104px) 0}
.section-tight{padding:clamp(40px,5vw,68px) 0}
.section-surface{background:var(--surface)}
.section-navy{background:linear-gradient(160deg,var(--navy-900),var(--navy-700) 70%,var(--blue-600)); color:#dbe9f4}
.section-navy h1,.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
.grid{display:grid; gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,72px); align-items:center}
/* En-tête de section : intitulé à gauche, accroche à droite — occupe la largeur
   sans étirer le texte. */
.section-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3.5vw,64px); align-items:end; margin-bottom:clamp(30px,3.5vw,52px)}
.section-head h2{margin-bottom:0}
.section-head p{margin:0; color:var(--muted); max-width:none}
.section-navy .section-head p{color:#b3d0e6}
@media (max-width:900px){.section-head{grid-template-columns:1fr; align-items:start; gap:14px}}
.split > div > p, .split > div > ul{max-width:none}
/* Variante où l'image épouse la hauteur de la colonne de texte : supprime les
   vides sous la colonne la plus courte en très grande largeur. */
.split-stretch{align-items:stretch}
.split-stretch > *{min-width:0}
.split-stretch .card{height:auto}
.split-stretch .media-frame{height:100%; min-height:340px}
.split-stretch .media-frame img{height:100%; width:100%; object-fit:cover; aspect-ratio:auto}
.stack-sm>*+*{margin-top:.6rem}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

@media (min-width:1280px){
  .g-2.g-wide-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1560px){
  .g-3.g-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1900px){
  .g-2.g-wide-3{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1360px){
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .g-2,.g-3,.g-4,.g-5{grid-template-columns:1fr}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex; align-items:center; gap:22px; height:var(--nav-h)}
/* Le logo porte déjà le nom et la signature « Hydro & Dewatering Expertise ».
   L'en-tête ne les répète donc plus en texte à côté : le doublon prenait
   cent pixels de barre et forçait le logo à 46 px, taille à laquelle la
   signature manuscrite devenait une tache. À 56 px, le verrouillage complet
   se lit, et la barre y gagne de la place. */
.brand{display:flex; align-items:center; margin-right:auto; flex:none}
.brand img{height:56px; width:auto; display:block}
@media (max-width:1280px){.brand img{height:50px}}
@media (max-width:420px){.brand img{height:44px}}

.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-links a{
  display:block; padding:9px 12px; border-radius:var(--r-pill); font-size:.9rem;
  font-weight:600; color:var(--ink-2); transition:.18s ease; white-space:nowrap;
}
/* Onze rubriques et quatre commandes : à taille normale la barre demande
   1560 px. Au-dessous on resserre par paliers, et sous 1280 px on passe au
   menu — la borne précédente était à 1420, si bien qu'entre 1421 et 1560 la
   barre débordait de la fenêtre sans que rien ne le signale. */
@media (min-width:1281px) and (max-width:1560px){
  .nav{gap:12px}
  .nav-links{gap:2px}
  .nav-links a{padding:9px 8px; font-size:.845rem}
}
@media (min-width:1281px) and (max-width:1400px){
  .nav{gap:8px}
  .nav-links a{padding:9px 4px; font-size:.805rem}
  .nav-actions{gap:6px}
  .rk-btn{padding:7px 8px; gap:5px}
}
.nav-links a:hover{background:var(--cyan-100); color:var(--navy-800)}
.nav-links a.active{color:var(--blue-600); background:var(--cyan-100)}
.nav-actions{display:flex; align-items:center; gap:10px}
.nav-cta-mobile{display:none}

.lang-switch{display:inline-flex; background:var(--line-2); border-radius:var(--r-pill); padding:3px; border:1px solid var(--line)}
.lang-switch button{
  border:0; background:transparent; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color:var(--muted); padding:5px 11px; border-radius:var(--r-pill); cursor:pointer; transition:.18s;
}
.lang-switch button.active{background:var(--white); color:var(--navy-900); box-shadow:var(--shadow-sm)}

.burger{display:none; width:44px; height:40px; border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); cursor:pointer; padding:0}
.burger span{display:block; width:20px; height:2px; background:var(--navy-800); margin:4px auto; border-radius:2px; transition:.25s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1280px){
  .burger{display:block}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); padding:14px 18px 22px; gap:2px;
    box-shadow:var(--shadow-md); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:12px 14px; border-radius:var(--r-sm)}
  .nav-actions .btn{display:none}
  .nav-cta-mobile{display:block; margin-top:8px; border-top:1px solid var(--line-2); padding-top:8px}
  .nav-cta-mobile a{color:var(--blue-600) !important; font-weight:700}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-head); font-weight:700; font-size:.93rem; line-height:1;
  padding:13px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:.2s ease; text-align:center; white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); color:#fff; box-shadow:0 6px 18px rgba(27,117,188,.28)}
.btn-primary:hover{color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(27,117,188,.36)}
.btn-ghost{background:transparent; color:var(--navy-800); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan-400); color:var(--blue-600); background:var(--cyan-100)}
.btn-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.34)}
.btn-light:hover{background:#fff; color:var(--navy-900)}
.btn-sm{padding:9px 15px; font-size:.85rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; color:#e8f3fa; background:var(--navy-900)}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg,rgba(4,34,60,.97) 0%,rgba(5,42,73,.93) 38%,rgba(10,63,107,.86) 68%,rgba(27,117,188,.72) 100%),
    url('../img/pit-lake.jpg') center 55%/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; right:-14%; top:-30%; width:65%; height:150%;
  background:radial-gradient(closest-side,rgba(41,171,226,.42),transparent 72%);
  pointer-events:none;
}
/* Une seule colonne : le panneau de démonstration a été retiré, tout le
   contenu du hero occupe donc la largeur utile du conteneur. */
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;
  align-items:center; align-content:center; row-gap:clamp(26px,3vw,40px);
  min-height:clamp(480px,68svh,700px); padding-block:clamp(48px,5.5vw,78px);
}
/* Le bloc d'accroche est centré sur la page : surtitre, titre, chapeau et
   boutons sur le même axe vertical. Le chapeau reste justifié — un pavé
   justifié centré tient debout, à condition que sa dernière ligne soit
   centrée elle aussi, sinon elle pend à gauche et trahit le pavé. */
.hero-copy{max-width:none; text-align:center}
/* Le surtitre annonce les trois métiers : c'est la première ligne lue, elle
   mérite d'être lisible plutôt que discrète. */
.hero .eyebrow{
  justify-content:center; font-size:clamp(.85rem,1.05vw,1.06rem);
  letter-spacing:.17em; margin-bottom:clamp(18px,1.8vw,26px);
}
.hero .eyebrow::before{width:38px; height:3px}
/* Le filet du surtitre est un repère d'alignement à gauche. Centré et sur
   deux lignes — ce qui arrive dès qu'on passe au téléphone — il se retrouve
   seul à l'écart du texte : on le retire plutôt que de le laisser flotter. */
@media (max-width:700px){.hero .eyebrow::before{display:none}}
.hero-cta{justify-content:center}
/* Les trois pôles gardent leur composition en drapeau : ce sont des cartes,
   pas du texte d'accroche. */
.hero-pills a{text-align:left}
@supports not (height:100svh){.hero-inner{min-height:calc(100vh - var(--nav-h))}}
@media (max-width:760px){
  .hero-inner{min-height:auto; padding-block:clamp(46px,9vw,76px)}
  .hero-cta{margin-bottom:0}
  .hero-stats{margin-top:38px}
}
.hero h1{color:#fff; max-width:none; font-size:clamp(2.25rem,4.6vw,4.6rem); margin-bottom:.42em}
.hero .lead{
  font-size:clamp(1.03rem,1.15vw,1.32rem); color:#c9e2f3;
  max-width:94ch; margin-inline:auto; text-align-last:center;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head);
  font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-300); margin-bottom:18px;
}
.eyebrow::before{content:''; width:26px; height:2px; background:var(--cyan-400); border-radius:2px}
.eyebrow-dark{color:var(--blue-600)}
.eyebrow-dark::before{background:var(--gold-500)}

.hero-stats{
  grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.16); border-radius:var(--r-md); overflow:hidden; margin-top:clamp(8px,2vw,26px);
}
.hero-stats div{background:rgba(4,34,60,.55); padding:20px 18px; backdrop-filter:blur(6px)}
.hero-stats strong{display:block; font-family:var(--font-head); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; color:#fff; line-height:1.1}
.hero-stats span{font-size:.8rem; color:#a9cbe4; letter-spacing:.02em}
@media (max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Hero : bandeau des trois pôles ---------- */
.hero-pills{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px); margin-top:clamp(26px,3vw,38px)}
.hero-pills a{
  display:flex; gap:14px; align-items:flex-start; padding:clamp(15px,1.4vw,20px) clamp(17px,1.6vw,24px); border-radius:var(--r-md);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#dceaf6; transition:.2s ease;
}
.hero-pills a:hover{background:rgba(255,255,255,.14); border-color:var(--cyan-400); transform:translateY(-2px); color:#fff}
.hero-pills .ico{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:rgba(41,171,226,.2); border:1px solid rgba(41,171,226,.45); color:var(--cyan-300);
}
.hero-pills .ico svg{width:19px; height:19px; stroke-width:1.8}
.hero-pills b{display:block; font-family:var(--font-head); font-size:.95rem; color:#fff; margin-bottom:2px}
.hero-pills small{display:block; font-size:.79rem; line-height:1.45; color:#a9cbe4}
@media (max-width:760px){.hero-pills{grid-template-columns:1fr}}

/* ---------- Chaîne de valeur ---------- */
.chain{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:30px}
.chain > div{position:relative; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff}
.chain > div::after{
  content:'›'; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  color:var(--cyan-400); font-size:1.3rem; font-weight:700; z-index:2;
}
.chain > div:last-child::after{display:none}
.chain i{display:block; font-style:normal; font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.12em; color:var(--cyan-400)}
.chain b{display:block; font-family:var(--font-head); font-size:1rem; color:var(--navy-900); margin:3px 0 2px}
.chain small{display:block; font-size:.79rem; line-height:1.45; color:var(--muted)}
@media (max-width:760px){
  .chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain > div::after{display:none}
}

@media (max-width:1100px){
  .hero-inner{min-height:auto; padding-block:clamp(52px,7vw,88px)}
}

/* ---------- Page banner ---------- */
.page-head{position:relative; background:linear-gradient(140deg,var(--navy-900),var(--navy-700) 65%,var(--blue-600)); color:#d5e8f5; padding:clamp(50px,7vw,86px) 0 clamp(44px,6vw,74px); overflow:hidden}
.page-head::after{content:''; position:absolute; right:-10%; bottom:-60%; width:52%; height:170%; background:radial-gradient(closest-side,rgba(41,171,226,.34),transparent 70%)}
.page-head .container{position:relative; z-index:2}
.page-head h1{color:#fff; margin-bottom:.35em}
.page-head p{max-width:none; color:#bcd8ec; margin:0; font-size:1.06rem}
/* Bandeau de page : une seule colonne. Le sous-titre logé dans une colonne
   étroite à droite flottait à mi-hauteur, séparé du titre qu'il complète par
   soixante-dix pixels de vide, et se cassait sur deux lignes courtes. Titre
   et sous-titre occupent maintenant toute la largeur, l'un sous l'autre. */
.page-head .head-grid{display:block}
.page-head .head-grid h1{margin-bottom:.3em}
.page-head .head-grid > p,.page-head .head-grid > :last-child:not(h1){margin:0}
.breadcrumb{font-size:.82rem; color:#8fb6d3; margin-bottom:14px}
.breadcrumb a{color:#bcd8ec}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-sm); transition:.24s ease; height:100%;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--cyan-300)}
.card h3{margin-bottom:.45em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card p,.card li{max-width:none}
.card-flat{box-shadow:none}
.card-flat:hover{transform:none; box-shadow:var(--shadow-sm)}
.card-dark{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#cfe3f2; box-shadow:none}
.card-dark:hover{background:rgba(255,255,255,.1); border-color:var(--cyan-400); transform:translateY(-4px)}

.icon-badge{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,var(--cyan-100),#fff); border:1px solid var(--cyan-300); color:var(--blue-600);
}
.icon-badge svg{width:26px; height:26px; stroke-width:1.7}
.card-dark .icon-badge{background:rgba(41,171,226,.16); border-color:rgba(41,171,226,.5); color:var(--cyan-300)}

.tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); background:var(--cyan-100); color:var(--blue-600); margin:0 6px 6px 0;
}
.tag-gold{background:var(--gold-100); color:#96690f}

.checklist{list-style:none; padding:0; margin:0}
.checklist li{position:relative; padding-left:30px; margin:.6em 0; font-size:.96rem; line-height:1.7; color:var(--ink-2)}
.checklist li::before{
  content:''; position:absolute; left:0; top:.42em; width:17px; height:17px; border-radius:50%;
  background:var(--cyan-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b75bc' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section-navy .checklist li{color:#c4dcee}
.section-navy .checklist li::before{background-color:rgba(41,171,226,.22)}

/* ---------- Feature media ---------- */
.media-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.media-frame img{width:100%; height:100%; object-fit:cover; display:block}
.media-frame::after{content:''; position:absolute; inset:0; background:linear-gradient(200deg,transparent 45%,rgba(4,34,60,.42))}
.media-caption{position:absolute; z-index:2; left:20px; right:20px; bottom:18px; color:#fff; font-size:.86rem; text-shadow:0 1px 8px rgba(0,0,0,.5)}

.diagram{display:flex; flex-direction:column; justify-content:center}
.diagram svg{width:100%; height:auto; display:block; margin-top:10px}
.diagram text{font-family:var(--font-body)}

/* ---------- Steps / process ---------- */
.steps{counter-reset:step; display:grid; gap:0}
.step{position:relative; padding:0 0 34px 62px; counter-increment:step}
.step::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:-2px;
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:800; font-size:.9rem; color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-600));
}
.step::after{content:''; position:absolute; left:21px; top:46px; bottom:6px; width:2px; background:linear-gradient(var(--cyan-300),transparent)}
.step:last-child{padding-bottom:0}
.step:last-child::after{display:none}
.step h4{margin-bottom:.25em}
.step p{margin:0; color:var(--muted); font-size:.95rem}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:#fff}
table.data{width:100%; border-collapse:collapse; font-size:.9rem; min-width:600px}
table.data th{
  text-align:left; font-family:var(--font-head); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--surface); padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.data td{padding:12px 14px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface)}
table.data td.num{font-variant-numeric:tabular-nums; text-align:right}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap}
.pill::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill-ok{background:#e6f6ef; color:#12724c}
.pill-warn{background:#fdf2e2; color:#9a5c10}
.pill-risk{background:#fdecea; color:#a3301d}
.pill-info{background:var(--cyan-100); color:#125b93}

.watchlist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.watchlist li{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-2); font-size:.9rem}
.watchlist li:last-child{border-bottom:0}
.watchlist b{font-family:var(--font-head); color:var(--navy-900); min-width:88px}
.watchlist .v{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2)}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block; font-size:.82rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; font-family:var(--font-head)}
.field .hint{font-size:.78rem; color:var(--muted); margin-top:5px}
input,select,textarea{
  width:100%; font:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; transition:.18s;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan-400); box-shadow:0 0 0 4px rgba(41,171,226,.16); outline:none}
textarea{min-height:130px; resize:vertical}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361758a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px}
.form-note{font-size:.82rem; color:var(--muted)}
.alert{border-radius:var(--r-sm); padding:12px 14px; font-size:.88rem; border:1px solid; margin-bottom:14px}
.alert-ok{background:#e9f7f1; border-color:#b6e2ce; color:#12724c}
.alert-err{background:#fdecea; border-color:#f3c6bf; color:#a3301d}
.alert-info{background:var(--cyan-100); border-color:#a9dcf4; color:#12547f}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900); color:#9fc0da; font-size:.92rem; padding:clamp(48px,6vw,72px) 0 26px}
.site-footer h4{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
.site-footer a{color:#c3dbee; display:block; padding:4px 0}
.site-footer a:hover{color:var(--cyan-300)}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1.15fr 1fr 1.15fr; gap:clamp(22px,2.4vw,40px)}
.footer-brand img{height:60px; width:auto; display:block; margin-bottom:18px}
.footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; color:#7fa5c2}
@media (max-width:1200px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--navy-800),var(--blue-600)); border-radius:var(--r-lg); padding:clamp(30px,4vw,52px); color:#fff; display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; box-shadow:var(--shadow-lg)}
.cta-band h2{color:#fff; margin-bottom:.3em}
.cta-band p{color:#cbe4f5; margin:0; max-width:none}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .card:hover,.btn:hover{transform:none}
}

/* ==========================================================================
   PORTAL / APP
   ========================================================================== */
.app-body{background:var(--surface)}
.app-shell{display:grid; grid-template-columns:264px 1fr; min-height:100vh;
  background:linear-gradient(90deg,var(--navy-800) 0 264px,var(--surface) 264px)}
.app-side{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800)); color:#a9cbe4;
  padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column;
}
/* Barre latérale de l'espace client et de l'administration : 264 px de
   large, dont 32 px de marges — le verrouillage tient à 48 px de haut sans
   toucher les bords, et la pastille ADMIN passe dessous plutôt qu'à côté. */
.app-side .brand{position:relative; display:block; margin-bottom:6px}
.app-side .brand img{height:48px; width:auto; display:block}
.app-side .side-badge{display:inline-block; margin:8px 0 0}
.side-badge{
  font-family:var(--font-head); font-weight:800; font-size:.6rem; letter-spacing:.16em;
  background:var(--gold-500); color:#3a2600; padding:4px 9px; border-radius:var(--r-pill); margin-left:8px;
}
.app-side-admin{background:linear-gradient(180deg,#0d2137,#123a52)}
.app-side-admin .side-nav a.active{background:linear-gradient(135deg,#b8801f,var(--gold-500)); color:#231600; box-shadow:0 6px 16px rgba(226,162,48,.28)}
.admin-body .app-shell{background:linear-gradient(90deg,#0d2137 0 264px,var(--surface) 264px)}
.admin-body .app-top{border-bottom:2px solid var(--gold-500)}
.app-login .visual-admin::before{background:linear-gradient(150deg,rgba(9,28,46,.95),rgba(120,84,20,.72)),url('../img/slope-monitoring.jpg') center/cover}
.side-title{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#6f9cbf; margin:22px 10px 8px; font-family:var(--font-head); font-weight:800}
.side-nav{list-style:none; margin:0; padding:0}
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  color:#c2dcee; font-size:.9rem; font-weight:600; transition:.16s;
}
.side-nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.side-nav a.active{background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); color:#fff; box-shadow:0 6px 16px rgba(41,171,226,.3)}
.side-nav svg{width:18px; height:18px; flex:none; stroke-width:1.8}
.side-foot{margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem}

.app-main{min-width:0; display:flex; flex-direction:column}
.app-top{
  display:flex; align-items:center; gap:16px; padding:16px clamp(18px,2.4vw,38px);
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.app-top h1{font-size:1.3rem; margin:0}
.app-top .sub{font-size:.82rem; color:var(--muted)}
.app-top-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.app-content{padding:clamp(20px,2.2vw,40px); flex:1; width:100%}

.kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpi-grid{grid-template-columns:1fr}}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--shadow-sm)}
.kpi .label{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; font-family:var(--font-head)}
.kpi .value{font-family:var(--font-head); font-size:1.85rem; font-weight:800; color:var(--navy-900); line-height:1.15; margin:6px 0 2px; font-variant-numeric:tabular-nums}
.kpi .value small{font-size:.9rem; font-weight:700; color:var(--muted)}
.kpi .delta{font-size:.8rem; font-weight:700}
.delta-up{color:var(--ok)} .delta-down{color:var(--risk)} .delta-flat{color:var(--muted)}

.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden}
.panel-head{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line-2)}
.panel-head h3{margin:0; font-size:1.02rem}
.panel-head .sub{font-size:.8rem; color:var(--muted); margin:0}
.panel-head .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.panel-body{padding:20px}
.panel-body.fill{display:grid; align-content:center; justify-items:stretch; gap:18px}
.panel-stretch{display:flex; flex-direction:column}
.panel-stretch .panel-body{flex:1}
.panel-body.flush{padding:0}

.chart{width:100%; display:block; overflow:visible}
.chart .axis line,.chart .axis path{stroke:var(--line); stroke-width:1}
.chart .grid line{stroke:var(--line-2); stroke-width:1}
.chart text{font-family:var(--font-body); font-size:11px; fill:var(--muted)}
.gauge-max{font-size:10px}
.chart .axis-title{font-size:10.5px; fill:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:.82rem; color:var(--ink-2); padding:2px 0 0}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block}

.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px}
.seg button{border:0; background:transparent; font:inherit; font-size:.8rem; font-weight:700; color:var(--muted); padding:6px 13px; border-radius:var(--r-pill); cursor:pointer}
.seg button.active{background:#fff; color:var(--navy-900); box-shadow:var(--shadow-sm)}

.app-login{min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr}
.app-login .visual{position:relative; background:var(--navy-900); overflow:hidden; display:grid; place-items:center; padding:40px}
.app-login .visual::before{content:''; position:absolute; inset:0; background:linear-gradient(150deg,rgba(4,34,60,.92),rgba(27,117,188,.72)),url('../img/slope-monitoring.jpg') center/cover}
.app-login .visual .inner{position:relative; z-index:2; color:#d9ecf8; max-width:440px}
.app-login .visual h2{color:#fff}
/* La liste à cocher hérite de la couleur d'encre du corps de page : sur le
   panneau photographique de la page de connexion, elle devenait du gris
   foncé sur une paroi sombre — quatre lignes illisibles. */
.app-login .visual .checklist li{color:#cfe4f3}
.app-login .form-side{display:grid; place-items:center; padding:clamp(28px,5vw,60px); background:#fff}
.app-login .form-box{width:100%; max-width:400px}
@media (max-width:900px){.app-login{grid-template-columns:1fr}.app-login .visual{display:none}}

@media (max-width:960px){
  .app-shell{grid-template-columns:1fr; background:var(--surface)}
  .app-side{position:fixed; z-index:80; left:0; top:0; width:264px; transform:translateX(-100%); transition:transform .25s ease}
  .app-side.open{transform:none}
  .app-burger{display:inline-grid !important}
}
.app-burger{display:none; place-items:center; width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); cursor:pointer}

.map-wrap{position:relative; background:linear-gradient(160deg,#eef5fa,#e2eef6); border-radius:var(--r-md); overflow:hidden; width:100%; max-width:560px; margin-inline:auto}
.map-wrap svg{display:block; width:100%; height:auto}
.map-dot{cursor:pointer; transition:.18s}
.map-dot:hover{filter:brightness(1.15)}
.map-tooltip{
  position:absolute; pointer-events:none; background:var(--navy-900); color:#fff; font-size:.78rem;
  padding:8px 11px; border-radius:var(--r-sm); box-shadow:var(--shadow-md); opacity:0; transition:opacity .15s; max-width:230px; z-index:5;
}
.map-tooltip.show{opacity:1}
.map-tooltip b{display:block; font-size:.84rem; margin-bottom:2px}

.result-box{background:linear-gradient(140deg,var(--navy-900),var(--blue-600)); color:#fff; border-radius:var(--r-md); padding:22px 24px}
.result-box .big{font-family:var(--font-head); font-size:2.2rem; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums}
.result-box .lbl{font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:#bfe0f4; font-weight:700}
.result-row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:.9rem}
.result-row:last-child{border-bottom:0}
.result-row span:last-child{font-weight:700; font-variant-numeric:tabular-nums}

.doc-row{display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line-2)}
.doc-row:last-child{border-bottom:0}
.doc-ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--cyan-100); color:var(--blue-600); font-size:.7rem; font-weight:800; font-family:var(--font-head); flex:none}
.doc-meta{min-width:0}
.doc-meta b{display:block; font-size:.92rem; color:var(--ink); font-weight:650}
.doc-meta small{color:var(--muted); font-size:.78rem}
.doc-row .btn{margin-left:auto}

.print-only{display:none}
@media print{
  .site-header,.site-footer,.app-side,.app-top-actions,.no-print{display:none !important}
  .app-shell{grid-template-columns:1fr; background:var(--surface)}
  body{background:#fff}
  .print-only{display:block}
}

/* ==========================================================================
   CALENDRIER DES SESSIONS & INSCRIPTION
   ========================================================================== */
.session-card{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:.22s ease;
}
.session-card:hover{box-shadow:var(--shadow-md); border-color:var(--cyan-300)}
.session-main{padding:clamp(20px,2vw,28px); min-width:0}
.session-head h3{margin:10px 0 4px}
.session-head .sub{color:var(--muted); font-size:.9rem; margin:0}
.session-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line-2)}
.session-meta dt{font-family:var(--font-head); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.session-meta dd{margin:0; font-size:.94rem; color:var(--ink); font-weight:600}
.session-modules{margin-top:18px; border-top:1px solid var(--line-2); padding-top:14px}
.session-modules summary{cursor:pointer; list-style:none; font-size:.88rem; font-weight:700; color:var(--blue-600)}
.session-modules summary::after{content:' +'; color:var(--muted)}
.session-modules[open] summary::after{content:' –'}
.session-modules ul{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 22px}
.session-modules li{font-size:.88rem; color:var(--ink-2); display:flex; gap:9px}
.session-modules li b{color:var(--blue-600); flex:none; font-family:var(--font-head); font-size:.8rem; padding-top:1px}
.session-modules .soft{margin-top:14px}
.session-side{
  background:var(--surface); border-left:1px solid var(--line);
  padding:clamp(20px,2vw,26px); display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.session-side .price del{display:block; font-size:.95rem; color:var(--muted); text-decoration-thickness:1.5px}
.session-side .price b{display:block; font-family:var(--font-head); font-size:1.75rem; font-weight:800; color:var(--navy-900); line-height:1.1}
.session-side .price span{display:block; font-size:.8rem; color:var(--muted)}
.session-side .price em{
  display:inline-block; font-style:normal; margin-top:7px; font-size:.74rem; font-weight:800;
  background:var(--gold-100); color:#96690f; padding:4px 10px; border-radius:var(--r-pill);
}
.session-side small{font-size:.78rem; color:var(--muted)}
.session-side .link-sm{font-size:.83rem; font-weight:600; text-align:center}
.seatbar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.seatbar div{height:100%; background:linear-gradient(90deg,var(--blue-600),var(--cyan-400))}
@media (max-width:1000px){
  .session-card{grid-template-columns:1fr}
  .session-side{border-left:0; border-top:1px solid var(--line)}
  .session-modules ul{grid-template-columns:1fr}
}

/* ---------- Assistant d'inscription ---------- */
.wizard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.wizard-nav{display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line)}
.wizard-nav li{padding:16px 20px; font-size:.88rem; font-weight:600; color:var(--muted); border-right:1px solid var(--line-2); display:flex; gap:11px; align-items:center}
.wizard-nav li:last-child{border-right:0}
.wizard-nav li b{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--line-2); color:var(--muted); font-size:.78rem; font-family:var(--font-head);
}
.wizard-nav li.current{color:var(--navy-900); background:var(--cyan-100)}
.wizard-nav li.current b{background:linear-gradient(135deg,var(--blue-600),var(--cyan-400)); color:#fff}
.wizard-nav li.done{color:var(--ok)}
.wizard-nav li.done b{background:var(--ok); color:#fff}
.wizard-body{padding:clamp(22px,2.4vw,34px)}
.wizard-foot{display:flex; gap:12px; justify-content:flex-end; padding:18px clamp(22px,2.4vw,34px); border-top:1px solid var(--line-2); background:var(--surface)}
@media (max-width:700px){.wizard-nav{grid-template-columns:1fr}.wizard-nav li{border-right:0;border-bottom:1px solid var(--line-2)}}

.pay-options{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px}
@media (max-width:900px){.pay-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pay-option{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:16px 12px; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:.18s; background:#fff;
}
.pay-option:hover{border-color:var(--cyan-400); background:var(--cyan-100)}
.pay-option input{position:absolute; opacity:0; width:0; height:0}
.pay-option:has(input:checked){border-color:var(--blue-600); background:var(--cyan-100); box-shadow:0 0 0 3px rgba(41,171,226,.18)}
.pay-logo{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  color:#fff; font-family:var(--font-head); font-weight:800; font-size:.82rem;
}
.pay-name{font-size:.88rem; font-weight:700; color:var(--navy-900)}
.pay-coord{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px}
.pay-coord > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px}
.pay-coord small{display:block; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.pay-coord b{font-size:.98rem; color:var(--navy-900); word-break:break-word}
.pay-steps{margin:0 0 18px; padding-left:20px}
.pay-steps li{font-size:.92rem; color:var(--ink-2); margin:.45em 0}
@media (max-width:700px){.pay-coord{grid-template-columns:1fr}}

.reg-summary{background:linear-gradient(150deg,var(--navy-900),var(--blue-600)); color:#fff; border-radius:var(--r-md); padding:22px 24px}
.reg-summary h4{color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px}
.reg-summary .row{display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:.92rem}
.reg-summary .row:last-child{border-bottom:0}
.reg-summary .row span:last-child{font-weight:700; text-align:right}
.reg-total{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.28)}
.reg-total b{font-family:var(--font-head); font-size:1.9rem; font-weight:800}

.ref-badge{
  display:inline-block; font-family:var(--font-head); font-weight:800; font-size:1.5rem; letter-spacing:.06em;
  background:var(--cyan-100); color:var(--navy-900); padding:12px 22px; border-radius:var(--r-md); border:1.5px dashed var(--blue-600);
}
pre.summary-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;
  font-size:.86rem; line-height:1.65; white-space:pre-wrap; word-break:break-word; color:var(--ink-2); margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ==========================================================================
   BOUTIQUE NUMÉRIQUE — COURS VIDÉO & BIBLIOTHÈQUE
   ========================================================================== */
.course-card,.ebook-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:.22s ease; height:100%;
}
.course-card:hover,.ebook-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--cyan-300)}
.course-cover{position:relative; display:block; aspect-ratio:16/9; background:var(--navy-800) center/cover; overflow:hidden}
.course-cover > picture{position:absolute; inset:0; display:block}
.course-cover img,.detail-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.detail-cover > picture{position:absolute; inset:0; display:block; z-index:0}
.course-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,34,60,.15),rgba(4,34,60,.6))}
/* Le bouton de lecture se tient dans l'angle, pas au centre : depuis que
   l'affiche du cours porte son titre, une pastille centrée tombait en plein
   milieu du texte. */
.course-cover::before{
  content:''; position:absolute; right:14px; bottom:14px; z-index:2;
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(4,34,60,.35); transition:.22s ease;
}
.course-card:hover .course-cover::before{transform:scale(1.09); background:#fff}
.course-cover span{position:absolute; z-index:3; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill)}
.course-level{top:12px; left:12px; background:rgba(255,255,255,.92); color:var(--navy-900)}
.course-free{top:12px; right:12px; background:var(--gold-500); color:#3a2600}
.course-cover i{position:absolute; right:30px; bottom:29px; z-index:3;
  width:0; height:0; border-left:14px solid var(--blue-600); border-top:9px solid transparent; border-bottom:9px solid transparent}
.course-body{padding:20px 22px; flex:1}
.course-body h3{font-size:1.08rem; margin-bottom:6px; line-height:1.3}
.course-body h3 a{color:var(--navy-900)}
.course-body h3 a:hover{color:var(--blue-600)}
.course-body .sub{color:var(--muted); font-size:.9rem; margin:0}
.course-facts{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:16px 0 0}
.course-facts li{display:flex; align-items:center; gap:7px; font-size:.83rem; color:var(--ink-2)}
.course-facts svg{width:16px; height:16px; color:var(--blue-600)}
.course-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-top:1px solid var(--line-2); background:var(--surface)}
.course-price{font-family:var(--font-head); font-weight:800; font-size:1.22rem; color:var(--navy-900); line-height:1.1}
.course-price small{display:block; font-family:var(--font-body); font-weight:500; font-size:.74rem; color:var(--muted)}

.ebook-cover{position:relative; display:block; aspect-ratio:3/2; background:var(--navy-800) center/cover}
.ebook-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(200deg,rgba(4,34,60,.1),rgba(4,34,60,.68))}
.ebook-badge{position:absolute; z-index:2; top:12px; left:12px; background:#c8452f; color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.08em; padding:5px 10px; border-radius:var(--r-sm)}
.ebook-body{padding:20px 22px; flex:1}
.ebook-body h3{font-size:1.05rem; margin:8px 0 6px; line-height:1.3}
.ebook-body h3 a{color:var(--navy-900)}
.ebook-body .sub{color:var(--muted); font-size:.9rem; margin:0}
.ebook-meta{margin-top:14px; font-size:.82rem; color:var(--ink-2); font-weight:600}

/* ---------- Fiche produit ---------- */
.detail-cover{border-radius:var(--r-lg); aspect-ratio:16/9; background:var(--navy-800) center/cover; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.detail-cover::after{content:''; position:absolute; inset:0; background:linear-gradient(190deg,rgba(4,34,60,.2),rgba(4,34,60,.55))}
/* Même pastille d'angle sur la fiche d'un cours — jamais sur un ouvrage,
   qui n'a rien à lire au sens du lecteur vidéo. */
.detail-cover:not(.detail-cover-livre)::before{
  content:''; position:absolute; right:18px; bottom:18px; z-index:2;
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(4,34,60,.4);
}
.detail-cover:not(.detail-cover-livre) .dc-play{
  position:absolute; right:38px; bottom:37px; z-index:3; width:0; height:0;
  border-left:16px solid var(--blue-600); border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.buy-box{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:26px; position:sticky; top:100px}
.buy-box .price{font-family:var(--font-head); font-weight:800; font-size:2.3rem; color:var(--navy-900); line-height:1.05}
.buy-box ul{list-style:none; padding:0; margin:18px 0 22px}
.buy-box ul li{display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--ink-2); margin:.6em 0}
.buy-box ul svg{width:18px; height:18px; color:var(--blue-600); flex:none; margin-top:2px}

.chapter{margin-bottom:18px}
.chapter h4{display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:1rem}
.chapter h4 span{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,var(--navy-700),var(--blue-600)); color:#fff; font-size:.8rem; font-family:var(--font-head); font-weight:800;
}
.chapter h4 em{font-style:normal}
.chapter-items,.chapter ul{list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.chapter-items li,.chapter ul li{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-2); font-size:.92rem}
.chapter-items li:last-child,.chapter ul li:last-child{border-bottom:0}
.chapter-items .ci svg,.chapter .ci svg{width:17px; height:17px; color:var(--blue-600); display:block}
.chapter-items .ct,.chapter .ct{flex:1; color:var(--ink)}
.chapter-items .cm,.chapter .cm{font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums}
.chapter-items .cl svg{width:15px; height:15px; color:var(--muted)}
.chapter-items li.is-locked .ct{color:var(--muted)}
.toc{list-style:none; padding:0; margin:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.toc li{display:flex; gap:14px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line-2); font-size:.94rem}
.toc li:last-child{border-bottom:0}
.toc span{font-family:var(--font-head); font-weight:800; color:var(--cyan-400); font-size:.82rem}
.toc em{font-style:normal; color:var(--ink)}

/* ---------- Lecteur ---------- */
.player-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start}
@media (max-width:1000px){.player-grid{grid-template-columns:1fr}}
.pl-stage{background:#04223c; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; display:grid; place-items:center}
.pl-stage video,.pl-stage iframe{width:100%; height:100%; border:0; display:block; background:#000}
.pl-placeholder{display:grid; justify-items:center; gap:12px; text-align:center; color:#bcd8ec; padding:32px}
.pl-placeholder svg{width:46px; height:46px; color:var(--cyan-300)}
.pl-placeholder b{color:#fff; font-family:var(--font-head); font-size:1.1rem}
.pl-placeholder span{font-size:.88rem; max-width:46ch}
.pl-placeholder .pl-acts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.pl-placeholder .btn-ghost{color:#eaf6ff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.06)}
.pl-placeholder .btn-ghost:hover{color:#fff; border-color:var(--cyan-400); background:rgba(41,171,226,.22)}
/* Séquence sans lien vidéo : la page de garde derrière le message. On la
   voile, sinon le texte se perd dans le dessin. */
.pl-placeholder.pl-affiche{
  position:relative; align-content:center; background-size:cover; background-position:center;
}
.pl-placeholder.pl-affiche::before{content:''; position:absolute; inset:0; background:rgba(4,26,45,.74); backdrop-filter:blur(2px)}
.pl-placeholder.pl-affiche > *{position:relative; z-index:2}
.pl-side{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; max-height:640px; overflow:auto}
.pl-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:transparent;
  font:inherit; font-size:.9rem; padding:11px 12px; border-radius:var(--r-sm); cursor:pointer; color:var(--ink);
}
.pl-item:hover:not(:disabled){background:var(--cyan-100)}
.pl-item.active{background:var(--cyan-100); color:var(--navy-900); font-weight:600}
.pl-item.locked{color:var(--muted); cursor:not-allowed}
.pl-item .ci svg{width:16px; height:16px; color:var(--blue-600)}
.pl-item .ct{flex:1}
.pl-item .cm{font-size:.78rem; color:var(--muted)}
.pl-item .cl svg{width:14px; height:14px}
.gate{background:linear-gradient(150deg,var(--navy-900),var(--blue-600)); color:#fff; border-radius:var(--r-lg); padding:clamp(22px,3vw,34px)}
.gate h3{color:#fff}
.gate p{color:#cbe4f5}
.gate .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.gate input{max-width:280px}

/* ---------- Utilitaires globaux ---------- */
.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:#fff; color:var(--navy-900); padding:12px 18px; border-radius:0 0 var(--r-sm) 0; font-weight:700}
.skip-link:focus{left:0}
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:70; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--navy-800); border:1px solid var(--line);
  box-shadow:var(--shadow-md); cursor:pointer; opacity:0; pointer-events:none; transition:.25s;
}
.to-top.show{opacity:1; pointer-events:auto}
.to-top:hover{background:var(--cyan-100); color:var(--blue-600)}
.to-top svg{width:20px; height:20px}
.wa-float{
  position:fixed; right:22px; bottom:80px; z-index:70; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:#25d366; color:#fff; box-shadow:0 8px 24px rgba(37,211,102,.42); transition:.22s;
}
.wa-float:hover{transform:translateY(-3px); color:#fff}
.wa-float svg{width:27px; height:27px}
@media print{.to-top,.wa-float,.cookie-bar{display:none !important}}
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:16px 20px; display:flex; gap:16px;
  align-items:center; flex-wrap:wrap; font-size:.88rem; color:var(--ink-2); max-width:820px; margin-inline:auto;
}
.cookie-bar p{margin:0; flex:1; min-width:240px}
.legal h2{margin-top:2em}
.legal h3{margin-top:1.6em}
.legal p,.legal li{max-width:none}
.faq-item{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:12px; overflow:hidden}
.faq-item summary{cursor:pointer; list-style:none; padding:18px 22px; font-family:var(--font-head); font-weight:700; color:var(--navy-900); display:flex; gap:14px; align-items:center}
.faq-item summary::after{content:'+'; margin-left:auto; color:var(--muted); font-size:1.4rem; line-height:1}
.faq-item[open] summary::after{content:'–'}
.faq-item .a{padding:0 22px 20px; border-top:1px solid var(--line-2); color:var(--ink-2); font-size:.95rem}
.faq-item .a p:first-child{margin-top:16px}

/* ==========================================================================
   ÉVALUATION ET CERTIFICATION
   ========================================================================== */
.quiz-q{border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; margin:0 0 14px; background:#fff}
.quiz-q.missing{border-color:var(--risk); box-shadow:0 0 0 3px rgba(200,69,47,.14)}
.quiz-q legend{font-family:var(--font-head); font-weight:700; color:var(--navy-900); padding:0 0 10px; font-size:.98rem}
.quiz-q legend b{color:var(--blue-600); margin-right:6px}
.quiz-opt{display:flex; gap:11px; align-items:flex-start; padding:9px 12px; border-radius:var(--r-sm); cursor:pointer; font-size:.93rem; color:var(--ink-2)}
.quiz-opt:hover{background:var(--cyan-100)}
.quiz-opt input{width:auto; margin-top:3px; flex:none}
.quiz-opt:has(input:checked){background:var(--cyan-100); color:var(--navy-900); font-weight:600}
.score-ring{width:132px; height:132px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px}
.score-ring span{width:104px; height:104px; border-radius:50%; background:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.7rem; color:var(--navy-900)}

.cert-sheet{
  background:#fff; border:2px solid var(--blue-600); border-radius:var(--r-md);
  padding:clamp(26px,4vw,52px); text-align:center; position:relative; max-width:900px; margin:0 auto;
  box-shadow:var(--shadow-md);
}
.cert-sheet::before{content:''; position:absolute; inset:10px; border:1px solid var(--cyan-300); border-radius:8px; pointer-events:none}
.cert-head{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:24px}
.cert-head img{height:52px; width:auto}
.cert-head div{text-align:left}
.cert-head b{display:block; font-family:var(--font-head); font-size:1rem; color:var(--navy-900); letter-spacing:.04em}
.cert-head span{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cert-kicker{font-family:var(--font-head); font-weight:800; letter-spacing:.2em; font-size:.86rem; color:var(--blue-600); margin-bottom:22px}
.cert-lead{color:var(--muted); font-size:.94rem; margin:0}
.cert-name{font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem,3.2vw,2.4rem); color:var(--navy-900); margin:12px 0 14px}
.cert-subject{font-family:var(--font-head); font-weight:700; font-size:clamp(1.05rem,1.9vw,1.35rem); color:var(--blue-600); margin:10px auto 26px; max-width:34ch}
.cert-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 0 28px}
.cert-grid > div{background:var(--surface); border-radius:var(--r-sm); padding:12px}
.cert-grid small{display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.cert-grid b{font-family:var(--font-head); font-size:.94rem; color:var(--navy-900)}
.cert-foot{border-top:1px solid var(--line); padding-top:18px}
.cert-sign{font-size:.84rem; color:var(--ink-2); font-weight:600}
.cert-sign span{display:block; width:180px; height:1px; background:var(--navy-800); margin:0 auto 8px}
.cert-foot p{font-size:.76rem; color:var(--muted); margin:10px 0 0}
@media (max-width:700px){.cert-grid{grid-template-columns:repeat(2,1fr)}}
@media print{
  /* L'impression réelle passe par cert-templates.js (fenêtre A4 dédiée).
     Cette règle ne sert que de filet si l'utilisateur fait Ctrl+P sur la page. */
  body *{visibility:hidden}
  #certDoc, #certDoc *{visibility:visible}
  #certDoc{position:absolute; left:0; top:0; width:100%}
  #certDoc .ct-fit-in{transform:none !important}
  #certDoc .ct-fit{height:auto !important}
  .ct-page{box-shadow:none; page-break-inside:avoid}
}

/* --- Aperçu des modèles de certificats / attestations ------------------- */
.ct-fit{overflow:hidden; width:100%}
.ct-fit-in{width:max-content}
.ct-host{width:100%}
.tpl-picker{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.tpl-card{
  border:2px solid var(--line); border-radius:var(--r-md); background:#fff; padding:14px; cursor:pointer;
  text-align:left; font:inherit; transition:.2s ease; display:flex; flex-direction:column; gap:8px;
}
.tpl-card:hover{border-color:var(--cyan-300); transform:translateY(-2px)}
.tpl-card.active{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(41,171,226,.16)}
.tpl-card b{font-family:var(--font-head); font-size:.98rem; color:var(--navy-900)}
.tpl-card small{font-size:.8rem; color:var(--muted); line-height:1.45}
.tpl-card .tpl-thumb{
  height:76px; border-radius:var(--r-sm); border:1px solid var(--line); position:relative; overflow:hidden;
  background:#fff;
}
.tpl-card .tpl-thumb i{position:absolute; background:var(--cyan-300); border-radius:2px; display:block}
.tpl-card .tpl-orient{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-600); font-weight:700}
.roster-table{width:100%; border-collapse:collapse; font-size:.88rem}
.roster-table th{text-align:left; background:var(--surface); padding:8px 10px; border:1px solid var(--line); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.roster-table td{padding:4px 6px; border:1px solid var(--line); vertical-align:middle}
.roster-table td input, .roster-table td select{width:100%; border:0; background:transparent; padding:6px 4px; font:inherit; color:var(--ink)}
.roster-table td input:focus{outline:2px solid var(--cyan-300); border-radius:4px}
.roster-table tr.is-sel{background:var(--cyan-100)}
.roster-del{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:4px 8px}
.roster-del:hover{color:#c0392b}
.reg-row.revoked td{opacity:.55; text-decoration:line-through}
.chk{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--ink-2); cursor:pointer; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff}
.chk:hover{border-color:var(--cyan-300)}
.chk input{width:17px; height:17px; accent-color:var(--blue-600); flex:none; margin:0}


/* ==========================================================================
   CONSOLE MULTI-SITES (AQUAFLEET)
   ========================================================================== */
.site-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; transition:.22s ease;
}
.site-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--cyan-300)}
.site-card.is-current{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(41,171,226,.16)}
.site-head{display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:3px solid var(--line)}
.site-head img{width:46px; height:46px; object-fit:contain; border-radius:10px; background:#fff; flex:none}
.site-head h3{margin:0; font-size:1.05rem; line-height:1.25}
.site-head p{margin:2px 0 0; font-size:.84rem; color:var(--muted)}
.site-head .pill{margin-left:auto; flex:none}
.site-note{font-size:.9rem; color:var(--ink-2); margin:0}
.site-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0}
.site-stats div{background:var(--surface); border-radius:var(--r-sm); padding:10px 12px; text-align:center}
.site-stats dt{font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.site-stats dd{margin:0; font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--navy-900)}
.site-meta{display:grid; grid-template-columns:auto auto; gap:4px 14px; font-size:.82rem; color:var(--muted); align-items:center}
.site-meta b{color:var(--ink); font-family:var(--font-head)}
.site-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.site-actions .btn{flex:1; min-width:150px}

/* --- Progression de l'impétrant dans le lecteur -------------------------- */
.pl-progress{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; margin-bottom:16px}
.pl-progress .top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px}
.pl-progress .top strong{font-family:var(--font-head); font-size:.95rem; color:var(--navy-900)}
.pl-progress .top b{font-family:var(--font-head); font-size:1.3rem; color:var(--blue-600)}
.pl-progress .track{height:9px; border-radius:99px; background:var(--surface); overflow:hidden}
.pl-progress .track i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue-600),var(--cyan-400)); transition:width .4s ease}
.pl-progress small{display:block; margin-top:7px; font-size:.82rem; color:var(--muted)}
.pl-resume{display:inline-block; margin-left:10px; font-size:.76rem; font-weight:600; color:var(--blue-600);
  background:var(--cyan-100); border-radius:99px; padding:2px 10px; vertical-align:middle}
.pl-side .chapter h4{display:flex; align-items:center; gap:9px}
.ch-pct{margin-left:auto; font-size:.74rem; font-weight:700; color:var(--muted); background:var(--surface);
  border-radius:99px; padding:2px 9px; white-space:nowrap}
.ch-pct.full{color:#146c4b; background:#dcf3e8}
.pl-item.is-done .ct{color:var(--muted)}
.pl-item.is-done .ci svg{color:#1f9d6b}
.pl-item.is-done::after{content:'✓'; margin-left:6px; color:#1f9d6b; font-weight:800; font-size:.9rem}
.learner-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; margin-bottom:16px}
.learner-box .row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.learner-box .field{margin:0; flex:1; min-width:170px}
.learner-tag{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-2)}
.learner-tag b{color:var(--navy-900)}
.learner-tag .dot{width:8px; height:8px; border-radius:50%; background:#1f9d6b; flex:none}
.learner-tag .dot.off{background:var(--muted)}
/* --- Éditeur de contenu (admin) ----------------------------------------- */
.tree{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; max-height:640px; overflow:auto}
.tree-day{border-bottom:1px solid var(--line)}
.tree-day > button{width:100%; display:flex; align-items:center; gap:10px; border:0; background:transparent;
  font:inherit; font-weight:600; color:var(--navy-900); padding:11px 14px; cursor:pointer; text-align:left}
.tree-day > button:hover{background:var(--cyan-100)}
.tree-day > button .n{width:26px; height:26px; border-radius:8px; background:var(--navy-900); color:#fff;
  display:grid; place-items:center; font-size:.78rem; flex:none}
.tree-day > button .cnt{margin-left:auto; font-size:.76rem; color:var(--muted)}
.tree-seq{list-style:none; margin:0; padding:0 0 8px}
.tree-seq li{display:flex; align-items:center; gap:10px; padding:6px 14px 6px 50px; font-size:.88rem}
.tree-seq li:hover{background:var(--surface)}
.tree-seq li.sel{background:var(--cyan-100)}
.tree-seq li button{border:0; background:transparent; font:inherit; color:var(--ink); cursor:pointer; text-align:left; flex:1}
.tree-seq li .mn{font-size:.78rem; color:var(--muted); white-space:nowrap}
.seq-thumb{width:100%; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); aspect-ratio:16/9; object-fit:cover}

/* ---------- Porte de l'administration (Ctrl+1) ---------- */
[data-admin-only]{display:none !important}
body.admin-visible [data-admin-only]{display:revert !important}
body.admin-visible [data-admin-only].seg-btn{display:inline-flex !important}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface)}
.seg-btn{border:0; background:transparent; font:inherit; font-size:.86rem; font-weight:600; color:var(--muted); padding:9px 18px; cursor:pointer; align-items:center; gap:8px}
.seg-btn.on{background:var(--navy-900); color:#fff}
.seg-btn:not(.on):hover{color:var(--ink)}
/* Un filtre en pastilles ne se plie pas. Sur un écran de 390 px, « Tous les
   niveaux » se cassait sur trois lignes à l'intérieur de sa pastille : le
   libellé n'était plus lisible et la barre faisait trois fois sa hauteur.
   Les libellés restent donc d'un seul tenant et c'est la barre qui glisse
   latéralement, comme un onglet de téléphone. */
.seg button, .seg-btn{white-space:nowrap; flex:none}
@media (max-width:640px){
  .seg{max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  .seg button{padding:6px 11px; font-size:.78rem}
  .seg-btn{padding:9px 14px; font-size:.82rem}
}

/* ---------- Ouvrage présenté en volume ----------
   Sur la fiche produit, le livre est une image détourée posée sur un fond
   aux couleurs du tome : pas de cadrage carré, pas de voile assombrissant,
   et un léger soulèvement au survol pour qu'on ait envie de le prendre. */
.detail-cover-livre{
  --fond-livre:radial-gradient(120% 100% at 30% 0%,#0d3358 0%,#04223c 62%,#03192c 100%);
  aspect-ratio:auto; min-height:clamp(300px,38vw,460px);
  background-color:#04223c; background-image:var(--fond-livre);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  box-shadow:none; border:1px solid rgba(255,255,255,.06);
  transition:transform .35s cubic-bezier(.2,.7,.3,1)
}
.detail-cover-livre::after{content:none}
.detail-cover-livre:hover{transform:translateY(-6px) scale(1.012)}

/* ---------- Bandeau de collection ---------- */
.bandeau-livres{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  display:block; line-height:0
}
.bandeau-livres img{width:100%; height:auto; display:block}
@media (max-width:640px){
  .detail-cover-livre{min-height:260px; background-size:88% auto}
}

/* ==========================================================================
   OUTILS DE CALCUL
   --------------------------------------------------------------------------
   Une colonne de saisie à gauche, le dessin et les résultats à droite.
   Sur téléphone les deux se replient l'une sous l'autre, et le graphe
   passe en premier : sur un écran étroit, on veut voir l'effet avant de
   voir la liste des chiffres.
   ========================================================================== */
.section-tight{padding-top:34px}

.outil-tabs{
  display:flex; gap:6px; overflow-x:auto; padding:6px; margin-bottom:26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); scrollbar-width:thin
}
.outil-tabs button{
  flex:1 0 auto; display:inline-flex; align-items:center; gap:9px;
  border:0; background:transparent; font:inherit; font-size:.9rem;
  font-weight:650; color:var(--muted); padding:12px 18px; cursor:pointer;
  border-radius:calc(var(--r-lg) - 6px); white-space:nowrap;
  transition:background .18s,color .18s
}
.outil-tabs button .ico{width:19px; height:19px; flex:none}
.outil-tabs button .ico svg{width:100%; height:100%; stroke-width:1.9}
.outil-tabs button:hover{color:var(--ink)}
.outil-tabs button.active{background:var(--navy-900); color:#fff; box-shadow:var(--shadow-sm)}

.outil-grid{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:34px; align-items:start}
.outil-form h2{font-size:1.42rem; margin:0 0 10px}
.outil-intro{color:var(--muted); font-size:.92rem; line-height:1.62; margin-bottom:20px}

.champs{display:grid; gap:14px}
.ch label{display:block; font-size:.84rem; font-weight:600; color:var(--ink-2); margin-bottom:5px}
.ch-in{display:flex; align-items:center; gap:9px}
.ch-in input[type=number],.ch-in select{
  flex:1; min-width:0; padding:10px 12px; font:inherit; font-size:.95rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  color:var(--ink)
}
.ch-in input[type=number]:focus,.ch-in select:focus{
  outline:0; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(43,142,212,.16)
}
.ch-u{font-size:.82rem; color:var(--muted); font-weight:600; min-width:44px}
.ch-aide{display:block; margin-top:5px; font-size:.78rem; color:var(--muted); line-height:1.5}
.ch-range input[type=range]{flex:1; min-width:0; accent-color:var(--blue-600)}
.ch-out{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.92rem;
  color:var(--navy-800); min-width:38px; text-align:right
}
.ch-check{margin-top:2px}
.switch{display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  font-size:.88rem; font-weight:600; color:var(--ink-2)}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch-piste{
  width:42px; height:24px; border-radius:999px; background:#c6d3de;
  position:relative; transition:background .2s; flex:none
}
.switch-piste::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25)
}
.switch input:checked + .switch-piste{background:var(--blue-600)}
.switch input:checked + .switch-piste::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-piste{box-shadow:0 0 0 3px rgba(43,142,212,.3)}

.outil-actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px}
.outil-renvoi{
  display:flex; gap:12px; margin-top:20px; padding:15px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); font-size:.86rem; line-height:1.55
}
.outil-renvoi svg{width:22px; height:22px; flex:none; stroke:var(--blue-600);
  stroke-width:1.7; fill:none}
.outil-renvoi span{display:block; color:var(--muted)}
.outil-renvoi a{font-weight:700; color:var(--blue-600)}

.plot-box{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px; margin-bottom:18px;
  box-shadow:var(--shadow-sm)
}
.plot{width:100%; height:auto; display:block; font-family:var(--font-body)}
.plot .pt:hover circle:last-child{stroke:var(--gold-500); r:6.5}

.res-box{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:6px 18px 16px; box-shadow:var(--shadow-sm)
}
.res-titre{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:800; margin:18px 0 4px;
  padding-bottom:7px; border-bottom:1px solid var(--line-2)
}
.res-titre:first-child{margin-top:12px}
.res-l{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-bottom:1px solid var(--line-2)
}
.res-l:last-child{border-bottom:0}
.res-k{flex:1; min-width:170px; font-size:.87rem; color:var(--ink-2)}
.res-v{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.98rem;
  color:var(--navy-900); white-space:nowrap
}
.res-fort .res-v{font-size:1.22rem; color:var(--blue-600)}
.res-fort{background:linear-gradient(90deg,rgba(43,142,212,.06),transparent);
  margin:0 -18px; padding-left:18px; padding-right:18px}
.res-n{font-size:.78rem; color:var(--muted); flex-basis:100%}
.pill-ok{background:#e6f6ef; color:#137a51}
.pill-warn{background:#fdf1de; color:#9a5c10}
.pill-risk{background:#fbe9e6; color:#a5331f}

.avert{
  display:flex; gap:16px; margin-top:44px; padding:24px 26px;
  background:var(--gold-100); border:1px solid #f0dcb0;
  border-radius:var(--r-lg)
}
.avert > svg{width:26px; height:26px; flex:none; stroke:#b07a12; stroke-width:1.8; fill:none}
.avert h3{margin:0 0 8px; font-size:1.08rem}
.avert p{font-size:.9rem; line-height:1.65; margin:0 0 10px; color:#5c4a29}

@media (max-width:900px){
  .outil-grid{grid-template-columns:1fr; gap:24px}
  .outil-res{order:-1}
  .res-k{min-width:130px}
}

/* ==========================================================================
   PAGES INTERACTIVES — liseuse, comparateur, diagnostic, recherche
   ========================================================================== */
.container-etroit{max-width:820px}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0
}

/* ---------- Liseuse ----------
   Les vignettes à gauche, la page au centre. Sur téléphone les vignettes
   passent en bandeau horizontal : on garde le repère de progression sans
   sacrifier la largeur de lecture. */
.ls{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm)}
.ls-tete{display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; padding:20px 24px; border-bottom:1px solid var(--line);
  background:var(--surface)}
.ls-ident h2{margin:0; font-size:1.18rem; line-height:1.3}
.ls-ident p{margin:4px 0 0; font-size:.86rem; color:var(--muted); max-width:52ch}
.ls-outils{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ls-outils select{padding:8px 11px; font:inherit; font-size:.85rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  max-width:250px}
.ls-corps{display:grid; grid-template-columns:112px 1fr; gap:0}
.ls-vignettes{display:flex; flex-direction:column; gap:8px; padding:14px 10px;
  max-height:74vh; overflow:auto; background:var(--surface);
  border-right:1px solid var(--line); scrollbar-width:thin}
.ls-vign{position:relative; border:2px solid transparent; background:none;
  padding:0; cursor:pointer; border-radius:6px; line-height:0; flex:none}
.ls-vign img{width:100%; height:auto; border-radius:4px; box-shadow:var(--shadow-sm);
  background:#fff}
.ls-vign span{position:absolute; right:4px; bottom:4px; font-size:.62rem;
  font-weight:800; background:rgba(4,34,60,.82); color:#fff; border-radius:4px;
  padding:1px 5px; line-height:1.5}
.ls-vign:hover{border-color:var(--cyan-300)}
.ls-vign.on{border-color:var(--blue-600)}
.ls-scene{padding:20px 24px 26px; min-width:0}
.ls-cadre{background:var(--surface); border-radius:var(--r-md); padding:14px;
  display:flex; justify-content:center; max-height:78vh; overflow:auto}
.ls-cadre img{width:100%; max-width:820px; height:auto; border-radius:4px;
  box-shadow:0 6px 26px rgba(6,26,44,.14); background:#fff;
  transition:width .2s}
.ls-cadre.ls-zoome{justify-content:flex-start; cursor:grab}
.ls-nav{display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:16px; flex-wrap:wrap}
.ls-pos{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-2);
  font-size:.9rem; min-width:70px; text-align:center}
.ls-progres{height:4px; background:var(--line-2); border-radius:999px;
  margin-top:14px; overflow:hidden}
.ls-progres i{display:block; height:100%; background:var(--blue-600);
  transition:width .3s}
.ls-fin{margin-top:24px; padding:24px 26px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#04223c,#0a3f6b); color:#fff}
.ls-fin h3{margin:0 0 8px; color:#fff; font-size:1.16rem}
.ls-fin p{color:#c4d8e8; font-size:.92rem; margin:0 0 16px}
.ls-fin-actions{display:flex; gap:10px; flex-wrap:wrap}
.ls-note{margin:0; padding:14px 24px; border-top:1px solid var(--line);
  color:var(--muted); background:var(--surface)}
@media (max-width:820px){
  .ls-corps{grid-template-columns:1fr}
  .ls-vignettes{flex-direction:row; max-height:none; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--line)}
  .ls-vign{width:58px}
  .ls-scene{padding:16px}
}

/* ---------- Comparateur ---------- */
.cp-barre{display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  padding:16px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); margin-bottom:22px}
.cp-choix{display:flex; gap:8px; flex-wrap:wrap; flex:1}
.cp-pion{display:flex; align-items:center; gap:9px; padding:7px 12px 7px 8px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  cursor:pointer; font-size:.82rem; font-weight:600; max-width:230px;
  transition:border-color .15s,box-shadow .15s}
.cp-pion img{width:26px; height:37px; object-fit:cover; border-radius:3px; flex:none}
.cp-pion span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cp-pion:has(input:checked){border-color:var(--blue-600);
  box-shadow:0 0 0 2px rgba(43,142,212,.16)}
.cp-pion:has(input:disabled){opacity:.45; cursor:not-allowed}
.cp-pion input{accent-color:var(--blue-600)}
.cp-compte{font-size:.82rem; color:var(--muted)}
.cp-compte b{font-size:1.1rem; color:var(--navy-900)}
.cp-cadre{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--white)}
.cp-table{width:100%; border-collapse:collapse; min-width:620px}
.cp-table thead th{padding:18px 14px; vertical-align:bottom; text-align:left;
  border-bottom:1px solid var(--line); background:var(--surface)}
.cp-table thead th a{display:block; text-align:center}
.cp-table thead img{width:auto; height:120px; border-radius:4px;
  box-shadow:var(--shadow-sm); margin:0 auto 10px; display:block}
.cp-table thead span{display:block; font-size:.86rem; font-weight:700;
  line-height:1.35; color:var(--ink)}
.cp-table tbody th{text-align:left; font-size:.84rem; font-weight:600;
  color:var(--ink-2); padding:11px 14px; width:210px;
  border-bottom:1px solid var(--line-2); vertical-align:top}
.cp-table td{padding:11px 14px; font-size:.87rem; color:var(--ink);
  border-bottom:1px solid var(--line-2); vertical-align:top; text-align:center}
.cp-groupe th{background:var(--navy-900) !important; color:#fff !important;
  font-size:.72rem !important; letter-spacing:.1em; text-transform:uppercase;
  width:auto !important; padding:9px 14px !important}
.cp-pareil{opacity:.62}
.cp-mieux{background:#eaf7f1; font-weight:700; color:#137a51; border-radius:4px}
.cp-prix{font-size:1.14rem; color:var(--blue-600)}
.cp-toc{margin:0; padding-left:18px; text-align:left; font-size:.8rem;
  line-height:1.6; color:var(--ink-2)}
.cp-lien{font-weight:700; color:var(--blue-600)}
.cp-non{color:var(--muted)}
.cp-switch{font-size:.84rem}

/* ---------- Diagnostic ---------- */
.dg-progres{height:5px; background:var(--line-2); border-radius:999px; overflow:hidden}
.dg-progres i{display:block; height:100%; background:var(--blue-600);
  transition:width .35s cubic-bezier(.2,.7,.3,1)}
.dg-compte{text-align:right; font-size:.78rem; color:var(--muted);
  margin:8px 0 22px; font-weight:700; letter-spacing:.05em}
.dg-form h2{font-size:1.42rem; margin:0 0 6px; line-height:1.3}
.dg-aide{color:var(--muted); font-size:.86rem; margin:0 0 20px}
.dg-opts{display:grid; gap:10px}
.dg-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:15px 18px; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s}
.dg-coche{width:20px; height:20px; border-radius:50%; border:2px solid #c6d3de;
  flex:none; position:relative; transition:border-color .15s}
.dg-opt:hover{border-color:var(--cyan-300); background:#fbfdff}
.dg-opt.on{border-color:var(--blue-600); background:#f2f9fe}
.dg-opt.on .dg-coche{border-color:var(--blue-600)}
.dg-opt.on .dg-coche::after{content:''; position:absolute; inset:3px;
  border-radius:50%; background:var(--blue-600)}
.dg-nav{display:flex; justify-content:space-between; gap:12px; margin-top:26px}
.dg-sortie h2{font-size:1.6rem; margin:0 0 20px}
.dg-bloc{margin-bottom:30px}
.dg-bloc h3{font-size:1.02rem; margin:0 0 13px; color:var(--navy-800)}
.dg-cartes{display:grid; gap:12px}
.dg-carte{display:flex; gap:15px; padding:15px 17px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); align-items:flex-start;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.dg-carte:hover{border-color:var(--blue-600); transform:translateY(-2px);
  box-shadow:var(--shadow-sm)}
.dg-carte img{border-radius:4px; box-shadow:var(--shadow-sm); flex:none}
.dg-carte b{display:block; font-size:.98rem; line-height:1.35; color:var(--ink)}
.dg-carte span{display:block; font-size:.83rem; color:var(--muted); margin-top:4px}
.dg-carte small{display:block; font-size:.75rem; color:var(--muted); margin-top:5px}
.dg-carte-outil{flex-direction:column; gap:4px; background:linear-gradient(135deg,#f2f9fe,#fff);
  border-color:#c8e4f6}
.dg-jauge{height:5px; background:var(--line-2); border-radius:999px; margin-top:9px;
  overflow:hidden; max-width:220px}
.dg-jauge i{display:block; height:100%; background:var(--gold-500)}
.dg-serv{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.dg-serv li{display:flex; align-items:center; gap:14px; padding:11px 15px;
  background:var(--surface); border-radius:var(--r-sm); font-size:.92rem}
.dg-serv a{font-weight:700; flex:1}
.dg-serv i{height:6px; background:var(--blue-600); border-radius:999px;
  flex:none}
.dg-rappel{background:var(--surface); border-radius:var(--r-md); padding:20px 22px}
.dg-rappel dl{margin:0; font-size:.86rem}
.dg-rappel dt{font-weight:700; color:var(--ink-2); margin-top:11px}
.dg-rappel dt:first-child{margin-top:0}
.dg-rappel dd{margin:3px 0 0; color:var(--muted)}
.dg-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
@media print{
  .site-header,.site-footer,.dg-actions,.wa-float,.to-top,.dg-progres,
  .dg-compte,.page-head{display:none !important}
}

/* ---------- Recherche instantanée ---------- */
/* Le raccourci tient sur une seule ligne, quelle que soit la place restante.
   Sans nowrap ni flex:none, la barre serrée cassait « Ctrl K » en deux et le
   bouton devenait un carré haut de deux lignes au milieu de commandes qui,
   elles, en font une. */
.rk-btn{display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white);
  color:var(--muted); cursor:pointer; font:inherit; font-size:.8rem;
  white-space:nowrap; flex:none;
  transition:border-color .15s,color .15s}
.rk-btn svg{width:16px; height:16px; flex:none}
.rk-btn:hover{border-color:var(--cyan-300); color:var(--ink)}
.rk-btn-k{font-weight:700; letter-spacing:.03em; font-size:.72rem; white-space:nowrap}
@media (max-width:1280px){.rk-btn-k{display:none}}
.rk{position:fixed; inset:0; z-index:1200}
.rk-voile{position:absolute; inset:0; background:rgba(4,20,36,.55);
  backdrop-filter:blur(3px)}
.rk-panneau{position:relative; max-width:640px; margin:10vh auto 0;
  background:var(--white); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 26px 70px rgba(4,20,36,.4); animation:rkIn .18s ease-out}
@keyframes rkIn{from{opacity:0; transform:translateY(-10px) scale(.99)}}
.rk-tete{display:flex; align-items:center; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--line)}
.rk-tete svg{width:19px; height:19px; color:var(--muted); flex:none}
.rk-tete input{flex:1; border:0; outline:0; font:inherit; font-size:1.02rem;
  color:var(--ink); background:none}
.rk-liste{max-height:min(58vh,460px); overflow:auto; padding:8px}
.rk-r{display:flex; align-items:center; gap:13px; padding:11px 13px;
  border-radius:var(--r-sm); color:var(--ink)}
.rk-r.on{background:var(--surface)}
.rk-ico{width:20px; height:20px; color:var(--blue-600); flex:none}
.rk-ico svg{width:100%; height:100%}
.rk-txt{flex:1; min-width:0}
.rk-txt b{display:block; font-size:.93rem; font-weight:650; line-height:1.35}
.rk-txt small{display:block; font-size:.78rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-txt mark{background:#fdf0d2; color:inherit; border-radius:2px; padding:0 1px}
.rk-kind{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:800; flex:none}
.rk-vide{padding:28px 20px; text-align:center; color:var(--muted); font-size:.9rem}
.rk-pied{display:flex; gap:20px; padding:11px 18px; border-top:1px solid var(--line);
  background:var(--surface); font-size:.74rem; color:var(--muted)}
.rk-pied kbd,.rk-tete kbd{font-family:inherit; font-size:.7rem; font-weight:700;
  background:var(--white); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:4px; padding:1px 5px; margin-right:2px}
@media (max-width:640px){
  .rk-panneau{margin:0; max-width:none; height:100%; border-radius:0}
  .rk-liste{max-height:calc(100vh - 118px)}
}

/* ==========================================================================
   THÈME SOMBRE ET LECTURE
   --------------------------------------------------------------------------
   Le thème sombre ne remplace pas les couleurs une à une : il redéfinit les
   variables de base, et tout le reste suit. Une règle ajoutée demain héritera
   du bon fond sans qu'on y pense.
   ========================================================================== */
.reveal.vu{opacity:1; transform:none}

.theme-btn{display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--white); color:var(--muted);
  cursor:pointer; transition:border-color .15s,color .15s}
.theme-btn svg{width:17px; height:17px}
.theme-btn:hover{border-color:var(--cyan-300); color:var(--ink)}
.theme-btn .th-lune{display:none}
[data-theme="sombre"] .theme-btn .th-lune{display:block}
[data-theme="sombre"] .theme-btn .th-soleil{display:none}

.lecture{position:fixed; top:0; left:0; right:0; height:3px; z-index:1100;
  background:linear-gradient(90deg,var(--cyan-400),var(--blue-600));
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none}

[data-theme="sombre"]{
  --navy-900:#0a2036; --navy-800:#0d2b47; --navy-700:#12385c;
  --ink:#e8f0f7; --ink-2:#bccfdf; --muted:#8ba4b9;
  --line:#1d3550; --line-2:#152a41;
  --surface:#0e2136; --white:#0a1a2b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.5);
  color-scheme:dark
}
[data-theme="sombre"] body{background:#071624; color:var(--ink)}
[data-theme="sombre"] .site-header{background:rgba(7,22,36,.92);
  border-bottom-color:var(--line)}
[data-theme="sombre"] img:not([src*=".svg"]){filter:brightness(.94)}
[data-theme="sombre"] .plot{background:transparent}
[data-theme="sombre"] .cp-mieux{background:#0e3a2a; color:#5fd6a5}
[data-theme="sombre"] .pill-ok{background:#0e3a2a; color:#5fd6a5}
[data-theme="sombre"] .pill-warn{background:#3d2c10; color:#f0bd6a}
[data-theme="sombre"] .pill-risk{background:#3d1a15; color:#f08a76}
[data-theme="sombre"] .avert{background:#2b2210; border-color:#4a3c1c}
[data-theme="sombre"] .avert p{color:#d8c9a6}
[data-theme="sombre"] .rk-txt mark{background:#4a3c1c; color:#f5e4bd}
[data-theme="sombre"] .dg-opt.on{background:#0f2d45}
[data-theme="sombre"] .dg-carte-outil{background:linear-gradient(135deg,#0f2d45,#0a1a2b);
  border-color:#1d4666}
[data-theme="sombre"] .ls-cadre img,[data-theme="sombre"] .ls-vign img{
  filter:none}
@media (prefers-reduced-motion:reduce){
  .lecture{display:none}
  .reveal{opacity:1 !important; transform:none !important}
}

/* ---------- Couleurs des graphes ----------
   Les dessins techniques puisent ici plutôt que dans des valeurs écrites en
   dur : le thème sombre n'a alors rien à rattraper figure par figure. */
/* Huit de ces noms étaient appelés par les scripts de dessin sans avoir
   jamais été définis. Une propriété personnalisée inconnue rend l'attribut
   invalide, et SVG retombe alors sur sa valeur initiale : noir pour un
   remplissage, rien pour un contour. Les figures des calculateurs
   sortaient donc en aplats noirs là où elles devaient montrer un terrain,
   une lame d'eau ou un repère de couleur. */
:root{
  --pl-grille:#e6edf3; --pl-grille-f:#c9d6e2; --pl-muted:#5b7085;
  --pl-texte:#33475b; --pl-pt:#04223c; --pl-faible:#9fb3c4;
  --pl-fond:#ffffff; --pl-ciel-1:#eef5fa; --pl-ciel-2:#ffffff;
  --pl-axe:#7d99ae; --pl-navy:#04223c; --pl-bleu:#1b75bc; --pl-or:#a8761c;
  --pl-vert:#12724c; --pl-rouge:#b8341f;
  --pl-eau:#8fd3f0; --pl-terrain:#d2dfe9; --pl-roche:#aec3d5
}
[data-theme="sombre"]{
  --pl-grille:#173049; --pl-grille-f:#224466;
  --pl-muted:#8ba4b9; --pl-texte:#bccfdf; --pl-pt:#63c8ef; --pl-faible:#4d6c88;
  --pl-fond:#0a1a2b; --pl-ciel-1:#0d2436; --pl-ciel-2:#0a1a2b;
  --pl-axe:#4d6c88; --pl-navy:#bccfdf; --pl-bleu:#63c8ef; --pl-or:#e2a230;
  --pl-vert:#4ade80; --pl-rouge:#f87171;
  --pl-eau:#2c6d92; --pl-terrain:#16293b; --pl-roche:#1d3a52
}
[data-theme="sombre"] h1,[data-theme="sombre"] h2,[data-theme="sombre"] h3,
[data-theme="sombre"] h4,[data-theme="sombre"] h5,
[data-theme="sombre"] .kpi .value,
[data-theme="sombre"] .chain b,[data-theme="sombre"] .res-v{color:var(--ink)}
[data-theme="sombre"] .res-fort .res-v,[data-theme="sombre"] .cp-prix{color:var(--cyan-300)}
[data-theme="sombre"] .btn-light{background:#12283e; color:var(--ink)}
[data-theme="sombre"] .btn-light:hover{background:#183553; color:#fff}
[data-theme="sombre"] .btn-ghost{color:var(--ink-2); border-color:var(--line)}
[data-theme="sombre"] input,[data-theme="sombre"] select,
[data-theme="sombre"] textarea{background:#0d2032; color:var(--ink);
  border-color:var(--line)}
[data-theme="sombre"] .ls-cadre img{box-shadow:0 6px 26px rgba(0,0,0,.55)}

/* ---------- Portes d'entrée de la bibliothèque ----------
   Quatre façons d'aborder les ouvrages autrement que par le prix : lire,
   comparer, se faire orienter, ou essayer la méthode d'abord. */
.portes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin-top:34px}
.porte{display:block; padding:20px 22px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.porte:hover{border-color:var(--blue-600); transform:translateY(-3px);
  box-shadow:var(--shadow-md)}
.porte b{display:block; font-family:var(--font-head); font-size:1rem;
  color:var(--ink); margin-bottom:6px; line-height:1.3}
.porte span{display:block; font-size:.85rem; color:var(--muted); line-height:1.55}
.porte-outil{background:linear-gradient(135deg,#f2f9fe,var(--white));
  border-color:#c8e4f6}
[data-theme="sombre"] .porte-outil{background:linear-gradient(135deg,#0f2d45,#0a1a2b);
  border-color:#1d4666}

/* ==========================================================================
   FACTURE ET RETOUR DE PAIEMENT
   --------------------------------------------------------------------------
   La facture doit tenir sur une page A4 à l'impression, sans en-tête de
   site ni bouton. Tout ce qui n'est pas le document disparaît alors.
   ========================================================================== */
.fac-actions{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap}
.fac{background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-md); padding:clamp(24px,4vw,44px); box-shadow:var(--shadow-sm)}
.fac-tete{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:2px solid var(--navy-900)}
.fac-emetteur img{display:block; margin-bottom:12px}
.fac-legal{font-size:.78rem; line-height:1.65; color:var(--ink-2)}
.fac-legal b{display:block; font-size:.92rem; color:var(--ink); margin-bottom:3px}
.fac-manque{color:var(--risk); font-style:italic}
.fac-ident{text-align:right}
.fac-type{font-family:var(--font-head); font-size:1.5rem; font-weight:800;
  color:var(--navy-900); letter-spacing:-.01em}
.fac-numero{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.02rem;
  font-weight:700; color:var(--blue-600); margin-top:4px}
.fac-tampon{display:inline-block; margin-top:10px; font-size:.68rem; font-weight:800;
  letter-spacing:.11em; padding:5px 11px; border-radius:5px; border:2px solid}
.fac-paye{color:#137a51; border-color:#137a51; background:#eaf7f1}
.fac-attente{color:#9a5c10; border-color:#c98a2a; background:#fdf4e6}
.fac-parties{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:24px 0 22px}
.fac-parties h3{font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 9px}
.fac-parties b{font-size:.98rem}
.fac-parties div div{font-size:.85rem; color:var(--ink-2); line-height:1.6}
.fac-l{display:flex; justify-content:space-between; gap:14px; font-size:.85rem;
  padding:3px 0; color:var(--ink-2)}
.fac-l b{color:var(--ink); text-align:right}
.fac-fort b{font-size:.98rem; color:var(--blue-600)}
.fac-table{width:100%; border-collapse:collapse; margin:6px 0 22px}
.fac-table th{font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:9px 10px;
  border-bottom:1px solid var(--line); background:var(--surface)}
.fac-table td{padding:14px 10px; border-bottom:1px solid var(--line-2);
  font-size:.9rem; vertical-align:top}
.fac-table .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.fac-desc{font-size:.78rem; color:var(--muted); margin-top:4px; line-height:1.55}
.fac-remise td{color:var(--ok)}
.fac-bas{display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:start}
.fac-reglement h3{font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px}
.fac-reglement p{font-size:.85rem; color:var(--ink-2); margin:0 0 12px; line-height:1.6}
.fac-totaux{background:var(--surface); border-radius:var(--r-sm); padding:16px 18px}
.fac-pied{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--muted); line-height:1.6}
@media (max-width:720px){
  .fac-parties,.fac-bas{grid-template-columns:1fr}
  .fac-ident{text-align:left}
}
@media print{
  body{background:#fff}
  .site-header,.site-footer,.fac-actions,.wa-float,.to-top,.lecture,
  .rk,.theme-btn{display:none !important}
  .section{padding:0 !important}
  .fac{border:0; box-shadow:none; padding:0}
  .fac-table th{background:transparent}
}

/* ---------- Retour de paiement ---------- */
.mc-etat{display:flex; gap:16px; align-items:center; padding:20px 22px;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--white)}
.mc-etat b{display:block; font-family:var(--font-head); font-size:1.05rem}
.mc-etat span{display:block; font-size:.87rem; color:var(--muted); margin-top:3px}
.mc-rond{width:22px; height:22px; border-radius:50%; flex:none;
  border:3px solid var(--line); border-top-color:var(--blue-600);
  animation:mcTourne 1s linear infinite}
@keyframes mcTourne{to{transform:rotate(360deg)}}
.mc-ok{border-color:#9fdcc2; background:#eaf7f1}
.mc-ok .mc-rond{border-color:#137a51; border-top-color:#137a51; animation:none;
  background:#137a51; box-shadow:inset 0 0 0 3px #eaf7f1}
.mc-non{border-color:#f0c2b8; background:#fbe9e6}
.mc-non .mc-rond{border-color:#a5331f; border-top-color:#a5331f; animation:none}
.mc-code{margin-top:20px; padding:24px 26px; border-radius:var(--r-md);
  background:linear-gradient(135deg,#04223c,#0a3f6b); color:#fff; text-align:center}
.mc-code h3{color:#fff; margin:0 0 12px; font-size:1.02rem}
.mc-code p{color:#c4d8e8; font-size:.88rem; margin:12px 0 16px}
.mc-valeur{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.7rem;
  font-weight:800; letter-spacing:.06em}
.mc-valeur-texte{font-family:var(--font-body); font-size:1.05rem; font-weight:700;
  letter-spacing:0; color:#8fc4e6}
.mc-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.mc-recap{margin-top:20px; background:var(--surface); border-radius:var(--r-md);
  padding:16px 20px}
.mc-recap div{display:flex; justify-content:space-between; gap:14px;
  font-size:.87rem; padding:6px 0; border-bottom:1px solid var(--line-2)}
.mc-recap div:last-child{border-bottom:0}
.mc-recap span{color:var(--muted)}
.mc-aide{margin-top:30px; padding:22px 24px; background:var(--surface);
  border-radius:var(--r-md)}
.mc-aide h3{font-size:1rem; margin:0 0 8px}
.mc-aide p{font-size:.88rem; color:var(--ink-2); line-height:1.65; margin:0 0 14px}

/* ---------- Audience ---------- */
.au-familles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.au-bloc h3{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; padding-bottom:7px;
  border-bottom:1px solid var(--line-2)}
.au-l{display:grid; grid-template-columns:1fr 90px auto; gap:10px;
  align-items:center; padding:5px 0; font-size:.82rem}
.au-l span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.au-l i{height:6px; border-radius:999px; background:var(--blue-600); display:block}
.au-l b{font-variant-numeric:tabular-nums; text-align:right; min-width:52px}
.au-l small{color:var(--muted); font-weight:600}

/* ==========================================================================
   NAVIGATION AU CLAVIER
   --------------------------------------------------------------------------
   Un contour de focus visible n'est pas un détail esthétique : sans lui, se
   déplacer à la tabulation revient à naviguer les yeux fermés. On le pose
   uniquement sur :focus-visible, donc il n'apparaît pas au clic à la souris.
   ========================================================================== */
:focus-visible{
  outline:3px solid var(--cyan-400); outline-offset:2px; border-radius:3px
}
.btn:focus-visible,.outil-tabs button:focus-visible,.dg-opt:focus-visible{
  outline:3px solid var(--gold-500); outline-offset:3px
}
[data-theme="sombre"] :focus-visible{outline-color:#63c8ef}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:2000; width:auto; height:auto;
  padding:12px 20px; background:var(--navy-900); color:#fff;
  border-radius:var(--r-sm); font-weight:700; clip:auto
}
/* Les vignettes de la liseuse et les points du graphe sont des commandes :
   ils doivent pouvoir être atteints et actionnés sans souris. */
.ls-vign:focus-visible{outline-offset:0}
.plot .pt:focus-visible circle:last-child{stroke:var(--gold-500); stroke-width:3}

/* ==========================================================================
   NOTES TECHNIQUES
   ========================================================================== */
.notes-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.note-carte{display:block; padding:26px 28px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.note-carte:hover{border-color:var(--blue-600); transform:translateY(-3px);
  box-shadow:var(--shadow-md)}
.note-theme{display:inline-block; font-size:.68rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-600);
  background:#eef7fd; padding:4px 10px; border-radius:999px}
[data-theme="sombre"] .note-theme{background:#0f2d45}
.note-carte time{display:block; font-size:.76rem; color:var(--muted); margin:12px 0 6px}
.note-carte h3{font-size:1.16rem; line-height:1.32; margin:0 0 10px}
.note-carte p{font-size:.88rem; line-height:1.62; color:var(--ink-2); margin:0 0 14px}
.note-lire{font-size:.85rem; font-weight:700; color:var(--blue-600)}
.notes-pied{margin-top:40px; padding:30px 32px; background:var(--surface);
  border-radius:var(--r-lg)}
.notes-pied h2{font-size:1.28rem; margin:0 0 10px}
.notes-pied p{font-size:.92rem; line-height:1.68; color:var(--ink-2); margin:0}

.note-tete{background:linear-gradient(135deg,#04223c,#0a3f6b); color:#fff;
  padding:38px 0 42px; margin-bottom:38px}
.note-tete .breadcrumb{margin-bottom:18px}
.note-tete .breadcrumb a{color:#8fc4e6}
.note-tete .breadcrumb span{color:#5b7f9e}
.note-tete h1{color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); margin:14px 0 10px}
.note-tete time{display:block; font-size:.82rem; color:#8fc4e6; margin-bottom:16px}
.note-tete .note-theme{background:rgba(255,255,255,.12); color:#8fc4e6}
.note-chapeau{font-size:1.06rem; line-height:1.7; color:#c4d8e8; margin:0; max-width:none}
.note-sec{margin-bottom:30px}
.note-sec h2{font-size:1.24rem; margin:0 0 10px}
.note-sec p{font-size:1rem; line-height:1.78; color:var(--ink-2); margin:0}
.note-outil,.note-livre{display:flex; gap:18px; padding:24px 26px;
  border-radius:var(--r-lg); margin:26px 0}
/* Sans min-width:0, le bloc de droite refuse de se réduire sous la largeur
   de son bouton : trois pixels de débordement, invisibles à l'œil mais qui
   font apparaître une barre de défilement horizontale sur téléphone. */
.note-outil > div,.note-livre > div{min-width:0}
@media (max-width:520px){
  .note-outil,.note-livre{flex-direction:column; gap:12px; padding:20px}
  .note-outil .btn{width:100%}
}
.note-outil{background:linear-gradient(135deg,#f2f9fe,var(--white));
  border:1px solid #c8e4f6}
[data-theme="sombre"] .note-outil{background:linear-gradient(135deg,#0f2d45,#0a1a2b);
  border-color:#1d4666}
.note-livre{background:var(--surface); border:1px solid var(--line)}
.note-outil > svg,.note-livre > svg{width:26px; height:26px; flex:none;
  stroke:var(--blue-600); stroke-width:1.8; fill:none}
.note-outil h3,.note-livre h3{font-size:1.04rem; margin:0 0 8px}
.note-outil p{font-size:.9rem; color:var(--ink-2); margin:0 0 14px; line-height:1.6}
.note-livre a{font-weight:700}
.note-suites{margin:40px 0 10px}
.note-suites h2{font-size:1.1rem; margin:0 0 14px}
.note-suites-grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.note-suite{display:block; padding:18px 20px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .16s}
.note-suite:hover{border-color:var(--blue-600)}
.note-suite span{display:block; font-size:.68rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.note-suite b{display:block; font-size:.95rem; line-height:1.4; color:var(--ink)}

/* ==========================================================================
   RELEVÉS DE TERRAIN
   ========================================================================== */
.rv-barre{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
  align-items:flex-start; margin-bottom:18px}
.rv-barre h3{margin:0 0 5px; font-size:1.05rem}
.rv-barre .sub{margin:0; font-size:.86rem; color:var(--muted); line-height:1.6;
  max-width:62ch}
.rv-zone{display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:32px 28px; border:2px dashed var(--line); border-radius:var(--r-lg);
  background:var(--surface); cursor:pointer; text-align:center;
  transition:border-color .18s,background .18s}
.rv-zone:hover,.rv-survol{border-color:var(--blue-600); background:#f2f9fe}
[data-theme="sombre"] .rv-zone:hover,[data-theme="sombre"] .rv-survol{background:#0f2d45}
.rv-zone svg{width:34px; height:34px; color:var(--blue-600)}
.rv-zone b{font-size:.98rem; color:var(--ink)}
.rv-zone span{font-size:.8rem; color:var(--muted); line-height:1.6; max-width:64ch}
.rv-vide{padding:34px 28px; text-align:center; color:var(--muted)}
.rv-vide h4{margin:0 0 8px; font-size:1.02rem; color:var(--ink-2)}
.rv-vide p{font-size:.88rem; line-height:1.65; margin:0 auto; max-width:56ch}
.rv-point{margin-top:22px; padding:20px 22px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md)}
.rv-tete{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  align-items:flex-start; margin-bottom:12px}
.rv-tete h3{margin:0; font-size:1.02rem; font-family:ui-monospace,Menlo,monospace}
.rv-tete span{font-size:.78rem; color:var(--muted)}
.rv-seuil{display:flex; align-items:center; gap:9px}
.rv-seuil label{font-size:.78rem; color:var(--muted); white-space:nowrap}
.rv-seuil input{width:96px; padding:6px 9px; font:inherit; font-size:.85rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--white)}
.rv-graphe{margin:6px 0 12px}
.rv-chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:12px; border-top:1px solid var(--line-2); padding-top:12px}
.rv-chiffres span{display:block; font-size:.72rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em}
.rv-chiffres b{display:block; font-size:1.02rem; font-variant-numeric:tabular-nums;
  margin-top:3px}
.rv-alerte{color:var(--risk)}
.alert-warn{background:#fdf4e6; border:1px solid #f0dcb0; color:#8a5c15;
  border-radius:var(--r-sm); padding:14px 16px; font-size:.86rem; line-height:1.6}
.alert-warn ul{margin:8px 0 0; padding-left:20px}
.alert-warn li{margin:3px 0}
[data-theme="sombre"] .alert-warn{background:#2b2210; border-color:#4a3c1c; color:#e0c88f}

/* ==========================================================================
   ACCUEIL — CE QUE LE SITE SAIT FAIRE
   --------------------------------------------------------------------------
   Un visiteur qui arrive sur l'accueil ne connaît ni la liseuse, ni les
   calculateurs, ni les notes. S'il faut deviner qu'ils existent, ils
   n'existent pas.
   ========================================================================== */
.accueil-livres{display:block; line-height:0; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); margin:6px 0 22px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.accueil-livres img{width:100%; height:auto; display:block}
.accueil-livres:hover{transform:translateY(-4px)}

.accueil-portes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.ap{display:block; padding:20px 22px; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background .18s,border-color .18s,transform .18s}
.ap:hover{background:rgba(255,255,255,.11); border-color:var(--cyan-300);
  transform:translateY(-3px)}
.ap b{display:block; font-family:var(--font-head); font-size:1rem; color:#fff;
  margin-bottom:6px; line-height:1.3}
.ap span{display:block; font-size:.85rem; color:#b9d4e8; line-height:1.58}

/* Huit outils : quatre par quatre. En auto-fit, on obtient cinq puis trois,
   et la ligne du bas paraît inachevée. */
.accueil-outils{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (min-width:1060px){.accueil-outils{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.accueil-outils{grid-template-columns:1fr}}
.ao{display:block; padding:20px 22px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.ao:hover{border-color:var(--blue-600); transform:translateY(-3px);
  box-shadow:var(--shadow-md)}
.ao-ic{display:inline-flex; width:34px; height:34px; align-items:center;
  justify-content:center; border-radius:9px; background:#eef7fd;
  color:var(--blue-600); margin-bottom:11px}
.ao-ic svg{width:19px; height:19px; stroke-width:1.9; fill:none}
[data-theme="sombre"] .ao-ic{background:#0f2d45}
.ao b{display:block; font-family:var(--font-head); font-size:.98rem;
  color:var(--ink); margin-bottom:5px; line-height:1.3}
.ao > span:last-child{display:block; font-size:.82rem; color:var(--muted);
  line-height:1.55}

.accueil-notes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.an{display:block; padding:22px 24px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.an:hover{border-color:var(--blue-600); transform:translateY(-3px);
  box-shadow:var(--shadow-md)}
.an-theme{display:inline-block; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-600);
  background:#eef7fd; padding:4px 10px; border-radius:999px; margin-bottom:12px}
[data-theme="sombre"] .an-theme{background:#0f2d45}
.an b{display:block; font-family:var(--font-head); font-size:1.06rem;
  line-height:1.34; color:var(--ink); margin-bottom:9px}
.an-ch{display:block; font-size:.86rem; color:var(--ink-2); line-height:1.62}
.an time{display:block; font-size:.75rem; color:var(--muted); margin-top:12px}

/* ==========================================================================
   PARAGRAPHE D'INTRODUCTION PLEINE LARGEUR
   --------------------------------------------------------------------------
   Une ligne très longue se perd : l'œil ne retrouve pas le début de la
   suivante. Trois réglages rattrapent cela et rendent la pleine largeur
   confortable.

     · La justification, demandée ici, exige la coupure des mots. Sans
       hyphens, le texte justifié creuse des rivières blanches entre les
       mots — c'est le défaut classique du justifié sur le web, et il vient
       toujours de son absence.
     · L'interligne monte à 1,8 : plus les lignes sont longues, plus il
       faut d'air entre elles pour que le retour à la ligne soit sûr.
     · text-wrap:pretty évite le mot esseulé sur la dernière ligne.

   Sous 900 px la mesure redevient courte d'elle-même : on repasse au fer
   à gauche, la justification n'a plus d'intérêt et abîmerait le texte.
   ========================================================================== */
.intro-large{
  max-width:none; color:var(--muted); text-align:justify;
  hyphens:auto; -webkit-hyphens:auto; line-height:1.8;
  text-wrap:pretty; hanging-punctuation:first last
}
@media (max-width:900px){
  .intro-large{text-align:left; line-height:1.7}
}

/* ---------- Vignette d'ouvrage en volume ----------
   Le livre est détouré sur fond transparent : il lui faut un fond à lui,
   sinon il flotte. Le dégradé reprend les teintes de la charte et laisse
   l'ombre portée du rendu faire son travail. */
.ebook-cover-3d{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  padding:14px 14px 6px;
  background:radial-gradient(120% 100% at 30% 0%,#0d3358 0%,#04223c 62%,#03192c 100%);
  overflow:hidden
}
.ebook-cover-3d::after{content:none}
.ebook-cover-3d picture{display:block; width:100%; height:100%}
.ebook-cover-3d img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)
}
.ebook-card:hover .ebook-cover-3d img{transform:translateY(-5px) scale(1.035)}
[data-theme="sombre"] .ebook-cover-3d img{filter:none}

/* ==========================================================================
   SOMMAIRE À POINTS DE CONDUITE
   --------------------------------------------------------------------------
   Les points ne sont pas des caractères mais un fond répété : écrits en dur
   ils se désaligneraient au premier titre plus long, et un lecteur d'écran
   les énoncerait un par un. Ici la ligne de points est décorative au sens
   propre — elle n'existe pas dans le texte.

   Le titre porte un fond opaque qui recouvre les points sur sa propre
   longueur : c'est ce qui crée la césure nette entre le texte et la
   conduite, sans avoir à mesurer quoi que ce soit.
   ========================================================================== */
.sommaire{
  list-style:none; margin:0; padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--white)
}
.som-l{display:flex; align-items:baseline; gap:0; padding:10px 0; line-height:1.5}
.som-l + .som-l{border-top:1px solid var(--line-2)}
.som-n{
  flex:none; width:34px; font-family:var(--font-head); font-weight:800;
  font-size:.78rem; color:var(--cyan-400); font-variant-numeric:tabular-nums
}
.som-t{color:var(--ink); font-size:.94rem}
/* La conduite occupe tout ce qui reste entre le titre et le folio. Elle
   est décorative au sens propre : un élément vide, masqué aux lecteurs
   d'écran, dont le motif ne se coupe jamais au milieu d'un point. */
.som-pts{
  flex:1 1 auto; min-width:16px; height:1px; margin:0 8px;
  align-self:flex-end; margin-bottom:.34em;
  background-image:radial-gradient(circle,currentColor 1px,transparent 1px);
  background-size:6px 2px; background-repeat:repeat-x; background-position:0 100%;
  color:var(--muted); opacity:.5
}
.som-e{
  flex:none; font-size:.74rem; color:var(--muted); font-weight:600;
  margin-right:12px; white-space:nowrap
}
.som-p{
  flex:none; min-width:2.2em; text-align:right;
  font-family:var(--font-head); font-weight:800; font-size:.94rem;
  color:var(--navy-900); font-variant-numeric:tabular-nums
}
.som-note{margin:12px 0 0; font-size:.78rem; color:var(--muted); text-align:right}
@media (max-width:560px){
  .som-t{font-size:.88rem}
  .som-e{display:none}
  .som-n{width:28px}
}

/* ---------- Modèle non encore débloqué ---------- */
.tpl-verrou{
  display:flex; align-items:center; gap:9px; align-self:flex-start;
  padding:8px 12px; border-radius:var(--r-sm); background:var(--surface);
  border:1px dashed var(--line); font-size:.8rem; color:var(--muted);
  line-height:1.45
}
.tpl-cadenas{display:inline-flex; flex:none}
.tpl-cadenas svg{width:15px; height:15px; stroke:var(--muted); fill:none;
  stroke-width:1.9}
.tpl-verrou a{font-weight:700; color:var(--blue-600)}

/* ---------- Fiche produit : le texte sur toute la largeur ----------
   La présentation et le sommaire ne sont plus dans la colonne : ils se
   lisent, et une colonne de moitié d'écran avec l'autre moitié vide est du
   gâchis. Le sommaire, lui, se met en deux colonnes dès qu'il y a la place :
   quinze chapitres sur une seule colonne pleine largeur font des lignes de
   points interminables. */
.detail-texte h2{font-size:clamp(1.35rem,2.4vw,1.9rem); margin:0 0 14px}
@media (min-width:1000px){
  .detail-texte .sommaire{
    columns:2; column-gap:38px; padding:20px 24px
  }
  .detail-texte .som-l{break-inside:avoid; -webkit-column-break-inside:avoid}
  .detail-texte .som-l:first-child{border-top:0}
}
.detail-rappel{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; margin-top:38px; padding:26px 30px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,#04223c,#0a3f6b); color:#fff
}
.detail-rappel h3{color:#fff; margin:0 0 6px; font-size:1.16rem}
.detail-rappel p{color:#c4d8e8; font-size:.9rem; margin:0; max-width:none}
.detail-rappel-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.detail-rappel-prix{
  font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:#fff;
  margin-right:4px
}

/* ==========================================================================
   AFFICHE DE SESSION
   --------------------------------------------------------------------------
   La bannière coiffe la carte du calendrier. Elle garde son rapport 1200×627
   quelle que soit la largeur : une affiche déformée ne donne pas envie de
   l'ouvrir. Au survol, la loupe se lève et l'image avance d'un cheveu — assez
   pour dire « cliquable », pas assez pour distraire.
   ========================================================================== */
.session-card.a-banniere { display: block; padding: 0; overflow: hidden; }
.session-card.a-banniere .session-main,
.session-card.a-banniere .session-side { padding: 22px 24px; }
@media (min-width: 900px) {
  .session-card.a-banniere { display: grid; grid-template-columns: 1fr; }
  .session-card.a-banniere .session-corps { display: grid; grid-template-columns: 1fr 300px; }
}
.session-banniere {
  /* Hauteur imposée, pas un rapport borné : « aspect-ratio » plus
     « max-height » rétrécit la largeur au lieu de rogner l'image, et la
     bannière se retrouvait à quatre cents pixels dans une carte qui en fait
     treize cents. On fixe donc la hauteur et l'image couvre. */
  display: block; position: relative; height: clamp(160px, 18vw, 240px);
  overflow: hidden; background: #0a3f6b; text-decoration: none;
}
/* Le cadrage vise la bande d'identité — logo, surtitre, titre — qui est ce
   qu'on reconnaît d'un coup d'œil. Le reste de l'affiche s'ouvre au clic. */
.session-banniere img { object-position: center 12%; }
.session-banniere img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.session-banniere:hover img { transform: scale(1.025); }
.session-loupe {
  position: absolute; right: 14px; bottom: 14px;
  background: rgba(4,34,60,.82); color: #fff; font-size: .78rem; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28);
  transform: translateY(4px); opacity: .92;
  transition: transform .25s ease, opacity .25s ease;
}
.session-banniere:hover .session-loupe { transform: translateY(0); opacity: 1; }

/* La visionneuse. Fond assombri, affiche centrée, hauteur bornée à la
   fenêtre : sur un A3 en portrait, c'est la hauteur qui contraint, jamais
   la largeur. */
.affiche-vue { position: fixed; inset: 0; z-index: 400; display: grid;
  place-items: center; opacity: 0; transition: opacity .2s ease; }
.affiche-vue.ouvert { opacity: 1; }
.affiche-fond { position: absolute; inset: 0; background: rgba(3,22,44,.90);
  backdrop-filter: blur(4px); }
.affiche-vue figure { position: relative; margin: 0; max-width: min(92vw, 760px);
  display: grid; gap: 14px; transform: translateY(10px) scale(.985);
  transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.affiche-vue.ouvert figure { transform: none; }
.affiche-vue img { width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.55); background: #0a3f6b; }
.affiche-vue figcaption { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; color: #dceaf6; font-weight: 700; font-size: .92rem; flex-wrap: wrap; }
.affiche-x { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(8,32,58,.7);
  color: #fff; font-size: 1rem; cursor: pointer; z-index: 2; }
.affiche-x:hover { background: rgba(8,32,58,.95); }

/* Le bandeau d'affiche en tête d'un programme détaillé. Même objet que sur le
   calendrier, posé pleine largeur au-dessus du syllabus. */
.affiche-bandeau { display: block; position: relative;
  height: clamp(180px, 22vw, 300px);
  overflow: hidden; border-radius: 16px; margin-bottom: 34px;
  background: #0a3f6b; text-decoration: none;
  box-shadow: 0 18px 44px rgba(4, 34, 60, .18); }
.affiche-bandeau img { width: 100%; height: 100%; object-fit: cover;
  object-position: center 14%; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.affiche-bandeau:hover img { transform: scale(1.02); }
.affiche-bandeau:hover .session-loupe { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   PARCOURS EN VEDETTE
   --------------------------------------------------------------------------
   Une seule formation à l'affiche : une carte étroite perdue dans une grille
   de trois colonnes laisse deux tiers de vide et donne l'impression d'un
   catalogue amputé. On occupe donc toute la largeur — l'affiche d'un côté,
   les faits de l'autre.
   ========================================================================== */
.prog-vedette {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 42px); align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: clamp(22px, 2vw, 34px);
}
/* L'emplacement est carré comme l'affiche : une image carrée posée dans un
   cadre en portrait se fait rogner des deux côtés, et c'est précisément le
   titre qui disparaît. Carré dans carré, rien n'est perdu. */
.prog-visuel { position: relative; display: block; aspect-ratio: 1 / 1;
  align-self: center; background: #0a3f6b; text-decoration: none; overflow: hidden;
  border-radius: 14px; box-shadow: 0 14px 34px rgba(4, 34, 60, .18); }
.prog-visuel img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.prog-visuel:hover img { transform: scale(1.03); }
.prog-visuel:hover .session-loupe { transform: translateY(0); opacity: 1; }
.prog-detail { padding: 0; }
.prog-detail h3 { margin: 12px 0 10px; font-size: clamp(1.3rem, 2vw, 1.75rem); }
.prog-detail > p { color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.prog-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.prog-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px; margin: 0 0 26px; padding-top: 20px;
  border-top: 1px solid var(--line-2); }
.prog-faits dt { font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.prog-faits dd { margin: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.prog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) {
  .prog-vedette { grid-template-columns: 1fr; }
  .prog-visuel { aspect-ratio: 1 / 1; max-width: 360px; margin: 0 auto; width: 100%; }
  .prog-faits { grid-template-columns: 1fr; }
}