/* Wagner - Infogérance — couleurs reprises du logo, version « funky » */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --marine: #102C57;
  --marine-fonce: #0B1E40;
  --nuit: #030C17;
  --bleu: #1675AF;       /* boutons et liens (contraste AA sur blanc) */
  --bleu-vif: #049DE6;
  --bleu-clair: #40C0F1;
  --menthe: #5EF2C8;     /* touche pop, uniquement en accent */
  --gris: #CDCCCD;
  --fond: #F2F7FB;
  --texte: #1B2433;
  --texte-doux: #4A5568;
  --bord: #DDE7F0;
  --rayon: 20px;
  --largeur: 1120px;
  --degrade: linear-gradient(120deg, var(--bleu-vif), var(--bleu-clair) 55%, var(--menthe));
  --titres: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: #fff;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--marine); }
h1, h2, h3 { font-family: var(--titres); color: var(--marine); line-height: 1.12; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.02em; }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 3px; }
::selection { background: var(--menthe); color: var(--nuit); }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.lien-evitement:focus { left: 8px; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--degrade); opacity: .9; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 74px; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--nuit); }
.marque img { width: 40px; height: 48px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.marque:hover img { transform: rotate(-12deg) scale(1.08); }
.marque-nom { font-family: var(--titres); font-size: 1.45rem; font-weight: 600; letter-spacing: .12em; line-height: 1; }
.marque-sous { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .34em; color: var(--marine); margin-top: 5px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav a { position: relative; display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--texte); font-weight: 600; }
.nav a:hover { background: var(--fond); color: var(--marine); }
.nav a[aria-current="page"] { background: var(--marine); color: #fff; }
.nav .nav-tel { background: linear-gradient(120deg, var(--menthe), var(--bleu-clair), var(--menthe)) 0 0 / 200% 100%; color: var(--nuit); margin-left: 6px; transition: background-position .5s; }
.nav .nav-tel:hover { background-position: 100% 0; color: var(--nuit); }

/* ---------- Boutons ---------- */
.bouton { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.bouton::after { /* reflet qui traverse le bouton au survol */
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: left .6s ease; pointer-events: none;
}
.bouton:hover::after { left: 130%; }
.bouton:hover { transform: translateY(-2px); }
.bouton-plein { background: var(--bleu); color: #fff; }
.bouton-plein:hover { background: var(--marine); color: #fff; }
.bouton-clair { background: linear-gradient(#fff, #fff) padding-box, var(--degrade) border-box; color: var(--marine); }
.bouton-clair:hover { background: var(--degrade) padding-box, var(--degrade) border-box; color: var(--nuit); }
.bouton-contour { border-color: rgba(255,255,255,.6); color: #fff; }
.bouton-contour:hover { border-color: var(--bleu-clair); background: rgba(64,192,241,.12); color: #fff; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Bandeau principal ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #163a70 0%, var(--marine) 35%, var(--marine-fonce) 70%, var(--nuit) 100%); }
.hero::before { /* grille de points */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}
.hero::after { /* vague de transition */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; pointer-events: none; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 240 0 480 0 720 26 S 1200 60 1440 18 V60 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero .conteneur { position: relative; z-index: 2; padding-top: clamp(64px, 11vw, 124px); padding-bottom: clamp(88px, 13vw, 150px); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero p { font-size: 1.2rem; max-width: 54ch; color: #D6E2F0; }
.surligne { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--nuit); background: var(--menthe); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; transform: rotate(-2deg); }
.surtitre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nuit); animation: pouls 1.8s ease-in-out infinite; }
.hero-petit .conteneur { padding-top: clamp(48px, 8vw, 84px); padding-bottom: clamp(76px, 10vw, 110px); }
.hero-petit h1 { max-width: 18ch; }

/* Décor : halos lumineux + hexagones (rappel du logo) */
.deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.halo { position: absolute; border-radius: 50%; }
.halo-1 { width: 560px; height: 560px; right: -140px; top: -180px; background: radial-gradient(circle, rgba(4,157,230,.55), transparent 65%); animation: flotte 14s ease-in-out infinite; }
.halo-2 { width: 420px; height: 420px; right: 18%; bottom: -220px; background: radial-gradient(circle, rgba(94,242,200,.32), transparent 65%); animation: flotte 18s ease-in-out infinite reverse; }
.hex { position: absolute; aspect-ratio: 1 / 1.1547; background: center / contain no-repeat; }
.hex-1 { width: 210px; right: 9%; top: 18%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,3 97,30 97,85.5 50,112.5 3,85.5 3,30' fill='none' stroke='%2340C0F1' stroke-width='3'/%3E%3C/svg%3E"); animation: tourne 40s linear infinite; opacity: .7; }
.hex-2 { width: 110px; right: 26%; top: 56%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87' fill='%23049DE6'/%3E%3C/svg%3E"); opacity: .55; animation: flotte 9s ease-in-out infinite; }
.hex-3 { width: 64px; right: 5%; top: 64%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87' fill='%235EF2C8'/%3E%3C/svg%3E"); opacity: .8; animation: flotte 7s ease-in-out infinite reverse; }
.hex-4 { width: 46px; right: 33%; top: 14%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115.47'%3E%3Cpolygon points='50,4 96,30.5 96,85 50,111.5 4,85 4,30.5' fill='none' stroke='%23CDCCCD' stroke-width='6'/%3E%3C/svg%3E"); opacity: .45; animation: tourne 25s linear infinite reverse; }
.hero-petit .hex-1 { width: 150px; top: 14%; }
.hero-petit .hex-2 { width: 80px; top: 50%; }

@keyframes flotte { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-18px, 22px); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pouls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }

/* ---------- Bandeau défilant ---------- */
.defile { background: var(--marine); color: #fff; overflow: hidden; padding: 16px 0; transform: rotate(-1.2deg); margin: -10px -20px 0; position: relative; z-index: 3; border-block: 3px solid; border-image: var(--degrade) 1; }
.defile-piste { display: flex; width: max-content; animation: defile 28s linear infinite; }
.defile ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.defile li { font-family: var(--titres); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; padding: 0 22px; display: flex; align-items: center; gap: 44px; }
.defile li::after { content: ""; width: 12px; height: 13.86px; background: var(--menthe); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.defile li:nth-child(3n+2)::after { background: var(--bleu-clair); }
.defile li:nth-child(3n)::after { background: var(--bleu-vif); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 108px) 0; position: relative; }
.section-grise { background: var(--fond); }
.section-grise::before { /* petits hexagones discrets */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 54,17 54,47 28,62 2,47 2,17' fill='none' stroke='%23DDE7F0' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.section-grise > .conteneur { position: relative; }
.intro { max-width: 680px; margin-bottom: 44px; }
.intro p { color: var(--texte-doux); font-size: 1.1rem; }
.trait { width: 64px; height: 8px; border-radius: 999px; background: var(--degrade); margin-bottom: 20px; }

.grille { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-3 > .carte:last-child { grid-column: auto !important; } }

.carte { position: relative; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--bord), var(--bord)) border-box; border: 2px solid transparent; border-radius: var(--rayon); padding: 30px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.carte:hover { transform: translateY(-6px) rotate(-.4deg); background: linear-gradient(#fff, #fff) padding-box, var(--degrade) border-box; }
.grille > .carte:nth-child(even):hover { transform: translateY(-6px) rotate(.4deg); }
.carte p:last-child, .carte ul:last-child { margin-bottom: 0; }
.carte p { color: var(--texte-doux); }
.icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--bleu-vif), var(--bleu-clair)); color: #fff; margin-bottom: 20px; outline: 2px solid rgba(4,157,230,.28); outline-offset: 4px; transition: transform .35s cubic-bezier(.34,1.56,.64,1), outline-offset .35s, outline-color .35s; }
.carte:hover .icone { outline-offset: 7px; outline-color: var(--menthe); }
.carte:hover .icone { transform: rotate(-10deg) scale(1.08); }
.grille > .carte:nth-child(3n+2) .icone { background: linear-gradient(135deg, var(--marine), var(--bleu)); outline-color: rgba(16,44,87,.25); }
.grille > .carte:nth-child(3n) .icone { background: linear-gradient(135deg, var(--bleu-clair), var(--menthe)); color: var(--nuit); }
.icone svg { width: 28px; height: 28px; }

.liste-coches { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-coches li { position: relative; padding-left: 30px; margin-bottom: 9px; color: var(--texte-doux); }
.liste-coches li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: #E3F7F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8F6E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }

.deux-colonnes { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .deux-colonnes { grid-template-columns: 1.1fr .9fr; } }

.public { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.public .carte { border: 0; color: #fff; overflow: hidden; }
.public .carte h3 { color: inherit; font-size: 1.5rem; }
.public .carte p { color: inherit; opacity: .92; }
.public .carte::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 130px; aspect-ratio: 1 / 1.1547; opacity: .18; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .5s; }
.public .carte:hover::after { transform: rotate(30deg) scale(1.1); }
.public .carte:nth-child(1) { background: linear-gradient(140deg, var(--bleu-vif), var(--bleu)); }
.public .carte:nth-child(2) { background: linear-gradient(140deg, var(--marine), var(--marine-fonce)); }
.public .carte:nth-child(3) { background: linear-gradient(140deg, var(--bleu-clair), var(--menthe)); color: var(--nuit); }

.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.etapes li { counter-increment: etape; position: relative; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 28px; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.etapes li:hover { transform: translateY(-5px); }
.etapes li::before { content: "0" counter(etape); display: block; font-family: var(--titres); font-size: 3.2rem; font-weight: 700; line-height: 1; margin-bottom: 14px; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etapes strong { display: block; font-family: var(--titres); font-size: 1.15rem; color: var(--marine); margin-bottom: 4px; }
.etapes span { color: var(--texte-doux); }

.service { scroll-margin-top: 96px; }
.technos-bloc { margin-top: 56px; text-align: center; }
.technos-bloc h2 { font-size: 1.4rem; }
.technos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.technos li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, var(--degrade) border-box; color: var(--marine); font-weight: 700; font-size: .95rem; border: 2px solid transparent; transition: transform .2s, background .2s; }
.technos li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--menthe); }
.technos li:nth-child(odd) { transform: rotate(-1.5deg); }
.technos li:nth-child(even) { transform: rotate(1.5deg); }
.technos li:hover { transform: rotate(0) scale(1.08); background: var(--degrade) padding-box, var(--degrade) border-box; color: var(--nuit); }
.technos li:hover::before { background: var(--nuit); }

/* ---------- Appel à l'action ---------- */
.cta { position: relative; overflow: hidden; background: radial-gradient(120% 160% at 100% 0%, var(--bleu) 0%, var(--marine) 45%, var(--marine-fonce) 100%) padding-box, var(--degrade) border-box; border: 3px solid transparent; color: #fff; border-radius: 28px; padding: clamp(36px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta::before { content: ""; position: absolute; right: -60px; top: -70px; width: 240px; aspect-ratio: 1 / 1.1547; opacity: .12; background: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: tourne 50s linear infinite; }
.cta > * { position: relative; }
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p { color: #D6E2F0; margin: 0; }

/* ---------- Contact ---------- */
.coordonnees { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.coordonnees li { display: flex; gap: 16px; align-items: flex-start; }
.coordonnees .icone { margin: 0; flex: none; }
.coordonnees strong { display: block; font-family: var(--titres); color: var(--marine); }
.coordonnees a { font-size: 1.15rem; font-weight: 700; }

/* ---------- Pages de texte ---------- */
.texte { max-width: 760px; }
.texte h2 { font-size: 1.5rem; margin-top: 1.8em; }
.texte h2:first-child { margin-top: 0; }
.todo { background: #FFF3BF; color: #7A4D00; padding: 0 4px; border-radius: 4px; }

/* ---------- Pied de page ---------- */
.pied { position: relative; background: var(--nuit); color: #A9B6C8; font-size: .95rem; padding: 56px 0 24px; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--degrade); }
.pied a { color: #DCE6F2; text-decoration: none; }
.pied a:hover { color: var(--menthe); text-decoration: underline; }
.pied-grille { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 32px; }
.pied h2 { font-family: var(--titres); color: #fff; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 6px; }
.pied address { font-style: normal; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .875rem; }

@media (max-width: 720px) {
  .entete { position: static; }
  .entete .conteneur { padding-top: 10px; padding-bottom: 12px; }
  .nav { width: 100%; }
  .nav ul { justify-content: flex-start; }
  .nav a { padding: 7px 11px; font-size: .95rem; }
  .nav .nav-tel { margin-left: 0; }
  .hex-1, .hex-2, .hex-4 { display: none; }
  .hex-3, .hero-petit .hex-3 { right: 16px; top: 18px; bottom: auto; width: 34px; }
  .halo-1 { width: 380px; height: 380px; }
  .defile li { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Communes desservies */
.communes-titre { margin: 18px 0 10px; font-weight: 600; color: var(--marine); }
.communes { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.communes li { font-size: .88rem; padding: 3px 11px; border-radius: 999px; background: #E8F5FC; color: var(--marine); }
.carte p.communes-note { font-size: .9rem; margin: 0; }

/* FAQ (sans JavaScript) */
.faq { max-width: 820px; display: grid; gap: 12px; }
.faq details { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--bord), var(--bord)) border-box; border: 2px solid transparent; border-radius: 16px; transition: background .2s; }
.faq details[open] { background: linear-gradient(#fff, #fff) padding-box, var(--degrade) border-box; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font-family: var(--titres); font-weight: 600; font-size: 1.1rem; color: var(--marine); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: var(--nuit); font-size: 1.2rem; font-weight: 700; transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--texte-doux); }

/* Utilitaires (remplacent les styles en ligne, pour la politique de sécurité CSP) */
.hero-plein { min-height: 100vh; display: flex; align-items: center; }
.logo-apropos { margin: 0 auto; max-width: 360px; }
.lien-suite { margin-top: 28px; }
.section-sans-haut { padding-top: 0; }