:root{
    --blue-agua:#1862AD;
    --blue-agua-light:#03A0DD;
    --night:#102B3F;
    --stone:#F4F1EA;
    --white:#FFFFFF;
    --sand:#E8E1D5;
    --terracotta:#B85C35;
    --anthracite:#17212B;
    --slate:#56616B;
    --radius-s:4px;
    --radius-m:12px;
    --radius-l:24px;
    --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
    --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px;
    --serif:'Fraunces', Georgia, serif;
    --sans:'Public Sans', -apple-system, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--anthracite);
    background:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 var(--space-3);}
  @media (min-width:1440px){ .wrap{padding:0 var(--space-6);} }

  /* Skip link for accessibility */
  .skip-link{position:absolute; left:-999px; top:0; background:var(--night); color:#fff; padding:12px 20px; z-index:100;}
  .skip-link:focus{left:var(--space-2); top:var(--space-2);}

  :focus-visible{outline:3px solid var(--blue-agua-light); outline-offset:2px;}

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--sand);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:var(--space-2) 0;}
  .brand{display:flex; align-items:center; gap:14px; font-weight:600; font-size:1.05rem;}
  .brand img{width:78px; height:78px; border-radius:50%; flex-shrink:0;}
  @media (max-width:479px){ .brand img{width:56px; height:56px;} }

  /* "Sud" mark — artistic, animated on load, respects reduced motion */
  .sud-mark{
    position:relative; display:inline-block;
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:1.6rem; color:var(--terracotta); line-height:1;
    letter-spacing:0.01em;
  }
  .sud-mark .sud-letter{
    display:inline-block; opacity:0; transform:translateY(6px);
    animation:sud-rise 0.5s ease forwards;
  }
  .sud-mark .sud-letter:nth-child(1){animation-delay:0.15s;}
  .sud-mark .sud-letter:nth-child(2){animation-delay:0.28s;}
  .sud-mark .sud-letter:nth-child(3){animation-delay:0.41s;}
  @keyframes sud-rise{ to{ opacity:1; transform:translateY(0); } }
  .sud-mark svg{
    position:absolute; left:0; bottom:-4px; width:100%; height:10px; overflow:visible;
  }
  .sud-mark svg path{
    stroke:var(--blue-agua-light); stroke-width:2.5; fill:none;
    stroke-linecap:round;
    stroke-dasharray:60; stroke-dashoffset:60;
    animation:sud-draw 0.6s ease forwards;
    animation-delay:0.6s;
  }
  @keyframes sud-draw{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){
    .sud-mark .sud-letter{opacity:1; transform:none; animation:none;}
    .sud-mark svg path{stroke-dashoffset:0; animation:none;}
  }
  .nav-links{display:none; gap:var(--space-4); font-size:0.95rem; font-weight:500;}
  .nav-links a{text-decoration:none; color:var(--anthracite); transition:color .15s ease;}
  .nav-links a:hover{color:var(--blue-agua);}
  @media (min-width:1024px){ .nav-links{display:flex; align-items:center;} }
  /* Le menu principal (niveau 1) s'affiche en majuscules ; les sous-menus (colonnes
     du méga menu) restent inchangés, d'où le sélecteur direct-enfant. */
  .nav-links > a, .nav-links > .nav-mega > .mega-trigger{
    text-transform:uppercase; letter-spacing:0.04em; font-size:0.85rem; font-weight:600;
  }

  .header-phone{
    display:inline-flex; align-items:center; gap:7px;
    color:var(--blue-agua); font-weight:600; font-size:0.88rem;
    text-decoration:none; white-space:nowrap;
    border:1.5px solid var(--blue-agua); border-radius:999px;
    padding:8px 14px; transition:background .15s ease, color .15s ease;
  }
  .header-phone:hover{background:var(--blue-agua); color:#fff;}
  .header-phone svg{flex-shrink:0;}
  /* Mobile : icône seule, compacte, pour ne jamais faire déborder le header */
  .header-phone span{display:none;}
  @media (min-width:560px){ .header-phone span{display:inline;} }
  @media (min-width:1024px){ .header-phone{padding:9px 16px;} }

  /* En dessous de 480px : le bouton "Demander un devis" garde son texte
     (jamais tronqué pour l'accessibilité) mais devient plus compact, et
     l'espacement entre téléphone/CTA/menu est resserré, pour que les trois
     tiennent sur un très petit écran sans déborder du header. */
  @media (max-width:479px){
    .header-phone{padding:8px 10px;}
    header .wrap.nav > div:last-child{gap:6px !important;}
    header .btn-accent{padding:10px 14px; font-size:0.85rem;}
  }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 22px; border-radius:var(--radius-s);
    font-weight:600; font-size:0.95rem; text-decoration:none;
    border:1.5px solid transparent; cursor:pointer;
    transition:transform .15s ease, background .15s ease;
    min-height:44px;
  }
  .btn-primary{background:var(--night); color:#fff;}
  .btn-primary:hover{transform:translateY(-2px); background:#0c2130;}
  .btn-accent{background:var(--terracotta); color:#fff;}
  .btn-accent:hover{transform:translateY(-2px); background:#a04f2c;}
  .btn-ghost{border-color:var(--night); color:var(--night); background:transparent;}
  .btn-ghost:hover{background:var(--stone);}
  .menu-toggle{display:inline-flex; background:none; border:none; padding:8px; cursor:pointer;}
  @media (min-width:1024px){ .menu-toggle{display:none;} }

  /* Hero — full-bleed photo supplied by the client, with a brand-toned overlay
     (night blue → transparent) so the headline stays legible without flattening the photo */
  .hero{
    position:relative; overflow:hidden;
    min-height:640px;
    display:flex; align-items:flex-end;
    padding:var(--space-7) 0 var(--space-6);
    color:#fff;
  }
  .hero-photo{
    position:absolute; inset:0; z-index:0;
    background-image:url('../images/hero-marseille-terrasse.jpg');
    background-size:cover; background-position:center 30%;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(16,43,63,0.92) 0%, rgba(16,43,63,0.55) 45%, rgba(16,43,63,0.15) 75%);
  }
  .hero-content{position:relative; z-index:2; max-width:680px;}
  h1{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(2.4rem, 5.2vw, 4.2rem);
    line-height:1.08; color:#fff;
    max-width:14ch;
  }
  .hero-sub{font-size:1.2rem; color:rgba(255,255,255,0.88); max-width:52ch; margin-top:var(--space-4);}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5);}

  /* Phrase de réassurance — mise en avant sous forme de pastille, une seule ligne
     tant que la largeur d'écran le permet (ne se remet à la ligne qu'en dernier
     recours, sur très petit écran). */
  .hero-reassurance{
    display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
    width:max-content; max-width:min(92vw, 720px);
    margin-top:var(--space-5);
    padding:12px 22px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.4);
    border-radius:999px;
    color:#fff; font-weight:600; font-size:0.92rem;
    white-space:nowrap;
  }
  .hero-reassurance span[aria-hidden]{color:rgba(255,255,255,0.55); font-weight:400;}
  @media (max-width:700px){
    /* width:max-content force la largeur au contenu non replié — il faut la lever
       ici pour que flex-wrap puisse effectivement replier les segments sur petit écran. */
    .hero-reassurance{white-space:normal; font-size:0.82rem; padding:10px 16px; width:auto; max-width:100%;}
  }
  .hero .btn-ghost{border-color:#fff; color:#fff;}
  .hero .btn-ghost:hover{background:rgba(255,255,255,0.12);}

  /* Bulles animées — effet demandé par le client, adapté à la palette de marque et
     limité à l'image hero (conteneur avec overflow:hidden hérité de .hero) ; pas
     d'impact sur les clics (pointer-events:none) ; désactivé en reduced-motion. */
  .hero-bubbles{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;}
  .hero-bubbles span{
    position:absolute; bottom:-60px; border-radius:50%;
    background:rgba(255,255,255,0.22);
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:inset 0 0 10px rgba(255,255,255,0.35), 0 2px 6px rgba(255,255,255,0.15);
    animation:hero-bubble-rise 9s infinite ease-in;
  }
  .hero-bubbles span::after{
    content:''; position:absolute; top:22%; left:22%; width:26%; height:26%;
    background:rgba(255,255,255,0.55); border-radius:50%;
  }
  @keyframes hero-bubble-rise{
    0%{ transform:translateY(0) translateX(0) scale(1); opacity:0; }
    12%{ opacity:1; }
    88%{ opacity:0.7; }
    100%{ transform:translateY(-640px) translateX(36px) scale(1.15); opacity:0; }
  }
  .hero-bubbles span:nth-child(1){ left:5%;  width:32px; height:32px; animation-duration:8s;  animation-delay:0s; }
  .hero-bubbles span:nth-child(2){ left:16%; width:18px; height:18px; animation-duration:10s; animation-delay:2s; }
  .hero-bubbles span:nth-child(3){ left:29%; width:44px; height:44px; animation-duration:11s; animation-delay:1s; }
  .hero-bubbles span:nth-child(4){ left:42%; width:24px; height:24px; animation-duration:8.5s; animation-delay:4s; }
  .hero-bubbles span:nth-child(5){ left:58%; width:38px; height:38px; animation-duration:10s; animation-delay:3s; }
  .hero-bubbles span:nth-child(6){ left:71%; width:20px; height:20px; animation-duration:7.5s; animation-delay:5s; }
  .hero-bubbles span:nth-child(7){ left:83%; width:30px; height:30px; animation-duration:9.5s; animation-delay:1.5s; }
  .hero-bubbles span:nth-child(8){ left:93%; width:16px; height:16px; animation-duration:8s;  animation-delay:6s; }
  @media (prefers-reduced-motion: reduce){ .hero-bubbles{display:none;} }

  /* Header en surimpression sur la hero (page d'accueil uniquement) — la photo
     couvre tout le header, avec un dégradé sombre→transparent propre au header
     pour garder le logo et le menu lisibles. Une fois le défilement passé la
     hero, le header redevient plein (comme sur les autres pages). */
  .header--overlay{
    position:absolute; top:0; left:0; right:0; z-index:20;
    background:transparent; border-bottom:none; backdrop-filter:none;
    transition:background .25s ease, border-color .25s ease;
  }
  .header--overlay::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(16,43,63,0.55) 0%, rgba(16,43,63,0) 100%);
    pointer-events:none; transition:opacity .25s ease;
  }
  .header--overlay .brand,
  .header--overlay .header-phone{ color:#fff; }
  /* Le blanc ne s'applique au menu qu'au-delà de 1024px : en dessous, le menu
     mobile s'ouvre sur un fond blanc opaque (voir main.js) et doit garder un
     texte sombre pour rester lisible, même quand le header est encore transparent.
     Sélecteurs d'enfant direct uniquement : le sous-menu (liens des colonnes du
     méga menu, sur fond blanc) ne doit jamais hériter de ce blanc, sous peine de
     devenir illisible sur son propre panneau. */
  @media (min-width:1024px){
    .header--overlay .nav-links > a,
    .header--overlay .nav-links > .nav-mega > .mega-trigger{ color:#fff; }
  }
  .header--overlay .header-phone{ border-color:rgba(255,255,255,0.7); }
  .header--overlay .header-phone:hover{ background:rgba(255,255,255,0.15); color:#fff; }
  .header--overlay .menu-toggle svg{ stroke:#fff; }
  .header--overlay.is-scrolled{
    position:sticky;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--sand);
  }
  .header--overlay.is-scrolled::before{ opacity:0; }
  .header--overlay.is-scrolled .nav-links > a,
  .header--overlay.is-scrolled .nav-links > .nav-mega > .mega-trigger,
  .header--overlay.is-scrolled .brand,
  .header--overlay.is-scrolled .header-phone{ color:var(--anthracite); }
  .header--overlay.is-scrolled .header-phone{ color:var(--blue-agua); border-color:var(--blue-agua); }
  .header--overlay.is-scrolled .menu-toggle svg{ stroke:#102B3F; }
  @media (prefers-reduced-motion: reduce){ .header--overlay, .header--overlay::before{ transition:none; } }

  /* Hero "plain" des pages villes/guides/hub/outil/institutionnelles — .city-hero
     n'avait jamais de fond défini, alors que .hero-sub (ci-dessus) est blanc à 88%
     partout : texte quasi invisible sur fond blanc hérité par défaut. Corrigé ici,
     avec des couleurs propres à ce contexte clair (plus prioritaires que la règle
     .hero-sub globale grâce au sélecteur composé). */
  .city-hero{background:var(--stone); padding:var(--space-6) 0;}
  .city-hero h1{color:var(--night); max-width:20ch;}
  .city-hero .hero-sub{color:var(--slate); max-width:60ch;}

  /* Hero des pages villes — bandeau compact et animé, volontairement très différent
     du hero plein écran de l'accueil : une page ville est une page interne, pas une
     page d'atterrissage. Fond dégradé de marque + motif animé discret (aucune photo
     plein écran), hauteur pilotée par le contenu plutôt que par le viewport. */
  .city-hero-pro{
    position:relative; overflow:hidden;
    background:linear-gradient(120deg, var(--night) 0%, var(--blue-agua) 100%);
    padding:var(--space-4) 0;
    color:#fff;
  }
  .city-hero-photo-wash{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    opacity:0.14; filter:grayscale(0.25);
  }
  .city-hero-pattern{
    position:absolute; inset:-10%; z-index:0; pointer-events:none;
    background-image:
      radial-gradient(circle at 18% 28%, rgba(255,255,255,0.16) 0, transparent 40%),
      radial-gradient(circle at 82% 74%, rgba(3,160,221,0.28) 0, transparent 42%),
      radial-gradient(circle at 60% 12%, rgba(184,92,53,0.18) 0, transparent 36%);
    animation:city-hero-drift 18s ease-in-out infinite alternate;
  }
  @keyframes city-hero-drift{
    0%{ transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(-3%,3%,0) scale(1.1); }
  }
  .city-hero-inner{position:relative; z-index:1; max-width:760px;}
  .city-hero-kicker{
    display:inline-flex; align-items:center; gap:8px;
    font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.32);
    padding:5px 14px 5px 12px; border-radius:999px; margin-bottom:var(--space-2);
  }
  .city-hero-kicker .dot{
    width:6px; height:6px; border-radius:50%; background:var(--terracotta); flex-shrink:0;
    animation:city-hero-pulse 2s ease-in-out infinite;
  }
  @keyframes city-hero-pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.45; transform:scale(0.7);} }
  .city-hero-pro h1{color:#fff; max-width:26ch; font-size:clamp(1.6rem, 2.8vw, 2.15rem); line-height:1.15;}
  .city-hero-lead{color:rgba(255,255,255,0.94); font-weight:600; margin-top:var(--space-2); font-size:0.98rem; line-height:1.5; max-width:64ch;}
  .city-hero-sub{color:rgba(255,255,255,0.8); margin-top:8px; font-size:0.95rem; line-height:1.5; max-width:64ch;}
  .city-hero-pro .hero-ctas{margin-top:var(--space-3);}
  .city-hero-pro .btn-ghost{border-color:#fff; color:#fff;}
  .city-hero-pro .btn-ghost:hover{background:rgba(255,255,255,0.12);}
  .city-hero-badges{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin-top:var(--space-3); padding:0;}
  .city-hero-badges li{
    display:flex; align-items:center; gap:6px;
    font-size:0.78rem; color:rgba(255,255,255,0.88);
    background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.22);
    padding:5px 11px; border-radius:999px;
  }
  .city-hero-badges li::before{content:'✓'; color:var(--blue-agua-light); font-weight:700;}
  @media (max-width:479px){
    .city-hero-pro{padding:var(--space-3) 0;}
    .city-hero-badges{display:none;} /* réassurance déjà reprise ailleurs sur le site — priorité à la compacité sur très petit écran */
  }
  @media (prefers-reduced-motion: reduce){
    .city-hero-pattern{animation:none;}
    .city-hero-kicker .dot{animation:none;}
  }

  section{padding:var(--space-7) 0;}
  .section-head{max-width:640px; margin:0 auto var(--space-5) auto; text-align:center;}
  h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem, 3vw, 2.1rem); color:var(--night);}
  .section-lede{color:var(--slate); margin-top:var(--space-2); font-size:1.05rem;}

  /* Qui/Quoi/Où band — kept light rather than a second dark block, so the night-blue
     final CTA remains the only heavy-contrast section besides the tool band */
  .facts{background:var(--white); border-top:1px solid var(--sand); border-bottom:1px solid var(--sand);}
  .facts-grid{display:grid; gap:var(--space-4); grid-template-columns:1fr;}
  @media (min-width:768px){ .facts-grid{grid-template-columns:repeat(4,1fr);} }
  /* Variante 3 colonnes : sans ce modificateur, une grille de seulement 3 éléments
     héritait du repeat(4,1fr) ci-dessus et ne remplissait que 3 des 4 colonnes,
     ce qui la décalait visiblement vers la gauche par rapport au texte centré
     au-dessus d'elle. */
  @media (min-width:768px){ .facts-grid.facts-grid--3{grid-template-columns:repeat(3,1fr);} }
  /* .two-col : utilisée par templates/pages/city.php (bloc "Contexte local") et
     templates/pages/service.php mais jusqu'ici sans règle CSS associée — les deux
     colonnes s'empilaient donc systématiquement, y compris en desktop. */
  .two-col{display:grid; gap:var(--space-4); grid-template-columns:1fr;}
  @media (min-width:768px){ .two-col{grid-template-columns:1.3fr 1fr; gap:var(--space-6); align-items:start;} }
  /* Chaque point présenté comme une carte à part entière plutôt qu'une simple
     ligne de définition — même traitement visuel que les cartes services/villes. */
  .fact{
    text-align:center; background:var(--white); border:1px solid var(--sand);
    border-radius:var(--radius-m); padding:var(--space-4);
    box-shadow:0 2px 8px rgba(16,43,63,0.04);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .fact:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,43,63,0.08);}
  .fact dt{font-family:var(--serif); font-style:italic; font-size:0.95rem; color:var(--blue-agua); margin-bottom:8px;}
  .fact dd{font-size:1.05rem; font-weight:500; color:var(--night);}
  @media (prefers-reduced-motion: reduce){ .fact{transition:none;} .fact:hover{transform:none;} }

  /* Villes grid */
  .cities{display:grid; gap:var(--space-3); grid-template-columns:1fr;}
  @media (min-width:640px){ .cities{grid-template-columns:1fr 1fr;} }
  @media (min-width:1024px){ .cities{grid-template-columns:repeat(3,1fr);} }
  .city-card{
    background:var(--white); border:1px solid var(--sand); border-radius:var(--radius-m);
    padding:var(--space-4); transition:transform .18s ease, box-shadow .18s ease;
    text-align:center;
  }
  .city-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,43,63,0.10);}
  .city-card h3{font-family:var(--serif); font-size:1.3rem; font-weight:500; color:var(--night); margin-bottom:6px;}
  .city-card p{color:var(--slate); font-size:0.95rem; margin-bottom:var(--space-3);}
  .city-card a{font-weight:600; color:var(--blue-agua); text-decoration:none; font-size:0.9rem;}

  /* Carte d'aide "votre ville n'apparaît pas" — même principe que la carte
     service--helper : distincte (fond dégradé de marque), intégrée dans la
     grille plutôt qu'en bloc séparé, pour apparaître juste après la dernière
     ville (Carcassonne). */
  .city-card--helper{
    background:linear-gradient(135deg, var(--blue-agua) 0%, var(--blue-agua-light) 100%);
    border:none; color:#fff; display:flex; flex-direction:column; justify-content:center; gap:var(--space-2);
  }
  .city-card--helper h3{color:#fff;}
  .city-card--helper p{color:rgba(255,255,255,0.9);}
  .city-card--helper .btn-accent{align-self:center; margin-top:var(--space-2); color:#fff;} /* la règle générique .city-card a (plus spécifique : classe+élément) écrasait sinon le blanc de .btn-accent */

  /* Services */
  .services-band{background:var(--stone);}
  .tint{background:var(--stone);}
  /* Rythme visuel entre sections : chaque section à fond coloré a désormais sa
     propre teinte (au lieu de répéter deux fois la même pierre à la suite). */
  .tint-blue{background:#EEF6FC;}
  .tint-peach{background:#FCF1EC;}
  .services{display:grid; gap:var(--space-3); grid-template-columns:1fr;}
  @media (min-width:640px){ .services{grid-template-columns:1fr 1fr;} }
  @media (min-width:1024px){ .services{grid-template-columns:repeat(3,1fr);} }
  .service-card{background:var(--white); border-radius:var(--radius-m); padding:var(--space-4); border:1px solid var(--sand); text-align:center;}
  .service-icon{width:40px; height:40px; margin-bottom:var(--space-2);}
  .service-card h3{font-size:1.05rem; font-weight:600; margin-bottom:6px;}
  .service-card p{color:var(--slate); font-size:0.92rem;}

  /* Carte d'aide "vous ne savez pas quelle prestation" — volontairement distincte
     (fond dégradé bleu de marque) pour se détacher des huit cartes de service
     tout en restant dans la même grille, juste à droite de la dernière prestation. */
  .service-card--helper{
    background:linear-gradient(135deg, var(--blue-agua) 0%, var(--blue-agua-light) 100%);
    border:none; color:#fff; display:flex; flex-direction:column; justify-content:center; gap:var(--space-2);
    grid-column:1 / -1; /* pleine largeur de la grille (3 colonnes desktop), quel que soit le nombre de services */
  }
  .service-card--helper h3{color:#fff;}
  .service-card--helper p{color:rgba(255,255,255,0.9);}
  .service-card--helper .btn-accent{align-self:center; margin-top:var(--space-2);}
  @media (min-width:768px){
    .service-card--helper{flex-direction:row; align-items:center; justify-content:space-between; text-align:left; gap:var(--space-5); padding:var(--space-5) var(--space-6);}
    .service-card--helper .service-card--helper-text{flex:1;}
    .service-card--helper h3{margin-bottom:4px;}
    .service-card--helper .btn-accent{align-self:center; margin-top:0; flex-shrink:0;}
  }

  /* Grille "environnements professionnels" : identique à .facts-grid (4 colonnes
     desktop) mais capable de centrer une dernière ligne de 3 éléments sous 4 —
     grille à 8 colonnes, chaque .fact occupe 2 colonnes (= 4/ligne), et la ligne
     de 3 (enfants 5,6,7) démarre à la colonne 2 pour rester centrée. */
  .env-grid{display:grid; gap:var(--space-4); grid-template-columns:1fr;}
  @media (min-width:768px){
    .env-grid{grid-template-columns:repeat(8,1fr);}
    .env-grid .fact{grid-column:span 2;}
    .env-grid .fact:nth-child(5){grid-column:2 / span 2;}
    .env-grid .fact:nth-child(6){grid-column:4 / span 2;}
    .env-grid .fact:nth-child(7){grid-column:6 / span 2;}
  }

  /* Bandeau logos clients — défilement continu sur une seule ligne, pause au survol */
  .clients-band{padding:var(--space-6) 0; background:var(--white); overflow:hidden;}
  .logo-marquee{
    width:100%; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  /* Marge à droite de CHAQUE logo (et non un `gap`) : la moitié de la piste mesure alors
     exactement la même largeur qu'un cycle complet, donc la boucle à -50% est sans à-coup. */
  .logo-track{display:flex; align-items:center; width:max-content; animation:logo-scroll 70s linear infinite; will-change:transform;}
  .logo-marquee:hover .logo-track{animation-play-state:paused;}
  .logo-item{flex:0 0 auto; display:flex; align-items:center; justify-content:center; height:56px; margin-right:var(--space-6);}
  .logo-item img{height:100%; width:auto; max-width:none; object-fit:contain;}
  @media (min-width:768px){ .logo-item{height:72px;} }
  @keyframes logo-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){
    .logo-track{animation:none;}
    .logo-marquee{overflow-x:auto;}
  }

  /* Méthode (sequence -> numbering justified) */
  .method-steps{counter-reset:step; display:grid; gap:var(--space-4); grid-template-columns:1fr;}
  @media (min-width:768px){ .method-steps{grid-template-columns:repeat(4,1fr);} }
  .step{position:relative; padding-top:var(--space-4); border-top:2px solid var(--sand); text-align:center;}
  .step::before{
    counter-increment:step; content:counter(step);
    font-family:var(--serif); font-size:1.6rem; color:var(--blue-agua);
    display:block; margin-bottom:var(--space-2);
  }
  .step h3{font-size:1rem; font-weight:600; margin-bottom:6px;}
  .step p{color:var(--slate); font-size:0.9rem;}

  /* Calculateur teaser */
  .tool-band{
    background:linear-gradient(135deg, var(--blue-agua) 0%, var(--blue-agua-light) 100%);
    color:#fff; border-radius:var(--radius-l); padding:var(--space-6); margin:0 var(--space-3);
    display:grid; gap:var(--space-4); align-items:center;
  }
  @media (min-width:1024px){ .tool-band{grid-template-columns:1.3fr 0.7fr; padding:var(--space-6) var(--space-6);} }
  .tool-band h2{color:#fff;}
  .tool-band p{color:rgba(255,255,255,0.88); margin-top:var(--space-2); max-width:52ch;}
  .tool-mock{
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35);
    border-radius:var(--radius-m); padding:var(--space-3); font-size:0.9rem;
  }
  .tool-mock .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.2);}
  .tool-mock .row:last-child{border-bottom:none;}

  /* Final CTA */
  .final-cta{background:var(--night); color:#fff; text-align:center;}
  .final-cta h2{color:#fff; max-width:22ch; margin:0 auto;}
  .final-cta .hero-ctas{justify-content:center;}

  /* Bande CTA de fin de page (villes/services/guides/outil) — même traitement que
     .final-cta. Cette règle manquait, ce qui rendait le bouton "Être rappelé"
     (texte blanc, bordure blanche) invisible sur un fond resté transparent/blanc. */
  .cta-band{
    background:var(--night); color:#fff; text-align:center;
    border-radius:var(--radius-l); padding:var(--space-6) var(--space-4);
  }
  .cta-band h2{color:#fff; max-width:26ch; margin:0 auto;}
  .cta-band p{color:rgba(255,255,255,0.75); margin-top:var(--space-2);}
  .cta-band .hero-ctas{justify-content:center; margin-top:var(--space-4);}

  footer{background:var(--anthracite); color:var(--sand); padding:var(--space-6) 0 var(--space-4); font-size:0.9rem;}
  .footer-grid{display:grid; gap:var(--space-4); grid-template-columns:1fr;}
  @media (min-width:768px){ .footer-grid{grid-template-columns:repeat(4,1fr);} }
  .footer-grid h4{color:#fff; font-size:0.9rem; margin-bottom:var(--space-2);}
  .footer-grid ul{list-style:none;}
  .footer-grid li{margin-bottom:6px;}
  .footer-grid a{text-decoration:none; color:var(--sand); opacity:0.85;}
  .footer-grid a:hover{opacity:1; text-decoration:underline;}
  .footer-phone-btn{
    display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-3);
    padding:10px 16px; border-radius:var(--radius-m); border:1.5px solid rgba(255,255,255,0.3);
    color:#fff; text-decoration:none; font-weight:600; font-size:0.9rem; opacity:1;
    transition:background .2s ease, border-color .2s ease;
  }
  .footer-phone-btn:hover{background:var(--blue-agua); border-color:var(--blue-agua); text-decoration:none;}
  .footer-bottom{border-top:1px solid #2a3540; margin-top:var(--space-5); padding-top:var(--space-3); font-size:0.8rem; color:var(--slate); display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between;}

  /* Reveal on scroll — disabled entirely for reduced motion */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;}
  .reveal.is-visible{opacity:1; transform:none;}

  /* Léger décalage entre cartes d'une même grille (services/villes/facts/étapes/FAQ) —
     donne un effet d'apparition en cascade plutôt qu'un bloc figé qui apparaît d'un coup.
     Volontairement court (0.5s de pas max) pour rester perçu comme réactif, pas comme un show. */
  .services .reveal:nth-child(2), .cities .reveal:nth-child(2), .facts-grid .reveal:nth-child(2), .method-steps .reveal:nth-child(2), .home-faq-list .reveal:nth-child(2){transition-delay:.06s;}
  .services .reveal:nth-child(3), .cities .reveal:nth-child(3), .facts-grid .reveal:nth-child(3), .method-steps .reveal:nth-child(3), .home-faq-list .reveal:nth-child(3){transition-delay:.12s;}
  .services .reveal:nth-child(4), .cities .reveal:nth-child(4), .facts-grid .reveal:nth-child(4), .method-steps .reveal:nth-child(4), .home-faq-list .reveal:nth-child(4){transition-delay:.18s;}
  .services .reveal:nth-child(5), .cities .reveal:nth-child(5), .home-faq-list .reveal:nth-child(5){transition-delay:.24s;}
  .services .reveal:nth-child(6), .cities .reveal:nth-child(6){transition-delay:.3s;}
  .services .reveal:nth-child(7), .cities .reveal:nth-child(7){transition-delay:.36s;}
  .services .reveal:nth-child(8), .cities .reveal:nth-child(8){transition-delay:.42s;}
  .services .reveal:nth-child(9){transition-delay:.48s;}
  .cities .reveal:nth-child(n+9){transition-delay:.42s;}

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

/* États "pas encore disponible" — évite tout lien mort tant qu'une route n'existe pas.
   Réutilise les styles de boutons/liens existants, ne crée aucune nouvelle esthétique. */
.link-pending{
  color:var(--slate); cursor:default; opacity:0.7;
}
.btn-pending{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:var(--radius-s);
  font-weight:600; font-size:0.95rem;
  border:1.5px dashed var(--sand); color:var(--slate);
  background:transparent; cursor:default; min-height:44px;
}

/* Méga menu (Services / Villes) — fonctionne sans JS (le lien de secours mène à
   l'ancre correspondante sur l'accueil) ; avec JS, un clic ouvre/ferme le panneau
   (voir main.js) ; :hover/:focus-within couvrent le survol souris en bonus.
   Panneau large et centré sous tout le header, colonnes groupées par catégorie,
   bandeau d'aide en bas — même structure que le méga menu de référence (Bluehost). */
header .wrap.nav{position:relative;}
.nav-mega{position:static;}
.mega-trigger{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 8px; margin:0 -8px; border-radius:var(--radius-s);
  transition:background .15s ease;
}
.nav-mega:hover .mega-trigger, .nav-mega.is-open .mega-trigger{background:rgba(24,98,173,0.08);}
.mega-trigger::after{
  content:''; width:8px; height:8px; margin-left:1px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  border-radius:1px;
  transform:rotate(45deg); transition:transform .2s ease;
}
.nav-mega.is-open .mega-trigger::after{transform:rotate(-135deg);}
.mega-panel{
  display:none; position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  width:min(760px, 92vw);
  background:var(--white); border:1px solid var(--sand); border-radius:var(--radius-m);
  box-shadow:0 24px 48px rgba(16,43,63,0.16); overflow:hidden; z-index:50;
}
/* Comble l'espace entre le déclencheur et le panneau : sans cet élément, le
   curseur "sort" du sous-arbre .nav-mega pendant le trajet et perd le survol
   avant d'atteindre le panneau — ce qui obligeait jusqu'ici à cliquer pour
   ouvrir le sous-menu avant de pouvoir cliquer sur un lien. Posé directement
   sous le déclencheur lui-même (position:relative ajoutée ci-dessus) plutôt
   que sous .nav-mega ou .mega-panel : ni l'un ni l'autre ne partage la même
   origine de positionnement que le panneau (centré sur toute la barre de
   navigation), donc un pont ancré sur eux tombait au mauvais endroit ou était
   rogné par l'overflow:hidden du panneau. */
.mega-trigger::before{
  content:''; display:none; position:absolute; top:100%; left:0; right:0; height:60px;
}
.nav-mega:hover .mega-trigger::before,
.nav-mega:focus-within .mega-trigger::before,
.nav-mega.is-open .mega-trigger::before{display:block;}
.nav-mega:hover .mega-panel,
.nav-mega:focus-within .mega-panel,
.nav-mega.is-open .mega-panel{display:block;}
.mega-panel-columns{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); padding:var(--space-5);}
@media (min-width:1024px){ .nav-mega .mega-panel .mega-panel-columns:has(.mega-column:nth-child(3)){grid-template-columns:repeat(3,1fr);} }
.mega-column a{display:block; padding:6px 8px; margin:0 -8px; border-radius:var(--radius-s); text-decoration:none; color:var(--night); font-size:0.92rem; white-space:nowrap;}
.mega-column a:hover{background:var(--stone); color:var(--blue-agua);}
.mega-column h5{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--slate); margin-bottom:10px; font-weight:600;}
.mega-helper{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:var(--stone); padding:var(--space-3) var(--space-5); border-top:1px solid var(--sand);
  font-size:0.88rem; color:var(--slate);
}
.mega-helper a{color:var(--blue-agua); font-weight:600; text-decoration:none;}
.mega-helper a:hover{text-decoration:underline;}
@media (prefers-reduced-motion: reduce){ .mega-trigger::after{transition:none;} }

/* Mobile : le panneau redevient un simple bloc dans le flux, pas une superposition flottante */
@media (max-width:1023px){
  .mega-panel{position:static; transform:none; box-shadow:none; border:none; width:auto; margin-top:8px;}
  .mega-panel-columns{grid-template-columns:1fr; gap:var(--space-3); padding:var(--space-2) 0 var(--space-2) var(--space-3);}
  .mega-helper{background:transparent; border-top:1px solid var(--sand); padding:var(--space-2) 0 var(--space-2) var(--space-3);}
}

/* Parcours de qualification (/demande-devis/) — toutes les étapes restent visibles
   par défaut (fonctionnement complet sans JS) ; le JS masque les étapes non
   actives et affiche la barre de progression (voir main.js). */
.field-group{margin-bottom:var(--space-4);}
.field-label{display:block; font-weight:600; margin-bottom:8px; font-size:0.92rem; color:var(--night);}
.devis-step{border:none; padding:0; margin:0 0 var(--space-6) 0;}
.devis-step legend{font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--night); margin-bottom:var(--space-4); padding:0;}

/* Champs de formulaire — partagés entre le devis et le contact, remplace le style
   par défaut du navigateur (le contact n'avait jusqu'ici aucun style propre). */
.styled-form input[type="text"],
.styled-form input[type="tel"],
.styled-form input[type="email"],
.styled-form textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--sand); border-radius:var(--radius-m);
  font-family:inherit; font-size:1rem; color:var(--night); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.styled-form input[type="text"]::placeholder,
.styled-form input[type="tel"]::placeholder,
.styled-form input[type="email"]::placeholder,
.styled-form textarea::placeholder{color:var(--slate); opacity:0.65;}
.styled-form input[type="text"]:hover,
.styled-form input[type="tel"]:hover,
.styled-form input[type="email"]:hover,
.styled-form textarea:hover{border-color:#c9c1b4;}
.styled-form input[type="text"]:focus-visible,
.styled-form input[type="tel"]:focus-visible,
.styled-form input[type="email"]:focus-visible,
.styled-form textarea:focus-visible{
  outline:none; border-color:var(--blue-agua);
  box-shadow:0 0 0 4px rgba(3,160,221,0.13);
}
.styled-form textarea{min-height:120px; line-height:1.5; resize:vertical;}

/* ============ FAQ — accordéon éditorial (jamais stylé jusqu'ici) ============ */
.faq-item{
  border-bottom:1px solid var(--stone);
  padding:var(--space-4) 0;
}
.faq-item:first-child{padding-top:0;}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  cursor:pointer; list-style:none;
  font-weight:600; font-size:1.05rem; color:var(--night);
  padding:4px 0;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:hover{color:var(--blue-agua);}
.faq-q:focus-visible{outline:2px solid var(--blue-agua); outline-offset:4px;}
.faq-q .chev{flex-shrink:0; transition:transform .2s ease; color:var(--slate);}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-a{
  margin-top:var(--space-3); padding-right:var(--space-6);
  color:var(--slate); line-height:1.65; max-width:68ch;
}
@media (prefers-reduced-motion: reduce){ .faq-q .chev{transition:none;} }
@media (max-width:479px){ .faq-a{padding-right:0;} }

/* ============ /diagnostic-proprete/ — cartes de processus numérotées ============ */
.process-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-5);
}
.process-card{
  border-radius:var(--radius-l); padding:var(--space-5);
  border:1px solid var(--stone);
}
.process-card.pastel-1{background:#EEF6FC;}
.process-card.pastel-2{background:#FCF1EC;}
.process-card.pastel-3{background:#EEF8F1;}
.process-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--night); color:#fff; font-weight:700; font-size:0.95rem;
  margin-bottom:var(--space-3);
}
.process-card h2{font-size:1.1rem; margin-bottom:10px; color:var(--night);}
.process-card p{color:var(--slate); line-height:1.6; font-size:0.94rem;}

/* ============ Hub /guides/ — grille de cartes éditoriales ============ */
.guides-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--space-5); margin-top:var(--space-2);
}
.guide-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--stone); border-radius:var(--radius-l);
  border-top:4px solid var(--sand);
  padding:var(--space-5); text-decoration:none;
  box-shadow:0 2px 8px rgba(16,43,63,0.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.guide-card.pastel-1{border-top-color:#8FC1E8;}
.guide-card.pastel-2{border-top-color:#E3A98C;}
.guide-card.pastel-3{border-top-color:#8FCBA3;}
.guide-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,43,63,0.1);}
.guide-card:focus-visible{outline:2px solid var(--blue-agua); outline-offset:3px;}
.guide-card h2{font-size:1.15rem; color:var(--night); margin-bottom:10px; line-height:1.35;}
.guide-card p{color:var(--slate); font-size:0.92rem; line-height:1.55; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.guide-card .guide-card-link{margin-top:var(--space-4); font-weight:600; color:var(--blue-agua); font-size:0.9rem;}
@media (prefers-reduced-motion: reduce){ .guide-card{transition:none;} .guide-card:hover{transform:none;} }

/* ============ Refonte /contact/ ============ */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:var(--space-5);
  max-width:960px; margin:0 auto;
}
@media (min-width:800px){ .contact-grid{grid-template-columns:0.85fr 1.15fr; align-items:start; gap:var(--space-6);} }

.contact-info-card{
  background:var(--night); color:#fff;
  border-radius:var(--radius-l); padding:var(--space-6) var(--space-5);
}
.contact-info-card h2{color:#fff; font-size:1.4rem;}
.contact-info-card p{color:rgba(255,255,255,0.75); margin-top:8px; margin-bottom:var(--space-5);}
.contact-phone-btn{width:100%; gap:9px; font-size:1.05rem;}
.contact-links{list-style:none; margin-top:var(--space-5); display:flex; flex-direction:column; gap:10px;}
.contact-links a{color:rgba(255,255,255,0.85); text-decoration:none; font-size:0.92rem;}
.contact-links a:hover{color:#fff; text-decoration:underline;}

.contact-form-card form{margin:0;}

/* ============ Fin refonte contact ============ */

/* ============ Refonte /demande-devis/ ============ */
.devis-section{background:var(--stone);}

.devis-trust{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px;
  text-align:center; color:var(--slate); font-size:0.88rem;
  margin-bottom:var(--space-4);
}
.devis-trust a{color:var(--blue-agua); font-weight:600; text-decoration:none;}
.devis-trust a:hover{text-decoration:underline;}

.form-error-banner{
  background:#fdecea; border:1px solid #B3412E; border-radius:var(--radius-m);
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4);
}
.form-error-banner strong{color:#B3412E;}
.form-error-banner ul{margin-top:8px; padding-left:20px; color:#8a2f1f;}

/* Carte de formulaire : profondeur subtile, espaces généreux */
.devis-card{
  background:var(--white); border-radius:var(--radius-l);
  box-shadow:0 12px 32px rgba(16,43,63,0.08), 0 2px 8px rgba(16,43,63,0.04);
  padding:var(--space-6) var(--space-5);
  margin-bottom:var(--space-6);
}
@media (min-width:640px){ .devis-card{padding:var(--space-6) var(--space-6);} }

/* Page /demande-devis/ : carte élargie au maximum (pas la carte de contact, qui
   partage la classe .devis-card mais reste dans la grille 2 colonnes de /contact/
   — on élargit donc uniquement le conteneur .wrap de cette section précise). */
.devis-section--wide .wrap{max-width:1600px;}

.step-eyebrow{display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--blue-agua); font-weight:600; margin-bottom:6px;}
.devis-step legend{margin-bottom:var(--space-5);}

.field-row{display:grid; grid-template-columns:1fr; gap:0;}
@media (min-width:520px){ .field-row{grid-template-columns:1fr 1fr; gap:var(--space-3);} }

/* Cartes de choix (remplacent les anciens labels-pilules) : normal / survol /
   sélectionné / focus clavier — chacun visuellement distinct. */
.choice-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px;}
.choice-card{
  position:relative; display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--sand); border-radius:var(--radius-m);
  padding:14px 16px; cursor:pointer; background:var(--white);
  font-size:0.94rem; color:var(--night);
  transition:border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.choice-card:hover{border-color:var(--blue-agua); transform:translateY(-1px); box-shadow:0 4px 12px rgba(16,43,63,0.06);}
.choice-card input[type="radio"]{accent-color:var(--blue-agua); width:18px; height:18px; flex-shrink:0; margin:0;}
.choice-card:has(input:checked){border-color:var(--blue-agua); background:rgba(3,160,221,0.07); box-shadow:0 0 0 1px var(--blue-agua) inset;}
.choice-card:has(input:checked) span{font-weight:600; color:var(--night);}
.choice-card:has(input:focus-visible){outline:2px solid var(--blue-agua); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .choice-card{transition:none;} .choice-card:hover{transform:none;} }

/* État d'erreur au niveau du champ (pas seulement le bandeau global) */
.field-group.field-error .field-label{color:#B3412E;}
.field-group.field-error input:not([type="radio"]),
.field-group.field-error textarea,
.field-group.field-error .choice-grid{
  border-color:#B3412E;
}
.field-group.field-error .choice-card{border-color:#e5b3ac;}

.devis-actions{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:var(--space-6); padding-top:var(--space-4);
  border-top:1px solid var(--stone);
}
.devis-actions .btn{margin:0;}
@media (max-width:479px){
  .devis-actions{flex-direction:column-reverse; align-items:stretch;}
  .devis-actions .btn{width:100%;}
}

/* Barre de progression avec ligne de connexion — visuellement claire sur l'avancement */
.devis-progress{display:flex; align-items:center; margin-bottom:var(--space-5); font-size:0.78rem; color:var(--slate);}
.devis-progress span{
  position:relative; flex:1; text-align:center; padding-bottom:14px;
  border-bottom:3px solid var(--sand);
}
.devis-progress span::before{
  content:''; position:absolute; bottom:-3px; left:0; width:0; height:3px;
  background:var(--blue-agua); transition:width .2s ease;
}
.devis-progress span.is-done::before{width:100%;}
.devis-progress span.is-active::before{width:50%;}
.devis-progress span.is-active{color:var(--night); font-weight:600;}
@media (max-width:639px){ .devis-progress span{font-size:0; padding-bottom:6px;} .devis-progress span.is-active{font-size:0.72rem;} }

/* Récapitulatif */
.devis-recap{display:flex; flex-direction:column; gap:0;}
.recap-intro{color:var(--slate); margin-bottom:var(--space-4);}
.recap-item{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) 0; border-bottom:1px solid var(--stone);
}
.recap-item:last-child{border-bottom:none;}
.recap-item dt{font-size:0.82rem; color:var(--slate); flex:0 0 40%;}
.recap-item dd{margin:0; flex:1; font-weight:500; color:var(--night); text-align:right;}
.recap-item a{font-size:0.82rem; color:var(--blue-agua); text-decoration:none; white-space:nowrap; margin-left:var(--space-3);}
.recap-item a:hover{text-decoration:underline;}
@media (max-width:479px){
  .recap-item{flex-wrap:wrap;}
  .recap-item dd{text-align:left; flex-basis:100%;}
}
/* Fil d'Ariane — sous le hero, jamais au-dessus. Discret : taille secondaire,
   couleur neutre, séparateurs fins, dernier élément identifiable sans être
   surdimensionné. */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:0.85rem; line-height:1.4; color:var(--slate);
  padding:var(--space-3) 0; min-width:0;
}
.breadcrumb a{color:var(--slate); text-decoration:none; transition:color .15s ease;}
.breadcrumb a:hover{color:var(--blue-agua); text-decoration:underline;}
.breadcrumb .sep{color:var(--sand); font-size:0.8em;}
.breadcrumb [aria-current="page"]{color:var(--night); font-weight:500;}

.tag-list{display:flex; flex-wrap:wrap; gap:10px;}
.tag{
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--sand); background:var(--stone);
  color:var(--night); font-size:0.88rem; font-weight:500;
}
a.tag{color:var(--night); transition:background .15s ease, border-color .15s ease;}
a.tag:hover{background:var(--white); border-color:var(--blue-agua);}
.tag-list label:has(input:checked){
  background:var(--blue-agua); border-color:var(--blue-agua); color:#fff;
}
.tag-list label input[type="radio"]{ accent-color:var(--blue-agua); }
.tag-list label input[type="radio"]:focus-visible{ outline:2px solid var(--blue-agua-light); outline-offset:2px; }

/* ============ Page À propos (gabarit dédié, pleine largeur) ============ */
.wrap--wide{max-width:1560px;}
@media (min-width:1200px){ .wrap--wide{padding:0 var(--space-6);} }

/* Paragraphes justifiés, avec césure automatique (html lang="fr") pour éviter les
   "rivières" de blancs dans les colonnes étroites. Le texte centré du CTA final
   reste centré : justifier deux lignes courtes serait contre-productif. */
.about-page p{text-align:justify; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;}
.about-page .final-cta p, .about-page .about-kicker, .about-page .about-service span{text-align:inherit;}

.about-hero{min-height:560px;}
.about-hero .hero-content{max-width:820px;}
.about-kicker{font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.85); margin-bottom:var(--space-2); text-align:left !important;}

.about-figures{padding:0; background:var(--night); color:#fff;}
.about-figures-grid{display:grid; grid-template-columns:1fr 1fr; margin:0;}
@media (min-width:900px){ .about-figures-grid{grid-template-columns:repeat(4,1fr);} }
.about-figures-grid > div{padding:var(--space-5) var(--space-3); text-align:center; border-right:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12);}
.about-figures-grid dt{font-family:var(--serif); font-size:clamp(1.4rem, 2.4vw, 2.1rem); font-weight:500; line-height:1.15;}
.about-figures-grid dd{margin-top:6px; font-size:0.92rem; color:rgba(255,255,255,0.75);}
@media (min-width:900px){ .about-figures-grid > div{border-bottom:0;} .about-figures-grid > div:last-child{border-right:0;} }

.about-split{display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:center;}
@media (min-width:1000px){ .about-split{grid-template-columns:1.15fr 1fr; gap:var(--space-7);} }
.about-prose h2{margin-bottom:var(--space-3);}
.about-prose p{color:var(--anthracite); font-size:1.08rem; line-height:1.75; margin-bottom:var(--space-3);}
.about-prose p:last-child{margin-bottom:0;}
.about-figure{margin:0;}
.about-figure img{width:100%; height:auto; border-radius:var(--radius-l); box-shadow:0 18px 44px rgba(16,43,63,0.16);}
.about-figure figcaption{margin-top:var(--space-2); font-size:0.88rem; color:var(--slate); font-style:italic;}

.about-values{display:grid; gap:var(--space-3); grid-template-columns:1fr;}
@media (min-width:700px){ .about-values{grid-template-columns:1fr 1fr;} }
@media (min-width:1200px){ .about-values{grid-template-columns:repeat(4,1fr); gap:var(--space-4);} }
.about-value{background:var(--white); border-radius:var(--radius-m); padding:var(--space-4); border:1px solid var(--sand); border-top:3px solid var(--blue-agua);}
.about-value-num{display:block; font-family:var(--serif); font-size:2rem; color:var(--blue-agua); line-height:1; margin-bottom:var(--space-2);}
.about-value h3{font-size:1.15rem; margin-bottom:var(--space-1); color:var(--night);}
.about-value p{color:var(--slate); font-size:0.98rem; line-height:1.65;}

.about-services{display:grid; gap:var(--space-3); grid-template-columns:1fr;}
@media (min-width:640px){ .about-services{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .about-services{grid-template-columns:repeat(3,1fr);} }
.about-service{display:flex; flex-direction:column; gap:6px; background:var(--white); border:1px solid var(--sand); border-radius:var(--radius-m); padding:var(--space-4); text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease;}
.about-service:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,43,63,0.1);}
.about-service h3{font-size:1.08rem; color:var(--night);}
.about-service p{color:var(--slate); font-size:0.95rem;}
.about-service span{margin-top:auto; padding-top:var(--space-1); font-weight:600; color:var(--blue-agua); font-size:0.9rem;}

.about-quality{display:grid; gap:var(--space-5); grid-template-columns:1fr; background:var(--night); border-radius:var(--radius-l); padding:var(--space-6) var(--space-4);}
@media (min-width:1000px){ .about-quality{grid-template-columns:1.3fr 1fr; padding:var(--space-7) var(--space-7); gap:var(--space-7); align-items:center;} }
.about-prose--light h2{color:#fff;}
.about-prose--light p{color:rgba(255,255,255,0.88);}
.about-checks{list-style:none; display:grid; gap:var(--space-2);}
.about-checks li{position:relative; padding:var(--space-2) var(--space-2) var(--space-2) 52px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-m); color:#fff; font-weight:500;}
.about-checks li::before{content:'✓'; position:absolute; left:16px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--blue-agua-light); color:#fff; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center;}

.about-zones{display:grid; gap:var(--space-5); grid-template-columns:1fr; align-items:center;}
@media (min-width:1000px){ .about-zones{grid-template-columns:1.1fr 1fr; gap:var(--space-7);} }
.about-city-list{list-style:none; display:flex; flex-wrap:wrap; gap:10px;}
.about-city-list a{display:inline-block; padding:10px 18px; border-radius:999px; background:var(--white); border:1px solid var(--sand); color:var(--night); font-weight:600; font-size:0.95rem; text-decoration:none; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.about-city-list a:hover{background:var(--blue-agua); border-color:var(--blue-agua); color:#fff;}

.about-faq{max-width:1100px; margin:0 auto;}
.about-cta-text{color:rgba(255,255,255,0.8); max-width:62ch; margin:var(--space-2) auto 0; text-align:center !important;}
.about-phone{margin-top:0;}
@media (prefers-reduced-motion: reduce){ .about-service{transition:none;} .about-service:hover{transform:none;} }
/* Texte d'accroche (hero) et chapeaux de section : courts, donc centrés/alignés à gauche —
   la justification y créerait de grands blancs entre les mots sur 2 lignes seulement. */
.about-page .hero-sub{text-align:left;}
.about-page .section-head p{text-align:center;}

/* Titres de section demandés sur une seule ligne (desktop) ; sur mobile le retour à la
   ligne naturel reste indispensable. Le titre est centré par rapport à sa section même
   s'il dépasse la largeur du chapeau (640px) placé dessous, sans élargir ce chapeau. */
@media (min-width:1024px){
  .h2-oneline, .h2-twoline{width:max-content; max-width:none; position:relative; left:50%; transform:translateX(-50%);}
  .h2-oneline{white-space:nowrap;}
  .h2-line{display:block;}
}