/* PalaoBreeZ — système d'interface 2030. Palette Baobab / Encre / Ivoire / Cuivre / Menthe / Alerte. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin.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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("../fonts/figtree-latin-ext.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; }

:root {
  --baobab: #0B5A46;
  --baobab-fonce: #0B4A3C;
  --baobab-nuit: #014438;
  --foret: #08322C;
  --foret-actif: #175143;
  --encre: #10213A;
  --encre-douce: #3D4A5C;
  --gris: #5F6B7A;
  --gris-clair: #8A93A0;
  --ivoire: #F7F4EC;
  --ivoire-page: #FEFCF8;
  --surface: #FFFFFF;
  --surface-chaude: #FEFBF6;
  --cuivre: #D54A18;
  --cuivre-fonce: #C4441A;
  --cuivre-pale: #FDF0E8;
  --cuivre-voile: #FFF7F0;
  --menthe: #DFF4E9;
  --menthe-pale: #EEF8F3;
  --alerte: #E4473F;
  --alerte-pale: #FDECEB;
  --or: #E9A12B;
  --trait: #E9E5DE;
  /* Contour de TOUT encadré (exigence : bordure 1 px nette, rayon 12 px). */
  --contour: #B9C6BF; /* lot J : contours mieux marqués */
  --trait-doux: #F0ECE6;
  --ombre: 0 1px 2px rgba(16, 33, 58, .04), 0 calc(4px * var(--eb)) calc(14px * var(--eb)) rgba(16, 33, 58, .05);
  --r-s: 10px; --r: 12px; --r-m: 12px; --r-l: 12px; --r-xl: 12px;
  /* Lot J — ÉCHELLE UNIQUE de toute l'application (pages publiques, connectées et salle) :
     --et = texte (≈ 10/12 de l'ancienne taille, jamais sous 11 px), --eb = encadrés (hauteurs, marges, espacements). */
  --et: .84; --eb: .84;
  --police: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Téléphone : texte un peu réduit, encadrés et cibles tactiles (≥ 44 px) conservés. */
@media (max-width: 760px) { :root { --et: .92; --eb: 1; } }
/* Icônes : taille de dessin portée par --ic (posée par le composant), suivie par l'échelle. */
.ic { width: calc(var(--ic, 20px) * var(--eb)); height: calc(var(--ic, 20px) * var(--eb)); flex: none; }
body { margin: 0; font-family: var(--police); color: var(--encre); background: var(--ivoire-page); font-size: max(11px, calc(15px * var(--et))); line-height: 1.4; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
.ic { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(213, 74, 24, .55); outline-offset: 2px; border-radius: 8px; }
.lien { color: #1763C6; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--eb)); height: calc(40px * var(--eb)); padding: 0 calc(18px * var(--eb)); border-radius: var(--r); font-weight: 600; font-size: max(11px, calc(14.5px * var(--et))); white-space: nowrap; border: 1px solid transparent; transition: filter .15s, background .15s; }
.btn:hover { filter: brightness(1.06); }
.btn-primaire { background: var(--baobab-fonce); color: #fff; }
.btn-cuivre { background: var(--cuivre-fonce); color: #fff; }
.btn-secondaire { background: var(--surface); border-color: var(--contour); color: var(--encre); }
.btn-contour-cuivre { background: var(--surface); border-color: var(--cuivre); color: var(--encre); }
.btn-discret { background: #EEF0F8; color: var(--encre); }
.btn-danger { background: var(--surface); border: 1.5px solid var(--alerte); color: var(--alerte); }
.btn[disabled], .btn-desactive { background: #E3E6EB; color: #9AA1AD; pointer-events: none; }
.btn-icone { width: calc(44px * var(--eb)); padding: 0; }

/* ---------- Champs ---------- */
.champ-label { display: block; font-weight: 600; font-size: max(11px, calc(14px * var(--et))); margin-bottom: calc(6px * var(--eb)); }
.champ { display: flex; align-items: center; gap: calc(10px * var(--eb)); height: calc(40px * var(--eb)); padding: 0 calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r-s); background: var(--surface); font-size: max(11px, calc(14.5px * var(--et))); width: 100%; }
.champ input, .champ select { border: 0; outline: 0; background: transparent; width: 100%; height: 100%; padding: 0; }
.champ select { appearance: none; cursor: pointer; }
.champ .chev { margin-left: auto; color: var(--encre); pointer-events: none; }
.champ:focus-within { border-color: var(--baobab); box-shadow: 0 0 0 3px rgba(11, 90, 70, .12); }
textarea.zone { width: 100%; border: 1px solid var(--contour); border-radius: var(--r-s); padding: calc(12px * var(--eb)) calc(12px * var(--eb)); resize: vertical; font-size: max(11px, calc(14px * var(--et))); color: var(--encre); line-height: 1.45; }
textarea.zone::placeholder, .champ input::placeholder { color: #9AA1AD; }
.erreur-champ { color: var(--alerte); font-size: max(11px, calc(13px * var(--et))); margin-top: calc(6px * var(--eb)); }

/* Interrupteur */
.bascule { position: relative; display: inline-block; width: calc(54px * var(--eb)); height: calc(32px * var(--eb)); flex: none; }
.bascule input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.bascule span { position: absolute; inset: 0; border-radius: 20px; background: #E9EAEE; border: 1px solid #D7D9DF; transition: background .2s; }
.bascule span::after { content: ""; position: absolute; top: calc(3px * var(--eb)); left: calc(3px * var(--eb)); width: calc(24px * var(--eb)); height: calc(24px * var(--eb)); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.bascule input:checked + span { background: var(--baobab); border-color: var(--baobab); }
.bascule input:checked + span::after { transform: translateX(22px); }
.bascule input:focus-visible + span { outline: 3px solid rgba(213, 74, 24, .55); outline-offset: 2px; }

/* Pastilles */
.pastille { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(32px * var(--eb)); padding: 0 calc(14px * var(--eb)); border-radius: 10px; font-size: max(11px, calc(14px * var(--et))); font-weight: 500; white-space: nowrap; }
.p-vert { background: #E6F6EE; color: var(--encre); }
.p-vert .ic { color: #17895F; }
.p-cuivre { background: #FDF0E6; color: var(--encre); }
.p-cuivre .ic { color: var(--cuivre); }
.p-rouge { background: #FDECEC; color: var(--alerte); }
.p-rouge .ic { color: var(--alerte); }
.p-menthe { background: var(--menthe); color: var(--encre); }

.avatar { width: calc(42px * var(--eb)); height: calc(42px * var(--eb)); border-radius: 50%; object-fit: cover; flex: none; background: #E5EFEA; }
.avatar-initiales { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--baobab); background: #DCF5EA; }

/* Notifications éphémères */
.flash { position: fixed; right: calc(24px * var(--eb)); bottom: calc(24px * var(--eb)); z-index: 50; display: flex; align-items: center; gap: calc(12px * var(--eb)); background: var(--surface); border: 1px solid var(--contour); border-radius: var(--r-m); padding: calc(14px * var(--eb)) calc(18px * var(--eb)); box-shadow: var(--ombre); font-size: max(11px, calc(15px * var(--et))); animation: flash-out 6s forwards; max-width: calc(460px * var(--eb)); }
.flash .ic { color: #17895F; }
.flash-erreur { border-color: #F6C9C6; }
.flash-erreur .ic { color: var(--alerte); }
@keyframes flash-out { 0%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); visibility: hidden; } }

/* ============================================================
   COQUILLE B — en-tête pleine largeur + barre latérale forêt
   (écrans 04, 05, 06, 09)
   ============================================================ */
.coquille { min-height: 100vh; display: grid; grid-template-columns: calc(212px * var(--eb)) minmax(0, 1fr); grid-template-rows: calc(64px * var(--eb)) minmax(0, 1fr); }
.entete { grid-column: 1 / -1; display: flex; align-items: center; height: calc(64px * var(--eb)); background: #FFFDF8; border-bottom: 1px solid var(--contour); padding-right: calc(16px * var(--eb)); position: sticky; top: 0; z-index: 20; }
.entete-marque { display: flex; align-items: center; gap: calc(10px * var(--eb)); width: calc(222px * var(--eb)); height: 100%; padding-left: calc(20px * var(--eb)); flex: none; }
.entete-marque img { height: calc(38px * var(--eb)); width: auto; }
.marque-texte { font-size: max(11px, calc(16px * var(--et))); font-weight: 600; letter-spacing: 2.2px; color: var(--encre); }
.entete-sep { width: 1px; height: calc(44px * var(--eb)); background: #EDE9E4; flex: none; }
.entete-titre { padding-left: calc(20px * var(--eb)); font-size: max(11px, calc(18px * var(--et))); font-weight: 500; letter-spacing: -.2px; white-space: nowrap; }
.entete-fil { padding-left: calc(22px * var(--eb)); line-height: 1.15; }
.entete-fil .fil { font-size: max(11px, calc(15px * var(--et))); color: var(--encre-douce); }
.entete-fil .fil span { color: #A8AEB8; margin: 0 calc(6px * var(--eb)); }
.entete-fil h1 { font-size: max(11px, calc(20px * var(--et))); font-weight: 700; letter-spacing: -.4px; margin-top: 2px; }
.entete-outils { margin-left: auto; display: flex; align-items: center; gap: calc(12px * var(--eb)); }
.segment { display: flex; align-items: center; height: calc(42px * var(--eb)); padding: calc(3px * var(--eb)); background: var(--surface); border: 1px solid var(--contour); border-radius: var(--r-m); margin-right: calc(16px * var(--eb)); }
.segment form { display: contents; }
.segment button, .segment a { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(34px * var(--eb)); padding: 0 calc(14px * var(--eb)); border-radius: 10px; font-size: max(11px, calc(14px * var(--et))); font-weight: 500; color: var(--encre); white-space: nowrap; }
.segment .actif { background: var(--baobab-nuit); color: #fff; }
.segment .actif .ic-onde { color: #F08A3C; }
.pilule-reseau { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(42px * var(--eb)); padding: 0 calc(14px * var(--eb)); border-radius: var(--r); border: 1px solid var(--contour); background: #FDF2E8; color: var(--cuivre); font-size: max(11px, calc(14px * var(--et))); font-weight: 500; white-space: nowrap; }
.pilule-reseau.bon { background: #E9F6EF; color: var(--baobab); }
.pilule-reseau.bon .ic { color: #17895F; }
.btn-outil { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(42px * var(--eb)); padding: 0 calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: var(--surface); font-size: max(11px, calc(14px * var(--et))); font-weight: 500; white-space: nowrap; }
.btn-outil[aria-pressed="true"] { background: var(--menthe); border-color: #B9E0CC; }
.btn-plus { width: calc(42px * var(--eb)); padding: 0; justify-content: center; }

.lateral { background: var(--foret); color: #fff; position: sticky; top: calc(64px * var(--eb)); height: calc(100vh - calc(64px * var(--eb))); display: flex; flex-direction: column; padding: calc(20px * var(--eb)) calc(8px * var(--eb)) 0; overflow: hidden; }
.lateral nav { display: flex; flex-direction: column; gap: calc(4px * var(--eb)); position: relative; z-index: 1; }
.nav-item { display: flex; align-items: center; gap: calc(12px * var(--eb)); height: calc(44px * var(--eb)); padding: 0 calc(14px * var(--eb)); border-radius: var(--r); font-size: max(11px, calc(14.5px * var(--et))); white-space: nowrap; font-weight: 400; color: #F3F6F4; }
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.actif { background: var(--foret-actif); }
.nav-item .ic { width: calc(22px * var(--eb)); height: calc(22px * var(--eb)); }
.nav-item .ic-plus { --plus-trait: var(--foret); color: #fff; }
.lateral-deco { position: absolute; left: 0; bottom: calc(86px * var(--eb)); width: calc(212px * var(--eb)); height: calc(215px * var(--eb)); background: url("../img/deco-baobab.webp") no-repeat left bottom / 212px 215px; pointer-events: none; }
.lateral-pied { margin-top: auto; border-top: 1px solid rgba(255,255,255,.14); margin-left: calc(10px * var(--eb)); margin-right: calc(10px * var(--eb)); padding: calc(16px * var(--eb)) calc(4px * var(--eb)) calc(22px * var(--eb)); position: relative; z-index: 1; background: var(--foret); }
.lateral-pied a { display: flex; align-items: center; gap: calc(12px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }

.contenu { padding: 0 calc(24px * var(--eb)) calc(20px * var(--eb)) calc(28px * var(--eb)); min-width: 0; }
.titre-page { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.sous-titre { font-size: max(11px, calc(14.5px * var(--et))); color: var(--encre-douce); margin-top: calc(4px * var(--eb)); }

/* ============================================================
   COQUILLE A — tableau de bord (écran 02)
   ============================================================ */
.coquille-a { display: grid; grid-template-columns: calc(214px * var(--eb)) minmax(0, 1fr); min-height: 100vh; background: #FBF8F2; }
.lateral-a { background: #133732; color: #fff; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: calc(46px * var(--eb)) calc(12px * var(--eb)) 0; overflow: hidden; }
.lateral-a::before { content: ""; position: absolute; left: calc(-120px * var(--eb)); bottom: calc(60px * var(--eb)); width: calc(420px * var(--eb)); height: calc(420px * var(--eb)); border-radius: 50%; border: 60px solid rgba(255,255,255,.03); pointer-events: none; }
.lateral-a .marque-a { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--eb)); margin-bottom: calc(52px * var(--eb)); }
.lateral-a .marque-a img { height: calc(56px * var(--eb)); width: auto; }
.lateral-a .marque-a span { font-size: max(11px, calc(18px * var(--et))); letter-spacing: 2.6px; font-weight: 500; }
.lateral-a nav { display: flex; flex-direction: column; gap: calc(6px * var(--eb)); position: relative; }
.lateral-a .nav-item { height: calc(54px * var(--eb)); gap: calc(20px * var(--eb)); padding: 0 calc(16px * var(--eb)); font-size: max(11px, calc(16px * var(--et))); }
.lateral-a .nav-item.actif { background: #305B50; }
.lateral-a .pied-a { margin-top: auto; border-top: 1px solid rgba(255,255,255,.18); margin: auto calc(10px * var(--eb)) 0; padding: calc(26px * var(--eb)) 0 calc(40px * var(--eb)); display: flex; align-items: center; gap: calc(14px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); line-height: 1.3; }
.principal-a { position: relative; padding: calc(16px * var(--eb)) calc(24px * var(--eb)) calc(40px * var(--eb)) calc(28px * var(--eb)); min-width: 0; overflow: hidden; }
.principal-a::before { content: ""; position: absolute; top: calc(-40px * var(--eb)); right: 0; width: calc(640px * var(--eb)); height: calc(420px * var(--eb)); background: url("../img/texture-feuilles.svg") no-repeat right top / cover; opacity: 1; pointer-events: none; }
.barre-a { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: calc(16px * var(--eb)); margin-right: calc(6px * var(--eb)); z-index: 5; }
.recherche-a { display: flex; align-items: center; gap: calc(10px * var(--eb)); width: calc(360px * var(--eb)); height: calc(42px * var(--eb)); padding: 0 calc(16px * var(--eb)); background: rgba(255,255,255,.85); border: 1px solid #CFCAC1; border-radius: 22px; font-size: max(11px, calc(14.5px * var(--et))); color: var(--gris); }
.recherche-a input { border: 0; outline: 0; background: transparent; width: 100%; font-size: max(11px, calc(14.5px * var(--et))); }
.recherche-a input::placeholder { color: #5F6B7A; }
.cloche-a { position: relative; color: var(--encre); padding: calc(6px * var(--eb)); }
.cloche-a.a-notif::after { content: ""; position: absolute; top: calc(4px * var(--eb)); right: calc(4px * var(--eb)); width: calc(9px * var(--eb)); height: calc(9px * var(--eb)); border-radius: 50%; background: var(--cuivre); }
.sep-a { width: 1px; height: calc(30px * var(--eb)); background: #DAD5CC; }
.profil-a { display: flex; align-items: center; gap: calc(12px * var(--eb)); }
.profil-a img { width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); border-radius: 50%; object-fit: cover; }

/* ---------- Divers ---------- */
.carte { background: var(--surface); border: 1px solid var(--contour); border-radius: var(--r); box-shadow: 0 1px 2px rgba(16,33,58,.03); }
.vide { padding: calc(32px * var(--eb)); text-align: center; color: var(--gris); }

/* Cinq salles dans le sélecteur d'en-tête : en bureau moyen, seule la salle active garde son libellé. */
@media (max-width: 1880px) {
  .segment button:not(.actif) .lib-outil { display: none; }
  .segment button:not(.actif) { padding: 0 calc(10px * var(--eb)); }
}
.champ-erreur { border-color: var(--alerte); box-shadow: 0 0 0 calc(3px * var(--eb)) rgba(228, 71, 63, .12); }