/*
Theme Name: La Vigie
Theme URI: https://lavigie.studio
Author: Anthony Quesada
Description: Thème sur mesure pour La Vigie, studio web & communication.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lavigie
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --navy:#0E2A47;
  --navy-deep:#0A2038;
  --amber:#F5B544;
  --amber-strong:#E39E2B;
  --bg:#F8F7F4;
  --white:#FFFFFF;
  --ink:#14181F;
  --muted:#5A6473;
  --muted-2:#8A857C;
  --line:#ECE8DF;
  --navy-soft:#C3CDDB;

  --maxw:1240px;
  --font-head:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;

  --halo:radial-gradient(110% 80% at 50% 0%, rgba(245,181,68,.20), rgba(14,42,71,0) 55%);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-head); letter-spacing:-.02em; line-height:1.1; margin:0; }
p{ margin:0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container{ max-width:var(--maxw); margin:0 auto; padding-left:64px; padding-right:64px; }
.section{ padding:96px 0; background:var(--bg); }
.section--white{ background:var(--white); }
.section--navy{ background:var(--navy); color:var(--bg); background-image:var(--halo); }

.eyebrow{
  font-family:var(--font-head); font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin:0;
}
.h2{ font-size:40px; font-weight:600; color:var(--ink); max-width:760px; }
.section--navy .h2{ color:var(--bg); }
.lead{ font-size:18px; line-height:1.65; color:var(--muted); margin-top:22px; max-width:800px; }
.section--navy .lead{ color:var(--navy-soft); }
.signature{ font-family:var(--font-body); font-style:italic; font-weight:500; color:var(--amber); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block; font-weight:700; font-size:16px; text-decoration:none;
  padding:16px 28px; border-radius:11px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--amber{ background:var(--amber); color:var(--navy); box-shadow:0 10px 26px rgba(245,181,68,.28); }
.btn--amber:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(245,181,68,.36); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn--ghost:hover{ background:var(--navy); color:var(--bg); }
.btn--block{ display:block; text-align:center; }
.btn--sm{ font-size:14px; padding:13px 22px; }

/* ============================================================
   HEADER (collant)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(248,247,244,.92); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{ height:78px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ height:26px; width:auto; }
.brand .brand-name{ font-family:var(--font-head); font-size:21px; font-weight:600; color:var(--navy); }
.nav{ display:flex; align-items:center; gap:38px; }
.nav a{ font-size:15px; color:var(--ink); text-decoration:none; font-weight:500; }
.nav a:hover{ color:var(--navy); }
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--navy); color:var(--bg); background-image:radial-gradient(110% 80% at 78% -10%, rgba(245,181,68,.20), rgba(14,42,71,0) 55%); padding:88px 0 96px; }
.hero-grid{ display:flex; gap:60px; align-items:center; flex-wrap:wrap; }
.hero-col{ flex:1 1 460px; }
.hero h1{ font-size:55px; font-weight:600; color:var(--bg); margin-top:20px; }
.hero .lead{ color:var(--navy-soft); }
.hero .signature{ font-size:23px; margin-top:28px; display:block; }
.hero .btn{ margin-top:32px; }
.hero .micro{ font-size:13px; color:#8E9BAC; margin-top:17px; max-width:430px; }

/* hero visual — cadres device */
.hero-visual{ flex:1 1 400px; position:relative; min-height:360px; }
.device{ background:var(--navy-deep); border:1px solid #1F4063; border-radius:12px; padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.4); }
.device-dots{ display:flex; gap:5px; padding:0 4px 10px; }
.device-dots span{ width:7px; height:7px; border-radius:50%; background:#33506F; }
.device img{ border-radius:7px; display:block; width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; }
/* Desktop : téléphone superposé en bas à droite du mockup desktop (les deux visibles). */
.device--phone{ position:absolute; right:-10px; bottom:-34px; width:128px; border-radius:18px; padding:8px; box-shadow:0 24px 44px rgba(0,0,0,.5); }
.device--phone img{ border-radius:12px; display:block; width:100%; height:100%; aspect-ratio:390/844; object-fit:cover; object-position:top center; }

/* ============================================================
   PROBLÈME
   ============================================================ */
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; }
.problem-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:32px; }
.problem-card .card-ico{ display:block; width:40px; height:40px; margin-bottom:22px; }
.problem-card p{ font-size:17px; line-height:1.5; color:var(--ink); font-weight:500; }

/* ============================================================
   SOLUTION
   ============================================================ */
.profiles{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
.profile{ display:flex; align-items:center; gap:20px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.profile img, .profile .ph{ flex:0 0 auto; width:84px; height:84px; border-radius:50%; object-fit:cover; border:1px solid #E0DBD0; }
.profile .name{ font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--navy); }
.profile .role{ font-size:14px; color:var(--muted); margin-top:3px; }
.profile .tag{ font-size:13px; color:var(--muted-2); margin-top:7px; }
.profile-social{ margin-top:11px; }
.social-ln{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--white); color:var(--navy); transition:color .2s ease, border-color .2s ease; }
.social-ln svg{ width:17px; height:17px; fill:currentColor; display:block; }
.social-ln:hover{ color:var(--amber); border-color:var(--amber); }
.social-ln:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:54px; }
.pillar{ border-top:2px solid var(--amber); padding:26px 4px 0; }
.pillar .pillar-ico{ display:block; width:48px; height:48px; margin-bottom:18px; }
.pillar .ttl{ font-family:var(--font-head); letter-spacing:.14em; font-size:14px; font-weight:600; color:var(--navy); text-transform:uppercase; }
.pillar p{ font-size:16px; line-height:1.55; color:var(--muted); margin-top:12px; }

/* ============================================================
   OFFRES
   ============================================================ */
.offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; margin-top:54px; }
.offer{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:36px 32px; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(14,42,71,.05); transition:transform .2s ease, box-shadow .2s ease; }
.offer .kicker{ font-family:var(--font-head); letter-spacing:.14em; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; }
.offer .price{ font-family:var(--font-head); font-size:30px; font-weight:600; color:var(--navy); margin-top:14px; }
.offer .price small{ font-size:17px; color:var(--muted-2); font-weight:500; }
.offer p{ font-size:15px; line-height:1.6; color:var(--muted); margin-top:18px; flex:1; }
.offer .btn{ margin-top:28px; }
.offer--featured{ background:var(--navy); color:var(--bg); position:relative; border-top:3px solid var(--amber); box-shadow:0 26px 50px rgba(14,42,71,.28); transform:translateY(-12px) scale(1.02); background-image:radial-gradient(120% 70% at 50% 0%, rgba(245,181,68,.16), rgba(14,42,71,0) 60%); }
/* Survol des cartes : ordinateur uniquement (pas sur écrans tactiles). */
@media (hover:hover) and (pointer:fine){
  .offer:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,42,71,.12); }
  .offer--featured:hover{ transform:translateY(-16px) scale(1.02); box-shadow:0 34px 62px rgba(14,42,71,.32); }
}
.offer--featured .kicker{ color:var(--amber); }
.offer--featured .price{ color:var(--bg); }
.offer--featured p{ color:var(--navy-soft); }
.badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--amber); color:var(--navy); font-weight:700; font-size:12px; padding:7px 16px; border-radius:20px; white-space:nowrap; }
/* Liste de bénéfices (carte Vigie 360 mise en avant) */
.offer .offer-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.offer--featured p{ flex:0 0 auto; }
.offer .offer-list li{ position:relative; padding-left:26px; font-size:14px; line-height:1.5; color:var(--navy-soft); }
.offer .offer-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--amber); font-weight:700; }

.offers-note{ text-align:center; font-size:16px; color:var(--muted); margin-top:38px; }
.offers-note a{ color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:3px; }

/* ============================================================
   ÉTAPES
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:54px; }
.step .num{ font-family:var(--font-head); font-size:46px; font-weight:600; color:var(--amber); line-height:1; }
.step .ttl{ font-family:var(--font-head); letter-spacing:.12em; font-size:14px; font-weight:600; color:var(--navy); text-transform:uppercase; margin-top:18px; }
.step p{ font-size:16px; line-height:1.58; color:var(--muted); margin-top:12px; }

/* ============================================================
   RÉFÉRENCES
   ============================================================ */
.logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 40px; margin-top:46px; }
.logos img{ height:32px; width:auto; opacity:.6; filter:saturate(0); }
.logos .txt{ font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--navy); opacity:.62; }
.refs-line{ text-align:center; font-size:16px; line-height:1.6; color:var(--muted); margin:36px auto 0; max-width:680px; }
#realisations .refs-line{ margin-top:28px; }
#realisations .reali-grid,
#realisations .refs{ margin-top:44px; }
.refs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:46px; }
.refs-cta{ text-align:center; margin-top:36px; }
.ref figure{ margin:0; }
.ref img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; border:1px solid var(--line); box-shadow:0 12px 30px rgba(14,42,71,.10); transition:box-shadow .15s ease; }
.ref a{ display:block; color:inherit; text-decoration:none; transition:transform .15s ease; }
.ref a:hover{ transform:translateY(-4px); }
.ref a:hover img{ box-shadow:0 18px 40px rgba(14,42,71,.18); }
.ref figcaption{ font-family:var(--font-head); font-size:11px; letter-spacing:.05em; color:#9A958C; margin-top:13px; text-transform:uppercase; }
.testimonials{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:24px; margin-top:50px; }
.testimonial{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:34px; }
.testimonial blockquote{ font-style:italic; font-size:19px; line-height:1.55; color:var(--ink); margin:0; }
.testimonial .who{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.testimonial .who img, .testimonial .who .ph{ width:42px; height:42px; border-radius:50%; background:#E7E3DA; object-fit:cover; }
.testimonial .who .n{ font-size:15px; font-weight:600; color:var(--navy); }
.testimonial .who .r{ font-size:13px; color:var(--muted-2); }

/* ============================================================
   CTA FINALE
   ============================================================ */
.final-cta{ text-align:center; }
.final-cta .h2{ max-width:760px; margin:0 auto; font-size:42px; }
.final-cta .lead{ margin-left:auto; margin-right:auto; }
.final-cta .btn{ margin-top:34px; }
.final-cta .micro{ font-size:14px; color:#8E9BAC; margin-top:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:var(--navy-soft); padding:54px 0; }
.site-footer .container{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
.site-footer .brand-name{ color:var(--bg); }
.site-footer img{ height:24px; }
.site-footer .baseline{ font-size:14px; color:#8E9BAC; margin-top:10px; }
.site-footer .signature{ font-size:16px; margin-top:18px; display:block; }
.foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.foot-cols h4{ font-size:13px; color:#5F718A; margin:0 0 12px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.foot-cols a{ display:block; font-size:15px; color:var(--navy-soft); text-decoration:none; margin-bottom:8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .container{ padding-left:40px; padding-right:40px; }
  .hero h1{ font-size:44px; }
  .h2, .final-cta .h2{ font-size:32px; }
}
@media (max-width:760px){
  .container{ padding-left:22px; padding-right:22px; }
  .section{ padding:46px 0; }
  .hero{ padding:40px 0 56px; }
  .hero h1{ font-size:31px; }
  .hero .signature{ font-size:18px; }
  .hero-grid{ gap:34px; }
  .hero-visual{ min-height:0; width:100%; }
  /* Sur mobile : on n'affiche QUE le visuel mobile (jamais les deux). */
  .hero-visual .device{ display:none; }
  .hero-visual .device--phone{ display:block; position:static; width:72%; max-width:300px; margin:0 auto; }

  .cols-3, .pillars, .offers, .steps, .refs, .testimonials, .profiles, .reali-grid{ grid-template-columns:1fr; }
  /* Téléphone superposé un peu plus compact sur petits écrans, mais toujours visible. */
  .reali-phone{ width:28%; max-width:104px; right:-2px; bottom:-10px; }
  .offer--featured{ transform:none; }
  .h2, .final-cta .h2{ font-size:26px; }
  .lead{ font-size:15px; }

  /* nav repliée */
  .nav{ position:absolute; top:78px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 22px 16px; display:none; }
  .nav.is-open{ display:flex; }
  .nav a{ padding:12px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav .btn{ margin-top:12px; width:100%; text-align:center; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:24px; height:2px; background:var(--navy); border-radius:2px; }
}

/* ============================================================
   PAGES SECONDAIRES
   ============================================================ */

/* En-tête de page (bandeau navy) */
.page-hero{ background:var(--navy); color:var(--bg); background-image:var(--halo); padding:66px 0; }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{ font-size:46px; color:var(--bg); max-width:720px; }
.page-hero p{ font-size:18px; line-height:1.6; color:var(--navy-soft); margin-top:18px; max-width:680px; }

/* Filtres (chips) */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.chip{ font-family:inherit; line-height:1.2; font-size:14px; font-weight:500; color:var(--muted); background:var(--white); border:1px solid #e4e0d7; padding:9px 18px; border-radius:30px; cursor:pointer; text-decoration:none; }
.chip.is-active{ background:var(--navy); color:var(--bg); font-weight:600; border-color:var(--navy); }

/* Portfolio */
.work{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.work-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.work-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(14,42,71,.12); }
.work-card .shot{ display:block; width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; }
.work-card a{ display:block; color:inherit; text-decoration:none; }

/* ============================================================
   CARTES RÉALISATIONS — visuel signature « desktop + téléphone »
   (composant template-parts/card-realisation.php, accueil + page)
   ============================================================ */
.reali-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 380px)); justify-content:center; column-gap:60px; row-gap:64px; margin-top:48px; }
.reali-card{ display:block; color:inherit; text-decoration:none; padding-bottom:22px; }

/* Mockup léger : cadre clair, bezel fin, barre de points discrète + téléphone superposé. */
.reali-visual{ position:relative; }
.reali-desktop{ background:var(--navy); border:2px solid var(--navy); border-radius:10px; padding:6px; overflow:hidden; box-shadow:0 4px 16px rgba(14,42,71,.10); }
.reali-dots{ display:flex; align-items:center; gap:5px; height:22px; padding:0 4px; }
.reali-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); }
.reali-screen{ border-radius:6px; overflow:hidden; aspect-ratio:16/10; }
.reali-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .35s ease; }
.reali-phone{ position:absolute; right:-4px; bottom:-10px; width:24%; max-width:110px; aspect-ratio:780/1328; border-radius:14px; overflow:hidden; border:2px solid var(--navy); background:var(--navy); box-shadow:0 6px 16px rgba(14,42,71,.14); padding:2px; }
.reali-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; border-radius:11px; }
.reali-meta{ margin-top:16px; }
.reali-meta h3{ font-family:var(--font-head); font-weight:600; font-size:18px; line-height:1.3; color:var(--navy); margin:0; }
.reali-meta p{ font-size:.9rem; color:#6B7280; letter-spacing:.02em; line-height:1.5; margin-top:5px; }
a.reali-card{ transition:transform .2s ease; }
a.reali-card:hover .reali-screen img{ transform:scale(1.03); }
a.reali-card:hover .reali-desktop{ box-shadow:0 8px 22px rgba(14,42,71,.10); }
a.reali-card:focus-visible{ outline:3px solid var(--amber); outline-offset:4px; border-radius:14px; }
.work-card .body{ padding:22px; }
.work-card .title{ font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--navy); }
.work-card .sector{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#9A958C; margin-top:5px; }
.work-card p{ font-size:14px; line-height:1.5; color:var(--muted); margin-top:10px; }

/* Bande CTA */
.cta-band{ background:var(--navy); color:var(--bg); background-image:var(--halo); padding:64px 0; text-align:center; }
.cta-band h2{ font-size:30px; color:var(--bg); }
.cta-band p{ color:var(--navy-soft); margin-top:12px; }
.cta-band .btn{ margin-top:24px; }

/* Tableau comparatif (forfaits) */
.compare{ background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.compare table{ width:100%; border-collapse:collapse; }
.compare th, .compare td{ padding:16px 12px; text-align:center; border-top:1px solid #f0ece3; font-size:15px; color:var(--muted); }
.compare thead th{ font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--navy); background:var(--bg); border-top:0; padding:18px 12px; }
.compare thead th:first-child{ text-align:left; padding-left:24px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#9A958C; }
.compare tbody th{ text-align:left; padding-left:24px; color:var(--ink); font-weight:400; }
.compare .col-feat{ background:#FBFAF6; }
.compare .yes{ color:#2E7D52; font-weight:700; }
.compare .no{ color:#C9C3B6; }
.note-center{ text-align:center; font-size:14px; color:var(--muted-2); margin-top:20px; }

/* Formulaires */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:36px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-top:16px; }
.form-grid .field{ margin-top:0; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea{ width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg); border:1px solid #E0DBD0; border-radius:9px; padding:13px 14px; }
.form-card .field input, .form-card .field textarea{ background:#fff; }
.field textarea{ min-height:120px; resize:vertical; }
.form-card .btn{ margin-top:22px; width:100%; }
.form-note{ text-align:center; font-size:13px; color:var(--muted-2); margin-top:14px; }

/* Page Diagnostic gratuit (fond navy) */
.scan{ background:var(--navy); color:var(--bg); background-image:var(--halo); }
.scan .container{ padding-top:60px; padding-bottom:70px; }
.scan-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.scan-head h1{ font-size:42px; color:var(--bg); }
.scan-head p{ font-size:18px; line-height:1.6; color:var(--navy-soft); margin-top:16px; }
.scan-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start; }
.receive .lbl{ font-family:var(--font-head); font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.receive .item{ display:flex; gap:14px; align-items:flex-start; margin-top:22px; }
.receive .num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--amber); display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:13px; font-weight:700; }
.receive .item .t{ font-size:16px; font-weight:600; color:var(--bg); }
.receive .item .d{ font-size:14px; color:#9FB0C4; margin-top:3px; }
.receive .tags{ margin-top:30px; display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:#9FB0C4; }

/* Contact */
.split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:start; }
.contact-info .blk{ margin-top:20px; }
.contact-info .lbl{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#9A958C; font-weight:600; }
.contact-info .val{ font-size:18px; color:var(--navy); font-weight:600; margin-top:4px; }

/* Prose (mentions légales / pages texte) */
.prose{ max-width:720px; margin:0 auto; }
.prose h1{ font-size:40px; color:var(--ink); }
.prose .updated{ font-size:14px; color:var(--muted-2); margin-top:10px; }
.prose h2{ font-family:var(--font-head); font-size:20px; font-weight:600; color:var(--navy); margin-top:32px; }
.prose p{ font-size:16px; line-height:1.7; color:var(--muted); margin-top:10px; }

/* Responsive — pages secondaires */
@media (max-width:760px){
  .page-hero{ padding:40px 0; }
  .page-hero h1{ font-size:30px; }
  .scan-head h1{ font-size:28px; }
  .work, .scan-grid, .split, .form-grid{ grid-template-columns:1fr; }
  .compare{ overflow-x:auto; }
  .compare table{ min-width:560px; }
}

/* ============================================================
   ADDITIONS v2 — accessibilité + carte « pôle communication »
   (ajouté lors du calibrage stratégie)
   ============================================================ */

/* Accessibilité : focus clavier visible — utile pour les clients
   secteur public / exigences RGAA (argument de vente du studio). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:6px;
}

/* Respecte la préférence système « animations réduites ». */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .btn:hover{ transform:none !important; }
}

/* Carte « Pôle communication » : marque sans visage (reprend le logo :
   foyer ambre + ligne d'horizon), tant que la partenaire reste salariée. */
.profile--team .profile-mark{
  flex:0 0 auto; width:84px; height:84px; border-radius:50%;
  border:1px solid #1F4063; background:var(--navy); position:relative;
}
.profile--team .profile-mark::before{
  content:""; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #FFD884, #F5B544 58%, #E39E2B);
}
.profile--team .profile-mark::after{
  content:""; position:absolute; left:18%; right:18%; bottom:30%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(195,205,219,0), #C3CDDB 20%, #C3CDDB 80%, rgba(195,205,219,0));
}

/* Mur d'avis (captures de vrais avis Google) */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; }
.reviews .review{ margin:0; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.reviews .review img{ border-radius:8px; width:100%; height:auto; }
@media (max-width:760px){ .reviews{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; } }

/* ============================================================
   UTILITAIRES (accessibilité, recherche, pagination)
   ============================================================ */

/* Texte réservé aux lecteurs d'écran (standard WordPress). */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; overflow:hidden;
  position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--white); clip:auto !important; clip-path:none;
  color:var(--navy); display:block; height:auto; width:auto;
  left:8px; top:8px; padding:14px 22px; border-radius:8px;
  z-index:100000; box-shadow:0 6px 18px rgba(14,42,71,.2);
}

/* Pagination (recherche, archives). */
.pagination .nav-links,
.page-links{ display:inline-flex; flex-wrap:wrap; gap:8px; }
.pagination .page-numbers,
.page-links a,
.page-links > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:9px;
  font-family:var(--font-head); font-size:15px; font-weight:600;
  color:var(--navy); background:var(--white); text-decoration:none;
}
.pagination .page-numbers.current,
.page-links > span{ background:var(--navy); color:var(--bg); border-color:var(--navy); }

/* ============================================================
   CONTACT FORM 7 (héritage du style des formulaires du thème)
   ============================================================ */

/* Champs CF7 : même rendu que .field input/textarea, même hors wrapper .field. */
.form-card .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.form-card .wpcf7-form textarea,
.form-card .wpcf7-form select{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid #E0DBD0; border-radius:9px; padding:13px 14px;
}
.form-card .wpcf7-form textarea{ min-height:120px; resize:vertical; }
.form-card .wpcf7-form .field{ margin-top:16px; }
.form-card .wpcf7-form .form-grid .field{ margin-top:0; }

/* Bouton d'envoi (ajouter class:btn class:btn--amber au tag [submit]). */
.form-card .wpcf7-form .btn,
.form-card .wpcf7-form input[type="submit"]{ margin-top:22px; width:100%; }
.form-card .wpcf7-form input[type="submit"]{
  background:var(--amber); color:var(--navy); font-weight:700; font-size:16px;
  border:1.5px solid transparent; border-radius:11px; padding:16px 28px; cursor:pointer;
  box-shadow:0 10px 26px rgba(245,181,68,.28);
}

/* Messages de validation / réponse. */
.wpcf7-not-valid-tip{ color:#C0392B; font-size:13px; margin-top:6px; }
.form-card .wpcf7-form-control.wpcf7-not-valid{ border-color:#C0392B; }
.wpcf7 form .wpcf7-response-output{
  margin:18px 0 0; padding:13px 16px; border-radius:9px; font-size:14px;
  border:1px solid var(--line); background:var(--bg);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{ border-color:#E3B3AD; background:#FBEEEC; color:#8A2C20; }
.wpcf7 form.sent .wpcf7-response-output{ border-color:#B7DBC4; background:#EDF7F1; color:#1E6B43; }
.wpcf7-spinner{ background-color:var(--amber); }

/* ============================================================
   CALENDLY (page Diagnostic gratuit)
   ============================================================ */
.scan-booking{ padding:8px; overflow:hidden; }
.scan-booking .calendly-inline-widget{ border-radius:12px; overflow:hidden; }
@media (max-width:760px){
  .scan-booking .calendly-inline-widget{ height:560px !important; }
}

/* ============================================================
   BOUTON « RETOUR EN HAUT »
   ============================================================ */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); border:0; cursor:pointer; padding:0;
  box-shadow:0 4px 16px rgba(14,42,71,.12);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, box-shadow .2s ease, background .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:#13355A; box-shadow:0 8px 22px rgba(14,42,71,.16); }
.back-to-top:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }
.back-to-top svg{ display:block; }
@media (max-width:760px){ .back-to-top{ right:16px; bottom:16px; } }
@media print{ .back-to-top{ display:none !important; } }
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:opacity .2s ease; transform:none; }
  .back-to-top.is-visible{ transform:none; }
}

/* ============================================================
   BANDEAU COOKIES — habillage optionnel Complianz (charte navy/ambre)
   Activez/ajustez selon le rendu réel du plugin une fois installé.
   ============================================================ */
.cmplz-cookiebanner{ border-radius:14px !important; box-shadow:0 12px 30px rgba(14,42,71,.18) !important; }
.cmplz-cookiebanner .cmplz-header .cmplz-title{ font-family:var(--font-head); color:var(--navy); }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept{
  background:var(--amber); color:var(--navy); border-color:var(--amber);
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover{ background:var(--amber-strong); border-color:var(--amber-strong); }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{
  background:transparent; color:var(--navy); border:1px solid var(--navy);
}
.cmplz-cookiebanner a{ color:var(--navy); text-decoration-color:var(--amber); }

/* ============================================================
   PAGE VIGIE 360 — intro + comparatif (table desktop / fiches mobile)
   ============================================================ */
.v360-intro{
  max-width:760px; margin:0 auto 48px; text-align:center;
  font-size:18px; line-height:1.7; color:var(--muted);
}
.reco{
  display:inline-block; margin-left:8px; vertical-align:middle;
  background:var(--navy); color:#fff;
  font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:20px; text-transform:none;
}

/* ---- Tableau (ordinateur) ---- */
/* Le conteneur .compare fournit le cadre (fond blanc, bordure, coins arrondis). */
.compare--360 table{ width:100%; border-collapse:collapse; }
/* Barre d'en-tête navy pleine (coin compris) ; colonne mise en avant en ambre. */
.compare--360 thead th{
  font-family:var(--font-head); font-size:14px; font-weight:600; text-align:center;
  background:var(--navy); color:#fff; padding:16px 14px; border:0;
}
.compare--360 thead th:first-child{ text-align:left; }
.compare--360 thead th.col-feat{ background:var(--amber); color:var(--navy); }
.compare--360 tbody th[scope="row"]{
  text-align:left; padding:14px 16px 14px 24px; color:var(--ink); font-weight:400;
}
.compare--360 tbody td{ text-align:center; padding:14px; color:var(--muted); }
/* Zébrage discret pour la lisibilité. */
.compare--360 tbody tr:nth-child(even) th[scope="row"],
.compare--360 tbody tr:nth-child(even) td{ background:#FBFAF6; }
.compare--360 .price-row th[scope="row"]{ font-family:var(--font-head); color:var(--navy); font-weight:600; }
.compare--360 .price-row td{ font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--navy); }
.compare--360 .no{ color:#C9C3B6; }
/* Colonne « Croissance » détachée : teinte ambre + liserés verticaux continus. */
.compare--360 .col-feat{ border-left:1px solid rgba(227,158,43,.45); border-right:1px solid rgba(227,158,43,.45); }
.compare--360 td.col-feat{ background:rgba(245,181,68,.10); color:var(--ink); }
.compare--360 tbody tr:nth-child(even) td.col-feat{ background:rgba(245,181,68,.16); }
.compare--360 tbody tr:last-child td.col-feat{ border-bottom:1px solid rgba(227,158,43,.45); }

/* ---- Fiches par formule (mobile) ---- */
.v360-cards{ display:none; }
@media (max-width:760px){
  .compare--360{ display:none; }
  .v360-cards{ display:grid; gap:18px; margin-top:8px; }
  .v360-card{
    background:var(--white); border:1px solid var(--line); border-radius:16px;
    padding:22px 22px 24px; box-shadow:0 1px 3px rgba(14,42,71,.05);
  }
  .v360-card--feat{
    border-color:var(--amber); border-top:3px solid var(--amber);
    box-shadow:0 14px 30px rgba(14,42,71,.10);
  }
  .v360-card .v-reco{
    display:inline-block; background:var(--amber); color:var(--navy);
    font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 10px;
    border-radius:20px; margin-bottom:10px;
  }
  .v360-card .v-name{ font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--navy); }
  .v360-card .v-price{ font-family:var(--font-head); font-size:24px; font-weight:600; color:var(--navy); margin-top:2px; }
  .v360-card .v-for{ font-size:13px; color:var(--muted-2); margin-top:5px; }
  .v360-card ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .v360-card li{ position:relative; padding-left:26px; font-size:14px; line-height:1.5; color:var(--muted); }
  .v360-card li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--amber); font-weight:700; }
  .v360-card li.is-no{ color:var(--muted-2); }
  .v360-card li.is-no::before{ content:"–"; color:#C9C3B6; }
  .v360-card li .v-crit{ font-weight:600; color:var(--ink); }
}

/* ============================================================
   FAQ (accueil) — <details>/<summary> natifs, charte navy/ambre
   ============================================================ */
.faq-list{ max-width:760px; margin:48px auto 0; }
.faq-item{
  border:1px solid var(--line); border-radius:14px; background:var(--white);
  padding:0 24px; margin-top:14px;
  box-shadow:0 1px 3px rgba(14,42,71,.05);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open]{ border-color:#E0DBD0; box-shadow:0 8px 22px rgba(14,42,71,.08); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--font-head); font-size:18px; font-weight:600; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{ outline:3px solid var(--amber); outline-offset:4px; border-radius:8px; }
.faq-q{ flex:1 1 auto; }
.faq-icon{
  flex:0 0 auto; position:relative; width:20px; height:20px;
}
.faq-icon::before,
.faq-icon::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--amber);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.faq-icon::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.faq-a{
  margin:0; padding:0 0 24px; max-width:680px;
  font-size:16px; line-height:1.7; color:var(--muted);
}
@media (max-width:760px){
  .faq-list{ margin-top:32px; }
  .faq-item{ padding:0 18px; }
  .faq-item summary{ font-size:16px; padding:18px 0; }
}

/* ============================================================
   ADDITIONS v3 — refonte offres (Visibilité, Site sur mesure,
   menu déroulant « Offres », grille 4 cartes, encadrés)
   ============================================================ */

/* Sous-ligne d'en-tête de page (précision d'audience). */
.page-hero-sub{ font-size:15px; color:#8E9BAC; margin-top:14px; }

/* Encadré générique : carte blanche, liseré ambre. */
.callout{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:14px; padding:26px 30px; margin-top:44px;
  box-shadow:0 1px 3px rgba(14,42,71,.05);
}
.callout p{ font-size:16px; line-height:1.65; color:var(--muted); }
.callout a{ color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:3px; }

/* Variante centrée (encadré de clarification Vigie 360). */
.callout--center{ max-width:760px; margin:0 auto 48px; }

/* Variante ambre clair (encadré mis en avant, ex. équation Vigie 360). */
.callout--amber{
  background:rgba(245,181,68,.12); border-color:rgba(227,158,43,.45);
  border-left-color:var(--amber);
}
.callout--amber p{ color:var(--ink); }
.callout--amber strong{ color:var(--navy); }

/* ============================================================
   ADDITIONS v4 — grille réalisations accueil, avis dépliables,
   garde-fous cartes d'offres
   ============================================================ */

/* Accueil : 3 réalisations en 3 colonnes égales (1 colonne < 768 px). */
.reali-grid--3{
  grid-template-columns:repeat(3, minmax(0,1fr));
  justify-content:stretch;
  column-gap:32px; row-gap:48px;
}
@media (max-width:768px){
  .reali-grid--3{ grid-template-columns:1fr; }
}

/* Avis dépliables : les avis 4+ restent dans le DOM, repliés en douceur. */
.testimonials-extra{
  max-height:0; overflow:hidden; visibility:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s ease, visibility 0s linear .4s;
}
.testimonials-extra.is-open{
  visibility:visible; opacity:1;
  transition:max-height .4s ease, opacity .3s ease .1s, visibility 0s;
}
.testimonials-extra .testimonials{ margin-top:24px; }
.testimonials-toggle-wrap{ text-align:center; margin-top:36px; }
.testimonials-toggle .label-less{ display:none; }
.testimonials-toggle[aria-expanded="true"] .label-more{ display:none; }
.testimonials-toggle[aria-expanded="true"] .label-less{ display:inline; }

/* Ligne discrète au-dessus du titre de la section avis (accueil). */
.refs-kicker{
  text-align:center; font-size:14px; letter-spacing:.03em;
  color:var(--muted-2); margin:0 0 12px;
}

/* Cartes d'offres : jamais de texte rogné, badge sans chevauchement,
   hauteurs alignées (la grille étire déjà, on verrouille). */
.offer{ height:100%; overflow:visible; }
.offer p{ white-space:normal; overflow:visible; text-overflow:clip; }
.offer--featured{ padding-top:44px; }

/* Variante navy (bloc Pack Lancement). */
.callout--navy{
  background:var(--navy); background-image:var(--halo); border-color:var(--navy);
  border-left-color:var(--amber); margin-top:0;
  padding:38px 40px;
}
.callout--navy h2{ font-family:var(--font-head); font-size:26px; color:var(--bg); }
.callout--navy p{ color:var(--navy-soft); margin-top:14px; }
.callout--navy a{ color:var(--bg); text-decoration-color:var(--amber); }

/* Liste à coches (page Site sur mesure). */
.check-list{ list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:720px; }
.check-list li{ position:relative; padding-left:30px; font-size:17px; line-height:1.55; color:var(--muted); }
.check-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--amber); font-weight:700; }

/* Deuxième titre de section rapproché. */
.h2--sub{ margin-top:64px; font-size:28px; }

/* ---- Menu déroulant « Offres » (header) ---- */
.nav-sub{ position:relative; display:flex; align-items:center; }
.nav-sub-parent{ display:inline-flex; align-items:center; gap:6px; }
.nav-sub-parent .caret{ display:block; transition:transform .2s ease; }
.nav-sub:hover .nav-sub-parent .caret,
.nav-sub:focus-within .nav-sub-parent .caret{ transform:rotate(180deg); }
/* Pont invisible pour ne pas perdre le survol entre le lien et le menu. */
.nav-sub::after{ content:""; position:absolute; top:100%; left:-16px; right:-16px; height:18px; }
.nav-sub-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  min-width:220px; padding:10px; display:flex; flex-direction:column; gap:2px;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px rgba(14,42,71,.14);
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease;
}
.nav-sub:hover .nav-sub-menu,
.nav-sub:focus-within .nav-sub-menu{ opacity:1; visibility:visible; }
.nav .nav-sub-menu a{ padding:10px 14px; border-radius:8px; font-size:15px; }
.nav .nav-sub-menu a:hover{ background:var(--bg); color:var(--navy); }

/* ---- Grille d'offres à 4 cartes (accueil) ---- */
.offers--4{ grid-template-columns:repeat(4,1fr); gap:20px; }
.offers--4 .offer{ padding:30px 24px; }
.offers--4 .offer .price{ font-size:26px; }
@media (max-width:1024px){
  .offers--4{ grid-template-columns:repeat(2,1fr); }
  .offers--4 .offer--featured{ transform:none; }
}
@media (max-width:760px){
  .offers--4{ grid-template-columns:1fr; }

  /* Menu déroulant : à plat dans le menu mobile, sous-liens toujours visibles. */
  .nav-sub{ display:block; width:100%; }
  .nav-sub::after{ display:none; }
  .nav-sub-parent{ width:100%; }
  .nav-sub-parent .caret{ display:none; }
  .nav-sub-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    min-width:0; padding:0 0 0 16px; border:0; border-radius:0; box-shadow:none; background:transparent;
  }
  .nav .nav-sub-menu a{ padding:12px 0; border-radius:0; }
}