/* =================================================================
   MW 21 — Feuille de style globale
   Agence web : création de sites, référencement GEO/IA, e-réputation IA
   ================================================================= */

/* ---------- 1. Variables & thème ---------- */
:root{
  /* Couleurs de marque */
  --ink:        #0B1020;   /* fonds sombres / titres */
  --ink-2:      #131A2E;
  --primary:    #4F46E5;   /* indigo */
  --primary-d:  #4338CA;
  --cyan:       #06B6D4;
  --cyan-l:     #22D3EE;
  --teal:       #14B8A6;

  /* Texte */
  --text:       #1F2733;
  --muted:      #5B6B82;
  --muted-2:    #8A98AD;

  /* Surfaces */
  --bg:         #FFFFFF;
  --bg-soft:    #F5F8FE;
  --bg-soft-2:  #EEF2FB;
  --border:     #E4E9F3;
  --border-2:   #D7DEEC;

  /* Dégradés */
  --grad:       linear-gradient(135deg,#06B6D4 0%,#4F46E5 100%);
  --grad-soft:  linear-gradient(135deg,#22D3EE 0%,#818CF8 100%);
  --grad-text:  linear-gradient(120deg,#0891B2 0%,#4F46E5 60%,#7C3AED 100%);

  /* Effets */
  --shadow-sm:  0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow:     0 10px 30px -12px rgba(20,28,55,.18);
  --shadow-lg:  0 30px 60px -20px rgba(20,28,55,.28);
  --ring:       0 0 0 4px rgba(79,70,229,.15);

  /* Rayons */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 40px);

  --font-head: 'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body: 'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--bg); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--primary); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--primary-d); }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--ink); line-height:1.12; font-weight:700; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(2.2rem,5.2vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); }
p{ margin:0 0 1rem; }
ul,ol{ margin:0 0 1rem; padding-left:1.2rem; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }

/* ---------- 3. Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:820px; }
section{ position:relative; }
.section{ padding-block:clamp(60px,8vw,110px); }
.section-soft{ background:var(--bg-soft); }
.section-ink{ background:var(--ink); color:#C9D2E3; }
.section-ink h1,.section-ink h2,.section-ink h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-head); font-weight:600; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary);
  background:rgba(79,70,229,.08); padding:.4rem .85rem; border-radius:999px;
  margin-bottom:1rem;
}
.section-ink .eyebrow{ color:var(--cyan-l); background:rgba(34,211,238,.12); }
.section-head{ max-width:720px; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.lead{ font-size:1.18rem; color:var(--muted); }
.section-ink .lead{ color:#A9B4C9; }

.grad-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- 4. Boutons ---------- */
.btn{
  --btn-bg:var(--grad); display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--btn-bg); color:#fff; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .2s; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); color:#fff; }
.btn svg{ width:18px; height:18px; }
.btn-ghost{
  background:#fff; color:var(--ink); border:1.5px solid var(--border-2); box-shadow:none;
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--primary); background:var(--bg-soft); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ color:var(--primary-d); }
.btn-outline-light{ background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; box-shadow:none; }
.btn-outline-light:hover{ background:rgba(255,255,255,.08); color:#fff; }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.06rem; }
.btn-block{ width:100%; }
.btn-group{ display:flex; flex-wrap:wrap; gap:.85rem; }

.link-arrow{ font-family:var(--font-head); font-weight:600; display:inline-flex; align-items:center; gap:.4rem; }
.link-arrow svg{ width:16px; height:16px; transition:transform .2s; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- 5. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand img{ height:42px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:inline-block; padding:.55rem .85rem; border-radius:10px; color:var(--text);
  font-weight:500; font-size:.97rem;
}
.nav-links a:hover{ background:var(--bg-soft); color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--primary); }
/* Sur desktop, le CTA de la liste est masqué (doublon avec le bouton de droite) ;
   il ne réapparaît que dans le menu mobile déroulé. */
@media (min-width:761px){
  .nav-links li:has(> .btn){ display:none; }
}
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; border-radius:8px; }
.nav-toggle:hover{ background:var(--bg-soft); }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.nav-toggle span+span{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(60px,9vw,120px); }
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-bg::before,.hero-bg::after{
  content:""; position:absolute; border-radius:50%; filter:blur(80px); opacity:.5;
}
.hero-bg::before{ width:560px; height:560px; background:radial-gradient(circle,#22D3EE,transparent 70%); top:-160px; right:-120px; }
.hero-bg::after{ width:520px; height:520px; background:radial-gradient(circle,#818CF8,transparent 70%); bottom:-200px; left:-140px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1{ margin-bottom:1.1rem; }
.hero .lead{ font-size:1.25rem; max-width:38ch; margin-bottom:1.8rem; }
.hero-stats{ display:flex; gap:2rem; margin-top:2.5rem; flex-wrap:wrap; }
.hero-stat b{ font-family:var(--font-head); font-size:1.8rem; color:var(--ink); display:block; line-height:1; }
.hero-stat span{ font-size:.9rem; color:var(--muted); }

/* Carte visuelle du hero */
.hero-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:1.4rem; position:relative;
}
.hero-card .hc-bar{ display:flex; gap:.4rem; margin-bottom:1rem; }
.hero-card .hc-bar i{ width:11px; height:11px; border-radius:50%; background:var(--border-2); }
.hero-card .hc-row{ display:flex; align-items:center; gap:.8rem; padding:.8rem; border-radius:var(--r-sm); background:var(--bg-soft); margin-bottom:.7rem; }
.hero-card .hc-ic{ width:40px; height:40px; border-radius:11px; background:var(--grad); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.hero-card .hc-ic svg{ width:20px; height:20px; }
.hero-card .hc-row b{ font-family:var(--font-head); font-size:.98rem; color:var(--ink); display:block; }
.hero-card .hc-row span{ font-size:.82rem; color:var(--muted); }
.hero-card .hc-score{ margin-left:auto; font-family:var(--font-head); font-weight:700; color:var(--teal); }

.trust{ margin-top:3rem; }
.trust p{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.8rem; }
.trust-logos{ display:flex; flex-wrap:wrap; gap:1.6rem 2.2rem; align-items:center; opacity:.75; }
.trust-logos span{ font-family:var(--font-head); font-weight:700; color:var(--muted); font-size:1.05rem; }

/* ---------- 7. Cartes / grilles ---------- */
.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:2rem; box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .22s, border-color .22s;
  height:100%;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card-ic{ width:54px; height:54px; border-radius:15px; background:var(--grad); display:grid; place-items:center; color:#fff; margin-bottom:1.2rem; box-shadow:0 8px 20px -8px rgba(79,70,229,.6); }
.card-ic svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); margin-bottom:1rem; }
.card .link-arrow{ margin-top:auto; }

/* Carte service mise en avant */
.service-card{ display:flex; flex-direction:column; }
.service-card .tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 1.1rem; }
.tag{ font-size:.78rem; font-weight:500; color:var(--primary); background:rgba(79,70,229,.08); padding:.25rem .6rem; border-radius:999px; }

/* Liste à puces stylée */
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ position:relative; padding-left:2rem; margin-bottom:.85rem; color:var(--text); }
.check-list li::before{
  content:""; position:absolute; left:0; top:.15rem; width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--grad); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/0.95rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/0.95rem no-repeat;
}

/* ---------- 8. Stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat{ text-align:center; }
.stat b{ font-family:var(--font-head); font-size:clamp(2.2rem,4vw,3rem); background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; display:block; }
.stat span{ color:var(--muted); font-size:.98rem; }
.section-ink .stat span{ color:#A9B4C9; }

/* ---------- 9. Process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step; }
.step{ position:relative; padding-top:.5rem; }
.step .num{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--grad); margin-bottom:1rem; }
.step h3{ font-size:1.15rem; }
.step p{ color:var(--muted); font-size:.96rem; }

/* ---------- 10. Clients ---------- */
.client-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; }
.client-thumb{ aspect-ratio:16/10; position:relative; display:grid; place-items:center; color:#fff; overflow:hidden; }
.client-thumb .logo-bubble{ font-family:var(--font-head); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; z-index:1; text-align:center; padding:1rem; }
.client-body{ padding:1.5rem 1.6rem 1.8rem; }
.client-body .tag{ margin-bottom:.7rem; display:inline-block; }
.client-body h3{ font-size:1.2rem; margin-bottom:.4rem; }
.client-body p{ color:var(--muted); font-size:.95rem; margin-bottom:0; }
.client-meta{ display:flex; gap:1.2rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.client-meta div b{ font-family:var(--font-head); color:var(--teal); display:block; font-size:1.1rem; }
.client-meta div span{ font-size:.8rem; color:var(--muted); }

/* ---------- 11. Témoignages ---------- */
.quote-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow-sm); }
.quote-card .stars{ color:#F59E0B; letter-spacing:2px; margin-bottom:.8rem; }
.quote-card blockquote{ margin:0 0 1.2rem; font-size:1.05rem; color:var(--text); }
.quote-author{ display:flex; align-items:center; gap:.8rem; }
.quote-author .avatar{ width:44px; height:44px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-weight:700; }
.quote-author b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:.95rem; }
.quote-author span{ font-size:.85rem; color:var(--muted); }

/* ---------- 12. CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(2.5rem,5vw,4rem); background:var(--ink); color:#fff; text-align:center; }
.cta-band::before{ content:""; position:absolute; inset:0; background:var(--grad); opacity:.18; }
.cta-band::after{ content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,#22D3EE,transparent 70%); filter:blur(60px); opacity:.4; top:-150px; right:-100px; }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#C9D2E3; max-width:52ch; margin-inline:auto; margin-bottom:1.8rem; }
.cta-band .btn-group{ justify-content:center; }

/* ---------- 13. FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border:1px solid var(--border); border-radius:var(--r); margin-bottom:.9rem; background:#fff; overflow:hidden; transition:box-shadow .2s, border-color .2s; }
.faq-item[open]{ box-shadow:var(--shadow); border-color:transparent; }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.15rem 1.4rem; font-family:var(--font-head); font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color:var(--primary); transition:transform .2s; line-height:1; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-body{ padding:0 1.4rem 1.3rem; color:var(--muted); }

/* ---------- 14. Page hero (intérieures) ---------- */
.page-hero{ position:relative; overflow:hidden; padding-block:clamp(50px,7vw,90px); background:var(--bg-soft); border-bottom:1px solid var(--border); }
.page-hero .container{ position:relative; z-index:1; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg::before{ content:""; position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,#818CF8,transparent 70%); filter:blur(80px); opacity:.35; top:-200px; right:-100px; }
.breadcrumb{ font-size:.88rem; color:var(--muted); margin-bottom:1rem; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb span{ color:var(--muted-2); margin-inline:.4rem; }

/* ---------- 15. Split (texte + visuel) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split.reverse .split-media{ order:-1; }
.media-card{ border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow); background:#fff; padding:1.6rem; }
.media-panel{ border-radius:var(--r-lg); padding:2rem; color:#fff; background:var(--ink); position:relative; overflow:hidden; }
.media-panel::before{ content:""; position:absolute; inset:0; background:var(--grad); opacity:.15; }
.media-panel > *{ position:relative; z-index:1; }

/* Mini graph / barres */
.bars{ display:flex; align-items:flex-end; gap:.7rem; height:160px; margin-top:1rem; }
.bars .bar{ flex:1; border-radius:8px 8px 0 0; background:var(--grad); position:relative; min-height:14px; }
.bars .bar.muted{ background:rgba(255,255,255,.14); }
.bars .bar span{ position:absolute; top:-1.4rem; left:0; right:0; text-align:center; font-size:.75rem; color:#fff; font-family:var(--font-head); }
.bars-x{ display:flex; gap:.7rem; margin-top:.5rem; }
.bars-x span{ flex:1; text-align:center; font-size:.72rem; color:#A9B4C9; }

/* Logos LLM */
.llm-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.llm-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--border); background:#fff; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink); box-shadow:var(--shadow-sm); }
.llm-chip i{ width:10px; height:10px; border-radius:50%; background:var(--grad); }

/* ---------- 16. Tarifs ---------- */
.price-card{ display:flex; flex-direction:column; position:relative; }
.price-card.featured{ border-color:transparent; box-shadow:var(--shadow-lg); }
.price-card.featured::before{ content:"Le plus choisi"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff; font-family:var(--font-head); font-weight:600; font-size:.76rem; padding:.3rem .9rem; border-radius:999px; white-space:nowrap; }
.price-card .price{ font-family:var(--font-head); font-size:2.4rem; font-weight:700; color:var(--ink); margin:.4rem 0; }
.price-card .price small{ font-size:.95rem; color:var(--muted); font-weight:500; }
.price-card .check-list{ margin:1.2rem 0 1.6rem; }
.price-card .btn{ margin-top:auto; }

/* ---------- 17. Formulaire ---------- */
.form{ display:grid; gap:1.1rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.4rem; }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  font:inherit; font-size:.98rem; color:var(--text); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.field textarea{ resize:vertical; min-height:140px; }
.field .hint{ font-size:.82rem; color:var(--muted); margin-top:.35rem; }
.form-consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted); }
.form-consent input{ margin-top:.25rem; }
.form-note{ font-size:.85rem; color:var(--muted); }
.contact-info{ list-style:none; padding:0; margin:0; }
.contact-info li{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem; }
.contact-info .ic{ width:44px; height:44px; border-radius:12px; background:rgba(79,70,229,.08); display:grid; place-items:center; color:var(--primary); flex:0 0 auto; }
.contact-info .ic svg{ width:20px; height:20px; }
.contact-info b{ font-family:var(--font-head); color:var(--ink); display:block; }
.contact-info a,.contact-info span{ color:var(--muted); }

.form-alert{ padding:1rem 1.2rem; border-radius:var(--r-sm); font-size:.95rem; margin-bottom:1rem; }
.form-alert.ok{ background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.form-alert.err{ background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; }

/* ---------- 18. Footer ---------- */
.site-footer{ background:var(--ink); color:#9AA7BE; padding-block:clamp(3rem,5vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-brand img{ height:38px; width:auto; background:#fff; padding:9px 13px; border-radius:12px; margin-bottom:1rem; }
.footer-brand p{ font-size:.95rem; max-width:34ch; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:grid; place-items:center; color:#C9D2E3; }
.footer-social a:hover{ background:var(--grad); color:#fff; }
.footer-social svg{ width:18px; height:18px; }
.site-footer h4{ color:#fff; font-size:.95rem; letter-spacing:.02em; margin-bottom:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:#9AA7BE; font-size:.94rem; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.86rem; }
.footer-bottom .legal-links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.footer-bottom a{ color:#9AA7BE; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- 19. Bannière cookies ---------- */
.cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:560px; margin-inline:auto;
  background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:1.3rem 1.4rem; transform:translateY(160%); transition:transform .4s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ font-size:.92rem; color:var(--muted); margin-bottom:1rem; }
.cookie-banner .btn-group{ gap:.6rem; }
.cookie-banner .btn{ padding:.6rem 1.1rem; font-size:.92rem; }

/* ---------- 20. Article (légal) ---------- */
.prose{ max-width:820px; }
.prose h2{ margin-top:2.5rem; font-size:1.5rem; }
.prose h3{ margin-top:1.8rem; font-size:1.2rem; }
.prose p,.prose li{ color:var(--text); }
.prose ul{ margin-bottom:1.2rem; }
.prose .updated{ color:var(--muted); font-size:.9rem; margin-bottom:2rem; }
.prose table{ width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.92rem; }
.prose th,.prose td{ border:1px solid var(--border); padding:.7rem .9rem; text-align:left; vertical-align:top; }
.prose th{ background:var(--bg-soft); font-family:var(--font-head); }

/* ---------- 21. Animations ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:480px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.open .nav-links{
    display:flex; position:absolute; left:0; right:0; top:74px; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--border); padding:1rem var(--gutter) 1.4rem; gap:.2rem;
    box-shadow:var(--shadow);
  }
  .site-header.open .nav-links a{ padding:.8rem 1rem; }
  .site-header.open .nav-links .btn{ display:inline-flex; margin-top:.6rem; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.4rem; }
  .form .row{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* =================================================================
   23. PHOTOS / VISUEL CONCRET (ajout)
   ================================================================= */
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Hero : photo + badges flottants ---- */
.hero-photo{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/3; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-media{ position:relative; }
.hero-badge{
  position:absolute; z-index:2; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-radius:14px; padding:.7rem .95rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.6rem;
}
.hero-badge .hb-ic{ width:38px; height:38px; border-radius:11px; background:var(--grad); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.hero-badge .hb-ic svg{ width:19px; height:19px; }
.hero-badge b{ font-family:var(--font-head); font-size:.98rem; color:var(--ink); display:block; line-height:1.1; }
.hero-badge span{ font-size:.76rem; color:var(--muted); }
.hero-badge.b-tl{ top:1.1rem; left:-1.1rem; }
.hero-badge.b-br{ bottom:1.3rem; right:-1.1rem; }

/* ---- Cartes services avec photo d'en-tête ---- */
.card.has-media{ padding:0; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.card.has-media .card-media{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.card.has-media .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card.has-media:hover .card-media img{ transform:scale(1.05); }
.card.has-media .media-ic{
  position:absolute; left:1.4rem; bottom:-24px; z-index:1; width:50px; height:50px; border-radius:14px;
  background:var(--grad); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow); border:3px solid #fff;
}
.card.has-media .media-ic svg{ width:24px; height:24px; }
.card.has-media .card-body{ padding:2.2rem 1.8rem 1.9rem; display:flex; flex-direction:column; flex:1; }
.card.has-media .card-body h3{ margin-bottom:.4rem; }
.card.has-media .card-body p{ color:var(--muted); }
.card.has-media .card-body .link-arrow{ margin-top:auto; }

/* ---- Vitrines clients en vraies photos ---- */
.client-thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; display:block; background:var(--bg-soft-2); }
.client-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.client-card:hover .client-thumb img{ transform:scale(1.06); }
.client-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,16,32,.6), rgba(11,16,32,0) 55%); }
.client-thumb .client-label{
  position:absolute; bottom:.85rem; left:1.1rem; right:1.1rem; z-index:1; color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:1.1rem; letter-spacing:-.01em; text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* ---- Avatars témoignages en photo ---- */
.quote-author .avatar{ overflow:hidden; padding:0; flex:0 0 auto; }
.quote-author .avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---- Cadre photo générique (sections split) ---- */
.photo-frame{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; }
.photo-frame img{ width:100%; display:block; aspect-ratio:5/4; max-height:550px; object-fit:cover; object-position:center 60%; }
.photo-frame .photo-tag{
  position:absolute; left:1rem; bottom:1rem; z-index:1; background:rgba(255,255,255,.95); backdrop-filter:blur(6px);
  border-radius:12px; padding:.6rem .9rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--ink);
}
.photo-frame .photo-tag .dot{ width:10px; height:10px; border-radius:50%; background:var(--grad); }

/* ---- Encart statistique (callout) ---- */
.callout{ display:flex; align-items:center; gap:1.4rem; background:#fff; border:1px solid var(--border); border-left:5px solid var(--primary); border-radius:var(--r); padding:1.4rem 1.6rem; box-shadow:var(--shadow-sm); max-width:880px; margin-inline:auto; }
.callout-num{ font-family:var(--font-head); font-weight:700; font-size:2.7rem; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; flex:0 0 auto; }
.callout p{ margin:0; color:var(--muted); font-size:1rem; }
@media (max-width:560px){ .callout{ flex-direction:column; align-items:flex-start; gap:.6rem; } }

/* ---- Section agence (chiffres en ligne) ---- */
.mini-stats{ display:flex; flex-wrap:wrap; gap:1.8rem; margin-top:1.6rem; }
.mini-stats div b{ font-family:var(--font-head); font-size:1.7rem; color:var(--ink); display:block; line-height:1; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mini-stats div span{ font-size:.85rem; color:var(--muted); }

/* ---- CTA avec fond photo ---- */
.cta-band.cta-photo .cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-band.cta-photo .cta-bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.cta-band.cta-photo::before{ background:linear-gradient(120deg, rgba(11,16,32,.85), rgba(79,70,229,.55)); opacity:1; z-index:0; }

/* ---- Page-hero avec photo (pages intérieures) ---- */
.page-hero.has-photo{ color:#fff; border-bottom:0; background:var(--ink); }
.page-hero.has-photo .page-hero-photo{ position:absolute; inset:0; z-index:0; }
.page-hero.has-photo .page-hero-photo img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.page-hero.has-photo::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(120deg, rgba(11,16,32,.9), rgba(79,70,229,.5)); }
.page-hero.has-photo h1{ color:#fff; }
.page-hero.has-photo .lead{ color:#C9D2E3; }
.page-hero.has-photo .breadcrumb,.page-hero.has-photo .breadcrumb a{ color:#A9B4C9; }
.page-hero.has-photo .breadcrumb a:hover{ color:#fff; }

@media (max-width:980px){
  .hero-badge.b-tl{ left:.6rem; top:.6rem; }
  .hero-badge.b-br{ right:.6rem; bottom:.6rem; }
}