/* ClassUp — site vitrine
   Polices hébergées localement (fonts/, licence SIL OFL) : aucune requête vers Google.
   Les illustrations sont des reconstitutions de l'interface en HTML/CSS (classes .ui-*). */

@font-face { font-family: 'Jakarta'; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Jakarta'; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20C0, U+2113; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20C0; }

:root {
  --papier: #f7f5f1;
  --blanc: #ffffff;
  --encre: #16181d;
  --texte: #3d4250;
  --doux: #6b7080;
  --filet: #e5e1d8;
  --filet-doux: #eeebe5;
  --prune: #7a3f73;
  --prune-fonce: #5a2c55;
  --prune-pale: #f4ebf2;
  /* Couleurs de l'application (illustrations) */
  --app-bleu: #2563eb;
  --app-vert: #059669;
  --app-ambre: #d97706;
  --app-rouge: #dc2626;
  --app-fond: #f5f6f8;
  --app-bord: #e5e7eb;
  --largeur: 1180px;
  --rayon: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--papier); color: var(--texte); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--prune-pale); color: var(--prune-fonce); }
h1, h2, h3, h4 { font-family: 'Jakarta', 'Inter', sans-serif; color: var(--encre); letter-spacing: -0.025em; line-height: 1.1; }
/* Virgule des grands titres : la chasse de la police l'écarte trop du mot qui précède */
.v { margin-left: -0.12em; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--prune); outline-offset: 3px; border-radius: 4px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 28px; }

/* ---------- Marque ---------- */
.marque { display: inline-flex; align-items: baseline; font-family: 'Jakarta'; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em; color: var(--encre); }
.marque span { color: var(--prune); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 241, .92); border-bottom: 1px solid transparent; transition: border-color .2s; }
@supports (backdrop-filter: blur(8px)) { .nav { background: rgba(247, 245, 241, .8); backdrop-filter: blur(8px); } }
.nav.defile { border-bottom-color: var(--filet); }
.nav-interieur { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-liens { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-liens a { padding: 8px 14px; border-radius: 8px; font-size: .92rem; font-weight: 500; color: var(--texte); transition: color .15s, background .15s; }
.nav-liens a:hover { color: var(--encre); background: rgba(22, 24, 29, .05); }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: .95rem; transition: background .15s, transform .15s, border-color .15s; }
.bouton.plein { background: var(--encre); color: #fff; }
.bouton.plein:hover { background: #2a2d35; }
.bouton.prune { background: var(--prune); color: #fff; }
.bouton.prune:hover { background: var(--prune-fonce); }
.bouton.contour { border: 1px solid var(--filet); background: var(--blanc); color: var(--encre); }
.bouton.contour:hover { border-color: #cfc9bd; }
.bouton svg.i { width: 18px; height: 18px; }
.nav .bouton { padding: 9px 16px; font-size: .9rem; }
.nav-menu { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--filet); border-radius: 10px; background: var(--blanc); color: var(--encre); cursor: pointer; }
.nav-mobile { display: none; padding: 8px 28px 20px; border-bottom: 1px solid var(--filet); background: var(--papier); }
.nav-mobile a { display: block; padding: 12px 0; border-bottom: 1px solid var(--filet-doux); font-weight: 500; color: var(--encre); }
.nav-mobile a:last-child { border-bottom: 0; color: var(--prune); font-weight: 600; }
.nav-mobile.ouvert { display: block; }
@media (max-width: 900px) { .nav-liens { display: none; } .nav-menu { display: grid; } }

/* ---------- En-tête de section ---------- */
.section { padding: 110px 0; }
.section.blanche { background: var(--blanc); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.repere { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--prune); }
.repere b { font-family: 'Jakarta'; font-weight: 700; color: var(--encre); letter-spacing: 0; }
.repere::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: .5; }
.titre-section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.titre-section h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.titre-section p { font-size: 1.08rem; color: var(--doux); max-width: 520px; }
@media (max-width: 860px) { .titre-section { grid-template-columns: 1fr; gap: 16px; margin-bottom: 44px; } .section { padding: 80px 0; } }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 96px; }
.hero-grille { display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center; }
.etiquette-version { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--filet); border-radius: 99px; background: var(--blanc); font-size: .85rem; color: var(--texte); margin-bottom: 28px; }
.etiquette-version strong { white-space: nowrap; padding: 3px 10px; border-radius: 99px; background: var(--prune-pale); color: var(--prune-fonce); font-weight: 600; font-size: .78rem; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--prune); }
.hero-texte { font-size: 1.15rem; color: var(--texte); max-width: 500px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(3, auto); gap: 28px; justify-content: start; }
.hero-note div { font-size: .88rem; color: var(--doux); line-height: 1.45; }
.hero-note strong { display: block; font-family: 'Jakarta'; font-size: 1.35rem; color: var(--encre); letter-spacing: -0.02em; }
@media (max-width: 980px) { .hero-grille { grid-template-columns: 1fr; gap: 56px; } .hero { padding-top: 48px; } }
@media (max-width: 520px) { .hero-note { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* =========================================================================
   ILLUSTRATIONS : reconstitutions fidèles de l'interface ClassUp 5.15
   Valeurs reprises de assets/css/panel.css et portal.css (thème clair) : accent #2563eb,
   fond #f5f6f8, bordures #e5e7eb, monogramme « C », blocs d'horaire neutres à trait bleu.
   ========================================================================= */
.cu { --a: #2563eb; --a-texte: #1d4ed8; --fond: #f5f6f8; --surf: #fff; --bord: #e5e7eb; --ligne: rgba(17,24,39,.07);
  --t: #111827; --m: #6b7280; --sel: rgba(37,99,235,.08); --ok: #059669; --ko: #dc2626; --warn: #d97706;
  font-family: 'Jakarta', 'Inter', sans-serif; color: var(--t); font-size: 12px; line-height: 1.4; text-align: left; }
.cu svg.i { width: 15px; height: 15px; stroke-width: 1.75; }
.cu-fenetre { background: var(--surf); border: 1px solid #ddd8ce; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,24,29,.04), 0 28px 56px -28px rgba(22,24,29,.32); }
.cu-chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #f3f1ec; border-bottom: 1px solid #e6e2da; }
.cu-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d6d1c6; }
.cu-chrome span { margin: 0 auto; padding: 2px 14px; border-radius: 6px; background: #fff; border: 1px solid #e6e2da; font-family: 'Inter'; font-size: 10.5px; color: #8a8f9c; }
.cu-mono { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--a); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.cu-marque { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.cu-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sel); color: var(--a); font-size: 9.5px; font-weight: 700; flex: 0 0 auto; }
.cu-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 7px; background: var(--a); color: #fff; font-weight: 600; font-size: 10.5px; white-space: nowrap; }
.cu-btn.sec { background: var(--surf); color: var(--t); border: 1px solid var(--bord); }
.cu-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 9.5px; font-weight: 600; white-space: nowrap; background: rgba(100,116,139,.16); color: var(--m); }
.cu-badge.info { background: rgba(59,130,246,.14); color: #2563eb; }
.cu-badge.ok { background: rgba(16,185,129,.14); color: #047857; }
.cu-badge.warn { background: rgba(245,158,11,.14); color: #b45309; }
.cu-badge.point::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* --- Panel : barre latérale + barre du haut --- */
.cu-panel { display: grid; grid-template-columns: 158px 1fr; }
.cu-side { display: flex; flex-direction: column; border-right: 1px solid var(--bord); background: var(--surf); }
.cu-side .cu-marque { height: 46px; padding: 0 14px; border-bottom: 1px solid var(--bord); }
.cu-nav { padding: 8px 8px; display: grid; gap: 1px; }
.cu-nav div { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: var(--m); font-size: 11px; font-weight: 500; white-space: nowrap; }
.cu-nav div svg.i { width: 14px; height: 14px; opacity: .8; }
.cu-nav div.actif { background: var(--sel); color: var(--a); font-weight: 600; }
.cu-nav div.actif::before { content: ""; position: absolute; left: -8px; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a); }
.cu-pied-side { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bord); }
.cu-pied-side strong { display: block; font-size: 10.5px; }
.cu-pied-side small { display: block; font-size: 9.5px; color: var(--m); font-family: 'Inter'; }
.cu-main { background: var(--fond); min-width: 0; }
.cu-top { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; background: var(--surf); border-bottom: 1px solid var(--bord); }
.cu-top strong { font-size: 12.5px; font-weight: 600; }
.cu-top span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--bord); border-radius: 6px; font-size: 10px; font-weight: 500; }
.cu-top span svg.i { width: 12px; height: 12px; opacity: .7; }
.cu-zone { padding: 14px 16px 16px; }
.cu-carte { background: var(--surf); border: 1px solid var(--bord); border-radius: 12px; padding: 14px; }
.cu-carte + .cu-carte { margin-top: 10px; }
.cu-carte h6 { font-family: 'Jakarta'; font-size: 13px; font-weight: 600; color: var(--t); }
.cu-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

/* Appel */
.cu-onglets { display: inline-flex; gap: 2px; padding: 3px; background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; margin-bottom: 10px; }
.cu-onglets span { padding: 5px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 600; color: var(--m); }
.cu-onglets span.actif { background: var(--surf); color: var(--t); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.cu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.cu-stats div { background: var(--surf); border: 1px solid var(--bord); border-radius: 10px; padding: 8px 11px; }
.cu-stats strong { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cu-stats span { font-size: 9.5px; color: var(--m); font-weight: 500; }
.cu-collant { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin: -14px -14px 10px; border-bottom: 1px solid var(--bord); }
.cu-collant strong { font-size: 12px; }
.cu-collant em { font-style: normal; color: var(--m); margin-left: 8px; font-size: 10.5px; }
.cu-rangee { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 6px; background: var(--surf); }
.cu-rangee:last-child { margin-bottom: 0; }
.cu-rangee.abs { border-color: var(--ko); background: rgba(239,68,68,.04); }
.cu-rangee.ret { border-color: var(--warn); background: rgba(245,158,11,.04); }
.cu-rangee .nom { flex: 1; font-weight: 600; font-size: 11.5px; min-width: 0; }
.cu-rangee .nom small { display: block; font-weight: 400; color: var(--m); font-size: 9.5px; font-family: 'Inter'; }
.cu-pres { display: flex; gap: 4px; }
.cu-pres b { padding: 4px 7px; border-radius: 6px; border: 1px solid transparent; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.cu-pres .p { background: rgba(0,176,124,.1); color: #00b07c; }
.cu-pres .a { background: rgba(239,68,68,.1); color: var(--ko); }
.cu-pres .r { background: rgba(245,158,11,.1); color: var(--warn); }
.cu-pres .p.sel { background: #00b07c; color: #fff; }
.cu-pres .a.sel { background: var(--ko); color: #fff; }
.cu-pres .r.sel { background: var(--warn); color: #fff; }

/* --- Portail : en-tête et navigation --- */
.cu-ph { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; background: var(--surf); border-bottom: 1px solid var(--bord); }
.cu-liens { display: flex; gap: 2px; }
.cu-liens span { display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; color: var(--m); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.cu-liens span svg.i { width: 13px; height: 13px; }
.cu-liens span.actif { background: rgba(37,99,235,.1); color: var(--a-texte); font-weight: 600; }
.cu-pastille { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--ko); color: #fff; font-size: 8.5px; font-weight: 700; }
.cu-burger { position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: var(--t); }
.cu-burger svg.i { width: 18px; height: 18px; }
.cu-burger::after { content: ""; position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ko); box-shadow: 0 0 0 2px #fff; }
.cu-page { padding: 14px 16px 16px; background: var(--fond); }
.cu-page h5 { font-family: 'Jakarta'; font-size: 14px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 10px; color: var(--t); }
.cu-barre { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cu-barre h5 { margin: 0; }
.cu-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 5px 9px; border: 1px solid #d1d5db; border-radius: 7px; background: var(--surf); font-size: 10.5px; font-weight: 500; }

/* Horaire (grille commune, get_horaire.php) */
.cu-grille { background: var(--surf); border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.cu-grille table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cu-grille th { height: 30px; padding: 0 8px; border-bottom: 1px solid var(--bord); color: var(--m); font-size: 8.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left; }
.cu-grille th:first-child { width: 58px; }
.cu-grille th.auj { color: var(--a-texte); box-shadow: inset 0 -2px 0 var(--a); }
.cu-grille tbody th { height: auto; padding: 7px 8px; border-right: 1px solid var(--bord); border-bottom: 1px solid var(--ligne); font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.cu-grille td { height: 44px; padding: 3px; border-bottom: 1px solid var(--ligne); border-left: 1px solid var(--ligne); vertical-align: top; }
.cu-grille td.auj { background: rgba(37,99,235,.035); }
.cu-grille tr:last-child th, .cu-grille tr:last-child td { border-bottom: 0; }
.cu-bloc { height: 100%; padding: 5px 6px; background: #f3f5f8; border: 1px solid #e3e7ee; border-left: 3px solid var(--a); border-radius: 6px; }
.cu-bloc b { display: block; font-size: 9.5px; font-weight: 600; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cu-bloc small { display: block; font-size: 8.5px; color: var(--m); margin-top: 1px; font-family: 'Inter'; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cu-grille td.midi { height: 24px; background: #f9fafb; color: var(--m); font-size: 9px; font-weight: 500; text-align: center; vertical-align: middle; }

/* Téléphone (portail mobile) */
.cu-tel { width: 240px; padding: 8px; border-radius: 34px; background: #16181d; box-shadow: 0 30px 60px -28px rgba(22,24,29,.55); }
.cu-ecran { border-radius: 27px; overflow: hidden; background: var(--fond); }
.cu-statut { display: flex; justify-content: space-between; padding: 8px 18px 3px; background: var(--surf); font-size: 9.5px; font-weight: 700; }
.cu-ecran .cu-ph { padding: 0 12px; }
.cu-ecran .cu-page { padding: 12px; }
.cu-jours { display: flex; gap: 3px; padding: 6px; border-bottom: 1px solid var(--bord); }
.cu-jours span { flex: 1; display: grid; place-items: center; min-height: 32px; border-radius: 8px; color: var(--m); font-size: 10px; font-weight: 600; line-height: 1.15; text-align: center; }
.cu-jours span small { display: block; color: var(--a-texte); font-size: 7.5px; }
.cu-jours span.sel { background: var(--a); color: #fff; }
.cu-jours span.sel small { color: #fff; }
.cu-agenda { display: grid; gap: 6px; padding: 8px; }
.cu-ev { padding: 5px 8px; background: #f3f5f8; border: 1px solid #e3e7ee; border-left: 3px solid var(--a); border-radius: 6px; }
.cu-ev .h { display: block; color: var(--m); font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cu-ev .t { display: block; font-size: 10.5px; font-weight: 600; }
.cu-ev .d { display: block; font-size: 8.5px; color: var(--m); font-family: 'Inter'; }
.cu-ev.long { min-height: 62px; }

/* Listes du portail (agenda, sanctions) */
.cu-liste { display: grid; gap: 6px; }
.cu-item { padding: 9px 11px; background: var(--surf); border: 1px solid var(--bord); border-radius: 10px; }
.cu-item .ech { display: block; font-size: 9px; font-weight: 600; color: var(--m); }
.cu-item .ech.auj { color: var(--ko); }
.cu-item .ech.dem { color: var(--warn); }
.cu-item .tete { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.cu-item strong { font-size: 11px; font-weight: 600; }
.cu-item .prof { font-size: 9px; color: var(--m); white-space: nowrap; }
.cu-item .contenu { padding: 6px 8px; background: #f9fafb; border: 1px solid var(--ligne); border-radius: 8px; font-size: 10px; font-family: 'Inter'; color: var(--t); }
.cu-resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
.cu-resume span { display: flex; flex-direction: column; padding: 7px 8px; background: var(--surf); border: 1px solid var(--bord); border-radius: 9px; color: var(--m); font-size: 8.5px; line-height: 1.25; }
.cu-resume strong { color: var(--t); font-size: 14px; }
.cu-resume .abs strong { color: var(--ko); }
.cu-resume .ret strong { color: var(--warn); }
.cu-pgrille { background: var(--surf); border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.cu-pgrille table { width: 100%; border-collapse: collapse; font-size: 9px; }
.cu-pgrille th, .cu-pgrille td { padding: 5px 3px; border-bottom: 1px solid var(--ligne); text-align: center; }
.cu-pgrille thead th { background: #f9fafb; color: var(--m); font-weight: 600; font-size: 8px; }
.cu-pgrille tbody th { text-align: left; padding-left: 8px; font-weight: 500; white-space: nowrap; }
.cu-pgrille tr:last-child th, .cu-pgrille tr:last-child td { border-bottom: 0; }
.pc { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-size: 8.5px; font-weight: 700; border: 1px solid transparent; }
.pc.x { background: rgba(220,38,38,.08); color: var(--ko); }
.pc.r { background: rgba(217,119,6,.1); color: #b45309; }
.pc.j { background: rgba(5,150,105,.09); color: #047857; }
.pc.att { border: 1px dashed currentColor; }
.cu-sanction { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 11px 13px; background: var(--surf); border: 1px solid var(--bord); border-left: 3px solid var(--c, var(--bord)); border-radius: 10px; }
.cu-sanction .lbl { display: block; margin-bottom: 2px; color: var(--m); font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cu-sanction .quand strong { display: block; font-size: 11px; }
.cu-sanction .quand span { display: block; font-size: 9.5px; color: var(--m); margin-top: 1px; }
.cu-sanction p { font-size: 10.5px; margin: 0; font-family: 'Inter'; }
.cu-auteur { display: flex; align-items: center; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--ligne); }
.cu-auteur .cu-av { width: 22px; height: 22px; font-size: 8px; background: linear-gradient(135deg, #c7d2fe, #e9d5ff); color: #3730a3; }
.cu-auteur span { font-size: 8.5px; color: var(--m); line-height: 1.2; }
.cu-auteur strong { display: block; font-size: 10px; color: var(--t); }

/* Tableau du panel (retenues) */
.cu-table { width: 100%; border-collapse: collapse; font-size: 10.5px; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.cu-table th { padding: 7px 9px; background: rgba(17,24,39,.025); border-bottom: 1px solid var(--ligne); text-align: left; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--m); white-space: nowrap; }
.cu-table td { padding: 8px 9px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.cu-table tr:last-child td { border-bottom: 0; }
.cu-personne { display: flex; align-items: center; gap: 8px; }
.cu-personne b { display: block; white-space: nowrap; font-size: 10.5px; font-weight: 600; }
.cu-personne small { display: block; font-size: 9px; color: var(--m); }
.cu-seg { display: inline-flex; border: 1px solid var(--bord); border-radius: 7px; overflow: hidden; }
.cu-seg span { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-left: 1px solid var(--bord); color: var(--m); font-size: 9px; font-weight: 600; white-space: nowrap; }
.cu-seg span:first-child { border-left: 0; }
.cu-seg svg.i { width: 11px; height: 11px; }
.cu-seg .ok { background: rgba(16,185,129,.14); color: var(--ok); }
.cu-seg .ko { background: rgba(239,68,68,.12); color: var(--ko); }
.cu-seg .af { background: var(--sel); color: var(--a); }
.cu-alerte { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid rgba(245,158,11,.35); border-radius: 9px; background: rgba(245,158,11,.07); font-size: 10.5px; }
.cu-alerte svg.i { color: var(--warn); }

/* Classes */
.cu-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cu-classe { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 11px 11px 9px; background: var(--surf); border: 1px solid var(--bord); border-radius: 10px; }
.cu-classe::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.cu-classe .haut { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cu-classe .pst { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 9.5px; font-weight: 700; flex: 0 0 auto; }
.cu-classe strong { display: block; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-classe small { display: block; font-size: 9px; color: var(--m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-classe .ch { display: flex; gap: 10px; font-size: 9.5px; color: var(--m); }
.cu-classe .ch b { color: var(--t); font-size: 11px; }
.cu-classe .tit { display: flex; align-items: center; gap: 5px; padding-top: 7px; border-top: 1px solid var(--ligne); font-size: 9px; color: var(--m); }
.cu-classe .tit svg.i { width: 11px; height: 11px; }

/* Feuille de bulletin (PDF, Services/pdf.php) */
.scene-bulletin { display: flex; justify-content: center; padding: 10px 0; }
.cu-feuille { width: 100%; max-width: 450px; background: #fff; border: 1px solid #e6e2da; border-radius: 3px; padding: 26px 26px 22px;
  box-shadow: 0 1px 2px rgba(22,24,29,.05), 0 30px 60px -30px rgba(22,24,29,.35); transform: rotate(-1.2deg); font-family: 'Inter'; color: #1f2937; font-size: 8px; }
.cu-feuille .serif { font-family: 'DejaVu Serif', Georgia, 'Times New Roman', serif; }
.cu-feuille .tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 8px; border-bottom: 3px double #13233d; }
.cu-feuille .ecole { font-weight: 700; font-size: 13px; color: #13233d; }
.cu-feuille .ecole small { display: block; font-family: 'Inter'; font-weight: 400; font-size: 7px; color: #8a93a3; margin-top: 2px; }
.cu-feuille .doc { text-align: right; }
.cu-feuille .doc b { display: block; font-size: 6.5px; letter-spacing: .3em; color: #9b7736; }
.cu-feuille .doc .per { display: block; font-size: 12.5px; color: #13233d; }
.cu-feuille .doc small { display: block; font-size: 6.5px; color: #6b7280; margin-top: 1px; }
.cu-feuille .ident { display: grid; grid-template-columns: 1.6fr .8fr 1.1fr 1fr; margin-top: 9px; background: #f3f5f8; }
.cu-feuille .ident div { padding: 5px 7px; border-left: 1px solid #dfe3ea; min-width: 0; }
.cu-feuille .ident div:first-child { border-left: 0; }
.cu-feuille .lbl { display: block; font-size: 5.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a93a3; }
.cu-feuille .val { display: block; font-size: 8.5px; font-weight: 700; color: #13233d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-feuille .kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.cu-feuille .kpi div { border: 1px solid #dfe3ea; padding: 4px 7px; }
.cu-feuille .kpi strong { display: block; font-size: 11.5px; color: #13233d; }
.cu-feuille .kpi strong span { font-size: 7px; font-weight: 400; color: #8a93a3; }
.cu-feuille .sect { margin-top: 9px; font-size: 5.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a93a3; }
.cu-feuille .sect i { font-style: normal; color: #9b7736; }
.cu-feuille table { width: 100%; border-collapse: collapse; margin-top: 3px; font-size: 7.2px; }
.cu-feuille th { text-align: left; font-size: 5.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a93a3; padding: 3px 4px; border-bottom: 1px solid #13233d; }
.cu-feuille td { padding: 3.5px 4px; border-bottom: 1px solid #eceef2; }
.cu-feuille tr.pair td { background: #fafbfc; }
.cu-feuille td.c { font-weight: 700; color: #13233d; }
.cu-feuille td.n { text-align: right; font-weight: 700; color: #13233d; white-space: nowrap; }
.cu-feuille td.n.f { color: #b42318; }
.cu-feuille td.a { font-style: italic; color: #4b5563; }
.cu-feuille td.p { color: #6b7280; }
.cu-feuille .avis { margin-top: 9px; padding: 5px 8px; border-left: 2px solid #9b7736; background: #faf8f3; }
.cu-feuille .avis p { font-style: italic; font-size: 7.6px; color: #374151; margin-top: 2px; }
.cu-feuille .sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.cu-feuille .sig div { font-size: 5.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a93a3; }
.cu-feuille .sig div span { display: block; margin-top: 16px; border-top: 1px solid #9aa3b2; padding-top: 2px; font-size: 6.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #374151; }
.cu-feuille .pdf-pied { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 4px; border-top: 1px solid #e5e7eb; font-size: 5.5px; color: #9aa3b2; }

/* Compositions */
.scene { position: relative; }
.scene-hero { padding: 0 0 50px 50px; }
.scene-hero .cu-tel { position: absolute; left: 0; bottom: 0; }
.scene-portail { display: flex; justify-content: center; gap: 22px; align-items: flex-end; }
.scene-portail .cu-tel:nth-child(2) { transform: translateY(-34px); }
.scene-vs { position: relative; padding-bottom: 70px; }
.scene-vs .cu-sanction { position: absolute; right: -14px; bottom: 0; width: 290px; box-shadow: 0 22px 44px -22px rgba(22,24,29,.35); }

@media (max-width: 1100px) { .cu-panel { grid-template-columns: 138px 1fr; } }
@media (max-width: 620px) {
  .scene-hero { padding: 0; }
  .scene-hero .cu-tel, .scene-portail .cu-tel:nth-child(2) { display: none; }
  .scene-portail .cu-tel:nth-child(1) { transform: none; }
  .cu-panel { grid-template-columns: 1fr; }
  .cu-side { display: none; }
  .cu-pres b { padding: 4px 5px; font-size: 9px; }
  .cu-liens span:nth-child(n+4) { display: none; }
  .cu-classes { grid-template-columns: 1fr 1fr; }
  .cu-classes .cu-classe:nth-child(n+5) { display: none; }
  .cu-table th:nth-child(3), .cu-table td:nth-child(3) { display: none; }
  .cu-seg span:not(.ok):not(.ko):not(.af) { display: none; }
  .cu-seg span { border-left: 0; }
  .scene-vs { padding-bottom: 0; }
  .scene-vs .cu-sanction { position: static; width: auto; margin-top: 12px; }
  .cu-feuille { transform: none; padding: 16px; }
  .cu-feuille .ident { grid-template-columns: 1.4fr .8fr 1.1fr; }
  .cu-feuille .ident div:nth-child(4), .cu-feuille th:nth-child(5), .cu-feuille td:nth-child(5) { display: none; }
}
@media (max-width: 420px) { .cu-grille th:first-child { width: 42px; } .cu-grille tbody th { padding: 6px 4px; } .cu-stats div:nth-child(3) { display: none; } .cu-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Rangées de fonctionnalités (texte / illustration) ---------- */
.rangee { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; padding: 56px 0; border-top: 1px solid var(--filet); }
.rangee:first-of-type { border-top: 0; padding-top: 0; }
.rangee.inverse .rangee-texte { order: 2; }
.rangee > *, .hero-grille > * { min-width: 0; }
.rangee-texte .num { font-family: 'Jakarta'; font-weight: 700; font-size: .85rem; color: var(--prune); margin-bottom: 14px; }
.rangee-texte h3 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); margin-bottom: 16px; }
.rangee-texte > p { color: var(--texte); font-size: 1.04rem; margin-bottom: 22px; max-width: 470px; }
.points { list-style: none; display: grid; gap: 11px; }
.points li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: .96rem; color: var(--texte); }
.points li svg.i { width: 18px; height: 18px; color: var(--prune); margin-top: 3px; }
.points li b { color: var(--encre); font-weight: 600; }
@media (max-width: 920px) {
  .rangee, .rangee.inverse { grid-template-columns: 1fr; gap: 36px; }
  .rangee.inverse .rangee-texte { order: 0; }
}

/* ---------- Grille « et aussi » ---------- */
.grille-plus { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.plus { padding: 30px 28px 32px; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: var(--blanc); }
.plus svg.i { width: 22px; height: 22px; color: var(--prune); margin-bottom: 18px; }
.plus h4 { font-size: 1.05rem; margin-bottom: 8px; letter-spacing: -0.015em; }
.plus p { font-size: .92rem; color: var(--doux); line-height: 1.55; }
.plus .option { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--prune-pale); color: var(--prune-fonce); font-family: 'Inter'; font-size: .7rem; font-weight: 600; vertical-align: 2px; letter-spacing: 0; }
@media (max-width: 900px) { .grille-plus { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grille-plus { grid-template-columns: 1fr; } }

/* ---------- Rôles ---------- */
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.role { padding: 28px 24px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--filet); display: flex; flex-direction: column; }
.role .icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--prune-pale); color: var(--prune); margin-bottom: 22px; }
.role .qui { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin-bottom: 6px; }
.role h3 { font-size: 1.2rem; margin-bottom: 10px; }
.role p { font-size: .92rem; color: var(--doux); margin-bottom: 18px; }
.role ul { list-style: none; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--filet-doux); display: grid; gap: 7px; }
.role li { font-size: .86rem; color: var(--texte); padding-left: 16px; position: relative; }
.role li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1.5px; background: var(--prune); }
@media (max-width: 980px) { .roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* ---------- Sécurité (bloc sombre) ---------- */
.securite { background: var(--encre); color: #c9ccd4; }
.securite .repere { color: #d8b4d4; }
.securite .repere b { color: #fff; }
.securite h2 { color: #fff; }
.securite .titre-section p { color: #9aa0ad; }
.grille-secu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rayon); overflow: hidden; }
.secu { padding: 30px 28px; background: var(--encre); }
.secu svg.i { width: 22px; height: 22px; color: #d8b4d4; margin-bottom: 16px; }
.secu h4 { color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.secu p { font-size: .92rem; color: #9aa0ad; line-height: 1.55; }
@media (max-width: 900px) { .grille-secu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grille-secu { grid-template-columns: 1fr; } }

/* ---------- Nouveautés ---------- */
.nouveautes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.version { font-family: 'Jakarta'; font-weight: 800; font-size: clamp(4.5rem, 9vw, 7.5rem); letter-spacing: -0.06em; line-height: .9; color: var(--encre); margin: 28px 0 12px; }
.version span { color: var(--prune); }
.date-version { color: var(--doux); font-size: .95rem; }
.journal-versions { list-style: none; border-top: 1px solid var(--filet); }
.journal-versions li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--filet); }
.journal-versions svg.i { color: var(--prune); margin-top: 2px; }
.journal-versions h4 { font-size: 1.02rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.journal-versions p { font-size: .93rem; color: var(--doux); }
@media (max-width: 900px) { .nouveautes { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Projet ---------- */
.projet { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: start; }
.projet .citation { font-family: 'Jakarta'; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--encre); font-weight: 700; margin-bottom: 24px; }
.projet .citation span { color: var(--prune); }
.projet p { font-size: 1.02rem; margin-bottom: 16px; max-width: 620px; }
.credits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.credits span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--filet); border-radius: 99px; background: var(--blanc); font-size: .88rem; color: var(--texte); }
.credits span b { color: var(--encre); font-weight: 600; }
.credits svg.i { width: 16px; height: 16px; color: var(--prune); }
.en-bref { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 8px 28px; margin-top: 44px; }
.en-bref div { padding: 20px 0; border-bottom: 1px solid var(--filet-doux); }
.en-bref div:last-child { border-bottom: 0; }
.en-bref dt { display: flex; align-items: center; gap: 10px; font-family: 'Jakarta'; font-weight: 700; color: var(--encre); font-size: 1.02rem; margin-bottom: 4px; }
.en-bref dt svg.i { width: 18px; height: 18px; color: var(--prune); }
.en-bref dd { margin: 0 0 0 28px; font-size: .92rem; color: var(--doux); }
@media (max-width: 860px) { .projet { grid-template-columns: 1fr; gap: 0; } }
.cadre-legal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 88px; border-top: 1px solid var(--filet); }
.cadre-legal div { padding: 28px 24px 0 0; }
.cadre-legal h4 { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin-bottom: 10px; }
.cadre-legal h4 svg.i { width: 17px; height: 17px; color: var(--prune); }
.cadre-legal p { font-size: .88rem; color: var(--doux); line-height: 1.55; }
@media (max-width: 900px) { .cadre-legal { grid-template-columns: 1fr 1fr; gap: 8px 24px; } }
@media (max-width: 560px) { .cadre-legal { grid-template-columns: 1fr; } }

/* ---------- Appel à l'action + pied ---------- */
.appel-final { padding: 120px 0; text-align: center; }
.appel-final h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.04em; max-width: 820px; margin: 0 auto 20px; }
.appel-final h2 em { font-style: normal; color: var(--prune); }
.appel-final p { font-size: 1.1rem; color: var(--doux); max-width: 560px; margin: 0 auto 36px; }
.appel-final .hero-actions { justify-content: center; }
.pied { background: var(--encre); color: #9aa0ad; padding: 56px 0 40px; font-size: .9rem; }
.pied-grille { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.marque-claire { color: #fff; font-size: 1.5rem; margin-bottom: 12px; }
.marque-claire span { color: #d8b4d4; }
.pied a { color: #d4d7de; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-liens { display: flex; gap: 48px; flex-wrap: wrap; }
.pied-liens div { display: grid; gap: 8px; align-content: start; }
.pied-liens strong { color: #fff; font-family: 'Jakarta'; font-weight: 600; margin-bottom: 4px; }
.pied-bas { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .84rem; }
.drapeau-trans { display: block; width: 64px; height: 14px; margin-top: 14px; filter: drop-shadow(0 0 3px rgba(245,169,184,.45)); }

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