/* ==========================================================================
   LLV — feuille de style commune à toutes les mini-applications
   libre & vert · Des logiciels libres pour une politique verte
   Police : Sanuk (FSI) · Couleurs : vert, rose, blanc
   Usage : <link rel="stylesheet" href="/llv-theme/llv-theme.css">
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face { font-family: "Sanuk"; src: url("font/SanukOT-Light.woff2") format("woff2"), url("font/SanukOT-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sanuk"; src: url("font/SanukOT-Regular.woff2") format("woff2"), url("font/SanukOT-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sanuk"; src: url("font/SanukOT-Bold.woff2") format("woff2"), url("font/SanukOT-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Sanuk"; src: url("font/SanukOT-Fat.woff2") format("woff2"), url("font/SanukOT-Fat.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Jetons (tokens) ---------- */
:root {
  /* Couleurs de la charte (CMJN → écran) */
  --llv-vert: #7ab929;          /* C55 M0 Y100 K5 */
  --llv-rose: #e6007e;          /* C0 M100 Y0 K0 */
  --llv-blanc: #ffffff;         /* C0 M0 Y0 K0 */

  /* Nuances dérivées */
  --llv-vert-clair: #99ce1d;    /* centre lumineux du bandeau */
  --llv-vert-fonce: #529a23;    /* coins du bandeau */
  --llv-vert-texte: #3f7a17;    /* vert lisible sur blanc (liens, titres) */
  --llv-vert-pale: #f1f8e6;     /* fonds légers */
  --llv-rose-fonce: #b80065;    /* survol des boutons roses */
  --llv-rose-pale: #fde6f2;

  /* Neutres légèrement teintés de vert */
  --llv-fond: #ffffff;
  --llv-surface: #f7f9f3;
  --llv-trait: #dfe6d5;
  --llv-texte: #23291d;
  --llv-texte-doux: #5d6655;

  /* Dégradé du bandeau (repris de l'image de référence) */
  --llv-degrade:
    radial-gradient(120% 90% at 100% 0%, rgba(82,154,35,.95) 0%, rgba(82,154,35,0) 55%),
    radial-gradient(110% 80% at 0% 100%, rgba(82,154,35,.95) 0%, rgba(82,154,35,0) 55%),
    linear-gradient(172deg, #78bb22 0%, #97cb1c 38%, #99ce1d 62%, #82c021 100%);

  /* Typographie */
  --llv-police: "Sanuk", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --llv-t-xs: .8125rem;
  --llv-t-s: .9375rem;
  --llv-t-m: 1.0625rem;
  --llv-t-l: 1.375rem;
  --llv-t-xl: 1.875rem;
  --llv-t-xxl: clamp(2rem, 5vw, 2.875rem);

  /* Espacements, rayons, ombres */
  --llv-e1: .25rem; --llv-e2: .5rem; --llv-e3: .75rem; --llv-e4: 1rem;
  --llv-e5: 1.5rem; --llv-e6: 2rem;  --llv-e7: 3rem;
  --llv-rayon: 12px;
  --llv-rayon-s: 8px;
  --llv-ombre: 0 1px 2px rgba(35,41,29,.06), 0 4px 14px rgba(35,41,29,.07);

  /* Liseret rose du bandeau */
  --llv-liseret: 6px;
  --llv-largeur: 1120px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.llv, .llv-app {
  margin: 0;
  font-family: var(--llv-police);
  font-weight: 400;
  font-size: var(--llv-t-m);
  line-height: 1.55;
  color: var(--llv-texte);
  background: var(--llv-fond);
  -webkit-font-smoothing: antialiased;
}
.llv h1, .llv h2, .llv h3, .llv h4 { font-family: var(--llv-police); line-height: 1.15; margin: 0; text-wrap: balance; color: var(--llv-texte); }
.llv h1 { font-size: var(--llv-t-xxl); font-weight: 900; }
.llv h2 { font-size: var(--llv-t-xl); font-weight: 700; }
.llv h3 { font-size: var(--llv-t-l); font-weight: 700; }
.llv h4 { font-size: var(--llv-t-m); font-weight: 700; }
.llv p { margin: 0; max-width: 65ch; }
.llv a { color: var(--llv-vert-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.llv a:hover { color: var(--llv-rose); }
.llv :focus-visible { outline: 3px solid var(--llv-rose); outline-offset: 2px; border-radius: 4px; }
.llv-surtitre { font-size: var(--llv-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--llv-rose); }
.llv-doux { color: var(--llv-texte-doux); }

/* ---------- Conteneur ---------- */
.llv-conteneur { width: 100%; max-width: var(--llv-largeur); margin-inline: auto; padding-inline: max(16px, 4vw); }
.llv-main { padding-block: var(--llv-e6) var(--llv-e7); display: grid; gap: var(--llv-e6); }

/* ---------- Bandeau ---------- */
.llv-bandeau {
  position: relative;
  background: var(--llv-vert-clair);
  background-image: var(--llv-degrade);
  color: var(--llv-blanc);
  border-bottom: var(--llv-liseret) solid var(--llv-rose);
}
.llv-bandeau__haut {
  display: flex; align-items: center; justify-content: space-between; gap: var(--llv-e4);
  flex-wrap: wrap; padding-block: var(--llv-e4);
}
/* Marque : logo balise blanc + signature « libre & vert » + nom de l'app */
.llv-marque { display: flex; align-items: center; gap: var(--llv-e3); color: inherit; text-decoration: none; }
.llv .llv-marque { color: var(--llv-blanc); }
.llv-marque__logo { width: 66px; height: 40px; flex: none; display: block; }
.llv-marque__textes { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.llv-marque__signature { font-weight: 700; font-size: var(--llv-t-xs); letter-spacing: .04em; }
.llv-marque__nom { font-weight: 900; font-size: 1.5rem; letter-spacing: .01em; }
.llv-nav { display: flex; gap: var(--llv-e1); flex-wrap: wrap; }
.llv .llv-nav a {
  color: var(--llv-blanc); text-decoration: none; font-weight: 700; font-size: var(--llv-t-s);
  padding: .4rem .8rem; border-radius: 999px;
}
.llv .llv-nav a:hover { background: rgba(255,255,255,.18); color: var(--llv-blanc); }
.llv .llv-nav a[aria-current="page"] { background: var(--llv-blanc); color: var(--llv-vert-texte); }
.llv-bandeau__titre { padding-block: var(--llv-e5) var(--llv-e6); display: grid; gap: var(--llv-e2); }
.llv .llv-bandeau h1 { color: var(--llv-blanc); text-shadow: 0 1px 2px rgba(40,90,10,.35); }
.llv-bandeau__sous-titre { font-size: var(--llv-t-l); font-weight: 300; color: var(--llv-blanc); text-shadow: 0 1px 2px rgba(40,90,10,.3); }
/* Variante compacte, pour les outils qui ont besoin de place */
.llv-bandeau--compact .llv-bandeau__titre { display: none; }

/* ---------- Boutons ---------- */
.llv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--llv-police); font-weight: 700; font-size: var(--llv-t-s); line-height: 1;
  padding: .8rem 1.25rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.llv .llv-btn { text-decoration: none; }
.llv-btn--rose { background: var(--llv-rose); color: var(--llv-blanc); }
.llv .llv-btn--rose, .llv .llv-btn--rose:hover { color: var(--llv-blanc); }
.llv-btn--rose:hover { background: var(--llv-rose-fonce); }
.llv-btn--vert { background: var(--llv-vert-texte); color: var(--llv-blanc); }
.llv .llv-btn--vert, .llv .llv-btn--vert:hover { color: var(--llv-blanc); }
.llv-btn--vert:hover { background: #336413; }
.llv-btn--contour { background: var(--llv-blanc); color: var(--llv-vert-texte); border-color: var(--llv-vert); }
.llv .llv-btn--contour { color: var(--llv-vert-texte); }
.llv-btn--contour:hover { background: var(--llv-vert-pale); }
.llv-btn--blanc { background: var(--llv-blanc); color: var(--llv-rose); }
.llv-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Cartes ---------- */
.llv-grille { display: grid; gap: var(--llv-e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.llv-carte {
  background: var(--llv-fond); border: 1px solid var(--llv-trait); border-radius: var(--llv-rayon);
  padding: var(--llv-e5); display: grid; gap: var(--llv-e3); align-content: start; min-width: 0;
}
.llv-carte--accent { box-shadow: var(--llv-ombre); border-color: transparent; }

/* ---------- Badges ---------- */
.llv-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--llv-t-xs); font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
.llv-badge--vert { background: var(--llv-vert-pale); color: var(--llv-vert-texte); }
.llv-badge--rose { background: var(--llv-rose-pale); color: var(--llv-rose-fonce); }
.llv-badge--neutre { background: var(--llv-surface); color: var(--llv-texte-doux); border: 1px solid var(--llv-trait); }

/* ---------- Formulaires ---------- */
.llv-champ { display: grid; gap: var(--llv-e2); }
.llv-champ label { font-weight: 700; font-size: var(--llv-t-s); }
.llv-aide { font-size: var(--llv-t-xs); color: var(--llv-texte-doux); }
.llv-input, .llv-select, .llv-textarea {
  font-family: var(--llv-police); font-size: var(--llv-t-m); color: var(--llv-texte);
  width: 100%; padding: .7rem .9rem; background: var(--llv-blanc);
  border: 1.5px solid var(--llv-trait); border-radius: var(--llv-rayon-s);
  transition: border-color .15s, box-shadow .15s;
}
.llv-input:focus, .llv-select:focus, .llv-textarea:focus { outline: none; border-color: var(--llv-vert); box-shadow: 0 0 0 3px rgba(122,185,41,.25); }
.llv-input[aria-invalid="true"] { border-color: var(--llv-rose); }

/* ---------- Tableau ---------- */
.llv-tableau-wrap { overflow-x: auto; border: 1px solid var(--llv-trait); border-radius: var(--llv-rayon); }
.llv-tableau { width: 100%; border-collapse: collapse; font-size: var(--llv-t-s); font-variant-numeric: tabular-nums; }
.llv-tableau th { text-align: left; font-weight: 700; font-size: var(--llv-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--llv-texte-doux); background: var(--llv-surface); padding: .75rem 1rem; border-bottom: 1px solid var(--llv-trait); }
.llv-tableau td { padding: .75rem 1rem; border-bottom: 1px solid var(--llv-trait); }
.llv-tableau tr:last-child td { border-bottom: 0; }
.llv-tableau .num { text-align: right; }

/* ---------- Message / alerte ---------- */
.llv-alerte { display: flex; gap: var(--llv-e3); padding: var(--llv-e4); border-radius: var(--llv-rayon-s); background: var(--llv-rose-pale); color: var(--llv-texte); border-left: 4px solid var(--llv-rose); }
.llv-alerte--info { background: var(--llv-vert-pale); border-left-color: var(--llv-vert); }

/* ---------- Pied de page ---------- */
.llv-pied { border-top: var(--llv-liseret) solid var(--llv-rose); background: var(--llv-vert-fonce); color: var(--llv-blanc); font-size: var(--llv-t-s); }
.llv-pied .llv-conteneur { padding-block: var(--llv-e5); display: flex; justify-content: space-between; gap: var(--llv-e4); flex-wrap: wrap; }
.llv .llv-pied a { color: var(--llv-blanc); }

@media (prefers-reduced-motion: reduce) { .llv * { transition: none !important; } }