/* For Good Connexion Day — design system du site public (sans PII). */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Montserrat:wght@800;900&display=swap');

/* Charte « For Good Connexion Day » (mode sombre) : noir profond du poster,
   orange Orange CI en couleur principale, blanc pour le texte, et les pops
   du collage (bleu baskets, rose coeur, jaune étoile, vert). */
:root{color-scheme:dark;
  --bg:#0d0d10; --card:#17171b; --card2:#212128; --border:#2d2d35;
  --txt:#f5f5f5; --muted:#a0a0aa;
  --blue:#ff7900; --violet:#38bdf8; --pink:#f472b6; --amber:#fbbf24; --green:#34d399; --orange:#ff7900;
  --grad:linear-gradient(90deg,#ff7900,#ffb300);
  --logo-rainbow:linear-gradient(90deg,#ff7900,#fbbf24,#34d399,#38bdf8,#f472b6,#ff7900);
  --glow:rgba(255,121,0,.45); --glow2:rgba(255,179,0,.30);
  --prog-stripes:linear-gradient(90deg,#ff7900,#fbbf24,#34d399,#38bdf8,#f472b6);
  /* surfaces dérivées (thème-dépendantes) */
  --nav-bg:rgba(13,13,16,.82); --stat-bg:rgba(13,13,16,.55);
  --prog-bg:linear-gradient(135deg,#141418,#201408); --shadow:rgba(0,0,0,.5);
  --stripe-a:#17171b; --stripe-b:#212128;
}
/* Mode clair — même charte que le sombre, version blocs blancs du poster :
   fond neutre, texte noir, orange Orange CI en principal (lisibilité : teintes
   légèrement assombries sur fond blanc). Piloté par <html data-theme="light">. */
:root[data-theme="light"]{color-scheme:light;
  --bg:#f5f5f4; --card:#ffffff; --card2:#e7e5e4; --border:#d6d3d1;
  --txt:#1c1917; --muted:#57534e;
  --blue:#ea5504; --violet:#0284c7; --pink:#db2777; --amber:#b45309; --green:#059669; --orange:#ff7900;
  --grad:linear-gradient(90deg,#ff7900,#ffb300);
  --logo-rainbow:linear-gradient(90deg,#ea5504,#f59e0b,#059669,#0284c7,#db2777,#ea5504);
  --glow:rgba(255,121,0,.25); --glow2:rgba(255,121,0,.18);
  --prog-stripes:linear-gradient(90deg,#ff7900,#fbbf24,#34d399,#38bdf8,#f472b6);
  --nav-bg:rgba(245,245,244,.85); --stat-bg:rgba(255,255,255,.72);
  --prog-bg:linear-gradient(135deg,#ffffff,#fff7ed); --shadow:rgba(28,25,23,.14);
  --stripe-a:#e7e5e4; --stripe-b:#f5f5f4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
.wrap900{max-width:900px;margin:0 auto}

/* ---- en-tête ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav .in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Logo de menu : le dièse de marque, dans l'écriture du « For Good ». */
.nav .mini{font-family:'Caveat','Segoe Script',cursive;font-weight:700;font-size:1.62rem;letter-spacing:.01em;text-decoration:none;color:var(--blue);white-space:nowrap}
.nav .mini:hover{color:var(--violet)}
.nav .links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a.lnk{text-decoration:none;font-size:.86rem;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:999px;transition:.18s}
.nav a.lnk:hover{color:var(--txt);background:var(--card2)}
.nav a.lnk.act{color:#fff;background:var(--grad)}
.nav a.adm{font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 13px;border:1px solid var(--border);border-radius:999px;transition:.18s}
.nav a.adm:hover{color:var(--amber);border-color:var(--amber)}
.theme-toggle{cursor:pointer;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:999px;padding:7px 13px;transition:.18s;white-space:nowrap}
.theme-toggle:hover{color:var(--txt);border-color:var(--blue)}

/* ---- logo typographique ---- */
header.hero{text-align:center;padding:52px 20px 26px}
.logo{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1;margin-bottom:16px}
.logo .lg-for{font-family:'Caveat','Segoe Script',cursive;font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:700;color:var(--blue);transform:rotate(-3deg);text-shadow:0 0 26px var(--glow)}
.logo .lg-connexion{font-family:'Montserrat','Segoe UI',sans-serif;font-weight:900;font-size:clamp(2.3rem,7vw,4.4rem);letter-spacing:.06em;text-transform:uppercase;background:var(--logo-rainbow);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:logoShift 8s linear infinite;filter:drop-shadow(0 6px 22px var(--glow2))}
@keyframes logoShift{to{background-position:300% 0}}
.logo .lg-day{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(.85rem,1.9vw,1.1rem);letter-spacing:.55em;padding-left:.55em;text-transform:uppercase;color:var(--amber);margin-top:12px;display:flex;align-items:center;gap:14px}
.logo .lg-day::before,.logo .lg-day::after{content:'';height:2px;width:46px;border-radius:2px;background:linear-gradient(90deg,transparent,#fbbf24)}
.logo .lg-day::after{background:linear-gradient(90deg,#fbbf24,transparent)}
.badge{display:inline-block;background:var(--grad);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;padding:4px 14px;border-radius:999px;margin:2px 0 20px}
p.intro{color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:700px;margin:0 auto}

/* ---- bandeau programme ---- */
.prog{background:var(--prog-bg);border:1px solid var(--border);border-radius:20px;padding:26px 22px;margin:26px auto 8px;position:relative;overflow:hidden}
.prog::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--prog-stripes)}
.prog .t{font-size:.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.prog .t b{color:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{background:var(--stat-bg);border:1px solid var(--border);border-radius:14px;padding:18px 12px;text-align:center}
.stat .v{font-size:1.75rem;font-weight:800}
.stat .l{color:var(--muted);font-size:.78rem;margin-top:6px;line-height:1.4}
.stat.s1 .v{color:var(--amber)} .stat.s2 .v{color:var(--blue)} .stat.s3 .v{color:var(--violet)} .stat.s4 .v{color:var(--green)} .stat.s5 .v{color:var(--pink)}

/* ---- sections & cartes ---- */
h2.sec{font-size:1.12rem;font-weight:700;margin:46px 0 18px;display:flex;align-items:center;gap:10px}
h2.sec .dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--blue)}
.navcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.navcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 24px;text-decoration:none;color:var(--txt);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.navcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-grad,var(--grad))}
.navcard:hover{transform:translateY(-4px);border-color:var(--accent,var(--blue));box-shadow:0 10px 34px var(--shadow)}
.navcard .ic{font-size:1.9rem;margin-bottom:12px}
.navcard h3{font-size:1.08rem;margin-bottom:8px}
.navcard p{color:var(--muted);font-size:.86rem;line-height:1.6;margin-bottom:14px}
.navcard .go{font-weight:700;font-size:.86rem;color:var(--accent,var(--blue))}
.navcard.amber{--accent:var(--amber);--accent-grad:linear-gradient(90deg,var(--amber),var(--orange))}
.navcard.violet{--accent:var(--violet);--accent-grad:linear-gradient(90deg,var(--violet),var(--pink))}
.navcard.green{--accent:var(--green);--accent-grad:linear-gradient(90deg,#10b981,#34d399)}

/* ---- grille des lieux ---- */
.lieux{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.lieu{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:12px 14px;text-decoration:none;transition:.18s}
.lieu:hover{border-color:var(--blue);transform:translateY(-2px)}
.lieu .no{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;background:var(--card2);color:var(--blue)}
.lieu b{display:block;font-size:.85rem;line-height:1.25}
.lieu span{color:var(--muted);font-size:.72rem}

/* ---- chips / zones ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 22px}
.chip{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:600;cursor:pointer;transition:.18s}
.chip:hover{color:var(--txt);border-color:var(--blue)}
.chip.act{background:var(--grad);color:#fff;border-color:transparent}
.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:3px 11px}

/* ---- galerie photos ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.gal figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;background:var(--card)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal figure:hover img{transform:scale(1.05)}
.ph-plain{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--muted);font-size:.8rem;width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--stripe-a),var(--stripe-a) 14px,var(--stripe-b) 14px,var(--stripe-b) 28px)}

/* ---- bandeau confidentialité ---- */
.anon{display:flex;align-items:center;gap:10px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.35);border-radius:12px;padding:11px 16px;font-size:.83rem;color:var(--green);margin:26px 0}

/* ---- pied de page ---- */
footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:.8rem;line-height:1.9}
footer a{color:var(--muted)}

/* ---- cartes "récit" (rapport) ---- */
.recit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.parc{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.parc img{width:100%;height:210px;object-fit:cover}
.parc .bd{padding:20px}
.parc h3{font-size:1.02rem;margin-bottom:8px}
.parc p{color:var(--muted);font-size:.86rem;line-height:1.65}

@media (max-width:640px){
  header.hero{padding-top:34px}
  .prog .stats{grid-template-columns:repeat(2,1fr)}
}