/* ============================================================
   IPCONSULT — styles.css (version habillée)
   Feuille de style commune à index.html et contact.html
   Pour changer une couleur : modifiez les variables ci-dessous.
   ============================================================ */

:root{
  --encre:      #0C2240;   /* bleu nuit (texte fort, sections sombres) */
  --nuit:       #081A33;   /* fond très sombre */
  --bleu:       #1656A8;   /* bleu profond */
  --cyan:       #21A8E0;   /* cyan capteur */
  --cyan-clair: #7FD4F5;
  --fond:       #F3F8FD;   /* fond clair froid */
  --blanc:      #FFFFFF;
  --ardoise:    #475971;   /* texte secondaire */
  --ligne:      #DCE7F2;
  --radius: 16px;
  --maxw: 1140px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', system-ui, sans-serif;
  color:var(--encre);
  background:var(--blanc);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:'Sora','Inter',sans-serif; line-height:1.15; letter-spacing:-0.02em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
a{ color:var(--bleu); }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- En-tête ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ligne);
}
.header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:24px;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:48px; width:auto; display:block; }
.brand-name{ font-family:'Sora',sans-serif; font-size:1.35rem; letter-spacing:-0.02em; color:var(--encre); }
.brand-name b{ font-weight:800; }
.brand-name span{ font-weight:400; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{ text-decoration:none; color:var(--ardoise); font-weight:500; font-size:.95rem; }
.nav a:hover{ color:var(--bleu); }
.nav .btn{ color:var(--blanc); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:600;
  padding:14px 28px; border-radius:999px; font-size:.98rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-plein{
  background:linear-gradient(120deg, var(--bleu), var(--cyan));
  color:var(--blanc);
  box-shadow:0 8px 22px rgba(22,86,168,.32);
}
.btn-plein:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(22,86,168,.4); }
.btn-ligne{ border:1.5px solid var(--ligne); color:var(--encre); background:var(--blanc); }
.btn-ligne:hover{ border-color:var(--cyan); }
.btn-blanc{ background:var(--blanc); color:var(--bleu); }
.btn-blanc:hover{ transform:translateY(-2px); }

/* ============================================================
   HÉRO — 2 colonnes : texte + immeuble connecté illustré
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(33,168,224,.14), transparent 60%),
    linear-gradient(180deg, var(--fond) 0%, var(--blanc) 100%);
  padding:80px 0 72px;
}
/* Trame "plan d'architecte" en fond */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(22,86,168,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,86,168,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.83rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bleu); margin-bottom:22px;
  background:rgba(33,168,224,.10); border:1px solid rgba(33,168,224,.3);
  padding:8px 18px; border-radius:999px;
}
.hero-eyebrow::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--cyan);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(33,168,224,.55); }
  70%{ box-shadow:0 0 0 11px rgba(33,168,224,0); }
  100%{ box-shadow:0 0 0 0 rgba(33,168,224,0); }
}
.hero h1{ font-size:clamp(2.1rem, 4.3vw, 3.3rem); font-weight:800; margin-bottom:22px; line-height:1.24; padding-top:4px; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg, var(--bleu), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ font-size:1.13rem; color:var(--ardoise); max-width:560px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Illustration : immeuble connecté + badges flottants */
.hero-visuel{ position:relative; }
.hero-visuel > svg{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 24px 44px rgba(12,34,64,.16));
}
.fenetre-active{ animation:fenetre 3.4s ease-in-out infinite; }
.fenetre-active:nth-of-type(2n){ animation-delay:1.1s; }
.fenetre-active:nth-of-type(3n){ animation-delay:2.2s; }
@keyframes fenetre{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.onde{
  stroke-dasharray:4 7; animation:onde 14s linear infinite;
}
@keyframes onde{ to{ stroke-dashoffset:-220; } }
.noeud{ animation:pulse-noeud 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.noeud:nth-of-type(2n){ animation-delay:.8s; }
.noeud:nth-of-type(3n){ animation-delay:1.6s; }
@keyframes pulse-noeud{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.35); }
}
/* Badges flottants sur l'illustration */
.badge{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border:1px solid var(--ligne); border-radius:12px;
  padding:10px 16px; font-size:.85rem; font-weight:600;
  box-shadow:0 10px 26px rgba(12,34,64,.14);
  animation:flotte 5.5s ease-in-out infinite;
}
.badge small{ display:block; font-weight:500; color:var(--ardoise); font-size:.74rem; }
.badge .pastille{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(33,168,224,.16), rgba(22,86,168,.16));
}
.badge .pastille svg{ width:18px; height:18px; stroke:var(--bleu); }
.badge-1{ top:6%;  left:-4%;  animation-delay:0s; }
.badge-2{ top:42%; right:-5%; animation-delay:1.6s; }
.badge-3{ bottom:7%; left:2%; animation-delay:3.1s; }
@keyframes flotte{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ---------- Bandeau références ---------- */
.refs{ padding:38px 0; border-bottom:1px solid var(--ligne); }
.refs p{
  text-align:center; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ardoise); margin-bottom:22px; font-weight:600;
}
.refs-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.ref{
  display:flex; align-items:center; gap:13px;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:14px;
  padding:12px 22px 12px 12px;
  box-shadow:0 6px 16px rgba(12,34,64,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ref:hover{ transform:translateY(-3px); border-color:var(--cyan); box-shadow:0 14px 28px rgba(12,34,64,.12); }
.ref-nom{
  display:flex; align-items:center; height:44px; padding:0 20px;
  border-radius:11px; flex-shrink:0;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.98rem; color:#fff;
  background:linear-gradient(135deg, var(--bleu), var(--cyan));
  box-shadow:0 6px 14px rgba(22,86,168,.3);
  white-space:nowrap;
}
.ref-secteur{
  font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem;
  color:var(--ardoise); line-height:1.3; padding-right:6px;
}

/* ---------- Bande de chiffres sombre ---------- */
.stats{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--nuit), var(--encre) 55%, var(--bleu));
  padding:52px 0;
}
.stats::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(127,212,245,.16) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  mask-image:linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 55%);
}
.stats .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center;
}
.stats b{
  font-family:'Sora',sans-serif; font-weight:800; font-size:2rem; line-height:1.1;
  display:block; color:var(--blanc);
}
.stats b em{ font-style:normal; color:var(--cyan-clair); }
.stats span{ color:rgba(255,255,255,.72); font-size:.9rem; }

/* ---------- Sections ---------- */
.section{ padding:92px 0; }
.section-fond{ background:var(--fond); }
.section-titre{ max-width:660px; margin-bottom:54px; }
.section-titre .sur{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bleu); margin-bottom:14px;
  background:rgba(33,168,224,.10); border:1px solid rgba(33,168,224,.28);
  padding:6px 16px; border-radius:999px;
}
.section-titre h2{ font-size:clamp(1.75rem, 3vw, 2.4rem); font-weight:800; margin-bottom:14px; }
.section-titre p{ color:var(--ardoise); font-size:1.05rem; }

/* ---------- Cartes expertises ---------- */
.cartes{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.carte{
  position:relative; overflow:hidden;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--radius);
  padding:36px 30px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carte::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--bleu), var(--cyan));
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.carte:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(12,34,64,.12); border-color:transparent; }
.carte:hover::before{ transform:scaleX(1); }
/* icône en filigrane décoratif dans l'angle */
.carte-filigrane{
  position:absolute; right:-26px; bottom:-26px; width:150px; height:150px;
  opacity:.055; pointer-events:none;
}
.carte-filigrane svg{ width:100%; height:100%; stroke:var(--bleu); }
.carte-icone{
  width:60px; height:60px; border-radius:16px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bleu), var(--cyan));
  box-shadow:0 10px 22px rgba(22,86,168,.3);
}
.carte-icone svg{ width:28px; height:28px; stroke:#fff; }
.carte h3{ font-size:1.22rem; font-weight:700; margin-bottom:12px; }
.carte > p{ color:var(--ardoise); font-size:.97rem; margin-bottom:18px; }
.carte ul{ list-style:none; position:relative; }
.carte li{
  position:relative; padding-left:26px; color:var(--encre);
  font-size:.94rem; margin-bottom:10px;
}
.carte li::before{
  content:""; position:absolute; left:0; top:8px;
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--cyan), var(--bleu));
  box-shadow:0 0 0 3px rgba(33,168,224,.15);
}

/* ---------- Cas clients (section sombre) ---------- */
.sombre{
  position:relative; overflow:hidden;
  background:
    radial-gradient(800px 420px at 12% 0%, rgba(33,168,224,.16), transparent 60%),
    linear-gradient(160deg, var(--nuit), var(--encre));
  color:var(--blanc);
}
.sombre .reseau-fond{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.sombre .reseau-fond svg{ width:100%; height:100%; }
.sombre .wrap{ position:relative; z-index:1; }
.sombre .section-titre h2{ color:var(--blanc); }
.sombre .section-titre p{ color:rgba(255,255,255,.72); }
.sombre .section-titre .sur{
  color:var(--cyan-clair);
  background:rgba(33,168,224,.14); border-color:rgba(127,212,245,.3);
}
.cas-grille{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.cas{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(127,212,245,.22);
  backdrop-filter:blur(6px);
  border-radius:var(--radius); padding:36px 32px;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.cas:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(127,212,245,.45); }
.cas-client{
  display:inline-block; font-family:'Sora',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan-clair); margin-bottom:12px;
}
.cas h3{ font-size:1.3rem; margin-bottom:12px; color:var(--blanc); }
.cas p{ color:rgba(255,255,255,.75); font-size:.97rem; }
.cas-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.cas-tags span{
  font-size:.8rem; font-weight:600; color:var(--cyan-clair);
  background:rgba(33,168,224,.14); border:1px solid rgba(127,212,245,.32);
  padding:5px 14px; border-radius:999px;
}

/* ---------- Grille de chiffres ---------- */
.chiffres-grille{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.chiffre-phare{
  grid-column:1 / -1;
  text-align:center; padding:44px 30px 40px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(127,212,245,.25);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}
.chiffre-phare b{
  display:block; font-family:'Sora',sans-serif; font-weight:800;
  font-size:clamp(3rem, 7vw, 5rem); line-height:1;
  background:linear-gradient(120deg, #7FD4F5, #21A8E0 55%, #4D8FE0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:6px;
}
.chiffre-phare span{ color:rgba(255,255,255,.78); font-size:1.05rem; }
.chiffre{
  text-align:center; padding:34px 20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(127,212,245,.18);
  border-radius:var(--radius);
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.chiffre:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(127,212,245,.4); }
.chiffre b{
  display:block; font-family:'Sora',sans-serif; font-weight:800;
  font-size:1.35rem; line-height:1.2; color:var(--cyan-clair); margin-bottom:8px;
}
.chiffre span{ color:rgba(255,255,255,.7); font-size:.88rem; line-height:1.45; display:block; }

/* Témoignage sur fond sombre */
.temoignage{ margin:60px auto 0; text-align:center; max-width:780px; }
.temoignage blockquote{
  font-family:'Sora',sans-serif;
  font-size:clamp(1.15rem, 2.2vw, 1.55rem); line-height:1.5; color:var(--blanc);
}
.temoignage blockquote em{ font-style:normal; color:var(--cyan-clair); }
.temoignage figcaption{ margin-top:18px; font-size:.92rem; font-weight:600; color:rgba(255,255,255,.65); }


/* ---------- Méthode : frise reliée ---------- */
.etapes{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; }
.etape{
  position:relative; background:var(--blanc); border:1px solid var(--ligne);
  border-radius:var(--radius); padding:32px 28px 28px;
}
.etape-num{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.05rem; color:var(--blanc);
  background:linear-gradient(135deg, var(--bleu), var(--cyan));
  box-shadow:0 8px 18px rgba(22,86,168,.3), 0 0 0 6px rgba(33,168,224,.12);
  margin-bottom:18px;
}
.etape h3{ font-size:1.12rem; margin-bottom:8px; }
.etape p{ color:var(--ardoise); font-size:.95rem; }


/* ---------- Bloc appel à l'action ---------- */
.cta{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--nuit), var(--bleu));
  border-radius:22px; padding:64px 52px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(127,212,245,.2) 1.5px, transparent 1.5px);
  background-size:24px 24px;
  mask-image:linear-gradient(115deg, transparent 45%, #000);
  -webkit-mask-image:linear-gradient(115deg, transparent 45%, #000);
}
.cta > div, .cta > a{ position:relative; z-index:1; }
.cta h2{ color:var(--blanc); font-size:clamp(1.5rem,2.6vw,2.05rem); margin-bottom:8px; }
.cta p{ color:rgba(255,255,255,.78); }

/* ---------- Page contact ---------- */
.contact-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(700px 360px at 80% 0%, rgba(33,168,224,.14), transparent 60%),
    linear-gradient(180deg, var(--fond), var(--blanc));
  padding:70px 0 0;
}
.contact-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(22,86,168,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,86,168,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%);
}
.contact-hero .wrap{ position:relative; z-index:1; }
.contact-grille{ display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:start; padding-bottom:92px; }
.coord{ display:flex; flex-direction:column; gap:20px; }
.coord-item{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--radius);
  padding:22px 24px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.coord-item:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(12,34,64,.09); border-color:var(--cyan); }
.coord-icone{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bleu), var(--cyan));
}
.coord-icone svg{ width:20px; height:20px; stroke:#fff; }
.coord-item strong{ display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ardoise); margin-bottom:4px; }
.coord-item a{ text-decoration:none; font-weight:600; }
.coord-item a:hover{ text-decoration:underline; }

.formulaire{
  position:relative; overflow:hidden;
  background:var(--blanc); border:1px solid var(--ligne); border-radius:var(--radius);
  padding:38px 36px 36px;
  box-shadow:0 24px 50px rgba(12,34,64,.08);
}
.formulaire::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, var(--bleu), var(--cyan));
}
.form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.formulaire label{ display:block; font-weight:600; font-size:.92rem; margin:18px 0 7px; }
.formulaire label:first-of-type{ margin-top:0; }
.formulaire input, .formulaire textarea, .formulaire select{
  width:100%; padding:13px 15px; border:1.5px solid var(--ligne); border-radius:10px;
  font:inherit; color:var(--encre); background:var(--fond);
}
.formulaire select{ cursor:pointer; }
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus{
  outline:none; border-color:var(--cyan); background:var(--blanc);
  box-shadow:0 0 0 4px rgba(33,168,224,.14);
}
.formulaire button{ margin-top:26px; border:none; cursor:pointer; width:100%; font-family:inherit; }
.form-note{ font-size:.85rem; color:var(--ardoise); margin-top:14px; text-align:center; }

/* ---------- Pied de page ---------- */
.footer{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--nuit), var(--encre));
  color:rgba(255,255,255,.8);
  padding:56px 0 36px;
}
.footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(127,212,245,.12) 1.5px, transparent 1.5px);
  background-size:28px 28px;
  mask-image:linear-gradient(115deg, transparent 55%, #000);
  -webkit-mask-image:linear-gradient(115deg, transparent 55%, #000);
}
.footer .wrap{ position:relative; z-index:1; display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer .brand-name{ color:var(--blanc); }
.footer-logo{
  display:inline-block; background:var(--blanc); border-radius:12px;
  padding:10px 16px;
}
.footer-logo img{ height:40px; width:auto; display:block; }
.footer p, .footer a{ font-size:.92rem; color:rgba(255,255,255,.75); }
.footer a{ text-decoration:none; }
.footer a:hover{ color:var(--blanc); }
.footer-col strong{
  display:block; color:var(--cyan-clair); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:12px;
}
.footer-col p{ margin-bottom:6px; }
.footer-bas{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:40px; padding-top:22px;
  font-size:.82rem; color:rgba(255,255,255,.5); text-align:center;
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .noeud, .fenetre-active, .onde, .badge, .hero-eyebrow::before{ animation:none; }
  .btn, .carte, .cas, .coord-item, .refs-logos span{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Adaptation mobile ---------- */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns:1fr; gap:44px; }
  .hero-visuel{ max-width:520px; margin:0 auto; }
  .chiffres-grille{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .cartes, .etapes, .cas-grille{ grid-template-columns:1fr; }
  .contact-grille{ grid-template-columns:1fr; }
  .form-2col{ grid-template-columns:1fr; }
  .nav a:not(.btn){ display:none; }
  .hero{ padding:56px 0 52px; }
  .section{ padding:64px 0; }
  .cta{ padding:44px 30px; }
  .badge-1{ left:0; } .badge-2{ right:0; } .badge-3{ left:0; }
}

/* ---------- Page mentions légales ---------- */
.legal{ max-width:800px; padding-bottom:92px; }
.legal h3{
  font-size:1.15rem; margin:38px 0 10px; color:var(--encre);
}
.legal p{ color:var(--ardoise); font-size:.98rem; margin-bottom:12px; }
.legal p strong{ color:var(--encre); }
.legal-maj{ margin-top:44px; font-size:.85rem !important; }
.footer-bas a{ color:rgba(255,255,255,.6); }
.footer-bas a:hover{ color:#fff; }

/* Champ piège anti-robots : hors écran, invisible pour les humains */
.piege{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-erreur{
  margin-top:14px; text-align:center; font-size:.9rem; font-weight:600;
  color:#B4232A; background:#FDEDEE; border:1px solid #F5C6C9;
  border-radius:10px; padding:12px 16px;
}
/* Page de confirmation */
.merci{ max-width:640px; text-align:center; padding:40px 24px 96px; }
.merci-icone{
  width:76px; height:76px; border-radius:50%; margin:0 auto 28px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--bleu), var(--cyan));
  box-shadow:0 14px 30px rgba(22,86,168,.35);
}
.merci-icone svg{ width:34px; height:34px; }
.merci h1{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-bottom:14px; }
.merci p{ color:var(--ardoise); font-size:1.05rem; margin-bottom:32px; }