/* ============================================
   MILISYS — Site vitrine
   Charte graphique officielle — 2026
   ============================================ */

/* --- Fonts (auto-hébergées, pas de dépendance externe) --- */
@font-face{
  font-family:'Basenji';
  src:url('../fonts/Basenji-SemiBold.otf') format('opentype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Basenji';
  src:url('../fonts/Basenji-SemiBoldSlanted.otf') format('opentype');
  font-weight:600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Now';
  src:url('../fonts/Now-Light.otf') format('opentype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Now';
  src:url('../fonts/Now-Regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Now';
  src:url('../fonts/Now-Medium.otf') format('opentype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Now';
  src:url('../fonts/Now-Bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* --- Variables & Tokens --- */
:root {
  /* Palette officielle Milisys (charte validée) */
  --olive:         #666B48;   /* Vert foncé - couleur principale */
  --olive-dark:    #4F5339;
  --olive-light:   #7C8258;
  --sage:          #BDC1A3;   /* Vert clair */
  --sage-light:    #D0D3BD;
  --sage-dark:     #A4AA87;
  --blue-steel:    #7997A1;   /* Bleu foncé */
  --blue-steel-l:  #AEBEC4;   /* Bleu clair */
  --blue-steel-d:  #5F7A84;
  --stone:         #E8E5DE;   /* Beige */
  --stone-light:   #F1EFEA;
  --stone-lighter: #F7F6F2;
  --ink:           #1A1A1A;   /* Noir charte (fond sombre) */
  --ink-soft:      #242424;
  --ink-deep:      #0F0F0F;
  --white:         #FFFFFF;

  /* Aliases fonctionnels */
  --clr-primary:    var(--ink);
  --clr-accent:     var(--olive);
  --clr-accent-h:   var(--olive-dark);
  --clr-surface:    var(--stone-lighter);
  --clr-surface-2:  var(--stone-light);
  --clr-surface-3:  var(--stone);
  --clr-heading:    var(--ink);
  --clr-body:       #2E2E2E;
  --clr-body-light: #5A5A5A;
  --clr-link:       var(--olive);
  --clr-hero-bg:    var(--ink);
  --clr-hero-text:  var(--stone);
  --clr-cta-bg:     var(--olive);
  --clr-cta-text:   var(--white);
  --clr-cta-hover:  var(--olive-dark);
  --clr-footer-bg:  var(--ink-deep);
  --clr-footer-text:#B0B0AB;

  /* Typographies — charte officielle */
  --ff-heading: 'Basenji', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Now', 'Segoe UI', system-ui, sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Taille de base */
  --fs-base:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.8125rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   2rem;
  --fs-4xl:   2.5rem;
  --fs-5xl:   3.25rem;

  /* Espacement */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Rayons */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full:100px;

  /* Ombres - recalibrées pour le noir profond */
  --shadow-sm:  0 1px 3px rgba(26,26,26,.06), 0 1px 2px rgba(26,26,26,.04);
  --shadow-md:  0 4px 16px rgba(26,26,26,.08);
  --shadow-lg:  0 12px 40px rgba(26,26,26,.12);
  --shadow-card: 0 2px 8px rgba(26,26,26,.05), 0 0 0 1px rgba(26,26,26,.04);

  /* Transitions */
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .2s;
  --dur-med:  .35s;
  --dur-slow: .55s;

  /* Largeur max */
  --max-w: 1200px;
}

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

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

body{
  font-family:var(--ff-body);
  font-weight:var(--fw-medium);       /* Now Medium, typo secondaire officielle */
  font-size:var(--fs-base);
  line-height:1.7;
  color:var(--clr-body);
  background:var(--clr-surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Titres - Basenji SemiBold selon la charte */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  line-height:1.15;
  letter-spacing:-0.005em;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--clr-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--clr-accent-h)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}

::selection{
  background:var(--sage);
  color:var(--ink);
}

/* em/i dans le corps : bleu clair charte (#AEBEC4) */
p em, p i, li em, li i,
.faq-answer-inner em, .faq-answer-inner i,
blockquote, cite,
.need-quote{
  color:var(--olive-light);
  font-style:italic;
}
/* Exception : dans le hero (fond coloré), garder l'italique en sage */
.hero em,
.hero i,
.hero cite{
  color:inherit;
}

/* --- Utilitaires --- */
.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--space-md);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- Reveal animations --- */
.js-ready .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-ready .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Reveal stagger pour enfants */
.js-ready .reveal-children > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.js-ready .reveal-children.is-visible > *{
  opacity:1;
  transform:translateY(0);
}
.js-ready .reveal-children.is-visible > *:nth-child(1){transition-delay:.05s}
.js-ready .reveal-children.is-visible > *:nth-child(2){transition-delay:.12s}
.js-ready .reveal-children.is-visible > *:nth-child(3){transition-delay:.19s}
.js-ready .reveal-children.is-visible > *:nth-child(4){transition-delay:.26s}

/* ============================================
   ÉLÉMENTS DÉCORATIFS (pattern officiel charte)
   ============================================ */
/* Pattern en arrière-plan discret sur sections claires */
.has-decor{
  position:relative;
  isolation:isolate;
}
.has-decor::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url('../img/decor/pattern-feuilles-gouttes.webp');
  background-size:480px auto;
  background-repeat:repeat;
  opacity:.15;
  pointer-events:none;
}

/* Réduire la taille du pattern sur mobile pour éviter la surcharge */
@media (max-width: 768px){
  .has-decor::before{
    background-size:320px auto;
    opacity:.06;
  }
}

/* Icônes décoratives inline (feuilles & gouttes) */
.decor-icon{
  display:inline-block;
  width:28px;
  height:28px;
  vertical-align:middle;
  flex-shrink:0;
}
.decor-icon--leaf{color:var(--sage-dark)}
.decor-icon--drop{color:var(--blue-steel)}

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled{
  box-shadow:0 1px 12px rgba(26,26,26,.06);
  background:rgba(244,243,239,.95);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:rgba(0,0,0,.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.logo-icone{
  height:38px;
  width:auto;
  display:block;
  flex-shrink:0;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.logo:hover .logo-icone{
  opacity:.9;
  transform:rotate(-6deg);
}
.logo-img{
  height:65px;
  width:auto;
  display:block;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.logo:hover .logo-img{opacity:.8}
.logo-icone--footer{
  height:34px;
  opacity:.95;
}
.logo-img--footer{
  height:65px;
  opacity:.95;
}

/* Navigation desktop */
.nav-list{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}
.nav-list a{
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:var(--clr-body);
  padding:8px 12px;
  position:relative;
  border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-list a:not(.nav-cta):hover{
  color:var(--clr-accent);
  background:rgba(102,107,72,.06);
}
.nav-list a:not(.nav-cta).active{
  color:var(--clr-accent);
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 24px;
  margin-left:8px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--clr-cta-text);
  background:var(--clr-cta-bg);
  border-radius:var(--radius-full);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nav-cta:hover{
  background:var(--clr-cta-hover);
  color:var(--clr-cta-text);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(102,107,72,.2);
}

/* Hamburger */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:28px;
  padding:4px 0;
}
.menu-toggle span{
  display:block;
  height:2px;
  background:var(--clr-primary);
  border-radius:2px;
  transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  transform-origin:center;
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:min(94vh, 840px);
  display:flex;
  align-items:center;
  background:var(--blue-steel);
  overflow:hidden;
  padding-top:72px;
}
/*
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 65% 35%, rgba(122,152,162,.14) 0%, transparent 70%),
    radial-gradient(ellipse 45% 45% at 15% 75%, rgba(102,107,72,.1) 0%, transparent 55%);
  pointer-events:none;
}
/* Subtle animated gradient layer */
/* 
.hero::after{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle at 60% 40%, rgba(155,168,143,.06) 0%, transparent 50%);
  animation:heroShift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroShift{
  0%{transform:translate(0,0)}
  100%{transform:translate(-5%,3%)}
}
*/
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:center;
  padding-block:var(--space-xl) var(--space-2xl);
}
.hero-content{
  max-width:560px;
}

/* Hero entrance animations */
.js-ready .hero-badge,
.js-ready .hero h1,
.js-ready .hero-accroche,
.js-ready .hero-desc,
.js-ready .hero-actions{
  opacity:0;
  transform:translateY(24px);
  animation:heroFadeIn .7s var(--ease-out) forwards;
}
.js-ready .hero-badge{animation-delay:.15s}
.js-ready .hero h1{animation-delay:.3s}
.js-ready .hero-accroche{animation-delay:.42s}
.js-ready .hero-desc{animation-delay:.54s}
.js-ready .hero-actions{animation-delay:.68s}
.js-ready .hero-visual{
  opacity:0;
  transform:translateY(20px) scale(.97);
  animation:heroVisualIn .8s var(--ease-out) .5s forwards;
}

@keyframes heroFadeIn{
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroVisualIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 18px;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--sage-light);
  border:1px solid rgba(155,168,143,.25);
  border-radius:var(--radius-full);
  margin-bottom:var(--space-md);
  background:rgba(155,168,143,.06);
}
.hero-badge svg{opacity:.7}

.hero h1{
  font-family:var(--ff-heading);
  font-size:clamp(var(--fs-3xl), 3.6vw, var(--fs-4xl));
  font-weight:var(--fw-semibold);
  line-height:1.1;
  color:var(--white);
  letter-spacing:-.02em;
  margin-bottom:var(--space-md);
}
.hero h1 span{
  color:var(--sage);
  position:relative;
  display:inline;
  white-space:normal;
}
.hero h1 em{
  display:block;
  font-style:italic;
  color:rgba(255,255,255,.9);
  font-size:.72em;
  font-weight:var(--fw-semibold);
  margin-top:.25em;
  letter-spacing:-.01em;
}
.hero-desc{
  font-size:var(--fs-lg);
  line-height:1.65;
  color:var(--white);
  margin-bottom:var(--space-lg);
  max-width:480px;
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}
.hero-accroche{
  font-family:var(--ff-heading);
  font-style:italic;
  font-weight:var(--fw-semibold);
  font-size:var(--fs-lg);
  color:var(--sage);
  line-height:1.4;
  margin-bottom:var(--space-md);
  max-width:520px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual-placeholder{
  width:100%;
  aspect-ratio:4/3;
  background:rgba(122,152,162,.08);
  border-radius:var(--radius-xl);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.2);
  font-size:var(--fs-sm);
  position:relative;
  overflow:hidden;
}
.hero-visual-placeholder::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(122,152,162,.08) 0%, transparent 60%),
    linear-gradient(315deg, rgba(102,107,72,.06) 0%, transparent 50%);
}

/* ============================================
   BOUTONS
   ============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  font-size:var(--fs-base);
  font-weight:var(--fw-semibold);
  border-radius:var(--radius-full);
  transition:all var(--dur-fast) var(--ease-out);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn--primary{
  background:var(--clr-cta-bg);
  color:var(--clr-cta-text);
}
.btn--primary:hover{
  background:var(--clr-cta-hover);
  color:var(--clr-cta-text);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(102,107,72,.22);
}
.btn--primary:active{
  transform:translateY(0);
  box-shadow:none;
}
.btn--outline{
  background:transparent;
  color:var(--white);
  border:1.5px solid rgba(255,255,255,.25);
}
.btn--outline:hover{
  border-color:rgba(255,255,255,.5);
  color:var(--white);
  transform:translateY(-2px);
  background:rgba(255,255,255,.04);
}
.btn--outline-dark{
  background:transparent;
  color:var(--clr-primary);
  border:1.5px solid var(--clr-surface-3);
}
.btn--outline-dark:hover{
  border-color:var(--clr-primary);
  color:var(--clr-primary);
  transform:translateY(-2px);
}
.btn--sm{
  padding:10px 22px;
  font-size:var(--fs-sm);
}

/* ============================================
   SECTIONS GENERIQUES
   ============================================ */
.section{
  padding-block:var(--space-2xl);
}
.section--alt{
  background:var(--white);
}
.section-header{
  text-align:center;
  max-width:680px;
  margin-inline:auto;
  margin-bottom:var(--space-xl);
}
.section-label{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-steel-d);
  margin-bottom:var(--space-xs);
}
.section-title{
  font-family:var(--ff-heading);
  font-size:clamp(var(--fs-2xl), 3vw, var(--fs-4xl));
  font-weight:var(--fw-semibold);
  color:var(--olive);
  line-height:1.15;
  letter-spacing:-.025em;
  margin-bottom:var(--space-sm);
}
.section-desc{
  font-size:var(--fs-lg);
  color:var(--clr-body-light);
  max-width:560px;
  margin-inline:auto;
  line-height:1.65;
}

/* ============================================
   ABOUT
   ============================================ */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:center;
}
.about-visual{
  aspect-ratio:4/3;
  background:var(--clr-surface-2);
  border-radius:var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--clr-body-light);
  font-size:var(--fs-sm);
  position:relative;
  overflow:hidden;
}
.about-visual img,
.drone-visual img,
.hero-visual-placeholder img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 30%;
  z-index:0;
  display:block;
}
.about-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(122,152,162,.12) 0%, transparent 60%);
}
.about-content .section-label{
  text-align:left;
}
.about-content h2{
  font-family:var(--ff-heading);
  font-size:clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight:var(--fw-semibold);
  color:var(--olive);
  line-height:1.18;
  letter-spacing:-.025em;
  margin-bottom:var(--space-sm);
}
.about-content p{
  margin-bottom:var(--space-sm);
  color:var(--clr-body);
  line-height:1.7;
}
.about-stats{
  display:flex;
  gap:var(--space-lg);
  margin-top:var(--space-lg);
  padding-top:var(--space-md);
  border-top:1px solid var(--clr-surface-3);
}
.stat-item strong{
  display:block;
  font-size:var(--fs-3xl);
  font-weight:var(--fw-bold);
  color:var(--olive);
  line-height:1.1;
}
.stat-item .stat-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:1em;           /* = même hauteur que "100%" et "2×" à côté */
  line-height:1;
}
.stat-item .stat-icon svg{
  width:auto;
  height:1em;
  stroke:var(--olive);  /* pour rester cohérent avec la couleur du chiffre */
}
@keyframes stat-arrow-pulse{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(2px); }
}
.stat-item .stat-icon svg{
  animation:stat-arrow-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .stat-item .stat-icon svg{animation:none}
}
.stat-item span{
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
}

/* ============================================
   SERVICES
   ============================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-md);
}
.service-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-md);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  position:relative;
}
.service-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--blue-steel), var(--sage));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  opacity:0;
  transition:opacity var(--dur-med) var(--ease-out);
}
.service-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.service-card:hover::before{
  opacity:1;
}
.service-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-md);
  background:var(--stone-light);
  color:var(--olive);
  margin-bottom:var(--space-md);
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.service-card:hover .service-icon{
  background:var(--olive);
  color:var(--white);
}
.service-icon svg{
  width:26px;
  height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-card h3{
  font-family:var(--ff-heading);
  font-size:var(--fs-xl);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  margin-bottom:var(--space-xs);
  text-align:center;
}
.service-card p{
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
  line-height:1.7;
}

/* ============================================
   DRONE ADVANTAGE
   ============================================ */
.drone-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:center;
}
.drone-visual{
  aspect-ratio:4/3;
  background:var(--ink);
  border-radius:var(--radius-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.2);
  font-size:var(--fs-sm);
  position:relative;
  overflow:hidden;
}
.drone-visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(122,152,162,.15), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(102,107,72,.08), transparent 50%);
}
.drone-features{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}
.drone-feature{
  display:flex;
  gap:var(--space-sm);
  align-items:flex-start;
  padding:var(--space-sm);
  border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-out);
}
.drone-feature:hover{
  background:rgba(102,107,72,.04);
}
.drone-feature-icon{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:var(--radius-md);
  background:var(--stone-light);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-steel-d);
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.drone-feature:hover .drone-feature-icon{
  background:var(--ink);
  color:var(--sage-light);
}
.drone-feature-icon svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.drone-feature h3{
  font-size:var(--fs-base);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  margin-bottom:3px;
}
.drone-feature p{
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
  line-height:1.6;
}

/* ============================================
   METHOD
   ============================================ */
.method-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-md);
  counter-reset:step;
  position:relative;
}
/* Connecting line between steps */
.method-steps::before{
  content:'';
  position:absolute;
  top:38px;
  left:calc(12.5% + 20px);
  right:calc(12.5% + 20px);
  height:2px;
  background:var(--clr-surface-3);
  z-index:0;
}
.method-step{
  counter-increment:step;
  text-align:center;
  padding:var(--space-md);
  position:relative;
  z-index:1;
}
.method-step::before{
  content:counter(step);
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin:0 auto var(--space-sm);
  font-family:var(--ff-heading);
  font-size:var(--fs-xl);
  font-weight:var(--fw-semibold);
  color:var(--white);
  background:var(--ink);
  border-radius:50%;
  line-height:1;
  box-shadow:0 2px 8px rgba(26,26,26,.15);
}
.method-step h3{
  font-size:var(--fs-base);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  margin-bottom:var(--space-xs);
}
.method-step p{
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
  line-height:1.6;
}

/* ============================================
   BENEFITS
   ============================================ */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-md);
}
.benefit-card{
  background:var(--stone-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-md);
  text-align:center;
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.benefit-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.benefit-icon{
  width:56px;
  height:56px;
  margin:0 auto var(--space-sm);
  border-radius:var(--radius-md);
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--olive);
  box-shadow:var(--shadow-sm);
}
.benefit-icon svg{
  width:26px;
  height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.benefit-card h3{
  font-size:var(--fs-base);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  margin-bottom:var(--space-xs);
}
.benefit-card p{
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
  line-height:1.6;
}

/* ============================================
   ZONE INTERVENTION
   ============================================ */
.zone-content{
  text-align:center;
  max-width:720px;
  margin-inline:auto;
}
.zone-content p{
  font-size:var(--fs-lg);
  color:var(--clr-body);
  margin-bottom:var(--space-sm);
  line-height:1.65;
}
.zone-cities{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:var(--space-md);
}
.zone-cities span{
  padding:8px 20px;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  background:var(--white);
  border:1px solid var(--clr-surface-3);
  border-radius:var(--radius-full);
  color:var(--clr-primary);
  transition:all var(--dur-fast) var(--ease-out);
}
.zone-cities span:hover{
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
  transform:translateY(-2px);
}

/* ============================================
   REASSURANCE
   ============================================ */
.reassurance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-md);
}
.reassurance-item{
  text-align:center;
  padding:var(--space-md);
}
.reassurance-icon{
  width:52px;
  height:52px;
  margin:0 auto var(--space-sm);
  border-radius:50%;
  background:var(--stone-light);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-steel-d);
}
.reassurance-icon svg{
  width:26px;
  height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.reassurance-item h3{
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--clr-heading);
  margin-bottom:4px;
}
.reassurance-item p{
  font-size:var(--fs-xs);
  color:var(--clr-body-light);
  line-height:1.5;
}

/* ============================================
   FAQ
   ============================================ */
.faq-list{
  max-width:800px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.faq-item{
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:box-shadow var(--dur-med) var(--ease-out);
}
.faq-item:hover{
  box-shadow:var(--shadow-md);
}
.faq-item.is-open{
  box-shadow:var(--shadow-md);
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-md);
  font-size:var(--fs-base);
  font-weight:var(--fw-medium);
  color:var(--clr-heading);
  text-align:left;
  background:none;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
  gap:var(--space-sm);
}
.faq-question:hover{
  color:var(--olive);
}
.faq-chevron{
  flex-shrink:0;
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  transition:transform var(--dur-med) var(--ease-out);
}
.faq-item.is-open .faq-chevron{
  transform:rotate(180deg);
}
.faq-item.is-open .faq-question{
  color:var(--olive);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-med) var(--ease-out);
}
.faq-answer-inner{
  padding:0 var(--space-md) var(--space-md);
  font-size:var(--fs-sm);
  color:var(--clr-body-light);
  line-height:1.7;
}
.faq-answer-inner p + p,
.faq-answer-inner ul + p,
.faq-answer-inner p + ul{
  margin-top:var(--space-sm);
}
.faq-answer-inner ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq-answer-inner ul li{
  position:relative;
  padding-left:20px;
}
.faq-answer-inner ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:2px;
  background:var(--olive);
  border-radius:2px;
}
.faq-answer-inner strong{
  color:var(--clr-heading);
  font-weight:var(--fw-semibold);
}

/* FAQ CTA (slide vers devis) */
.faq-cta{
  max-width:800px;
  margin:var(--space-xl) auto 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
}
.faq-cta p{
  font-size:var(--fs-base);
  color:var(--clr-body-light);
  margin:0;
}
.faq-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.faq-cta-arrow{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--dur-med) var(--ease-spring);
}
.faq-cta-btn:hover .faq-cta-arrow{
  transform:translateY(4px);
}
/* Petit indicateur visuel d'invitation à descendre */
@keyframes nudge-down{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(3px); }
}
.faq-cta-btn:not(:hover) .faq-cta-arrow{
  animation:nudge-down 2.2s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce){
  .faq-cta-btn .faq-cta-arrow{animation:none}
}

/* ============================================
   BESOINS (avant la réassurance)
   ============================================ */
.needs-grid{
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  max-width:1100px;
  margin-inline:auto;
}
.need-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:center;
}
.need-card--reverse .need-visual{
  order:2;
}
.need-visual{
  position:relative;
  aspect-ratio:4 / 3;
  background:linear-gradient(135deg, var(--stone) 0%, var(--stone-light) 100%);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.noimg{
  position:relative;
  aspect-ratio:4 / 3;
  background:transparent;
  border-radius:none;
  overflow:hidden;
  box-shadow:none;
}
.need-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Fallback si l'image n'est pas encore en place */
.need-visual img[alt]:not([src]),
.need-visual img[src=""]{
  opacity:0;
}
.need-visual-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-heading);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue-steel-d);
  background:repeating-linear-gradient(
    45deg,
    transparent 0 14px,
    rgba(122,152,162,.08) 14px 28px
  );
  pointer-events:none;
  opacity:0;
  transition:opacity var(--dur-med) var(--ease-out);
}
/* Afficher le placeholder si l'image est cassée ou absente */
.need-visual img:not([src]) + .need-visual-placeholder,
.need-visual img[src=""] + .need-visual-placeholder{
  opacity:1;
}
.need-content h3{
  font-family:var(--ff-heading);
  font-size:var(--fs-2xl);
  color:var(--clr-heading);
  margin-bottom:var(--space-sm);
  line-height:1.25;
}
.need-content p{
  color:var(--clr-body);
  line-height:1.7;
  margin-bottom:var(--space-sm);
}
.need-content p:last-child{margin-bottom:0}
.need-content p.need-quote{
  font-style:italic;
  color:var(--olive-light);
  font-size:var(--fs-lg);
  padding-left:var(--space-sm);
  border-left:3px solid var(--blue-steel);
}

/* ============================================
   PARTENAIRES
   ============================================ */
.partners-section{
  padding-top:var(--space-xl);
  padding-bottom:var(--space-xl);
}
.partners-header{
  margin-bottom:var(--space-lg);
}
.partners-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--space-xl);
}
.partner-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-sm) var(--space-md);
  min-height:80px;
  flex:0 0 auto;
  transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
  opacity:.7;
  filter:grayscale(20%);
}
.partner-item:hover{
  opacity:1;
  filter:grayscale(0);
  transform:translateY(-2px);
}
.partner-item img{
  max-height:70px;
  max-width:180px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.partner-item--placeholder{
  min-width:160px;
  min-height:70px;
  border:1px dashed var(--blue-steel);
  border-radius:var(--radius-md);
  color:var(--blue-steel-d);
  font-family:var(--ff-heading);
  font-size:var(--fs-xs);
  font-weight:var(--fw-medium);
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(122,152,162,.04);
  opacity:.85;
}

/* ============================================
   CONTACT / CTA FINAL
   ============================================ */
.cta-section{
  background:var(--ink);
  padding-block:var(--space-2xl);
  position:relative;
  overflow:hidden;
}
.cta-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 50% 70% at 80% 50%, rgba(122,152,162,.08), transparent),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(102,107,72,.06), transparent);
  pointer-events:none;
}
.cta-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:start;
}
.cta-text h2{
  font-family:var(--ff-heading);
  font-size:clamp(var(--fs-2xl), 3vw, var(--fs-3xl));
  font-weight:var(--fw-semibold);
  color:var(--white);
  line-height:1.18;
  letter-spacing:-.02em;
  margin-bottom:var(--space-sm);
}
.cta-text p{
  font-size:var(--fs-lg);
  color:var(--clr-footer-text);
  margin-bottom:var(--space-md);
  max-width:460px;
  line-height:1.65;
  text-align:justify;

}
.cta-infos{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  margin-top:var(--space-md);
}
.cta-infos a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--blue-steel-l);
  font-size:var(--fs-sm);
  padding:6px 0;
  transition:color var(--dur-fast) var(--ease-out);
}
.cta-infos a:hover{
  color:var(--white);
}
.cta-infos svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}

/* Formulaire */
.contact-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl);
  padding:var(--space-lg);
  backdrop-filter:blur(8px);
}
.form-group{
  margin-bottom:var(--space-sm);
}
.form-group label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color:rgba(236,234,226,.75);
  margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:13px 16px;
  font-size:var(--fs-sm);
  color:var(--white);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  outline:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(255,255,255,.3);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--sage);
  background:rgba(255,255,255,.08);
}
.form-group textarea{
  resize:vertical;
  min-height:110px;
}
.form-group select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
.form-group select option{
  background:var(--ink);
  color:var(--white);
  padding:8px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.form-submit{
  margin-top:var(--space-md);
}
.form-submit .btn{
  width:100%;
  justify-content:center;
  padding:16px 28px;
}
.form-notice{
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.35);
  margin-top:var(--space-sm);
  line-height:1.5;
}
.form-notice a{
  color:var(--sage);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  background:var(--clr-footer-bg);
  border-top:1px solid rgba(255,255,255,.04);
  padding-block:var(--space-xl) var(--space-md);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-lg);
  margin-bottom:var(--space-xl);
}
.footer-brand p{
  font-size:var(--fs-sm);
  color:var(--clr-footer-text);
  margin-top:var(--space-sm);
  max-width:300px;
  line-height:1.6;
  opacity:.8;
}
.footer-col h4{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color:rgba(255,255,255,.6);
  margin-bottom:var(--space-sm);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.footer-col a{
  display:block;
  font-size:var(--fs-sm);
  color:var(--clr-footer-text);
  padding-block:4px;
  transition:color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.footer-col a:hover{
  color:var(--white);
  padding-left:4px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:var(--space-md);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-sm);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.35);
}
.footer-bottom a{
  color:rgba(255,255,255,.35);
}
.footer-bottom a:hover{
  color:var(--white);
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top{
  position:fixed;
  bottom:var(--space-md);
  right:var(--space-md);
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(26,26,26,.2);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:all var(--dur-med) var(--ease-out);
  z-index:900;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--olive);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(102,107,72,.25);
}
.back-to-top svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.5;
}

/* ============================================
   PAGE SECONDAIRE — LAYOUT
   ============================================ */
.page-header{
  background:var(--ink);
  padding:calc(72px + var(--space-xl)) 0 var(--space-xl);
}
.page-header h1{
  font-family:var(--ff-heading);
  font-size:clamp(var(--fs-2xl),3vw,var(--fs-3xl));
  font-weight:var(--fw-semibold);
  color:var(--white);
}
.page-header p{
  color:var(--clr-footer-text);
  margin-top:var(--space-xs);
}
.page-body{
  padding-block:var(--space-xl);
}
.page-body .container{
  max-width:860px;
}
.page-body h2{
  font-family:var(--ff-heading);
  font-size:var(--fs-xl);
  font-weight:var(--fw-semibold);
  color:var(--olive);
  margin-top:var(--space-lg);
  margin-bottom:var(--space-sm);
}
.page-body p{
  margin-bottom:var(--space-sm);
  color:var(--clr-body);
  line-height:1.8;
}
.page-body ul{
  margin-bottom:var(--space-sm);
  padding-left:var(--space-md);
}
.page-body li{
  list-style:disc;
  margin-bottom:6px;
  color:var(--clr-body);
  line-height:1.7;
}

/* Contact page form on white bg */
.contact-page-form{
  background:var(--white);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
}
.contact-page-form label{
  color:var(--clr-heading);
}
.contact-page-form input,
.contact-page-form select,
.contact-page-form textarea{
  color:var(--clr-body);
  background:var(--clr-surface);
  border:1px solid var(--clr-surface-3);
}
.contact-page-form input::placeholder,
.contact-page-form textarea::placeholder{
  color:var(--clr-body-light);
}
.contact-page-form input:focus,
.contact-page-form select:focus,
.contact-page-form textarea:focus{
  border-color:var(--clr-accent);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-content{max-width:100%;margin-inline:auto}
  .hero-desc{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-visual{display:none}

  .about-grid{grid-template-columns:1fr;text-align:center}
  .about-visual{max-width:500px;margin-inline:auto}
  .about-stats{justify-content:center}
  .about-content .section-label{text-align:center}

  .drone-grid{grid-template-columns:1fr}
  .drone-visual{max-width:500px;margin-inline:auto;order:-1}

  .cta-inner{grid-template-columns:1fr}
  .cta-text{text-align:center}
  .cta-text p{margin-inline:auto}
  .cta-infos{align-items:center}

  .footer-grid{grid-template-columns:1fr 1fr}

  .need-card,
  .need-card--reverse{
    grid-template-columns:1fr;
    gap:var(--space-lg);
  }
  .need-card--reverse .need-visual{
    order:0;
  }
  .need-visual{max-width:560px;margin-inline:auto;width:100%}
  .need-content{text-align:center}
  .need-quote{
    border-left:none;
    border-top:3px solid var(--olive);
    padding-left:0;
    padding-top:var(--space-xs);
  }
}

@media (max-width: 768px){
  :root{
    --space-2xl:4rem;
    --space-xl:3rem;
  }

  .nav-list{
    position:fixed;
    top:72px;left:0;right:0;
    background:rgba(244,243,239,.98);
    backdrop-filter:blur(16px);
    flex-direction:column;
    align-items:stretch;
    padding:var(--space-md);
    gap:2px;
    border-bottom:1px solid rgba(0,0,0,.06);
    transform:translateY(-120%);
    opacity:0;
    transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
    box-shadow:var(--shadow-lg);
  }
  .nav-list.is-open{
    transform:translateY(0);
    opacity:1;
  }
  .nav-list a{
    padding:14px var(--space-sm);
    font-size:var(--fs-base);
    border-radius:var(--radius-sm);
  }
  .nav-list a:not(.nav-cta):hover{
    background:var(--clr-surface-2);
  }
  .nav-list a::after{display:none}
  .nav-cta{
    text-align:center;
    justify-content:center;
    margin-top:var(--space-xs);
  }
  .menu-toggle{display:flex}

  .services-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .method-steps{grid-template-columns:1fr 1fr}
  .method-steps::before{display:none}
  .reassurance-grid{grid-template-columns:1fr 1fr}

  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand p{margin-inline:auto}
  .footer-bottom{justify-content:center;text-align:center}

  .needs-grid{gap:var(--space-lg)}
  .need-content h3{font-size:var(--fs-xl)}
  .need-quote{font-size:var(--fs-base)}

  .partners-grid{gap:var(--space-lg)}
  .partner-item{padding:var(--space-xs) var(--space-sm);min-height:60px}
  .partner-item img{max-height:56px;max-width:140px}

  .faq-cta{margin-top:var(--space-lg)}
}

@media (max-width: 480px){
  .method-steps{grid-template-columns:1fr}
  .reassurance-grid{grid-template-columns:1fr}
  .hero h1{font-size:var(--fs-3xl)}
  .zone-cities{gap:8px}
  .zone-cities span{font-size:var(--fs-xs);padding:6px 14px}
  .about-stats{flex-direction:column;gap:var(--space-sm);align-items:center}
  .stat-item{display:flex;gap:var(--space-xs);align-items:baseline}
}

/* Focus visible for accessibility */
:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:2px;
  border-radius:3px;
}
button:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
}


/* Justification globale des paragraphes + césures françaises */
p{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Exceptions : paragraphes qui doivent rester alignés à gauche (ou centrés) */
.section-desc,
.hero-accroche,
.hero-badge,
.need-quote,
.benefit-card p,
.reassurance-item p,
.method-step p,
.zone-content p,
.form-notice,
.faq-cta p,
.stat-item span,
.footer-brand p{
  text-align:center;
  hyphens:manual;
  -webkit-hyphens:manual;
}


/* Messages de feedback du formulaire */
.form-feedback{
  margin-top:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  font-size:var(--fs-sm);
  line-height:1.5;
}
.form-feedback--success{
  background:rgba(189,193,163,.25);
  color:var(--olive-dark);
  border-left:3px solid var(--olive);
}
.form-feedback--error{
  background:rgba(192,57,43,.08);
  color:#a83020;
  border-left:3px solid #c0392b;
}


.footer-social h4{
  font-family:var(--ff-heading);
  font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--stone);
  margin-bottom:var(--space-sm);
}
.social-list{
  display:flex;
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}
.social-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--stone);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.social-list a:hover{
  background:var(--olive);
  color:var(--white);
  transform:translateY(-2px);
}
.social-list svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.social-list svg[stroke]{
  fill:none;
  stroke:currentColor;
}