/* ============================================================
   AZURAA — feuille de style (vhstudio)
   Référence : maquette Figma 1536 px, retranscrite en échelle fluide.
   Sommaire : 1 tokens · 2 base · 3 utilitaires · 4 icônes · 5 boutons
              6 en-tête · 7 hero · 9 à propos · 10 services
              11 crédit d'impôt · 13 avis · 14 FAQ
              15 contact · 16 pied de page · 17 responsive
   ============================================================ */

/* ---------------------------------------------------------- 1. TOKENS */
:root{
  /* couleurs de marque */
  --navy:#261F6D;
  --navy-l:#372E8C;
  --navy-d:#1B1650;
  --grey:#F1F1F1;
  --line:#E4E3EA;
  --peri:#988EFF;
  --cream:#EAE4D9;
  --ink-60:#5B5581;          /* texte secondaire — contraste 6.1:1 sur blanc */
  --ink-45:#6E6894;          /* placeholders — contraste 4.8:1 sur blanc */
  --err:#B3271C;             /* rouge d'erreur — contraste 5.9:1 sur blanc */

  /* rayons & ombres */
  --r-btn:14px;
  --r-card:20px;
  --r-nav:18px;
  --shadow-nav:0 10px 34px rgba(19,15,60,.14);
  --shadow-soft:0 18px 40px rgba(38,31,109,.10);
  --shadow-card:0 8px 24px rgba(38,31,109,.07);

  /* échelle fluide : valeur mini à 390 px, maxi à 1440 px */
  --gutter:clamp(1.125rem, 0.196rem + 3.81vw, 3.625rem);
  --sect-y:clamp(3rem, 1.083rem + 8.52vw, 8.75rem);        /* 48 px à 360, 140 px à 1440 */

  --fs-h1:clamp(1.875rem, 1.073rem + 3.565vw, 4.281rem);   /* 30 px à 360, 68,5 px à 1440 */
  --fs-h2:clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);
  --fs-h3:clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);
  --fs-lead:clamp(1.0625rem, 0.877rem + 0.762vw, 1.5625rem);
  --fs-body:clamp(1.031rem, 0.915rem + 0.476vw, 1.344rem);
  --fs-sm:clamp(0.938rem, 0.868rem + 0.286vw, 1.125rem);
  --fs-btn:clamp(1rem, 0.954rem + 0.19vw, 1.125rem);

  --maxw:1420px;

  /* mouvement : une seule courbe et trois durées pour tout le site,
     de façon à ce que rien ne détonne */
  --ease:cubic-bezier(.22,.61,.36,1);        /* sortie douce */
  --ease-soft:cubic-bezier(.4,.14,.3,1);     /* aller-retour */
  --t-fast:.22s;
  --t-base:.32s;
  --t-slow:.52s;
}

/* ---------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* seul le lien d'évitement cible encore un élément de la page */
#main{scroll-margin-top:110px}

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--navy);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;margin:0}
button{background:none;border:0}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--peri);outline-offset:3px;border-radius:6px}
.sect--navy :focus-visible,.hero :focus-visible{outline-color:#fff}

/* ---------------------------------------------------------- 3. UTILITAIRES */
.wrap{width:min(100% - var(--gutter) * 2, var(--maxw));margin-inline:auto}

.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;
}
.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);
  z-index:200;background:var(--navy);color:#fff;padding:14px 26px;
  border-radius:0 0 12px 12px;font-weight:600;transition:transform var(--t-base) var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* MAQUETTE — les liens portant data-page visent des pages qui n'existent pas
   encore : ils gardent tout leur habillage (survol compris, pour montrer
   l'intention de design) mais ne naviguent pas. Le jour de l'intégration,
   remplacer data-page="x.html" par href="x.html". */
a[data-page]{cursor:default}

.sect--grey{background:var(--grey)}
.sect--navy{background:var(--navy);color:#fff}

.h2{font-size:var(--fs-h2);line-height:1.28;letter-spacing:-.015em}
.lead{font-size:var(--fs-lead);line-height:1.7;font-weight:300}

/* ---------------------------------------------------------- 4. ICÔNES */
/* Icônes Lucide (ISC) intégrées dans le sprite inline en haut du HTML.
   Graisse 2 : c'est la valeur pour laquelle la bibliothèque est dessinée. */
.ico{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;
}
.ico--fill{fill:currentColor;stroke:none}

/* ---------------------------------------------------------- 5. BOUTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:54px;padding:.85em 1.55em;border-radius:var(--r-btn);
  font-size:var(--fs-btn);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  border:0;cursor:pointer;text-align:center;
  transition:transform var(--t-fast) var(--ease),background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.btn .ico{font-size:1.15em;transition:transform var(--t-base) var(--ease)}
.btn:hover .ico{transform:translate(3px,-3px)}
.btn:active{transform:translateY(1px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-l);box-shadow:0 12px 26px rgba(38,31,109,.26)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{box-shadow:0 12px 26px rgba(19,15,60,.16)}
.btn--lg{min-height:64px;padding:1em 1.85em;font-size:clamp(1rem,.93rem + .29vw,1.19rem)}

/* ---------------------------------------------------------- 6. EN-TÊTE */
.site-head{position:absolute;top:clamp(14px,2vw,28px);left:0;right:0;z-index:60}
.site-head.is-stuck{position:fixed;top:clamp(8px,1.4vw,14px);animation:dropIn .35s ease both}
@keyframes dropIn{from{transform:translateY(-18px);opacity:0}to{transform:none;opacity:1}}

.nav{
  background:#fff;border-radius:var(--r-nav);
  min-height:clamp(62px,5vw,76px);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);
  padding:8px 8px 8px clamp(16px,2vw,30px);
  box-shadow:var(--shadow-nav);position:relative;
}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:clamp(28px,2.6vw,38px);width:auto}

.nav__panel{display:contents}
.nav__links{display:flex;align-items:center;gap:clamp(20px,2.9vw,44px);margin-inline:auto}
.nav__links a{
  font-size:clamp(.95rem,.88rem + .29vw,1.125rem);font-weight:600;
  position:relative;padding:6px 0;display:inline-block;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--navy);border-radius:2px;transition:right var(--t-base) var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__cta{flex:none}
.nav__cta-mobile{display:none}

.burger{
  display:none;width:46px;height:46px;border-radius:12px;
  cursor:pointer;color:var(--navy);flex:none;
  align-items:center;justify-content:center;
}
.burger .ico{font-size:26px}
.burger__close{display:none}
.nav.is-open .burger__open{display:none}
.nav.is-open .burger__close{display:block}

/* ---------------------------------------------------------- 7. HERO */
.hero{
  position:relative;
  min-height:640px;
  min-height:100svh;          /* plein écran à l'ouverture */
  display:flex;align-items:flex-end;overflow:hidden;
  padding-top:clamp(110px,14vw,150px);
}
.hero__bg{position:absolute;inset:0}
/* le <picture> est en display:inline par défaut : sans cette règle l'image
   se calait sur son ratio (1440×805) au lieu de remplir le hero, et laissait
   une bande découverte en bas dès que le hero dépassait cette hauteur */
.hero__bg picture{position:absolute;inset:0;display:block}
/* la source est un portrait : on cadre par le haut pour garder la vitre et
   le technicien, comme sur la maquette Canva */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 8%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    /* ferme le bas : le sol de la photo y est très clair et laissait une
       bande pâle sous les boutons */
    linear-gradient(to top,
      rgba(9,8,26,.60) 0%, rgba(9,8,26,.44) 10%, rgba(9,8,26,.26) 22%,
      rgba(9,8,26,.12) 33%, rgba(9,8,26,0) 46%),
    /* rampe à nombreux arrêts : deux paliers suffisaient à créer un « genou »
       visible là où la pente changeait */
    linear-gradient(100deg,
      rgba(9,8,26,.92)  0%,  rgba(9,8,26,.895) 8%,  rgba(9,8,26,.855) 16%,
      rgba(9,8,26,.80)  24%, rgba(9,8,26,.735) 32%, rgba(9,8,26,.665) 40%,
      rgba(9,8,26,.595) 48%, rgba(9,8,26,.53)  56%, rgba(9,8,26,.47)  64%,
      rgba(9,8,26,.42)  72%, rgba(9,8,26,.385) 80%, rgba(9,8,26,.375) 88%,
      rgba(9,8,26,.40)  100%);
}
/* NB : pas de width:100% ici — cela écrasait la largeur de .wrap
   (le contenu du hero venait alors coller le bord de l'écran). */
.hero__inner{
  position:relative;z-index:2;
  padding-block:clamp(40px,5vw,41px);
  display:flex;align-items:flex-end;gap:clamp(28px,4vw,48px);
}
.hero__copy{max-width:62ch;color:#fff}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:.55em 1.1em .55em .8em;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:var(--fs-sm);font-weight:400;margin-bottom:22px;line-height:1.3;
}
.badge .ico{font-size:1.3em}

.hero h1{font-size:var(--fs-h1);line-height:1.16;letter-spacing:-.03em;max-width:16ch}
.hero__sub{margin-top:20px;font-size:var(--fs-lead);line-height:1.55;max-width:44ch;font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,20px);margin-top:clamp(24px,3vw,34px)}

.hero__rating{color:#fff;flex:none;padding-bottom:clamp(0px,3vw,39px);margin-left:auto}
.hero__rating .score{font-size:clamp(2.25rem,1.7rem + 2.2vw,3.25rem);font-weight:300;line-height:1}
.hero__rating .stars{margin:6px 0 2px}
.hero__rating .stars .ico{color:var(--peri)}
.hero__rating .cap{font-size:var(--fs-sm);font-weight:300}
.avatars{display:flex;margin-top:10px}
.avatars .av{
  width:clamp(42px,4vw,57px);aspect-ratio:1;border-radius:50%;
  border:3px solid #fff;margin-left:-15px;background:#cfcde2;overflow:hidden;
}
.avatars .av:first-child{margin-left:0}

.stars{display:inline-flex;gap:3px;align-items:center;line-height:0}

/* ---------------------------------------------------------- 9. À PROPOS */
.partner{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,38vw,561px);
  gap:clamp(36px,4.5vw,64px);align-items:center;
  padding-block:var(--sect-y);
}
.partner h2{margin-bottom:clamp(22px,2.6vw,36px)}
.partner p+p{margin-top:clamp(18px,2.4vw,32px)}
/* sélecteur porté à la même spécificité que `.partner p+p`, qui écrasait
   silencieusement la marge : l'écart restait bloqué à 32 px */
.partner .signature{
  font-family:'Mrs Saint Delafield','Brush Script MT',cursive;
  font-size:clamp(2.75rem,2rem + 3vw,3.75rem);line-height:1.1;
  margin-top:clamp(36px,4.8vw,64px);   /* le double de l'écart entre paragraphes */
  color:var(--navy);
}
.partner__img{
  border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:561/640;box-shadow:var(--shadow-soft);
}
.partner__img img{width:100%;height:100%;object-fit:cover;object-position:center 22%}

/* ---------------------------------------------------------- 10. SERVICES */
.services{padding-block:var(--sect-y)}
.services .h2{text-align:center}

.switch-row{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(24px,3vw,44px);
  font-size:clamp(1rem,.92rem + .38vw,1.375rem);
}
.switch-row .lbl{
  cursor:pointer;transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease);color:var(--ink-60);
  font-weight:400;padding:6px 4px;border-radius:8px;
}
.switch-row .lbl.is-on{color:var(--navy);font-weight:600}
.switch{
  width:clamp(76px,7vw,98px);height:clamp(38px,3.4vw,45px);
  border-radius:12px;background:#fff;border:1.5px solid var(--line);
  cursor:pointer;position:relative;flex:none;padding:0;
}
.switch::after{
  content:"";position:absolute;top:4px;bottom:4px;left:4px;
  width:calc(50% - 6px);border-radius:8px;background:var(--navy);
  transition:transform var(--t-base) var(--ease-soft);
}
.switch[aria-checked="true"]::after{transform:translateX(calc(100% + 4px))}

.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,38px);margin-top:clamp(40px,6vw,86px);
}
.cards[hidden]{display:none}
.cards.is-swapping{opacity:0;transform:translateY(10px)}
.cards{transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}

/* Empilement : image -> ::after (dernier enfant, donc au-dessus) -> texte/icône
   en z-index positif. Pas de z-index négatif ni d'isolation : ce montage-là
   ne se composite pas de façon fiable (capture pleine page, anciens Safari). */
.card-svc{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:1;display:flex;align-items:flex-end;
}
.card-svc picture,.card-svc img{position:absolute;inset:0;width:100%;height:100%}
/* sources en portrait (640×800) : on remonte le cadrage pour ne pas
   couper les visages quand la carte devient large et basse */
.card-svc img{object-fit:cover;object-position:center 28%;transition:transform var(--t-slow) var(--ease)}
.card-svc::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,22,.84) 0%,rgba(8,8,22,.38) 36%,rgba(8,8,22,0) 62%);
}
.card-svc:hover img{transform:scale(1.03)}
.card-svc__ico{
  position:absolute;top:18px;left:18px;z-index:2;
  width:clamp(40px,3.6vw,48px);aspect-ratio:1;border-radius:13px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:#fff;
}
.card-svc__ico .ico{font-size:clamp(21px,1.9vw,25px)}
.card-svc__txt{padding:0 clamp(18px,2vw,30px) clamp(20px,2vw,28px);color:#fff;position:relative;z-index:2}
.card-svc__txt h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em}
.card-svc__txt p{font-size:var(--fs-sm);font-weight:300;margin-top:4px;opacity:.92}

.services__more{display:flex;justify-content:center;margin-top:clamp(34px,4vw,60px)}

/* ---------------------------------------------------------- 11. CRÉDIT D'IMPÔT */
.credit{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,36vw,563px);
  gap:clamp(40px,6vw,96px);align-items:start;
  padding-block:var(--sect-y);
}
.credit h2{font-size:var(--fs-h2);line-height:1.3}
.credit .big{
  font-size:clamp(4rem,2rem + 8.19vw,9.375rem);line-height:1;
  font-weight:700;letter-spacing:-.035em;margin-top:.12em;
}
.credit .big-sub{
  font-size:clamp(1.375rem,.771rem + 2.476vw,3rem);line-height:1.24;
  font-weight:700;margin-top:.25em;max-width:16ch;letter-spacing:-.02em;
}
.credit p.txt{font-size:var(--fs-body);line-height:1.8;font-weight:300;margin-top:clamp(16px,2vw,24px);max-width:58ch}
.credit__cta{display:flex;gap:clamp(12px,1.5vw,22px);margin-top:clamp(24px,3vw,34px);flex-wrap:wrap}

.info-card{
  background:var(--navy);color:#fff;border-radius:18px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
}
.info-card+.info-card{margin-top:clamp(14px,1.6vw,22px)}
.info-card h3{
  display:flex;align-items:center;gap:12px;
  font-size:clamp(1.063rem,.99rem + .29vw,1.375rem);font-weight:600;
  margin-bottom:10px;letter-spacing:-.01em;
}
.info-card h3 .ico{font-size:1.35em;color:var(--peri)}
.info-card p{font-size:var(--fs-sm);line-height:1.6;font-weight:300}

/* calés sur une hauteur commune : à largeur égale le logo SAP écrasait
   Unipros (164 px de haut contre 49) */
/* Unipros est composé à la verticale — pastille au-dessus du logotype — ce
   qui lui donne la même masse que le label SAP. En ligne, l'écart entre la
   pastille et le mot créait un trou perturbant. */
.partners{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(32px,4vw,56px);margin-top:clamp(32px,3.8vw,52px);flex-wrap:wrap;
}
.partners img.sap{height:clamp(84px,7.8vw,116px);width:auto}
.partners .unipros{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,1vw,12px);
}
.partners .unipros img:first-child{height:clamp(44px,4vw,58px);width:auto}
.partners .unipros img:last-child{height:clamp(34px,3.1vw,46px);width:auto}

/* ---------------------------------------------------------- 13. AVIS */
.testi{padding-block:var(--sect-y)}
.testi__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,30px);margin-bottom:clamp(32px,4.6vw,64px);flex-wrap:wrap;
}
.rating-badge{
  background:#fff;color:var(--navy);border-radius:16px;
  padding:12px clamp(20px,2.2vw,28px) 14px;
  display:flex;flex-direction:column;align-items:flex-start;flex:none;
}
.rating-badge .row{display:flex;align-items:center;gap:14px}
.rating-badge .num{font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);font-weight:700;line-height:1.05}
.rating-badge .cap{font-size:var(--fs-sm);font-weight:300;margin-top:2px;color:var(--ink-60)}
.rating-badge .stars .ico{color:var(--navy)}

.t-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px);align-items:stretch}
.t-card{
  background:#fff;color:var(--navy);border-radius:16px;
  padding:clamp(20px,2vw,26px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.t-card__quote{position:absolute;top:16px;right:16px;font-size:38px;color:var(--navy);opacity:.07}
.t-card__top{display:flex;align-items:center;gap:14px}
.t-card__top .av{width:50px;height:50px;border-radius:50%;flex:none;overflow:hidden;background:#e6e4f0}
.t-card__top h3{font-size:clamp(1.063rem,1rem + .29vw,1.375rem);line-height:1.2;letter-spacing:-.02em}
.t-card__top span{font-size:var(--fs-sm);font-weight:300;color:var(--ink-60)}
.t-card .stars{margin:12px 0}
.t-card .stars .ico{color:var(--navy)}
.t-card p{font-size:var(--fs-sm);line-height:1.75;font-weight:300}

.t-card--last{justify-content:flex-start}
.t-card__gicon{
  width:46px;height:46px;border-radius:13px;background:var(--grey);
  display:grid;place-items:center;margin-bottom:16px;
}
.t-card__gicon .ico{font-size:24px}
.t-card--last h3{font-size:clamp(1.063rem,1rem + .29vw,1.375rem);line-height:1.45;margin-bottom:10px}
.t-card--last p{margin-bottom:auto}
.t-card--last a{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:var(--fs-body);font-weight:600;
}
.t-card--last a .ico{font-size:1.15em;transition:transform var(--t-base) var(--ease)}
.t-card--last a:hover{text-decoration:underline;text-underline-offset:4px}
.t-card--last a:hover .ico{transform:translate(2px,-2px)}

/* ---------------------------------------------------------- 14. FAQ */
.faq{padding-block:var(--sect-y)}
.faq h2{margin-bottom:clamp(26px,3.4vw,50px)}
.faq__list{max-width:1100px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item h3{margin:0;font-size:inherit;font-weight:inherit}
.faq__q{
  width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,30px);padding:clamp(20px,2.6vw,38px) 4px;
  font-size:clamp(1.063rem,.888rem + .714vw,1.531rem);
  font-weight:600;color:var(--navy);letter-spacing:-.01em;line-height:1.35;
}
.faq__q .plus{
  flex:none;display:grid;place-items:center;
  width:clamp(34px,3.2vw,42px);aspect-ratio:1;border-radius:50%;
  background:var(--grey);transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.faq__q .plus .ico{font-size:clamp(18px,1.7vw,22px);transition:transform var(--t-base) var(--ease-soft)}
.faq__q:hover .plus{background:var(--line)}
.faq__item.is-open .plus{background:var(--navy);color:#fff}
.faq__item.is-open .plus .ico{transform:rotate(135deg)}
/* accordéon : animation sur la hauteur en pixels, pilotée par le JS, puis
   remise à `auto` une fois ouverte — donc rien n'est tronqué au
   redimensionnement. L'interpolation de grid-template-rows en unités fr
   saccadait, en particulier sous Safari. */
.faq__a{overflow:hidden;height:0;transition:height var(--t-base) var(--ease-soft);will-change:height}
.faq__a[hidden]{display:none}
.faq__a p{
  font-size:var(--fs-body);line-height:1.85;font-weight:300;
  padding:0 clamp(0px,4vw,60px) clamp(22px,2.6vw,36px) 4px;max-width:75ch;
}

/* ---------------------------------------------------------- 15. CONTACT */
.contact{position:relative;padding-block:var(--sect-y);background:var(--grey)}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58rem 34rem at 12% -8%, rgba(152,142,255,.20), transparent 62%),
    radial-gradient(46rem 30rem at 92% 8%, rgba(38,31,109,.10), transparent 60%);
}
.contact .wrap{position:relative;z-index:1}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,36vw,532px);
  gap:clamp(36px,5vw,80px);align-items:start;
}
.contact h2{max-width:16ch;margin-bottom:clamp(16px,2vw,28px)}
.contact__lead{font-size:var(--fs-body);line-height:1.8;font-weight:300;max-width:48ch;color:var(--ink-60)}

.pills{margin-top:clamp(40px,7vw,102px);display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);max-width:560px}
.pill{
  background:#fff;border-radius:14px;padding:12px clamp(16px,1.8vw,22px);
  display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base) var(--ease);
}
.pill:hover{box-shadow:0 10px 26px rgba(38,31,109,.14)}
.pill__ico{
  width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;flex:none;
}
.pill__ico--wa{background:#25D366}
.pill__ico .ico{font-size:23px}
.pill__txt{min-width:0}
.pill__txt span{display:block;font-size:var(--fs-sm);font-weight:300;line-height:1.3;color:var(--ink-60)}
.pill__txt strong{display:block;font-size:clamp(1.063rem,1rem + .29vw,1.375rem);font-weight:700;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}

.form-card{
  background:#fff;border-radius:24px;
  padding:clamp(24px,3vw,42px) clamp(20px,2.6vw,38px) clamp(22px,2.4vw,30px);
  box-shadow:0 24px 60px rgba(38,31,109,.10);
}
.field{margin-bottom:16px}
.field>label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:8px}
.field .opt{font-weight:300;color:var(--ink-60)}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid #D5D2E2;border-radius:14px;background:#fff;
  padding:0 18px;min-height:56px;font-size:var(--fs-sm);font-weight:300;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{padding:16px 18px;min-height:150px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-45)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(38,31,109,.12)}
.field.is-err input,.field.is-err textarea{border-color:var(--err)}
.field .msg{display:none;color:var(--err);font-size:.875rem;margin-top:7px;font-weight:400}
.field.is-err .msg{display:block}

.select-pill{position:relative;display:block}
.select-pill select{
  appearance:none;-webkit-appearance:none;
  border:1.5px solid var(--navy);border-radius:999px;background:#fff;
  min-height:48px;padding:0 44px 0 20px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
}
.select-pill .ico{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:16px}

.field--check .check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;position:relative}
/* l'input reste masqué mais garde la taille de la case : la zone cliquable
   native correspond au visuel (elle ne faisait qu'1 px auparavant) */
.field--check input{position:absolute;top:0;left:0;width:26px;height:26px;opacity:0;margin:0;cursor:pointer}
.check__box{
  width:26px;height:26px;flex:none;border-radius:8px;margin-top:1px;
  border:1.5px solid #D5D2E2;background:#fff;display:grid;place-items:center;
  color:transparent;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.check__box .ico{font-size:16px}
.check input:checked+.check__box{background:var(--navy);border-color:var(--navy);color:#fff}
.check input:focus-visible+.check__box{outline:3px solid var(--peri);outline-offset:3px}
.field--check.is-err .check__box{border-color:var(--err)}
.check__txt{font-size:.875rem;line-height:1.55;font-weight:300;color:var(--ink-60)}
.check__txt a{text-decoration:underline;text-underline-offset:3px;color:var(--navy)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit{width:100%;margin-top:10px}
.form-ok{
  display:flex;align-items:center;gap:12px;
  background:rgba(38,31,109,.07);border-radius:14px;
  padding:14px 18px;font-size:var(--fs-sm);margin-top:16px;font-weight:400;
}
.form-ok[hidden]{display:none}
.form-ok .ico{font-size:24px;color:var(--navy)}
.form-note{
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--ink-60);font-size:var(--fs-sm);font-weight:300;margin-top:18px;
}
.form-note .ico{font-size:1.2em}

/* ---------------------------------------------------------- 16. PIED DE PAGE */
.foot{background:var(--navy);color:#fff;padding-top:clamp(48px,6vw,79px);position:relative;overflow:hidden}
.foot__grid{
  display:grid;grid-template-columns:1.6fr 1fr 0.8fr 1.05fr;
  gap:clamp(28px,3vw,40px);
}
.foot__logo{width:clamp(200px,22vw,327px);height:auto;margin-bottom:20px}
.foot__brand p{font-size:var(--fs-sm);line-height:1.85;font-weight:300;max-width:42ch;opacity:.92}
.foot__brand .zone{margin-top:22px}
.foot__brand .zone strong{font-size:var(--fs-sm);font-weight:600}
.foot__brand .zone span{display:block;font-size:var(--fs-sm);font-weight:300;margin-top:7px;opacity:.9;line-height:1.6}

.socials{display:flex;gap:10px;margin-top:24px}
.socials a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.socials a{color:rgba(255,255,255,.78)}
.socials a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34);color:#fff}
.socials .ico{font-size:20px}

.foot__h{font-size:clamp(1rem,.95rem + .24vw,1.281rem);font-weight:500;margin-bottom:20px;letter-spacing:-.01em}
.foot__col ul{display:flex;flex-direction:column;gap:4px}
.foot__col a{
  font-size:var(--fs-sm);font-weight:300;
  color:rgba(255,255,255,.72);
  transition:color var(--t-base) var(--ease);
  display:inline-flex;align-items:center;gap:12px;line-height:1.4;
  min-height:28px;padding:5px 0;   /* cible tactile >= 24 px */
}
/* survol : passage au blanc, rien d'autre — ni soulignement ni déplacement */
.foot__col a:hover{color:#fff}
.foot__col .ico{font-size:19px;opacity:.9}

/* Le filigrane n'est plus rogné : il est entier et pose sa ligne de base
   exactement sur le filet de séparation. Le fondu part du fond en haut et se
   densifie vers le bas, si bien que les lettres semblent émerger et reposer
   sur le trait — au lieu d'être amputées. */
.watermark{
  margin-top:clamp(30px,4vw,52px);position:relative;
  aspect-ratio:1500/209;overflow:hidden;
}
.watermark img{
  display:block;width:100%;height:auto;opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.5) 54%,rgba(0,0,0,.12) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.5) 54%,rgba(0,0,0,.12) 100%);
}
/* Mentions de bas de page : volontairement en retrait sous le logo filigrane.
   Opacités calibrées pour rester au-dessus du seuil WCAG AA sur le fond navy
   (texte 5,2:1 — liens 7,6:1). */
/* grille 1fr / auto / 1fr : la mention centrale est vraiment centrée dans la
   page, alors qu'un space-between la décalait selon la longueur des voisins */
.foot__bottom{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,1.6vw,26px);
  margin-top:0;
  padding:clamp(18px,2.2vw,28px) 0 clamp(22px,2.4vw,32px);
  border-top:1px solid rgba(255,255,255,.09);
  font-size:clamp(.8125rem,.78rem + .14vw,.9375rem);
  font-weight:300;letter-spacing:.005em;
  color:rgba(255,255,255,.55);
}
.foot__bottom>:first-child{justify-self:start}
.foot__bottom .by{justify-self:center;text-align:center}
.foot__bottom .legal{display:flex;gap:clamp(14px,1.8vw,28px);flex-wrap:wrap;justify-self:end}
.foot__bottom a{color:rgba(255,255,255,.7);transition:color var(--t-base) var(--ease)}
.foot__bottom a:hover{color:#fff}
.foot__bottom .legal a,.foot__bottom .by a{display:inline-flex;align-items:center;min-height:28px}
.foot__bottom .by a{font-weight:400;text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------------- BOUTONS FLOTTANTS */
.fabs{
  position:fixed;z-index:70;
  right:clamp(14px,1.6vw,26px);
  bottom:calc(clamp(14px,1.6vw,26px) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
/* escamotés au-dessus de la section contact, qui porte déjà ces liens */
.fabs.is-hidden{opacity:0;transform:translateY(130%);pointer-events:none}

.fab{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;color:#fff;
  box-shadow:0 10px 28px rgba(19,15,60,.32);
  transition:box-shadow var(--t-base) var(--ease),filter var(--t-base) var(--ease);
}
.fab:hover{box-shadow:0 14px 32px rgba(19,15,60,.4)}
.fab:active{transform:scale(.96)}

/* WhatsApp : présent sur tous les écrans, il suit la navigation */
.fab--wa{
  width:clamp(52px,4.4vw,60px);aspect-ratio:1;justify-content:center;
  background:#25D366;box-shadow:0 10px 28px rgba(37,211,102,.38);
}
.fab--wa:hover{box-shadow:0 14px 34px rgba(37,211,102,.5);filter:brightness(1.05)}
.fab--wa .ico{font-size:clamp(28px,2.4vw,32px)}

/* Appel direct : mobile uniquement (voir palier 760) */
.fab--call{
  display:none;background:var(--navy);
  padding:13px 20px;font-size:.938rem;font-weight:600;
}
.fab--call .ico{font-size:19px}

/* ============================================================ 17. RESPONSIVE */

/* — grands écrans : on borne la largeur utile — */
@media (min-width:1700px){
  :root{--gutter:4rem}
}

/* — laptop — */
@media (max-width:1180px){
  .partner{grid-template-columns:1fr;gap:clamp(30px,4vw,48px)}
  .partner__img{aspect-ratio:16/10;max-height:520px}
  .credit{grid-template-columns:1fr;gap:clamp(32px,4vw,52px)}
  .contact__grid{grid-template-columns:1fr}
  .pills{margin-top:28px;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
}

/* — la barre de navigation (5 liens + CTA) ne tient plus sous ~1000 px :
     on bascule sur le panneau déroulant dès ce palier — */
@media (max-width:1000px){
  .nav{padding:8px 8px 8px 16px}
  .burger{display:flex}
  .nav__cta{display:none}

  .nav__panel{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    background:#fff;border-radius:var(--r-nav);box-shadow:var(--shadow-nav);
    padding:14px 22px 20px;max-height:calc(100dvh - 140px);overflow-y:auto;
  }
  .nav.is-open .nav__panel{display:block}
  .nav__links{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .nav__links li+li{border-top:1px solid var(--line)}
  .nav__links a{font-size:1.063rem;padding:15px 0;display:block}
  .nav__links a::after{display:none}
  .nav__links a[aria-current="page"]{color:var(--navy-l);font-weight:700}
  /* le CTA disparaissait complètement en mobile : on le remet dans le panneau */
  .nav__cta-mobile{display:flex;width:100%;margin-top:16px}

}

/* — tablette — */
@media (max-width:900px){
  .cards,.t-cards{grid-template-columns:1fr;gap:20px}
  .card-svc{aspect-ratio:4/3}
  .partner__img{aspect-ratio:3/2;max-height:none}
  .testi__head{flex-direction:column;align-items:flex-start}
  .hero__inner{flex-direction:column;align-items:flex-start;gap:30px}
  .hero__rating{padding-bottom:0;margin-left:0}
  .hero__copy{max-width:none}
}

/* — mobile : le menu passe en panneau déroulant — */
@media (max-width:760px){
  /* Le hero mobile fait environ 360×900 (ratio 0,4) : aucun recadrage d'une
     photo de paysage n'y survit, et le voile nécessaire au texte finissait
     par tout masquer. On change donc de composition : la photo occupe un
     bandeau en haut — où elle est cadrée normalement, technicien entier —
     et le texte passe sur un aplat sombre en dessous. Contraste garanti,
     photo réellement visible. */
  .hero{
    --hero-band:clamp(250px, 33svh, 300px);
    background:#0D0B20;
    padding-top:calc(var(--hero-band) + clamp(26px,6vw,40px));
    padding-bottom:clamp(26px,5vw,40px);
  }
  .hero__bg{inset:0 0 auto 0;height:var(--hero-band)}
  .hero__bg img{object-position:center top}
  /* le bandeau fournit déjà la respiration : on supprime le vide au-dessus du texte */
  .hero__inner{padding-top:0}
  .hero__bg::after{
    background:linear-gradient(to bottom,
      rgba(9,8,26,.42) 0%,
      rgba(9,8,26,.12) 32%,
      rgba(9,8,26,.24) 58%,
      rgba(13,11,32,.88) 86%,
      #0D0B20 100%);
  }
  .hero h1{max-width:none}
  .hero__sub{max-width:none}
  .hero__cta .btn{flex:1 1 100%}
  .credit .big-sub{max-width:none}
  .contact h2{max-width:none}
  .pills{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__bottom{grid-template-columns:1fr;justify-items:start;gap:12px}
  .foot__bottom .by,.foot__bottom .legal{justify-self:start;text-align:left}
  .t-card__quote{font-size:30px}
  .fab--call{display:inline-flex}
  /* laisse la place à la pile de boutons flottants */
  .foot__bottom{padding-bottom:calc(clamp(28px,2.8vw,40px) + 128px)}
}

/* — petits mobiles — */
@media (max-width:520px){
  .switch-row{flex-wrap:wrap;justify-content:center;font-size:1rem}
  .credit__cta{flex-direction:column;align-items:stretch}
  .credit__cta .btn{width:100%}
  .partner__img{aspect-ratio:4/5}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .foot__brand{grid-column:1/-1}
  /* en colonne de ~150 px, chaque libellé de service passait sur deux lignes :
     on retire les icônes de cette liste et on étale le bloc contact */
  .foot__col:not(.foot__contact) .ico{display:none}
  .foot__col:not(.foot__contact) a{gap:0}
  .foot__contact{grid-column:1/-1}
  .rating-badge{width:100%}
  .partners{gap:22px}
  .avatars .av{width:40px}
}

/* — préférences système — */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .site-head,.fabs,.hero__bg,.switch-row,.form-card,.socials{display:none !important}
  body{color:#000;background:#fff}
  .sect--navy,.foot{background:#fff !important;color:#000 !important}
}

/* ============================================================ PAGES LÉGALES */
.legal-page{padding-block:clamp(120px,14vw,190px) var(--sect-y)}
.legal-page .wrap{max-width:820px}
.legal-page h1{font-size:var(--fs-h2);margin-bottom:10px}
.legal-page .updated{color:var(--ink-60);font-size:var(--fs-sm);margin-bottom:clamp(28px,4vw,48px)}
.legal-page h2{font-size:var(--fs-h3);margin:clamp(30px,3.6vw,48px) 0 12px}
.legal-page p,.legal-page li{font-size:var(--fs-sm);line-height:1.85;font-weight:300}
.legal-page p+p{margin-top:14px}
.legal-page ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.legal-page ul li{padding-left:22px;position:relative}
.legal-page ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--peri)}
.legal-page a{text-decoration:underline;text-underline-offset:3px}
.legal-page .back{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(34px,4vw,52px);font-weight:600;text-decoration:none}
.legal-page .back .ico{font-size:1.15em;transform:rotate(180deg)}
.todo{
  background:#FFF7E6;border:1px solid #F0D9A8;border-radius:12px;
  padding:14px 18px;margin-top:14px;font-size:.875rem;line-height:1.7;color:#6B4E12;
}
.todo strong{font-weight:700}