/* =================================================================
   Primes & Subventions — style commun des pages récentes
   (accueil, PAC serres, aides CARSAT), aligné sur les landing pages
   historiques (prime-scooter, prime-bateau, prime-salledebain,
   renovation-tertiaire) : Clash Display + General Sans, fond clair
   quadrillé, boutons pilules, cartes arrondies, étiquettes en mono.
   À charger APRÈS la feuille de style propre à chaque page.
   Une couleur d'accent par page : classe sur <body>.
   ================================================================= */

/* ---------- Polices (hébergées sur le site, licence ITF FFL) ---------- */
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Jetons communs ---------- */
:root {
  --t-display: "Clash Display", system-ui, sans-serif;
  --t-body: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-radius: 22px;
  --t-radius-sm: 14px;
  --t-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-white: #ffffff;
}

/* Accueil du portail : bleu nuit + sarcelle du logo */
.theme-portail {
  --t-bg: #f2f5f3; --t-bg-3: #e8eeeb; --t-surface-2: #f2f6f4;
  --t-ink: #13303a; --t-ink-rgb: 19 48 58;
  --t-ink-soft: rgb(19 48 58 / 0.66); --t-ink-faint: rgb(19 48 58 / 0.48);
  --t-accent: #187568; --t-accent-deep: #115a50; --t-accent-rgb: 24 117 104;
  --t-accent-2: #2a9d8f; --t-accent-2-rgb: 42 157 143;
}
/* PAC serres : vert végétal */
.theme-pac {
  --t-bg: #f3f6ee; --t-bg-3: #e9efe1; --t-surface-2: #f3f7ec;
  --t-ink: #12261a; --t-ink-rgb: 18 38 26;
  --t-ink-soft: rgb(18 38 26 / 0.66); --t-ink-faint: rgb(18 38 26 / 0.48);
  --t-accent: #2f7a28; --t-accent-deep: #245f1f; --t-accent-rgb: 47 122 40;
  --t-accent-2: #7fb43a; --t-accent-2-rgb: 127 180 58;
}
/* Aides CARSAT : orange prévention */
.theme-carsat {
  --t-bg: #f7f4ef; --t-bg-3: #efe8de; --t-surface-2: #faf6f0;
  --t-ink: #1d2433; --t-ink-rgb: 29 36 51;
  --t-ink-soft: rgb(29 36 51 / 0.68); --t-ink-faint: rgb(29 36 51 / 0.50);
  --t-accent: #c2410c; --t-accent-deep: #9a3412; --t-accent-rgb: 194 65 12;
  --t-accent-2: #e8912d; --t-accent-2-rgb: 232 145 45;
}
.theme-portail, .theme-pac, .theme-carsat {
  --t-line: rgb(var(--t-ink-rgb) / 0.10);
  --t-line-2: rgb(var(--t-ink-rgb) / 0.17);
  --t-shadow: 0 1px 2px rgb(var(--t-ink-rgb) / 0.04), 0 16px 36px -28px rgb(var(--t-ink-rgb) / 0.22);
  --t-shadow-hover: 0 26px 50px -28px rgb(var(--t-ink-rgb) / 0.32);
  --t-shadow-accent: 0 14px 36px -16px rgb(var(--t-accent-rgb) / 0.38);

  /* Variables propres à chaque page, réalignées sur le thème */
  --ps-ink: var(--t-ink); --ps-brand: var(--t-accent); --ps-brand-dark: var(--t-accent-deep);
  --ps-paper: var(--t-bg); --ps-muted: var(--t-ink-soft); --ps-line: var(--t-line-2); --ps-focus: var(--t-ink);
  --ps-font: var(--t-body); --ps-r-control: var(--t-radius-sm); --ps-r-card: var(--t-radius); --ps-r-feature: var(--t-radius);
  --brand: var(--t-ink); --brand-hover: var(--t-accent-deep); --accent: rgb(var(--t-accent-2-rgb) / 0.55);
  --bg: var(--t-bg); --text: var(--t-ink); --muted: var(--t-ink-soft); --border: var(--t-line-2);
  --ink: var(--t-ink); --ink-soft: var(--t-ink-soft); --green: var(--t-accent); --green-dark: var(--t-accent-deep);
  --line: var(--t-line-2); --bg-2: var(--t-bg-3); --font: var(--t-body);
  --r-control: var(--t-radius-sm); --r-card: var(--t-radius); --radius: var(--t-radius); --shadow: var(--t-shadow);
}

/* ---------- Base ---------- */
body { font-family: var(--t-body); background: var(--t-bg); color: var(--t-ink); text-rendering: optimizeLegibility; }
::selection { background: var(--t-accent); color: var(--t-white); }
h1, h2, h3, h4, .result__big { font-family: var(--t-display); font-weight: 600; color: var(--t-ink); }
h1 { letter-spacing: -0.025em; line-height: 1.02; text-wrap: balance; }
h2 { letter-spacing: -0.02em; line-height: 1.04; }
h3 { letter-spacing: -0.01em; }
h1 em, h2 em, em.hl { font-style: normal; color: var(--t-accent); }
mark { background: none; color: var(--t-accent); padding: 0; }
a { color: var(--t-accent); }
a:hover { color: var(--t-accent-deep); }
:focus-visible { outline-color: var(--t-ink); }

/* Étiquettes : pastille en police mono, comme les anciennes pages */
.eyebrow, .overline, .kicker {
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  padding: 7px 14px; margin-bottom: 1.1rem;
  font-family: var(--t-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase;
  color: var(--t-accent); background: rgb(var(--t-accent-rgb) / 0.06);
  border: 1px solid var(--t-line-2); border-radius: 18px; max-width: 100%;
}
.eyebrow::before, .overline::before, .kicker::before {
  content: ""; display: block; flex: none; width: 7px; height: 7px; margin: 0;
  border-radius: 50%; background: var(--t-accent); animation: t-pulse 2.4s infinite;
}
@keyframes t-pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--t-accent-rgb) / 0.30); }
  70% { box-shadow: 0 0 0 8px rgb(var(--t-accent-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--t-accent-rgb) / 0); }
}
.section-head .eyebrow, .section-head .overline, .section-head .kicker { margin-bottom: 1.1rem; }

/* ---------- Boutons pilules ---------- */
.btn {
  border-radius: 100px; border-width: 1px; padding: 0.85rem 1.6rem;
  font-family: var(--t-body); font-weight: 600; letter-spacing: -0.01em;
  background: var(--t-accent); color: var(--t-white); box-shadow: var(--t-shadow-accent);
  transition: transform .35s var(--t-ease), box-shadow .35s var(--t-ease), background .3s;
}
.btn:hover { background: var(--t-accent-deep); color: var(--t-white); transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgb(var(--t-accent-rgb) / 0.50); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .35s var(--t-ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--t-ink); border: 1px solid var(--t-line-2); box-shadow: none; }
.btn--ghost:hover { background: var(--t-white); color: var(--t-ink); border-color: var(--t-line-2); box-shadow: none; }
.btn--small, .btn--sm { padding: 0.6rem 1.15rem; }
.btn[disabled] { transform: none; }

/* ---------- En-tête ---------- */
.site-header, .header {
  background: rgb(255 255 255 / 0.78); border-bottom: 1px solid var(--t-line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.nav__list a, .nav ul a { position: relative; color: var(--t-ink-soft); font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: color .25s; }
.nav__list a:hover, .nav ul a:hover { color: var(--t-ink); text-decoration: none; }
@media (min-width: 960px) {
  .nav__list a::after, .nav ul a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--t-accent); transition: width .3s var(--t-ease); }
  .nav__list a:hover::after, .nav ul a:hover::after { width: 100%; }
}
.menu-toggle { border-radius: 100px !important; border-color: var(--t-line-2) !important; color: var(--t-ink) !important; }
@media (max-width: 959px) {
  .js .nav { background: rgb(255 255 255 / 0.97) !important; backdrop-filter: blur(14px); border-bottom-color: var(--t-line) !important; }
  .nav__list a, .nav ul a { font-size: 1.05rem; color: var(--t-ink); border-bottom-color: var(--t-line) !important; }
}

/* ---------- Premier écran : quadrillage et halos ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--t-line) 1px, transparent 1px), linear-gradient(90deg, var(--t-line) 1px, transparent 1px);
  background-size: 64px 64px; opacity: 0.6;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; inset: -20% -10% auto auto; z-index: -1; pointer-events: none;
  width: min(46vw, 620px); aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  background: radial-gradient(circle, rgb(var(--t-accent-rgb) / 0.22), transparent 65%);
}
.hero h1 { font-weight: 600; }
.hero__media img, .hero figure img { border-radius: var(--t-radius); box-shadow: var(--t-shadow); }
.hero__note, .hero__micro { color: var(--t-ink-faint); }

/* ---------- Sections ---------- */
.section--alt, .section--white {
  background: radial-gradient(120% 90% at 50% 0%, rgb(var(--t-accent-2-rgb) / 0.05), transparent 60%), var(--t-white);
  border-block: 1px solid var(--t-line);
}
.section-head p, .lead { color: var(--t-ink-soft); }

/* ---------- Cartes et panneaux ---------- */
.card, .detail, .audience, .step, .equip, .panel, .faq details, .acc, .schema, .search__empty {
  border: 1px solid var(--t-line); border-radius: var(--t-radius); background: var(--t-white); box-shadow: var(--t-shadow);
}
.card, .audience, .step, .equip {
  transition: transform .4s var(--t-ease), border-color .4s, background .4s, box-shadow .4s;
}
.card:hover, .audience:hover, .step:hover, .equip:hover {
  transform: translateY(-5px); border-color: var(--t-line-2); box-shadow: var(--t-shadow-hover);
}
.card h3, .detail h3, .audience h3, .step h3, .equip h3, .panel h3 { font-family: var(--t-display); font-weight: 600; }
.card p, .audience p, .step p, .equip p { color: var(--t-ink-soft); }
.card__ico, .detail__icon {
  border-radius: var(--t-radius-sm); background: rgb(var(--t-accent-rgb) / 0.08);
  border: 1px solid var(--t-line-2); color: var(--t-accent);
}
.card__tag, .equip__sector { font-family: var(--t-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.06em; line-height: 1.35; color: var(--t-accent); }
.card__media, .equip__img--ico { background: linear-gradient(160deg, var(--t-surface-2), var(--t-bg-3)); }
.detail:target { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgb(var(--t-accent-rgb) / 0.18); }

/* Numéros d'étapes : pastille en dégradé */
.step__n {
  width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--t-display); font-weight: 600; font-size: 1.15rem; color: var(--t-white);
  background: linear-gradient(140deg, var(--t-accent), var(--t-accent-2)); box-shadow: var(--t-shadow-accent);
}

/* Encadrés d'information */
.notice, .note, .info, .callout {
  border: 1px solid var(--t-line-2); border-left-width: 1px; border-radius: var(--t-radius-sm);
  background: linear-gradient(100deg, rgb(var(--t-accent-rgb) / 0.08), rgb(var(--t-accent-2-rgb) / 0.04));
  color: var(--t-ink);
}
.notice svg { color: var(--t-accent); }
.keypoint { border-radius: var(--t-radius-sm); background: var(--t-ink); }
.keypoint strong { color: var(--t-accent-2); }
.markers li { border-color: var(--t-line-2); background: var(--t-white); font-weight: 500; }
.markers svg { color: var(--t-accent); }
.checklist li::before, .ticks li::before { border-color: var(--t-accent); }
.parts li { border-left-color: var(--t-accent-2); }
.parts strong { color: var(--t-ink); }
.step--key { border-color: rgb(var(--t-accent-2-rgb) / 0.55); background: linear-gradient(160deg, rgb(var(--t-accent-2-rgb) / 0.10), var(--t-white)); }

/* Tableaux */
.cumac thead th, .caps thead th { background: var(--t-surface-2); font-family: var(--t-body); font-weight: 600; }
.cumac th, .cumac td, .caps th, .caps td { border-bottom-color: var(--t-line); }

/* FAQ et accordéons */
.faq summary, .acc > summary, .opt > summary { font-family: var(--t-body); font-weight: 600; color: var(--t-ink); }
.faq summary::after { color: var(--t-accent); border-color: var(--t-accent); }
.faq details > div { color: var(--t-ink-soft); }

/* ---------- Recherche, filtres, choix ---------- */
.search input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  border: 1px solid var(--t-line-2); border-radius: var(--t-radius-sm); background: var(--t-surface-2); color: var(--t-ink);
  font-family: var(--t-body); transition: border-color .25s, box-shadow .25s, background .25s;
}
.search input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--t-accent); background: var(--t-white); box-shadow: 0 0 0 3px rgb(var(--t-accent-rgb) / 0.18);
}
.field > label, .legend, .search label { color: var(--t-ink); font-weight: 600; }
.filter { border-radius: 100px; border-color: var(--t-line-2); font-weight: 500; }
.filter:hover { border-color: var(--t-accent); }
.filter[aria-pressed="true"] { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-white); }
.choice span { border-radius: 100px; border-color: var(--t-line-2); background: var(--t-surface-2); font-weight: 500; transition: all .25s; }
.choice span:hover { border-color: var(--t-accent); }
.choice input:checked + span { background: rgb(var(--t-accent-rgb) / 0.12); border-color: var(--t-accent); color: var(--t-accent-deep); box-shadow: none; }
.check input { accent-color: var(--t-accent); }
.stepper span.on { background: linear-gradient(90deg, var(--t-accent), var(--t-accent-2)); }
.result__big { color: var(--t-accent); }

/* ---------- Formulaires : section claire avec halos ---------- */
.section--form {
  background:
    radial-gradient(80% 60% at 80% 0%, rgb(var(--t-accent-2-rgb) / 0.10), transparent 55%),
    radial-gradient(70% 60% at 10% 100%, rgb(var(--t-accent-rgb) / 0.08), transparent 55%),
    var(--t-white);
  color: var(--t-ink); border-top: 1px solid var(--t-line);
}
.section--form h2, .section--form .lead { color: var(--t-ink); }
.section--form .lead { opacity: 1; color: var(--t-ink-soft); }
.form-intro a { color: var(--t-accent); }
.panel { background: linear-gradient(165deg, var(--t-white), var(--t-surface-2)); border-color: var(--t-line-2); }
#lead.panel, .form-wrap .panel { box-shadow: 0 24px 60px -30px rgb(var(--t-ink-rgb) / 0.22); }

/* ---------- Pied de page clair, comme les anciennes pages ---------- */
.site-footer, .footer { background: var(--t-bg); color: var(--t-ink-soft); border-top: 1px solid var(--t-line); }
.site-footer a, .footer a { color: var(--t-ink); }
.site-footer a:hover, .footer a:hover { color: var(--t-accent); }
.site-footer :focus-visible, .footer :focus-visible { outline-color: var(--t-ink); }
.footer__links, .footer ul { border-top-color: var(--t-line) !important; }
.footer__text, .footer__brand p { opacity: 1; }

/* ---------- Apparition au défilement (sans bibliothèque) ---------- */
html.t-reveal .t-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--t-ease), transform .8s var(--t-ease); transition-delay: var(--t-delay, 0ms); }
html.t-reveal .t-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.t-reveal .t-rv { opacity: 1; transform: none; transition: none; }
  .eyebrow::before, .overline::before, .kicker::before { animation: none; }
  .btn, .card, .audience, .step, .equip { transition: none; }
  .btn:hover, .card:hover, .audience:hover, .step:hover, .equip:hover { transform: none; }
}