/* ============================================================
   COGITOWEB — Feuille de styles principale
   Système de design inspiré de ViDesigns (adapté en bleu, Satoshi).
   Voir CLAUDE.md pour les règles (typo fluide, tokens, roadmap).
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS  — toute l'identité vit dans ces variables
   ============================================================ */
:root{
  /* Couleurs */
  --ink:#0D1321;          /* encre / titres */
  --muted:#5B6573;        /* texte secondaire */
  --bg:#FFFFFF;
  --soft:#F5F7FB;         /* fonds doux (méga menu, cartes « Pourquoi nous confier », FAQ) */
  --section-bg:#FAFAFA;   /* fond des sections alternées (Services, Avis, CTA final) */
  --border:#E5E9F0;
  --blue:#2F6BFF;         /* accent principal (remplace l'orange) */
  --blue-deep:#1B4CD8;    /* hover / états pressés */
  --blue-tint:#E8F0FF;    /* halos, carrés d'icônes */
  --lead:#3f3f3f;         /* gris des paragraphes (valeur ViDesigns) */

  /* Accents secondaires (façon ViDesigns : titres bicolores, avis, icônes) */
  --title-soft:#828B9B;   /* 2e partie des titres de section (gris — contraste ≥3:1 sur blanc) */
  --gold:#F5A623;         /* étoiles des avis Google */
  --green:#12A150;        /* pastille "créneaux disponibles" + icône SEO */
  --tint-green:#E6F7EF;   /* fond doux icône référencement */
  --violet:#6D4AFF;       /* icône design */
  --tint-violet:#ECE9FF;  /* fond doux icône design */
  --orange:#E8730C;       /* icône e-commerce / boutique */
  --tint-orange:#FCEBDD;  /* fond doux icône boutique */

  /* Typo */
  --font:'Satoshi', Arial, sans-serif;

  /* Layout */
  --maxw:1240px;
  --radius:14px;
  --radius-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-swap:cubic-bezier(.165,.84,.44,1);  /* "outQuart" — animation text-swap des CTA */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);  /* démarre vite, ralentit en douceur — cascade des cartes */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-weight:300;        /* Satoshi Light par défaut (comme ViDesigns) */
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
img,svg{display:block}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* ============================================================
   2. HEADER  — grille 3 colonnes : logo | nav centrée | CTA
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  border-bottom-color:var(--border);
  box-shadow:0 6px 24px -18px rgba(13,19,33,.4);
}
.header-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  height:76px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  font-weight:900;
  font-size:26px;
  letter-spacing:-.02em;
  color:var(--ink);
  justify-self:start;
  line-height:1;
}
.brand-icon{width:54px;height:54px;flex:none}
.brand-text > span{color:var(--blue)}

/* ============================================================
   LOGO ANIMÉ (pyramide 3 cubes) — header & footer
   Entrée « déploiement télescopique » (une fois) puis « respiration » continue,
   arrêtée après quelques cycles (.is-settled, ajouté par le JS) pour ne pas
   respirer indéfiniment.
   Repos par défaut = pyramide déployée (secours sans JS / mouvement réduit).
   Avec JS (.js) + .is-armed : démarre repliée ; .is-playing (ajouté par le JS)
   lance le déploiement puis la respiration.
   ============================================================ */
.logo-anim .l-riser2, .logo-anim .l-riser3,
.logo-anim .l-breath2, .logo-anim .l-breath3{transform:translateY(0);will-change:transform}
/* Avec JS et tant que non joué : pyramide repliée (étages hauts rentrés).
   Dès .is-playing, la règle ne s'applique plus → l'animation pilote seule. */
.js .logo-anim:not(.is-playing) .l-riser2,
.js .logo-anim:not(.is-playing) .l-riser3{transform:translateY(8px)}
.logo-anim.is-playing .l-riser2{animation:l-rise2 1.3s var(--ease) forwards}
.logo-anim.is-playing .l-riser3{animation:l-rise3 1.3s var(--ease) .18s forwards}
.logo-anim.is-playing:not(.is-settled) .l-breath2{animation:l-breath2 3.8s ease-in-out 1.6s infinite}
.logo-anim.is-playing:not(.is-settled) .l-breath3{animation:l-breath3 3.8s ease-in-out 1.6s infinite}
@keyframes l-rise2{from{transform:translateY(8px)}to{transform:translateY(0)}}
@keyframes l-rise3{from{transform:translateY(8px)}to{transform:translateY(0)}}
@keyframes l-breath2{0%,100%{transform:translateY(0)}50%{transform:translateY(2.4px)}}
@keyframes l-breath3{0%,100%{transform:translateY(0)}50%{transform:translateY(3.5px)}}
@media (prefers-reduced-motion: reduce){
  /* Mouvement réduit : pyramide déployée, figée (pas d'entrée ni de respiration) */
  .js .logo-anim:not(.is-playing) .l-riser2,
  .js .logo-anim:not(.is-playing) .l-riser3{transform:translateY(0)}
  .logo-anim .l-riser2, .logo-anim .l-riser3,
  .logo-anim .l-breath2, .logo-anim .l-breath3{animation:none !important}
}

/* --- Navigation centrale --- */
.nav{justify-self:center;position:relative}
.nav-list{display:flex;align-items:center;gap:4px;list-style:none}
/* Pas de position:relative sur .nav-item : le panneau .mega doit se centrer
   sur .nav (donc sur le header) et non sur le bouton "Services" lui-même,
   qui n'est pas au milieu de la nav (largeurs logo/CTA asymétriques). */
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:10px;
  font-weight:500;font-size:15px;color:var(--ink);
  transition:background .2s var(--ease);
}
.nav-link:hover,
.nav-item.open > .nav-link,
.nav-link.is-active{background:var(--soft)}
.nav-link.is-active{color:var(--blue)}
.nav-link svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.nav-item.open > .nav-link svg{transform:rotate(180deg)}

/* --- CTA --- */
.header-cta{justify-self:end}
.btn-outline{
  display:inline-block;padding:11px 22px;border-radius:var(--radius-pill);
  border:1.5px solid var(--ink);font-weight:500;font-size:15px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.btn-outline:hover{background:var(--ink);color:#fff}

/* ============================================================
   3. PANNEAUX DÉROULANTS  (ouverture au survol + au focus + au clic)
   ============================================================ */
.panel{
  position:absolute;top:calc(100% + 10px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:90;
}
/* :focus-within = accessible au clavier sans JS */
.nav-item:hover > .panel,
.nav-item:focus-within > .panel,
.nav-item.open > .panel{opacity:1;visibility:visible;transform:translateY(0)}

/* Méga menu Services — 2 colonnes de liens + carte étude de cas */
.mega{
  left:50%;transform:translateX(-50%) translateY(8px);
  width:min(980px, 94vw);
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 30px 60px -30px rgba(13,19,33,.35);
  padding:18px;
  display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:16px;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega,
.nav-item.open > .mega{transform:translateX(-50%) translateY(0)}

.mega-col-title{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:4px 10px 8px;
}
.mega-col-title--mt{padding-top:14px}

/* Lien du méga menu : petite icône + libellé */
.mega-link{
  display:flex;align-items:center;gap:12px;
  padding:9px 10px;border-radius:10px;
  transition:background .16s var(--ease);
}
.mega-link:hover{background:#fff}
.mega-ic{
  flex:none;width:36px;height:36px;border-radius:9px;
  background:var(--blue-tint);color:var(--blue);
  display:grid;place-items:center;
}
.mega-ic svg{width:18px;height:18px}
.mega-txt{display:flex;flex-direction:column}
.mega-name{font-size:14.5px;font-weight:500;color:var(--ink)}
.mega-sub{font-size:12px;color:var(--muted);margin-top:1px}
/* Lien pilier (Création de sites web) mis en avant */
.mega-link--pillar{background:#fff;border:1px solid var(--border)}
.mega-link--pillar:hover{border-color:color-mix(in srgb, var(--blue) 40%, var(--border))}

/* Carte étude de cas (3e colonne) */
.case{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;
}
.case-label{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.case-img{
  aspect-ratio:16/9;border-radius:8px;margin-bottom:14px;
  background:
    radial-gradient(120% 120% at 80% 20%, rgba(47,107,255,.35), transparent 60%),
    #101820;
  position:relative;overflow:hidden;
}
.case-img::after{
  content:"";position:absolute;inset:14px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}
.case-title{font-size:16px;font-weight:700;margin-bottom:6px}
.case p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.case-link{
  margin-top:auto;font-weight:700;font-size:14px;color:var(--blue);
  display:inline-flex;align-items:center;gap:6px;
}
.case-link:hover{color:var(--blue-deep)}
/* Bug préexistant corrigé au passage : sans taille explicite, ce svg (viewBox seul,
   pas de width/height) hérite de la taille intrinsèque par défaut du navigateur et
   s'affiche géant — visible aussi bien ici que sur la carte étude de cas du méga menu. */
.case-link svg{width:16px;height:16px;flex:none}

/* ============================================================
   4. HERO  — même construction : eyebrow / titre géant / sous-titre / CTA

   Typo fluide (fenêtre viewport 390→1280px) :
     line-height par rôle -> titre 1,1 · label 1,2 · corps 1,4
   ============================================================ */
/* padding-block (pas padding) : ne pas écraser le padding-inline hérité de .wrap */
.hero{text-align:center;padding-block:88px 64px}
.eyebrow{
  font-size:13px;            /* ≤13,5px : reste fixe en mobile */
  font-weight:700;
  letter-spacing:0.3px;      /* léger tracking positif */
  line-height:1.2;           /* 15,6/13 */
  text-transform:uppercase;
  color:var(--ink);margin-bottom:26px;
}
.hero h1{
  font-weight:500;                 /* Satoshi Medium — comme ViDesigns */
  text-transform:capitalize;
  line-height:1.1;                 /* 114,4/104 = 57,77/52,5 = 1,1 */
  /* Taille fluide : 52,52px (≈390px de large) → 104px (≥1280px) */
  font-size:clamp(52.52px, calc(29.96px + 5.785vw), 104px);
  /* Le tracking suit la taille : -1,31px en mobile → -5,2px en desktop */
  letter-spacing:clamp(-5.2px, calc(0.39px - 0.4368vw), -1.31px);
  text-align:center;
  max-width:15ch;margin:0 auto 28px;
}
.hero .lead{
  font-weight:300;                 /* Satoshi Light — passages en gras via <strong> */
  /* Fluide 17,17px → 22px sur la fenêtre 390→1280px */
  font-size:clamp(17.17px, calc(15.05px + 0.5428vw), 22px);
  line-height:1.4;                 /* 30,8/22 */
  color:var(--lead);
  max-width:50ch;margin:0 auto 36px;
}
.hero .lead strong{color:var(--ink);font-weight:700}

.cta-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

/* ------------------------------------------------------------
   CTA "text swap" — icône qui pivote de 45° + libellé qui glisse
   verticalement au survol. Structure commune aux deux boutons :
     .btn-ic     → icône (tourne au survol)
     .btn-label  → fenêtre overflow:hidden d'une hauteur de ligne
       .btn-txt  → 2 copies identiques du libellé, empilées ; la
                   2e est aria-hidden (doublon purement visuel,
                   le texte réel n'est annoncé qu'une fois).
   Au survol, les deux copies glissent ensemble de translateY(0)
   à translateY(-100%) : la 1re sort par le haut, la 2e prend sa
   place. prefers-reduced-motion coupe déjà toutes les transitions
   (règle globale plus bas), donc rien à ajouter ici.
   ------------------------------------------------------------ */
.btn-ic{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;
  transition:transform .6s var(--ease-swap), background .6s var(--ease-swap);
}
.btn-ic svg{width:20px;height:20px}
.btn-label{
  position:relative;display:block;overflow:hidden;
  height:1.25em;line-height:1.25em;
}
.btn-txt{display:block;transition:transform .6s var(--ease-swap)}

.btn-primary{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 26px 8px 8px;border-radius:var(--radius-pill);
  background:var(--blue);color:#fff;font-weight:500;font-size:16px;
  transition:background .6s var(--ease-swap);
}
.btn-primary:hover{background:var(--ink)}
.btn-primary:hover .btn-ic{transform:rotate(45deg)}
.btn-primary:hover .btn-txt{transform:translateY(-100%)}
/* Icône encerclée (badge rond semi-transparent) : uniquement sur le bouton
   plein, où le fond coloré la fait ressortir — pas sur le lien secondaire. */
.btn-primary .btn-ic{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.18);
}
.btn-primary .btn-ic svg{width:18px;height:18px}

.link-secondary{
  display:inline-flex;align-items:center;gap:.25rem;
  padding-block:.5rem;
  font-weight:500;font-size:16px;color:var(--ink);
}
.link-secondary .btn-ic{width:16px;height:16px}
.link-secondary .btn-ic svg{width:16px;height:16px}
.link-secondary:hover .btn-ic{transform:rotate(45deg)}
.link-secondary:hover .btn-txt{transform:translateY(-100%)}

/* Bandeau confiance */
.trust{padding-block:36px 72px;text-align:center}
.trust-label{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:28px;
}
.logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 48px;
}
.logos span{
  font-weight:700;font-size:20px;color:#9AA3B0;
  filter:grayscale(1);opacity:.85;letter-spacing:-.01em;
}

/* ============================================================
   5. MOBILE
   ============================================================ */

/* Icône burger : trois traits fins de longueurs inégales → croix au clic
   (le trait du milieu s'efface, les deux autres pivotent en X).
   Même bouton (pas de swap d'icône), transform+width animés ensemble. */
.burger{
  position:relative;justify-self:end;display:none;width:44px;height:44px;
  border-radius:10px;place-items:center;color:var(--ink);
  transition:color .2s var(--ease);
}
.burger:focus-visible{color:var(--blue)}
.burger-bars{position:relative;width:22px;height:16px;display:block}
.burger-bar{
  position:absolute;left:0;width:22px;height:1.5px;border-radius:1px;
  background:currentColor;
  transition:transform .32s var(--ease), width .32s var(--ease), top .32s var(--ease), opacity .2s var(--ease);
}
.burger-bar--1{top:0}
.burger-bar--2{top:7px;width:15px}
.burger-bar--3{top:14px;width:11px}
.burger[aria-expanded="true"] .burger-bar--1{top:7px;width:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-bar--2{opacity:0;width:8px}
.burger[aria-expanded="true"] .burger-bar--3{top:7px;width:22px;transform:rotate(-45deg)}

/* Voile derrière le panneau : assombrit la page, ferme le menu au clic */
.mobile-overlay{
  position:fixed;inset:0;z-index:150;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease), visibility .32s;
}
.mobile-overlay.open{opacity:1;visibility:visible}

/* Panneau mobile : plein hauteur, glisse depuis la gauche par-dessus la page.
   Fond --soft (même teinte que les sous-menus dépliés) plutôt que blanc :
   un seul ton pour tout le panneau, plus cohérent qu'un blanc + accordéon gris. */
.mobile-menu{
  position:fixed;top:0;left:0;bottom:0;z-index:151;
  width:min(86vw,360px);height:100dvh;
  display:flex;flex-direction:column;
  background:var(--soft);
  box-shadow:16px 0 40px rgba(13,19,33,.18);
  transform:translateX(-100%);visibility:hidden;
  transition:transform .36s var(--ease), visibility .36s;
  overflow-y:auto;
  padding-block:28px 24px;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}

/* Verrouille le scroll de la page derrière le panneau ouvert */
body.menu-open{overflow:hidden}

/* Petit logo vertical en tête du panneau : icône animée + wordmark en dessous
   (même motif que .footer-logo, en format compact) */
.mobile-brand{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 24px 24px;margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.mobile-icon{width:48px;height:48px}
.mobile-brand-text{
  font-weight:900;font-size:17px;letter-spacing:-.01em;color:var(--ink);
}
.mobile-brand-text span{color:var(--blue)}

.mobile-nav{display:flex;flex-direction:column}
.mobile-link{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 24px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--border);
  background:none;border-left:0;border-right:0;border-top:0;width:100%;
  font:inherit;text-align:left;cursor:pointer;
}
.mobile-link.is-active{color:var(--blue)}
.mobile-chevron{width:16px;height:16px;flex-shrink:0;transition:transform .28s var(--ease)}
.mobile-accordion.open .mobile-chevron{transform:rotate(180deg)}

/* Sous-menu Services : accordéon en grid-template-rows (pas de mesure JS) */
.mobile-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.mobile-accordion.open .mobile-submenu{grid-template-rows:1fr}
.mobile-submenu-inner{overflow:hidden;min-height:0}
.mobile-sub-title{
  padding:14px 24px 4px;font-size:12px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted);
}
.mobile-sub-link{
  display:flex;align-items:center;gap:12px;padding:10px 24px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.mobile-sub-link .mega-ic{width:32px;height:32px;flex-shrink:0}
.mobile-sub-link .mega-ic svg{width:16px;height:16px}
.mobile-sub-link--pillar{font-weight:700}

.mobile-cta{margin:20px 24px 0;text-align:center;display:block}

@media (max-width:980px){
  .nav,.header-cta{display:none}
  .burger{display:grid}
  .header-grid{grid-template-columns:1fr auto}
  .hero{padding-block:56px 40px}
}
/* Logo header un peu plus compact sur petit écran (équilibre avec le burger) */
@media (max-width:560px){
  .brand{font-size:22px;gap:9px}
  .brand-icon{width:44px;height:44px}
}

/* Mobile : hero alignée à gauche (comme ViDesigns) */
@media (max-width:768px){
  .hero{text-align:left}
  .hero h1{text-align:left;margin-inline:0;max-width:none}
  .hero .lead{margin-inline:0}
  .cta-row{justify-content:flex-start}
}

/* Accessibilité : focus visible + respect du reduced-motion */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  /* *::before/*::after explicites : l'universel seul ne couvre pas
     toujours les pseudo-éléments (ex. .eyebrow-dot::before, .svc-card
     ::before/::after) selon les navigateurs. */
  *, *::before, *::after{transition:none!important;animation:none!important}
}

/* ============================================================
   6. COMPOSANTS PARTAGÉS DE SECTION  (façon ViDesigns)
   En-tête centré + titre bicolore, badges, étoiles, carte avis…
   Réutilisés par toutes les sections ci-dessous.
   ============================================================ */

/* Rythme vertical commun à toutes les sections de contenu */
.section{padding-block:clamp(56px,8vw,112px)}

/* En-tête de section : centré par défaut (eyebrow / titre / intro / CTA) */
.section-head{max-width:62ch;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.section-head .eyebrow{margin-bottom:20px}
.section-title{
  font-weight:500;text-transform:capitalize;
  line-height:1.1;letter-spacing:-.02em;   /* règle CLAUDE.md : titres 1,1 */
  /* Fluide 34 → 56px (fenêtre 390→1280px, cf. règle CLAUDE.md) */
  font-size:clamp(34px, calc(24.7px + 2.383vw), 56px);
}
/* 2ᵉ partie du titre en gris clair (le “Unlimited Requests.” de ViDesigns).
   display:block : la partie grise démarre toujours sur sa propre ligne
   (jamais un simple retour à la ligne "au cas où" par manque de place). */
.section-title .soft{color:var(--title-soft);display:block}
.section-intro{
  font-weight:300;color:var(--lead);line-height:1.5;
  font-size:clamp(16px, calc(14.24px + 0.45vw), 20px);
  max-width:56ch;margin:18px auto 0;
}
.section-intro strong{color:var(--ink);font-weight:700}
.section-head .btn-primary{margin-top:34px}

/* Variante alignée à gauche (utilisée par la section “Intéressé ?”) */
.section-head.is-left{text-align:left;margin-inline:0;max-width:none}
.section-head.is-left .section-intro{margin-inline:0}

/* Eyebrow avec pastille verte pulsée (“créneaux disponibles”) */
.eyebrow-dot{display:inline-flex;align-items:center;gap:10px}
.eyebrow-dot::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent);
  animation:dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Badge résultat (métrique d'une étude de cas) */
.badge{
  display:inline-block;padding:6px 13px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--blue-tint);color:var(--blue-deep);white-space:nowrap;
}

/* Étoiles pleines (avis) */
.stars{display:inline-flex;gap:3px;color:var(--gold);line-height:0}
.stars svg{width:18px;height:18px}

/* Pastille “Avis Google” */
.google-badge{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 17px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--border);
  box-shadow:0 12px 30px -20px rgba(13,19,33,.5);
  font-size:14px;font-weight:500;margin:0 auto 22px;
}
.google-badge .g{width:18px;height:18px;flex:none}
.google-badge .stars svg{width:16px;height:16px}
.google-badge strong{font-weight:700}

/* Carte témoignage réutilisable (avatar = initiales, aucune image externe) */
.tcard{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;gap:15px;
}
.tcard-title{font-size:17px;font-weight:700;line-height:1.35}
.tcard p{font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.65}
.tcard-author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-weight:700;font-size:14px;color:var(--blue);background:var(--blue-tint);
}
.tcard-name{font-weight:700;font-size:14.5px;line-height:1.2}
.tcard-role{font-size:13px;color:var(--muted);line-height:1.3}

/* ============================================================
   7. SERVICES  — 6 cartes (grille 3×2, calqué ViDesigns “Our services”)
   Section à fond gris (alternance blanc/gris façon ViDesigns, cf. §12) :
   les cartes passent donc en clair pour rester lisibles dessus (léger
   dégradé vertical plutôt qu'un blanc plat, façon ViDesigns).
   ============================================================ */
.services-grid,.profiles-grid,.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:18px;
  padding:32px 28px;min-height:288px;
  background:linear-gradient(180deg, #F6F6F6, #FBFBFB);
  border:1px solid var(--border);border-radius:16px;
  transition:border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-card:hover{
  border-color:color-mix(in srgb, var(--blue) 34%, var(--border));
  transform:translateY(-4px);
  box-shadow:0 26px 50px -32px rgba(13,19,33,.4);
}

/* Animation "border trail" au survol (inspirée de motion-primitives) :
   une comète lumineuse trace le contour de la carte en boucle. Pur CSS,
   sans JS — conic-gradient animé via une custom property @property
   (seule façon de faire interpoler un angle en douceur), découpé en
   anneau fin par un masque qui exclut le centre de la carte.
   ::before = cœur net de la comète · ::after = halo flouté (glow).
   Dégradation correctement gracieuse si @property n'est pas supporté
   (Safari < 16.4, Firefox < 128) : l'angle ne s'anime plus, l'anneau
   reste simplement statique au survol — rien ne casse. */
.svc-card::before, .svc-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--trail-angle),
    transparent 0deg, transparent 270deg,
    var(--blue) 328deg, #E8F0FF 344deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0;
  animation:svc-trail 2.8s linear infinite;
  animation-play-state:paused;
  transition:opacity .3s var(--ease);
}
.svc-card::after{filter:blur(3px)}
.svc-card:hover::before, .svc-card:hover::after,
.svc-card:focus-within::before, .svc-card:focus-within::after{
  opacity:1;
  animation-play-state:running;
}
@property --trail-angle{
  syntax:'<angle>';inherits:false;initial-value:0deg;
}
@keyframes svc-trail{to{--trail-angle:360deg}}

.svc-icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-tint);color:var(--blue);
}
.svc-icon svg{width:26px;height:26px}
.svc-icon.ic-green{background:var(--tint-green);color:var(--green)}
.svc-icon.ic-violet{background:var(--tint-violet);color:var(--violet)}
.svc-icon.ic-orange{background:var(--tint-orange);color:var(--orange)}
/* Titre de carte : fluide 18,02 → 24px · Corps : fluide 15,44 → 18px (règle CLAUDE.md) */
.svc-card h3{font-size:clamp(18.02px, calc(15.4px + 0.6719vw), 24px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.svc-card p{font-size:clamp(18px, calc(16.88px + 0.4632vw), 20px);color:var(--muted);line-height:1.55;flex:1}
/* Lien souligné bas de carte + zone cliquable étendue à toute la carte */
.svc-more{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--border);
  transition:text-decoration-color .2s var(--ease);
}
.svc-card:hover .svc-more,
.proof-card:hover .svc-more{text-decoration-color:var(--blue)}
.svc-more::after{content:"";position:absolute;inset:0}
/* Repli sûr : outline retiré du lien seulement si :has() est supporté (cf. .pcard) */
@supports selector(:has(*)){
  .svc-more:focus-visible{outline:none}
  .svc-card:has(.svc-more:focus-visible),
  .proof-card:has(.svc-more:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
}

/* ============================================================
   8. RÉALISATIONS  — grille 2 colonnes d'études de cas
   ============================================================ */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.5vw,44px) 24px}
.pcard{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px}
/* Visuel : maquette navigateur (placeholder ; remplacer par <img> plus tard) */
.pcard-media{
  position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);background:#0E1116;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover .pcard-media{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(13,19,33,.55)}
.browser-bar{
  height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;
  background:#161B22;border-bottom:1px solid rgba(255,255,255,.06);
}
.browser-bar span{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2)}
.browser-shot{
  position:absolute;inset:34px 0 0;
  display:grid;place-items:center;padding:24px;text-align:center;
  background:
    radial-gradient(120% 120% at 80% 15%, var(--shot, rgba(47,107,255,.4)), transparent 60%),
    linear-gradient(180deg, #10151C, #0B0F14);
}
.browser-shot b{
  font-weight:500;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;
  color:rgba(255,255,255,.92);text-transform:capitalize;line-height:1.1;
}
/* Titre à gauche + badge à droite */
/* flex-wrap : sous ~700px/carte, le badge passe sous le titre au lieu de l'écraser */
.pcard-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 16px}
.pcard-head h3{font-size:clamp(22px,2.4vw,27px);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.pcard-head h3 a::after{content:"";position:absolute;inset:0}
/* Repli sûr : on ne retire l'outline natif du lien QUE si :has() est supporté
   (sinon l'anneau de focus clavier standard reste visible partout) */
@supports selector(:has(*)){
  .pcard-head h3 a:focus-visible{outline:none}
  .pcard:has(a:focus-visible){outline:3px solid var(--blue);outline-offset:6px;border-radius:18px}
}
.pcard p{font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.6}
.portfolio-cta{display:flex;justify-content:center;margin-top:clamp(38px,5vw,60px)}

/* ============================================================
   9. POURQUOI NOUS CONFIER  — grille 2×2 d'atouts
   ============================================================ */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.fcard{
  background:linear-gradient(180deg, #F6F6F6, #FBFBFB);
  border:1px solid var(--border);border-radius:16px;
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:16px;
}
.fcard-ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-tint);color:var(--blue);
}
.fcard-ic svg{width:33px;height:33px}   /* icône 33×33 desktop (demandé, section Pourquoi CogitoWeb) */
/* Titre de carte : fluide 18,02 → 24px · Corps : fluide 18 → 20px (mêmes valeurs que Services) */
.fcard h3{font-size:clamp(18.02px, calc(15.4px + 0.6719vw), 24px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.fcard p{font-size:clamp(18px, calc(16.88px + 0.4632vw), 20px);color:var(--muted);line-height:1.55}

/* ============================================================
   10. AVIS CLIENTS  — grille 3 colonnes (Google reviews)
   Section à fond gris (alternance blanc/gris, cf. §12) : cartes en blanc.
   ============================================================ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.review{
  background:var(--soft);border:1px solid var(--border);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;gap:16px;
}
.review > p{font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.65}

/* ============================================================
   11. INTÉRESSÉ ?  — CTA final (2 colonnes) + témoignage vedette
   Section à fond gris (alternance blanc/gris, cf. §12) : la carte
   témoignage reste blanche (héritée de .tcard) pour se détacher dessus.
   ============================================================ */
.cta-final .cta-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);align-items:center;
}
.cta-final .tcard{padding:32px}
.cta-final .tcard-title{font-size:19px}
.cta-final .section-head{margin-bottom:0}

/* ------------------------------------------------------------
   Alternance de fond blanc/gris entre sections (façon ViDesigns).
   Ces sections combinent `.section` (padding) et `.wrap` (largeur
   max 1240px) sur le même élément : un simple `background` ne
   couvrirait donc que la colonne centrale. Astuce CSS pour un fond
   plein cadre sans dupliquer chaque section en wrapper + contenu :
   un box-shadow très étalé fait office de fond hors-gabarit, et
   clip-path le restreint à la hauteur de l'élément (sinon il
   déborderait aussi sur les sections voisines, au-dessus/dessous).
   ------------------------------------------------------------ */
.services, .cta-final, .faq, .history, .method, .profiles{
  background:var(--section-bg);
  box-shadow:0 0 0 100vmax var(--section-bg);
  clip-path:inset(0 -100vmax);
}

/* ============================================================
   12. RESPONSIVE  (sections de contenu)
   ============================================================ */
@media (max-width:900px){
  .services-grid,.reviews-grid,.profiles-grid,.criteria-grid{grid-template-columns:1fr 1fr}
  .cta-final .cta-grid{grid-template-columns:1fr;gap:36px}
  .compare-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .portfolio-grid,.features-grid,.proof-grid,.pillars-grid,.citations-band,.form-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .services-grid,.reviews-grid,.profiles-grid,.criteria-grid{grid-template-columns:1fr}
  .pcard-head{flex-direction:column;gap:12px}
}

/* ============================================================
   13. FAQ  — en-tête centré (colonne) + onglets + accordéon natif
        (calqué ViDesigns « Your Questions, Answered »)
   ============================================================ */
/* En-tête dans la même colonne centrée que l'accordéon, texte aligné à gauche
   (comme ViDesigns : titre à gauche, onglets centrés, accordéon pleine largeur) */
.faq-head{max-width:720px;margin:0 auto clamp(32px,4vw,48px)}
.faq-head .section-title{margin-bottom:0}
.faq-head .section-intro{margin:16px 0 0}
.faq-head .btn-primary{margin-top:28px}

/* Sélecteur d'onglets (Projet & livraison / Tarifs) */
.faq-body{max-width:720px;margin-inline:auto}
.faq-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.faq-tab{
  padding:9px 20px;border-radius:var(--radius-pill);
  font-weight:500;font-size:14.5px;color:var(--ink);
  border:1px solid var(--border);background:#fff;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.faq-tab:hover{border-color:color-mix(in srgb, var(--ink) 30%, var(--border))}
.faq-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* anneau de focus épousant la forme pilule (cohérent avec le reste du site) */
.faq-tab:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--radius-pill)}

/* Accordéon : <details>/<summary> natif (accessible, sans JS pour l'ouverture) */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-list[hidden]{display:none}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-weight:500;font-size:16px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
/* Chevron en pur CSS (carré tourné) : bas quand fermé, haut quand ouvert */
.faq-item summary::after{
  content:"";flex:none;width:10px;height:10px;margin-top:-4px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(225deg);margin-top:2px}
.faq-item summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:12px}
.faq-answer{padding:0 22px 20px;font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.6}

/* ============================================================
   14. FOOTER  — carte sombre + colonnes de liens + watermark géant
        (calqué ViDesigns)
   ============================================================ */
/* Footer pleine largeur, fond très sombre. overflow:clip (pas hidden) pour
   ne PAS créer de scroll-container, ce qui casserait la view-timeline. */
.site-footer{
  position:relative;isolation:isolate;overflow:clip;
  background:#080B12;
  /* padding-top : la carte démarre un peu détachée du bord haut (sans excès) */
  padding:clamp(32px,4.5vw,60px) 24px clamp(28px,4vw,44px);
}
/* Carte infos : centrée, un peu plus claire que le fond pour se détacher.
   margin-bottom généreux = l'espace dans lequel le watermark se révèle. */
.footer-card{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto clamp(230px,30vw,380px);
  background:#141A29;color:#fff;border-radius:24px;
  border:1px solid rgba(255,255,255,.07);
  padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);
}
/* Watermark géant en arrière-plan, ancré bas-centre (révélé par la parallaxe) */
.footer-watermark{
  position:absolute;left:50%;bottom:clamp(56px,8vw,120px);
  transform:translateX(-50%);
  font-weight:900;font-size:clamp(64px,20vw,260px);line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.05);
  pointer-events:none;user-select:none;white-space:nowrap;z-index:1;
}
.footer-top{position:relative;z-index:1;text-align:center;margin-bottom:clamp(36px,5vw,56px)}
/* Logo vertical du footer : grosse pyramide au-dessus, wordmark en dessous */
.footer-logo{display:flex;flex-direction:column;align-items:center;gap:14px}
.footer-icon{width:clamp(92px,12vw,128px);height:clamp(92px,12vw,128px)}
.footer-brand{font-weight:900;font-size:30px;letter-spacing:-.02em;color:#fff}
.footer-brand span{color:var(--blue)}
.footer-tagline{
  font-weight:300;color:rgba(255,255,255,.72);line-height:1.5;
  max-width:48ch;margin:16px auto 0;font-size:15px;
}
.footer-address{font-size:13px;color:rgba(255,255,255,.5);margin-top:18px;letter-spacing:.02em}
.footer-contact{font-size:14.5px;color:rgba(255,255,255,.85);margin-top:10px}
.footer-contact a{font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-socials{display:flex;gap:12px;justify-content:center;margin-top:22px}
.footer-socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.footer-socials a:hover{background:var(--blue);border-color:var(--blue)}
.footer-socials svg{width:18px;height:18px}
/* Colonnes de liens */
.footer-cols{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(32px,4vw,44px);
}
.footer-col h4{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:16px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:14.5px;color:rgba(255,255,255,.82);font-weight:300;transition:color .18s var(--ease)}
.footer-col a:hover{color:#fff}
/* Mention légale : tout en bas du footer (hors carte), par-dessus le watermark */
.footer-legal{
  position:relative;z-index:2;text-align:center;
  font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.5;
}

/* --- Parallaxe au scroll ---
   Pilotée en JS (js/main.js), rAF-throttlé : cross-navigateur (Safari inclus,
   contrairement à animation-timeline: view() encore non supporté par WebKit).
   Le JS applique translateY sur .footer-card (descend / s'éloigne du haut) et
   sur .footer-watermark (remonte et se révèle). Respecte prefers-reduced-motion :
   si actif, le JS ne s'attache pas et tout reste en position finale statique
   (.footer-card sans transform, .footer-watermark centré ci-dessus). */

/* Responsive FAQ + footer */
@media (max-width:760px){
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .faq-item summary{font-size:15px;padding:16px 18px}
  .footer-cols{grid-template-columns:1fr;text-align:center}
  .footer-col ul{align-items:center}
}

/* ============================================================
   15. ANIMATIONS D'ENTRÉE — cascade au scroll
   Toutes les grilles de cartes + les listes FAQ (home + référencement
   local) : fondu + léger glissement vers le haut, cascadés via l'index
   --i posé en ligne dans le HTML (style="--i:1"…). Le timing (délai,
   durée, courbe) est 100% CSS via calc(var(--i) * 100ms) ; le JS
   (main.js) se contente d'ajouter .is-visible sur la grille/liste dès
   qu'elle commence à entrer dans l'écran (IntersectionObserver, seuil
   0.15) — il ne calcule aucun délai, juste le déclenchement. Les
   .faq-item réutilisent exactement la même animation que les cartes
   (même durée, même courbe, même glissement) pour rester cohérent et
   discret.
   ============================================================ */
.services-grid .svc-card,
.features-grid .fcard,
.profiles-grid .svc-card,
.proof-grid .proof-card,
.criteria-grid .fcard,
.pillars-grid .pillar-card,
.compare-grid .compare-col,
.timeline .timeline-step,
.faq-list .faq-item{
  opacity:0;
  transform:translateY(30px);
}
.services-grid.is-visible .svc-card,
.features-grid.is-visible .fcard,
.profiles-grid.is-visible .svc-card,
.proof-grid.is-visible .proof-card,
.criteria-grid.is-visible .fcard,
.pillars-grid.is-visible .pillar-card,
.compare-grid.is-visible .compare-col,
.timeline.is-visible .timeline-step,
.faq-list.is-visible .faq-item{
  animation:card-entrance .7s var(--ease-out-expo) forwards;
  animation-delay:calc(var(--i) * 100ms);
}
@keyframes card-entrance{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .services-grid .svc-card,
  .features-grid .fcard,
  .profiles-grid .svc-card,
  .proof-grid .proof-card,
  .criteria-grid .fcard,
  .pillars-grid .pillar-card,
  .compare-grid .compare-col,
  .timeline .timeline-step,
  .faq-list .faq-item{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* ============================================================
   16. BANDEAU CHIFFRES  (page Référencement local)
   Bande pleine largeur fond --soft, 4 chiffres géants + source.
   .stats-band combine directement .wrap (comme .hero/.trust) : padding-block
   uniquement, jamais de padding raccourci (cf. Pièges à éviter, CLAUDE.md).
   ============================================================ */
.stats-band{
  background:var(--soft);
  box-shadow:0 0 0 100vmax var(--soft);
  clip-path:inset(0 -100vmax);
  padding-block:clamp(40px,6vw,64px);
}
.stats-label{
  text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:clamp(28px,4vw,40px);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;text-align:center}
/* Chiffre fluide 35,2 → 64px (formule CLAUDE.md, desktop 64px) */
.stat-num{
  font-weight:900;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(35.2px, calc(22.6px + 3.236vw), 64px);
  color:var(--blue);margin-bottom:10px;
}
.stat-text{font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--ink);line-height:1.4;margin-bottom:8px}
.stat-source{font-size:12px;color:var(--muted)}

/* ============================================================
   17. NOS PREUVES  (page Référencement local)
   2 cartes .proof-card, inspirées de .pcard (pas de chrome de carte,
   la structure interne porte la mise en forme) : badge, texte, visuel
   (placeholder tant que l'image réelle n'est pas fournie), encart
   résultat, liste "ce qu'on a fait", lien vers l'étude de cas complète.
   ============================================================ */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,48px) 28px}
.proof-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:16px}
.proof-card > p{font-size:clamp(18px, calc(16.88px + 0.4632vw), 20px);color:var(--muted);line-height:1.6}
.proof-media{border-radius:14px;overflow:hidden;border:1px solid var(--border)}
/* Placeholder visuel (visuel réel pas encore fourni, cf. dépendances) :
   role="img" + aria-label reprend déjà le texte alternatif final, prêt à
   basculer sur un <img> sans rien changer côté accessibilité. */
.proof-media-placeholder{
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--soft);color:var(--muted);
}
.proof-media-placeholder svg{width:28px;height:28px}
.proof-media-placeholder span{font-size:12.5px;font-weight:500}
.proof-media figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted);background:#fff;border-top:1px solid var(--border)}
.proof-result{
  background:var(--blue-tint);
  border:1px solid color-mix(in srgb, var(--blue) 30%, var(--blue-tint));
  border-radius:10px;padding:12px 16px;
  font-weight:700;font-size:15px;color:var(--blue-deep);
}
.proof-did-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.proof-did ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.proof-did li{position:relative;padding-left:20px;font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--ink);line-height:1.5}
.proof-did li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* ============================================================
   18. DE MARRAKECH À LA HAUTE-SAVOIE  (page Référencement local)
   Simple bloc texte centré, sans grille ni visuel.
   ============================================================ */
.history-inner{max-width:70ch;margin-inline:auto;text-align:center}
.history-inner .section-title{margin-bottom:24px}
.history-inner p{font-size:clamp(16px, calc(14.24px + 0.45vw), 20px);color:var(--lead);line-height:1.6;font-weight:300}
.history-inner p + p{margin-top:18px}

/* ============================================================
   19. LE RÉFÉRENCEMENT LOCAL, CONCRÈTEMENT  (page Référencement local)
   Intro texte + 3 mini-cartes réutilisant .fcard/.fcard-ic tel quel
   (cf. CLAUDE.md note de contenu) dans une grille 3 colonnes dédiée.
   ============================================================ */
.criteria-intro{max-width:70ch;margin:0 auto clamp(36px,5vw,52px);text-align:center}
.criteria-intro .section-title{margin-bottom:20px}
.criteria-intro p{font-size:clamp(16px, calc(14.24px + 0.45vw), 20px);color:var(--lead);line-height:1.6;font-weight:300}
.criteria-intro p + p{margin-top:14px}
.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.criteria-outro{max-width:70ch;margin:clamp(32px,4vw,44px) auto 0;text-align:center;font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.6}

/* ============================================================
   20. LA MÉTHODE : QUATRE PILIERS  (page Référencement local)
   Grille 2×2 façon .features-grid, mais cartes .pillar-card (badge
   numéroté + sous-liste à puces).
   ============================================================ */
.pillars-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pillar-card{
  background:linear-gradient(180deg,#F6F6F6,#FBFBFB);
  border:1px solid var(--border);border-radius:16px;
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;
}
.pillar-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--blue-tint);color:var(--blue-deep);
  font-weight:700;font-size:14px;
}
.pillar-card h3{font-size:clamp(18.02px, calc(15.4px + 0.6719vw), 24px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.pillar-card > p{font-size:clamp(18px, calc(16.88px + 0.4632vw), 20px);color:var(--muted);line-height:1.55}
.pillar-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.pillar-card li{position:relative;padding-left:18px;font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--ink);line-height:1.5}
.pillar-card li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--blue)}

/* ============================================================
   21. CE QUI NE SUFFIT PLUS / CE QUI FAIT LA DIFFÉRENCE
   (page Référencement local) — .compare, 2 colonnes contrastées.
   ============================================================ */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare-col{border-radius:16px;padding:clamp(24px,3vw,32px)}
.compare-col h3{font-size:18px;font-weight:700;margin-bottom:18px}
.compare-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.compare-col li{position:relative;padding-left:28px;font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);line-height:1.5}
.compare-col li::before{position:absolute;left:0;top:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.compare-col--out{background:var(--soft);border:1px solid var(--border)}
.compare-col--out h3,
.compare-col--out li{color:var(--muted)}
.compare-col--out li::before{content:"✕";color:#B9C0CC}
.compare-col--in{background:var(--blue-tint);border:1px solid color-mix(in srgb, var(--blue) 30%, var(--blue-tint))}
.compare-col--in h3,
.compare-col--in li{color:var(--ink)}
.compare-col--in li::before{content:"✓";color:var(--blue)}

/* ============================================================
   22. COMMENT SE DÉROULE L'ACCOMPAGNEMENT  (page Référencement local)
   .timeline : 4 étapes numérotées, horizontales desktop / verticales
   mobile, reliées par une ligne (::before). Détaché du fond par un
   anneau blanc (box-shadow) autour de chaque badge.
   ============================================================ */
.timeline{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 24px}
.timeline::before{
  content:"";position:absolute;top:22px;left:0;right:0;height:2px;
  background:var(--border);z-index:0;
}
.timeline-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
.timeline-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:700;font-size:17px;
  box-shadow:0 0 0 6px #fff;
}
.timeline-step h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.timeline-step p{font-size:clamp(14.58px, calc(13.96px + 0.1596vw), 16px);color:var(--muted);line-height:1.55}
@media (max-width:820px){
  .timeline{grid-template-columns:1fr;gap:28px}
  .timeline::before{top:0;bottom:0;left:22px;right:auto;width:2px;height:auto}
}

.profiles-cities{text-align:center;font-size:13.5px;color:var(--muted);margin-top:clamp(28px,4vw,40px)}

/* ============================================================
   23. VISIBLE BIEN AU-DELÀ DE GOOGLE  (page Référencement local)
   .citations-band : variante texte-badge de .trust .logos (mêmes
   couleurs/traitement grayscale), groupée par catégorie de support.
   ============================================================ */
.citations-band{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.citation-group{display:flex;flex-direction:column;gap:12px}
.citation-cat{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}
.citation-list{display:flex;flex-wrap:wrap;gap:8px 18px}
.citation-list span{
  font-weight:700;font-size:13.5px;color:#9AA3B0;
  filter:grayscale(1);opacity:.85;letter-spacing:-.01em;
}

/* ============================================================
   24. VOTRE AUDIT DE VISIBILITÉ LOCALE, GRATUIT
   (page Référencement local) — .contact-form, première page du site
   avec un formulaire embarqué. Anneau de focus géré par la règle
   globale :focus-visible ; le focus (clic ou clavier) change juste
   la couleur de bordure, sans jamais retirer l'outline.
   ============================================================ */
.contact-form{max-width:820px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin-bottom:28px}
.form-field--full{grid-column:1 / -1}

/* --- Champs à label flottant -------------------------------------------------
   Le label est superposé au champ et sert de placeholder au repos ; il « flotte »
   vers le haut dès que le champ est focus ou rempli. 100 % CSS, sans JS.
   Le label suit le champ dans le DOM : on distingue vide / rempli via
   :placeholder-shown (d'où le placeholder=" " côté HTML) et le focus via :focus. */
.form-field{position:relative;display:flex;flex-direction:column}

.form-field input,
.form-field textarea{
  font-family:inherit;font-size:15px;color:var(--ink);
  /* padding-top généreux : réserve la place du label une fois flotté */
  padding:24px 16px 8px;border:1.5px solid var(--border);border-radius:10px;
  background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.form-field textarea{resize:vertical;min-height:120px;padding-top:26px}
/* Focus léger : on retire le gros outline bleu global (:focus-visible) et on
   éclaire doucement le champ — bordure bleutée discrète, halo diffus, et un
   très léger dégradé bleu depuis le haut. Le halo (box-shadow) assure à lui
   seul la visibilité clavier exigée, sans l'aspect « cerné » d'un outline épais. */
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:color-mix(in srgb, var(--blue) 45%, var(--border));
  background-image:linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, #fff), #fff 62%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent),
    0 4px 12px -4px color-mix(in srgb, var(--blue) 22%, transparent);
}

/* Le vrai placeholder d'exemple (ex. « plombier Cluses ») est un indice :
   masqué au repos pour ne pas concurrencer le label, révélé au focus quand
   le label a déjà remonté. */
.form-field input::placeholder,
.form-field textarea::placeholder{color:transparent}
.form-field input:focus::placeholder,
.form-field textarea:focus::placeholder{color:var(--muted)}

/* Label au repos : posé comme un placeholder, à l'intérieur du champ.
   nowrap + ellipsis : un libellé long (« Lien de votre fiche Google Business
   Profile… ») ne doit pas passer sur deux lignes et chevaucher le champ sur
   mobile ; il se tronque proprement. max-width laisse la gouttière de droite. */
.form-field label{
  position:absolute;left:17px;top:18px;max-width:calc(100% - 34px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:15px;font-weight:400;color:var(--muted);
  pointer-events:none;transform-origin:left top;
  transition:transform .18s var(--ease), color .18s var(--ease);
}
/* Label flotté : champ focus OU rempli (:not(:placeholder-shown)). */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-11px) scale(.78);
}
/* Focus : le label passe au bleu, en écho à la bordure. */
.form-field:focus-within label{color:var(--blue)}

.form-optional{font-weight:300;color:var(--muted)}
.form-consent{display:flex;align-items:flex-start;gap:12px;margin-bottom:28px;cursor:pointer}
.form-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--blue)}
.form-consent span{font-size:13.5px;color:var(--muted);line-height:1.5}
.form-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.form-reassurance{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}

/* ============================================================
   25bis. RESPONSIVE — grilles de la page « Référencement local »
   ------------------------------------------------------------
   IMPORTANT (cascade / ordre source) : les grilles ci-dessous (.stats-grid,
   .proof-grid, .criteria-grid, .pillars-grid, .compare-grid, .citations-band,
   .form-grid) sont définies APRÈS le bloc responsive §12. À spécificité égale,
   c'est la dernière règle du fichier qui gagne : si on repliait ces grilles
   depuis §12 (plus haut), leurs définitions de base — repeat(2/3/4, 1fr) —
   les écraseraient et rien ne se replierait en mobile (scroll horizontal,
   cartes écrasées). Leurs media queries doivent donc vivre ICI, en fin de
   fichier. Les grilles de la home (services, avis, réalisations, atouts) sont
   déclarées AVANT §12 : elles restent gérées là-bas, ne pas les dupliquer.
   ============================================================ */
@media (max-width:900px){
  /* Tablette : on casse les grilles les plus larges en deux (ou une) colonnes. */
  .stats-grid{grid-template-columns:repeat(2,1fr)}   /* 4 chiffres → 2×2 */
  .criteria-grid{grid-template-columns:repeat(2,1fr)}/* 3 critères → 2 + 1 */
  .compare-grid{grid-template-columns:1fr}           /* 2 colonnes contrastées empilées */
}
@media (max-width:680px){
  /* Mobile large : tout ce qui reste sur 2 colonnes passe en une seule. */
  .proof-grid,.pillars-grid,.citations-band,.form-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .criteria-grid{grid-template-columns:1fr}          /* les 3 critères s'empilent */
}

/* ============================================================
   25. SECTIONS À VENIR  (voir roadmap dans CLAUDE.md)
   - Notre méthode / process (page d'accueil)
   ============================================================ */