/* =========================================================
   Vertigo Dev — site vitrine (design de l'ébauche validée)
   Palette strictement issue du logo
   ========================================================= */
:root {
  --navy-950: #0a192f; /* textGradient début */
  --navy-925: #0c1e38;
  --navy-900: #0f2b5c; /* vGradient début */
  --blue-700: #1e4d8c; /* vGradient milieu */
  --blue-600: #0277bd; /* vGradient fin */
  --blue-500: #0288d1; /* ring début / DEV */
  --sky-400: #29b6f6; /* ring milieu */
  --sky-300: #4fc3f7; /* ring fin */

  --text: #e6f1ff;
  --muted: #9db3cf;
  --line: rgba(79, 195, 247, 0.16); /* filets décoratifs uniquement : ne délimite aucun composant (EA-010) */
  /* Contour des composants (champs, bouton secondaire) : --muted fondu dans le fond, 4,2:1 sur le fond du
     formulaire (#0b1f3e) et 4,5:1 sur --navy-950 ; seuil 3:1 (RGAA 3.3, AA-002). */
  --contour: #6683ab;
  --card: rgba(15, 43, 92, 0.35);

  --grad-ring: linear-gradient(90deg, var(--blue-500), var(--sky-400), var(--sky-300));
  --grad-v: linear-gradient(135deg, var(--blue-700), var(--blue-600) 55%, var(--sky-400));

  --font: 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --radius: 18px;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: var(--header-h);
}
/* Défilement doux : seulement le temps d'une navigation vers une ancre de la page (classe posée par le module des
   effets). Un défilement doux permanent animait aussi chaque mise au point (champ en erreur, curseur de saisie) et
   retardait l'affichage de l'interaction suivante (D-I04, INP). Sans JavaScript, les ancres sautent directement. */
html.defilement-doux {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Texte courant : une valeur longue sans espace (adresse, URL) se coupe au lieu de déborder à 320 px. */
main :is(p, li, dd, dt, td, th, address, figcaption) {
  overflow-wrap: anywhere;
}
img,
svg {
  display: block;
}
a {
  color: var(--sky-300);
}
h1,
h2,
h3 {
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
}
h3 {
  font-size: 1.35rem;
  font-weight: 700;
}
p {
  margin: 0 0 1em;
}
em {
  font-style: normal;
  color: var(--sky-300);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--sky-300);
  color: var(--navy-950);
  padding: 0.5em 1em;
  border-radius: 8px;
}
.skip:focus {
  left: 8px;
}
:focus-visible {
  outline: 3px solid var(--sky-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.grad {
  background: var(--grad-ring);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Barre de progression de lecture ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  background: var(--grad-ring);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: var(--navy-950);
  background: var(--grad-ring);
  background-size: 200% 100%;
  box-shadow: 0 10px 30px -10px rgba(41, 182, 246, 0.6);
  transition:
    background-position 0.5s,
    transform 0.2s,
    box-shadow 0.3s;
}
.btn:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(41, 182, 246, 0.8);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--contour);
}
.btn-ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--sky-400);
}
.btn-small {
  padding: 0.55em 1.2em;
  font-size: 0.95rem;
}

/* ---------- En-tête ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  transition:
    background 0.3s,
    backdrop-filter 0.3s,
    box-shadow 0.3s;
}
.site-header.scrolled {
  background: rgba(10, 25, 47, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  width: 42px;
  height: 35px;
}
.brand-name {
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 0.95rem;
}
.brand-name b {
  color: var(--blue-500);
  font-weight: 900;
}

#menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}
#menu a:not(.btn),
.menu-offres summary {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}
#menu > li > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--grad-ring);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
#menu a:not(.btn):hover,
#menu a[aria-current='page'],
.menu-offres summary:hover {
  color: var(--text);
}
#menu > li > a:not(.btn):hover::after,
#menu > li > a[aria-current='page']::after {
  transform: scaleX(1);
}
.nav-toggle {
  display: none;
}
/* Case qui ouvre le menu mobile : sans effet au-delà de 900 px, elle est alors retirée du parcours clavier et de
   l'arbre d'accessibilité (AA-001) ; elle n'existe qu'en affichage mobile (media query ci-dessous). */
.bascule-menu {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 5rem;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 75% 40%, rgba(2, 119, 189, 0.28), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(41, 182, 246, 0.12), transparent 70%), var(--navy-950);
}
.hero-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 60% 45%, #000 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 10%, transparent 65%);
  transform: perspective(900px) rotateX(55deg) translateY(calc(var(--scroll-px, 0) * 0.15px));
  transform-origin: 50% 100%;
  opacity: 0.55;
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky-300);
  padding: 0.45em 1em;
  border-radius: 999px;
  background: rgba(41, 182, 246, 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.025em;
}
.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--muted);
  max-width: 38em;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

.hero-visual {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 182, 246, 0.35), transparent 65%);
  filter: blur(30px);
  animation: pulse 6s ease-in-out infinite;
}
.hero-mark {
  position: relative;
  width: 78%;
  overflow: visible;
  transform: scale(calc(1 - var(--hero-out, 0) * 0.25));
  filter: drop-shadow(0 30px 60px rgba(2, 119, 189, 0.45));
}
.orbite-reveal {
  clip-path: inset(0 100% 0 0);
  animation: balayage 1.4s 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.v-left {
  animation: slide-l 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.v-right {
  animation: slide-r 1s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.orbit {
  position: absolute;
  inset: 0;
  animation: spin 24s linear infinite;
}
.orbit span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky-300);
  box-shadow: 0 0 14px var(--sky-400);
}
.orbit span:nth-child(1) {
  top: 6%;
  left: 50%;
}
.orbit span:nth-child(2) {
  bottom: 14%;
  left: 12%;
  width: 5px;
  height: 5px;
}
.orbit span:nth-child(3) {
  top: 40%;
  right: 2%;
  width: 6px;
  height: 6px;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--line);
}
.scroll-hint span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--sky-300);
  animation: wheel 1.8s ease-in-out infinite;
}

/* Contrôle des animations continues (AA-003, RGAA 13.8) : bouton révélé par le script, en tête du héros. */
.pause-animations {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + 0.4rem);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.95em;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(10, 25, 47, 0.75);
  box-shadow: inset 0 0 0 1px var(--contour);
  cursor: pointer;
}
.pause-animations[hidden] {
  display: none;
}
.pause-animations::before {
  content: '';
  width: 0.7em;
  height: 0.75em;
  background:
    linear-gradient(currentColor, currentColor) left / 35% 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 35% 100% no-repeat;
}
.pause-animations[aria-pressed='true']::before {
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pause-animations:hover {
  box-shadow: inset 0 0 0 1px var(--sky-400);
}
.pause-animations:focus-visible {
  outline: 3px solid var(--sky-300);
  outline-offset: 3px;
}
.animations-en-pause *,
.animations-en-pause *::before,
.animations-en-pause *::after {
  animation-play-state: paused !important;
}
/* Sans script, aucun contrôle n'est possible : les animations continues ne démarrent pas. */
html:not(.js) .halo,
html:not(.js) .orbit,
html:not(.js) .scroll-hint span {
  animation: none;
}

/* ---------- Bandeau atouts ---------- */
.strip {
  max-width: var(--max);
  margin: -3rem auto 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(12, 30, 56, 0.8);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px var(--line),
    0 30px 60px -30px rgba(0, 0, 0, 0.6);
  width: calc(100% - 2 * var(--gutter));
}
.strip-item {
  padding: 2rem;
  border-right: 1px solid var(--line);
}
.strip-item:last-child {
  border-right: 0;
}
.strip-item strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.strip-item span {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- Sections ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
}
.section-head {
  max-width: 46rem;
  margin-bottom: 4rem;
}
.kicker {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--sky-400);
}
.section-intro {
  color: var(--muted);
  font-size: 1.15rem;
}

/* Puces-logo (statiques) */
.bullet {
  flex: none;
  width: 70px;
  height: 56px;
  filter: drop-shadow(0 8px 18px rgba(2, 119, 189, 0.45));
}
.bullet-sm {
  width: 30px;
  height: 24px;
  filter: none;
}

/* Piliers */
.pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
.pillar {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2.4rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), rgba(15, 43, 92, 0.12));
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.4s,
    transform 0.4s;
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(41, 182, 246, 0.12),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.pillar:hover::before {
  opacity: 1;
}
.pillar:hover {
  box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.45);
}
/* Décalage en escalier, resserré pour rester lisible avec quatre piliers. */
.pillar:nth-child(2) {
  margin-left: clamp(0rem, 4vw, 3.5rem);
}
.pillar:nth-child(3) {
  margin-left: clamp(0rem, 8vw, 7rem);
}
.pillar:nth-child(4) {
  margin-left: clamp(0rem, 12vw, 10.5rem);
}
.pillar p {
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tags li {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  color: var(--sky-300);
  background: rgba(41, 182, 246, 0.08);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Bandeau défilant */
.marquee {
  overflow: hidden;
  padding: 2rem 0;
  border-block: 1px solid var(--line);
}
.marquee-track {
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(79, 195, 247, 0.35);
  transform: translateX(var(--mx-shift, 0px));
}
.marquee-track span {
  -webkit-text-stroke: 0;
  color: var(--blue-500);
}

/* Sécurité */
.security {
  max-width: none;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(15, 43, 92, 0.35) 30%,
    rgba(15, 43, 92, 0.35) 70%,
    transparent
  );
}
.security-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.security p {
  color: var(--muted);
}
.checks {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
  display: grid;
  gap: 0.9rem;
}
.checks li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 600;
}

.terminal {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #071324;
  box-shadow:
    0 0 0 1px var(--line),
    0 40px 80px -30px rgba(2, 119, 189, 0.5);
  position: relative;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1rem;
  background: rgba(15, 43, 92, 0.6);
}
/* Pastilles de la barre : pseudo-élément décoratif, aucune balise vide dans le code (AA-009, RGAA 8.9). */
.term-bar::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue-700);
  box-shadow:
    calc(11px + 0.45rem) 0 0 var(--blue-500),
    calc(22px + 0.9rem) 0 0 var(--sky-300);
  margin-right: calc(22px + 0.9rem);
}
.term-bar span {
  margin-left: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.term-body {
  margin: 0;
  padding: 1.6rem 1.4rem;
  font:
    0.88rem/1.9 ui-monospace,
    'Cascadia Code',
    Consolas,
    monospace;
  color: #b7cbe4;
  white-space: pre-wrap;
  min-height: 18em;
}
.term-body b {
  color: var(--sky-300);
  font-weight: 600;
}
.term-body em {
  color: var(--sky-400);
}
.terminal figcaption {
  position: absolute;
  right: 1rem;
  bottom: 0.6rem;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--sky-300);
  animation: blink 1s steps(1) infinite;
}

/* Méthode : frise */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline::after {
  content: '';
  position: absolute;
  left: 31px;
  top: 0;
  width: 2px;
  height: calc(var(--tl, 0) * 100%);
  background: var(--grad-ring);
  box-shadow: 0 0 12px var(--sky-400);
}
.step {
  position: relative;
  display: flex;
  gap: 2rem;
  padding-bottom: 3rem;
  z-index: 1;
}
.step:last-child {
  padding-bottom: 0;
}
.step .bullet {
  background: var(--navy-950);
  border-radius: 50%;
  /* Marge intérieure : le logo ne touche plus le bord de la pastille sombre (taille de la pastille inchangée). */
  padding: 11px 13px;
}
.step-num {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--sky-400);
}
.step h3 {
  margin-top: 0.2rem;
}
.step p {
  color: var(--muted);
  max-width: 40rem;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
.contact p {
  color: var(--muted);
}
.contact-mail {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  font-size: 1.15rem;
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding: 2.4rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
/* Champs côte à côte alignés : libellé, aide, champ et erreur occupent chacun la même ligne de la grille du
   formulaire, qu'un champ ait une aide (« Nom ») ou non (« E-mail »). */
@supports (grid-template-rows: subgrid) {
  .field {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .field > label {
    grid-row: 1;
    margin-bottom: 0.4rem;
  }
  .field > .aide {
    grid-row: 2;
    margin-bottom: 0.4rem;
  }
  .field > input,
  .field > select,
  .field > textarea {
    grid-row: 3;
  }
  .field > .erreur {
    grid-row: 4;
    margin-top: 0.4rem;
  }
}
.field-full {
  grid-column: 1 / -1;
}
.field label {
  font-size: 0.9rem;
  font-weight: 600;
}
.opt {
  color: var(--muted);
  font-weight: 400;
}
.aide {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
input,
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  padding: 0.8em 1em;
  border-radius: 12px;
  border: 0;
  background: rgba(10, 25, 47, 0.7);
  box-shadow: inset 0 0 0 1px var(--contour);
  transition: box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--sky-400),
    0 0 0 4px rgba(41, 182, 246, 0.15);
}
input[aria-invalid='true'],
textarea[aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px #ff8a80;
}
textarea {
  resize: vertical;
}
.hp {
  position: absolute;
  left: -9999px;
}
.rgpd {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-status {
  margin: 0;
  font-size: 0.92rem;
  color: var(--sky-300);
}
.form-alerte {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ff8a80;
}

/* Pied de page */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3rem var(--gutter) 2rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.pied-marque {
  grid-column: 1 / -1;
}
/* Grand écran : la marque puis une colonne par catégorie (offres, Vertigo Dev, où j'interviens, informations) */
@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: minmax(220px, 1.4fr);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2.5rem;
  }
  .pied-marque {
    grid-column: auto;
  }
}
.footer-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.footer-inner p,
.footer-inner li {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-inner a:not(.brand) {
  color: var(--muted);
}
.footer-inner a:not(.brand):hover {
  color: var(--text);
}
.pied-titre {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-400);
  margin-bottom: 0.9rem;
}
.pied-marque .brand {
  margin-bottom: 1rem;
}
.pied-droits {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Apparition au scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
.js .pillar.reveal {
  transform: translateX(-40px);
}
.js .pillar.reveal.in {
  transform: none;
}

/* ---------- Composants ajoutés au site (menu des offres, langue, fil d'Ariane, pages de contenu) ---------- */
.menu-offres {
  position: relative;
}
.menu-offres summary {
  cursor: pointer;
  list-style: none;
  /* Même boîte de ligne que les liens voisins : le triangle « ▾ » d'une police de repli agrandissait la ligne et
     décalait « Offres » vers le haut. */
  display: flex;
  align-items: center;
  line-height: 19px;
}
.menu-offres summary::-webkit-details-marker {
  display: none;
}
.menu-offres summary::after {
  content: '';
  width: 0.36em;
  height: 0.36em;
  margin: -0.2em 0 0 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.menu-offres[open] summary::after {
  margin-top: 0.2em;
  transform: rotate(225deg);
}
.menu-offres ul {
  list-style: none;
  margin: 0;
  padding: 1rem 1.2rem;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.2rem;
  min-width: 17rem;
  display: grid;
  gap: 0.7rem;
  border-radius: 14px;
  background: rgba(10, 25, 47, 0.97);
  box-shadow:
    0 0 0 1px var(--line),
    0 20px 40px -20px rgba(0, 0, 0, 0.7);
}
#menu .langue {
  padding: 0.35em 0.8em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
#menu .langue::after {
  display: none;
}

.bandeau-langue {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1rem;
  z-index: 70;
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem 0.8rem 1.4rem;
  border-radius: 14px;
  background: rgba(12, 30, 56, 0.96);
  box-shadow:
    0 0 0 1px var(--line),
    0 20px 40px -20px rgba(0, 0, 0, 0.7);
}
.bandeau-langue[hidden] {
  display: none;
}
/* Tant que le bandeau fixe est affiché, il ne doit masquer aucun élément focalisé (AA-004, RGAA 10.7) : marge de
   défilement réservée sous la zone visible (le navigateur amène l'élément focalisé au-dessus), fin de page
   atteignable au-dessus du bandeau, et indicateur de défilement du héros remonté au-dessus de lui. */
html:has(.bandeau-langue:not([hidden])) {
  scroll-padding-bottom: 9rem;
}
body:has(.bandeau-langue:not([hidden])) {
  padding-bottom: 8rem;
}
body:has(.bandeau-langue:not([hidden])) .scroll-hint {
  bottom: 8rem;
}
.bandeau-langue p {
  margin: 0;
  font-size: 0.92rem;
}
.bandeau-fermer {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 1.3rem;
  color: var(--text);
  background: rgba(41, 182, 246, 0.12);
  cursor: pointer;
}

.fil-ariane {
  margin-bottom: 1.8rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.fil-ariane a {
  color: var(--sky-300);
}
.fil-ariane span[aria-hidden='true'] {
  margin: 0 0.45em;
}

.cartes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.carte {
  padding: 1.8rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), rgba(15, 43, 92, 0.12));
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    box-shadow 0.4s,
    transform 0.4s;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.45);
}
.carte .bullet-sm {
  margin-bottom: 1rem;
}
.carte h3 {
  font-size: 1.2rem;
}
/* Titre de carte = lien : souligné en permanence, pas seulement coloré (AA-007, RGAA 10.6). */
.carte h3 a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--sky-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.carte h3 a:hover,
.carte h3 a:focus-visible {
  color: var(--sky-300);
  text-decoration-thickness: 3px;
}
.carte p {
  color: var(--muted);
  margin: 0;
}
.distance,
.lien-offre {
  margin-top: 2rem;
  color: var(--muted);
}

.page-entete {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
  background: radial-gradient(50% 80% at 85% 0%, rgba(2, 119, 189, 0.22), transparent 70%);
}
.page-entete h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 22em;
}
.page-entete .lead p {
  margin: 0;
}
.page-corps {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem);
}
.section-page {
  max-width: 48rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
.section-page h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.section-page h3 {
  font-size: 1.15rem;
  margin-top: 1.6rem;
  color: var(--sky-300);
}
.section-page p,
.section-page li {
  color: var(--muted);
}
.section-page ul {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}
.appel {
  max-width: none;
  margin-top: 1rem;
  padding: 2.5rem;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(15, 43, 92, 0.55), rgba(15, 43, 92, 0.15));
  box-shadow: inset 0 0 0 1px var(--line);
}
.liste-offres {
  padding-left: 1.2rem;
}
.page-merci .page-entete,
.page-404 .page-entete {
  min-height: 60vh;
}
.page-reponse .contact {
  padding-top: calc(var(--header-h) + 3rem);
}
.page-reponse .form {
  margin-top: 2rem;
}

/* Formulaire : erreurs et mentions */
.requis {
  color: var(--sky-300);
}
.erreur {
  margin: 0;
  font-size: 0.88rem;
  color: #ff8a80;
}
.erreur[hidden] {
  display: none;
}
.champs-obligatoires,
.professionnels {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.professionnels {
  font-weight: 700;
  color: var(--text);
}
select[aria-invalid='true'] {
  box-shadow: inset 0 0 0 2px #ff8a80;
}

/* ---------- Animations ---------- */
@keyframes balayage {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes slide-l {
  from {
    transform: translate(-40px, -30px);
    opacity: 0;
  }
}
@keyframes slide-r {
  from {
    transform: translate(40px, -30px);
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    transform: scale(1.12);
    opacity: 0.7;
  }
}
@keyframes wheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(14px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner,
  .security-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-visual {
    order: -1;
    width: min(70%, 320px);
    margin: 0 auto;
  }
  .strip {
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .strip-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 1.5rem;
  }
  .strip-item:last-child {
    border-bottom: 0;
  }
  .pillar:nth-child(n) {
    margin-left: 0;
  }
  .menu-offres ul {
    position: static;
    box-shadow: none;
    padding: 0.6rem 0 0 1rem;
    background: none;
  }

  /* Menu mobile sans dépendance au JavaScript : même géométrie avant et après son exécution (AS-001). La case est
     invisible mais focalisable ; son focus est rendu visible sur le bouton dessiné (label). */
  .bascule-menu {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .nav-toggle {
    display: grid;
    gap: 6px;
    place-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(41, 182, 246, 0.1);
    cursor: pointer;
  }
  .nav-toggle .bar {
    width: 20px;
    height: 2px;
    background: var(--text);
    transition: transform 0.3s;
  }
  .bascule-menu:checked + .nav-toggle .bar:first-of-type {
    transform: translateY(4px) rotate(45deg);
  }
  .bascule-menu:checked + .nav-toggle .bar:last-of-type {
    transform: translateY(-4px) rotate(-45deg);
  }
  .bascule-menu:focus-visible + .nav-toggle {
    outline: 3px solid var(--sky-300);
    outline-offset: 3px;
  }
  #menu {
    position: fixed;
    align-items: flex-start;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 1.4rem;
    padding: 2rem var(--gutter) 2.5rem;
    background: rgba(10, 25, 47, 0.97);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
    transform: translateY(-120%);
    visibility: hidden;
  }
  .js #menu {
    transition:
      transform 0.35s,
      visibility 0.35s;
  }
  .bascule-menu:checked ~ #menu {
    transform: none;
    visibility: visible;
  }
}
@media (max-width: 560px) {
  .pillar {
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.6rem;
  }
  .form {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .step {
    gap: 1.2rem;
  }
  .bullet {
    width: 55px;
    height: 44px;
  }
  .step .bullet {
    padding: 9px 10px;
  }
  .timeline::before,
  .timeline::after {
    left: 23px;
  }
  .brand-name {
    font-size: 0.85rem;
  }
}

/* ---------- Thèmes saisonniers (site/donnees/saisons.js) ----------
   Un thème est activé par la classe .saison-<nom> sur <html> ; chaque décor (.decor-<nom>) n'apparaît qu'avec elle.
   Décors fixes, hors du flux (aucun décalage de mise en page), sans réaction au pointeur, masqués sous 900 px. */
.decor-saison {
  display: none;
}
.saison-halloween .decor-halloween,
.saison-noel .decor-noel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.decor-saison svg {
  position: absolute;
  display: block;
}
@media (max-width: 900px) {
  .saison-halloween .decor-halloween,
  .saison-noel .decor-noel {
    display: none;
  }
}

/* ---------- Thème saisonnier : Halloween ----------
   Activé par la classe .saison-halloween sur <html>. Seuls les accents changent (orange citrouille et violet) ; les
   textes et fonds restent ceux du site : contrastes RGAA inchangés pour le texte courant ; accents mesurés à 5,9:1 au
   moins sur les fonds du site. Le décor est fixe, hors du flux (aucun décalage de mise en page) et ne réagit pas au pointeur. */
.saison-halloween {
  --blue-500: #ff8c2e;
  --sky-400: #ff9a3c;
  --sky-300: #ffb86b;
  --line: rgba(255, 154, 60, 0.18);
  --grad-ring: linear-gradient(90deg, #ff7b24, #ffa94d, #c792ff);
}
.saison-halloween .btn {
  box-shadow: 0 10px 30px -10px rgba(255, 123, 36, 0.6);
}
.saison-halloween .btn:hover {
  box-shadow: 0 16px 36px -10px rgba(199, 146, 255, 0.7);
}
.saison-halloween .hero {
  background:
    radial-gradient(60% 60% at 75% 40%, rgba(123, 44, 191, 0.26), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(255, 123, 36, 0.12), transparent 70%), var(--navy-950);
}
.saison-halloween .halo {
  background: radial-gradient(circle, rgba(255, 154, 60, 0.3), transparent 65%);
}
.saison-halloween .step .bullet {
  box-shadow: 0 0 22px -4px rgba(255, 123, 36, 0.55);
}
/* Petite citrouille posée sur le logo (en-tête et pied de page). */
.saison-halloween .brand {
  position: relative;
}
.saison-halloween .brand::after {
  content: '';
  position: absolute;
  left: 26px;
  top: 21px;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3.6c.3-1.2.9-2 1.8-2.6' stroke='%235c8a3a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='6.6' cy='11.6' rx='4.6' ry='6' fill='%23e8650f'/%3E%3Cellipse cx='13.4' cy='11.6' rx='4.6' ry='6' fill='%23e8650f'/%3E%3Cellipse cx='10' cy='11.6' rx='4.2' ry='6.4' fill='%23ff8c2e'/%3E%3Cpath d='M6.4 10l1.6-1.6 1.2 1.6zM10.8 10l1.6-1.6 1.2 1.6zM7 13.4q3 2.2 6 0l-1 .4-.8-.8-.8.8-.8-.8-.8.8z' fill='%230a192f'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.decor-lune {
  /* Sous le bouton « Mettre en pause les animations » de l'accueil, dans la marge droite. */
  top: calc(var(--header-h) + 64px);
  right: clamp(12px, 2vw, 36px);
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
  fill: #ffe7b8;
  filter: drop-shadow(0 0 18px rgba(255, 196, 120, 0.55));
  opacity: 0.85;
}
.decor-lune .cratere {
  fill: #f3d39a;
}
.decor-chauve-souris {
  fill: #050c18;
  stroke: rgba(255, 184, 107, 0.35);
  stroke-width: 0.8;
  animation: chauve-souris-arrivee 2.4s ease-out both;
}
.cs-1 {
  top: calc(var(--header-h) + 54px);
  right: calc(clamp(12px, 2vw, 36px) + 58px);
  width: 34px;
}
.cs-2 {
  top: calc(var(--header-h) + 124px);
  right: calc(clamp(12px, 2vw, 36px) + 30px);
  width: 24px;
  animation-delay: 0.3s;
}
.cs-3 {
  top: calc(var(--header-h) + 92px);
  right: calc(clamp(12px, 2vw, 36px) + 84px);
  width: 18px;
  animation-delay: 0.6s;
}
.decor-toile {
  left: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  transform: scaleY(-1);
  fill: none;
  stroke: rgba(230, 241, 255, 0.16);
  stroke-width: 1;
}
/* Arrivée unique (moins de 5 s, RGAA 13.8) ; supprimée si l'utilisateur réduit les animations. */
@keyframes chauve-souris-arrivee {
  from {
    opacity: 0;
    transform: translate(60px, -30px) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Thème saisonnier : Noël ----------
   Accents rouge clair et or sur la base bleu nuit ; textes et fonds inchangés. Accents mesurés à 5,5:1 au moins sur
   les fonds du site, texte des boutons à 6,3:1 au moins. */
.saison-noel {
  --blue-500: #ff6b6b;
  --sky-400: #ff7a7a;
  --sky-300: #ffd47a;
  --line: rgba(255, 212, 122, 0.18);
  --grad-ring: linear-gradient(90deg, #ff6b6b, #ff9e9e, #f4c95d);
}
.saison-noel .btn {
  box-shadow: 0 10px 30px -10px rgba(255, 107, 107, 0.6);
}
.saison-noel .btn:hover {
  box-shadow: 0 16px 36px -10px rgba(244, 201, 93, 0.7);
}
.saison-noel .hero {
  background:
    radial-gradient(60% 60% at 75% 40%, rgba(214, 40, 57, 0.18), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(244, 201, 93, 0.1), transparent 70%), var(--navy-950);
}
.saison-noel .halo {
  background: radial-gradient(circle, rgba(244, 201, 93, 0.26), transparent 65%);
}
.saison-noel .step .bullet {
  box-shadow: 0 0 22px -4px rgba(244, 201, 93, 0.5);
}
/* Bonnet posé sur le logo (en-tête et pied de page). */
.saison-noel .brand {
  position: relative;
}
.saison-noel .brand::after {
  content: '';
  position: absolute;
  left: -5px;
  top: -9px;
  width: 24px;
  height: 20px;
  transform: rotate(-14deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 15C6 6 12 1 19 3c-2 3-2 7-1 12z' fill='%23e63946'/%3E%3Crect x='1' y='13.5' width='19' height='5' rx='2.5' fill='%23fff'/%3E%3Ccircle cx='20' cy='4' r='2.6' fill='%23fff'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.decor-etoile {
  /* Même place que la lune d'Halloween : sous le bouton de pause de l'accueil, dans la marge droite. */
  top: calc(var(--header-h) + 64px);
  right: clamp(12px, 2vw, 36px);
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  fill: #ffd47a;
  filter: drop-shadow(0 0 14px rgba(255, 212, 122, 0.6));
  opacity: 0.9;
}
.decor-flocon {
  fill: none;
  stroke: rgba(230, 241, 255, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  animation: flocon-arrivee 3s ease-out both;
}
.fl-1 {
  top: calc(var(--header-h) + 150px);
  right: calc(clamp(12px, 2vw, 36px) + 14px);
  width: 22px;
}
.fl-2 {
  top: calc(var(--header-h) + 56px);
  right: calc(clamp(12px, 2vw, 36px) + 76px);
  width: 16px;
  animation-delay: 0.4s;
}
.fl-3 {
  top: calc(var(--header-h) + 118px);
  right: calc(clamp(12px, 2vw, 36px) + 62px);
  width: 12px;
  animation-delay: 0.8s;
}
.fl-4 {
  top: calc(var(--header-h) + 210px);
  right: calc(clamp(12px, 2vw, 36px) + 40px);
  width: 14px;
  animation-delay: 1.2s;
}
.fl-5 {
  top: calc(var(--header-h) + 260px);
  right: calc(clamp(12px, 2vw, 36px) + 8px);
  width: 10px;
  animation-delay: 1.6s;
}
.decor-houx {
  left: 10px;
  bottom: 10px;
  width: 92px;
  opacity: 0.85;
}
.decor-houx .feuille {
  fill: #2e8b57;
  stroke: #1f5f3c;
  stroke-width: 1;
}
.decor-houx .baie {
  fill: #e63946;
}
/* Chute unique (moins de 5 s, RGAA 13.8) ; supprimée si l'utilisateur réduit les animations. */
@keyframes flocon-arrivee {
  from {
    opacity: 0;
    transform: translateY(-40px) rotate(-60deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.defilement-doux {
    scroll-behavior: auto;
  }
  .hero-mark {
    transform: none !important;
  }
  .orbite-reveal {
    clip-path: none;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}