/* =========================================================================
   Cap Durable, prototype Loire Tourisme
   Design system reprenant la charte graphique Loire Tourisme.
   Palette : ambre #f9b627 (primaire), encres sombres, gris.
   Accessibilité : contrastes AA, focus visibles, reduced-motion.
   Écoconception : pas de framework, CSS unique, motifs légers.
   ========================================================================= */

:root {
  /* Charte Loire Tourisme */
  --amber:        #f9b627;   /* primaire (fonds, accents) */
  --amber-600:    #e5a413;   /* hover */
  --amber-ink:    #7a5200;   /* ambre foncé lisible sur blanc (texte/lien accent) */
  --amber-soft:   #fef3d6;   /* fond ambre très clair */

  --ink:          #2a2e33;   /* texte principal (proche #32373c) */
  --ink-soft:     #4c525a;   /* texte secondaire */
  --grey:         #6b7178;   /* texte tertiaire / métadonnées */
  --line:         #e7e2d8;   /* filets */
  --line-strong:  #d8d2c4;

  --bg:           #ffffff;
  --bg-warm:      #faf7f0;   /* fond chaud off-white */
  --bg-warm-2:    #f4efe4;

  /* Couleurs des thématiques (fonds pâles + encres foncées, contraste AA) */
  --th-environnement-bg:      #e4f1e4;  --th-environnement-ink: #245c2a;
  --th-social-bg:             #e2eef7;  --th-social-ink:        #1f5478;
  --th-pratiques-internes-bg: #e9e9ee;  --th-pratiques-internes-ink: #40454f;
  --th-engagement-publics-bg: #fbe6df;  --th-engagement-publics-ink: #9a3b1e;
  --th-reconnaissance-bg:     #ece3f3;  --th-reconnaissance-ink: #5a3382;

  --radius:      14px;
  --radius-sm:   9px;
  --radius-pill: 999px;
  --shadow:      0 1px 2px rgba(29,25,10,.05), 0 8px 24px rgba(29,25,10,.07);
  --shadow-sm:   0 1px 2px rgba(29,25,10,.06), 0 3px 10px rgba(29,25,10,.05);
  --focus:       0 0 0 3px #ffffff, 0 0 0 5px var(--ink);

  --font-title: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:  "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --maxw: 1140px;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.85rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--amber-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: .25rem 0; }
strong { font-weight: 700; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Accessibilité : skip link & focus ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 1000;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm);
  transition: top .18s ease; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible {
  outline: none; box-shadow: var(--focus);
}
/* Le focus est déplacé par programme sur le titre de chaque vue (accessibilité SPA) :
   on n'affiche PAS l'anneau visible dans ce cas, car il ne résulte pas d'une navigation clavier. */
main:focus, #contenu:focus,
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible,
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-family: var(--font-title); font-weight: 600; font-size: 1rem;
  padding: .7rem 1.25rem; border-radius: var(--radius-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.1; transition: background .15s, color .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-600); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-warm); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #14171b; color: #fff; }
.btn-sm { padding: .45rem .9rem; font-size: .9rem; }
.btn .ic { width: 1.05em; height: 1.05em; }

/* ---------- Icônes SVG (remplacent tout pictogramme) ---------- */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; color: inherit; }
.ic-sm { width: .85em; height: .85em; }
.eyebrow .ic { width: 1.05rem; height: 1.05rem; vertical-align: -0.2em; }
.card-format .ic { width: 1.05rem; height: 1.05rem; }
.meta-row .ic { width: 1rem; height: 1rem; }
.tag .ic { width: .95rem; height: .95rem; }
.hero-badge .ic, .ecoboussole-banner .eb-ico .ic { width: 1.1rem; height: 1.1rem; }
.porte-ico .ic, .info-card .ic-ico .ic { width: 1.5rem; height: 1.5rem; }
.eb-ico .ic { width: 1.6rem; height: 1.6rem; }
.dl-ico .ic, .rex-ico .ic { width: 1.6rem; height: 1.6rem; }
.es-ico .ic { width: 2.4rem; height: 2.4rem; }
.video-embed .play .ic { width: 1.7rem; height: 1.7rem; }
.aside-card .ic { width: 1rem; height: 1rem; vertical-align: -0.15em; }
.copy-feedback .ic, .etape-check .ic { width: .95rem; height: .95rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.1) blur(6px); border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 78px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-logo { width: 68px; height: auto; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.05; border-left: 2px solid var(--line-strong); padding-left: .7rem; }
.brand-name { font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-tag { font-size: .74rem; color: var(--grey); }
.main-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0; }
.nav-list a {
  display: inline-block; padding: .5rem .8rem; border-radius: var(--radius-pill);
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.nav-list a:hover { background: var(--bg-warm); color: var(--ink); }
.nav-list a[aria-current="page"] { background: var(--amber-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--amber); }
.nav-toggle { display: none; }
.header-search { display: flex; align-items: center; gap: .25rem; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .2rem .3rem .2rem .8rem; }
.header-search input { border: 0; background: transparent; font: inherit; font-size: .9rem; padding: .35rem 0; width: 140px; color: var(--ink); }
.header-search input:focus-visible { box-shadow: none; }
.header-search button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: var(--amber); color: var(--ink); border-radius: var(--radius-pill); cursor: pointer; }
.header-search button:hover { background: var(--amber-600); }

@media (max-width: 900px) {
  .brand-tag { display: none; }
  .nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; background: var(--bg-warm); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
  .nav-toggle-bar::before { position: absolute; top: -6px; } .nav-toggle-bar::after { position: absolute; top: 6px; }
  .main-nav { margin-left: auto; order: 3; }
  .nav-list {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem; display: none;
  }
  .nav-list.open { display: flex; }
  .nav-list a { display: block; padding: .8rem 1rem; }
  .header-search { display: none; }
}
@media (max-width: 520px) { .brand-lockup { display: none; } .brand-logo { width: 82px; } }

/* ---------- Sections & utilitaires ---------- */
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section-warm { background: var(--bg-warm); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.section-head p { color: var(--ink-soft); margin: .2rem 0 0; }
.eyebrow { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; color: var(--amber-ink); margin: 0 0 .4rem; }
.lead { font-size: 1.15rem; color: var(--ink-soft); }
.center { text-align: center; }

/* ---------- Fil d'ariane ---------- */
.breadcrumb { font-size: .85rem; color: var(--grey); padding: 1rem 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: .35rem; color: var(--line-strong); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--grey); }

/* ---------- Hero ---------- */
.hero { background: var(--amber); color: var(--ink); position: relative; overflow: hidden; }
.hero::after { content:""; position:absolute; right:-8%; top:-40%; width:520px; height:520px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 62%); pointer-events:none; }
.hero-inner { padding: clamp(2.2rem, 5vw, 4rem) 0; position: relative; z-index: 1; max-width: 760px; }
.hero h1 { color: var(--ink); margin-bottom: .5rem; }
.hero .lead { color: #4a3a05; font-weight: 600; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.5); color: var(--ink); font-weight: 600; font-size: .85rem; padding: .35rem .8rem; border-radius: var(--radius-pill); margin-bottom: 1rem; }

/* ---------- Bandeau Écoboussole ---------- */
.ecoboussole-banner {
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.2rem 1.4rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; box-shadow: var(--shadow);
}
.ecoboussole-banner .eb-ico { font-size: 1.8rem; }
.ecoboussole-banner p { margin: 0; color: #e9eaec; }
.ecoboussole-banner strong { color: #fff; }
.ecoboussole-banner .btn { margin-left: auto; }

/* ---------- Deux portes (parcours vs libre) ---------- */
.deux-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.porte {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: #fff;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .6rem;
}
.porte .porte-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--amber-soft); font-size: 1.5rem; }
.porte h3 { margin: 0; }
.porte p { color: var(--ink-soft); margin: 0; flex: 1; }
@media (max-width: 720px) { .deux-portes { grid-template-columns: 1fr; } }

/* ---------- Grilles de cartes ---------- */
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Carte ressource ---------- */
.card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card-media {
  height: 96px; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem;
  background: linear-gradient(135deg, var(--bg-warm-2), var(--bg-warm));
}
.card-format { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--ink); background: #fff; padding: .3rem .6rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.card-format .ico { font-size: 1rem; }
.card-duree { font-size: .8rem; color: var(--grey); font-weight: 600; }
.card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-title { font-family: var(--font-title); font-weight: 700; font-size: 1.08rem; margin: 0; line-height: 1.25; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; } /* carte cliquable en entier */
.card { position: relative; }
.card-title a:hover { color: var(--amber-ink); }
.card-resume { color: var(--ink-soft); font-size: .93rem; margin: 0; flex: 1; }
.card-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; position: relative; z-index: 1; }

/* ---------- Tags / chips ---------- */
.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; padding: .22rem .6rem; border-radius: var(--radius-pill); background: var(--bg-warm-2); color: var(--ink-soft); }
.tag-niveau { background: #fff; border: 1px solid var(--line-strong); }
.tag-nouveau { background: var(--amber); color: var(--ink); }
.tag-th { }
.tag-th[data-th="environnement"]      { background: var(--th-environnement-bg);      color: var(--th-environnement-ink); }
.tag-th[data-th="social"]             { background: var(--th-social-bg);             color: var(--th-social-ink); }
.tag-th[data-th="pratiques-internes"] { background: var(--th-pratiques-internes-bg); color: var(--th-pratiques-internes-ink); }
.tag-th[data-th="engagement-publics"] { background: var(--th-engagement-publics-bg); color: var(--th-engagement-publics-ink); }
.tag-th[data-th="reconnaissance"]     { background: var(--th-reconnaissance-bg);     color: var(--th-reconnaissance-ink); }

/* ---------- Barre de filtres (navigation libre) ---------- */
.catalogue-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .catalogue-layout { grid-template-columns: 1fr; } }
.filters { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.1rem; box-shadow: var(--shadow-sm); position: sticky; top: 92px; }
@media (max-width: 860px) { .filters { position: static; } }
.filters h2 { font-size: 1rem; margin: 0 0 .8rem; }
.filter-group { border: 0; padding: 0; margin: 0 0 1.1rem; }
.filter-group legend { font-family: var(--font-title); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grey); margin-bottom: .5rem; padding: 0; }
.filter-opt { display: flex; align-items: center; gap: .55rem; padding: .28rem 0; font-size: .93rem; cursor: pointer; }
.filter-opt input { width: 17px; height: 17px; accent-color: var(--amber-600); }
.filter-count { color: var(--grey); font-size: .8rem; margin-left: auto; }
.filter-opt-label { display: inline-flex; align-items: center; gap: .4rem; }
.filter-opt-label .ic { flex: none; color: var(--ink-soft); }
.filters-reset { font-size: .85rem; }
.filter-searchbar { display: flex; margin-bottom: 1rem; }
.filter-searchbar input { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: .6rem 1rem; font: inherit; font-size: .95rem; }

.catalogue-main .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.result-count { color: var(--ink-soft); font-weight: 600; }
.active-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--amber-soft); border: 1px solid var(--amber); color: var(--ink); border-radius: var(--radius-pill); padding: .25rem .5rem .25rem .75rem; font-size: .82rem; font-weight: 600; }
.chip button { border: 0; background: var(--ink); color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: .7rem; line-height: 1; }
.mobile-filter-toggle { display: none; }
@media (max-width: 860px) {
  .mobile-filter-toggle { display: inline-flex; }
  .filters.collapsed { display: none; }
}
.sort-select { border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: .5rem .9rem; font: inherit; font-size: .9rem; background: #fff; }

/* ---------- Fiche ressource ---------- */
.ressource-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .ressource-layout { grid-template-columns: 1fr; } }
.ressource-header .meta-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
.ressource-corps > * { margin-bottom: 1.1rem; }
.ressource-corps h2 { margin-top: 1.6rem; }
.bloc-conseil { background: var(--amber-soft); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.bloc-conseil-head { display: flex; align-items: center; gap: .45rem; font-family: var(--font-title); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-ink); margin: 0 0 .4rem; }
.bloc-conseil-head .ic { width: 1.15rem; height: 1.15rem; }
.bloc-conseil p:last-child { margin-bottom: 0; }
.bloc-etapes { counter-reset: etape; list-style: none; padding-left: 0; }
.bloc-etapes li { counter-increment: etape; position: relative; padding-left: 2.4rem; margin-bottom: .7rem; }
.bloc-etapes li::before { content: counter(etape); position: absolute; left: 0; top: -1px; width: 1.7rem; height: 1.7rem; background: var(--amber); color: var(--ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: .9rem; }
.bloc-citation { border-left: 4px solid var(--ink); padding: .4rem 0 .4rem 1.2rem; font-size: 1.12rem; font-style: italic; color: var(--ink); }
.bloc-citation cite { display: block; font-style: normal; font-size: .9rem; color: var(--grey); margin-top: .5rem; font-weight: 600; }
.video-embed { aspect-ratio: 16/9; background: var(--ink); border-radius: var(--radius); display: grid; place-items: center; color: #fff; text-align: center; padding: 1rem; }
.video-embed .play { width: 64px; height: 64px; border-radius: 50%; background: var(--amber); color: var(--ink); display: grid; place-items: center; margin: 0 auto .6rem; font-size: 1.6rem; }
.download-box { display: flex; align-items: center; gap: 1rem; background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.download-box .dl-ico { font-size: 1.8rem; }
.rex-box { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; gap: .8rem; align-items: center; }
.rex-box .rex-ico { font-size: 1.6rem; }

/* Aside fiche */
.aside-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); margin-bottom: 1.2rem; }
.aside-card h2 { font-size: 1rem; margin-bottom: .7rem; }
.permalink { display: flex; gap: .4rem; }
.permalink input { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .5rem .6rem; font-size: .8rem; color: var(--grey); background: var(--bg-warm); }
.copy-feedback { font-size: .82rem; color: var(--th-environnement-ink); font-weight: 600; margin-top: .4rem; min-height: 1.2em; }
.progress-note { font-size: .85rem; color: var(--grey); }

/* ---------- Parcours ---------- */
.parcours-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.4rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .6rem; }
.parcours-card .pc-steps { font-size: .85rem; color: var(--grey); font-weight: 600; }
.parcours-progress { height: 8px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.parcours-progress > span { display: block; height: 100%; background: var(--amber); }
.etapes-timeline { list-style: none; padding: 0; margin: 1.5rem 0; }
.etape-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.etape-item:last-child { border-bottom: 0; }
.etape-badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; background: var(--bg-warm-2); color: var(--ink); border: 2px solid var(--line-strong); }
.etape-item.done .etape-badge { background: var(--amber); border-color: var(--amber); }
.etape-content { flex: 1; }
.etape-content h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.etape-content .etape-meta { font-size: .85rem; color: var(--grey); }
.etape-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); cursor: pointer; }

/* ---------- Quiz ---------- */
.quiz-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.6rem; box-shadow: var(--shadow-sm); max-width: 720px; }
.quiz-question { margin-bottom: 1.4rem; }
.quiz-question > p { font-weight: 700; font-family: var(--font-title); font-size: 1.1rem; }
.quiz-choices { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.quiz-choice { display: flex; align-items: center; gap: .7rem; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); padding: .7rem 1rem; cursor: pointer; transition: border-color .12s, background .12s; }
.quiz-choice:hover { border-color: var(--amber); background: var(--amber-soft); }
.quiz-choice input { width: 18px; height: 18px; accent-color: var(--amber-600); }
.quiz-choice.correct { border-color: var(--th-environnement-ink); background: var(--th-environnement-bg); }
.quiz-choice.wrong { border-color: var(--th-engagement-publics-ink); background: var(--th-engagement-publics-bg); }
.quiz-explication { margin-top: .6rem; font-size: .92rem; background: var(--bg-warm); border-radius: var(--radius-sm); padding: .7rem 1rem; display: none; }
.quiz-explication.show { display: block; }
.quiz-score { font-size: 1.3rem; font-weight: 700; font-family: var(--font-title); }

/* ---------- Défis (mécanique de jeu) ---------- */
.defi-teaser { background: var(--ink); color: #e7e8ea; border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; align-items: center; box-shadow: var(--shadow); }
.defi-teaser h2 { color: #fff; margin: .1rem 0 .5rem; }
.defi-teaser p { color: #b9bcc1; margin-bottom: 1rem; }
.defi-teaser-cadrans { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.defi-teaser-chip { background: rgba(255,255,255,.05); border: 1px solid rgba(249,182,39,.4); color: #fff; border-radius: var(--radius-sm); padding: .8rem .7rem; font-family: var(--font-title); font-weight: 600; font-size: .85rem; text-align: center; }
@media (max-width: 720px) { .defi-teaser { grid-template-columns: 1fr; } }

.defi-contexte { background: var(--bg-warm); border-left: 4px solid var(--ink); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; font-size: 1.08rem; margin: 1rem 0 1.6rem; }
.defi-q { margin-top: 1.4rem; }
.defi-options { display: grid; gap: .7rem; margin: 1rem 0; }
.defi-option { display: flex; gap: .9rem; align-items: flex-start; text-align: left; background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.1rem; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; font: inherit; width: 100%; }
.defi-option:hover { border-color: var(--amber); background: var(--amber-soft); }
.defi-option.chosen { border-color: var(--amber); background: var(--amber-soft); box-shadow: var(--shadow-sm); }
.defi-lettre { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; }
.defi-option.chosen .defi-lettre { background: var(--amber); color: var(--ink); }
.defi-opt-txt { display: flex; flex-direction: column; gap: .15rem; }
.defi-opt-txt span { color: var(--ink-soft); font-size: .93rem; }

.defi-reveal { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.defi-reveal h2 { margin-bottom: .3rem; }
.defi-reveal-lead { color: var(--ink-soft); margin-bottom: 1rem; }
.defi-cadrans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.6rem; }
@media (max-width: 640px) { .defi-cadrans { grid-template-columns: 1fr 1fr; } }
.defi-cadran { border-radius: var(--radius-sm); padding: .8rem .9rem; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: .3rem; }
.defi-cadran-nom { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--grey); font-family: var(--font-title); }
.defi-cadran-val { font-weight: 600; font-size: .95rem; }
.defi-cadran[data-ton="favorable"] { background: var(--th-environnement-bg); border-color: transparent; }
.defi-cadran[data-ton="favorable"] .defi-cadran-val { color: var(--th-environnement-ink); }
.defi-cadran[data-ton="vigilance"] { background: var(--th-engagement-publics-bg); border-color: transparent; }
.defi-cadran[data-ton="vigilance"] .defi-cadran-val { color: var(--th-engagement-publics-ink); }
.defi-cadran[data-ton="neutre"] { background: var(--bg-warm-2); }

.defi-cohorte { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.4rem; }
.defi-cohorte-title { font-family: var(--font-title); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin: 0 0 .7rem; display: flex; align-items: center; gap: .4rem; }
.defi-cohorte-row { display: flex; align-items: center; gap: .7rem; margin: .45rem 0; }
.defi-cohorte-lettre { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-warm-2); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .8rem; font-family: var(--font-title); }
.defi-cohorte-track { flex: 1; height: 10px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.defi-cohorte-track > span { display: block; height: 100%; background: var(--line-strong); }
.defi-cohorte-pct { flex: none; width: 96px; text-align: right; font-size: .85rem; color: var(--grey); font-weight: 600; }
.defi-cohorte-row.is-me .defi-cohorte-lettre { background: var(--amber); }
.defi-cohorte-row.is-me .defi-cohorte-track > span { background: var(--amber); }
.defi-cohorte-row.is-me .defi-cohorte-pct { color: var(--ink); }

.defi-engagement { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-top: 1.4rem; }
.defi-engagement h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-size: 1.2rem; }
.defi-engagement h2 .ic { width: 1.2rem; height: 1.2rem; color: var(--amber-ink); }
.defi-engagements { list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; gap: .5rem; }
.defi-eng-opt { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .7rem .9rem; cursor: pointer; }
.defi-eng-opt input { width: 18px; height: 18px; accent-color: var(--amber-600); margin-top: .1rem; flex: none; }
.defi-commit-feedback { margin-top: .7rem; font-weight: 600; color: var(--th-environnement-ink); min-height: 1.2em; display: flex; align-items: center; gap: .35rem; }

/* ---------- Admin (maquette) ---------- */
.admin-shell { background: var(--bg-warm); min-height: 60vh; }
.admin-note { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.admin-note strong { color: var(--amber); }
.admin-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table th, .admin-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.admin-table th { background: var(--bg-warm); font-family: var(--font-title); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); }
.admin-table tr:last-child td { border-bottom: 0; }
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; background: var(--line-strong); border-radius: var(--radius-pill); transition: background .15s; }
.toggle .track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: var(--shadow-sm); }
.toggle input:checked + .track { background: var(--amber); }
.toggle input:checked + .track::before { transform: translateX(18px); }
.toggle input:focus-visible + .track { box-shadow: var(--focus); }

/* ---------- Blocs génériques ---------- */
.info-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 720px){ .info-cards { grid-template-columns: 1fr; } }
.info-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.3rem; box-shadow: var(--shadow-sm); }
.info-card .ic-ico { font-size:1.6rem; }
.info-card h3 { margin:.4rem 0 .3rem; font-size:1.05rem; }
.info-card p { color: var(--ink-soft); font-size:.93rem; margin:0; }

.callout { border:1px solid var(--line); border-left:4px solid var(--amber); background:#fff; border-radius: var(--radius-sm); padding:1.1rem 1.3rem; }
.empty-state { text-align:center; padding:3rem 1rem; color: var(--grey); }
.empty-state .es-ico { font-size: 2.4rem; }

.prose { max-width: 760px; }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.3rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #d7d9dc; margin-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; padding: 2.6rem 0 2rem; }
@media (max-width: 900px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { filter: none; margin-bottom: .8rem; }
.footer-brand p { font-size: .92rem; color: #b9bcc1; }
.footer-col h2 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: .4rem 0; }
.footer-col a { color: #d7d9dc; text-decoration: none; }
.footer-col a:hover { color: var(--amber); text-decoration: underline; }
.parcours-etapes-footer { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.parcours-etapes-footer li { display: flex; align-items: center; gap: .5rem; margin: .45rem 0; font-size: .9rem; color: #b9bcc1; }
.parcours-etapes-footer .etape-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #3a3f45; color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.parcours-etapes-footer .etape-active { color: #fff; font-weight: 600; }
.parcours-etapes-footer .etape-active .etape-num { background: var(--amber); color: var(--ink); }
.parcours-etapes-footer .etape-tool { font-size: .75rem; background: #3a3f45; padding: .1rem .45rem; border-radius: var(--radius-pill); }
.parcours-etapes-footer .etape-active .etape-tool { background: var(--amber); color: var(--ink); }
.news-form { display: flex; gap: .4rem; margin: .6rem 0 .4rem; }
.news-form input { flex: 1; border: 0; border-radius: var(--radius-pill); padding: .55rem .9rem; font: inherit; font-size: .9rem; }
.news-form button { border: 0; background: var(--amber); color: var(--ink); font-weight: 700; border-radius: var(--radius-pill); padding: .55rem 1rem; cursor: pointer; }
.footer-mini { font-size: .78rem; color: #90969d; }
.badge-demo { font-size: .68rem; background: var(--amber); color: var(--ink); border-radius: var(--radius-pill); padding: .05rem .4rem; font-weight: 700; vertical-align: middle; }
.footer-legal { border-top: 1px solid #3a3f45; font-size: .82rem; color: #90969d; }
.footer-legal .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.footer-legal a { color: #b9bcc1; }

/* ---------- Divers ---------- */
.stack-sm > * + * { margin-top: .6rem; }
.mt-2 { margin-top: 2rem; } .mt-1 { margin-top: 1rem; } .mb-0 { margin-bottom: 0; }
.pill-legende { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-size:.85rem; color:var(--grey); }