/*
Theme Name: Divinemenciel
Theme URI: https://divinemenciel.com
Author: Divinemenciel
Description: Thème sur-mesure pour l'agence Divinemenciel (communication 360° Food & Hospitality). Reconstruit à partir de la maquette de référence (design system + charte graphique).
Version: 0.7.1 (correction grille piliers Services + pictos metiers + espacements)
Text Domain: divinemenciel
*/

/* ==========================================================================
   1. POLICES (hébergées en local, cf. handoff : ne pas utiliser de CDN)
   ========================================================================== */
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS — source : charte graphique Divinemenciel_Chartegraphique_2026.pdf
   Repris à l'identique de la maquette (_ds/tokens/*.css) : ne pas modifier les
   valeurs sans repasser par la charte.
   ========================================================================== */
:root {
  /* Palette principale */
  --vert-olive: #1a3a2b;
  --rose-sorbet: #fd8ac4;
  --vert-pesto: #05a878;
  --jaune-mousse: #d8f19f;
  --orange-patate: #fc5e42;
  --blanc-amande: #ebedd4;
  --noir: #000000;
  --blanc: #ffffff;
  --vin-rouge: #7c1c20;
  --fuchsia: #c13f8a;
  --blanc-casse: #f5f5f5;

  /* Nuanciers */
  --vert-olive-100: #1a3a2b; --vert-olive-80: #4d6156; --vert-olive-60: #798881; --vert-olive-40: #a5b0aa; --vert-olive-20: #d2d8d6; --vert-olive-5: #f5f5f5;
  --rose-sorbet-100: #fd8ac4; --rose-sorbet-80: #f1a6cf; --rose-sorbet-60: #f3bcdb; --rose-sorbet-40: #f7d1e6; --rose-sorbet-20: #fce8f3; --rose-sorbet-5: #fef9fd;
  --vert-pesto-100: #05a878; --vert-pesto-80: #61b695; --vert-pesto-60: #83c9af; --vert-pesto-40: #a8dbca; --vert-pesto-20: #d3ede4; --vert-pesto-5: #f4faf8;
  --jaune-mousse-100: #d8f19f; --jaune-mousse-80: #e4f3ba; --jaune-mousse-60: #eaf5ca; --jaune-mousse-40: #f0f9dc; --jaune-mousse-20: #f8fced; --jaune-mousse-5: #fdfdfb;
  --orange-patate-100: #fc5e42; --orange-patate-80: #ee856f; --orange-patate-60: #f0a393; --orange-patate-40: #f3c1b6; --orange-patate-20: #f9e0db; --orange-patate-5: #fdf8f5;
  --blanc-amande-100: #ebedd4; --blanc-amande-80: #eff0de; --blanc-amande-60: #f3f4e6; --blanc-amande-40: #f7f8f0; --blanc-amande-20: #fbfcf7; --blanc-amande-5: #fefefc;

  /* Alias sémantiques */
  --surface-page: var(--blanc-amande);
  --surface-card-dark: var(--vert-olive);
  --surface-card-pesto: var(--vert-pesto);
  --surface-card-orange: var(--orange-patate);
  --surface-card-rose: var(--rose-sorbet);
  --surface-card-jaune: var(--jaune-mousse);
  --text-body-color: var(--vert-olive);
  --text-on-dark: var(--blanc-casse);
  --text-accent-on-dark: var(--jaune-mousse);
  --text-on-pesto: var(--blanc-casse);
  --text-on-orange: var(--blanc-casse);
  --text-on-rose: var(--blanc);
  --text-on-rose-accent: var(--vin-rouge);
  --text-on-jaune: var(--vert-olive);
  --link: var(--vert-olive);

  /* Couleurs par pôle métier (4 pastilles fixes — ne pas en ajouter) */
  --pole-studio-creatif: var(--rose-sorbet);
  --pole-agence-com: var(--orange-patate);
  --pole-bureau-presse: var(--vert-pesto);
  --pole-pole-event: var(--vert-olive);

  /* Typographie */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "DM Sans", -apple-system, sans-serif;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900;
  --text-mega: clamp(56px, 8vw, 112px);
  --text-h1: clamp(40px, 5vw, 64px);
  --text-h2: clamp(30px, 3.5vw, 44px);
  --text-h3: clamp(24px, 2.5vw, 32px);
  --text-headline: 22px;
  --text-body: 17px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-pastille: 13px;
  --leading-display: 1.05; --leading-title: 1.12; --leading-body: 1.5;
  --tracking-caps: 0.08em; --tracking-display: -0.01em;

  /* Espacement / rayons — la carte à coins arrondis est la structure de base de la charte */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 16px; --radius-md: 28px; --radius-lg: 44px; --radius-pill: 999px;
  --gutter: 24px;
}

/* ==========================================================================
   3. RESET & BASE
   Règle de charte : aplats uniquement, jamais de dégradé ni d'ombre.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body-color);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-title); margin: 0; }
.ds-mega { font-family: var(--font-display); font-size: var(--text-mega); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.ds-h1 { font-size: var(--text-h1); text-transform: uppercase; }
.ds-h2 { font-size: var(--text-h2); }
.ds-h3 { font-size: var(--text-h3); }
.ds-overline { font-family: var(--font-text); font-size: var(--text-small); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.ds-accent { font-family: var(--font-display); font-style: italic; }
.ds-caption { font-family: var(--font-text); font-size: var(--text-caption); font-weight: var(--weight-light); }

/* Cartes — radius proportionnel, jamais d'ombre */
.card { border-radius: var(--radius-md); padding: var(--radius-md); background: var(--surface-card-dark); color: var(--text-on-dark); box-shadow: none; }

/* Pastilles métiers (4 fixes, couleur par pôle) */
.metier-pastille { display: inline-block; }
.pastille {
  display: inline-block;
  font-family: var(--font-text);
  font-size: var(--text-pastille);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
}
.pastille--rose { background: var(--rose-sorbet); color: var(--text-on-rose); }
.pastille--orange { background: var(--orange-patate); color: var(--text-on-orange); }
.pastille--vert-pesto { background: var(--vert-pesto); color: var(--text-on-pesto); }
.pastille--vert-olive { background: var(--vert-olive); color: var(--text-on-dark); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--vert-olive);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.header-logo img { height: 34px; width: auto; }
.header-nav { display: flex; gap: var(--space-5); align-items: center; }
.header-nav a, .header-nav-right a {
  color: var(--text-on-dark);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--jaune-mousse);
  color: var(--vert-olive);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
}
.header-burger { display: none; background: none; border: 0; color: var(--text-on-dark); font-family: var(--font-text); cursor: pointer; }

@media (max-width: 980px) {
  .header-nav { display: none; }
  .header-burger { display: block; }
}

/* ==========================================================================
   5. FOOTER "RIDEAU"
   ========================================================================== */
.site-footer {
  background: var(--vert-olive);
  color: var(--text-on-dark);
  padding-block: var(--space-8) var(--space-6);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.footer-col h4 { font-family: var(--font-text); font-size: var(--text-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-3); color: var(--jaune-mousse); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; border-top: var(--border-hairline, 1px solid rgba(245,245,245,.2)); padding-top: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.footer-logo-img { height: 28px; }
.footer-legal { display: flex; gap: var(--space-4); font-size: var(--text-caption); opacity: .8; }
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. HERO (home)
   ========================================================================== */
.hero {
  background: var(--vert-olive);
  color: var(--text-on-dark);
  padding-block: var(--space-9) var(--space-8);
  text-align: center;
}
.hero-overline { color: var(--jaune-mousse); display: block; margin-bottom: var(--space-4); }
.hero-title { color: var(--blanc-casse); }
.hero-title .ds-accent { color: var(--jaune-mousse); }
.hero-sub { margin-top: var(--space-5); font-size: var(--text-headline); opacity: .85; }

/* ==========================================================================
   7. PASTILLES MÉTIERS (ligne sous le hero)
   ========================================================================== */
.metiers-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-6);
}

/* ==========================================================================
   8. GRILLE DE PROJETS (home + réalisations)
   ========================================================================== */
.works-section { padding-block: var(--space-8); text-align: center; }
.works-section h2 { margin-top: var(--space-3); margin-bottom: var(--space-6); }
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  text-align: left;
}
.work-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--vert-olive);
}
.work-card--rose { background: var(--rose-sorbet); }
.work-card--orange { background: var(--orange-patate); }
.work-card--vert-pesto { background: var(--vert-pesto); }
.work-card--vert-olive { background: var(--vert-olive); }
.work-thumb { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.work-thumb--placeholder { background: rgba(0,0,0,.12); }
.work-num { position: absolute; top: var(--space-3); left: var(--space-3); font-size: var(--text-caption); color: var(--blanc-casse); opacity: .8; }
.work-title {
  display: block;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--blanc-casse);
}
.work-empty {
  border-radius: var(--radius-md);
  background: var(--blanc-amande-80);
}
@media (max-width: 980px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .works-grid { grid-template-columns: 1fr; }
  .work-empty { display: none; }
}

/* ==========================================================================
   9. FOOTER V2 (contact typographique + colonnes + liens legaux)
   ========================================================================== */
.fv2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px var(--gutter);
  padding-bottom: var(--space-7);
  align-items: start;
}
.fv2-title {
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: clamp(52px, 5.8vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 44px;
  color: var(--text-on-dark);
}
.fv2-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--orange-patate);
}
.fv2-bigs { display: flex; flex-direction: column; gap: 10px; }
.fv2-rdv { display: inline-flex; align-items: center; gap: 10px; color: var(--text-on-dark); }
.fv2-rdv svg { width: 0.7em; height: 0.7em; flex: none; transition: transform 180ms ease; }
.fv2-rdv:hover svg { transform: translate(3px, -3px); }
.fv2-big {
  display: block;
  width: fit-content;
  font-family: var(--font-text);
  font-weight: var(--weight-light);
  font-size: clamp(24px, 2.6vw, 44px);
  line-height: 1.25;
  color: var(--text-on-dark);
  transition: color 160ms ease;
}
.fv2-big:hover { color: var(--orange-patate); }
.fv2-cols { padding-top: 16px; }
.fv2-legal {
  padding-top: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.fv2-logo { margin-top: var(--space-6); }
@media (max-width: 980px) {
  .fv2-grid { grid-template-columns: 1fr; gap: 44px; padding-bottom: var(--space-6); }
  .fv2-cols { padding-top: 0; }
  .fv2-legal { flex-direction: column; gap: 14px; }
}
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.footer-legal-links a { opacity: 0.85; transition: opacity 140ms ease, color 140ms ease; color: var(--text-on-dark); }
.footer-legal-links a:hover { opacity: 1; color: var(--jaune-mousse); }
@media (max-width: 980px) {
  .footer-legal-links { justify-content: flex-start; }
}

/* ==========================================================================
   10. PAGES LEGALES (mentions, confidentialite, CGV)
   ========================================================================== */
.legal-container { max-width: 900px; }
.legal-updated {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--vert-pesto);
  display: block;
  margin: 0 0 var(--space-6);
}
.legal-body h2 {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: 25px;
  line-height: 1.25;
  margin: var(--space-7) 0 var(--space-3);
}
.legal-body h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--vin-rouge);
}
.legal-body p { font-size: 16.5px; line-height: 1.65; margin: 0 0 14px; max-width: 46em; }
.legal-body ul { margin: 0 0 14px; padding-left: 22px; }
.legal-body li { font-size: 16.5px; line-height: 1.6; margin-bottom: 6px; max-width: 44em; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--vert-pesto); }

/* ==========================================================================
   11. PAGES METIER (Studio Creatif / Agence de Com / Bureau de Presse / Pole Event)
   ========================================================================== */
.metier-hero { padding-block: var(--space-9) var(--space-8); text-align: center; color: var(--text-on-dark); }
.metier-hero--rose { background: var(--rose-sorbet); }
.metier-hero--orange { background: var(--orange-patate); }
.metier-hero--vert-pesto { background: var(--vert-pesto); }
.metier-hero--vert-olive { background: var(--vert-olive); color: var(--jaune-mousse); }
.metier-hero-picto { width: 72px; height: 72px; object-fit: contain; margin: 0 auto var(--space-5); display: block; }
.metier-hero-title { text-transform: uppercase; font-style: italic; }
.metier-hero-sub { max-width: 640px; margin: var(--space-4) auto 0; font-size: var(--text-headline); opacity: .92; }

.metier-lead { padding-block: var(--space-8); text-align: center; }
.metier-lead h2 { margin-bottom: var(--space-4); }
.metier-lead p { max-width: 700px; margin: 0 auto; font-size: var(--text-headline); }

.presta-stack { display: flex; flex-direction: column; }
.presta-card { padding-block: var(--space-7); position: sticky; top: 0; }
.presta-card--rose { background: var(--rose-sorbet); color: var(--text-on-rose); }
.presta-card--orange { background: var(--orange-patate); color: var(--text-on-orange); }
.presta-card--vert-pesto { background: var(--vert-pesto); color: var(--text-on-pesto); }
.presta-card-num { display: block; font-size: var(--text-small); opacity: .8; margin-bottom: var(--space-2); }
.presta-card-title { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.presta-card-desc { max-width: 640px; margin-bottom: var(--space-4); }
.presta-card-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.presta-card-tags li {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.25);
}

.metiers-others { padding-block: var(--space-8); text-align: center; }
.metiers-others h2 { margin: var(--space-3) 0 var(--space-6); }
.metier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); text-align: left; }
.metier-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5); border-radius: var(--radius-md); color: var(--text-on-dark);
}
.metier-card--rose { background: var(--rose-sorbet); }
.metier-card--orange { background: var(--orange-patate); }
.metier-card--vert-pesto { background: var(--vert-pesto); }
.metier-card--vert-olive { background: var(--vert-olive); color: var(--jaune-mousse); }
.metier-card h3 { font-size: var(--text-h3); }
@media (max-width: 980px) { .metier-cards { grid-template-columns: 1fr; } }

.contact-band { padding-block: var(--space-8); text-align: center; background: var(--blanc-amande-60); }
.contact-band h2 { margin-bottom: var(--space-5); }

/* ==========================================================================
   12. PAGE SERVICES
   ========================================================================== */
.page-hero--services { padding-block: var(--space-9) var(--space-8); text-align: center; background: var(--vert-olive); color: var(--text-on-dark); }
.page-hero-sub { max-width: 640px; margin: var(--space-4) auto 0; font-size: var(--text-headline); color: var(--jaune-mousse); }

.pillars-band { padding-block: var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); }
.pillar {
  display: grid;
  grid-template-columns: 70px 260px 1fr;
  grid-template-areas: "num picto desc" "num name desc" "num items desc";
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: start;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--blanc-amande-60);
  color: var(--text-body-color);
  transition: background 160ms ease, color 160ms ease;
}
.pillar:hover { color: var(--text-on-dark); }
.pillar--rose:hover { background: var(--rose-sorbet); }
.pillar--orange:hover { background: var(--orange-patate); }
.pillar--vert-pesto:hover { background: var(--vert-pesto); }
.pillar--vert-olive:hover { background: var(--vert-olive); color: var(--jaune-mousse); }
.pillar-num { grid-area: num; font-size: var(--text-small); opacity: .7; }
.pillar-picto { grid-area: picto; width: 44px; height: 44px; object-fit: contain; margin-bottom: var(--space-2); }
.pillar-name { grid-area: name; font-size: var(--text-h2); margin: 0 0 var(--space-2); }
.pillar-desc { grid-area: desc; font-size: var(--text-headline); margin: 0; align-self: center; }
.pillar-items { grid-area: items; font-size: var(--text-small); opacity: .8; margin: 0; }
@media (max-width: 720px) {
  .pillar {
    grid-template-columns: 1fr;
    grid-template-areas: "picto" "num" "name" "desc" "items";
    text-align: left;
    row-gap: var(--space-3);
  }
}

.offer-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.offer-block { padding: var(--space-6); border-radius: var(--radius-md); }
.offer-block--vert-pesto { background: var(--vert-pesto); color: var(--text-on-pesto); }
.offer-block--orange { background: var(--orange-patate); color: var(--text-on-orange); }
.offer-block--jaune { background: var(--jaune-mousse); color: var(--vert-olive); }
.offer-block-num { font-size: var(--text-small); opacity: .8; }
.offer-block-name { font-size: var(--text-h3); margin: var(--space-2) 0 var(--space-3); }
.offer-block-desc { margin-bottom: var(--space-3); }
.offer-block-incl { font-size: var(--text-caption); opacity: .85; }
@media (max-width: 980px) { .offer-blocks { grid-template-columns: 1fr; } }
.works-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .works-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .works-grid--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   13. FICHE PROJET (single-projet.php)
   ========================================================================== */
.pj-opener { width: 100%; }
.pj-opener-img { width: 100%; height: auto; object-fit: cover; }
.pj-opener--placeholder { aspect-ratio: 16 / 7; }
.pj-opener--rose { background: var(--rose-sorbet); }
.pj-opener--orange { background: var(--orange-patate); }
.pj-opener--vert-pesto { background: var(--vert-pesto); }
.pj-opener--vert-olive { background: var(--vert-olive); }

.pj-head { padding-top: var(--space-7); text-align: center; }
.pj-title { margin: var(--space-4) 0 var(--space-2); }
.pj-client { font-size: var(--text-headline); opacity: .75; margin: 0; }
.pj-resultats {
  display: inline-block;
  margin-top: var(--space-4);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--jaune-mousse);
  color: var(--vert-olive);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
}

.pj-lead { max-width: 760px; text-align: center; padding-block: var(--space-6); }
.pj-lead p { font-size: var(--text-headline); }

.pj-gallery { padding-block: var(--space-6); }
.pj-gallery img { border-radius: var(--radius-sm); }

.pj-other { padding-block: var(--space-8); text-align: center; }
.pj-other h2 { margin: var(--space-3) 0 var(--space-6); }

/* ==========================================================================
   14. PAGE INTRO generique (News / Contact)
   ========================================================================== */
.page-intro { padding-block: var(--space-9) var(--space-7); text-align: center; }
.page-intro h1 { margin: var(--space-3) 0 var(--space-4); }
.page-intro p { max-width: 640px; margin: 0 auto; font-size: var(--text-headline); }

.page-hero { padding-block: var(--space-9) var(--space-9); text-align: center; color: var(--text-on-dark); background: var(--vert-olive); min-height: 55vh; display: flex; align-items: center; justify-content: center; }
.page-hero--rose { background: var(--rose-sorbet); }
.page-hero-sub { max-width: 700px; margin: var(--space-4) auto 0; font-size: var(--text-headline); }

/* ==========================================================================
   15. PAGE A PROPOS
   ========================================================================== */
.about-lead { padding-block: var(--space-8); text-align: center; }
.about-lead h2 { margin: var(--space-3) auto var(--space-6); max-width: 820px; }
.about-stats { display: flex; justify-content: center; gap: var(--space-7); flex-wrap: wrap; }
.about-stats > div { display: flex; flex-direction: column; align-items: center; }
.about-stats strong { font-family: var(--font-display); font-size: var(--text-h1); color: var(--vert-pesto); }
.about-stats span { font-size: var(--text-small); opacity: .8; max-width: 180px; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.value-card { background: var(--blanc-amande-60); border-radius: var(--radius-md); padding: var(--space-5); }
.value-card h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.value-card p { font-size: var(--text-small); }
@media (max-width: 980px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.team-photo-slot {
  aspect-ratio: 1; border-radius: var(--radius-md); background: var(--blanc-amande-80);
  display: flex; align-items: center; justify-content: center; font-size: var(--text-caption); opacity: .6; margin-bottom: var(--space-3);
}
.team-card h3 { font-size: var(--text-headline); margin: 0; }
.team-card p { font-size: var(--text-small); opacity: .75; margin: 0; }
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

.recrut-banner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding-block: var(--space-8); }
.recrut-photo-slot { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--blanc-amande-80); display: flex; align-items: center; justify-content: center; opacity: .6; }
.recrut-title { font-family: var(--font-display); font-size: var(--text-h2); margin: var(--space-2) 0; }
@media (max-width: 980px) { .recrut-banner { grid-template-columns: 1fr; } }

/* ==========================================================================
   16. PAGE NEWS
   ========================================================================== */
.offer-blocks--news { grid-template-columns: repeat(2, 1fr); }
.offer-blocks--news .offer-block-name { margin-top: var(--space-2); }
.offer-block-link { display: inline-block; margin-top: var(--space-3); font-weight: var(--weight-semibold); text-decoration: underline; }
@media (max-width: 980px) { .offer-blocks--news { grid-template-columns: 1fr; } }

/* ==========================================================================
   17. PAGE CONTACT / CTA CARDS
   ========================================================================== */
.cta-grid { display: grid; gap: var(--space-5); }
.cta-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cta-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cta-card {
  display: block; padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--blanc-amande-60); color: var(--text-body-color); transition: background 160ms ease, color 160ms ease;
}
.cta-card:hover { background: var(--vert-olive); color: var(--text-on-dark); }
.cta-card-title { font-size: var(--text-h3); margin: var(--space-3) 0 var(--space-5); }
.cta-btn { font-weight: var(--weight-semibold); }
@media (max-width: 980px) { .cta-grid-3, .cta-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. PAGE SIMULATEUR (MyDigitalScore)
   ========================================================================== */
.mds-hero { padding-block: var(--space-9) var(--space-8); text-align: center; background: var(--vert-olive); color: var(--text-on-dark); }
.mds-brand { font-family: var(--font-text); font-weight: var(--weight-bold); font-size: var(--text-headline); margin-bottom: var(--space-3); }
.mds-brand em { font-style: italic; color: var(--jaune-mousse); }
.mds-hero-title { color: var(--blanc-casse); max-width: 820px; margin: 0 auto var(--space-4); }
.mds-hero-sub { max-width: 680px; margin: 0 auto var(--space-5); opacity: .9; }
.mds-badges { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.mds-badges span { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.15); }

.mds-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.mds-step { padding: var(--space-5); border-radius: var(--radius-md); color: var(--text-on-dark); }
.mds-step--rose { color: var(--vin-rouge); }
.mds-step-num { font-size: var(--text-h3); opacity: .8; }
@media (max-width: 980px) { .mds-steps { grid-template-columns: 1fr; } }

.mds-report { padding-block: var(--space-8); }
.mds-report h2 { max-width: 760px; margin-bottom: var(--space-3); }
.mds-bars { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.mds-bar-row { display: grid; grid-template-columns: 140px 1fr 34px; align-items: center; gap: var(--space-3); }
.mds-bar-name { font-size: var(--text-small); }
.mds-bar { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--blanc-amande-80); overflow: hidden; }
.mds-bar i { display: block; height: 100%; background: var(--vert-pesto); border-radius: var(--radius-pill); }
.mds-bar-val { font-size: var(--text-small); font-weight: var(--weight-semibold); text-align: right; }

.mds-beta { text-align: center; padding-block: var(--space-6); font-size: var(--text-small); opacity: .8; }

/* ==========================================================================
   19. REVEAL AU SCROLL (Lot 6 - pilote par assets/js/behaviors.js)
   ========================================================================== */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 620ms ease, transform 620ms ease; }
.rv-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   20. FOOTER "RIDEAU" (le footer reste fixe derriere le contenu, qui defile
   par-dessus et se retire a la toute fin pour le reveler - desktop uniquement,
   comportement normal en flux sur mobile). Piloté par assets/js/behaviors.js
   (mesure la hauteur du footer -> --footer-h) et header.php/footer.php
   (structure #div-page-wrap).
   ========================================================================== */
@media (min-width: 981px) {
  .site-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
  }
  #div-page-wrap {
    position: relative;
    z-index: 1;
    background: var(--surface-page);
    margin-bottom: var(--footer-h, 0px);
  }
}

/* ==========================================================================
   21. VOILE DE TRANSITION ENTRE PAGES
   ========================================================================== */
#page-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--vert-olive);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
#page-veil.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #page-veil { display: none; }
}

/* ==========================================================================
   22. HERO REEL (image de fond + ombre)
   ========================================================================== */
.hero { position: relative; padding-block: var(--space-9) var(--space-8); text-align: center; color: var(--text-on-dark); overflow: hidden; min-height: 60vh; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-shade { position: absolute; inset: 0; background: rgba(26,58,43,.62); z-index: 1; }
.hero-inner { position: relative; z-index: 2; }
.hero-title { color: var(--blanc-casse); max-width: 900px; margin: 0 auto; }
.hero-title .ds-accent { color: var(--jaune-mousse); }

/* ==========================================================================
   23. MANIFESTE
   ========================================================================== */
.manifesto { padding-block: var(--space-8); text-align: center; }
.manifesto-text { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); line-height: 1.35; max-width: 900px; margin: 0 auto var(--space-7); }
.manif-poles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.manif-pole { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md); background: var(--blanc-amande-60); transition: background 160ms ease; }
.manif-pole:hover { background: var(--blanc-amande-80); }
.manif-pole-picto { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--space-2); }
.manif-pole-name { font-family: var(--font-display); font-size: var(--text-h3); }
.manif-pole-items { font-size: var(--text-caption); opacity: .75; text-align: center; }
@media (max-width: 980px) { .manif-poles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .manif-poles { grid-template-columns: 1fr; } }

/* Vignette projet : image + video au survol (desktop uniquement) */
.work-thumb-wrap { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; }
.work-thumb-wrap .work-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-thumb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms ease; }
@media (hover: hover) {
  .work-card:hover .work-thumb-video { opacity: 1; }
}

/* ==========================================================================
   24. CLIENTS (bandeau logos defilant)
   ========================================================================== */
.clients-block { background: var(--vert-olive); color: var(--text-on-dark); padding-block: var(--space-8); overflow: hidden; }
.clients-title { text-align: center; max-width: 900px; margin: 0 auto var(--space-7); color: var(--blanc-casse); }
.clients-marquee { overflow: hidden; width: 100%; }
.clients-track { display: flex; gap: var(--space-7); width: max-content; animation: clients-scroll 40s linear infinite; align-items: center; }
.client-logo { display: inline-block; background-color: var(--blanc-amande-60); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; flex: none; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; overflow-x: auto; }
}

/* ==========================================================================
   25. TEMOIGNAGES
   ========================================================================== */
.testi-section { padding-block: var(--space-8); }
.testi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-4); }
.testi-card { background: var(--blanc-amande-60); border-radius: var(--radius-lg); padding: var(--space-6); }
.testi-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-on-dark); font-weight: var(--weight-bold); flex: none; }
.testi-msg { background: var(--blanc); border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: var(--space-2); display: inline-block; max-width: 90%; }
@media (max-width: 980px) { .testi-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. MENU MOBILE PLEIN ECRAN
   ========================================================================== */
.header-burger-label { pointer-events: none; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--vert-olive);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu-nav { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.mobile-menu-nav a { font-family: var(--font-display); font-size: var(--text-h2); color: var(--text-on-dark); }
.mobile-menu-cta { color: var(--jaune-mousse) !important; }
@media (min-width: 981px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   27. GALERIE FICHE PROJET (vrais visuels)
   ========================================================================== */
.pj-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.pj-gallery-grid img { width: 100%; border-radius: var(--radius-sm); object-fit: cover; }
@media (max-width: 720px) { .pj-gallery-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   28. PHOTOS AGENCE (page A propos)
   ========================================================================== */
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-block: var(--space-7); }
.about-photos img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius-md); }
@media (max-width: 720px) { .about-photos { grid-template-columns: 1fr; } .about-photos img { height: 220px; } }
.value-picto { width: 44px; height: 44px; object-fit: contain; margin-bottom: var(--space-3); }