/* ==========================================================================
   CUNICCHRIST — Design system
   Palette extraite du logo officiel : marine, or, vert feuille, bleu vague.
   Police d'appui : Space Grotesk (titres) / IBM Plex Sans (texte courant).
   ========================================================================== */

:root{
  /* Couleurs de marque (échantillonnées depuis le logo) */
  --navy: #0B2149;
  --navy-deep: #071531;
  --navy-soft: #2C4270;
  --gold: #C8891A;
  --gold-light: #E0A83E;
  --gold-deep: #9C6C13;
  --green: #14501C;
  --green-light: #2C7A3B;
  --wave: #0C6D9E;
  --terracotta: #A85D2C; /* accent chaleureux pour restauration / pâtisserie */

  /* Neutres */
  --ink: #16213B;
  --ink-soft: #525B72;
  --ink-faint: #838BA0;
  --bg: #FFFFFF;
  --bg-soft: #F5F6FA;
  --bg-tint: #EEF1F8;
  --border: #E3E6EF;

  /* Typo */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle */
  --step-1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --step1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step2: clamp(1.5rem, 1.36rem + 0.7vw, 1.9rem);
  --step3: clamp(1.9rem, 1.65rem + 1.2vw, 2.6rem);
  --step4: clamp(2.4rem, 1.95rem + 2.2vw, 3.6rem);
  --step5: clamp(3rem, 2.3rem + 3.4vw, 4.6rem);

  --container: 1200px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --shadow-card: 0 1px 2px rgba(11,33,73,.05), 0 10px 24px -12px rgba(11,33,73,.18);
  --shadow-pop: 0 16px 40px -12px rgba(11,33,73,.28);
  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
input, select, textarea{ font:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--step0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:focus-visible{
  outline: 2.5px solid var(--wave);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ---------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 900px){ .container{ padding-inline: 40px; } }

.section{ padding-block: clamp(56px, 7vw, 108px); }
.section-soft{ background: var(--bg-soft); }
.section-navy{ background: var(--navy); color: rgba(255,255,255,.92); }
.section-navy h2, .section-navy h3{ color:#fff; }

.section-intro{
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-intro.left{ margin: 0 0 40px; text-align: left; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:'';
  width: 26px; height: 2px;
  background: var(--gold);
  display:inline-block;
}
.section-navy .eyebrow{ color: var(--gold-light); }

.section-intro h2{ font-size: var(--step3); margin-bottom: 14px; }
.section-intro p{ color: var(--ink-soft); font-size: var(--step1); }
.section-navy .section-intro p{ color: rgba(255,255,255,.72); }

.tag-dot::before{ content:'•'; margin-inline:.55em; color: var(--gold); }

/* ---- Boutons ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--step-1);
  border: 1.5px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background: var(--gold); color: var(--navy-deep); }
.btn-primary:hover{ background: var(--gold-light); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-outline{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-2px); }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--navy-deep); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-ghost-navy{ border-color: var(--border); color: var(--navy); }
.btn-ghost-navy:hover{ border-color: var(--navy); background: var(--bg-soft); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color: var(--navy); font-size: var(--step-1);
}
.link-arrow svg{ width:15px; height:15px; transition: transform .2s var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }
.link-arrow:hover{ color: var(--gold-deep); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-scrolled{
  box-shadow: 0 6px 24px -14px rgba(11,33,73,.25);
  border-bottom-color: var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  height: 86px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand img{ height: 42px; width:auto; }
.brand-word{ font-family: var(--font-display); font-weight:700; font-size: 1.28rem; color: var(--navy); letter-spacing:-.01em; }
.brand-word b{ color: var(--gold); font-weight:700; }

.nav-main{ display:none; }
.nav-main ul{ display:flex; align-items:center; gap: 4px; }
.nav-main a.nav-link{
  display:flex; align-items:center; gap:6px;
  padding: 10px 14px; border-radius: 999px;
  font-weight:500; font-size: .96rem; color: var(--ink);
  transition: background-color .2s, color .2s;
}
.nav-main a.nav-link:hover, .nav-main li.is-open > a.nav-link{ background: var(--bg-tint); color: var(--navy); }
.nav-main li.current > a.nav-link{ color: var(--navy); font-weight:700; }
.nav-main a.nav-link svg{ width:13px; height:13px; transition: transform .2s; opacity:.7; }
.nav-main li.is-open > a.nav-link svg{ transform: rotate(180deg); }

.nav-item{ position:relative; }
.dropdown{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px);
  width: 300px; background:#fff; border:1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  padding: 10px; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item.is-open .dropdown,
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 12px; border-radius: var(--radius-s);
  font-size:.92rem; font-weight:500; color: var(--ink);
}
.dropdown a:hover{ background: var(--bg-soft); color: var(--navy); }
.dropdown a .dot{ width:8px; height:8px; border-radius:50%; flex:none; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ display:none; }
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background:#fff;
}
.nav-toggle svg{ width:20px; height:20px; }
.nav-toggle .icon-close{ display:none; }
.nav-open .nav-toggle .icon-open{ display:none; }
.nav-open .nav-toggle .icon-close{ display:block; }

.mobile-nav{
  position: fixed; top:86px; right:0; bottom:0; left:0; background:#fff; z-index: 90;
  transform: translateY(-8px); opacity:0; visibility:hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  overflow-y:auto;
}
.nav-open .mobile-nav{ opacity:1; visibility:visible; transform:none; }
body.nav-open{ overflow:hidden; }
.mobile-nav .container{ padding-block: 20px 40px; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav > .container > ul > li{ border-bottom:1px solid var(--border); }
.mobile-nav a.nav-link{ display:flex; align-items:center; justify-content:space-between; padding: 18px 4px; font-size:1.05rem; font-weight:600; color:var(--navy); }
.mobile-nav a.nav-link svg{ width:15px; height:15px; }
.mobile-sub{ display:none; padding: 0 4px 16px 14px; }
.mobile-nav li.is-open .mobile-sub{ display:block; }
.mobile-sub a{ display:block; padding: 10px 0; color: var(--ink-soft); font-weight:500; border-bottom:1px dashed var(--border); }
.mobile-sub li:last-child a{ border-bottom:none; }
.mobile-nav .btn{ margin-top: 24px; }

@media (min-width: 1080px){
  .nav-main{ display:block; }
  .header-actions .btn{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  color:#fff;
  padding-top: clamp(72px, 11vw, 128px);
  padding-bottom: 160px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{
  content:''; position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(180deg, rgba(7,21,49,.88) 0%, rgba(7,21,49,.82) 45%, rgba(7,21,49,.94) 100%);
}
.hero .container{ position:relative; z-index:1; }
.hero-inner{ max-width: 760px; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: 7px 16px 7px 8px; border-radius:999px;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  font-size:.85rem; font-weight:600; letter-spacing:.02em; margin-bottom:22px;
}
.hero-kicker img{ height:20px; width:auto; }
.hero h1{ color:#fff; font-size: var(--step5); font-weight:700; letter-spacing:-.015em; }
.hero h1 .accent{ color: var(--gold-light); }
.hero p.lede{ margin-top:22px; font-size: var(--step1); color: rgba(255,255,255,.78); max-width: 54ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero-badges{
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px; max-width: 720px;
}
.hero-badge{ display:flex; align-items:flex-start; gap:12px; }
.hero-badge .ic{
  flex:none; width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.hero-badge .ic svg{ width:20px; height:20px; color: var(--gold-light); }
.hero-badge .t{ font-weight:700; font-size:.95rem; color:#fff; }
.hero-badge .d{ font-size:.85rem; color: rgba(255,255,255,.62); }

.hero-wave{ position:absolute; left:0; right:0; bottom:-2px; z-index:2; line-height:0; }
.hero-wave svg{ width:100%; height:auto; display:block; }

/* Bandeau de page intérieure (pages hors accueil) */
.page-head{
  position:relative; color:#fff; padding-block: clamp(64px,9vw,104px) 96px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow:hidden;
}
.page-head::before{
  content:''; position:absolute; width:640px; height:640px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,137,26,.28), transparent 68%);
  top:-320px; right:-160px;
}
.page-head .container{ position:relative; }
.page-head .eyebrow{ color: var(--gold-light); }
.page-head h1{ color:#fff; font-size: var(--step4); max-width: 18ch; }
.page-head p{ margin-top:16px; color: rgba(255,255,255,.72); max-width:56ch; font-size: var(--step1); }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:18px; }
.breadcrumb a:hover{ color:#fff; }
.page-head-wave{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.page-head-wave svg{ width:100%; height:auto; display:block; }

/* ==========================================================================
   À PROPOS (bloc réutilisé)
   ========================================================================== */
.about-grid{
  display:grid; gap: 56px; align-items:center;
  grid-template-columns: 1fr;
}
.about-media{
  position:relative; border-radius: var(--radius-l);
  background: linear-gradient(145deg, var(--bg-tint), #fff 60%);
  border:1px solid var(--border);
  padding: clamp(20px,4vw,40px);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 4/3.4;
}
.about-media img{ width: min(320px, 72%); }
.about-media video{ width: min(480px, 90%); border-radius: 14px; box-shadow: 0 18px 40px -20px rgba(11,33,73,.35); }

@media (max-width: 959px){
  .about-media{ aspect-ratio: 1/1; }
}
.about-media .ring{ position:absolute; top:18px; right:18px; bottom:18px; left:18px; border:1px dashed rgba(11,33,73,.18); border-radius: calc(var(--radius-l) - 8px); }
.about-copy .eyebrow{ margin-bottom:14px; }
.about-copy h2{ font-size: var(--step3); margin-bottom:18px; }
.about-copy p{ color: var(--ink-soft); }
.about-copy .btn{ margin-top:26px; }

.pillars{ margin-top: 52px; display:grid; gap:28px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.pillar{ display:flex; gap:16px; }
.pillar .ic{
  flex:none; width:48px; height:48px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-tint); color: var(--navy);
}
.pillar .ic svg{ width:22px; height:22px; }
.pillar h3{ font-size:1.05rem; margin-bottom:6px; }
.pillar p{ color: var(--ink-soft); font-size:.94rem; }

@media (min-width: 960px){
  .about-grid{ grid-template-columns: 0.85fr 1.15fr; }
}

/* ==========================================================================
   DOMAINES D'ACTIVITÉ — pile de cartes qui s'empilent au défilement
   Chaque carte est en position:sticky à l'intérieur d'un "slot" plus haut
   qu'elle ; elle reste épinglée pendant qu'on défile, puis la carte suivante
   arrive par-dessus et la recouvre — d'où l'effet de pile.
   ========================================================================== */
.services-grid{
  display:flex; flex-direction:column;
  max-width: 720px; margin: 0 auto;
}
.stack-slot{ min-height: 78vh; display:flex; align-items:flex-start; }
.stack-slot:last-child{ min-height: auto; }

.service-card{
  position: sticky;
  top: calc(100px + var(--i, 0) * 16px);
  z-index: calc(var(--i, 0) + 1);
  width:100%;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius: var(--radius-m);
  overflow:hidden; box-shadow: var(--shadow-pop);
  border-top: 4px solid var(--card-accent, var(--navy));
}
.service-card .media{ position:relative; aspect-ratio: 16/9; overflow:hidden; }
.service-card .media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.25) saturate(.85) contrast(1.05); transition: transform .5s var(--ease), filter .5s var(--ease); }
.service-card .media::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(155deg, color-mix(in srgb, var(--card-accent, var(--navy)) 55%, transparent) 0%, transparent 62%); mix-blend-mode:multiply; }
.service-card:hover .media img{ transform: scale(1.06); filter: grayscale(0) saturate(1) contrast(1.02); }
.service-card .ic-badge{
  position:absolute; left:24px; bottom:-24px; width:56px; height:56px; border-radius:16px;
  background: var(--card-accent, var(--navy)); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
}
.service-card .ic-badge svg{ width:26px; height:26px; }
.service-card .body{ padding: 40px 28px 28px; flex:1; display:flex; flex-direction:column; }
.service-card h3{ font-size:1.28rem; margin-bottom:12px; }
.service-card p{ color:var(--ink-soft); font-size:1rem; flex:1; }
.service-card .link-arrow{ margin-top:20px; }

.services-cta{ margin-top:44px; text-align:center; }

@media (prefers-reduced-motion: reduce){
  .service-card{ position: static; }
  .stack-slot{ min-height: auto; margin-bottom:24px; }
}

/* Page domaines-activite : détail par secteur */
.domain-detail{
  display:grid; gap:40px; padding-block: 56px;
  grid-template-columns: 1fr; align-items:center;
  border-bottom:1px solid var(--border);
}
.domain-detail:last-child{ border-bottom:none; }
.domain-detail:nth-child(even) .domain-media{ order:-1; }
.domain-media{ position:relative; border-radius: var(--radius-l); overflow:hidden; aspect-ratio:5/4; box-shadow: var(--shadow-card); }
.domain-media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.25) saturate(.85) contrast(1.05); }
.domain-media::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(160deg, color-mix(in srgb, var(--card-accent, var(--navy)) 50%, transparent), transparent 60%); }
.domain-copy .ic-badge{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: var(--card-accent, var(--navy)); color:#fff; margin-bottom:20px;
}
.domain-copy .ic-badge svg{ width:26px; height:26px; }
.domain-copy h2{ font-size: var(--step2); margin-bottom:14px; }
.domain-copy > p{ color: var(--ink-soft); margin-bottom:20px; }
.domain-list{ display:grid; gap:10px; }
.domain-list li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color: var(--ink); }
.domain-list svg{ width:18px; height:18px; flex:none; margin-top:3px; color: var(--card-accent, var(--gold)); }

@media (min-width:900px){ .domain-detail{ grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   PROJETS
   ========================================================================== */
.projects-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }
.projects-head h2{ font-size: var(--step3); }
.projects-head p{ color:var(--ink-soft); margin-top:10px; max-width:52ch; }

.project-track-wrap{ position:relative; }
.project-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:none;
}
.project-track::-webkit-scrollbar{ display:none; }
.project-card{
  scroll-snap-align:start; flex:0 0 auto;
  width: min(360px, 80vw);
  border-radius: var(--radius-l); overflow:hidden; position:relative;
  background: var(--navy); box-shadow: var(--shadow-card);
  aspect-ratio: 4/5;
}
.project-card img{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; filter: grayscale(.2) saturate(.9) contrast(1.05); }
.project-card::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(0deg, rgba(7,21,49,.94) 4%, rgba(7,21,49,.25) 55%, rgba(7,21,49,.05) 75%), linear-gradient(155deg, rgba(200,137,26,.22), transparent 55%); }
.project-card .info{ position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:1; color:#fff; }
.project-card .cat{ display:inline-block; padding:5px 12px; border-radius:999px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); font-size:.75rem; font-weight:600; letter-spacing:.03em; margin-bottom:12px; }
.project-card h3{ color:#fff; font-size:1.2rem; margin-bottom:6px; }
.project-card .loc{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:rgba(255,255,255,.75); }
.project-card .loc svg{ width:14px; height:14px; }

.track-controls{ display:flex; gap:12px; justify-content:center; margin-top:28px; }
.track-btn{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.track-btn:hover{ background: var(--navy); border-color:var(--navy); color:#fff; transform: translateY(-2px); }
.track-btn svg{ width:18px; height:18px; }

.projects-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.filter-chip{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--border); font-size:.88rem; font-weight:600; color: var(--ink-soft);
  transition: all .2s;
}
.filter-chip.is-active, .filter-chip:hover{ border-color: var(--navy); color: var(--navy); background: var(--bg-tint); }
.projects-full-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:680px){ .projects-full-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1080px){ .projects-full-grid{ grid-template-columns: repeat(3,1fr); } }
.project-tile{ display:none; }
.project-tile.is-visible{ display:block; }
.project-tile .project-card{ width:100%; aspect-ratio: 4/4.6; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats-band{ background: var(--navy); position:relative; overflow:hidden; }
.stats-band::before{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background: radial-gradient(circle at 85% 20%, rgba(200,137,26,.18), transparent 55%); }
.stats-grid{ position:relative; display:grid; gap:32px; grid-template-columns: repeat(2,1fr); text-align:center; }
@media (min-width:780px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } }
.stat .num{ font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.2rem); font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; gap:2px; }
.stat .num .suffix{ color: var(--gold-light); }
.stat .label{ margin-top:8px; color: rgba(255,255,255,.68); font-size:.92rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 60%);
  border-radius: var(--radius-l);
  padding: clamp(36px,6vw,64px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  color: var(--navy-deep);
}
.cta-band h2{ color: var(--navy-deep); font-size: var(--step2); max-width: 20ch; }
.cta-band p{ color: rgba(7,21,49,.75); margin-top:8px; max-width:44ch; }
.cta-band .btn-navy:hover{ background: var(--navy-deep); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.68); }
.footer-top{ padding-block: 64px 44px; display:grid; gap:40px; grid-template-columns: 1fr; }
@media (min-width:820px){ .footer-top{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand .brand-word{ color:#fff; }
.footer-brand p{ max-width:34ch; font-size:.92rem; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; transition: background-color .2s, border-color .2s;
}
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color:var(--navy-deep); }
.footer-social svg{ width:17px; height:17px; }
.footer h4{ color:#fff; font-size:.98rem; margin-bottom:20px; letter-spacing:.02em; }
.footer-links li{ margin-bottom:12px; }
.footer-links a{ font-size:.92rem; transition:color .2s; }
.footer-links a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:12px; margin-bottom:16px; font-size:.92rem; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; flex:none; margin-top:2px; color: var(--gold-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; }

/* ==========================================================================
   FORM (contact)
   ========================================================================== */
.form-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid.cols-2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1/-1; }
.field label{ font-size:.88rem; font-weight:600; color: var(--navy); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--border); border-radius: var(--radius-s);
  padding: 13px 16px; background:#fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--wave); box-shadow: 0 0 0 4px rgba(12,109,158,.12); outline:none;
}
.field textarea{ resize:vertical; min-height:130px; }
.field .error{ font-size:.8rem; color:#B3261E; min-height:16px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#B3261E; }

.form-note{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; color: var(--ink-faint); margin-top:6px; }
.form-note svg{ width:16px; height:16px; flex:none; margin-top:2px; }

.form-status{
  display:none; align-items:center; gap:12px; padding:16px 18px; border-radius: var(--radius-s);
  font-size:.92rem; font-weight:600; margin-top:18px;
}
.form-status.show{ display:flex; }
.form-status.ok{ background:#EAF6EC; color:#1E5C2A; }
.form-status.err{ background:#FBEAEA; color:#8C2A24; }
.form-status svg{ width:20px; height:20px; flex:none; }

.contact-info-card{ background: var(--bg-soft); border-radius: var(--radius-l); padding: clamp(28px,4vw,40px); }
.contact-info-card li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-card li:last-child{ margin-bottom:0; }
.contact-info-card .ic{ flex:none; width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.contact-info-card .ic svg{ width:20px; height:20px; }
.contact-info-card h4{ font-size:.98rem; margin-bottom:4px; }
.contact-info-card p, .contact-info-card a{ color: var(--ink-soft); font-size:.94rem; }
.map-embed{ border-radius: var(--radius-l); overflow:hidden; margin-top:24px; border:1px solid var(--border); }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; }

/* ==========================================================================
   ACTUALITÉS
   ========================================================================== */
.news-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:760px){ .news-grid{ grid-template-columns: repeat(2,1fr); } }
.news-card{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column; }
.news-card .media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.news-card .media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.25) saturate(.85) contrast(1.05); }
.news-card .media::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(155deg, rgba(11,33,73,.42), transparent 60%); }
.news-card .body{ padding:26px; flex:1; display:flex; flex-direction:column; }
.news-date{ display:flex; align-items:center; gap:8px; font-size:.82rem; color: var(--ink-faint); font-weight:600; margin-bottom:12px; }
.news-date svg{ width:15px; height:15px; }
.news-card h3{ font-size:1.18rem; margin-bottom:10px; }
.news-card p{ color: var(--ink-soft); font-size:.94rem; flex:1; }
.news-tag{ display:inline-block; margin-bottom:12px; padding:4px 12px; border-radius:999px; background: var(--bg-tint); color: var(--navy); font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; align-self:flex-start; }

/* ==========================================================================
   ENGAGEMENTS
   ========================================================================== */
.engage-grid{ display:grid; gap:26px; grid-template-columns:1fr; }
@media (min-width:700px){ .engage-grid{ grid-template-columns: repeat(2,1fr); } }
.engage-card{ padding: 32px; border-radius: var(--radius-m); background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-card); }
.engage-card .ic{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--card-accent, var(--navy)); color:#fff; margin-bottom:20px; }
.engage-card .ic svg{ width:24px; height:24px; }
.engage-card h3{ font-size:1.1rem; margin-bottom:10px; }
.engage-card p{ color: var(--ink-soft); font-size:.94rem; }

/* ==========================================================================
   404
   ========================================================================== */
.error-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-block:80px; }
.error-page .code{ font-family:var(--font-display); font-size: clamp(4rem,12vw,7rem); font-weight:700; color: var(--gold); line-height:1; }

/* ---- Reveal utility (utilisé une seule fois : bandeau stats) ---------- */
.count-up{ }

/* Print-ish niceties */
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }