/*
Theme Name: Dr Mohamed Ouchane — Chirurgie viscérale et digestive
Author: Cabinet Dr Mohamed Ouchane
Description: Thème WordPress sur mesure pour le cabinet du Dr Mohamed Ouchane, chirurgien viscéral et digestif à Casablanca (Sidi Bernoussi). Édition « éditoriale » : barre supérieure fixe, hero à fond vidéo voilé aligné à gauche, accent bleu clinique, titres serif Fraunces. Bilingue FR/AR, responsive, optimisé SEO.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dr-mohamed-ouchane
*/

/* ==========================================================================
   1. Variables & base
   ========================================================================== */
/* Édition ÉDITORIALE — palette « bleu clinique » (base : thème de référence Dr Ouchane).
   Les noms de variables sont conservés — seules les valeurs changent —
   pour recolorer tout le thème sans toucher à la structure CSS.
   --blue = accent bleu clinique #1466ad · --navy = encre bleu-nuit #0f1b28
   Layout : barre supérieure fixe (header horizontal, --header-h) + tiroir mobile.
   Titres serif (Fraunces), hero centré + bandeau photo large, coins nets 4px. */
:root {
  --ink: #141b22;
  --navy: #0f1b28;
  --navy-800: #16283a;
  --blue: #1466ad;
  --blue-hover: #0f5089;
  --blue-tint: #eaf2fa;
  --blue-on-dark: #9cc4e8;
  /* Variantes assombries de --blue / --ink, calibrées pour tenir le contraste AA
     par-dessus le fond vidéo voilé du hero (voir section 4). */
  --blue-on-media: #0d4a80;
  --ink-on-media: #33404e;
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --white: #ffffff;
  --muted: #5a6572;
  --line: #e2e8ef;
  --danger: #c0392b;
  --shadow-sm: 0 1px 2px rgba(15, 27, 40, 0.06);
  --shadow-md: 0 2px 10px rgba(15, 27, 40, 0.08);
  --shadow-lg: 0 6px 24px rgba(15, 27, 40, 0.12);
  --radius: 4px;
  --radius-lg: 8px;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --header-h: 80px; /* hauteur de la barre supérieure fixe */
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 4.8vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.2em; }

a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-hover); }

ul, ol { padding-left: 1.3em; }

.container {
  width: min(1180px, 92%);
  margin-inline: auto;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 18px; z-index: 999;
}
.skip-link:focus { left: 10px; top: 10px; color: #fff; }

::selection { background: var(--blue); color: #fff; }

.btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ==========================================================================
   2. Boutons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  line-height: 1.2;
}
/* Contrainte de taille des icônes dans TOUS les boutons (évite les SVG géants sur mobile). */
.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.nav-cta svg { width: 1.05em; height: 1.05em; }

.btn-primary {
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-hover); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

.btn-light {
  background: var(--white);
  color: var(--navy);
}
.btn-light:hover { color: var(--blue); }

.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); border-color: var(--white); }

/* ==========================================================================
   3. Header fixe
   ========================================================================== */
/* Barre supérieure fixe (header horizontal) — logo à gauche, nav + CTA à droite. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1200px, 94%);
}

.logo { display: flex; align-items: center; gap: 13px; }
.logo-mark {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--navy);
}
.logo-mark svg { width: 26px; height: 26px; }
.logo-text { line-height: 1.15; }
.logo-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.logo-text small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
}

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav li a {
  display: block;
  padding: 9px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius);
  position: relative;
  transition: color var(--transition);
}
.main-nav li a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.main-nav li a:hover { color: var(--blue); }
.main-nav li a:hover::after,
.main-nav li.current-menu-item > a::after,
.main-nav li.current_page_item > a::after { transform: scaleX(1); }
.main-nav li.current-menu-item > a,
.main-nav li.current_page_item > a { color: var(--blue); }

.nav-cta { padding: 11px 22px; font-size: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  padding: 10px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Mobile/tablette : la navigation passe en tiroir latéral. --- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 100px 30px 40px;
    box-shadow: var(--shadow-lg);
    transform: translateX(105%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    z-index: -1;
  }
  .nav-open .main-nav { transform: none; }
  .main-nav ul { flex-direction: column; align-items: flex-start; width: 100%; gap: 2px; }
  .main-nav li { width: 100%; }
  .main-nav li a { border-radius: 0; border-bottom: 1px solid var(--line); padding: 13px 4px; font-size: 1.06rem; }
  .main-nav li a::after { display: none; }
  .nav-cta { margin-top: 18px; }

  /* Voile assombri derrière le tiroir de navigation. */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 27, 40, 0.55);
  }
  .nav-open { overflow: hidden; }
}

/* ==========================================================================
   4. Hero éditorial (accueil) — titre serif centré sur fond vidéo voilé
   ========================================================================== */
.hero {
  /* Sens du voile : inversé en arabe (voir la surcharge RTL dans inc/i18n.php),
     pour qu'il reste dense du côté du texte quelle que soit la langue. */
  --veil-dir: 90deg;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  min-height: clamp(560px, 100svh, 860px);
  padding: calc(var(--header-h) + 60px) 0 84px;
  background: var(--bg);
}

/* Fond vidéo du hero (repli automatique sur le poster si la vidéo est absente
   ou si la lecture n'est pas déclenchée : prefers-reduced-motion, mode économie
   de données. Le JS n'injecte `src` que dans les cas favorables — voir main.js). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--blue-tint);
}
.hero-bg video,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Voile clair : dense du côté du texte, il s'efface vers l'autre bord pour
   laisser la vidéo pleinement visible. Le dégradé vertical referme sur le fond
   de page en bas, ce qui soude le hero à la section suivante. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--veil-dir),
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.90) 36%,
      rgba(255, 255, 255, 0.55) 66%,
      rgba(255, 255, 255, 0.20) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.04) 20%,
      rgba(255, 255, 255, 0.04) 62%,
      var(--bg) 100%);
}

.kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  border-left: 2px solid var(--blue);
  padding-left: 14px;
  margin-bottom: 18px;
}
.section-deep .kicker,
.page-hero .kicker {
  color: var(--blue-on-dark);
  border-color: var(--blue-on-dark);
}

/* Bloc texte aligné sur le bord de départ (gauche en français, droite en arabe :
   `start` et `margin-inline` se retournent seuls avec dir="rtl"). */
.hero-inner {
  position: relative;
  max-width: 640px;
  margin-inline: 0 auto;
  text-align: start;
}
/* Sur fond vidéo, le bleu d'accent et le gris de texte sont assombris d'un cran :
   le voile laisse volontairement voir la vidéo, il faut donc que ces deux
   couleurs tiennent le contraste AA sur les plans les plus sombres. */
.hero-inner .kicker { color: var(--blue-on-media); border-color: var(--blue-on-media); }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--blue-on-media); }
.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-on-media);
  max-width: 560px;
  margin: 0 0 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-bottom: 26px; }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: flex-start;
  padding: 0; margin: 0; list-style: none;
}
.hero-badges li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; font-weight: 500; color: var(--ink);
}
.hero-badges svg { width: 19px; height: 19px; flex: none; color: var(--blue); }

/* Cadre photo générique (réutilisé sur les pages intérieures : split, à propos…) */
.photo-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background: var(--blue-tint);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Carte contact navy posée sur la vidéo, sous le bloc texte */
.hero-contact {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  max-width: 400px;
  margin: 42px 0 0;
  background: var(--navy);
  color: var(--white);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-contact .ic {
  display: grid; place-items: center;
  color: var(--blue-on-dark);
  flex: none;
}
.hero-contact .ic svg { width: 22px; height: 22px; }
.hero-contact a {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--white);
}
.hero-contact a:hover { color: var(--blue-on-dark); }
.hero-contact small { color: rgba(255, 255, 255, 0.75); font-size: 0.82rem; }

/* ==========================================================================
   5. Sections génériques
   ========================================================================== */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-alt); }
.section-deep {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
}
.section-deep h2, .section-deep h3 { color: var(--white); }

.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { border-left: none; padding-left: 0; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.section-deep .section-head p { color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   6. Cartes services
   ========================================================================== */
/* Grille « réglée » : les filets sont dessinés par les interstices de 1px
   sur fond --line, ce qui reste correct à 3, 2 ou 1 colonnes. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card {
  background: var(--white);
  border: 0;
  border-radius: 0;
  padding: 36px 30px;
  position: relative;
  transition: background var(--transition);
}
.service-card:hover { background: var(--bg-alt); }

.service-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--blue);
  margin-bottom: 22px;
  transition: border-color var(--transition);
}
.service-card:hover .service-icon { border-color: var(--blue); }
.service-icon svg { width: 24px; height: 24px; }

.service-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 0.97rem; margin-bottom: 16px; }
.card-link {
  font-weight: 500; font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 7px;
}
.card-link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.card-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   7. Split (texte + image), features, stats
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.split .photo-frame { aspect-ratio: 4 / 4.6; }

.checklist { list-style: none; padding: 0; margin: 0 0 30px; }
.checklist li {
  display: flex; gap: 13px;
  padding: 9px 0;
  color: var(--ink);
}
.checklist svg { width: 21px; height: 21px; flex: none; margin-top: 4px; color: var(--blue); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.feature {
  background: transparent;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding: 26px 0 0;
}
.feature .num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-on-dark);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 14px;
}
.feature h3 { font-size: 1.12rem; margin-bottom: 10px; }
.feature p { font-size: 0.93rem; margin: 0; color: rgba(255, 255, 255, 0.72); }

.stats-band {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 70px;
  margin-top: 60px;
  padding-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
}
.stat strong {
  display: block;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.stat span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   8. Blog
   ========================================================================== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}
.post-card:hover { border-color: var(--blue); }
.post-card-media {
  aspect-ratio: 16 / 9;
  background: var(--navy);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  min-height: 0;
}
.post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.post-card-media svg { width: 44px; height: 44px; opacity: 0.9; }
.post-card-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.post-meta {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.post-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--blue); }
.post-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }

/* Vidéo YouTube intégrée */
.video-embed {
  max-width: 880px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy);
  line-height: 0;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Avis des patients */
.avis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.avis-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition);
}
.avis-card:hover { border-color: var(--blue); }
.avis-card p { margin: 0; color: var(--muted); font-size: 0.97rem; flex: 1; }
.avis-card .who { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.avis-card .who small { display: block; color: var(--muted); font-weight: 400; font-size: 0.8rem; margin-top: 2px; }

.stars { display: inline-flex; gap: 3px; color: var(--blue); }
.stars svg { width: 17px; height: 17px; }
.stars svg.off { color: var(--line); }

@media (max-width: 1024px) {
  .avis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .avis-grid { grid-template-columns: 1fr; }
}

/* Article single */
.article-wrap { max-width: 760px; margin-inline: auto; }
.article-wrap .prose h2 { margin-top: 1.6em; }
.article-back { margin-top: 50px; }

/* « Pourquoi nous choisir » — cartes raison (icône + titre + texte) */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-card { background: var(--white); padding: 34px 30px; transition: background var(--transition); }
.why-card:hover { background: var(--bg-alt); }
.why-card .service-icon { margin-bottom: 20px; }
.why-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.why-card p { color: var(--muted); font-size: 0.96rem; margin: 0; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* Avis façon Google (bandeau note + cartes) */
.google-reviews { max-width: 1000px; margin-inline: auto; }
.g-badge { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 28px; margin-bottom: 30px; }
.g-badge .g-logo { width: 30px; height: 30px; flex: none; }
.g-badge .g-rate { font-family: var(--font-heading); font-weight: 700; font-size: 1.9rem; color: var(--ink); line-height: 1; }
.g-badge .g-stars { display: inline-flex; gap: 2px; }
.g-badge .g-stars svg { width: 20px; height: 20px; color: #fbbc04; }
.g-badge .g-meta { font-size: 0.92rem; color: var(--muted); }
.g-badge .g-meta strong { color: var(--ink); font-weight: 600; }
.g-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-review { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.g-review-head { display: flex; align-items: center; gap: 12px; }
.g-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; color: var(--white); font-size: 1.05rem; flex: none; }
.g-review-head .g-who { font-weight: 600; color: var(--ink); font-size: 0.96rem; line-height: 1.2; }
.g-review-head .g-date { font-size: 0.8rem; color: var(--muted); }
.g-review-head .g-logo { margin-inline-start: auto; width: 18px; height: 18px; flex: none; }
.g-review .g-stars { display: inline-flex; gap: 2px; }
.g-review .g-stars svg { width: 16px; height: 16px; color: #fbbc04; }
.g-review p { margin: 0; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .g-reviews-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Bande CTA
   ========================================================================== */
.section-cta {
  background: var(--navy);
  padding: 70px 0;
}
.section-cta .cta-band {
  background: none;
  border-radius: 0;
  padding: 0;
}
.cta-band {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: var(--white);
}
.cta-band h2 { color: var(--white); margin-bottom: 10px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-band p { margin: 0; color: rgba(255, 255, 255, 0.8); }
.cta-band .phone-big { white-space: nowrap; }

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.phone-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
}
.phone-big:hover { color: var(--blue-on-dark); }
.phone-big svg { width: 24px; height: 24px; color: var(--blue-on-dark); }

/* ==========================================================================
   10. Page hero intérieur
   ========================================================================== */
.page-hero {
  padding: calc(var(--header-h) + 44px) 0 60px;
  background: var(--navy);
  color: var(--white);
}
.page-hero h1 { color: var(--white); margin-bottom: 12px; font-size: clamp(2rem, 4vw, 2.9rem); }
.page-hero p { color: rgba(255, 255, 255, 0.78); max-width: 640px; margin: 0; font-size: 1.08rem; }

.breadcrumbs {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.breadcrumbs a { color: rgba(255, 255, 255, 0.85); }
.breadcrumbs a:hover { color: var(--blue-on-dark); }

/* ==========================================================================
   11. Contenu riche (prose), timeline, FAQ, tableaux
   ========================================================================== */
.prose { max-width: 760px; }
.prose h2 {
  font-size: 1.55rem;
  margin-top: 2em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
  display: inline-block;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose ul li { margin-bottom: 8px; }
.prose blockquote {
  margin: 2em 0;
  padding: 26px 30px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--navy);
}
.prose blockquote p:last-child { margin-bottom: 0; }

.timeline { list-style: none; padding: 0; margin: 40px 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.timeline li { position: relative; padding: 0 0 34px 48px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute; left: 3px; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
}
.timeline strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.timeline p { color: var(--muted); margin: 0; font-size: 0.97rem; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  position: relative;
  transition: border-color var(--transition);
}
.step:hover { border-color: var(--blue); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue);
  display: block;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { font-size: 0.93rem; color: var(--muted); margin: 0; }

.faq { max-width: 800px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq details[open] { border-color: var(--blue); }
.faq summary {
  cursor: pointer;
  padding: 20px 56px 20px 26px;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--navy);
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--blue);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-body { padding: 0 26px 22px; color: var(--muted); }

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 30px 0;
}
.price-table th, .price-table td {
  padding: 17px 24px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.price-table th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 0.88rem;
  text-transform: uppercase;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table td:last-child { font-weight: 600; color: var(--navy); white-space: nowrap; }

.note {
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--blue-tint);
  border-radius: var(--radius);
  padding: 16px 22px;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 24px 0; }
.pill-list li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
}

/* Domaines de services détaillés */
.domain {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  margin-bottom: 24px;
  transition: border-color var(--transition);
}
.domain:hover { border-color: var(--blue); }
.domain .service-icon { margin-bottom: 0; }
.domain h3 { font-size: 1.3rem; margin-bottom: 8px; }
.domain p { color: var(--muted); }
.domain ul {
  columns: 2; column-gap: 40px;
  list-style: none; padding: 0; margin: 14px 0 0;
}
.domain ul li {
  padding: 6px 0 6px 26px;
  position: relative;
  break-inside: avoid;
  font-size: 0.96rem;
}
.domain ul li::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 14px; height: 2px;
  background: var(--blue);
}

/* ==========================================================================
   12. Formulaire
   ========================================================================== */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 46px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink);
}
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  padding: 14px 17px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 102, 173, 0.18);
}
.field textarea { resize: vertical; min-height: 140px; }

.form-notice {
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 28px;
  font-weight: 500;
}
.form-notice.ok { background: #e8f5ec; color: #1d6b3a; border: 1px solid #bfe3cb; }
.form-notice.err { background: #fdeeee; color: #a13434; border: 1px solid #f2cccc; }

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

.rdv-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.info-card {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}
.info-card h3 { color: var(--white); font-size: 1.3rem; }
.info-card .phone-big { font-size: 1.45rem; margin: 14px 0 26px; }
.info-card hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.18); margin: 26px 0; }
.info-card .mini-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-on-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.info-card p { margin-bottom: 10px; font-size: 0.97rem; }
.info-card a { color: var(--white); }
.info-card a:hover { color: var(--blue-on-dark); }

/* ==========================================================================
   13. Contact & carte
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 50px;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  text-align: center;
  transition: border-color var(--transition);
}
.contact-card:hover { border-color: var(--blue); }
.contact-card .service-icon { margin: 0 auto 18px; }
.contact-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.contact-card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 6px; }
.contact-card a { font-weight: 500; }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 440px; border: 0; }

.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.access-item {
  display: flex; gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.access-item svg { width: 26px; height: 26px; flex: none; color: var(--blue); margin-top: 3px; }
.access-item strong { display: block; color: var(--navy); margin-bottom: 4px; }
.access-item span { font-size: 0.92rem; color: var(--muted); }

/* ==========================================================================
   14. Réseaux sociaux
   ========================================================================== */
.social-links { display: flex; gap: 12px; list-style: none; padding: 0; margin: 0; }
.social-links a {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-links a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.social-links svg { width: 19px; height: 19px; }

.social-links.on-light a {
  background: var(--blue-tint);
  border-color: var(--line);
  color: var(--blue);
}
.social-links.on-light a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ==========================================================================
   15. Footer
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  padding: 80px 0 0;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 60px;
}
.footer-brand .logo-text strong { color: var(--white); }
.footer-brand .logo-mark { background: rgba(255, 255, 255, 0.1); }
.footer-brand p { font-size: 0.95rem; margin: 20px 0 24px; max-width: 320px; }

.site-footer h4 {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; gap: 10px; }
.footer-list a { color: rgba(255, 255, 255, 0.72); }
.footer-list a:hover { color: var(--blue-on-dark); }
.footer-list svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--blue-on-dark); }

.footer-hours li { justify-content: space-between; border-bottom: 1px dashed rgba(255,255,255,0.14); padding-bottom: 10px; }
.footer-hours span:last-child { color: var(--blue-on-dark); font-weight: 500; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.72); }
.footer-bottom a:hover { color: var(--blue-on-dark); }

/* ==========================================================================
   15b. WhatsApp flottant & barre d'actions mobile
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition);
}
.whatsapp-fab:hover { box-shadow: var(--shadow-lg); color: #fff; }
.whatsapp-fab svg { width: 30px; height: 30px; }

.mobile-cta-bar { display: none; }

@media (max-width: 860px) {
  body { padding-bottom: 58px; }

  .mobile-cta-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--navy);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 24px rgba(15, 27, 40, 0.28);
  }
  .mobile-cta-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 6px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .mobile-cta-bar a + a { border-left: 1px solid rgba(255, 255, 255, 0.14); }
  .mobile-cta-bar svg { width: 19px; height: 19px; color: var(--blue-on-dark); flex: none; }
  .mobile-cta-bar a.wa svg { color: #25d366; }

  .whatsapp-fab {
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
  .whatsapp-fab svg { width: 27px; height: 27px; }

  /* Masqués quand le tiroir de navigation est ouvert */
  .nav-open .whatsapp-fab,
  .nav-open .mobile-cta-bar { display: none; }
}

/* ==========================================================================
   16. Animations (reveal au scroll)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.06s; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.18s; }
.reveal.d4 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .services-grid, .posts-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .rdv-layout { grid-template-columns: 1fr; }
  .domain ul { columns: 1; }
}

@media (max-width: 860px) {
  /* Navigation (barre supérieure + tiroir) et voile : gérés dans la section 3. */
  /* Hero vidéo : le bloc texte occupe presque toute la largeur, on densifie le
     voile pour garder le contraste AA par-dessus les plans les plus clairs. */
  .hero { padding: calc(var(--header-h) + 44px) 0 60px; }
  /* En mobile le texte occupe toute la largeur : le voile latéral n'a plus de
     sens, on repasse sur un voile quasi uniforme, dense derrière le texte. */
  .hero-veil {
    background:
      linear-gradient(var(--veil-dir),
        rgba(255, 255, 255, 0.90) 0%,
        rgba(255, 255, 255, 0.86) 60%,
        rgba(255, 255, 255, 0.74) 100%),
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.06) 20%,
        rgba(255, 255, 255, 0.06) 62%,
        var(--bg) 100%);
  }
  .hero-inner { max-width: none; }
  .hero-contact { margin-top: 36px; max-width: 100%; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .section { padding: 64px 0; }
  .section-cta { padding: 56px 0; }
  .cta-band { flex-direction: column; text-align: center; padding: 46px 30px; }
  .section-cta .cta-band { padding: 0; }
  .domain { grid-template-columns: 1fr; gap: 18px; }
  .form-card { padding: 30px 24px; }
  .access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .services-grid, .posts-grid, .contact-grid, .features-grid, .steps-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .stats-band { flex-direction: column; gap: 28px; }
  .logo-text small { display: none; }
  .map-embed iframe { height: 320px; }
  .price-table th, .price-table td { padding: 13px 14px; font-size: 0.92rem; }
  .post-card-media { aspect-ratio: auto; height: 200px; }
}

/* ==========================================================================
   18. Divers WordPress
   ========================================================================== */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}