/* Thème partagé par les pages du site : palette claire et sombre, plus les
   quelques composants dessinés à la main. Extrait de index.html pour que le
   formulaire d'adhésion hérite exactement des mêmes couleurs. */
  /* ---- Palette SOMBRE (défaut) ---- */
  :root {
    --background: 10 14 26;
    --surface: 15 21 36;
    --surface-container-lowest: 10 14 26;
    --surface-container-low: 17 24 40;
    --surface-container: 20 28 46;
    --surface-container-high: 26 36 56;
    --surface-container-highest: 32 44 66;
    --surface-variant: 26 36 56;
    --outline-variant: 42 58 72;
    --outline: 74 96 112;
    --primary: 251 175 67;        /* #FBAF43 — jaune de marque, unifié */
    --primary-container: 92 61 8;
    --on-primary: 38 26 4;
    --on-background: 224 232 240;
    --on-surface-variant: 160 180 196;
    --tertiary: 200 160 240;
    --text-hover: 250 228 180;
    --bg-grad-from: 26 36 56;
    --bg-grad-to: 10 14 26;
    --glass-bg: rgba(26, 36, 56, 0.4);
    --glass-border: rgba(242, 184, 75, 0.12);
    --card-hover-bg: rgba(42, 56, 84, 0.75);
    --card-hover-border: rgba(242, 184, 75, 0.28);
  }
  /* ---- Palette CLAIRE ---- */
  :root[data-theme="light"] {
    --background: 244 247 251;
    --surface: 255 255 255;
    --surface-container-lowest: 255 255 255;
    --surface-container-low: 241 245 249;
    --surface-container: 238 242 247;
    --surface-container-high: 230 237 245;
    --surface-container-highest: 221 231 240;
    --surface-variant: 230 237 245;
    --outline-variant: 203 216 227;
    --outline: 148 168 184;
    --primary: 146 97 10;         /* #92610a — le jaune du logo, assombri */
    --primary-container: 253 236 200;
    --on-primary: 255 255 255;
    --on-background: 15 28 43;
    --on-surface-variant: 74 92 107;
    --tertiary: 124 58 237;
    --text-hover: 15 28 43;
    --bg-grad-from: 232 240 248;
    --bg-grad-to: 244 247 251;
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(146, 97, 10, 0.16);
    --card-hover-bg: rgba(226, 236, 245, 0.9);
    --card-hover-border: rgba(146, 97, 10, 0.3);
  }
  html { color-scheme: dark; }
  html[data-theme="light"] { color-scheme: light; }

  body {
    background-image: radial-gradient(circle at 50% -20%, rgb(var(--bg-grad-from)) 0%, rgb(var(--bg-grad-to)) 70%);
    background-attachment: fixed;
  }
  .glacier-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
  }
  .glacier-card-hover:hover {
    background: var(--card-hover-bg);
    border-color: var(--card-hover-border);
    transform: translateY(-2px);
  }
  .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: rgb(var(--primary) / 0.2); border-radius: 999px; }

  .filter-dd-btn.has-active {
    border-color: rgb(var(--primary) / 0.5);
    color: rgb(var(--primary));
  }
  .filter-dd-panel {
    max-height: 320px;
    overflow-y: auto;
  }
  .filter-dd-option:hover { background: rgb(var(--primary) / 0.08); }
  .filter-dd-option input[type="checkbox"] { accent-color: rgb(var(--primary)); }

  .cu-input {
    background: #f1f5f9;
    border: 1px solid rgba(74, 96, 112, 0.4);
    border-radius: 0.75rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a2432;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color 0.15s, background 0.15s;
  }
  .cu-input::placeholder { color: #64748b; }
  .cu-input:focus { outline: none; border-color: rgb(var(--primary) / 0.7); background: #ffffff; }
  .cu-input option { color: #1a2432; }

  .view-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgb(var(--on-surface-variant));
    transition: all 0.15s;
  }
  .view-tab:hover { color: rgb(var(--text-hover)); }
  .view-tab-active { background: rgb(var(--primary) / 0.12); color: rgb(var(--primary)); }


  .section-tab {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.1rem;
    font-family: "Comfortaa", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgb(var(--on-surface-variant));
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
  }
  .section-tab:hover { color: rgb(var(--text-hover)); }
  .section-tab-active { color: rgb(var(--primary)); border-bottom-color: rgb(var(--primary)); }

  .line-clamp-2, .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-2 { -webkit-line-clamp: 2; }
  .line-clamp-3 { -webkit-line-clamp: 3; }

  /* Édition en place : le crayon suit le dernier caractère, séparé d'une espace.
     Il n'existe que pour l'œil — masqué tant que le cadenas est fermé. */
  .edit-pencil { display: none; }
  body:not(.edit-locked) .edit-pencil {
    display: inline-flex;
    vertical-align: baseline;
    margin-left: 0.35em;
    cursor: pointer;
    opacity: 0.35;
    color: rgb(var(--primary));
    transition: opacity 0.15s;
  }
  body:not(.edit-locked) .edit-pencil:hover { opacity: 1; }
  .edit-pencil .material-symbols-outlined { font-size: 0.9em; }
  [data-edit][contenteditable="true"] {
    outline: 2px solid rgb(var(--primary) / 0.6);
    outline-offset: 3px;
    border-radius: 3px;
  }

  /* Thème clair : les boutons pleins prennent l'ambre vif du logo, avec un
     texte sombre (9,2:1). En texte sur fond clair cette teinte ne donnerait
     que 1,9:1 — --primary reste donc plus foncé pour les titres et les liens. */
  :root[data-theme="light"] .bg-primary { background-color: #FBAF43; }
  :root[data-theme="light"] .text-on-primary { color: #261a04; }
  :root[data-theme="light"] .hover\:bg-primary\/90:hover { background-color: #F0A02E; }

  /* Badge « Pratique destinée aux » — sarcelle : distinct des domaines (violet)
     comme de la couleur de marque (jaune), désormais celle des accents. */
  .audience-badge { background: rgb(13 148 136 / 0.14); color: #0f766e; }
  :root[data-theme="dark"] .audience-badge { background: rgb(45 212 191 / 0.16); color: #5eead4; }

  /* Branding : les deux variantes du logo sont rendues, le thème en montre une. */
  .brand-logo { height: 40px; width: auto; max-width: 240px; display: block; }
  :root[data-theme="dark"] .brand-logo-light,
  :root[data-theme="light"] .brand-logo-dark { display: none; }

/* Fiche issue d'une demande d'adhésion : présente mais visiblement en attente.
   Elle ne s'affiche que cadenas ouvert — le serveur ne l'envoie pas autrement. */
.fiche-a-valider {
  opacity: .55;
  filter: grayscale(0.75);
  border-style: dashed;
}
.fiche-a-valider:hover { opacity: .85; filter: grayscale(0.35); }