/* 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; }

  /* L'ascenseur vertical est toujours là, même quand la page tient dans la
     fenêtre. Sans cela, un onglet court (Play, le plus souvent) le fait
     disparaître, et la page — centrée par mx-auto — glisse de quelques pixels
     à chaque changement d'onglet. `scrollbar-gutter` serait plus fin, mais il
     reste sans effet ici : la barre est redessinée par ::-webkit-scrollbar. */
  html { overflow-y: scroll; }
  /* Fenêtre plein écran ouverte (le lecteur de Play) : la page derrière se fige. */
  html.page-figee { overflow: hidden; }

  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);
  }
  /* Bandeau des partenaires : un ton au-dessus du fond de page en thème sombre,
     un ton en dessous en thème clair — assez pour détacher la section, pas assez
     pour en faire une carte de plus. */
  .bandeau-partenaires {
    background: rgb(255 255 255 / 0.06);
    border: 1px solid var(--glass-border);
  }
  :root[data-theme="light"] .bandeau-partenaires {
    background: rgb(15 23 42 / 0.05);
  }
  .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; }

  /* Un onglet de vue et le cadre qui l'entoure partagent le même arrondi : un
     conteneur plus rond que le bouton posé dedans se voit tout de suite. */
  :root { --view-tab-radius: 0.6rem; }
  .view-tab-group { border-radius: var(--view-tab-radius); }

  .view-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--view-tab-radius);
    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;
    flex-shrink: 0;            /* quatre onglets ne tiennent pas sur un téléphone : la barre défile, les libellés ne se coupent pas */
    white-space: nowrap;
    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; }

  /* Illustrations livrées en deux versions : le thème en montre une, exactement
     comme le logo. L'autre est masquée, donc ni affichée ni lue à voix haute. */
  :root[data-theme="dark"] .visuel-clair,
  :root[data-theme="light"] .visuel-sombre { display: none; }

  /* 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); }

/* ---- Agenda --------------------------------------------------------------
   Une teinte par thématique, portée par --ag (RVB). Le jaune de marque est déjà
   celui des accents : « Indépendants » prend l'orange pour ne pas s'y confondre.
   --ag-on = couleur du texte posé sur un aplat de la teinte (pastilles du calendrier). */
.ag-t-reseautage   { --ag: 96 165 250; }
.ag-t-independants { --ag: 251 146 60; }
.ag-t-durabilite   { --ag: 74 222 128; }
.ag-t-jobs         { --ag: 192 132 252; }
.ag-t-entreprises  { --ag: 244 114 182; }
.ag-t-autre        { --ag: 160 180 196; }
:root[data-theme="light"] .ag-t-reseautage   { --ag: 37 99 235; }
:root[data-theme="light"] .ag-t-independants { --ag: 194 65 12; }
:root[data-theme="light"] .ag-t-durabilite   { --ag: 21 128 61; }
:root[data-theme="light"] .ag-t-jobs         { --ag: 126 34 206; }
:root[data-theme="light"] .ag-t-entreprises  { --ag: 190 24 93; }
:root[data-theme="light"] .ag-t-autre        { --ag: 74 92 107; }
.ag-on-solid { --ag-on: 10 14 26; }
:root[data-theme="light"] .ag-on-solid { --ag-on: 255 255 255; }

.ag-badge { background: rgb(var(--ag) / 0.16); color: rgb(var(--ag)); }
.ag-card { border-left: 4px solid rgb(var(--ag)); }
.ag-pill {
  display: block; margin-top: 2px; padding: 1px 5px; border-radius: 4px;
  font-size: 11px; line-height: 1.3; font-weight: 700;
  background: rgb(var(--ag)); color: rgb(var(--ag-on));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {      /* petit écran : une pastille devient un point */
  .ag-pill { display: inline-block; width: 7px; height: 7px; padding: 0; margin: 2px 1px 0 0; border-radius: 50%; font-size: 0; }
}
/* Évènement sur plusieurs jours : une seule barre qui court d'un bout à l'autre,
   par-dessus les séparateurs de jours, au lieu d'une pastille sur chaque case.
   --ag-bar-h donne la hauteur d'une rangée de barres (JS réserve la place dans
   les cases et empile les barres avec), --ag-bar-top le décalage sous le
   numéro du jour. */
/* --ag-bar-gap : l'air entre le numéro du jour et la première barre. Il entre
   aussi dans la hauteur réservée par les cases (voir renderGrid), sans quoi la
   dernière barre mordrait sur les pastilles du dessous. */
:root { --ag-bar-h: 17px; --ag-bar-gap: 6px; --ag-bar-top: calc(27px + var(--ag-bar-gap)); --ag-bar-inset: 4px; }
.ag-bar {
  grid-row: 1;                             /* toutes les barres dans la même rangée de grille :
                                              c'est margin-top qui les empile */
  align-self: start;
  margin-left: var(--ag-bar-inset); margin-right: var(--ag-bar-inset);
  height: 15px; line-height: 15px;
  padding: 0 5px; border-radius: 4px;      /* même retrait de texte que .ag-pill */
  font-size: 11px; font-weight: 700;
  background: rgb(var(--ag)); color: rgb(var(--ag-on));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  /* --ag-bar-top garde la formule du haut : seul l'air change sur petit écran,
     le numéro du jour occupant la même hauteur de ligne. */
  :root { --ag-bar-h: 13px; --ag-bar-gap: 4px; --ag-bar-inset: 3px; }
  .ag-bar { height: 11px; line-height: 11px; font-size: 9px; padding: 0 3px; }
}

.ag-day { min-height: 84px; }
@media (max-width: 640px) { .ag-day { min-height: 52px; } }
.ag-tag-full { color: #f87171; border-color: rgb(248 113 113 / 0.6); }
:root[data-theme="light"] .ag-tag-full { color: #b91c1c; border-color: rgb(185 28 28 / 0.5); }

/* Revue de l'agenda : verdicts du tri et alertes (lisibles en clair comme en sombre) */
.rv-ok   { color: #4ade80; }
.rv-warn { color: #fbbf24; }
.rv-bad  { color: #f87171; }
:root[data-theme="light"] .rv-ok   { color: #15803d; }
:root[data-theme="light"] .rv-warn { color: #b45309; }
:root[data-theme="light"] .rv-bad  { color: #b91c1c; }

/* Icône de collecte en cours, dans le panneau de revue de l'agenda. */
@keyframes rv-rotation { to { transform: rotate(360deg); } }
.rv-spin { animation: rv-rotation 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rv-spin { animation: none; } }

/* Réponses de l'assistant : Markdown rendu en HTML (voir formatReponse dans app.js). */
.md p { margin: 0 0 .55rem; }
.md p:last-child, .md ul:last-child, .md ol:last-child { margin-bottom: 0; }
.md .md-h { font-weight: 700; color: rgb(var(--on-background)); }
.md ul, .md ol { margin: 0 0 .55rem; padding-left: 1.15rem; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: .15rem 0; }
.md li::marker { color: rgb(var(--primary)); }
.md strong { font-weight: 700; color: rgb(var(--on-background)); }
.md code {
  background: rgb(var(--surface-container-highest));
  padding: .05rem .3rem;
  border-radius: .3rem;
  font-size: .92em;
}
.md a { color: rgb(var(--primary)); text-decoration: underline; }

/* ---- Play (jeux-questionnaires) -------------------------------------------
   Trois composants dessinés à la main ; tout le reste de l'onglet est fait des
   mêmes classes que les autres pages. Les couleurs vives viennent du jeu
   lui-même (champ `color`) et sont posées en style en ligne. */
.play-card {
  background: rgb(var(--surface-container));
  border: 1px solid rgb(var(--outline-variant) / 0.35);
}
button.play-card { transition: border-color 0.15s, background 0.15s; }
button.play-card:hover { border-color: rgb(var(--primary) / 0.35); background: rgb(var(--surface-container-high)); }

/* Échelle de réponse : six cercles à cocher, --dot = couleur du jeu. */
.scale-dot {
  width: 44px; height: 44px; max-width: 15%; aspect-ratio: 1;
  border-radius: 9999px; border: 3px solid var(--dot); background: transparent;
  transition: background 0.15s, transform 0.15s; flex: none;
}
.scale-dot:active { transform: scale(0.92); }
.scale-dot[aria-pressed="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 25%, transparent); }

/* Bandeau replié sur le coin bas-droit d'une carte : « Joué » pour un jeu, le
   partenaire pour une pratique.

   Géométrie. La bande traverse le coin à 45°, et c'est la carte (overflow
   hidden) qui la coupe aux deux bouts — d'où l'illusion du repli. La longueur
   réellement visible n'est donc pas la largeur de la bande mais la corde du
   coin : si le centre est à d de chaque bord, elle vaut d × 2 × √2.

   La bande a une épaisseur FIXE, taillée pour deux lignes : son allure ne
   change pas avec la longueur du nom. C'est la police qui s'adapte, ajustée
   après coup en JavaScript (voir ajusterBandeaux) — grande pour un nom court,
   plus petite et sur deux lignes pour un nom long.

   Deux largeurs à ne pas confondre : celle de la BANDE, qui doit dépasser la
   corde pour que la carte la coupe aux deux bouts — sans quoi elle s'arrête
   avant les bords et le repli ne se lit plus — et celle du TEXTE, qui doit
   rester dans la corde pour passer à la ligne au bon endroit. D'où une bande
   large et de gros retraits horizontaux. */
.corner-ribbon { position: absolute; right: 0; bottom: 0; width: 160px; height: 160px; overflow: visible; pointer-events: none; z-index: 2; }
.corner-ribbon > span {
  position: absolute; right: -63px; bottom: 44px; width: 250px; height: 36px;
  display: flex; align-items: center; justify-content: center; padding: 0 40px;
  transform: rotate(-45deg); transform-origin: center;
  text-align: center; font-size: 12px; line-height: 1.15; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 4px 9px rgba(0, 0, 0, 0.45);
  /* Un nom d'un seul tenant plus large que la bande se coupe plutôt que de
     déborder : mieux vaut une césure qu'un texte hors du bandeau. */
  overflow-wrap: anywhere;
}
.corner-ribbon > span::before, .corner-ribbon > span::after {
  content: ""; position: absolute; top: 100%; z-index: -1;
  border: 8px solid transparent; border-top-color: rgba(0, 0, 0, 0.4);
}
.corner-ribbon > span::before { left: 0; }
.corner-ribbon > span::after { right: 0; }