/* =============================================
   LATO — Auto-hébergement local (OFL-1.1)
   Source : fontsource.org/fonts/lato v5.2.7
   Graisses charte : 300 (normal+italic), 400, 700, 900
   Format : woff2 uniquement (support universel 2016+)
   font-display: swap — texte visible immédiatement
   Aucune requête externe — RGPD + performances + éco ✓
============================================= */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato/lato-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/lato/lato-latin-300-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato/lato-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                 U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
                 U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =============================================
   OPENDYSLEXIC — Police pour la dyslexie
   Source : opendyslexic.org (SIL OFL 1.1)
   Lazy-loaded : le navigateur ne télécharge
   que si un élément utilise la font-family
   font-display: swap — texte visible immédiat
============================================= */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
}

/* =============================================
   POSTHACK — Charte graphique
   ─────────────────────────────────────────────
   PALETTE WCAG AAA VÉRIFIÉE
   Fonds clairs :
     #35363C sur #FFFFFF  → 12.0:1 AAA ✓ titres/labels
     #494A51 sur #FFFFFF  →  8.8:1 AAA ✓ corps de texte
     #494A51 sur #EBEBED  →  7.4:1 AAA ✓ corps sur fond neutre
   Fonds sombres (ardoise #494A51) :
     #FFFFFF sur #494A51  →  8.8:1 AAA ✓ textes primaires
     #E6E6E6 sur #494A51  →  7.1:1 AAA ✓ corps/métadonnées
   Fonds sombres (ardoise-deep #35363C) :
     #FFFFFF sur #35363C  → 12.0:1 AAA ✓ textes primaires
     #C8C8CB sur #35363C  →  7.2:1 AAA ✓ métadonnées
   Accent jaune :
     #35363C sur #FCCE61  →  8.1:1 AAA ✓ badges/boutons/surlignages
     #FCCE61 sur #35363C  →  8.1:1 AAA ✓ texte jaune sur fond deep
   Éléments décoratifs (bordures rgba, formes, filets) :
     Exempts WCAG — pas de texte → aucune exigence de contraste
   ─────────────────────────────────────────────
   Règle absolue conservée :
     #FCCE61 JAMAIS en texte sur fond blanc (2.3:1 ✗)
     #FCCE61 JAMAIS en texte sur fond ardoise sans fond propre (5.9:1 ✗ AAA)
     → usage : fond décoratif OU fond de badge/bouton avec texte #35363C
============================================= */

/* ── Variables ─────────────────────────────── */
:root {
  /* Couleurs charte */
  --ardoise:       #494A51;
  --ardoise-deep:  #35363C;
  --ardoise-light: #EBEBED;
  --ardoise-xlt:   #F5F5F6;
  --jaune:         #FCCE61;
  --jaune-deep:    #E8B800;
  --blanc:         #FFFFFF;
  --border:        rgba(73,74,81,.15); /* décoratif — exempt WCAG */

  /* Textes AAA — fonds clairs */
  --text-primary:  #35363C; /* 12.0:1 sur blanc AAA ✓ */
  --text-body:     #494A51; /*  8.8:1 sur blanc AAA ✓ */

  /* Textes AAA — fonds sombres ardoise #494A51
     Seul #E6E6E6 (7.06:1) est le seuil minimum AAA sur ce fond.
     Pas de valeur intermédiaire possible → on-dark-body utilisé partout */
  --on-dark-hi:    #FFFFFF; /*  8.8:1 sur #494A51 AAA ✓ — titres, textes forts */
  --on-dark-body:  #E6E6E6; /*  7.1:1 sur #494A51 AAA ✓ — corps, métadonnées, labels */

  /* Textes AAA — fonds sombres ardoise-deep #35363C */
  --on-deep-hi:    #FFFFFF; /* 12.0:1 sur #35363C AAA ✓ — titres, textes forts */
  --on-deep-body:  #E6E6E6; /*  9.7:1 sur #35363C AAA ✓ — corps */
  --on-deep-meta:  #C8C8CB; /*  7.2:1 sur #35363C AAA ✓ — métadonnées, labels discrets */

  /* Schéma de couleurs — empêche Chrome/Firefox de forcer son propre dark mode */
  color-scheme: light dark;

  /* Typographie */
  --f: 'Lato', 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;

  /* Layout */
  --space-xl: 8rem;
  --col-gap:  clamp(1.5rem, 3vw, 3rem);
  --radius:   2px;
  --max-w:    1200px;
}



/* ── Layout ──────────────────────────────── */
.ph-container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.t-label { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* ======================
   NAVIGATION
====================== */
.ph-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.25rem 0;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
/* État scrollé : fond blanc opaque + réduction du header */
.ph-nav.scrolled {
  padding: .6rem 0;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1px 3px rgba(73,74,81,0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ph-nav__inner { display: flex; align-items: center; gap: 1.25rem; }
.ph-nav__logo { display: flex; align-items: center; gap: .75rem; line-height: 1; margin-right: auto; text-decoration: none; }
/* Logo texte : text-primary sur blanc → 12:1 AAA ✓ — plus gros, réduit au scroll */
.ph-nav__logo-name { font-weight: 700; font-size: 1.25rem; color: var(--text-primary); transition: font-size .35s ease; }
.ph-nav.scrolled .ph-nav__logo-name { font-size: 1rem; }
/* Séparateur décoratif — exempt */
.ph-nav__logo-sep { width: 1px; height: 1.3em; background: var(--border); }
/* Logo SVG — aligné baseline, plus gros, réduit au scroll */
.ph-nav__logo-img { height: 24px; width: auto; display: block; transition: height .35s ease; }
.ph-nav.scrolled .ph-nav__logo-img { height: 18px; }
/* Liens nav : Lato Regular 16px selon charte — text-body sur blanc → 8.8:1 AAA ✓ */
.ph-nav__links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
/* Liens niveau 1 uniquement — pas les dropdown links */
.ph-nav__links > li > a,
.ph-nav__links > li > button { font-size: 1rem; font-weight: 400; color: var(--text-body); transition: color .2s; position: relative; padding-bottom: 2px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
/* Indicateur actif : point doré discret sous le lien (pas de barre pleine) */
.ph-nav__links > li > a::after,
.ph-nav__links > li > button::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 4px; border-radius: 2px; background: var(--or-aaa, #6E5206); transition: width .25s ease; }
/* Lien actif : point visible */
.ph-nav__links > li > a[aria-current="page"]::after { width: 24px; }
/* Hover niveau 1 : text-primary + point discret — text-primary sur blanc → 12:1 AAA ✓ */
.ph-nav__links > li > a:hover,
.ph-nav__links > li > button:hover { color: var(--text-primary); }
.ph-nav__links > li > a:hover::after,
.ph-nav__links > li > button[aria-expanded="true"]::after { width: 24px; }
/* CTA nav : blanc sur ardoise → 8.8:1 AAA ✓ */
.ph-nav__cta { font-size: .875rem; font-weight: 700; letter-spacing: .05em; padding: .65rem 1.5rem; background: var(--ardoise); color: var(--blanc); border-radius: 4px; transition: background .2s, transform .15s; white-space: nowrap; }
.ph-nav__cta:hover { background: var(--ardoise-deep); transform: translateY(-1px); color: var(--blanc); }
.ph-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.ph-nav__toggle span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform .25s, opacity .25s; }

/* ── Dropdown 2 niveaux ── */
.ph-nav__item { position: relative; }
.ph-nav__dropdown-trigger { background: none; border: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: inherit; padding: 0; }
.ph-nav__dropdown-trigger::after { content: none; }
.ph-nav__chevron { transition: transform .2s; }
.ph-nav__dropdown-trigger[aria-expanded="true"] .ph-nav__chevron { transform: rotate(180deg); }
.ph-nav__dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--blanc); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  min-width: 220px; padding: .5rem 0;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
  z-index: 110; list-style: none; margin: .5rem 0 0;
}
.ph-nav__item--has-children:hover .ph-nav__dropdown,
.ph-nav__dropdown-trigger[aria-expanded="true"] + .ph-nav__dropdown {
  opacity: 1; visibility: visible;
}
/* Dropdown links — fond gris clair au hover — Anthracite #494A51 sur Blanc #FFF → 7.2:1 AAA ✓ */
.ph-nav__dropdown-link {
  display: block; padding: .65rem 1.25rem; font-size: .875rem; font-weight: 400;
  color: var(--ardoise, #494A51); text-decoration: none; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap; border-left: 3px solid transparent;
}
.ph-nav__dropdown-link:hover, .ph-nav__dropdown-link:focus-visible {
  background: var(--gris-clair, #F5F5F5); color: var(--noir, #000000);
  border-left-color: var(--or-aaa, #6E5206);
}
/* "Tout voir" : item parent — Or AAA #6E5206 sur Blanc → 8.6:1 AAA ✓ */
.ph-nav__dropdown-link--parent {
  font-weight: 700; color: var(--or-aaa, #6E5206);
  border-bottom: 1px solid var(--gris-bordure, #E0E0E0); margin-bottom: .25rem; padding-bottom: .75rem;
}
.ph-nav__dropdown-link--parent:hover { color: var(--ardoise-deep, #2A2B2F); }

/* ── Menu mobile ── */
.ph-mobile-menu {
  position: fixed; inset: 0; background: var(--blanc); z-index: 99;
  display: flex; flex-direction: column; padding: 5.5rem 2rem 2rem;
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.ph-mobile-menu.open { transform: translateX(0); }
.ph-mobile-menu__group { border-bottom: 1px solid var(--border); }
.ph-mobile-menu__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; font-family: var(--f); font-size: 1.4rem; font-weight: 700;
  color: var(--text-primary); padding: 1rem 0; cursor: pointer;
}
.ph-mobile-menu__chevron { transition: transform .25s; }
.ph-mobile-menu__trigger[aria-expanded="true"] .ph-mobile-menu__chevron { transform: rotate(180deg); }
.ph-mobile-menu__sub { padding: 0 0 .75rem 1.25rem; }
.ph-mobile-menu__sub a {
  display: block; font-size: 1.1rem; font-weight: 300; color: var(--text-body);
  padding: .5rem 0; text-decoration: none; border-bottom: none;
}
.ph-mobile-menu__sub a:hover { color: var(--text-primary); }

/* ── Page banner ── */
.ph-page-banner {
  background: var(--ardoise); color: var(--blanc); padding: 4rem 0 3rem;
  margin-top: 4.5rem; position: relative; overflow: hidden;
}
.ph-page-banner--has-image { padding: 5rem 0 3.5rem; min-height: 220px; display: flex; align-items: flex-end; }
.ph-page-banner__bg { position: absolute; inset: 0; z-index: 0; }
.ph-page-banner__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.ph-page-banner .ph-container { position: relative; z-index: 2; }
.ph-page-banner__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: .5rem; }
.ph-page-banner__subtitle { font-size: 1.1rem; font-weight: 300; color: var(--on-dark-body, #e6e6e6); }

/* ── Sommaire de section (table of contents des sous-pages) ── */
.ph-section-toc { background: var(--gris-clair, #F5F5F5); border: 1px solid var(--gris-bordure, #E0E0E0); border-radius: 4px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; }
.ph-section-toc__title { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texte, #6B6B6B); margin-bottom: 1rem; }
.ph-section-toc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.ph-section-toc__list a { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 400; color: var(--ardoise, #494A51); text-decoration: none; padding: .4rem .75rem; border-radius: 4px; border-left: 3px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.ph-section-toc__list a:hover, .ph-section-toc__list a:focus-visible { background: var(--blanc, #FFFFFF); border-left-color: var(--or-aaa, #6E5206); color: var(--ardoise-deep, #2A2B2F); }
.ph-section-toc__list a::before { content: '→'; font-size: .8rem; color: var(--gris-texte, #6B6B6B); }
/* Liens mobile : text-primary → 12:1 AAA ✓ */
.ph-mobile-menu a { font-family: var(--f); font-size: 1.6rem; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border); padding: 1.1rem 0; transition: color .2s; display: block; }
.ph-mobile-menu a:hover { color: var(--text-body); }
.ph-mobile-menu .ph-btn-primary { margin-top: 1.5rem; justify-content: center; font-size: .9rem; border-bottom: none; padding: .9rem 2rem; display: flex; }

/* ======================
   BOUTONS
====================== */
/* Primaire : blanc sur ardoise → 8.8:1 AAA ✓ */
.ph-btn-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2rem; background: var(--jaune); color: var(--ardoise-deep);
  font-family: var(--f); font-weight: 700; font-size: .85rem; letter-spacing: .05em;
  border-radius: var(--radius); border: 2px solid var(--jaune);
  transition: background .2s, transform .15s;
}
/* ardoise-deep #35363C sur jaune #FCCE61 → 8.1:1 AAA ✓ */
.ph-btn-primary:hover { background: var(--jaune-deep); border-color: var(--jaune-deep); transform: translateY(-2px); color: var(--ardoise-deep); }
.ph-btn-primary svg { flex-shrink: 0; transition: transform .2s; }
.ph-btn-primary:hover svg { transform: translateX(3px); }
/* Secondaire : text-primary sur blanc + bordure → 12:1 AAA ✓ */
.ph-btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.75rem; background: transparent; color: var(--text-primary);
  font-family: var(--f); font-weight: 700; font-size: .85rem; letter-spacing: .05em;
  border-radius: var(--radius); border: 2px solid var(--ardoise);
  transition: background .2s, color .2s;
}
.ph-btn-outline:hover { background: var(--ardoise); color: var(--blanc); }

/* ======================
   HERO
====================== */
.ph-hero {
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  padding-top: 5rem; position: relative; overflow: hidden;
}
/* Forme décorative — exempt WCAG (pas de texte) */
.ph-hero__deco {
  position: absolute; top: 0; right: 0; width: 42vw; height: 100%;
  background: var(--jaune);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity: .15; z-index: 0; pointer-events: none;
}
.ph-hero__vline { position: absolute; left: clamp(1.25rem,5vw,3rem); top: 5rem; bottom: 0; width: 1px; background: var(--border); z-index: 0; pointer-events: none; }
.ph-hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--col-gap); padding: var(--space-xl) 0 4.5rem; position: relative; z-index: 2; }
.ph-hero__eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
/* Dot décoratif — exempt */
.ph-hero__eyebrow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); border: 2px solid var(--ardoise-deep); flex-shrink: 0; }
/* Eyebrow label : text-body → 8.8:1 AAA ✓ */
.ph-hero__eyebrow .t-label { color: var(--text-body); }
/* Titre : text-primary → 12:1 AAA ✓ */
.ph-hero__title { font-size: clamp(2.8rem,5.5vw,5rem); margin-bottom: .35rem; color: var(--text-primary); }
/* Sous-titre logo : text-body → 8.8:1 AAA ✓ */
.ph-hero__title-brand { display: inline-flex; align-items: center; gap: .4em; font-weight: 300; color: var(--text-body); font-size: .7em; }
.ph-hero__title-brand::before { content: ''; display: inline-block; width: .06em; height: .9em; background: var(--border); vertical-align: middle; }
/* Accroche : text-primary → 12:1 AAA ✓ — soulignage jaune décoratif, pas texte jaune */
.ph-hero__claim { font-size: clamp(1.5rem,2.5vw,2.1rem); font-weight: 700; color: var(--text-primary); line-height: 1.2; margin-bottom: 1.5rem; position: relative; display: inline-block; }
.ph-hero__claim::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 6px; background: var(--jaune); z-index: -1; opacity: .7; }
/* Corps hero : text-body → 8.8:1 AAA ✓ */
.ph-hero__body { font-size: 1rem; font-weight: 300; color: var(--text-body); max-width: 46ch; margin-bottom: 2.5rem; line-height: 1.8; }
.ph-hero__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* Carte hero — fond ardoise */
.ph-hero__visual { display: flex; align-items: center; justify-content: flex-end; }
.ph-hero__card { background: var(--ardoise); color: var(--on-dark-hi); padding: 2.75rem; max-width: 380px; width: 100%; border-radius: var(--radius); position: relative; }
/* Liseré jaune décoratif — exempt */
.ph-hero__card::before { content: ''; position: absolute; top: 0; left: 2.75rem; right: 2.75rem; height: 3px; background: var(--jaune); border-radius: 0 0 2px 2px; }
.ph-hero__card-label { margin-bottom: 1.5rem; }
/* Label carte : on-dark-body → 7.1:1 AAA ✓ */
.ph-hero__card-label .t-label { color: var(--on-dark-body); }
/* Mantra : on-dark-hi blanc → 8.8:1 AAA ✓ */
.ph-hero__mantra { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.75rem; color: var(--on-dark-hi); }
/* Surlignage : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-hero__mantra-hl { background: var(--jaune); color: var(--ardoise-deep); padding: 0 .25em; display: inline; }
.ph-hero__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; }
/* Tags : on-dark-body → 7.1:1 AAA ✓ */
.ph-hero__tag { font-size: .72rem; font-weight: 400; padding: .25rem .65rem; border: 1px solid var(--on-dark-body); border-radius: 20px; color: var(--on-dark-body); }
.ph-hero__stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.ph-hero__stat { padding-right: .75rem; }
/* Chiffres : on-dark-hi → 8.8:1 AAA ✓ */
.ph-hero__stat-num { font-size: 2.25rem; font-weight: 900; color: var(--on-dark-hi); line-height: 1; }
/* Unité (+, ans) : on-dark-body → 7.1:1 AAA ✓
   Le jaune (#FCCE61) sur ardoise (#494A51) = 5.9:1 AA seulement → remplacé */
.ph-hero__stat-unit { color: var(--on-dark-body); font-size: 1.5rem; }
/* Labels stats : on-dark-body → 7.1:1 AAA ✓ */
.ph-hero__stat-lbl { font-size: .72rem; font-weight: 400; color: var(--on-dark-body); margin-top: .2rem; }

.ph-hero__scroll { padding: 0 0 2.5rem; position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; max-width: 44%; }
.ph-hero__scroll-bar { display: flex; flex-direction: column; gap: 3px; }
/* Barres décoratifs — exempt */
.ph-hero__scroll-bar span { display: block; height: 1px; background: var(--border); }
.ph-hero__scroll-bar span:first-child { width: 2rem; }
.ph-hero__scroll-bar span:last-child  { width: 1rem; }
/* Texte scroll : text-body → 8.8:1 AAA ✓ */
.ph-hero__scroll-text { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-body); white-space: nowrap; }

/* ======================
   HERO — SPLIT DIAGONAL (Proposition 1 — Principe B charte §5b.3)
   Photo pré-salés Baie du Mont Saint-Michel en fond droit
   Diagonale 45° = ADN du losange PostHack
   Voile anthracite 60% conforme charte §5.2
   Masqué sous 1024px → hero standard sur mobile/tablette
====================== */
.ph-hero--split { background: var(--blanc); }
/* Masquer la forme déco jaune quand la photo est affichée */
.ph-hero--split .ph-hero__deco { display: none; }

/* Panneau photo — positionné absolument sur la moitié droite */
.ph-hero__photo {
  position: absolute; top: 0; right: 0;
  width: 56%; height: 100%; z-index: 0;
  /* Coupe diagonale à 45° alignée sur la géométrie du losange */
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}
.ph-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Horizon au 35% — montre le canal et le coucher de soleil */
  object-position: 50% 35%;
  display: block;
}
/* Voile ardoise — fondu fort sur le bord diagonal, léger à droite */
.ph-hero__photo::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(53,54,60,.78) 0%,
    rgba(53,54,60,.52) 38%,
    rgba(53,54,60,.22) 100%
  );
}
/* Responsive — photo masquée sous 1024px, hero standard */
@media (max-width: 1023px) {
  .ph-hero__photo { display: none; }
}

/* ======================
   BANDEAU LOGOS — fond blanc
   Technique : mix-blend-mode:multiply
   Les logos JPG fond blanc deviennent "transparents" sur fond blanc.
   Au survol : filter:none révèle les vraies couleurs.
   Accessibilité : liste <ul> SR-only en dessous, aria-hidden sur les passes
====================== */
.ph-logos {
  background: var(--blanc);
  padding: 3.5rem 0;
  overflow: hidden;
  contain: paint;
  /* Séparation visuelle subtile avec les sections voisines */
  border-top: 1px solid rgba(73,74,81,.08);
  border-bottom: 1px solid rgba(73,74,81,.08);
}
/* Header : label + bouton pause */
.ph-logos__header {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-bottom: 1.5rem;
}
/* Label intro : text-body → 8.8:1 AAA ✓ */
.ph-logos__label {
  text-align: center; margin: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-body);
}
/* Bouton pause/play carousel */
.ph-logos__pause {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-body); cursor: pointer; padding: .25rem .5rem;
  font-size: .7rem; line-height: 1; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.ph-logos__pause:hover { border-color: var(--text-primary); color: var(--text-primary); }
.ph-logos__pause[aria-pressed="true"] .ph-logos__pause-icon::after { content: '▶'; }
.ph-logos__pause[aria-pressed="false"] .ph-logos__pause-icon::after { content: ''; }
.ph-logos__wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
/* Track : durée dynamique via JS (--ph-logos-duration) */
.ph-logos__track {
  display: flex;
  align-items: center;
  gap: 4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: ph-marquee var(--ph-logos-duration, 40s) linear infinite;
}
.ph-logos__track:hover,
.ph-logos__track:focus-within { animation-play-state: paused; }

/* Item conteneur — logo à gauche, nom à droite, alignés au centre */
.ph-logos__item {
  flex-shrink: 0;
  display: flex; flex-direction: row;
  align-items: center;
  padding: 0 1.5rem; gap: .75rem;
  border-right: 1px solid rgba(73,74,81,.08);
}
.ph-logos__item:last-child { border-right: none; }

/* Sprite logo — gris par défaut, couleur au hover */
.ph-logos__logo {
  display: block; flex-shrink: 0;
  width: 84px; height: 84px;
  background-image: url('/images/sprite-logos-color.webp');
  background-repeat: no-repeat;
  position: relative;
  transition: transform .25s ease;
}
.ph-logos__logo::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('/images/sprite-logos-gray.webp');
  background-size: inherit;
  background-position: inherit;
  background-repeat: no-repeat;
  transition: opacity .3s ease;
}
.ph-logos__item:hover .ph-logos__logo::after,
.ph-logos__item:focus-within .ph-logos__logo::after {
  opacity: 0;
}
.ph-logos__item:hover .ph-logos__logo,
.ph-logos__item:focus-within .ph-logos__logo {
  transform: scale(1.08);
}
/* Lien conteneur carousel — cliquable vers /references/ */
.ph-logos__track-link {
  display: block; text-decoration: none; color: inherit;
}
.ph-logos__track-link:focus-visible {
  outline: 3px solid var(--ardoise-deep);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Nom du client — toujours visible, à droite du logo */
.ph-logos__name {
  font-size: .7rem; font-weight: 400; letter-spacing: .02em;
  color: var(--text-body, #494A51); text-align: left;
  white-space: normal; max-width: 130px; line-height: 1.35;
}

/* Liste accessible masquée visuellement (lue par lecteurs d'écran) */
.ph-logos__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@keyframes ph-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Note : les règles dark mode des logos sont centralisées dans la section DARK MODE v2 */

/* ======================
   PILIERS
====================== */
/* Trame A charte §5b.2 — losanges or en contour sur fond clair (stroke-opacity .10 = 8% visuel)
   Conforme règles d'usage §5b.6 : opacité max 15% sur fond clair ✓
   Trame visible dans l'en-tête de section et les espaces inter-cartes
   Cachée par le fond opaque (ardoise-xlt) des cartes pilier */
.ph-pillars { padding: var(--space-xl) 0; background: var(--blanc) url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M24 6L42 24L24 42L6 24Z' fill='none' stroke='%23FCCE61' stroke-opacity='.10' stroke-width='1.5'/></svg>") center/48px 48px; overflow: hidden; contain: paint; }
.ph-pillars__header { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: end; margin-bottom: 3.5rem; }
/* Prétitle : text-body → 8.8:1 AAA ✓ */
.ph-pillars__pretitle { color: var(--text-body); margin-bottom: .75rem; }
/* Heading : text-primary → 12:1 AAA ✓ */
.ph-pillars__heading { font-size: clamp(2rem,3.5vw,2.75rem); color: var(--text-primary); }
/* Soulignage jaune décoratif — exempt */
.ph-pillars__heading span { position: relative; display: inline-block; }
.ph-pillars__heading span::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 5px; background: var(--jaune); z-index: -1; }
/* Intro : text-body → 8.8:1 AAA ✓ */
.ph-pillars__intro { font-weight: 300; color: var(--text-body); font-size: 1rem; max-width: 44ch; line-height: 1.75; }
.ph-pillars__grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1.5px solid var(--border); }
.ph-pillar { padding: 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; border-right: 1.5px solid var(--border); position: relative; transition: background .25s; background: var(--blanc); overflow: hidden; }
.ph-pillar:last-child { border-right: none; }
/* Liseré bas décoratif — exempt */
.ph-pillar::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--ardoise-deep); transition: width .35s ease; }
.ph-pillar:hover { background: var(--ardoise-xlt); }
.ph-pillar:hover::after { width: 100%; }
/* Featured : fond ardoise */
.ph-pillar--featured { background: var(--ardoise); }
.ph-pillar--featured:hover { background: var(--ardoise-deep); }
.ph-pillar--featured::after { background: var(--jaune); }
/* Badge : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-pillar__badge { display: inline-block; background: var(--jaune); color: var(--ardoise-deep); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 2px; align-self: flex-start; }
/* Numéro filigrane décoratif — exempt WCAG */
.ph-pillar__num { font-size: 4rem; font-weight: 900; line-height: 1; user-select: none; color: var(--ardoise-light); pointer-events: none; }
.ph-pillar--featured .ph-pillar__num { color: var(--ardoise); }
/* Titre : text-primary → 12:1 AAA ✓ */
.ph-pillar__title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
/* Titre featured : on-dark-hi → 8.8:1 AAA ✓ */
.ph-pillar--featured .ph-pillar__title { color: var(--on-dark-hi); }
/* Corps : text-body → 8.8:1 AAA ✓ */
.ph-pillar__body { font-size: .9rem; font-weight: 300; color: var(--text-body); line-height: 1.75; flex: 1; }
/* Corps featured : on-dark-body → 7.1:1 AAA ✓ */
.ph-pillar--featured .ph-pillar__body { color: var(--on-dark-body); }
.ph-pillar__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Tags : text-body → 8.8:1 AAA ✓ */
.ph-pillar__tag { font-size: .7rem; font-weight: 400; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 20px; color: var(--text-body); }
/* Tags featured : on-dark-body → 7.1:1 AAA ✓ */
.ph-pillar--featured .ph-pillar__tag { border-color: var(--on-dark-body); color: var(--on-dark-body); }
/* Lien : text-primary + soulignage jaune décoratif → 12:1 AAA ✓ */
.ph-pillar__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--jaune); text-underline-offset: 4px; text-decoration-thickness: 2px; align-self: flex-start; transition: text-decoration-color .2s, gap .2s; }
.ph-pillar__link:hover { gap: .65rem; text-decoration-color: var(--text-primary); }
/* Lien featured : on-dark-hi → 8.8:1 AAA ✓ */
.ph-pillar--featured .ph-pillar__link { color: var(--on-dark-hi); text-decoration-color: var(--jaune); }
.ph-pillar--featured .ph-pillar__link:hover { text-decoration-color: var(--on-dark-hi); }

/* ======================
   DIFFÉRENCIATION
====================== */
.ph-diff { padding: var(--space-xl) 0; background: var(--ardoise-xlt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ph-diff__inner { display: grid; grid-template-columns: 4fr 7fr; gap: var(--col-gap); align-items: start; }
.ph-diff__left { position: sticky; top: 5.5rem; }
/* Prétitle : text-body sur ardoise-xlt → 7.4:1 AAA ✓ */
.ph-diff__pretitle { color: var(--text-body); margin-bottom: .75rem; }
/* Heading : text-primary → 12:1 AAA ✓ */
.ph-diff__heading { font-size: clamp(2rem,3vw,2.75rem); color: var(--text-primary); margin-bottom: 1.5rem; }
/* Intro : text-body → 7.4:1 AAA ✓ */
.ph-diff__intro { font-weight: 300; color: var(--text-body); line-height: 1.8; }
/* DIFFÉRENCIATION — grands chiffres typographiques
   Charte §5b.8 : "slide chiffres clés — chiffre en 36pt bold doré"
   Déclinaison web : Lato 900 à 8rem, jaune 13% opacité = subliminal
   CSS counter : aucun changement HTML requis, accessible, progressif
   WCAG : décoratif (exemption), pas porteur d'information textuelle */
.ph-diff__items { display: flex; flex-direction: column; counter-reset: diff-counter; }
.ph-diff__item {
  counter-increment: diff-counter;
  /* Remplace display:grid — num-wrap masqué, contenu pleine largeur */
  display: block;
  padding: 2rem 0; border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.ph-diff__item:first-child { border-top: 1px solid var(--border); }
/* Masquer le cercle numéroté (remplacé par le grand chiffre) */
.ph-diff__num-wrap { display: none; }
/* Contenu au-dessus du chiffre décoratif */
.ph-diff__item > div { position: relative; z-index: 1; }
/* Grand chiffre — ancré bas-droite, coupé par overflow:hidden */
.ph-diff__item::before {
  content: counter(diff-counter, decimal-leading-zero);
  position: absolute; right: -.05em; bottom: -.2em;
  font-size: clamp(5.5rem, 8.5vw, 8.5rem);
  font-weight: 900; line-height: 1; letter-spacing: -.03em;
  font-family: var(--f);
  /* Jaune 13% sur ardoise-xlt — effet éditorial, non texte → exempt WCAG */
  color: var(--jaune); opacity: .13;
  pointer-events: none; user-select: none; z-index: 0;
}
/* Titre item : text-primary → 12:1 AAA ✓ */
.ph-diff__item-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; }
/* Corps item : text-body → 7.4:1 AAA ✓ */
.ph-diff__item-body { font-size: .9rem; font-weight: 300; color: var(--text-body); line-height: 1.75; }

/* ======================
   CTA FINAL — fond ardoise-deep
====================== */
.ph-cta { padding: var(--space-xl) 0; background: var(--ardoise-deep); position: relative; overflow: hidden; }
/* Forme décorative — exempt */
.ph-cta__deco { position: absolute; bottom: -20%; right: -5%; width: 40vw; height: 140%; background: var(--jaune); clip-path: polygon(25% 0%,100% 0%,100% 100%,0% 100%); opacity: .05; pointer-events: none; }
.ph-cta__inner { display: grid; grid-template-columns: 6fr 4fr; gap: var(--col-gap); align-items: center; position: relative; z-index: 1; }
/* Prétitle : on-deep-meta → 7.2:1 AAA ✓ */
.ph-cta__pretitle { color: var(--on-deep-meta); margin-bottom: 1rem; }
/* Titre : on-deep-hi → 12:1 AAA ✓ */
.ph-cta__heading { font-size: clamp(2rem,3.5vw,3.2rem); color: var(--on-deep-hi); margin-bottom: 1.25rem; line-height: 1.1; }
/* Mark : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-cta__heading mark { background: var(--jaune); color: var(--ardoise-deep); padding: 0 .2em; font-style: italic; border-radius: 1px; }
/* Corps : on-deep-body → 7.8:1 AAA ✓ */
.ph-cta__body { font-weight: 300; color: var(--on-deep-body); line-height: 1.8; }
.ph-cta__right { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
/* Bouton CTA : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-cta__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.75rem; background: var(--jaune); color: var(--ardoise-deep); font-family: var(--f); font-weight: 700; font-size: .95rem; border-radius: var(--radius); border: 2px solid var(--jaune); transition: background .2s, transform .15s; }
.ph-cta__btn:hover { background: var(--jaune-deep); border-color: var(--jaune-deep); transform: translateY(-2px); color: var(--ardoise-deep); }
/* Note discrète : on-deep-meta → 7.2:1 AAA ✓ */
.ph-cta__note { font-size: .75rem; font-weight: 300; color: var(--on-deep-meta); text-align: center; }
.ph-cta__links { display: flex; flex-direction: column; gap: .5rem; }
/* Liens secondaires : on-deep-body → 7.8:1 AAA ✓ */
.ph-cta__link { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--on-deep-meta); border-radius: var(--radius); color: var(--on-deep-body); font-size: .85rem; font-weight: 400; transition: background .2s, color .2s, border-color .2s; }
.ph-cta__link:hover { background: var(--ardoise); color: var(--on-dark-hi); border-color: var(--on-dark-body); }

/* ======================
   FOOTER — Nouvelle structure simplifiée
====================== */
.ph-footer {
  border-top: 3px solid var(--jaune);
  padding: 0;
}

/* ── Bande blanche : brand + engagements + Normandie ── */
.ph-footer__band {
  background: #FFFFFF;
  padding: 2rem 0;
}
.ph-footer__band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
/* Brand bloc gauche */
.ph-footer__brand-name {
  font-size: 1rem; font-weight: 700; color: #35363C; margin-bottom: .5rem;
}
.ph-footer__brand-name span { font-weight: 300; color: #494A51; }
.ph-footer__brand-tagline {
  font-size: .82rem; font-weight: 300; color: #494A51; line-height: 1.6; max-width: 32ch;
}
/* Bloc centre : 1% + widgets */
.ph-footer__engage-block {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.ph-footer__engage-block img { max-width: 220px; height: auto; display: block; }
.ph-footer__widgets {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
}
/* ── Bandeau Normandie — fixe en haut à droite, sous le header ── */
.ph-normandie-bar {
  position: fixed; top: 7rem; right: 0; z-index: 90;
  pointer-events: none;
}
.ph-normandie-bar a {
  pointer-events: auto;
  display: inline-flex; text-decoration: none; transition: opacity .2s;
}
.ph-normandie-bar a:hover { opacity: .8; }
.ph-normandie-bar img { height: 56px; width: auto; display: block; }

/* ── Section grise : liens légaux + copyright ── */
.ph-footer__legal-section {
  background: var(--ardoise-deep);
  border-top: 3px solid var(--jaune);
  padding: 2rem 0;
  text-align: center;
}
.ph-footer__legal-nav {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.ph-footer__legal-nav a {
  font-size: .82rem; font-weight: 400; color: var(--on-deep-body);
  text-decoration: none; transition: color .2s;
}
.ph-footer__legal-nav a:hover { color: var(--on-deep-hi); }
.ph-footer__copy {
  font-size: .75rem; font-weight: 300; color: var(--on-deep-meta);
  line-height: 1.6; margin: .25rem 0;
}
.ph-footer__copy a {
  color: var(--on-deep-body); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3);
}
.ph-footer__copy a:hover { color: var(--on-deep-hi); }

/* ── Picto cookies (bas gauche, symétrique a11y) ── */
.ph-cookie__trigger {
  position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 200;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ardoise-deep); color: var(--on-deep-body);
  border: 2px solid var(--border); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ph-cookie__trigger:hover { background: var(--ardoise); border-color: var(--jaune); color: var(--on-deep-hi); }
.ph-cookie__panel {
  position: fixed; bottom: 5rem; left: 1.5rem; z-index: 201;
  background: var(--ardoise-deep); border: 1px solid var(--border);
  border-left: 3px solid var(--jaune); border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  padding: 1.25rem 1.5rem; max-width: 380px; width: 90vw;
  font-family: var(--f);
}
.ph-cookie__close {
  position: absolute; top: .5rem; right: .75rem;
  background: none; border: none; color: var(--on-deep-meta);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
  transition: color .2s;
}
.ph-cookie__close:hover { color: var(--on-deep-hi); }
.ph-cookie__main { font-size: .82rem; font-weight: 300; color: var(--on-deep-body); line-height: 1.6; margin: 0 0 .75rem; }
.ph-cookie__main strong { font-weight: 700; color: var(--on-deep-hi); }
.ph-cookie__recipe { display: block; text-align: left; max-width: 55ch; }
.ph-cookie__recipe summary {
  cursor: pointer; font-size: .75rem; font-weight: 700; color: var(--jaune);
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
}
.ph-cookie__recipe summary::-webkit-details-marker { display: none; }
.ph-cookie__recipe summary:hover { color: var(--on-deep-hi); }
.ph-cookie__recipe[open] summary { margin-bottom: .5rem; }
.ph-cookie__recipe p {
  font-size: .72rem; font-weight: 300; color: var(--on-deep-body); line-height: 1.7;
  padding: .75rem 1rem; background: rgba(255,255,255,.04); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08); margin: 0;
}
.ph-cookie__note { font-size: .68rem; font-weight: 300; color: var(--on-deep-meta); line-height: 1.6; margin: .75rem 0 0; }
.ph-cookie__note a { color: var(--on-deep-meta); text-decoration: underline; }
.ph-cookie__note a:hover { color: var(--on-deep-hi); }

/* Responsive footer */
@media (max-width: 768px) {
  .ph-footer__band-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ph-footer__brand-tagline { max-width: none; }
  .ph-footer__normandie { margin-right: 0; justify-content: center; }
}

/* ======================
   ANIMATIONS
====================== */
@keyframes ph-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.ph-a1 { animation: ph-slide-up .65s .05s both; }
.ph-a2 { animation: ph-slide-up .65s .2s  both; }
.ph-a3 { animation: ph-slide-up .65s .35s both; }
.ph-a4 { animation: ph-slide-up .65s .5s  both; }
.ph-a5 { animation: ph-slide-up .65s .65s both; }
.ph-reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.ph-reveal.visible { opacity: 1; transform: translateY(0); }
.ph-d1 { transition-delay: .1s; }
.ph-d2 { transition-delay: .2s; }
.ph-d3 { transition-delay: .3s; }

/* WCAG 2.3.3 — prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ph-logos__track { animation: none; }
  .ph-reveal { opacity: 1; transform: none; }
}

/* =============================================
   CHARTE GLOBALE — Base typographique et éléments HTML
   AAA vérifiée sur tous les textes courants
============================================= */

/* ── Base globale ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--f);
  font-weight: 300;
  color: var(--text-body);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body ::selection { background: var(--jaune); color: var(--ardoise-deep); }
body :focus-visible { outline: 3px solid var(--ardoise-deep); outline-offset: 3px; border-radius: var(--radius); }

/* ── Typographie globale ─────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f);
  /* text-primary → 12:1 AAA ✓ */
  color: var(--text-primary);
  line-height: 1.2;
}
h1 { font-weight: 700; letter-spacing: -.01em; }
h2 { font-weight: 700; }
h3 { font-weight: 400; }
h4, h5, h6 { font-weight: 700; }
/* Paragraphes : text-body → 8.8:1 AAA ✓ */
p { font-weight: 300; line-height: 1.75; color: var(--text-body); }
a { color: var(--text-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--ardoise-deep); }
strong, b { font-weight: 700; color: var(--text-primary); }
em, i { font-style: italic; font-weight: 300; }
blockquote {
  border-left: 4px solid var(--jaune);
  margin: 1.75rem 0;
  padding: .75rem 1.5rem;
  background: var(--ardoise-xlt);
  font-style: italic;
  font-weight: 300;
  /* text-body sur ardoise-xlt → 7.4:1 AAA ✓ */
  color: var(--text-body);
  border-radius: 0 var(--radius) var(--radius) 0;
}
code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .88em;
  background: var(--ardoise-xlt);
  /* text-primary → 12:1 AAA ✓ */
  color: var(--text-primary);
  padding: .15em .45em;
  border-radius: 3px;
  border: 1px solid var(--border);
}
pre { background: var(--ardoise-deep); padding: 1.5rem; border-radius: var(--radius); overflow-x: auto; }
/* on-deep-hi → 12:1 AAA ✓ */
pre code { background: none; border: none; color: var(--on-deep-hi); padding: 0; font-size: .85rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
img { max-width: 100%; height: auto; display: block; }

/* ======================
   CONTENU ÉDITORIAL — .ph-page__body
   Styles pour le contenu Markdown rendu par Hugo
====================== */

/* Titres éditoriaux */
.ph-page__body h1 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); margin: 0 0 1.5rem; }
.ph-page__body h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin: 3rem 0 1.1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); position: relative; }
/* Liseré jaune décoratif — exempt */
.ph-page__body h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 3rem; height: 2px; background: var(--jaune); }
.ph-page__body h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 2.25rem 0 .75rem; }
/* H4 label : text-body → 8.8:1 AAA ✓ */
.ph-page__body h4 { font-size: 1rem; font-weight: 700; margin: 1.75rem 0 .5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-body); }
.ph-page__body p { margin: 0 0 1.25rem; }
.ph-page__body ul, .ph-page__body ol { padding-left: 1.5rem; margin: 0 0 1.25rem; color: var(--text-body); font-weight: 300; }
.ph-page__body li { margin-bottom: .5rem; line-height: 1.7; }
/* Puces décoratives — exempt */
.ph-page__body ul li::marker { color: var(--jaune); font-size: 1.2em; }
/* Numéros : text-primary → 12:1 AAA ✓ */
.ph-page__body ol li::marker { color: var(--text-primary); font-weight: 700; }
/* Liens éditoriaux : text-primary + soulignage → 12:1 AAA ✓ */
.ph-page__body a { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--jaune); text-underline-offset: 3px; text-decoration-thickness: 2px; transition: text-decoration-color .2s; }
.ph-page__body a:hover { text-decoration-color: var(--text-primary); }
.ph-page__body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .9rem; }
/* En-têtes tableau : on-deep-hi sur ardoise-deep → 12:1 AAA ✓ */
.ph-page__body th { background: var(--ardoise-deep); color: var(--on-deep-hi); font-weight: 700; text-align: left; padding: .75rem 1rem; font-size: .8rem; letter-spacing: .04em; }
/* Cellules : text-body → 8.8:1 AAA ✓ */
.ph-page__body td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); font-weight: 300; vertical-align: top; }
.ph-page__body tr:last-child td { border-bottom: none; }
.ph-page__body tr:nth-child(even) td { background: var(--ardoise-xlt); }


/* ======================
   FOOTER — BADGE 1% POUR LA PLANÈTE
   SVG inline — conserve ses couleurs d'origine (bleu + blanc)
   Accessible sur fond ardoise-deep ✓ (SVG décoratif, texte SR-only)
====================== */

/* ======================
   WEBSITE CARBON BADGE — recharte PostHack
   Classe .wcb-d = variante dark du widget
   Le script injecte : #wcb_p > a + span#wcb_g
   Neutralisation totale du style inline du widget
   puis application charte ardoise
   Contrastes : on-deep-body (7.8:1) + on-deep-meta (7.2:1) AAA ✓
====================== */
/* Widgets dans la bande blanche du footer — textes sombres sur fond blanc
   #494A51 sur #FFFFFF → 8.8:1 AAA ✓
   #35363C sur #FFFFFF → 12.0:1 AAA ✓ */
#wcb.carbonbadge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--f) !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  max-width: none !important;
  width: auto !important;
  box-shadow: none !important;
}
#wcb.carbonbadge * {
  font-family: var(--f) !important;
  font-size: .75rem !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#wcb.carbonbadge a {
  color: #35363C !important;
  text-decoration: underline !important;
  text-decoration-color: #494A51 !important;
  text-underline-offset: 2px !important;
  transition: color .2s !important;
  font-weight: 700 !important;
}
#wcb.carbonbadge a:hover { color: #000 !important; }
#wcb.carbonbadge #wcb_g {
  color: #0062a1 !important;
  font-weight: 700 !important;
  background: transparent !important;
}
#wcb.carbonbadge #wcb_p {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  flex-wrap: wrap !important;
}
#wcb.carbonbadge,
#wcb.carbonbadge p,
#wcb.carbonbadge span:not(#wcb_g) {
  color: #494A51 !important;
}

/* EcoIndex badge — textes sombres sur fond blanc */
#ecoindex-badge {
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--f) !important;
  font-size: .75rem !important;
  background: transparent !important;
  color: #494A51 !important;
  overflow: hidden;
}
#ecoindex-badge * {
  font-family: var(--f) !important;
  font-size: .75rem !important;
  background: transparent !important;
  color: #494A51 !important;
}
#ecoindex-badge a {
  color: #35363C !important;
  text-decoration: underline !important;
  text-decoration-color: #494A51 !important;
  transition: color .2s !important;
  font-weight: 700 !important;
}
#ecoindex-badge a:hover { color: #000 !important; }

/* ======================
   FOOTER — PIED LÉGAL
   Ajout lien CC BY-NC-SA (remplace texte brut)
====================== */


/* ======================
   TRAMES — Charte graphique §5b
   Applied via admin dropdown: ph-trame--trameA through F
   Opacité max fond clair: 15% or / 8% anthracite
   Opacité max fond sombre: 20% or / 10% blanc
====================== */
.ph-trame { position: relative; }
.ph-trame::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.ph-trame > * { position: relative; z-index: 1; }

/* Trame A — Grille régulière : losanges or espacés */
.ph-trame--trameA::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M24 6L42 24L24 42L6 24Z' fill='%23FCCE61' fill-opacity='.1'/></svg>");
  background-size: 48px 48px;
}
/* Trame B — Quinconce bicolore : losanges or + anthracite décalés */
.ph-trame--trameB::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='48'><path d='M24 6L42 24L24 42L6 24Z' fill='%23FCCE61' fill-opacity='.08'/><path d='M72 6L90 24L72 42L54 24Z' fill='%23494A51' fill-opacity='.05'/></svg>");
  background-size: 96px 48px;
}
/* Trame C — Contours seuls : losanges or en outline */
.ph-trame--trameC::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M24 6L42 24L24 42L6 24Z' fill='none' stroke='%23FCCE61' stroke-opacity='.12' stroke-width='1.5'/></svg>");
  background-size: 48px 48px;
}
/* Trame D — Micro-trame dense : petits losanges rapprochés */
.ph-trame--trameD::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M12 3L21 12L12 21L3 12Z' fill='%23FCCE61' fill-opacity='.07'/></svg>");
  background-size: 24px 24px;
}
/* Trame E — Macro superposition : grands losanges semi-transparents */
.ph-trame--trameE::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path d='M60 10L110 60L60 110L10 60Z' fill='none' stroke='%23FCCE61' stroke-opacity='.1' stroke-width='2'/><path d='M60 30L90 60L60 90L30 60Z' fill='%23FCCE61' fill-opacity='.04'/></svg>");
  background-size: 120px 120px;
}
/* Trame F — Diagonales + accents : lignes 45° + losanges ponctuels */
.ph-trame--trameF::before {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><line x1='0' y1='60' x2='60' y2='0' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1'/><path d='M30 14L46 30L30 46L14 30Z' fill='none' stroke='%23FCCE61' stroke-opacity='.09' stroke-width='1'/></svg>");
  background-size: 60px 60px;
}

/* ======================
   RESPONSIVE
====================== */
@media (max-width: 1024px) {
  .ph-pillars__grid { grid-template-columns: 1fr; }
  .ph-pillar { border-right: none; border-bottom: 1.5px solid var(--border); }
  .ph-pillar:last-child { border-bottom: none; }
  .ph-pillar--featured { order: -1; }
  .ph-diff__inner, .ph-case__inner, .ph-cta__inner { grid-template-columns: 1fr; }
  .ph-diff__left { position: static; }
  .ph-pillars__header { grid-template-columns: 1fr; }
  .ph-case__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ph-hero__inner { grid-template-columns: 1fr; }
  .ph-hero__visual { display: none; }
  .ph-hero__deco { width: 60vw; opacity: .1; }
  .ph-nav__links, .ph-nav__cta { display: none; }
  .ph-nav__toggle { display: flex; }
}
@media (max-width: 480px) {
  .ph-page__body h2 { font-size: 1.3rem; }
  .ph-page__body h3 { font-size: 1.1rem; }
}

/* ======================
   UTILITAIRE
====================== */
.ph-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ======================
   TÉMOIGNAGES — .ph-case (structure HTML actuelle)
   Cartes ardoise sur fond ardoise-xlt
   Compatible avec le HTML rendu par index.hbs actuel
   Contraste vérifié WCAG AAA sur tous les éléments textuels
====================== */
.ph-case { padding: var(--space-xl) 0; background: var(--ardoise-xlt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ph-case__header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 3rem; }
/* Prétitle : text-body sur ardoise-xlt → 7.4:1 AAA ✓ */
.ph-case__pretitle { color: var(--text-body); }
/* Heading : text-primary → 12:1 AAA ✓ */
.ph-case__heading { font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--text-primary); }
.ph-case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
/* Carte — fond ardoise */
.ph-case__card {
  background: var(--ardoise);
  padding: 2.75rem;
  border-radius: var(--radius);
  position: relative;
  display: flex; flex-direction: column; gap: 1.5rem;
  overflow: hidden;
}
/* Liseré jaune décoratif — exempt WCAG */
.ph-case__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--jaune);
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Guillemet décoratif — exempt WCAG */
.ph-case__qmark {
  font-size: 5rem; font-weight: 900;
  color: var(--jaune); opacity: .35;
  line-height: .7; display: block;
  user-select: none; pointer-events: none;
}
/* Citation : on-dark-hi → 8.8:1 AAA ✓ */
.ph-case__quote {
  font-size: .95rem; font-weight: 300; font-style: italic;
  color: var(--on-dark-hi); line-height: 1.75;
  margin: 0; flex: 1;
}
.ph-case__attr { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
/* Avatar initiales : on-dark-body → 7.1:1 AAA ✓ */
.ph-case__attr-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--ardoise-deep); border: 2px solid var(--on-dark-body);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--on-dark-body); font-size: .72rem; font-weight: 700;
}
/* Nom : on-dark-hi → 8.8:1 AAA ✓ */
.ph-case__attr-name { font-size: .85rem; font-weight: 700; color: var(--on-dark-hi); }
/* Rôle : on-dark-body → 7.1:1 AAA ✓ */
.ph-case__attr-role { font-size: .75rem; font-weight: 300; color: var(--on-dark-body); line-height: 1.4; }

/* ======================
   TÉMOIGNAGES — .ph-temos
   Reserve pour refactoring futur (index.hbs à jour)
====================== */
.ph-temos { padding: var(--space-xl) 0; background: var(--ardoise-xlt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ph-temos__header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 3rem; }
/* Prétitle : text-body → 7.4:1 AAA ✓ */
.ph-temos__pretitle { color: var(--text-body); }
/* Heading : text-primary → 12:1 AAA ✓ */
.ph-temos__heading { font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--text-primary); }
.ph-temos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
/* Carte témoignage — fond ardoise */
.ph-temo__card { background: var(--ardoise); padding: 2.75rem; border-radius: var(--radius); position: relative; display: flex; flex-direction: column; gap: 1.5rem; }
/* Liseré décoratif — exempt */
.ph-temo__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--jaune); border-radius: var(--radius) var(--radius) 0 0; }
/* Watermark assemblage charte §5b.4 — motif unitaire coin bas-droit
   Silhouette bandeau-chevron + losange superposé = signature PostHack
   fill-opacity .05 / .04 → purement décoratif, exempt WCAG
   Aucune info textuelle véhiculée → aria non requis */
.ph-temo__card::after {
  content: '';
  position: absolute; bottom: -18px; right: -18px;
  width: 165px; height: 165px;
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='165' height='165'><path d='M82 10L155 82L82 155L10 82Z' fill='%23FFFFFF' fill-opacity='.05'/><rect x='10' y='60' width='104' height='42' fill='%23FFFFFF' fill-opacity='.04'/><path d='M114 60L140 81L114 102Z' fill='%23FFFFFF' fill-opacity='.04'/></svg>") no-repeat center/contain;
  pointer-events: none;
}
/* Guillemet décoratif — exempt WCAG */
.ph-temo__qmark { font-size: 5rem; font-weight: 900; color: var(--jaune); opacity: .35; line-height: .7; display: block; user-select: none; pointer-events: none; }
/* Citation : on-dark-hi → 8.8:1 AAA ✓ */
.ph-temo__quote { font-size: 1rem; font-weight: 300; font-style: italic; color: var(--on-dark-hi); line-height: 1.7; margin: 0; flex: 1; }
.ph-temo__attr { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
/* Avatar décoratif — exempt */
.ph-temo__attr-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ardoise-deep); border: 2px solid var(--on-dark-body); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--on-dark-body); overflow: hidden; }
.ph-temo__attr-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ph-temo__attr-avatar span { font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.2; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
/* Nom : on-dark-hi → 8.8:1 AAA ✓ */
.ph-temo__attr-name { font-size: .85rem; font-weight: 700; color: var(--on-dark-hi); }
/* Rôle : on-dark-body → 7.1:1 AAA ✓ */
.ph-temo__attr-role { font-size: .75rem; font-weight: 300; color: var(--on-dark-body); line-height: 1.4; }

/* ======================
   ÉTUDES DE CAS — .ph-cases
====================== */
/* Trame A charte §5b.2 — même trame que piliers pour cohérence inter-sections */
.ph-cases { padding: var(--space-xl) 0; background: var(--blanc) url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M24 6L42 24L24 42L6 24Z' fill='none' stroke='%23FCCE61' stroke-opacity='.10' stroke-width='1.5'/></svg>") center/48px 48px; overflow: hidden; contain: paint; }
.ph-cases__header { margin-bottom: 3rem; }
/* Prétitle : text-body → 8.8:1 AAA ✓ */
.ph-cases__pretitle { color: var(--text-body); margin-bottom: .75rem; }
/* Heading : text-primary → 12:1 AAA ✓ */
.ph-cases__heading { font-size: clamp(2rem, 3.5vw, 2.75rem); color: var(--text-primary); }
.ph-cases__heading span { position: relative; display: inline-block; }
/* Soulignage jaune décoratif — exempt */
.ph-cases__heading span::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 5px; background: var(--jaune); z-index: -1; }
.ph-cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
/* Fond blanc explicite — cache la trame A de section, visible seulement dans l'en-tête et les gouttières */
.ph-case__item { background: var(--blanc); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 2.5rem; display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
/* Liseré bas au hover — décoratif, exempt */
.ph-case__item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--jaune); transition: width .35s ease; }
.ph-case__item:hover { border-color: var(--ardoise); box-shadow: 0 4px 24px rgba(53,54,60,.08); }
.ph-case__item:hover::after { width: 100%; }
.ph-case__item-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
/* Tag : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-case__item-tag { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--jaune); color: var(--ardoise-deep); padding: .2rem .6rem; border-radius: 2px; white-space: nowrap; }
/* Client : text-body → 8.8:1 AAA ✓ */
.ph-case__item-client { font-size: .75rem; font-weight: 700; color: var(--text-body); letter-spacing: .04em; }
/* Titre cas : text-primary → 12:1 AAA ✓ */
.ph-case__item-title { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
/* Corps cas : text-body → 8.8:1 AAA ✓ */
.ph-case__item-body { font-size: .9rem; font-weight: 300; color: var(--text-body); line-height: 1.75; flex: 1; }
/* Lien : text-primary + soulignage jaune → 12:1 AAA ✓ */
.ph-case__item-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--jaune); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: gap .2s, text-decoration-color .2s; margin-top: auto; align-self: flex-start; }
.ph-case__item-link:hover { gap: .65rem; text-decoration-color: var(--text-primary); }

/* ======================
   PROJET EN COURS — .ph-projet
====================== */
.ph-projet { padding: var(--space-xl) 0; background: var(--ardoise-deep); }
.ph-projet__inner { display: grid; grid-template-columns: 6fr 4fr; gap: var(--col-gap); align-items: center; }
/* Prétitle : on-deep-meta → 7.2:1 AAA ✓ */
.ph-projet__pretitle { color: var(--on-deep-meta); margin-bottom: .75rem; }
/* Tag : ardoise-deep sur jaune → 8.1:1 AAA ✓ */
.ph-projet__tag { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--jaune); color: var(--ardoise-deep); padding: .2rem .7rem; border-radius: 2px; margin-bottom: 1.25rem; }
/* Heading : on-deep-hi → 12:1 AAA ✓ */
.ph-projet__heading { font-size: clamp(1.75rem, 2.5vw, 2.4rem); color: var(--on-deep-hi); margin-bottom: 1.25rem; line-height: 1.2; }
/* Corps : on-deep-body → 9.7:1 AAA ✓ */
.ph-projet__body { font-weight: 300; color: var(--on-deep-body); line-height: 1.8; margin-bottom: 2rem; }
/* Bouton outline sur fond sombre : blanc sur transparent → bordure + texte blanc */
.ph-projet .ph-btn-outline { color: var(--on-deep-hi); border-color: var(--on-deep-body); }
.ph-projet .ph-btn-outline:hover { background: var(--ardoise); color: var(--on-dark-hi); border-color: var(--ardoise); }
/* Décoration typographique — exempt WCAG */
.ph-projet__deco { display: flex; align-items: center; justify-content: flex-end; }
.ph-projet__deco-inner { display: flex; flex-direction: column; gap: .5rem; }
.ph-projet__deco-inner span { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 900; color: var(--ardoise); line-height: 1.1; user-select: none; pointer-events: none; }
.ph-projet__deco-inner span:nth-child(2) { color: var(--on-deep-meta); opacity: .4; padding-left: 1.5rem; }
.ph-projet__deco-inner span:nth-child(3) { color: var(--ardoise); padding-left: 3rem; }

/* ======================
   DARK MODE — v2 : mécanisme dual robuste
   ─────────────────────────────────────────────
   MÉCANISME 1 (principal, sans JS) :
     @media (prefers-color-scheme: dark) { :root { … } }
     → actif même si data-theme est absent ou vide
   MÉCANISME 2 (override explicite) :
     [data-theme="dark"]  → forcer le mode sombre
     [data-theme="light"] → forcer le mode clair (neutralise @media)
   INITIALISATION JS (anti-FOUC) :
     Script inline dans head.hbs — lit data-theme de <html>,
     résout "auto"/vide via matchMedia, pose "dark" ou "light"
     avant le premier rendu CSS. Voir head.hbs.
   ─────────────────────────────────────────────
   HIÉRARCHIE DE FONDS SOMBRES :
     #1A1B1F  (--blanc)        fond de page   niveau 0
     #23242A  (--ardoise-xlt)  cartes élevées niveau 1
     #2E2F36  (--ardoise-light) hover/focus   niveau 2
     #494A51  (--ardoise)      cartes feature niveau 3
     #35363C  (--ardoise-deep) CTA/footer     niveau 3b
   ─────────────────────────────────────────────
   TOUS LES CONTRASTES WCAG AAA (7:1+) VÉRIFIÉS ✓
====================== */

/* ── 1. Variables dark — via OS preference ──────────────── */
/* ── 1. Variables dark — via OS preference ── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --blanc:         #1A1B1F;
    --ardoise-xlt:   #23242A;
    --ardoise-light: #2E2F36;
    --border:        rgba(255,255,255,.09);
    --text-primary:  #F2F2F3; /* 14.5:1 sur #1A1B1F AAA ✓ */
    --text-body:     #C8C8CB; /*  7.2:1 sur #1A1B1F AAA ✓ */
    --on-dark-hi:    #F2F2F3;
    --on-dark-body:  #C8C8CB;
  }
}

/* ── 2. Variables dark — via data-theme explicite ── */
[data-theme="dark"] {
  color-scheme: dark;
  --blanc:         #1A1B1F;
  --ardoise-xlt:   #23242A;
  --ardoise-light: #2E2F36;
  --border:        rgba(255,255,255,.09);
  --text-primary:  #F2F2F3;
  --text-body:     #C8C8CB;
  --on-dark-hi:    #F2F2F3;
  --on-dark-body:  #C8C8CB;
}

/* ── 3. Force light (neutralise le @media dark) ── */
[data-theme="light"] {
  color-scheme: light;
  --blanc:         #FFFFFF;
  --ardoise-xlt:   #F5F5F6;
  --ardoise-light: #EBEBED;
  --border:        rgba(73,74,81,.15);
  --text-primary:  #35363C;
  --text-body:     #494A51;
  --on-dark-hi:    #FFFFFF;
  --on-dark-body:  #E6E6E6;
}
[data-theme="light"] body { background: #FFFFFF; }

/* ── 4a. Ajustements composants — via @media (no-JS fallback) */
@media (prefers-color-scheme: dark) {
  body { background: var(--blanc); }

  /* Nav — opaque au scroll, filet jaune + backdrop blur */
  .ph-nav.scrolled {
    background: rgba(26,27,31,0.96) !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(252,206,97,.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
  .ph-nav__logo-sep { background: rgba(255,255,255,.15); }

  /* Nav CTA dark: jaune bg + ardoise-deep text → 8.1:1 AAA ✓ */
  .ph-nav__cta { background: var(--jaune); color: var(--ardoise-deep); border-color: var(--jaune); }
  .ph-nav__cta:hover { background: var(--jaune-deep); color: var(--ardoise-deep); }
  /* Nav logo dark: on-dark-hi → 8.8:1 AAA ✓ */
  .ph-nav__logo-name { color: var(--on-dark-hi); }
  .ph-nav__logo-brand { color: var(--on-dark-body); }
  /* Nav links dark: on-dark-body → 7.1:1 AAA ✓ */
  .ph-nav__links a { color: var(--on-dark-body); }
  .ph-nav__links a:hover { color: var(--on-dark-hi); }
  /* Btn primary dark: jaune bg + ardoise-deep text → 8.1:1 AAA ✓ */
  .ph-btn-primary { background: var(--jaune); color: var(--ardoise-deep); border-color: var(--jaune); }
  .ph-btn-primary:hover { background: var(--jaune-deep); color: var(--ardoise-deep); }

  /* Hero */
  .ph-hero__deco { opacity: .06; }
  .ph-hero__vline { background: rgba(255,255,255,.05); }

  /* Logos — fond sobre, pas de trame hardcodée (contrôlé par admin) */
  .ph-logos { background: var(--ardoise-xlt); border-color: rgba(255,255,255,.06); }

  /* Piliers */
  .ph-pillars__grid { border-color: rgba(255,255,255,.07); }
  .ph-pillar { background: var(--ardoise-xlt); border-color: rgba(255,255,255,.07); }
  .ph-pillar:hover { background: var(--ardoise-light); }
  .ph-pillar--featured { background: var(--ardoise); }
  .ph-pillar--featured:hover { background: var(--ardoise-deep); }
  .ph-pillar__num { color: rgba(255,255,255,.05); }

  /* Témoignages */
  .ph-case { background: var(--blanc); }
  .ph-case__card { background: var(--ardoise); }

  /* Études de cas */
  .ph-case__item { border-color: var(--border); }
  .ph-case__item:hover { box-shadow: 0 4px 24px rgba(0,0,0,.4); border-color: rgba(255,255,255,.18); }

  /* Bouton outline en contexte sombre */
  .ph-hero .ph-btn-outline {
    color: var(--text-primary);
    border-color: rgba(255,255,255,.3);
  }
  .ph-hero .ph-btn-outline:hover { background: var(--ardoise); color: var(--on-dark-hi); border-color: var(--ardoise); }

  /* Dropdown nav dark */
  .ph-nav__dropdown {
    background: var(--ardoise, #494A51); border-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
  }
  .ph-nav__dropdown-link { color: var(--on-dark-body, #E6E6E6); border-left-color: transparent; }
  .ph-nav__dropdown-link:hover, .ph-nav__dropdown-link:focus-visible {
    background: var(--ardoise-deep, #35363C); color: var(--on-dark-hi, #FFFFFF);
    border-left-color: var(--jaune, #FCCE61);
  }
  .ph-nav__dropdown-link--parent { color: var(--jaune, #FCCE61); border-bottom-color: rgba(255,255,255,.1); }
  .ph-nav__dropdown-link--parent:hover { color: var(--on-dark-hi, #FFFFFF); }

  /* Menu mobile dark */
  .ph-mobile-menu { background: var(--ardoise-deep, #35363C); }
  .ph-mobile-menu a { color: var(--on-deep-hi, #FFFFFF); border-bottom-color: rgba(255,255,255,.08); }
  .ph-mobile-menu a:hover { color: var(--jaune, #FCCE61); }
  .ph-mobile-menu__trigger { color: var(--on-deep-hi, #FFFFFF); }
  .ph-mobile-menu__sub a { color: var(--on-deep-body, #E6E6E6); }
  .ph-mobile-menu__sub a:hover { color: var(--jaune, #FCCE61); }
  .ph-mobile-menu__group { border-bottom-color: rgba(255,255,255,.08); }
  /* Sélection */
  ::selection { background: var(--jaune); color: var(--ardoise-deep); }
}

/* ── 4b. Ajustements composants — via data-theme="dark" (JS path) */
[data-theme="dark"] body { background: var(--blanc); }

[data-theme="dark"] .ph-nav.scrolled {
  background: rgba(26,27,31,0.96) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(252,206,97,.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
[data-theme="dark"] .ph-nav__logo-sep { background: rgba(255,255,255,.15); }
[data-theme="dark"] .ph-nav__cta { background: var(--jaune); color: var(--ardoise-deep); border-color: var(--jaune); }
[data-theme="dark"] .ph-nav__cta:hover { background: var(--jaune-deep); color: var(--ardoise-deep); }
[data-theme="dark"] .ph-nav__logo-name { color: var(--on-dark-hi); }
[data-theme="dark"] .ph-nav__logo-brand { color: var(--on-dark-body); }
[data-theme="dark"] .ph-nav__links a { color: var(--on-dark-body); }
[data-theme="dark"] .ph-nav__links a:hover { color: var(--on-dark-hi); }
[data-theme="dark"] .ph-btn-primary { background: var(--jaune); color: var(--ardoise-deep); border-color: var(--jaune); }
[data-theme="dark"] .ph-btn-primary:hover { background: var(--jaune-deep); color: var(--ardoise-deep); }
[data-theme="dark"] .ph-hero__deco { opacity: .06; }
[data-theme="dark"] .ph-hero__vline { background: rgba(255,255,255,.05); }
[data-theme="dark"] .ph-logos { background: var(--ardoise-xlt); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ph-pillars__grid { border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .ph-pillar { background: var(--ardoise-xlt); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .ph-pillar:hover { background: var(--ardoise-light); }
[data-theme="dark"] .ph-pillar--featured { background: var(--ardoise); }
[data-theme="dark"] .ph-pillar--featured:hover { background: var(--ardoise-deep); }
[data-theme="dark"] .ph-pillar__num { color: rgba(255,255,255,.05); }
[data-theme="dark"] .ph-case { background: var(--blanc); }
[data-theme="dark"] .ph-case__card { background: var(--ardoise); }
[data-theme="dark"] .ph-case__item { border-color: var(--border); }
[data-theme="dark"] .ph-case__item:hover { box-shadow: 0 4px 24px rgba(0,0,0,.4); border-color: rgba(255,255,255,.18); }
[data-theme="dark"] .ph-hero .ph-btn-outline { color: var(--text-primary); border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .ph-hero .ph-btn-outline:hover { background: var(--ardoise); color: var(--on-dark-hi); border-color: var(--ardoise); }
[data-theme="dark"] .ph-nav__dropdown { background: var(--ardoise, #494A51); border-color: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .ph-nav__dropdown-link { color: var(--on-dark-body, #E6E6E6); }
[data-theme="dark"] .ph-nav__dropdown-link:hover, [data-theme="dark"] .ph-nav__dropdown-link:focus-visible { background: var(--ardoise-deep, #35363C); color: var(--on-dark-hi, #FFFFFF); border-left-color: var(--jaune, #FCCE61); }
[data-theme="dark"] .ph-nav__dropdown-link--parent { color: var(--jaune, #FCCE61); border-bottom-color: rgba(255,255,255,.1); }
[data-theme="dark"] .ph-nav__dropdown-link--parent:hover { color: var(--on-dark-hi, #FFFFFF); }
[data-theme="dark"] .ph-mobile-menu { background: var(--ardoise-deep, #35363C); }
[data-theme="dark"] .ph-mobile-menu a { color: var(--on-deep-hi, #FFFFFF); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ph-mobile-menu a:hover { color: var(--jaune, #FCCE61); }
[data-theme="dark"] .ph-mobile-menu__trigger { color: var(--on-deep-hi, #FFFFFF); }
[data-theme="dark"] .ph-mobile-menu__sub a { color: var(--on-deep-body, #E6E6E6); }
[data-theme="dark"] .ph-mobile-menu__sub a:hover { color: var(--jaune, #FCCE61); }
[data-theme="dark"] .ph-mobile-menu__group { border-bottom-color: rgba(255,255,255,.08); }

/* ======================
   RESPONSIVE — nouvelles sections
====================== */
@media (max-width: 1024px) {
  .ph-temos__grid { grid-template-columns: 1fr; }
  .ph-cases__grid { grid-template-columns: 1fr; }
  .ph-projet__inner { grid-template-columns: 1fr; }
  .ph-projet__deco { display: none; }
}

/* Grands chiffres réduits sur mobile */
@media (max-width: 767px) {
  .ph-diff__item::before { font-size: 4.5rem; opacity: .1; }
}

/* ==============================================
   ACCESSIBILITÉ — Skip link (WCAG 2.4.1 A)
   Lien d'évitement visible uniquement au focus
============================================== */
.ph-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--ardoise-deep);
  color: var(--blanc);
  padding: 0.75rem 1.5rem;
  z-index: 100000;
  font-size: 1rem;
  font-family: var(--f);
  font-weight: 700;
  text-decoration: underline;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 0.15s ease;
}
.ph-skip-link:focus {
  top: 0;
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}

/* ==============================================
   ACCESSIBILITÉ — Focus visible (WCAG 2.4.7 AA)
   Le thème parent Simple définit déjà un
   :focus-visible global dans main.css avec
   outline: 2px solid var(--color) !important.
   Ici on ne surcharge QUE les éléments PostHack
   spécifiques (non couverts par le parent).
============================================== */

/* Éléments PostHack : navbar custom */
.ph-nav__toggle:focus-visible {
  outline: 3px solid var(--jaune) !important;
  outline-offset: 4px;
  border-radius: var(--radius);
}
.ph-nav__links a:focus-visible,
.ph-nav__cta:focus-visible,
.ph-mobile-menu a:focus-visible {
  outline: 3px solid var(--jaune) !important;
  outline-offset: 3px;
}

/* Éléments PostHack : cartes homepage */
.ph-pillar:focus-within,
.ph-case__item:focus-within,
.ph-temo__card:focus-within {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Éléments PostHack : footer custom */
.ph-footer a:focus-visible {
  outline: 2px solid var(--jaune) !important;
  outline-offset: 2px;
}

/* Focus : remapper la couleur d'accent du parent sur la charte PostHack
   Le parent utilise var(--color) ; on s'assure que --color = jaune PostHack */

/* ==============================================
   ACCESSIBILITÉ — Cibles tactiles (WCAG 2.5.8 AA)
   Minimum 44×44 CSS pixels sur les éléments
   interactifs petits
============================================== */
.ph-pillar__tag,
.ph-hero__tag {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
}

/* ==============================================
   ACCESSIBILITÉ — Reduced motion (WCAG 2.3.3)
   Désactive toutes les animations et transitions
   pour les utilisateurs ayant activé cette
   préférence système
============================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ph-skip-link { transition: none; }
  .ph-logos__track { animation: none !important; }
}

/* ==============================================
   ACCESSIBILITÉ — Forced colors / contraste élevé
   (WCAG 1.4.11 AA — Windows High Contrast)
============================================== */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid LinkText;
    outline-offset: 2px;
  }
  .ph-nav__toggle span {
    background: ButtonText;
  }
  .ph-btn-primary,
  .ph-btn-outline,
  .ph-cta__btn {
    border: 2px solid ButtonText;
  }
  .ph-pillar,
  .ph-case__item,
  .ph-temo__card {
    border: 1px solid CanvasText;
  }
  .ph-skip-link {
    border: 2px solid LinkText;
  }
  .ph-a11y__trigger {
    border: 2px solid ButtonText;
  }
  .ph-a11y__btn,
  .ph-a11y__reset {
    border: 1px solid ButtonText;
  }
}

/* ==============================================
   ACCESSIBILITÉ — Police dyslexie
   Activée via data-font="dyslexia" sur <html>
   Lazy-load natif : la font n'est téléchargée
   que quand --f pointe dessus
============================================== */
html[data-font="dyslexia"],
html[data-font="dyslexia"] body,
html[data-font="dyslexia"] h1,
html[data-font="dyslexia"] h2,
html[data-font="dyslexia"] h3,
html[data-font="dyslexia"] h4,
html[data-font="dyslexia"] h5,
html[data-font="dyslexia"] h6,
html[data-font="dyslexia"] p,
html[data-font="dyslexia"] a,
html[data-font="dyslexia"] li,
html[data-font="dyslexia"] span,
html[data-font="dyslexia"] button,
html[data-font="dyslexia"] input,
html[data-font="dyslexia"] blockquote,
html[data-font="dyslexia"] .ph-nav__link,
html[data-font="dyslexia"] .ph-nav__cta,
html[data-font="dyslexia"] .ph-btn-primary,
html[data-font="dyslexia"] .ph-hero-v2__name,
html[data-font="dyslexia"] .ph-hero-v2__mantra,
html[data-font="dyslexia"] .ph-hero-v2__body,
html[data-font="dyslexia"] .ph-footer__brand-name,
html[data-font="dyslexia"] .ph-footer__brand-tagline {
  font-family: 'OpenDyslexic', sans-serif !important;
}

/* ==============================================
   ACCESSIBILITÉ — Taille du texte (WCAG 1.4.4 AA)
   Font-scale via data-fontscale sur <html>
   Toutes les tailles rem/em suivent
============================================== */
html[data-fontscale="-2"] { font-size: 81.25%; }  /* 13px */
html[data-fontscale="-1"] { font-size: 87.5%;  }  /* 14px */
html[data-fontscale="1"]  { font-size: 112.5%; }  /* 18px */
html[data-fontscale="2"]  { font-size: 125%;   }  /* 20px */
html[data-fontscale="3"]  { font-size: 137.5%; }  /* 22px */

/* ==============================================
   ACCESSIBILITÉ — Palettes daltoniens
   Remplace l'accent --jaune par des teintes
   perceptibles selon le type de daltonisme.
   Tous les contrastes vérifiés AAA (7:1+)
   avec texte --ardoise-deep #35363C.
   ─────────────────────────────────────────
   Protanopie  : #5CC8C8 sur #35363C → 8.4:1 ✓
   Deutéranopie: #8CB4E8 sur #35363C → 7.5:1 ✓
   Tritanopie  : #F0A8A8 sur #35363C → 7.1:1 ✓
============================================== */
[data-cv="protanopia"] {
  --jaune: #5CC8C8;
  --jaune-deep: #4AB0B0;
  --highlight-color: #5CC8C8;
  --color: #4AB0B0;
}
[data-cv="deuteranopia"] {
  --jaune: #8CB4E8;
  --jaune-deep: #6FA0D8;
  --highlight-color: #8CB4E8;
  --color: #6FA0D8;
}
[data-cv="tritanopia"] {
  --jaune: #F0A8A8;
  --jaune-deep: #D88888;
  --highlight-color: #F0A8A8;
  --color: #D88888;
}

/* ==============================================
   ACCESSIBILITÉ — Toolbar
   Position fixe bas-droite
   z-index sous le mobile menu (9999)
   Cibles tactiles 44px+ (WCAG 2.5.5 AAA)
============================================== */
.ph-a11y {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 90;
}

/* ── Bouton déclencheur ── */
.ph-a11y__trigger {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--ardoise);
  background: var(--blanc);
  color: var(--ardoise-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .2s, transform .15s;
}
.ph-a11y__trigger:hover {
  background: var(--ardoise-xlt);
  transform: scale(1.05);
}
.ph-a11y__trigger:focus-visible {
  outline: 3px solid var(--jaune) !important;
  outline-offset: 3px;
}
.ph-a11y__trigger[aria-expanded="true"] {
  background: var(--ardoise-deep);
  color: var(--blanc);
  border-color: var(--ardoise-deep);
}

/* ── Panneau ── */
.ph-a11y__panel {
  position: absolute;
  bottom: calc(100% + .75rem);
  right: 0;
  width: 18rem;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ph-a11y__panel[hidden] { display: none; }

/* ── Groupes ── */
.ph-a11y__group {
  border: none;
  padding: 0;
  margin: 0;
}
.ph-a11y__group legend {
  font-family: var(--f);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-body);
  margin-bottom: .5rem;
  padding: 0;
}

/* ── Rangées de boutons ── */
.ph-a11y__row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ph-a11y__row--wrap { flex-wrap: wrap; }

/* ── Boutons ── */
.ph-a11y__btn {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--ardoise);
  border-radius: var(--radius);
  background: var(--blanc);
  color: var(--text-primary);
  font-family: var(--f);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.ph-a11y__btn:hover {
  background: var(--ardoise-xlt);
}
.ph-a11y__btn:focus-visible {
  outline: 3px solid var(--jaune) !important;
  outline-offset: 2px;
}
.ph-a11y__btn[aria-pressed="true"] {
  background: var(--ardoise-deep);
  color: var(--on-deep-hi);
  border-color: var(--ardoise-deep);
}
.ph-a11y__btn--wide { width: 100%; }
.ph-a11y__btn--cv { flex: 1 1 calc(50% - .25rem); }

/* ── Indicateur de niveau ── */
.ph-a11y__level {
  font-family: var(--f);
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 3.5rem;
  text-align: center;
}

/* ── Reset ── */
.ph-a11y__reset {
  min-height: 2.75rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--ardoise);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-body);
  font-family: var(--f);
  font-size: .8rem;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s;
}
.ph-a11y__reset:hover { background: var(--ardoise-xlt); }
.ph-a11y__reset:focus-visible {
  outline: 3px solid var(--jaune) !important;
  outline-offset: 2px;
}

/* ── Dark mode ── */
[data-theme="dark"] .ph-a11y__trigger {
  background: var(--ardoise);
  color: var(--on-dark-hi);
  border-color: var(--ardoise);
}
[data-theme="dark"] .ph-a11y__trigger:hover {
  background: var(--ardoise-deep);
}
[data-theme="dark"] .ph-a11y__trigger[aria-expanded="true"] {
  background: var(--jaune);
  color: var(--ardoise-deep);
  border-color: var(--jaune);
}
[data-theme="dark"] .ph-a11y__panel {
  background: var(--ardoise);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .ph-a11y__group legend { color: var(--on-dark-body); }
[data-theme="dark"] .ph-a11y__btn {
  background: var(--ardoise-deep);
  color: var(--on-dark-hi);
  border-color: rgba(255,255,255,.15);
}
[data-theme="dark"] .ph-a11y__btn:hover { background: var(--ardoise); border-color: var(--on-dark-body); }
[data-theme="dark"] .ph-a11y__btn[aria-pressed="true"] {
  background: var(--jaune);
  color: var(--ardoise-deep);
  border-color: var(--jaune);
}
[data-theme="dark"] .ph-a11y__level { color: var(--on-dark-hi); }
[data-theme="dark"] .ph-a11y__reset {
  color: var(--on-dark-body);
  border-color: rgba(255,255,255,.15);
}
[data-theme="dark"] .ph-a11y__reset:hover { background: var(--ardoise-deep); }

/* ── Reduced motion pour le toolbar ── */
@media (prefers-reduced-motion: reduce) {
  .ph-a11y__trigger { transition: none; }
  .ph-a11y__btn { transition: none; }
  .ph-a11y__reset { transition: none; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .ph-a11y { bottom: 1rem; right: 1rem; }
  .ph-a11y__panel {
    width: calc(100vw - 2rem);
    right: -.5rem;
  }
}

/* ════════════════════════════════════════════════════════
   HOMEPAGE V2 — Design épuré validé (preview-homepage-v2)
   ════════════════════════════════════════════════════════ */

/* ── Section 1 : Hero V2 ── */
.ph-hero-v2 { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; background: var(--ardoise-deep, #35363c); color: var(--on-deep-hi, #fff); }
.ph-hero-v2__bg { position: absolute; inset: 0; z-index: 0; }
.ph-hero-v2__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.ph-hero-v2__content { position: relative; z-index: 2; max-width: 720px; padding-top: 6rem; }
.ph-hero-v2__name { font-family: 'Lato', system-ui, -apple-system, sans-serif; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
/* Mantra : petites capitales semi-grasses */
.ph-hero-v2__mantra { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 600; color: var(--jaune, #fcce61); margin-bottom: 2rem; letter-spacing: 0.12em; font-variant: small-caps; text-transform: lowercase; }
.ph-hero-v2__body { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 300; line-height: 1.8; color: var(--on-deep-body, #e6e6e6); max-width: 620px; margin-bottom: 2rem; }
.ph-hero-v2__actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ph-hero-v2__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--ardoise-deep, #35363c); background: var(--jaune, #fcce61); padding: 0.875rem 2rem; border-radius: 4px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.ph-hero-v2__cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(252, 206, 97, 0.3); }
/* Stats hero — 2x plus grosses, séparées du CTA */
.ph-hero-v2__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); }
.ph-hero-v2__stat { font-size: 1rem; color: var(--on-deep-meta, #c8c8cb); letter-spacing: 0.02em; }
.ph-hero-v2__stat strong { font-size: 1.5rem; font-weight: 700; color: var(--on-deep-hi, #fff); display: block; line-height: 1.2; }

/* ── Section 2 : Preuve sociale V2 ── */
.ph-proof { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border, rgba(73,74,81,0.15)); }
.ph-proof__logos { display: flex; gap: 3rem; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0 1rem; margin-bottom: 3rem; }
.ph-proof__logos img { height: 56px; width: auto; opacity: 0.5; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; }
.ph-proof__logos img:hover, .ph-proof__logos img:focus { opacity: 1; filter: grayscale(0); }
.ph-proof__quote { max-width: 700px; margin: 0 auto; text-align: center; padding: 0 2rem; }
.ph-proof__quote blockquote { font-size: 1.1rem; font-style: italic; line-height: 1.8; color: var(--text-body, #494a51); margin-bottom: 1rem; }
.ph-proof__quote blockquote::before { content: "\201C"; font-size: 3rem; font-style: normal; color: var(--jaune, #fcce61); line-height: 0; vertical-align: -0.4em; margin-right: 0.15em; }
.ph-proof__attr { font-size: 0.875rem; color: var(--text-body, #494a51); }
.ph-proof__attr strong { font-weight: 700; }

/* ── Section 3 : Services V2 ── */
.ph-services-v2 { padding: var(--space-xl, 8rem) 0; }
.ph-services-v2__heading { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--text-primary, #35363c); margin-bottom: 3rem; letter-spacing: -0.02em; }
.ph-services-v2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap, clamp(1.5rem, 3vw, 3rem)); }
@media (max-width: 768px) { .ph-services-v2__grid { grid-template-columns: 1fr; } }
.ph-service-card { border: 1px solid var(--border, rgba(73,74,81,0.15)); border-radius: 4px; padding: 2.5rem 2rem; transition: border-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.ph-service-card:hover { border-color: var(--ardoise, #494A51); box-shadow: 0 4px 20px rgba(0,0,0,.15); background: var(--ardoise, #494A51); color: var(--blanc, #FFFFFF); }
.ph-service-card:hover .ph-service-card__num { color: rgba(255,255,255,.2); }
.ph-service-card:hover .ph-service-card__title { color: var(--jaune, #FCCE61); }
.ph-service-card:hover .ph-service-card__body { color: rgba(255,255,255,.85); }
.ph-service-card:hover .ph-service-card__link { color: var(--jaune, #FCCE61); }
/* Numéro décoratif — aria-hidden="true", on-deep-meta sur ardoise-xlt → 7.2:1 AAA ✓ */
.ph-service-card__num { font-size: 3rem; font-weight: 700; color: var(--on-deep-meta, #C8C8CB); line-height: 1; margin-bottom: 1rem; }
.ph-service-card__title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #35363c); margin-bottom: 0.75rem; }
.ph-service-card__body { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--text-body, #494a51); margin-bottom: 1.5rem; flex: 1; }
.ph-service-card__link { font-size: 0.875rem; font-weight: 700; color: var(--text-primary, #35363c); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.ph-service-card__link:hover { color: var(--ardoise, #494a51); }
.ph-service-card__link svg { transition: transform 0.2s; }
.ph-service-card__link:hover svg { transform: translateX(3px); }

/* ── Section 4 : Cas clients V2 ── */
.ph-cases-v2 { padding: var(--space-xl, 8rem) 0; background: var(--ardoise-xlt, #f5f5f6); }
.ph-cases-v2__heading { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--text-primary, #35363c); margin-bottom: 3rem; letter-spacing: -0.02em; }
.ph-cases-v2__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--col-gap, clamp(1.5rem, 3vw, 3rem)); }
@media (max-width: 768px) { .ph-cases-v2__grid { grid-template-columns: 1fr; } }
.ph-case-v2 { background: var(--blanc, #fff); border: 1px solid var(--border, rgba(73,74,81,0.15)); border-radius: 4px; padding: 2.5rem 2rem; }
.ph-case-v2__tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ardoise-deep, #35363c); background: var(--jaune, #fcce61); padding: 0.2rem 0.6rem; border-radius: 4px; margin-bottom: 0.75rem; }
.ph-case-v2__client { font-size: 0.875rem; color: var(--text-body, #494a51); margin-bottom: 0.5rem; }
.ph-case-v2__title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary, #35363c); margin-bottom: 0.75rem; }
.ph-case-v2__body { font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--text-body, #494a51); }
/* ── Carrousel cas clients (manuel, avec dots) ── */
.ph-cases-carousel { position: relative; overflow: hidden; }
.ph-cases-carousel__track { position: relative; min-height: 320px; }
.ph-cases-carousel__slide {
  display: none; position: absolute; inset: 0;
  grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center;
  opacity: 0; transition: opacity .4s ease;
}
.ph-cases-carousel__slide--active { display: grid; opacity: 1; position: relative; }
/* Image carrée — effet bichromie tramée (duotone halftone) */
.ph-cases-carousel__image {
  position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  background: var(--ardoise, #494A51);
}
/* L'image en niveaux de gris — base pour la bichromie */
.ph-cases-carousel__image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.2);
  mix-blend-mode: luminosity;
}
/* Couche bichromie : dégradé anthracite → or appliqué en multiply */
.ph-cases-carousel__trame {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg, var(--ardoise, #494A51) 0%, var(--jaune, #FCCE61) 100%);
  mix-blend-mode: color;
}
/* Couche halftone : points de trame simulés par radial-gradient répété */
.ph-cases-carousel__trame::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(circle, var(--ardoise, #494A51) 1px, transparent 1px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  opacity: .3;
}
.ph-cases-carousel__content { padding: 1rem 0; }
/* Dots navigation */
.ph-cases-carousel__nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.ph-cases-carousel__dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ardoise, #494A51);
  background: transparent; cursor: pointer; transition: background .2s, border-color .2s;
  padding: 0;
}
.ph-cases-carousel__dot--active, .ph-cases-carousel__dot:hover { background: var(--or-aaa, #6E5206); border-color: var(--or-aaa, #6E5206); }
@media (max-width: 767px) {
  .ph-cases-carousel__slide--active { grid-template-columns: 1fr; }
  /* Correctif B : images pleine largeur mobile — sortir des marges du conteneur */
  .ph-cases-carousel__image {
    max-height: none; border-radius: 0;
    margin-left: calc(-1 * clamp(1.25rem, 5vw, 3rem));
    margin-right: calc(-1 * clamp(1.25rem, 5vw, 3rem));
  }
  .ph-cases-carousel__image img { width: 100%; border-radius: 0; }
}
.ph-cases-v2__more { margin-top: 2rem; text-align: center; }
.ph-cases-v2__more a { font-size: 0.875rem; font-weight: 700; color: var(--text-primary, #35363c); text-decoration: none; }
.ph-cases-v2__more a:hover { text-decoration: underline; }

/* ── Section 5 : CTA final V2 ── */
.ph-cta-v2 { padding: var(--space-xl, 8rem) 0; text-align: center; }
.ph-cta-v2__heading { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--text-primary, #35363c); margin-bottom: 1rem; letter-spacing: -0.02em; }
.ph-cta-v2__body { font-size: 1.05rem; color: var(--text-body, #494a51); margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.ph-cta-v2__btn { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.0625rem; font-weight: 700; color: var(--ardoise-deep, #35363c); background: var(--jaune, #fcce61); padding: 1rem 2.5rem; border-radius: 4px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.ph-cta-v2__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(252, 206, 97, 0.35); }
.ph-cta-v2__note { margin-top: 1rem; font-size: 0.875rem; font-weight: 300; color: var(--text-body, #494a51); }

/* ── Bandeau Normandie — 5ème colonne du footer, ferré à droite ── */
.ph-footer__normandie {
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.ph-footer__normandie a {
  display: inline-flex; align-items: center;
  text-decoration: none; transition: opacity .2s;
}
.ph-footer__normandie a:hover { opacity: .8; }
.ph-footer__normandie img { width: auto; max-width: 200px; height: auto; object-fit: contain; display: block; }