/* Feuille de style unique du site ETS MARTIN – direction « lumineux, photos, bleu électrique » */

@font-face {
  font-family: "Jakarta";
  src: url("/polices/jakarta.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/polices/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --encre: #0a1024;
  --texte: #1b2336;
  --gris: #5d6781;
  --gris-clair: #97a0b5;
  --ligne: #e7ebf3;
  --fond: #f5f7fc;
  --blanc: #ffffff;
  --bleu: #1e4dff;
  --bleu-fonce: #0b2fd1;
  --cyan: #19c3f0;
  --jaune: #ffd21f;
  --degrade: linear-gradient(120deg, #1e4dff 0%, #3b6bff 45%, #19c3f0 100%);
  --titre: "Jakarta", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rayon: 24px;
  --ombre: 0 1px 2px rgba(10, 16, 36, 0.04), 0 12px 40px -12px rgba(10, 16, 36, 0.14);
  --ombre-forte: 0 30px 80px -20px rgba(30, 77, 255, 0.35);
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0 0 0.5em; color: var(--encre); font-family: var(--titre); }
h1, h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--bleu); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
::selection { background: var(--bleu); color: var(--blanc); }

/* Texte en dégradé bleu → cyan qui scintille */
h1 em, h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--bleu) 0%, var(--cyan) 40%, var(--bleu) 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: scintille 6s linear infinite;
}
@keyframes scintille { to { background-position: -250% 0; } }

.conteneur { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.conteneur-etroit { max-width: 840px; }
@media (min-width: 700px) { .conteneur { padding: 0 32px; } }

.icone { width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -0.2em; }

.etiquette {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bleu); background: rgba(30, 77, 255, 0.08); padding: 0.45em 0.95em; border-radius: 999px; margin-bottom: 1.3em;
}

/* ---------- Point « disponible » qui pulse ---------- */
.point-actif { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16c784; }
.point-actif::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #16c784;
  animation: pulsation 1.8s var(--courbe) infinite;
}
@keyframes pulsation { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.4); opacity: 0; } }

/* ---------- Boutons ---------- */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.9em 1.5em; border-radius: 14px; border: 1px solid transparent;
  font: inherit; font-family: var(--titre); font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer;
  background: var(--encre); color: var(--blanc);
  transition: transform 0.35s var(--courbe), box-shadow 0.35s var(--courbe), background-position 0.6s;
}
.bouton:hover { transform: translateY(-3px); }
.bouton-appel {
  background: var(--degrade); background-size: 180% 100%; color: var(--blanc);
  box-shadow: 0 10px 30px -8px rgba(30, 77, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bouton-appel:hover { background-position: 100% 0; box-shadow: 0 18px 44px -10px rgba(30, 77, 255, 0.75); }
/* Reflet lumineux qui traverse le bouton d'appel */
.bouton-appel::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg); animation: reflet 3.8s ease-in-out infinite;
}
@keyframes reflet { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.bouton-appel .icone { animation: sonnerie 3.8s ease-in-out infinite; }
@keyframes sonnerie {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } 90% { transform: rotate(0); }
}
.bouton-grand { font-size: 1.06rem; padding: 1.05em 1.8em; border-radius: 16px; }
.bouton-large { width: 100%; }
.bouton-contour { background: var(--blanc); color: var(--encre); border-color: var(--ligne); box-shadow: var(--ombre); }
.bouton-contour:hover { border-color: var(--bleu); color: var(--bleu); }
.bouton-secondaire { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.35); }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.entete.defile { background: rgba(255, 255, 255, 0.9); border-color: var(--ligne); box-shadow: 0 8px 30px -18px rgba(10, 16, 36, 0.25); }
.entete-contenu { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.logo img { transition: transform 0.6s var(--courbe); }
.logo:hover img { transform: rotate(-12deg) scale(1.08); }
.logo span { display: flex; flex-direction: column; line-height: 1.1; }
.logo strong { font-family: var(--titre); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; }
.logo small { font-size: 0.74rem; color: var(--gris); margin-top: 3px; }
.navigation { display: flex; gap: 6px; margin-left: auto; }
.navigation a {
  color: var(--texte); text-decoration: none; font-size: 0.93rem; font-weight: 600;
  padding: 0.5em 0.95em; border-radius: 10px; transition: background 0.25s, color 0.25s;
}
.navigation a:hover { background: var(--fond); color: var(--bleu); }
.entete-appel { padding: 0.7em 1.15em; font-size: 0.92rem; border-radius: 12px; }

/* ---------- Fil d'Ariane ---------- */
.fil-ariane { font-size: 0.82rem; color: var(--gris); padding-top: 18px; padding-bottom: 0; }
.fil-ariane a { color: var(--gris); text-decoration: none; }
.fil-ariane a:hover { color: var(--bleu); }
.fil-ariane [aria-current] { color: var(--encre); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 120px); }
.hero-fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bulle { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: flotte 16s ease-in-out infinite alternate; }
.bulle-1 { width: 520px; height: 520px; background: #c9d7ff; top: -180px; right: 8%; }
.bulle-2 { width: 420px; height: 420px; background: #bff0ff; bottom: -160px; right: 32%; animation-delay: -5s; animation-duration: 19s; }
.bulle-3 { width: 300px; height: 300px; background: #fff3b8; top: 20%; left: -120px; animation-delay: -9s; }
@keyframes flotte {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.12); }
  100% { transform: translate(-30px, 10px) scale(0.95); }
}
.hero-grille { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.surtitre {
  display: inline-flex; align-items: center; gap: 0.65em;
  font-size: 0.85rem; font-weight: 600; color: var(--texte); margin-bottom: 1.6em;
  padding: 0.55em 1.05em; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; box-shadow: var(--ombre);
}
.hero-texte { font-size: 1.15rem; max-width: 560px; color: var(--gris); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 34px 0 30px; }
.garanties { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.garanties li { display: flex; align-items: center; gap: 0.5em; font-size: 0.92rem; color: var(--texte); font-weight: 500; }
.garanties .icone { color: var(--blanc); background: var(--bleu); border-radius: 50%; padding: 3px; width: 1.25em; height: 1.25em; }

/* Photo du hero : se dévoile, zoome doucement, badges qui flottent */
.hero-visuel { position: relative; }
.hero-photo {
  position: relative; aspect-ratio: 4 / 5; max-height: 640px; margin-left: auto; border-radius: 32px; overflow: hidden;
  box-shadow: var(--ombre-forte);
  animation: devoile 1.4s var(--courbe) 0.2s both;
}
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 16, 36, 0.35)); }
.hero-photo img { width: 100%; height: 115%; object-fit: cover; display: block; will-change: transform; animation: zoomLent 18s ease-in-out infinite alternate; }
@keyframes devoile { from { clip-path: inset(100% 0 0 0 round 32px); } to { clip-path: inset(0 0 0 0 round 32px); } }
@keyframes zoomLent { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.badge {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 14px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -15px rgba(10, 16, 36, 0.3); font-size: 0.82rem; color: var(--gris); line-height: 1.3;
  animation: apparaitBadge 0.9s var(--courbe) both, flottement 6s ease-in-out infinite;
}
.badge strong { display: block; font-family: var(--titre); font-size: 1rem; color: var(--encre); }
.badge .icone { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--blanc); background: var(--degrade); }
.badge-1 { top: 8%; left: -8%; animation-delay: 0.9s, 1.8s; }
.badge-2 { bottom: 14%; left: -12%; animation-delay: 1.1s, 0s; }
.badge-3 { top: 42%; right: -6%; animation-delay: 1.3s, 3s; }
@keyframes apparaitBadge { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes flottement { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Mots du titre qui apparaissent l'un après l'autre */
.mot { display: inline-block; animation: montee 0.9s var(--courbe) both; animation-delay: calc(0.1s + var(--i) * 0.07s); }
.entree { animation: montee 1s var(--courbe) both; animation-delay: calc(0.1s + var(--i, 0) * 0.07s); }
@keyframes montee { from { opacity: 0; transform: translateY(0.7em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
h1 em .mot { background: inherit; -webkit-background-clip: text; background-clip: text; }

/* ---------- Circuit animé ---------- */
.circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Le circuit reste du côté de la photo pour ne pas gêner la lecture du texte */
.hero > .circuit {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 62%);
}
@media (max-width: 1000px) { .hero > .circuit { display: none; } }
.circuit path { fill: none; stroke-linecap: round; }
.circuit-traces path { stroke: rgba(30, 77, 255, 0.07); stroke-width: 1.2; }
.circuit-courant path {
  stroke: var(--bleu); stroke-width: 2; stroke-dasharray: 70 930; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 5px rgba(30, 77, 255, 0.8));
  animation: courant 5.5s linear infinite; animation-delay: var(--d);
}
@keyframes courant { to { stroke-dashoffset: 0; } }
.circuit-noeuds circle { fill: var(--blanc); stroke: rgba(30, 77, 255, 0.5); stroke-width: 1.5; animation: noeud 3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes noeud { 0%, 100% { stroke-opacity: 0.25; } 50% { stroke-opacity: 1; } }

/* ---------- Chiffres clés ---------- */
.chiffres { position: relative; }
.chiffres-grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--degrade); border-radius: var(--rayon); color: var(--blanc);
  box-shadow: var(--ombre-forte); overflow: hidden; margin-top: -40px; position: relative;
}
.chiffres-grille > div { padding: 34px 28px 30px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.chiffres-grille > div:first-child { border-left: 0; }
.chiffre { font-family: var(--titre); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1; margin-bottom: 0.3em; }
.chiffres-grille p:last-child { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 10vw, 130px) 0; }
.section-claire { background: var(--fond); }
.section-intro { color: var(--gris); max-width: 640px; font-size: 1.12rem; }
.deux-colonnes { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; }
.deux-colonnes > div > p { color: #414a60; }

.encadre {
  position: sticky; top: 110px; overflow: hidden;
  background: var(--degrade); color: rgba(255, 255, 255, 0.9); border-radius: var(--rayon); padding: 32px;
  box-shadow: var(--ombre-forte);
}
.encadre h3 { display: flex; align-items: center; gap: 0.5em; color: var(--blanc); font-size: 1.35rem; }
.encadre .bouton-appel { background: var(--blanc); color: var(--bleu); margin-top: 8px; }
.encadre .bouton-appel::after { background: linear-gradient(100deg, transparent, rgba(30, 77, 255, 0.15), transparent); }
.section .encadre:not(:has(.bouton)) { background: var(--fond); color: var(--texte); box-shadow: none; border: 1px solid var(--ligne); }
.section .encadre:not(:has(.bouton)) h3 { color: var(--encre); }
.section .encadre:not(:has(.bouton)) h3 .icone { color: var(--bleu); }

.liste-coches { list-style: none; padding: 0; margin: 0 0 1.8em; }
.liste-coches li { display: flex; gap: 0.8em; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.liste-coches .icone { color: var(--blanc); background: var(--bleu); border-radius: 50%; padding: 3px; margin-top: 0.2em; }

/* ---------- Cartes services (avec photo) ---------- */
.grille-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.carte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon);
  text-decoration: none; color: var(--texte); box-shadow: var(--ombre);
  transition: transform 0.5s var(--courbe), box-shadow 0.5s var(--courbe), border-color 0.5s;
}
.carte:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(30, 77, 255, 0.3); border-color: rgba(30, 77, 255, 0.35); }
.carte-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--courbe); }
.carte:hover .carte-photo img { transform: scale(1.09); }
.carte-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10, 16, 36, 0.35)); }
.carte-icone {
  position: absolute; z-index: 1; left: 22px; bottom: -24px; display: inline-flex; width: 52px; height: 52px; border-radius: 16px;
  align-items: center; justify-content: center; color: var(--blanc); background: var(--degrade);
  box-shadow: 0 10px 24px -6px rgba(30, 77, 255, 0.6); transition: transform 0.6s var(--courbe);
}
.carte:hover .carte-icone { transform: rotate(-10deg) scale(1.08); }
.carte-icone .icone { width: 24px; height: 24px; }
.carte-corps { position: relative; display: flex; flex-direction: column; flex-grow: 1; padding: 42px 26px 26px; }
.carte-numero { position: absolute; top: 18px; right: 24px; font-family: var(--titre); font-weight: 800; color: var(--ligne); font-size: 1.6rem; }
.carte h3 { font-size: 1.35rem; margin-bottom: 0.45em; }
.carte p { color: var(--gris); font-size: 0.95rem; flex-grow: 1; }
.carte-lien { font-family: var(--titre); font-size: 0.92rem; font-weight: 700; color: var(--bleu); display: inline-flex; gap: 0.4em; }
.carte-lien span { transition: transform 0.4s var(--courbe); }
.carte:hover .carte-lien span { transform: translateX(6px); }

/* ---------- Pourquoi nous (photos superposées) ---------- */
.apropos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.apropos-photos { position: relative; aspect-ratio: 1 / 1.05; }
.apropos-photo { position: absolute; overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre-forte); }
.apropos-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s var(--courbe); }
.apropos-photo-1 { inset: 0 18% 22% 0; }
.apropos-photo-2 { width: 46%; aspect-ratio: 4 / 5; right: 0; bottom: 0; border: 6px solid var(--blanc); }
.js .apropos-photo.revele { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round var(--rayon)); transition: clip-path 1.4s var(--courbe); transition-delay: calc(var(--r, 0) * 200ms); }
.js .apropos-photo.revele img { transform: scale(1.25); }
.js .apropos-photo.visible { clip-path: inset(0 0 0 0 round var(--rayon)); }
.js .apropos-photo.visible img { transform: scale(1); }

/* ---------- Étapes ---------- */
.etapes { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.etapes li {
  position: relative; overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: 34px 30px 30px; box-shadow: var(--ombre); transition: transform 0.5s var(--courbe);
}
.etapes li:hover { transform: translateY(-6px); }
.etapes li::before {
  content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 100%; background: var(--degrade);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--courbe) 0.3s;
}
.etapes li.visible::before, html:not(.js) .etapes li::before { transform: scaleX(1); }
.etapes li > .icone { width: 48px; height: 48px; padding: 12px; border-radius: 14px; color: var(--bleu); background: rgba(30, 77, 255, 0.08); margin-bottom: 22px; }
.etape-numero {
  position: absolute; top: 18px; right: 24px; font-family: var(--titre); font-weight: 800; font-size: 3.6rem; line-height: 1;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.18;
}
.etapes h3 { font-size: 1.3rem; }
.etapes p { color: var(--gris); margin: 0; }

/* ---------- Bande de villes qui défile ---------- */
.defilement {
  overflow: hidden; padding: 34px 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--blanc);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defilement-piste { display: flex; width: max-content; animation: defiler 140s linear infinite; }
.defilement:hover .defilement-piste { animation-play-state: paused; }
.defilement-groupe { display: flex; align-items: center; gap: 32px; padding-right: 32px; }
.defilement a, .defilement span {
  font-family: var(--titre); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.03em; white-space: nowrap; text-decoration: none;
  color: transparent; -webkit-text-stroke: 1.2px #b9c3d8; transition: color 0.3s, -webkit-text-stroke-color 0.3s;
}
.defilement a:hover { color: var(--bleu); -webkit-text-stroke-color: var(--bleu); }
.defilement .etoile { font-size: 1.1rem; color: var(--cyan); -webkit-text-stroke: 0; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ---------- Zones et villes ---------- */
.grille-zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 48px 0; }
.zone {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 160px;
  padding: 24px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--ligne); color: var(--encre); text-decoration: none;
  transition: transform 0.5s var(--courbe), color 0.4s, box-shadow 0.5s;
}
.zone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--degrade); opacity: 0; transition: opacity 0.5s var(--courbe); }
.zone:hover { transform: translateY(-6px); color: var(--blanc); box-shadow: var(--ombre-forte); }
.zone:hover::before { opacity: 1; }
.zone strong { font-family: var(--titre); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15; }
.zone span { font-size: 0.85rem; opacity: 0.7; }
.titre-liste { margin-top: 32px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.liste-villes { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: 28px; }
.liste-villes li { border-bottom: 1px solid var(--ligne); }
.liste-villes a { display: flex; justify-content: space-between; padding: 11px 0; color: var(--texte); text-decoration: none; transition: color 0.2s, padding 0.35s var(--courbe); }
.liste-villes a::after { content: "→"; color: var(--bleu); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s var(--courbe); }
.liste-villes a:hover { color: var(--bleu); padding-left: 6px; }
.liste-villes a:hover::after { opacity: 1; transform: none; }
.lien-fort { font-family: var(--titre); font-weight: 700; }
.liste-services { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.liste-services a {
  display: flex; gap: 0.8em; align-items: center; padding: 18px 20px; border: 1px solid var(--ligne); border-radius: 16px;
  color: var(--texte); text-decoration: none; font-weight: 600; background: var(--blanc); box-shadow: var(--ombre);
  transition: border-color 0.3s, transform 0.4s var(--courbe), color 0.3s;
}
.liste-services a:hover { border-color: var(--bleu); color: var(--bleu); transform: translateY(-3px); }
.liste-services .icone { color: var(--bleu); }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; display: grid; gap: 12px; }
.faq details { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 18px; padding: 0 24px; transition: border-color 0.3s, box-shadow 0.3s; }
.faq details[open] { border-color: rgba(30, 77, 255, 0.4); box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-family: var(--titre); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fond); color: var(--bleu); font-size: 1.25rem; font-weight: 500; transition: transform 0.4s var(--courbe), background 0.3s, color 0.3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--bleu); color: var(--blanc); }
.faq details p { margin: 0 0 22px; color: var(--gris); max-width: 700px; animation: montee 0.6s var(--courbe); }

/* ---------- Appel final ---------- */
.appel-final { padding: 0 0 clamp(80px, 10vw, 120px); }
.appel-final { position: relative; }
.appel-final .conteneur {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: var(--degrade); color: var(--blanc); border-radius: 36px; padding: clamp(64px, 9vw, 110px) 24px;
  box-shadow: var(--ombre-forte); max-width: 1176px;
}
.appel-final > .circuit { display: none; }
.appel-final h2 { color: var(--blanc); max-width: 18ch; margin-left: auto; margin-right: auto; font-size: clamp(2.2rem, 5.4vw, 4rem); }
.appel-final p { color: rgba(255, 255, 255, 0.85); margin-bottom: 2em; font-size: 1.1rem; }
.appel-final .etiquette { color: var(--blanc); background: rgba(255, 255, 255, 0.16); }
.appel-final .bouton-appel { background: var(--blanc); color: var(--bleu); box-shadow: 0 20px 50px -12px rgba(10, 16, 36, 0.45); }
.appel-final .bouton-appel::after { background: linear-gradient(100deg, transparent, rgba(30, 77, 255, 0.18), transparent); }
.appel-final .conteneur::before, .appel-final .conteneur::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  width: 600px; height: 600px; left: 50%; top: 50%; translate: -50% -50%; animation: onde 5s var(--courbe) infinite;
}
.appel-final .conteneur::after { animation-delay: 2.5s; }
@keyframes onde { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ---------- Page /urls ---------- */
.compte { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--bleu); background: rgba(30, 77, 255, 0.08); padding: 0.2em 0.7em; border-radius: 999px; vertical-align: middle; }
.section h2 .compte { margin-left: 0.4em; }
.liste-urls { padding-left: 1.4em; margin: 0 0 48px; }
.liste-urls li { padding: 7px 0; border-bottom: 1px solid var(--ligne); }
.liste-urls a { font-weight: 600; margin-right: 12px; }
.liste-urls code { font-size: 0.82rem; color: var(--gris); word-break: break-all; }
.section > .conteneur > h2 { margin-top: 1.4em; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Textes légaux ---------- */
.texte-legal h2 { font-size: 1.6rem; margin-top: 1.4em; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: rgba(255, 255, 255, 0.62); padding: 0 0 28px; font-size: 0.92rem; }
.pied a { color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color 0.2s; }
.pied a:hover { color: var(--blanc); }
.pied-signature {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-top: 80px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pied-signature p { margin: 0; font-family: var(--titre); font-weight: 800; letter-spacing: -0.035em; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.05; color: var(--blanc); }
.pied-signature em { font-style: normal; background: linear-gradient(100deg, #6f8cff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 56px; }
.pied-grille > div > a { display: block; margin-bottom: 8px; }
.pied-titre { color: var(--blanc); font-family: var(--titre); font-weight: 700; margin-bottom: 1.1em; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8rem; }

/* ---------- Apparition au défilement (activée par site.js) ---------- */
.js .revele { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--courbe), transform 1s var(--courbe); transition-delay: calc(var(--r, 0) * 90ms); }
.js .revele.visible { opacity: 1; transform: none; }

/* ---------- Barre d'appel mobile ---------- */
.barre-appel-mobile { display: none; }

/* ---------- Bandeau cookies ---------- */
.bandeau-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 720px; margin: 0 auto;
  background: var(--encre); color: var(--blanc); border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 20px 60px rgba(10, 16, 36, 0.35); display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  animation: montee 0.6s var(--courbe);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; flex: 1 1 320px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); }
.bandeau-cookies a { color: var(--cyan); }
.bandeau-cookies div { display: flex; gap: 10px; }
.bandeau-cookies .bouton { padding: 0.6em 1.2em; background: var(--bleu); }
.bandeau-cookies .bouton-secondaire { background: transparent; }

/* ---------- Tablette ---------- */
@media (max-width: 1000px) {
  .hero-grille { grid-template-columns: 1fr; }
  .hero-visuel { max-width: 560px; margin: 16px auto 0; width: 100%; }
  .hero-photo { aspect-ratio: 5 / 4; }
  .badge-1 { left: -4px; } .badge-2 { left: -4px; } .badge-3 { right: -4px; }
  .grille-cartes { grid-template-columns: repeat(2, 1fr); }
  .grille-zones { grid-template-columns: repeat(3, 1fr); }
  .chiffres-grille { grid-template-columns: repeat(2, 1fr); }
  .chiffres-grille > div:nth-child(3) { border-left: 0; }
  .chiffres-grille > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  .navigation { display: none; }
  .entete-appel { margin-left: auto; }
  .deux-colonnes, .apropos { grid-template-columns: 1fr; gap: 48px; }
  .encadre { position: static; }
  .etapes { grid-template-columns: 1fr; }
}

/* ---------- Mobile : barre d'appel fixe en bas ---------- */
@media (max-width: 680px) {
  body { font-size: 16px; }
  .entete-appel { display: none; }
  .entete-contenu { min-height: 64px; }
  .hero-actions .bouton { flex: 1 1 100%; }
  .hero-photo { aspect-ratio: 1 / 1; border-radius: 26px; }
  .badge { padding: 10px 12px 10px 10px; font-size: 0.72rem; border-radius: 14px; }
  .badge strong { font-size: 0.86rem; }
  .badge .icone { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
  .badge-1 { top: 6%; } .badge-3 { display: none; }
  .grille-cartes, .pied-grille { grid-template-columns: 1fr; }
  .grille-zones { grid-template-columns: 1fr 1fr; }
  .zone { min-height: 120px; padding: 18px; }
  .liste-villes { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .liste-villes a { font-size: 0.92rem; }
  .chiffres-grille > div { padding: 24px 18px 22px; }
  .defilement a, .defilement span { font-size: 1.7rem; }
  .apropos-photo-1 { inset: 0 12% 20% 0; }
  .appel-final .conteneur { border-radius: 0; margin: 0; }
  .appel-final { padding-bottom: 0; }
  .bandeau-cookies { bottom: 96px; }
}

/* ---------- Respect des personnes sensibles aux animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .revele { opacity: 1; transform: none; }
  .js .apropos-photo.revele { clip-path: none; }
}

/* =====================================================================
   Ajouts : bouton d'appel rond, drapeau, pages d'atterrissage, carte
   ===================================================================== */

/* ---------- Bouton d'appel rond, toujours visible ---------- */
.appel-flottant {
  position: fixed; right: 20px; bottom: 20px; z-index: 35;
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--degrade); color: var(--blanc); text-decoration: none;
  box-shadow: 0 14px 34px -8px rgba(30, 77, 255, 0.7);
  transition: transform 0.35s var(--courbe);
  animation: apparaitBadge 0.8s var(--courbe) 1.2s both;
}
.appel-flottant:hover { transform: scale(1.08); }
.appel-flottant .icone { width: 30px; height: 30px; animation: sonnerie 2.6s ease-in-out infinite; }
.appel-flottant::before, .appel-flottant::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bleu); z-index: -1;
  animation: ondeBouton 2.6s var(--courbe) infinite;
}
.appel-flottant::after { animation-delay: 1.3s; }
@keyframes ondeBouton { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.8); opacity: 0; } }
.appel-flottant-bulle {
  position: absolute; right: 80px; white-space: nowrap; padding: 0.55em 0.95em; border-radius: 12px;
  background: var(--encre); color: var(--blanc); font-family: var(--titre); font-weight: 700; font-size: 0.85rem;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--courbe);
}
.appel-flottant:hover .appel-flottant-bulle { opacity: 1; transform: none; }

/* ---------- Bandeau « Soutenons les entreprises françaises » ---------- */
.france { background: var(--fond); border-top: 1px solid var(--ligne); padding: 44px 0; }
.france-contenu { display: flex; align-items: center; gap: 32px; }
.france-contenu > div:last-child p:last-child { margin: 0; color: var(--gris); max-width: 720px; }
.france-titre { font-family: var(--titre); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--encre); margin-bottom: 0.3em; }
.france-titre em { font-style: normal; background: linear-gradient(90deg, #0055a4 0%, #0055a4 30%, #9aa6b8 50%, #ef4135 70%, #ef4135 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Drapeau « de bataille » (SVG animé) */
.drapeau-bataille { flex-shrink: 0; width: 190px; height: auto; overflow: visible; filter: drop-shadow(0 14px 22px rgba(10, 16, 36, 0.22)); }

/* ---------- Cartes de prestations (sans lien) ---------- */
.carte-fixe { cursor: default; }
.mini-liste { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid var(--ligne); display: grid; gap: 8px; }
.mini-liste li { display: flex; gap: 0.55em; font-size: 0.88rem; color: var(--texte); line-height: 1.4; }
.mini-liste .icone { width: 1.05em; height: 1.05em; color: var(--blanc); background: var(--bleu); border-radius: 50%; padding: 2px; margin-top: 0.1em; }

/* ---------- Galerie « sur le terrain » ---------- */
.galerie { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 16px; margin-top: 48px; }
.galerie figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--courbe); }
.galerie figure:hover img { transform: scale(1.07); }
.galerie figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 0.5em 0.9em; border-radius: 12px;
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--titre); font-weight: 700; font-size: 0.86rem; color: var(--encre);
}
.galerie-1 { grid-row: span 2; }
.galerie-3 { grid-row: span 2; }

/* ---------- Zone d'intervention + carte ---------- */
.zone-carte { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.puces { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { padding: 0.4em 0.9em; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); font-size: 0.9rem; font-weight: 500; }
.zone-voisines { color: var(--gris); font-size: 0.95rem; margin-bottom: 28px; }
.carte { margin: 0; border-radius: 28px; overflow: hidden; background: #eef2fa; border: 1px solid var(--ligne); box-shadow: var(--ombre-forte); }
.carte svg { display: block; width: 100%; height: auto; }
.carte-voisins path { fill: #ffffff; stroke: #cfd7e6; stroke-width: 1.2; stroke-linejoin: round; }
.carte-noms text { font-family: var(--sans); font-size: 12px; font-weight: 500; fill: #8a94aa; text-anchor: middle; }
.carte-cible { fill: url(#carte-degrade); stroke: none; }
.carte-cible-trait {
  fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 6px rgba(30, 77, 255, 0.5));
}
.carte.visible .carte-cible-trait, html:not(.js) .carte-cible-trait { animation: dessine 2.4s var(--courbe) forwards; }
@keyframes dessine { to { stroke-dashoffset: 0; } }
.carte-epingle { fill: var(--bleu); stroke: #fff; stroke-width: 2.5; }
.carte-epingle-centre { fill: #fff; }
.carte-onde { fill: rgba(30, 77, 255, 0.25); animation: ondeCarte 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.carte-onde-2 { animation-delay: 1.2s; }
@keyframes ondeCarte { from { transform: scale(0.4); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.carte-etiquette rect { fill: var(--encre); }
.carte-etiquette text { fill: #fff; font-family: var(--titre); font-weight: 700; font-size: 16px; text-anchor: middle; }

@media (max-width: 1000px) {
  .zone-carte { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px 220px; }
  .galerie-1 { grid-column: span 2; grid-row: auto; }
  .galerie-3 { grid-row: span 2; }
  .france-contenu { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 680px) {
  .appel-flottant { right: 16px; bottom: 16px; width: 62px; height: 62px; }
  .appel-flottant-bulle { display: none; }
  .galerie { grid-template-rows: 200px 170px 170px; gap: 10px; }
  .galerie figcaption { font-size: 0.74rem; left: 8px; bottom: 8px; }
  .carte { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) { .carte-cible-trait { stroke-dashoffset: 0; } }

/* Ancres des liens annexes : décalage sous l'en-tête fixe */
section[id] { scroll-margin-top: 84px; }