/* ================================================================
   BENDJADOR AVOCAT — v2 (design tokens + responsive)
   Sources : PSD (design ref) + assets designer (source de vérité)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Raleway:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  /* Couleurs */
  --navy:        #1a327b;
  --navy-deep:   #1B2A5E;   /* variante profonde (LinkedIn icon) */
  --navy-dark:   #0d1b3e;
  --red:         #940028;
  --red-hover:   #76001f;
  --red-light:   #C0182A;
  --white:       #ffffff;
  --gray-light:  #cecfd0;
  --gray-dark:   #4f4f4f;
  --gray-bg:     #f4f4f5;   /* fond section Compétences */
  --text:        #2C2C2C;
  --text-muted:  #6a6a78;

  /* Spacing */
  --nav-h:       132px;
  --container:   1920px;       /* largeur max contenu — limite pour écrans >1920 */
  --side-pad:    clamp(24px, 4vw, 80px);
  --grid-x:      clamp(40px, 22.8vw, 438px);  /* abscisse grille hero-box (viewport-relative pour cohérence cross-container) */

  /* Typography scale (mesuré sur PSD à 1920px, responsive avec clamp) */
  --fs-label:    13px;
  --fs-body:     15px;
  --fs-nav:      13px;
  --fs-h1:       clamp(22px, 1.95vw, 32px);
  --fs-h2:       clamp(22px, 2vw, 30px);
  --fs-section:  clamp(36px, 3.5vw, 48px);
  --fs-phone:    clamp(28px, 2.8vw, 40px);
  --fs-eyebrow:  clamp(22px, 1.85vw, 30px);  /* "LE CABINET", "NOTRE APPROCHE", "NOUS SITUER" */
  --fs-hero-h1:  clamp(20px, 1.55vw, 26px);  /* H1 léger sous eyebrow */
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Raleway', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  /* Fade-in initial à l'arrivée sur la page */
  animation: pageIn 0.6s ease-out;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll reveal (Intersection Observer driven) ───────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(.22, .61, .36, 1),
              transform 0.8s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.16s; }
.reveal--delay-3 { transition-delay: 0.24s; }

/* Respect du choix utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: 'Roboto', sans-serif; font-weight: 800; }

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--white);
  display: flex; align-items: center;
  padding: 0 var(--side-pad);
  box-shadow: 0 2px 14px rgba(27,42,94,0.06);
}
.nav-logo img { height: 100px; width: auto; }
/* Wrapper menu positionné absolument → pixel-aligné sur la grille, indépendant du logo */
.nav-menu-wrap {
  position: absolute;
  left: var(--grid-x);
  top: 50%;
  transform: translateY(-50%);
}
.nav-menu { display: flex; gap: clamp(18px, 2.6vw, 44px); list-style: none; }
.nav-menu a {
  font-size: var(--fs-nav); font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--navy);
  padding: 8px 0;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s cubic-bezier(.4, 0, .2, 1);
}
/* Underline animé qui se déploie depuis la gauche */
.nav-menu a::after {
  content: '';
  position: absolute; left: 0; bottom: 2px;
  width: 100%; height: 2px;
  background: var(--red-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
.nav-menu a:hover { color: var(--red-light); }
.nav-menu a:hover::after,
.nav-menu a.is-active::after { transform: scaleX(1); }
/* Bouton CTA dans le menu : style bouton rouge */
.nav-menu a.nav-cta {
  background: var(--red); color: var(--white);
  padding: 12px 24px; border-bottom: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
.nav-menu a.nav-cta:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  border-bottom: none;
}
.nav-linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 41px; height: 41px;
  margin-left: auto;     /* pousse l'icône à droite */
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-linkedin img { width: 41px; height: 41px; display: block; }
.nav-linkedin:hover {
  transform: scale(1.08);
  opacity: 0.9;
}
.nav-hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--navy);
  border: 0; background: transparent;
}
.nav-hamburger svg {
  width: 28px; height: 28px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round;
}

/* ================================================================
   HERO — Homepage (Fond H1.png as bg)
   ================================================================ */
.hero-home {
  margin-top: var(--nav-h);
  position: relative;
  background: var(--navy) url('/img/hero-home.webp') center / cover no-repeat;
  min-height: 620px;
  aspect-ratio: 1920 / 931;
  max-height: 931px;
}
.hero-home-box {
  position: absolute;
  left: var(--grid-x); top: 0;
  width: clamp(310px, 24.4%, 469px);
  aspect-ratio: 1 / 1;
  background: var(--navy);
  padding: clamp(36px, 3.5vw, 55px);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--white);
}
/* Eyebrow + H1 hero communs : hero homepage + hero pages internes + approche overlay
   (même format partout) */
.hero-home-box .hero-label,
.hero-inner-box .hero-label,
.approche-label {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(22px, 1.7vw, 28px); font-weight: 800;
  letter-spacing: 2.5px; line-height: 1.1;
  text-transform: uppercase; color: var(--white);
  margin-bottom: 12px;
}
.hero-home-box .hero-h1,
.hero-inner-box .hero-h1,
.approche-h2 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(22px, 1.7vw, 28px); font-weight: 300;
  color: var(--white); text-transform: uppercase;
  line-height: 1.2; letter-spacing: 1px;
  margin-bottom: 36px;
}
.hero-arrow {
  /* PSD: flèche seule sans cadre, alignée à DROITE */
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 50px; height: 50px;
  color: var(--white);
  font-size: 38px; font-weight: 300; line-height: 1;
  align-self: flex-end;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.95;
}
.hero-arrow { transition: transform 0.4s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease; }
.hero-arrow:hover { transform: translateX(8px); opacity: 1; }

/* ================================================================
   HERO — Inner pages (photo gauche + bloc coloré + intro droite)
   ================================================================ */
.hero-inner {
  margin-top: var(--nav-h);
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: stretch;
  position: relative;
  height: clamp(580px, 50.4vw, 968px);
  overflow: hidden;
  background: var(--white);   /* fond blanc — gris uniquement sur le panneau intro */
}
.hero-inner-media {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  /* Photo : démarre TOP du section (pas de margin) */
}
.hero-inner-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-inner-box {
  /* Bloc carré qui CHEVAUCHE photo + intro gris.
     Aligné gauche sur var(--grid-x) (même que hero-home-box / menu) */
  position: absolute; top: 0;
  left: var(--grid-x);
  width: clamp(310px, 28%, 540px);
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px, 3.5vw, 55px);
  color: var(--white); z-index: 2;
  /* Ombre pour renforcer l'effet de superposition */
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
/* hero-inner-box typo : hérite des règles communes ci-dessus (hero-home-box, etc.) */
.hero-inner-intro {
  background: var(--gray-light);
  /* PSD : gris décalé du haut (marge blanche visible au-dessus) */
  margin-top: clamp(40px, 5vw, 80px);
  /* Padding-left augmenté pour éviter texte sous le bloc qui déborde */
  padding: clamp(48px, 6vw, 80px) clamp(48px, 5vw, 80px) clamp(48px, 6vw, 80px) clamp(96px, 9vw, 160px);
  display: flex; flex-direction: column; justify-content: center;
}
/* PSD : "Une approche" bold navy h2 */
.hero-inner-intro h2 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(18px, 1.4vw, 22px); font-weight: 700;
  color: var(--navy);
  text-transform: none; letter-spacing: 0;
  margin-bottom: 8px;
}
/* PSD : subtitle red (ou couleur du bloc) — "FAUX TEXTE MAQUETTE A VENIR" */
.hero-inner-intro .subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(15px, 1.05vw, 18px); font-weight: 400;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--navy); margin-bottom: 22px;
}
.hero-inner--red .hero-inner-intro .subtitle  { color: var(--red); }
.hero-inner--gray .hero-inner-intro .subtitle { color: var(--gray-dark); }
.hero-inner--navy .hero-inner-intro .subtitle { color: var(--navy); }
.hero-inner-intro p {
  font-size: var(--fs-body); color: var(--text);
  line-height: 1.75; margin-bottom: 12px;
}

/* Variantes par page */
.hero-inner--navy .hero-inner-box { background: var(--navy); }
.hero-inner--red .hero-inner-box { background: var(--red); }
.hero-inner--gray .hero-inner-box { background: var(--gray-dark); }

/* ================================================================
   SECTION CABINET (homepage) — portrait + panneau navy
   ================================================================ */
.s-cabinet {
  padding: 0;
  background: var(--white);
  position: relative;
  z-index: 2;
}
/* Cabinet section — PSD-accurate (coords PSD viewport 1920) :
   - Photo : x≈280 w≈625 (ends at ≈905)
   - Navy panel : x=905 w=771 (40.16%)
   - Icon avocat : x=247 w=225 (overlap bottom-left de la photo)
   - Photo dépasse en HAUT du navy panel (overlap vertical -120 sur hero) */
.cabinet-grid {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: start;
  padding-left: var(--grid-x);
  padding-right: clamp(40px, 6vw, 100px);
}
.cabinet-photo {
  position: relative;
  z-index: 3;
  /* Photo dépasse en haut sur le hero (transform → n'affecte pas le layout) */
  transform: translateY(-180px);
  margin-bottom: -180px;
}
.cabinet-photo > img:not(.cabinet-icon) {
  width: 100%;
  aspect-ratio: 1 / 1;       /* source carrée 469×469 */
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(.22, .61, .36, 1),
              filter 0.6s ease;
}
.cabinet-photo:hover > img:not(.cabinet-icon) {
  transform: scale(1.04);
  filter: brightness(1.04);
}
.cabinet-icon {
  position: absolute;
  left: -140px; bottom: -20px;
  width: 110px; height: 110px;
  z-index: 3;
  object-fit: contain;
}
.cabinet-text {
  background: var(--navy); color: var(--white);
  padding: 60px clamp(40px, 4vw, 64px);
  display: flex; flex-direction: column;
  z-index: 1;
}
.cabinet-name {
  font-size: var(--fs-h2); color: var(--white);
  line-height: 1.2; margin-bottom: 6px;
}
.cabinet-sub {
  font-size: 13px; font-weight: 400; letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);  /* PSD : blanc translucide, PAS rouge */
  margin-bottom: 26px;
}
.cabinet-text p {
  font-size: var(--fs-body); color: rgba(255,255,255,0.88);
  line-height: 1.7; margin-bottom: 10px;
  max-width: 480px;  /* PSD : texte étroit (~480px max) */
}
.cabinet-text .btn-red { align-self: flex-start; margin-top: 18px; }

/* ================================================================
   BOUTON ROUGE
   ================================================================ */
.btn-red {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 16px; padding: 18px 36px;
  background: var(--red); color: var(--white);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: background 0.3s cubic-bezier(.4, 0, .2, 1),
              transform 0.3s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.3s cubic-bezier(.4, 0, .2, 1);
}
/* Effet "glow" subtil au hover via pseudo-element */
.btn-red::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.btn-red:hover {
  background: var(--red-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(148,0,40,0.28);
}
.btn-red:hover::before { transform: translateX(120%); }
.btn-red:active { transform: translateY(-1px); transition-duration: 0.1s; }
.btn-red .arr {
  font-size: 18px; font-weight: 300;
  transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
}
.btn-red:hover .arr { transform: translateX(6px); }

/* ================================================================
   COMPÉTENCES
   ================================================================ */
.s-competences {
  padding: clamp(30px, 2.5vw, 48px) var(--side-pad) clamp(40px, 3.5vw, 56px);
  background: var(--gray-bg);
  min-height: 503px;
  box-sizing: border-box;
}
.section-head { text-align: center; margin-bottom: 48px; }
.section-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(32px, 3.5vw, 56px); font-weight: 300;
  color: var(--navy);
  letter-spacing: 2px; text-transform: uppercase;
}
.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--container); margin: 0 auto;
}
/* Desktop : cards en row 1, dropdown en row 2 full width */
.comp-grid > .comp-card    { grid-row: 1; }
.comp-grid > .comp-details { grid-row: 2; grid-column: 1 / -1; }
.comp-card {
  text-align: center;
  padding: 0 clamp(20px, 2vw, 36px);
  transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}
.comp-card:hover { transform: translateY(-8px); }
.comp-card .comp-icon {
  width: 80px; height: 80px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);   /* léger overshoot */
}
.comp-card:hover .comp-icon { transform: scale(1.12) rotate(-3deg); }
.comp-card .comp-icon svg {
  width: 100%; height: 100%;
  stroke: var(--navy); fill: none; stroke-width: 1.4;
  transition: stroke 0.3s cubic-bezier(.4, 0, .2, 1);
}
.comp-card:hover .comp-icon svg { stroke: var(--red-light); }
.comp-card h3, .comp-card p, .comp-plus { transition: color 0.3s cubic-bezier(.4, 0, .2, 1); }
.comp-card:hover h3 { color: var(--red-light); }
.comp-card h3 {
  font-size: 16px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--navy);
  text-transform: uppercase; margin-bottom: 18px;
}
.comp-card p {
  font-size: 14px; color: var(--text);
  line-height: 1.6; margin-bottom: 22px;
}
.comp-plus {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--navy);
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 0; cursor: pointer;
  transition: color 0.2s;
}
.comp-plus:hover { color: var(--red-light); }
.comp-plus-icon { font-weight: 400; font-size: 16px; transition: transform 0.2s; }
.comp-plus[aria-expanded="true"] { color: var(--red-light); }
.comp-plus[aria-expanded="true"] .comp-plus-icon { transform: rotate(45deg); }

/* Panneau détails (dropdown) */
.comp-details {
  max-width: var(--container); margin: 32px auto 0;
  /* Texte aligné gauche ET droite avec les 4 cards (mêmes marges latérales que la section) */
  padding: 32px 0;
  border-top: 1px solid rgba(27,42,94,0.12);
  border-bottom: 1px solid rgba(27,42,94,0.12);
}
.comp-details[hidden] { display: none; }
.comp-details-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(20px, 1.6vw, 24px); font-weight: 700;
  color: var(--navy); letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 16px;
}
.comp-details-body p {
  font-size: 15px; color: var(--text);
  line-height: 1.75; margin-bottom: 12px;
  /* Pas de max-width : utilise toute la largeur disponible entre les paddings */
}
.comp-details-body p:last-child { margin-bottom: 0; }

/* ================================================================
   NOTRE APPROCHE (homepage split)
   ================================================================ */
/* PSD: 2 images côte à côte (colonnes navy gauche, palais droite)
   + bloc rouge overlay positionné en haut-droite du palais */
.s-approche {
  position: relative;
  display: grid;
  /* 3 colonnes : navy columns aligné sur --grid-x (22.8%) | red bloc | palais */
  grid-template-columns: var(--grid-x) clamp(280px, 24%, 460px) 1fr;
  align-items: stretch;
  height: calc(53vw * 471 / 1030);
  max-height: 505px;
  min-height: 280px;
  overflow: hidden;
}
.approche-columns,
.approche-palais {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.8s ease;
}
.s-approche:hover .approche-palais { transform: scale(1.04); }
.approche-overlay {
  /* Bloc rouge = colonne 2 du grid (pas en absolute) */
  position: relative;
  background: var(--red);
  color: var(--white);
  padding: clamp(36px, 3vw, 55px);
  display: flex; flex-direction: column; justify-content: center;
  z-index: 2;
}
/* .approche-label et .approche-h2 stylés ci-dessus via groupage avec .hero-home-box */

/* ================================================================
   NOUS SITUER
   ================================================================ */
/* PSD : map OSM full-width + card blanche overlay top-droite */
.s-situer {
  position: relative;
  padding: 0;
  background: var(--white);
  height: 595px;
  overflow: hidden;
}
.situer-map {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(100%) contrast(1.05);
}
.situer-card {
  position: absolute;
  top: clamp(40px, 5vw, 80px);
  right: clamp(40px, 8vw, 160px);
  background: var(--white);
  padding: clamp(32px, 3vw, 48px);
  width: clamp(280px, 30vw, 440px);
  box-shadow: 0 12px 32px rgba(27,42,94,0.15);
  z-index: 2;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.situer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(27,42,94,0.22);
}
.situer-tag {
  font-size: var(--fs-eyebrow); font-weight: 800;
  color: var(--navy); letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 10px;
}
.situer-title {
  font-size: clamp(15px, 1.05vw, 18px); font-weight: 400;
  color: var(--navy);
  text-transform: uppercase; letter-spacing: 1.5px;
  line-height: 1.3; margin-bottom: 16px;
}
.situer-body { font-size: 14px; color: var(--text); line-height: 1.7; }
.situer-address {
  margin-top: 16px;
  font-size: 14px; font-weight: 600;
  color: var(--navy); line-height: 1.5;
  letter-spacing: 0.5px;
}

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band {
  /* CTA : adresse/phone/email à GAUCHE, bouton à DROITE — hauteur réduite */
  background: var(--white);
  padding: clamp(20px, 2vw, 36px) clamp(40px, 6vw, 120px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(40px, 6vw, 120px); flex-wrap: nowrap;
  height: auto;
  min-height: 140px;
  box-sizing: border-box;
}
.cta-band--home { height: 160px; }
.cta-info { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.cta-line {
  display: flex; align-items: center; gap: 14px;
  color: var(--navy); font-size: 14px;
  transition: color 0.2s ease;
}
.cta-line .cta-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27,42,94,0.08); color: var(--navy);
  border-radius: 50%;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cta-line .cta-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
a.cta-line:hover { color: var(--red); }
a.cta-line:hover .cta-icon { background: var(--red); color: var(--white); transform: scale(1.08); }
.cta-info .phone {
  font-size: var(--fs-phone); font-weight: 700; color: var(--navy);
  letter-spacing: 1px; line-height: 1;
}
.cta-info .email { color: rgba(27,42,94,0.75); }
.cta-band .btn-red { flex-shrink: 0; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: var(--navy);
  padding: 36px var(--side-pad) 24px;
  color: rgba(255,255,255,0.6);
}
.footer-top {
  display: flex; align-items: center;
  gap: 40px; padding-bottom: 22px;
  max-width: var(--container); margin: 0 auto;
}
.footer-logo { margin-left: 0; margin-right: auto; }
/* PSD: utilise le logo complet (logo.png) en blanc via filter — pas le monogramme */
.footer-logo img { height: 80px; width: auto; filter: brightness(0) invert(1); }
.footer-nav { display: flex; gap: clamp(18px, 2.6vw, 44px); list-style: none; margin-right: clamp(60px, 6vw, 120px); }
.footer-nav a {
  font-size: var(--fs-nav); font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  position: relative;
  transition: color 0.3s cubic-bezier(.4, 0, .2, 1);
}
.footer-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
.footer-nav a:hover { color: var(--white); }
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 41px; height: 41px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.footer-linkedin img { width: 41px; height: 41px; display: block; }
.footer-linkedin:hover { transform: scale(1.08); opacity: 0.85; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 18px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  max-width: var(--container); margin: 0 auto;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.6); }
.footer-legal { display: flex; gap: 24px; list-style: none; }
.footer-legal a { font-size: 11px; color: rgba(255,255,255,0.5); }
.footer-legal a:hover { color: rgba(255,255,255,0.85); }

/* ================================================================
   CONTENU PAGES INTÉRIEURES (texte + photo)
   ================================================================ */
.s-content {
  padding: 0;
  background: var(--white);
  /* Pas de min-height fixe → s'adapte au contenu, pas d'espace mort */
  box-sizing: border-box;
}
.content-grid {
  display: grid;
  /* Même grid que hero-inner (47%/53%) → image alignée sur le panneau gris du hero */
  grid-template-columns: 47% 53%;
  gap: 0;
  max-width: var(--container); margin: 0 auto;
  align-items: stretch;
}
.content-text {
  /* Padding aligné sur hero-inner-intro (left 160 / right 80) pour matcher l'axe de texte */
  padding: clamp(48px, 5vw, 80px) clamp(48px, 5vw, 80px) clamp(48px, 5vw, 80px) clamp(96px, 9vw, 160px);
}
.content-text p { font-size: var(--fs-body); color: var(--text); line-height: 1.75; margin-bottom: 16px; }
/* Liste 3 points stylisée avec icon */
.content-list {
  list-style: none;
  margin: 32px 0 36px;             /* marge bas pour respirer avant le paragraphe suivant */
  display: flex; flex-direction: column; gap: 22px;
}
.content-list li {
  display: flex; align-items: flex-start; gap: 16px;
}
.content-list .content-list-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--white);
  border-radius: 50%;
  transition: transform 0.25s ease, background 0.25s ease;
}
.content-list li:hover .content-list-icon {
  transform: scale(1.08);
  background: var(--red);
}
.content-list .content-list-icon svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.content-list-text strong {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--navy); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 4px;
}
.content-list-text span {
  display: block;
  font-size: 14px; color: var(--text); line-height: 1.6;
}
.content-photo {
  align-self: stretch;
}
.content-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ================================================================
   PAGE CONTACT — horaires
   ================================================================ */
.s-horaires {
  /* Horaires gauche (47%) + Google Maps droite (53%) — colle au hero, fond blanc */
  margin-top: 0;
  padding: 0;
  background: var(--white);
  min-height: 360px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: stretch;
}
.horaires-wrap { padding: clamp(40px, 4vw, 60px) var(--side-pad); }
.horaires-wrap { max-width: 480px; }
.horaires-map {
  width: 100%; height: 100%;
  min-height: 360px;
  border: 0;
  filter: grayscale(100%) contrast(1.05);
}
.horaires-title {
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--navy); margin-bottom: 24px;
}
.horaires-list { list-style: none; }
.horaires-list li {
  display: flex; justify-content: space-between;
  font-size: 14px; padding: 12px 0;
  border-bottom: 1px solid rgba(27,42,94,0.08);
}
.horaires-list li:last-child { border-bottom: none; }
.horaires-list .jour { font-weight: 600; color: var(--navy); }
.horaires-list .heure { color: var(--text-muted); }
.horaires-list .heure--ferme { color: var(--red-light); font-weight: 600; }
.horaires-address {
  margin-top: 28px;
  font-size: 14px; font-weight: 600;
  color: var(--navy); line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Contact intro : design carte avec label + value pour chaque ligne */
.contact-intro {
  display: flex; flex-direction: column;
  gap: 22px;
}
.contact-intro .cta-line {
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(27,42,94,0.10);
}
.contact-intro .cta-line:last-child { border-bottom: none; }
.contact-intro .cta-icon {
  width: 48px; height: 48px;
  background: var(--white);
  border: 1.5px solid rgba(27,42,94,0.15);
}
.contact-intro .cta-icon svg { width: 20px; height: 20px; }
.contact-intro .cta-address span:last-child,
.contact-intro .email { font-size: 16px; color: var(--navy); font-weight: 500; }
.contact-intro .phone {
  font-size: var(--fs-phone); font-weight: 700; color: var(--navy);
  letter-spacing: 1px; line-height: 1;
}
.contact-intro a.cta-line:hover .cta-icon {
  background: var(--red); color: var(--white);
  border-color: var(--red);
}

/* ================================================================
   PAGES LÉGALES (mentions, politique de confidentialité)
   ================================================================ */
.legal-page {
  margin-top: var(--nav-h);
  padding: clamp(60px, 6vw, 100px) var(--side-pad);
  background: var(--white);
  min-height: calc(100vh - var(--nav-h));
}
.legal-wrap {
  max-width: 820px; margin: 0 auto;
  color: var(--text); line-height: 1.75;
}
.legal-wrap h1 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(28px, 2.6vw, 40px); font-weight: 800;
  color: var(--navy); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 32px;
}
.legal-wrap h2 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(18px, 1.3vw, 20px); font-weight: 700;
  color: var(--navy); text-transform: uppercase;
  letter-spacing: 1px; margin: 36px 0 14px;
}
.legal-wrap p, .legal-wrap li {
  font-size: var(--fs-body); margin-bottom: 12px;
}
.legal-wrap .legal-intro {
  font-size: 16px; font-weight: 500;
  color: var(--navy); margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(27,42,94,0.10);
}
.legal-wrap ul {
  margin: 0 0 16px 24px;
}
.legal-wrap a { color: var(--red); text-decoration: underline; }
.legal-wrap a:hover { color: var(--red-hover); }

/* ================================================================
   COOKIE BANNER
   ================================================================ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--navy); color: var(--white);
  padding: 20px clamp(24px, 4vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.2);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p {
  font-size: 14px; line-height: 1.5;
  flex: 1 1 360px;
  margin: 0;
}
.cookie-banner a { color: var(--white); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-btn {
  padding: 12px 24px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer; border: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.cookie-btn--accept { background: var(--red); color: var(--white); }
.cookie-btn--accept:hover { background: var(--red-hover); }
.cookie-btn--decline {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.cookie-btn--decline:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── TABLETTE (≤ 1200px) ─────────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --nav-h: 96px;
    --grid-x: clamp(20px, 6vw, 80px);   /* grille moins poussée */
  }
  .nav-logo img { height: 72px; }
  .nav-menu { gap: clamp(12px, 1.6vw, 24px); }

  /* Sections : passer les heights fixes → auto avec padding logique */
  .s-competences { height: auto; padding: clamp(40px, 5vw, 80px) var(--side-pad); }
  .s-approche {
    height: auto; min-height: 0;
    grid-template-columns: 24% 28% 1fr;
  }
  .s-situer { height: auto; min-height: 480px; }
  .cta-band { height: auto; padding: clamp(32px, 4vw, 60px) clamp(24px, 4vw, 80px); }
  .cta-band--home { height: auto; }

  /* Cabinet section : single column stack */
  .cabinet-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(24px, 5vw, 80px);
    max-width: 720px;
  }
  .cabinet-photo {
    transform: translateY(-100px);
    margin-bottom: -100px;
    margin-inline: auto;
    max-width: 360px;
  }
  .cabinet-icon { left: -90px; width: 80px; height: 80px; }
}

/* ── MOBILE (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 72px; --fs-eyebrow: 22px; --fs-hero-h1: 18px; --fs-phone: 28px; }

  /* Nav : hamburger */
  .nav-menu-wrap { display: none; }
  .nav-menu-wrap.open {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 16px 24px 24px;
    transform: none;
  }
  .nav-menu-wrap.open .nav-menu { flex-direction: column; gap: 0; }
  .nav-menu-wrap.open li a {
    display: block; padding: 14px 0;
    border-bottom: 1px solid rgba(27,42,94,0.08);
  }
  /* Bouton CTA "Prendre rendez-vous" dans le menu mobile : texte centré */
  .nav-menu-wrap.open li a.nav-cta {
    text-align: center;
    padding: 16px 24px;
    margin-top: 12px;
    border-bottom: none;
  }
  .nav-linkedin { display: none; }
  .nav-hamburger { display: block; margin-left: auto; }
  .nav-logo img { height: 48px; }

  /* Hero */
  .hero-home { aspect-ratio: 3 / 4; min-height: 480px; max-height: none; }
  .hero-home-box {
    position: absolute; left: 24px; right: 24px; top: 60px;
    width: auto; aspect-ratio: auto;
    padding: 28px 24px;
  }

  /* Hero-inner pages internes */
  .hero-inner { display: grid; grid-template-columns: 1fr; height: auto; }
  .hero-inner-media { aspect-ratio: 4 / 3; height: auto; }
  .hero-inner-box {
    position: static; left: auto; width: 100%;
    aspect-ratio: auto; padding: 32px 24px;
  }
  .hero-inner-intro { padding: 40px 24px; }

  /* Cabinet */
  .cabinet-grid { padding: 0 24px; }
  .cabinet-photo { transform: translateY(-60px); margin-bottom: -60px; max-width: 280px; }
  .cabinet-icon { display: none; }
  .cabinet-text { padding: 36px 24px; }
  .cabinet-text p { max-width: none; }

  /* Compétences : grid 1 colonne, plus de overflow:hidden */
  .comp-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Mobile : reset grid-row → dropdown directement sous sa card */
  .comp-grid > .comp-card,
  .comp-grid > .comp-details { grid-row: auto; grid-column: 1; }
  .comp-card { padding: 0; }

  /* Approche : pile vertical */
  .s-approche { grid-template-columns: 1fr; height: auto; }
  .approche-columns { display: none; }
  .approche-overlay { padding: 32px 24px; }
  .approche-palais { width: 100%; height: auto; aspect-ratio: 1030/471; }

  /* Situer */
  .s-situer { height: 420px; min-height: 0; }
  .situer-card {
    top: auto; bottom: 20px; right: 20px; left: 20px;
    width: auto; padding: 24px;
  }

  /* CTA */
  .cta-band {
    flex-direction: column; align-items: flex-start;
    padding: 32px 24px; gap: 24px;
  }

  /* Content (inner pages) */
  .content-grid { grid-template-columns: 1fr; }
  .s-content { padding: 40px 24px; min-height: 0; }
  .s-horaires { grid-template-columns: 1fr; gap: 32px; }
  .horaires-map { min-height: 320px; }

  /* Footer */
  .footer { padding: 32px 24px 20px; }
  .footer-top { flex-direction: column; gap: 24px; text-align: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
}