/* ==========================================================================
   Cabinet Maître Abdelhalim Zendaguy — Avocat au Barreau de Marrakech
   Design system : Or (monogramme AZ) + Charbon / Ivoire — refonte UI/UX
   ========================================================================== */

/* ---------- Fonts locales (cf. /fonts) ---------- */
@font-face{ font-family:"Roboto"; src:url("../fonts/Roboto-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto"; src:url("../fonts/Roboto-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto"; src:url("../fonts/Roboto-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Roboto Slab"; src:url("../fonts/RobotoSlab-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- Design tokens ---------- */
:root{
  /* Or (dérivé du logo doré) */
  --gold:#c2a25a;
  --gold-2:#b28d40;
  --gold-soft:#d9bd80;
  --gold-deep:#96793a;
  --gold-tint:#f4ecda;
  --gold-line:rgba(194,162,90,.30);

  /* Charbon / encre profonde */
  --ink-900:#101319;
  --ink-850:#141821;
  --ink-800:#181d28;
  --ink-750:#1d2330;
  --ink-700:#232a39;
  --ink-600:#2c3446;

  /* Clairs / ivoire */
  --bg:#f7f5f0;
  --bg-alt:#efece3;
  --surface:#ffffff;
  --surface-2:#fbfaf6;

  --text:#181b22;
  --text-soft:#3a414c;
  --text-muted:#6a7280;
  --text-on-dark:#eef1f4;
  --text-muted-dark:#a9b4c1;

  --border:#e6e1d5;
  --border-2:#ded8c9;
  --border-dark:#2b3344;

  --success:#3f9d55;
  --danger:#d05656;

  --font-display:"Playfair Display","Roboto Slab",Georgia,serif;
  --font-label:"Cinzel","Playfair Display",Georgia,serif;
  --font-body:"Roboto","Segoe UI",Arial,sans-serif;

  --space-1:5px;  --space-2:10px; --space-3:15px; --space-4:20px;
  --space-5:26px; --space-6:34px; --space-7:46px; --space-8:66px; --space-9:92px;

  --radius-s:6px; --radius-m:10px; --radius-l:16px; --radius-xl:24px; --radius-pill:100px;

  --shadow-xs:0 2px 6px rgba(16,19,25,.06);
  --shadow-s:0 8px 22px rgba(16,19,25,.08);
  --shadow-m:0 18px 40px rgba(16,19,25,.12);
  --shadow-l:0 30px 60px rgba(16,19,25,.22);
  --shadow-gold:0 16px 36px rgba(150,121,58,.28);

  --container:1220px;
  --t-fast:160ms cubic-bezier(.4,0,.2,1);
  --t-med:320ms cubic-bezier(.4,0,.2,1);
  --t-slow:600ms cubic-bezier(.16,.8,.24,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; font-family:var(--font-body); font-size:16.5px; line-height:1.75;
  color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.18; margin:0 0 var(--space-3); color:var(--text); letter-spacing:-.01em; }
p{ margin:0 0 var(--space-3); }
strong{ font-weight:700; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold); color:#fff; }

.container{ max-width:var(--container-pct-page, 100%); margin:0 auto; padding:0 var(--space-4); }
.container.container-header{ max-width:var(--container-pct-header, 100%); }
.container.container-footer{ max-width:var(--container-pct-footer, 100%); }
.on-dark{ color:var(--text-on-dark); }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:#fff;
  padding:var(--space-2) var(--space-4); z-index:10000; border-radius:0 0 var(--radius-s) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- Section shell ---------- */
section{ padding:var(--space-9) 0; position:relative; }
.section-alt{ background:var(--bg-alt); }
.section-cream{ background:var(--surface-2); }
.section-dark{ background:radial-gradient(120% 120% at 100% 0,rgba(194,162,90,.10),transparent 46%),var(--color-banner-bg, #181d28); color:var(--text-on-dark); }
.section-dark h2,.section-dark h3,.section-dark h4{ color:#fff; }

/* Eyebrow / label */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-label); font-size:12.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:var(--space-3);
}
.eyebrow::before{ content:""; width:30px; height:1.5px; background:var(--gold); display:inline-block; }
.section-dark .eyebrow,.on-dark .eyebrow{ color:var(--gold-soft); }

.section-head{ max-width:640px; margin-bottom:var(--space-7); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head h2{ font-size:clamp(30px,4.4vw,46px); }
.section-head p{ color:var(--text-muted); font-size:17.5px; margin-bottom:0; }
.section-dark .section-head p{ color:var(--text-muted-dark); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:15px 30px; border-radius:var(--radius-pill); font-weight:600; font-size:15px;
  border:1px solid transparent; letter-spacing:.01em; position:relative;
  transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),color var(--t-fast);
  white-space:nowrap; max-width:100%; min-height:48px; text-align:center;
}
.btn svg{ flex:none; }
.btn-primary{ background:linear-gradient(135deg,var(--gold-soft),var(--gold-2)); color:#231a06; box-shadow:var(--shadow-gold); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 44px rgba(150,121,58,.4); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-3px); }
.btn-outline{ background:transparent; border-color:var(--border-2); color:var(--text); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-3px); }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 22px; font-size:14px; min-height:44px; }
/* En dessous de ~400px, un libellé long (ex. CTA secondaire) ne doit jamais
   forcer un débordement horizontal : on autorise le retour à la ligne plutôt
   que de couper ou déborder. */
@media (max-width:400px){
  .btn{ white-space:normal; line-height:1.3; padding:13px 22px; }
}

/* ---------- Top bar ---------- */
.topbar{ background:var(--color-topbar-bg, #101319); color:var(--text-muted-dark); font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.05); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:9px var(--space-4); flex-wrap:wrap; }
.topbar-info{ display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; row-gap:6px; }
.topbar-info a,.topbar-info span{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--text-muted-dark); transition:color var(--t-fast); }
.topbar-info a{ padding:4px 0; }
.topbar-info a:hover{ color:var(--gold-soft); }
.topbar-info svg{ flex:none; color:var(--gold); }
/* Priorité mobile : sur très petit écran, seul l'appel téléphonique reste
   affiché (action la plus utile au doigt) — e-mail et adresse s'y trouvent
   déjà de toute façon dans le footer et la section contact. */
@media (max-width:560px){
  .topbar-info .topbar-email,.topbar-info .topbar-address{ display:none; }
}
.topbar-social{ display:flex; align-items:center; gap:var(--space-2); }
.topbar-social a{ width:30px; height:30px; border-radius:50%; border:1px solid var(--border-dark); display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); }
.topbar-social a:hover{ border-color:var(--gold); color:var(--ink-900); background:var(--gold); }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:600; background:var(--color-header-bg, #141821); border-bottom:1px solid var(--border-dark); transition:box-shadow var(--t-med),background var(--t-med); }
.site-header.is-scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.28); background:var(--color-header-bg, #101319); }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:var(--space-4); }

.brand{ display:flex; align-items:center; gap:var(--space-3); }
.brand-mark{ height:61px; width:auto; max-width:360px; object-fit:contain; flex:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:.01em; color:#fff; white-space:nowrap; }
.brand-text .brand-baseline{ font-family:var(--font-label); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-top:4px; }
.brand-text .brand-arabic{ font-family:"Amiri","Traditional Arabic",serif; font-size:16px; color:var(--text-muted-dark); margin-top:2px; }
.footer-brand .brand-text strong{ font-size:22px; }
.footer-brand .brand-text .brand-baseline{ font-size:12px; }

.main-nav{ display:flex; align-items:center; gap:var(--space-6); }
.nav-links{ display:flex; align-items:center; gap:var(--space-5); }
.nav-links a{ font-weight:500; font-size:14.5px; color:var(--text-on-dark); padding:6px 0; position:relative; transition:color var(--t-fast); }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med); }
.nav-links a:hover,.nav-links a.active{ color:var(--gold-soft); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:var(--space-3); }

.nav-backdrop{ display:none; }

.nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--border-dark); border-radius:var(--radius-m); background:transparent; align-items:center; justify-content:center; flex:none; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:""; display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform var(--t-fast),opacity var(--t-fast); position:relative; }
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); background:var(--gold); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); background:var(--gold); }

/* ---------- Hero ---------- */
.hero{ background:radial-gradient(90% 120% at 88% 6%,rgba(194,162,90,.16),transparent 42%),var(--color-banner-bg, #181d28); color:var(--text-on-dark); padding:var(--space-9) 0; overflow:hidden; position:relative; }
.hero::before{ content:""; position:absolute; inset:0; background-image:url("../images/logo-mark.png"); background-repeat:no-repeat; background-position:right -80px bottom -80px; background-size:460px; opacity:.05; pointer-events:none; }
.hero .container{ display:grid; grid-template-columns:1.06fr .94fr; gap:var(--space-8); align-items:center; position:relative; z-index:1; }
.hero-badge{ display:inline-flex; align-items:center; gap:var(--space-2); background:rgba(255,255,255,.05); border:1px solid var(--gold-line); color:var(--gold-soft); padding:8px 18px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; letter-spacing:.03em; margin-bottom:var(--space-4); }
.hero-badge svg{ color:var(--gold); }
.hero h1{ font-size:clamp(34px,5vw,58px); color:#fff; margin-bottom:var(--space-2); line-height:1.08; }
.hero .hero-role{ font-family:var(--font-label); font-size:clamp(15px,2vw,19px); color:var(--gold-soft); font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--space-3); }
.hero-slogan{ display:flex; align-items:center; gap:var(--space-4); margin:0 0 var(--space-4); }
.hero-slogan span{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:15px; letter-spacing:.14em; color:var(--gold-soft); white-space:nowrap; }
.hero-slogan::before,.hero-slogan::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-line)); min-width:var(--space-4); }
.hero-slogan::after{ background:linear-gradient(90deg,var(--gold-line),transparent); }
/* Sur très petit écran, le texte du slogan (avec son letter-spacing large)
   peut dépasser la largeur disponible malgré les lignes décoratives
   flexibles : on autorise le retour à la ligne et on réduit l'espacement. */
@media (max-width:400px){
  .hero-slogan{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
  .hero-slogan span{ white-space:normal; text-align:center; letter-spacing:.08em; font-size:14px; }
  .hero-slogan::before,.hero-slogan::after{ flex-basis:40px; }
}
.hero p.lead{ font-size:17.5px; color:var(--text-muted-dark); max-width:560px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin:var(--space-5) 0; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.hero-tags a{ display:inline-flex; align-items:center; min-height:40px; background:rgba(255,255,255,.04); border:1px solid var(--border-dark); padding:9px 16px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:500; color:var(--text-on-dark); transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); }
.hero-tags a:hover{ border-color:var(--gold); color:var(--gold-soft); background:rgba(194,162,90,.08); }

.hero-visual{ position:relative; }
.hero-photo-frame{ position:relative; border-radius:var(--radius-xl); padding:10px; background:linear-gradient(150deg,rgba(217,189,128,.5),rgba(150,121,58,.12)); box-shadow:var(--shadow-l); }
.hero-photo-frame::after{ content:""; position:absolute; inset:10px; border-radius:calc(var(--radius-xl) - 8px); border:1px solid rgba(255,255,255,.14); pointer-events:none; }
.hero-photo-frame img{ border-radius:calc(var(--radius-xl) - 6px); width:100%; aspect-ratio:5/6; object-fit:cover; object-position:top center; background:#eceff3; }
.hero-float-card{ position:absolute; background:rgba(16,19,25,.9); backdrop-filter:blur(4px); border:1px solid var(--gold-line); border-radius:var(--radius-m); padding:var(--space-3) var(--space-4); box-shadow:var(--shadow-m); }
.hero-float-card.top{ top:26px; left:-26px; max-width:210px; }
.hero-float-card.top strong{ display:block; color:#fff; font-family:var(--font-display); font-size:15px; }
.hero-float-card.top span{ font-size:12.5px; color:var(--text-muted-dark); }
.hero-float-card.bottom{ bottom:26px; right:-22px; display:flex; align-items:center; gap:var(--space-3); }
.hero-float-card.bottom .icon{ width:38px; height:38px; border-radius:50%; background:rgba(194,162,90,.15); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
.hero-float-card.bottom .rating{ color:var(--gold-soft); font-family:var(--font-display); font-weight:700; font-size:15px; display:block; }
.hero-float-card.bottom span{ font-size:12px; color:var(--text-muted-dark); }

/* ---------- Fact strip ---------- */
.trust-strip{ background:var(--ink-900); border-top:1px solid var(--border-dark); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); padding:var(--space-6) 0; }
.trust-item{ text-align:center; color:var(--text-on-dark); padding:0 var(--space-2); position:relative; }
.trust-item+.trust-item::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--border-dark); }
.trust-item .icon{ color:var(--gold); margin-bottom:8px; display:flex; justify-content:center; }
.trust-item .num{ font-family:var(--font-display); font-size:20px; font-weight:700; color:#fff; }
.trust-item .label{ font-size:13px; color:var(--text-muted-dark); margin-top:2px; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:var(--space-8); align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:var(--radius-l); box-shadow:var(--shadow-m); aspect-ratio:4/5; object-fit:cover; width:100%; }
.about-media::before{ content:""; position:absolute; inset:-14px -14px 24px 24px; border:1px solid var(--gold-line); border-radius:var(--radius-l); z-index:-1; }
.about-media-badge{ position:absolute; bottom:-22px; left:-22px; background:linear-gradient(135deg,var(--ink-800),var(--ink-900)); color:#fff; padding:var(--space-4) var(--space-5); border-radius:var(--radius-m); box-shadow:var(--shadow-m); max-width:230px; border:1px solid var(--gold-line); }
.about-media-badge strong{ display:block; font-family:var(--font-display); color:var(--gold-soft); font-size:22px; }
.about-media-badge span{ font-size:12.5px; color:var(--text-muted-dark); }

.about-text .lead-para{ font-size:18px; color:var(--text-soft); }
.about-facts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin:var(--space-5) 0; }
.about-fact{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); box-shadow:var(--shadow-xs); }
.about-fact .icon{ width:40px; height:40px; flex:none; border-radius:var(--radius-s); background:var(--gold-tint); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; }
.about-fact strong{ display:block; font-size:14.5px; font-family:var(--font-body); }
.about-fact span{ font-size:13.5px; color:var(--text-muted); }

/* ---------- Le cabinet (galerie photos — masonry) ---------- */
/* Mise en page "masonry" en colonnes CSS : chaque photo garde sa hauteur
   naturelle (aucun recadrage, aucune bande de fond) et vient combler la
   colonne la plus courte, comme un mur de photos. Fonctionne sans JS et
   dans tous les navigateurs (contrairement à grid-template-rows:masonry,
   encore expérimental hors Firefox). */
.cabinet-grid{ column-count:3; column-gap:var(--space-4); }
.cabinet-grid figure{ margin:0 0 var(--space-4); break-inside:avoid; position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-s); }
.cabinet-grid img{ display:block; width:100%; height:auto; transition:transform var(--t-slow); }
.cabinet-grid figure:hover img{ transform:scale(1.03); }
.cabinet-grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:var(--space-4); background:linear-gradient(0deg,rgba(16,19,25,.82),transparent); color:#fff; font-family:var(--font-display); font-size:15px; letter-spacing:.02em; }

@media (max-width:1024px){
  .cabinet-grid{ column-count:2; }
}
@media (max-width:600px){
  .cabinet-grid{ column-count:1; }
}

/* ---------- Values ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.value-item{ text-align:center; padding:var(--space-5) var(--space-4); border-radius:var(--radius-l); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-xs); transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med); }
.value-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-s); border-color:var(--gold-line); }
.value-item .icon{ width:62px; height:62px; margin:0 auto var(--space-3); border-radius:50%; background:radial-gradient(circle at 30% 25%,var(--gold-tint),#fff); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; border:1px solid var(--gold-line); }
.value-item h4{ font-size:18px; margin-bottom:6px; }
.value-item p{ font-size:14px; color:var(--text-muted); margin-bottom:0; }

/* ---------- Practice areas ---------- */
.grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); padding:var(--space-6) var(--space-5); transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med); position:relative; overflow:hidden; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold-soft),var(--gold-2)); transform:scaleX(0); transform-origin:left; transition:transform var(--t-med); }
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-m); border-color:var(--gold-line); }
.card:hover::before{ transform:scaleX(1); }
.card .icon{ width:56px; height:56px; border-radius:var(--radius-m); background:linear-gradient(140deg,var(--ink-800),var(--ink-900)); color:var(--gold-soft); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); box-shadow:var(--shadow-xs); }
.card h3{ font-size:21px; margin-bottom:var(--space-2); }
.card p{ color:var(--text-muted); font-size:15px; margin-bottom:var(--space-4); }
.card-link{ font-size:13.5px; font-weight:600; letter-spacing:.03em; color:var(--gold-deep); display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; font-family:var(--font-label); }
.card-link svg{ transition:transform var(--t-fast); }
.card:hover .card-link svg{ transform:translateX(5px); }

/* ---------- Process ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.process-step{ position:relative; background:rgba(255,255,255,.03); border:1px solid var(--border-dark); border-radius:var(--radius-l); padding:var(--space-5); color:var(--text-on-dark); transition:border-color var(--t-med),transform var(--t-med); }
.process-step:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.process-step .step-num{ font-family:var(--font-display); font-size:16px; font-weight:700; color:#231a06; background:linear-gradient(135deg,var(--gold-soft),var(--gold-2)); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); box-shadow:var(--shadow-gold); }
.process-step h3{ color:#fff; font-size:18px; margin-bottom:var(--space-2); }
.process-step p{ color:var(--text-muted-dark); font-size:14.5px; margin-bottom:0; }

/* ---------- Timeline (parcours) ---------- */
.timeline{ position:relative; margin-left:var(--space-2); max-width:760px; }
.timeline::before{ content:""; position:absolute; left:16px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--gold),var(--gold-line)); }
.timeline-item{ position:relative; padding-left:var(--space-8); padding-bottom:var(--space-6); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:8px; top:4px; width:18px; height:18px; border-radius:50%; background:var(--surface); border:3px solid var(--gold); box-shadow:0 0 0 4px rgba(194,162,90,.15); }
.timeline-item .year{ display:inline-block; font-family:var(--font-label); font-weight:600; letter-spacing:.06em; color:var(--gold-deep); font-size:13.5px; margin-bottom:4px; text-transform:uppercase; }
.timeline-item h3{ font-size:19px; margin-bottom:4px; }
.timeline-item p{ color:var(--text-muted); font-size:15px; margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid var(--border); border-radius:var(--radius-m); margin-bottom:var(--space-3); background:var(--surface); overflow:hidden; transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.faq-item[open]{ border-color:var(--gold-line); box-shadow:var(--shadow-xs); }
.faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); background:none; border:none; text-align:left; padding:var(--space-4) var(--space-5); font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--text); }
.faq-question .plus{ flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; position:relative; transition:transform var(--t-med),border-color var(--t-fast),background var(--t-fast); }
.faq-question .plus::before,.faq-question .plus::after{ content:""; position:absolute; background:var(--gold-deep); transition:opacity var(--t-fast); }
.faq-question .plus::before{ width:11px; height:2px; }
.faq-question .plus::after{ width:2px; height:11px; }
.faq-item[open] .faq-question .plus{ border-color:var(--gold); background:var(--gold-tint); transform:rotate(180deg); }
.faq-item[open] .faq-question .plus::after{ opacity:0; }
.faq-answer{ padding:0 var(--space-5) var(--space-5); color:var(--text-soft); font-size:15.5px; }
.faq-item>summary{ list-style:none; cursor:pointer; }
.faq-item>summary::-webkit-details-marker{ display:none; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:radial-gradient(120% 140% at 0 0,rgba(194,162,90,.18),transparent 44%),var(--color-banner-bg, #181d28); border:1px solid var(--gold-line); border-radius:var(--radius-xl); padding:var(--space-8) var(--space-7); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; color:var(--text-on-dark); }
.cta-banner h2{ color:#fff; font-size:clamp(24px,3.2vw,34px); margin-bottom:var(--space-2); }
.cta-banner p{ color:var(--text-muted-dark); margin-bottom:0; max-width:500px; }
.cta-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--space-8); align-items:start; }
.contact-info-card{ background:rgba(255,255,255,.03); border:1px solid var(--border-dark); border-radius:var(--radius-m); padding:var(--space-4) var(--space-5); display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-3); color:var(--text-on-dark); transition:border-color var(--t-fast); }
.contact-info-card:hover{ border-color:var(--gold-line); }
.contact-info-card .icon{ width:46px; height:46px; flex:none; border-radius:var(--radius-s); background:linear-gradient(135deg,var(--gold-soft),var(--gold-2)); color:#231a06; display:flex; align-items:center; justify-content:center; }
.contact-info-card strong{ display:block; font-size:15px; color:#fff; }
.contact-info-card span,.contact-info-card a{ font-size:14.5px; color:var(--text-muted-dark); }
.contact-info-card a:hover{ color:var(--gold-soft); }
.map-embed{ border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--border-dark); margin-top:var(--space-4); aspect-ratio:16/10; }
.map-embed iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05); }
.map-embed-large{ margin-top:0; aspect-ratio:4/5; }
.contact-privacy-note{ margin-top:var(--space-4); padding:var(--space-4) var(--space-5); background:rgba(255,255,255,.03); border:1px solid var(--border-dark); border-radius:var(--radius-m); font-size:13.5px; line-height:1.65; color:var(--text-muted-dark); }
@media (max-width:1024px){ .map-embed-large{ aspect-ratio:16/10; } }

.contact-form{ background:var(--surface); border-radius:var(--radius-l); padding:var(--space-7) var(--space-6); box-shadow:var(--shadow-m); }
.contact-form .form-title{ font-family:var(--font-display); font-size:22px; color:var(--text); margin-bottom:var(--space-2); }
.contact-form .form-sub{ color:var(--text-muted); font-size:14.5px; margin-bottom:var(--space-5); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.form-field{ margin-bottom:var(--space-4); }
.form-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--text); }
.form-field input,.form-field select,.form-field textarea{ width:100%; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-m); padding:13px 15px; font-family:inherit; font-size:15px; color:var(--text); transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast); }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--gold); outline:none; background:#fff; box-shadow:0 0 0 3px rgba(194,162,90,.16); }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-consent{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:13px; color:var(--text-muted); }
.form-consent input{ margin-top:3px; width:auto; }
.form-status{ font-size:14px; margin-top:var(--space-3); display:none; }
.form-status.success{ display:block; color:var(--success); }
.form-status.error{ display:block; color:var(--danger); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--color-footer-bg, #101319); color:var(--text-muted-dark); padding-top:var(--space-8); border-top:1px solid var(--border-dark); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--space-6); padding-bottom:var(--space-7); border-bottom:1px solid var(--border-dark); }
.footer-brand .brand{ margin-bottom:var(--space-4); }
.footer-brand .brand-mark{ height:77px; width:auto; max-width:420px; }
.footer-brand p{ font-size:14.5px; max-width:320px; color:var(--text-muted-dark); }
.footer-social{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); }
.footer-social a:hover{ border-color:var(--gold); color:var(--ink-900); background:var(--gold); }
.footer-col h4{ color:#fff; font-family:var(--font-label); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--space-4); }
.footer-col ul li{ margin-bottom:var(--space-2); font-size:14.5px; }
.footer-col a{ transition:color var(--t-fast); }
.footer-col a:hover,.footer-col li a:hover{ color:var(--gold-soft); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ color:var(--gold); flex:none; margin-top:3px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; font-size:13px; flex-wrap:wrap; }
.footer-bottom a{ color:var(--text-muted-dark); }
.footer-bottom a:hover{ color:var(--gold-soft); }
.footer-legal-links{ color:var(--text-muted-dark); }
.footer-legal-links .cookie-preferences-link{ color:var(--text-muted-dark); }
.footer-legal-links .cookie-preferences-link:hover{ color:var(--gold-soft); }
.footer-credit{ padding:var(--space-3) 0 var(--space-4); text-align:center; font-size:12px; color:var(--text-muted-dark); border-top:1px solid var(--border-dark); }
.footer-credit a{ color:var(--gold-soft); font-weight:600; }
.footer-credit a:hover{ color:var(--gold); text-decoration:underline; }

/* ---------- Floating actions ---------- */
.floating-actions{ position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:500; display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-end; transition:bottom var(--t-med); }
/* La bannière cookies (fixed, bottom:0) est plus haute sur mobile (texte +
   3 boutons empilés) : on relève les FABs pour qu'ils ne soient jamais
   masqués ni superposés tant que la bannière est visible. La hauteur
   réelle de la bannière est mesurée en JS et posée en variable CSS. */
body.has-cookie-banner .floating-actions{ bottom:calc(var(--cookie-banner-height, 64px) + var(--space-3)); }
.fab{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-m); border:none; transition:transform var(--t-fast); }
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab-whatsapp{ background:#25d366; color:#fff; }
.fab-top{ background:var(--ink-800); color:var(--gold); border:1px solid var(--border-dark); width:46px; height:46px; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity var(--t-fast),transform var(--t-fast); }
.fab-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
@media (max-width:480px){
  .floating-actions{ right:var(--space-3); bottom:var(--space-3); gap:var(--space-2); }
  .fab{ width:50px; height:50px; }
  .fab-top{ width:42px; height:42px; }
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--t-slow),transform var(--t-slow); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:400px; margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:420px; margin:0 auto var(--space-6); }
  .grid-cards{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--space-5); }
  .trust-item:nth-child(3)::before{ display:none; }
}
@media (max-width:1200px){
  .main-nav{ position:fixed; inset:0 0 0 auto; z-index:1200; width:min(360px,82vw); background:var(--color-header-bg, #141821); flex-direction:column; align-items:stretch; padding:var(--space-8) var(--space-5) var(--space-5); gap:var(--space-4); transform:translateX(100%); transition:transform var(--t-med); overflow-y:auto; box-shadow:var(--shadow-l); }
  .main-nav.is-open{ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-links a{ display:flex; align-items:center; min-height:48px; width:100%; padding:var(--space-3) 0; border-bottom:1px solid var(--border-dark); font-size:16px; }
  .nav-links a::after{ display:none; }
  .nav-actions{ flex-direction:column; align-items:stretch; margin-top:var(--space-2); }
  .nav-actions .btn{ width:100%; }
  .nav-toggle{ display:flex; }
  .topbar-info{ gap:var(--space-3) var(--space-4); }

  /* Fond assombri derrière le panneau de menu mobile : améliore la lisibilité
     et permet de fermer le menu en touchant en dehors du panneau. */
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:1100;
    background:rgba(16,19,25,.55); opacity:0; pointer-events:none;
    transition:opacity var(--t-med);
  }
  .nav-backdrop.is-visible{ opacity:1; pointer-events:auto; }
}
@media (max-width:720px){
  :root{ --space-9:64px; --space-8:46px; }
  section{ padding:var(--space-8) 0; }
  .grid-cards{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--space-5); }
  .cta-banner{ flex-direction:column; align-items:flex-start; padding:var(--space-6); }
  .hero-float-card.top{ left:8px; }
  .hero-float-card.bottom{ right:8px; }
  .about-media-badge{ left:8px; }
  .about-facts{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:center; text-align:center; }

  /* Paragraphes justifiés sur mobile (page d'accueil + blog/pages) —
     marges droite/gauche alignées comme un bloc de texte imprimé. */
  main p,
  .faq-answer,
  .static-page-content li,
  .article-content .prose li{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
  }
}
@media (max-width:600px){
  .brand-mark{ height:53px; max-width:270px; }
}
@media (max-width:480px){
  :root{ --space-9:52px; --space-8:38px; --space-7:36px; }
  body{ font-size:16px; }
  .topbar .container{ justify-content:center; text-align:center; }
  .topbar-social{ display:none; }
  .values-grid{ grid-template-columns:1fr; }
  .brand-mark{ height:49px; max-width:232px; }
  .hero-photo-frame{ padding:7px; }
  .btn{ padding:14px 24px; }
  .trust-grid{ grid-template-columns:1fr; row-gap:var(--space-4); padding:var(--space-5) 0; }
  .trust-item::before{ display:none !important; }
  .trust-item{ display:flex; align-items:center; gap:var(--space-3); text-align:left; padding:0 var(--space-2); }
  .trust-item .icon{ margin-bottom:0; }
}

/* ==========================================================================
   Blog & pages dynamiques — extension du design system existant
   ========================================================================== */

/* ---------- Bannière de page (sous-pages : blog, catégories, pages) ---------- */
.page-banner{ background:radial-gradient(90% 140% at 88% 0,rgba(194,162,90,.14),transparent 46%),linear-gradient(155deg,var(--ink-750),var(--ink-900) 78%); color:var(--text-on-dark); padding:var(--space-8) 0 var(--space-7); }
.page-banner .eyebrow{ color:var(--gold-soft); }
.page-banner h1{ color:#fff; font-size:clamp(30px,4.6vw,48px); margin-bottom:var(--space-2); }
.page-banner p{ color:var(--text-muted-dark); font-size:17px; max-width:640px; margin-bottom:0; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-muted-dark); margin-bottom:var(--space-4); }
.breadcrumb a{ color:var(--text-muted-dark); transition:color var(--t-fast); }
.breadcrumb a:hover{ color:var(--gold-soft); }
.breadcrumb span[aria-hidden]{ opacity:.5; }

/* ---------- Filtres catégories (liste blog) ---------- */
.blog-filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-7); }
.blog-filters a{ display:inline-flex; align-items:center; min-height:40px; background:var(--surface); border:1px solid var(--border); padding:9px 18px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; color:var(--text-soft); transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast); }
.blog-filters a:hover,.blog-filters a.active{ border-color:var(--gold); color:var(--gold-deep); background:var(--gold-tint); }

/* ---------- Grille d'articles ---------- */
.articles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.article-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden; transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med); display:flex; flex-direction:column; }
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:var(--gold-line); }
.article-thumb{ aspect-ratio:16/10; background:linear-gradient(140deg,var(--ink-700),var(--ink-900)); overflow:hidden; }
.article-thumb img{ width:100%; height:100%; object-fit:contain; }
.article-body{ padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.article-tag{ display:inline-flex; align-self:flex-start; font-family:var(--font-label); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); background:var(--gold-tint); padding:5px 12px; border-radius:var(--radius-pill); }
.article-body h3{ font-size:19px; margin:6px 0 0; }
.article-body h3 a{ color:inherit; }
.article-body h3 a:hover{ color:var(--gold-deep); }
.article-excerpt{ color:var(--text-muted); font-size:14.5px; margin-bottom:0; flex:1; }
.article-meta{ display:flex; align-items:center; gap:var(--space-3); font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:var(--space-3); margin-top:var(--space-2); flex-wrap:wrap; row-gap:6px; }

/* ---------- Pagination ---------- */
.pagination-wrap{ display:flex; justify-content:center; margin-top:var(--space-8); }
.pagination-wrap nav ul{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.pagination-wrap span,.pagination-wrap a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border-radius:var(--radius-m); font-size:14px; font-weight:600; color:var(--text-soft); border:1px solid var(--border); background:var(--surface); }
.pagination-wrap a:hover{ border-color:var(--gold); color:var(--gold-deep); }
.pagination-wrap .active span,.pagination-wrap [aria-current="page"] span{ background:var(--gold); color:#231a06; border-color:var(--gold); }
.pagination-wrap [disabled]{ opacity:.4; }

/* ---------- Article — page complète ---------- */
.article-hero-image{ border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-m); margin:calc(var(--space-8) * -1) 0 var(--space-7); position:relative; z-index:1; aspect-ratio:16/8; background:linear-gradient(140deg,var(--ink-700),var(--ink-900)); }
.article-hero-image img{ width:100%; height:100%; object-fit:contain; }
.article-content{ max-width:100%; margin:0 auto; }
.article-content .article-meta{ border:none; padding-top:0; margin-top:0; margin-bottom:var(--space-5); }
.article-content .prose{ font-size:17px; color:var(--text-soft); line-height:1.85; }
.article-content .prose h2{ font-size:26px; margin-top:var(--space-7); }
.article-content .prose h3{ font-size:21px; margin-top:var(--space-6); }
.article-content .prose p{ margin-bottom:var(--space-4); }
.article-content .prose ul,.article-content .prose ol{ margin:0 0 var(--space-4); padding-left:1.4em; list-style:revert; }
.article-content .prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.article-content .prose img{ border-radius:var(--radius-m); margin:var(--space-5) 0; }
.article-content .prose table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; margin:var(--space-5) 0; }
.article-content .prose table th,.article-content .prose table td{ padding:10px 14px; border:1px solid var(--border); font-size:15px; text-align:left; }
.article-related{ margin-top:var(--space-9); }

/* ---------- Page dynamique générique ---------- */
.static-page-content{ max-width:100%; margin:0 auto; font-size:17px; color:var(--text-soft); line-height:1.85; }
.static-page-content h2{ font-size:26px; margin-top:var(--space-7); }
.static-page-content h3{ font-size:19px; margin-top:var(--space-5); color:var(--text); }
.static-page-content p{ margin-bottom:var(--space-4); }
.static-page-content ul,.static-page-content ol{ margin:0 0 var(--space-4); padding-left:1.4em; list-style:revert; }
.static-page-content li{ margin-bottom:var(--space-1); }
.static-page-content a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.static-page-content table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; margin:var(--space-5) 0; }
.static-page-content table th,.static-page-content table td{ padding:10px 14px; border:1px solid var(--border); font-size:15px; text-align:left; }

/* ---------- Bandeau cookies + préférences ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink-900); color:var(--text-on-dark);
  padding:var(--space-4); box-shadow:var(--shadow-m);
  transform:translateY(110%); transition:transform .35s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:var(--space-5);
  flex-wrap:wrap;
}
.cookie-banner-text{ flex:1 1 380px; font-size:13.5px; line-height:1.6; color:var(--text-muted-dark); }
.cookie-banner-text a{ color:var(--gold-soft); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.cookie-btn{
  font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer;
  border-radius:var(--radius-pill); padding:10px 20px; border:1px solid transparent;
  transition:all .18s ease; white-space:nowrap; min-height:44px;
}
@media (max-width:600px){
  .cookie-banner{ padding:var(--space-3); }
  .cookie-banner-actions{ flex-direction:column; width:100%; }
  .cookie-btn{ width:100%; white-space:normal; }
}
.cookie-btn-accept{ background:var(--gold); color:var(--ink-900); }
.cookie-btn-accept:hover{ background:var(--gold-soft); }
.cookie-btn-reject{ background:transparent; color:var(--text-on-dark); border-color:rgba(255,255,255,.25); }
.cookie-btn-reject:hover{ border-color:rgba(255,255,255,.5); }
.cookie-btn-customize{ background:transparent; color:var(--gold-soft); border-color:var(--gold-line); }
.cookie-btn-customize:hover{ background:rgba(194,162,90,.1); }

.cookie-modal-overlay{
  position:fixed; inset:0; z-index:900; background:rgba(16,19,25,.6);
  display:flex; align-items:center; justify-content:center; padding:var(--space-4);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cookie-modal-overlay.is-visible{ opacity:1; pointer-events:auto; }
.cookie-modal{
  background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow-m);
  max-width:560px; width:100%; max-height:86vh; overflow-y:auto; padding:var(--space-6);
}
.cookie-modal h2{ font-family:var(--font-display); font-size:22px; color:var(--text); margin-bottom:var(--space-3); }
.cookie-modal-intro{ font-size:13.5px; color:var(--text-muted); line-height:1.6; margin-bottom:var(--space-5); }
.cookie-category{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) 0; border-top:1px solid var(--border);
}
.cookie-category-info h3{ font-size:14.5px; color:var(--text); margin-bottom:4px; }
.cookie-category-info p{ font-size:12.5px; color:var(--text-muted); line-height:1.55; }
.cookie-switch{ position:relative; width:46px; height:28px; flex-shrink:0; margin-top:2px; }
.cookie-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cookie-switch input:disabled{ cursor:not-allowed; }
.cookie-switch-track{
  position:absolute; inset:0; background:var(--border-2); border-radius:var(--radius-pill);
  transition:background .18s ease;
}
.cookie-switch-track::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  background:#fff; border-radius:50%; transition:transform .18s ease; box-shadow:var(--shadow-xs);
}
.cookie-switch input:checked ~ .cookie-switch-track{ background:var(--gold); }
.cookie-switch input:checked ~ .cookie-switch-track::after{ transform:translateX(18px); }
.cookie-switch input:disabled ~ .cookie-switch-track{ background:var(--gold-deep); opacity:.6; }
.cookie-modal-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border); }
@media (max-width:480px){
  .cookie-modal{ padding:var(--space-4); border-radius:var(--radius-m); max-height:90vh; }
  .cookie-modal-overlay{ padding:var(--space-2); align-items:flex-end; }
  .cookie-modal h2{ font-size:19px; }
  .cookie-modal-actions{ flex-direction:column; }
  .cookie-modal-actions .cookie-btn{ width:100%; white-space:normal; }
}

.cookie-preferences-link{
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px;
}

.map-embed-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3);
  height:100%; min-height:320px; padding:var(--space-6); text-align:center;
  background:var(--ink-850); color:var(--text-muted-dark); border-radius:inherit;
}
.map-embed-placeholder p{ font-size:13.5px; max-width:360px; line-height:1.6; }

/* ---------- État vide ---------- */
.empty-state{ text-align:center; padding:var(--space-8) var(--space-4); color:var(--text-muted); }
.empty-state h3{ color:var(--text); margin-bottom:var(--space-2); }

@media (max-width:1024px){
  .articles-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .articles-grid{ grid-template-columns:1fr; }
  .article-hero-image{ margin-top:0; }
}