/* ouaisfi.eu — Veille citoyenne
   Nec plus ultra : pas de chevauchements, lisible, sobre, accessible. */

/* ===== Base / tokens ===== */
:root{
  --bg: #ffffff;
  --fg: #16181d;
  --muted:#5a667a;
  --card:#f6f7f9;
  --line:#e4e7ee;
  --accent:#b38cff;      /* lilas */
  --ok:#32d485;          /* vert tendre */
  --ok-strong:#0fb66a;
  --shadow: 0 8px 30px rgba(0,0,0,.07);
  --radius: 16px;
  --radius-sm: 12px;
  --max: 1100px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --fg:#e8ebf1;
    --muted:#9aa6bd;
    --card:#141821;
    --line:#1f2531;
    --shadow: 0 10px 40px rgba(0,0,0,.35);
  }
}

/* Bascule manuelle via [data-theme="dark"] */
[data-theme="dark"]{
  --bg:#0f1115; --fg:#e8ebf1; --muted:#9aa6bd; --card:#141821; --line:#1f2531;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* ===== Resets doux ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; height:auto; display:block }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }

/* Motion & contraste */
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important } }
@media (prefers-contrast: more){
  :root{ --shadow:none; }
}

/* ===== Layout ===== */
.wrap{ max-width:var(--max); margin:auto; padding:28px 20px; }

/* Header sticky propre, sans chevauchements */
header.nav{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(120%) blur(6px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line);
}
.nav .bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; color:var(--fg); }
.brand .logo{
  width:28px; height:28px; border:2px solid var(--ok); border-radius:50%;
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.brand .logo::after{ content:"▲"; font-size:.8rem; color:var(--accent); transform:translateY(-1px); }
.nav .links{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.nav a{ color:var(--fg); text-decoration:none }

/* Boutons */
.btn, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.62rem .9rem; border-radius:999px; border:2px solid transparent;
  font-weight:600; text-decoration:none; line-height:1;
  white-space:nowrap;
}
.btn{ background:var(--ok); color:#062b17; border-color:var(--ok-strong); }
.btn:hover{ filter:saturate(110%) brightness(1.05) }
.btn-outline{ background:transparent; color:var(--fg); border-color:var(--ok); }

/* Bascule thème — toujours cliquable, jamais par-dessus le menu */
.toggle{
  border:2px solid var(--accent); color:var(--accent); background:transparent;
  border-radius:999px; padding:.45rem .7rem; font-weight:700; cursor:pointer;
  position:relative; z-index:0;
}

/* Hero */
.hero{ padding:42px 0 18px; display:grid; gap:var(--space-3); }
.hero h1{
  margin:0;
  font-size:clamp(1.8rem, 2.2rem + 1vw, 3rem);
  line-height:1.1; letter-spacing:-.02em;
}
.tagline{ color:var(--muted); max-width:70ch }
.cta{ display:flex; gap:12px; flex-wrap:wrap }

/* Pill */
.pill{
  display:inline-block; border:2px solid var(--accent); color:var(--accent);
  padding:.2rem .55rem; border-radius:999px; font-size:.85rem; font-weight:700; letter-spacing:.02em;
}

/* ===== Grille robuste (zéro chevauchement) ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--space-5);                /* espace suffisant entre cartes */
  margin-top: var(--space-4);
  align-items:start;                   /* évite l’étirement vertical inutile */
}

/* Colonnes utilitaires */
.col-4{ grid-column: span 4 }
.col-6{ grid-column: span 6 }
.col-12{ grid-column: span 12 }

/* Responsive : mono-colonne < 900px */
@media (max-width: 900px){
  .col-4,.col-6{ grid-column: span 12 }
  .grid{ gap: var(--space-4); }
}

/* Cartes : pas d’overlap, coins nets, ombre douce */
.card{
  position:relative;
  background:var(--card);
  border:2px solid var(--ok);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:grid; gap:10px;
  overflow:clip;            /* coupe proprement déco interne */
  isolation:isolate;        /* nouveau contexte pour éviter superpositions */
}
.card h3{ margin:0; font-size:1.1rem }
.card p{ margin:0; color:var(--muted) }
.list{ margin:0; padding-left:18px; color:var(--muted) }
.list li{ margin:.35rem 0 }

/* Blocs spéciaux */
.notice{
  border:2px dashed var(--accent);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--muted);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Sections */
section h2{
  font-size:1.4rem; margin:8px 0 10px; letter-spacing:.01em;
}

/* Footer */
footer{
  margin-top:var(--space-6);
  padding:24px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
}

/* Ancrages : décalage pour header sticky */
:target{ scroll-margin-top: 80px; }

/* Liens de texte */
a.link{ color:var(--fg); text-decoration-color: var(--accent); text-underline-offset:3px; }

/* ===== Extras optionnels ===== */

/* 1) Hauteurs uniformes par rangée (décommente si tu veux) */
/*
.grid{ grid-auto-rows:1fr; }
.card{ height:100%; }
*/

/* 2) Soulignement uniquement au survol : */
/*
a:not(.btn):not(.btn-outline):hover{ text-decoration:underline; text-decoration-color:var(--accent); }
*/


/* Bouton thème : contraste costaud + position stable */
.toggle{
  border:2px solid var(--accent);
  color: var(--bg);                  /* texte lisible sur fond accent */
  background: var(--accent);
  border-radius: 999px;
  padding: .55rem .8rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}
.toggle:hover{ filter: saturate(115%) brightness(1.03); }
.toggle:focus-visible{ outline:3px solid var(--ok); outline-offset:2px; }

/* En sombre, on inverse pour garder un punch visuel */
[data-theme="dark"] .toggle{
  background: var(--ok);
  border-color: var(--ok-strong);
  color: #062b17;
}


/* Import police rétro */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Mode NEON rétro-terminal */
[data-theme="neon"]{
  --bg: #050507;
  --fg: #41ff8f;            /* vert moniteur */
  --muted: #3ddb75;
  --card:#08080d;
  --line:#141427;
  --accent:#d2a9ff;         /* lilas néon pour éléments importants */
  --ok:#41ffa3;
  --ok-strong:#10d07d;
  --shadow:none;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.5px;

  background:
    radial-gradient(1000px 800px at 15% 20%, rgba(210,169,255,.06), transparent 60%),
    radial-gradient(1000px 800px at 85% 80%, rgba(65,255,163,.06), transparent 60%),
    #050507;
  color: var(--fg);
}

/* Texte par défaut vert phosphore */
[data-theme="neon"] body,
[data-theme="neon"] p,
[data-theme="neon"] li,
[data-theme="neon"] a:not(.btn):not(.btn-outline) {
  color: var(--fg);
}

/* Titres, gras, italique, soulignés, <strong>, <em>, <mark>, <u> en lilas */
[data-theme="neon"] h1,
[data-theme="neon"] h2,
[data-theme="neon"] h3,
[data-theme="neon"] h4,
[data-theme="neon"] strong,
[data-theme="neon"] b,
[data-theme="neon"] em,
[data-theme="neon"] i,
[data-theme="neon"] u,
[data-theme="neon"] mark,
[data-theme="neon"] .pill {
  color: var(--accent) !important;
  text-shadow:
    0 0 6px var(--accent),
    0 0 14px rgba(210,169,255,.6);
}

/* Soulignés et mark avec effet lumineux */
[data-theme="neon"] u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
[data-theme="neon"] mark {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  padding: 0 .15em;
  border-radius: 2px;
}

/* Halo global + animation légère */
[data-theme="neon"] body {
  text-shadow:
    0 0 3px rgba(65,255,143,.35),
    0 0 6px rgba(65,255,143,.25);
  animation: neon-terminal-pulse 3s ease-in-out infinite;
}

/* Cartes et boutons gardent leurs halos actuels */
[data-theme="neon"] .card{
  border-color: var(--accent);
  box-shadow:
    0 0 10px rgba(210,169,255,.4),
    0 0 18px rgba(65,255,163,.25);
}

/* Animation de pulsation lente */
@keyframes neon-terminal-pulse {
  0%, 100% {
    text-shadow:
      0 0 3px rgba(65,255,143,.3),
      0 0 6px rgba(65,255,143,.2);
  }
  50% {
    text-shadow:
      0 0 6px rgba(65,255,143,.45),
      0 0 12px rgba(65,255,143,.3);
  }
}