/* =========================================================
   BTP Expertise - feuille de style
   Valeurs reprises du site Elementor d'origine :
   #262C42 bleu nuit, #0BBBF6 bleu clair, #FF8A00 orange,
   #F4F4F4 gris de fond, #324A6D bleu texte.
   Montserrat (titres), Poppins (chapos), Roboto (boutons).
   ========================================================= */

:root {
  --bleu-nuit: #262C42;
  --bleu: #0BBBF6;
  --bleu-sombre: #0A93C2;
  --bleu-texte: #324A6D;
  --orange: #FF8A00;
  --orange-sombre: #E67B00;
  --texte: #3A3F52;
  --texte-clair: #6B7186;
  --gris-fond: #F4F4F4;
  --gris-bord: #E3E7ED;
  --blanc: #FFFFFF;

  --titre: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --chapo: "Poppins", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --bouton: "Roboto", "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  --largeur: 1300px;
  --transition: .25s ease;
  --ombre-bouton: 0 0 10px 0 rgba(0, 0, 0, .5);
  --ombre-carte: 0 6px 26px rgba(38, 44, 66, .10);
}

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

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

body {
  margin: 0;
  font-family: var(--titre);
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte);
  background: var(--blanc);
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu-sombre); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange); }

h1, h2, h3, h4 { font-family: var(--titre); color: var(--bleu-nuit); line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 3% 4%; }
.section--gris { background: var(--gris-fond); }
.section--nuit { background: var(--bleu-nuit); color: rgba(255,255,255,.86); }
.section--nuit h2, .section--nuit h3 { color: var(--blanc); }

/* ---------- Titres de section ---------- */
.entete-bloc { text-align: center; max-width: 820px; margin: 0 auto 54px; }
.entete-bloc--gauche { text-align: left; margin-left: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.section--nuit .kicker { color: var(--bleu); }
.section--nuit .kicker::before { background: var(--bleu); }

.titre-section {
  font-family: var(--titre);
  font-size: clamp(1.65rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--bleu-nuit);
  margin: 0;
}
.titre-section em { font-style: normal; color: var(--bleu); }
.section--nuit .titre-section { color: var(--blanc); }
.section--nuit .titre-section em { color: var(--orange); }

.chapo {
  font-family: var(--chapo);
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--bleu-texte);
  margin: 18px auto 0;
  max-width: 760px;
}
.entete-bloc--gauche .chapo { margin-left: 0; }
.section--nuit .chapo { color: rgba(255,255,255,.85); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--bouton);
  font-weight: 500;
  font-size: .95rem;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--orange);
  color: var(--blanc);
  cursor: pointer;
  box-shadow: var(--ombre-bouton);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  text-align: center;
}
.bouton:hover { transform: scale(1.06); background: var(--orange-sombre); color: var(--blanc); }
.bouton--bleu { background: var(--bleu); }
.bouton--bleu:hover { background: var(--bleu-sombre); }
.bouton--blanc { background: var(--blanc); color: var(--bleu-nuit); }
.bouton--blanc:hover { background: var(--blanc); color: var(--orange); }
.bouton--contour { background: transparent; border-color: var(--blanc); color: var(--blanc); box-shadow: none; }
.bouton--contour:hover { background: var(--blanc); color: var(--bleu-nuit); }
.bouton--pilule { border-radius: 29px; }

/* ---------- En-tête flottant, posé sur le visuel ---------- */
.entete {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 0 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Grille 1fr auto 1fr : les deux colonnes laterales ont exactement la meme
   largeur, donc le menu tombe au centre de la barre meme si le logo et les
   boutons n'ont pas la meme taille. Logo cale a gauche, boutons a droite. */
.entete__carte {
  width: 100%;
  max-width: 1360px;
  margin: 24px auto 0;
  background: rgba(255, 255, 255, .86);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(38, 44, 66, .16);
}
.entete__logo { display: flex; align-items: center; justify-content: flex-start; padding: 10px 0 10px 78px; }
.entete__logo img { height: 58px; width: auto; }

.nav { display: flex; align-items: center; justify-content: flex-start; gap: 26px; }
.nav a {
  font-family: var(--titre);
  font-size: .88rem;
  font-weight: 600;
  color: #000;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 2px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width var(--transition);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--orange); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

.entete__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.entete__actions .bouton {
  padding: 10px 17px;
  font-size: .83rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 138, 0, .3);
}

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--orange); position: relative; transition: var(--transition); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--orange); transition: var(--transition);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 790px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--bleu-nuit);
  padding: 200px 5% 90px;
  text-align: center;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 50% 52%, rgba(27, 32, 51, .62) 0%, rgba(27, 32, 51, .30) 65%, rgba(27, 32, 51, 0) 100%),
    linear-gradient(180deg, rgba(20, 24, 38, .58) 0%, rgba(20, 24, 38, .38) 40%, rgba(20, 24, 38, .52) 100%);
}
/* width + min-width:0 : sans cela le bloc prend la largeur de son contenu
   et deborde de l'ecran des que les libelles des boutons s'allongent. */
.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  min-width: 0;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 26px;
}
.hero__label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 0, .28);
}

.hero__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--blanc);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
  margin: 0 0 .45em;
}
.hero__titre em {
  font-style: normal;
  color: var(--orange);
  position: relative;
  white-space: nowrap;
}
.hero__accroche {
  font-family: var(--chapo);
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
  margin: 0 auto 2.2em;
  max-width: 720px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.hero__zones {
  margin-top: 3em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.hero__zones span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .84rem;
  font-weight: 600;
  color: var(--blanc);
  letter-spacing: .02em;
}
.hero__zones span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bleu); }

/* ---------- Bandeau des pages internes ---------- */
.banniere {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 220px 5% 70px;
  background: var(--bleu-nuit);
  overflow: hidden;
}
.banniere__media { position: absolute; inset: 0; z-index: 0; }
.banniere__media img { width: 100%; height: 100%; object-fit: cover; }
.banniere__voile { position: absolute; inset: 0; z-index: 1; background: rgba(38, 44, 66, .45); }
.banniere__contenu { position: relative; z-index: 2; max-width: 980px; }
.banniere h1 {
  font-family: var(--titre);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 42px);
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 0 19px rgba(0, 0, 0, .83);
  color: var(--blanc);
  margin: 0 0 .5em;
}
.banniere p {
  font-family: var(--chapo);
  font-size: clamp(1rem, 2vw, 20px);
  font-weight: 300;
  color: var(--blanc);
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  margin: 0 auto;
  max-width: 760px;
}

/* ---------- Grilles ---------- */
.grille { display: grid; gap: 26px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }

/* ---------- Cartes retournables (flip box) ---------- */
.flip { perspective: 1200px; height: 300px; }
.flip__interieur {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}
.flip:hover .flip__interieur,
.flip:focus-within .flip__interieur { transform: rotateY(-180deg); }
.flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 24px;
  overflow: hidden;
}
.flip__avant { background: var(--gris-fond); }
.flip__avant img { width: 60%; max-width: 108px; margin: 0 auto 10px; }
.flip__avant h3 {
  font-family: var(--titre);
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bleu-nuit);
  margin: 0;
  line-height: 1.4;
}
.flip__arriere { background: var(--bleu); transform: rotateY(-180deg); color: var(--blanc); }
.flip__arriere p { font-size: .93rem; color: var(--blanc); margin-bottom: 1.2em; }
.flip__arriere .bouton {
  background: var(--blanc);
  color: var(--bleu-nuit);
  border-radius: 29px;
  border: 2px solid var(--blanc);
  box-shadow: none;
  padding: 10px 24px;
  font-size: .88rem;
}
.flip__arriere .bouton:hover { background: transparent; color: var(--blanc); transform: none; }

/* ---------- Cartes simples ---------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 10px;
  padding: 34px 28px;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-carte); }
.carte--gris { background: var(--gris-fond); border-color: transparent; }
.carte__icone { width: 92px; height: 92px; margin: 0 auto 18px; object-fit: contain; }
.carte h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.carte p { color: var(--texte-clair); font-size: .95rem; flex: 1; margin-bottom: 0; }
.carte__lien { font-weight: 600; font-size: .9rem; color: var(--bleu-sombre); margin-top: 1em; }
.carte__lien::after { content: " \2192"; }

/* ---------- Frise des étapes ---------- */
.frise { position: relative; max-width: 1020px; margin: 0 auto; counter-reset: etape; }
.frise::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--bleu);
  opacity: .22;
}
/* Trait de progression qui se remplit en orange au fil du défilement */
.frise::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--orange);
  height: var(--progression, 0%);
  transition: height .25s linear;
}
.frise__etape {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  align-items: center;
  margin-bottom: 14px;
  transition: opacity .55s ease, transform .55s ease;
}
/* L'animation n'est armée que si le script a pris la main : sans JavaScript,
   les étapes restent visibles. */
.frise[data-anime="true"] .frise__etape { opacity: 0; transform: translateY(26px); }
.frise[data-anime="true"] .frise__etape.visible { opacity: 1; transform: none; }
.frise__etape:last-child { margin-bottom: 0; }

.frise__pastille {
  counter-increment: etape;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--bleu);
  color: var(--bleu);
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .9);
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .25s ease;
  z-index: 2;
}
.frise__pastille::before { content: counter(etape, decimal-leading-zero); }
.section--gris .frise__pastille { box-shadow: 0 0 0 8px var(--gris-fond); }

/* Étape déjà parcourue : la pastille bascule en orange */
.frise__etape.vue .frise__pastille {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--blanc);
}
.frise__etape:hover .frise__pastille { transform: scale(1.08); }

.frise__carte {
  background: var(--blanc);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--ombre-carte);
  position: relative;
  grid-row: 1;
  align-self: center;
  border-left: 3px solid transparent;
  transition: border-color .4s ease;
}
.frise__etape:nth-child(odd) .frise__carte {
  grid-column: 1;
  text-align: right;
  border-left: 0;
  border-right: 3px solid transparent;
}
.frise__etape:nth-child(even) .frise__carte { grid-column: 3; }
.frise__etape.vue:nth-child(odd) .frise__carte { border-right-color: var(--orange); }
.frise__etape.vue:nth-child(even) .frise__carte { border-left-color: var(--orange); }
.frise__carte h3 {
  margin: 0 0 .35em;
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bleu-nuit);
}
.frise__carte p { margin: 0; color: var(--texte-clair); font-size: .93rem; line-height: 1.6; }

/* ---------- Blocs image + texte ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; max-width: var(--largeur); margin: 0 auto; }
.duo--inverse .duo__media { order: 2; }
.duo__media img { border-radius: 10px; box-shadow: var(--ombre-carte); width: 100%; object-fit: cover; }
.duo__texte h2, .duo__texte h3 { font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

.liste-check { list-style: none; padding: 0; }
.liste-check li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.liste-check li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--bleu);
  border-bottom: 2.5px solid var(--bleu);
  transform: rotate(-45deg);
}
.section--nuit .liste-check li::before,
.flip__arriere .liste-check li::before { border-color: var(--orange); }

/* ---------- Expertises : blocs alternés, texte chevauchant l'image ---------- */
/* =========================================================
   Page Expertises : dix blocs photo + texte, sur deux colonnes
   ========================================================= */
.expertises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}

.expertise {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--blanc);
  box-shadow: 0 10px 32px rgba(38, 44, 66, .12);
  scroll-margin-top: 130px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.expertise:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(38, 44, 66, .17);
}

.expertise__media { position: relative; overflow: hidden; }
.expertise__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.expertise:hover .expertise__media img { transform: scale(1.05); }

/* Numero d'ordre en surimpression sur la photo */
.expertise__rang {
  position: absolute;
  top: 16px; left: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(255, 138, 0, .42);
}

.expertise__contenu {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
}

.expertise__tete { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.expertise__picto {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(11, 187, 246, .12);
  color: var(--bleu-sombre);
  display: flex; align-items: center; justify-content: center;
}
.expertise__titre {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}
.expertise__resume {
  font-family: var(--chapo);
  font-weight: 400;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--bleu-nuit);
  margin: 0 0 16px;
}
.expertise__texte {
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--bleu-texte);
  margin: 0 0 16px;
}
.expertise__points {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 7px;
}
.expertise__points li {
  position: relative;
  padding-left: 23px;
  font-size: .89rem;
  line-height: 1.4;
  color: var(--texte);
  margin: 0;
}
.expertise__points li::before {
  content: "";
  position: absolute;
  left: 2px; top: .38em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(-45deg);
}
/* Reserve reglementaire (installations electriques) */
.expertise__reserve {
  margin: 0 0 18px;
  padding: 12px 15px;
  background: var(--gris-fond);
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--texte-clair);
}
.expertise__lien {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--bouton);
  font-weight: 500;
  font-size: .93rem;
  color: var(--bleu-nuit);
}
.expertise__lien span { transition: transform var(--transition); }
.expertise__lien:hover { color: var(--bleu-sombre); }
.expertise__lien:hover span { transform: translateX(5px); }

@media (max-width: 1250px) {
  .expertises { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .expertises { grid-template-columns: 1fr; gap: 24px; }
  .expertise__contenu { padding: 24px 22px 22px; }
  .expertise__rang { width: 42px; height: 42px; font-size: .88rem; }
}

/* Renvoi vers l'AMO en bas de la page Expertises */
.cadre-amo {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cadre-amo__intitule {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--bleu-nuit);
  margin: 0 0 10px;
}
.cadre-amo__texte {
  font-family: var(--chapo);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bleu-texte);
  margin: 0 0 22px;
}

/* ---------- FAQ ---------- */
.faq { max-width: 900px; margin: 0 auto; }
.faq details {
  border-radius: 10px;
  margin-bottom: 14px;
  background: var(--gris-fond);
  transition: box-shadow var(--transition);
}
.faq details[open] { box-shadow: var(--ombre-carte); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 58px 22px 26px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bleu-nuit);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 26px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--bleu);
  border-bottom: 2.5px solid var(--bleu);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__reponse { padding: 0 26px 22px; color: var(--texte); }
.faq__reponse p:last-child { margin-bottom: 0; }

/* ---------- Bandeau d'appel ---------- */
.appel {
  position: relative;
  padding: 90px 5%;
  text-align: center;
  overflow: hidden;
  background: var(--bleu-nuit);
}
.appel__media { position: absolute; inset: 0; z-index: 0; }
.appel__media img { width: 100%; height: 100%; object-fit: cover; }
.appel__voile { position: absolute; inset: 0; z-index: 1; background: rgba(38, 44, 66, .78); }
.appel__contenu { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.appel h2 {
  color: var(--blanc);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: 1px;
}
.appel p { color: rgba(255,255,255,.9); font-family: var(--chapo); font-weight: 300; font-size: 1.08rem; }
.appel__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 1.6em; }

/* ---------- Zones d'intervention ---------- */
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: var(--largeur); margin: 0 auto; }
.zone__titre { display: flex; align-items: baseline; gap: 10px; margin-bottom: .8em; }
.zone__titre h3 { margin: 0; font-weight: 800; text-transform: uppercase; }
.zone__titre span { font-weight: 800; color: var(--orange); font-size: 1.2rem; }
.villes { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; list-style: none; margin: 0; }
.villes li {
  margin: 0;
  font-size: .87rem;
  padding: 7px 14px;
  border-radius: 40px;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  color: var(--bleu-nuit);
  font-weight: 500;
}
.section--nuit .villes li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--blanc); }

/* ---------- Formulaire ---------- */
.formulaire {
  background: var(--blanc);
  border-radius: 10px;
  padding: 40px;
  box-shadow: var(--ombre-carte);
}
.champ { margin-bottom: 22px; }
.champ label {
  display: block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .89rem;
  color: var(--bleu-nuit);
  margin-bottom: 8px;
}
.champ .obligatoire { color: var(--orange); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  font-family: var(--titre);
  font-size: .96rem;
  color: var(--texte);
  padding: 13px 15px;
  border: 1px solid var(--gris-bord);
  border-radius: 8px;
  background: var(--blanc);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 3px rgba(11,187,246,.16);
}
.champ__aide { font-size: .82rem; color: var(--texte-clair); margin: 6px 0 0; }

/* ---------- Dépôt de photos ---------- */
.depot {
  border: 2px dashed var(--gris-bord);
  border-radius: 10px;
  background: var(--gris-fond);
  padding: 26px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.depot:hover, .depot:focus-within { border-color: var(--bleu); background: rgba(11, 187, 246, .05); }
.depot[data-survol="true"] { border-color: var(--orange); background: rgba(255, 138, 0, .07); }
.depot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot__pictogramme {
  width: 42px; height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(11, 187, 246, .13);
  color: var(--bleu-sombre);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
}
.depot__titre { font-family: var(--titre); font-weight: 600; font-size: .95rem; color: var(--bleu-nuit); margin: 0 0 4px; }
.depot__titre span { color: var(--bleu-sombre); text-decoration: underline; }
.depot__detail { font-size: .8rem; color: var(--texte-clair); margin: 0; }

.apercus { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.apercus:empty { margin-top: 0; }
.apercu {
  position: relative;
  width: 92px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gris-fond);
  border: 1px solid var(--gris-bord);
}
.apercu img { width: 92px; height: 92px; object-fit: cover; display: block; }
.apercu__nom {
  font-size: .64rem;
  color: var(--texte-clair);
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apercu__retirer {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(27, 32, 51, .78);
  color: #fff;
  font-size: .8rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.apercu__retirer:hover { background: #A32020; }
.depot__erreur { color: #A32020; font-size: .82rem; margin: 8px 0 0; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.champ--case { display: flex; align-items: flex-start; gap: 11px; }
.champ--case input { width: auto; margin-top: 4px; flex-shrink: 0; }
.champ--case label { font-weight: 500; font-size: .88rem; color: var(--texte-clair); margin: 0; }
/* Bouton d'envoi centré sous le formulaire */
.formulaire button[type="submit"] {
  display: flex;
  margin: 6px auto 0;
  min-width: 280px;
}

.formulaire__message { padding: 15px 18px; border-radius: 8px; margin-bottom: 22px; font-size: .93rem; display: none; }
.formulaire__message--ok { background: #E8F8EE; color: #15703C; border: 1px solid #B7E5C8; display: block; }
.formulaire__message--ko { background: #FDECEC; color: #A32020; border: 1px solid #F5C4C4; display: block; }

.coordonnees { display: grid; gap: 22px; }
.coordonnee { display: flex; gap: 15px; align-items: flex-start; }
.coordonnee__puce {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(11,187,246,.13);
  display: flex; align-items: center; justify-content: center;
  color: var(--bleu-sombre);
  font-weight: 700;
}
.coordonnee dt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-clair); }
.coordonnee dd { margin: 0; font-weight: 600; color: var(--bleu-nuit); }
.coordonnee dd a { color: var(--bleu-nuit); }
.coordonnee dd a:hover { color: var(--orange); }

/* ---------- Article ---------- */
.article { max-width: 820px; margin: 0 auto; }
.article__meta { font-size: .87rem; color: var(--texte-clair); margin-bottom: 1.6em; font-weight: 600; letter-spacing: .04em; }
.article h2 { margin-top: 1.8em; font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.article h3 { margin-top: 1.4em; font-weight: 700; }
.article img { border-radius: 10px; margin: 2em 0; }
.article blockquote {
  margin: 2em 0; padding: 20px 26px;
  border-left: 4px solid var(--orange);
  background: var(--gris-fond);
  border-radius: 0 10px 10px 0;
  font-size: 1.02rem;
}
.article blockquote p:last-child { margin-bottom: 0; }

/* Carte de conseil : image en haut, texte dessous, en grille de trois */
.carte-conseil {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gris-fond);
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}
.carte-conseil:hover { box-shadow: var(--ombre-forte); transform: translateY(-5px); }
.carte-conseil__media { position: relative; overflow: hidden; }
.carte-conseil__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.carte-conseil:hover .carte-conseil__media img { transform: scale(1.05); }
.carte-conseil__corps { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.carte-conseil__corps h3 {
  margin: 0 0 .5em;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--bleu-nuit);
}
.carte-conseil__corps p { color: var(--texte-clair); font-size: .93rem; line-height: 1.6; flex: 1; }
.carte-conseil .article__meta { margin-bottom: .8em; }
.carte-conseil .carte__lien { margin-top: 1em; }

/* ---------- Contenu légal ---------- */
.legal { max-width: 860px; margin: 0 auto; }
.legal h2 { margin-top: 2em; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; }
.legal h3 { margin-top: 1.5em; font-size: 1.05rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .93rem; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border: 1px solid var(--gris-bord); vertical-align: top; }
.legal th { background: var(--gris-fond); font-weight: 600; color: var(--bleu-nuit); width: 36%; }

/* ---------- Pied de page ---------- */
.pied { background: var(--gris-fond); color: var(--texte); padding: 30px 5% 0; font-size: .88rem; }
.pied a { color: var(--texte); }
.pied a:hover { color: var(--orange); }
.pied__interieur {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
}
.pied__logo img { width: 190px; height: auto; }
.pied__phrase { margin: 0; color: var(--texte-clair); font-size: .84rem; max-width: 520px; line-height: 1.5; }
.pied__contact {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 22px;
  font-size: .86rem;
}
.pied__contact li { margin: 0; position: relative; }
.pied__contact li + li::before {
  content: "";
  position: absolute; left: -12px; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%;
  background: #C3C9D2;
}
.pied__bas {
  border-top: 1px solid #DDE1E7;
  padding: 12px 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: .78rem;
  color: var(--texte-clair);
  max-width: var(--largeur);
  margin: 0 auto;
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; margin: 0; }
.pied__bas li { margin: 0; }

/* ---------- Utilitaires ---------- */
.centre { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.saut { margin-top: 2.4em; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grille--4, .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .grille--5 { grid-template-columns: repeat(3, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1250px) {
  .entete { padding: 0 4%; }
  /* Trois colonnes de largeurs egales aux extremites : le logo occupe celle
     du milieu et se retrouve donc vraiment centre, quelle que soit la
     largeur du burger. */
  .entete__carte {
    grid-template-columns: 46px 1fr 46px;
    margin-top: 20px;
    padding: 6px 14px;
    gap: 10px;
  }
  .entete__logo {
    grid-column: 2;
    grid-row: 1;
    padding: 6px 0;
    justify-content: center;
  }
  .entete__logo img { height: 42px; width: auto; max-width: 100%; }
  .entete__actions { grid-column: 3; grid-row: 1; }
  .entete__actions .bouton { display: none; }
  .burger { display: flex; }

  /* Le titre du hero garde « Assistance à Maîtrise d'Ouvrage » d'un seul
     tenant sur grand écran. En dessous, la formule fait 552 px pour 338 px
     disponibles : elle doit pouvoir se couper, sinon elle sort de l'écran. */
  .hero__titre em { white-space: normal; }
  .nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 8px;
  }
  .nav[data-ouvert="true"] {
    display: flex;
    padding-bottom: 14px;
    animation: deplie .28s ease;
  }
  @keyframes deplie {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 1rem; }
  .nav a::after { display: none; }
  /* L'appel à l'action des boutons d'en-tête, masqués sur cette largeur,
     revient au bas du menu déroulant : c'est là qu'on le cherche. */
  .nav .nav__action {
    display: block;
    margin-top: 14px;
    padding: 14px 18px;
    border-bottom: 0;
    text-align: center;
    font-size: .95rem;
  }
  .hero { min-height: 620px; padding: 140px 5% 70px; }
  .banniere { min-height: 380px; padding: 150px 5% 60px; }

  /* Frise : ligne à gauche, contenu en colonne */
  .frise::before { left: 30px; }
  .frise__etape { grid-template-columns: 60px 1fr; gap: 20px; margin-bottom: 20px; }
  .frise__pastille { grid-column: 1; justify-self: start; }
  .frise__etape:nth-child(odd) .frise__carte,
  .frise__etape:nth-child(even) .frise__carte { grid-column: 2; text-align: left; }
}

@media (max-width: 767px) {
  .section { padding: 12% 5%; }
  .grille--2, .grille--3, .grille--4, .grille--5 { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 32px; }
  .duo--inverse .duo__media { order: 0; }
  .zones { grid-template-columns: 1fr; gap: 32px; }
  .champ--duo { grid-template-columns: 1fr; gap: 0; }
  .formulaire { padding: 26px 22px; }
  .carte-article { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; }
  .etape { grid-template-columns: 58px 1fr; gap: 18px; }
  .hero__actions .bouton, .appel__actions .bouton { width: 100%; }
  .etape, .frise__carte { padding: 20px 22px; }
  /* La vidéo de fond est masquée sur mobile, comme sur le site d'origine */
  .hero__media video { display: none; }
  .flip { height: 300px; }
  .flip__avant img { max-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .frise__etape { opacity: 1; transform: none; }
}

/* ---------- Page de demande : formulaire seul, centré ---------- */
.formulaire-zone { max-width: 780px; margin: 0 auto; }
.formulaire-zone__note {
  text-align: center;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.formulaire-zone__note p { font-size: .9rem; color: var(--texte-clair); margin: 0; }
.champ__facultatif { font-weight: 500; color: var(--texte-clair); font-size: .82rem; }
.champ__intitule {
  display: block;
  font-weight: 700;
  color: var(--bleu-nuit);
  margin-bottom: 10px;
  font-size: .95rem;
}

/* ---------- Deux parcours : rendez-vous ou dossier détaillé ---------- */
.parcours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 26px;
}
.parcours__onglet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border: 2px solid var(--gris-bord);
  border-radius: 12px;
  background: var(--blanc);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.parcours__onglet:hover { border-color: var(--bleu); }
.parcours__onglet:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.parcours__onglet.est-actif {
  border-color: var(--bleu);
  background: rgba(11, 187, 246, .07);
  box-shadow: var(--ombre-carte);
}
.parcours__titre {
  font-weight: 800;
  color: var(--bleu-nuit);
  font-size: 1rem;
  line-height: 1.25;
}
.parcours__detail { font-size: .84rem; color: var(--texte-clair); line-height: 1.35; }

.volet[hidden] { display: none; }

/* ---------- Choix du format de rendez-vous ----------
   Les selecteurs sont prefixes .champ pour passer devant les regles
   generiques du formulaire (.champ label est en display:block). */
.champ .formats { display: grid; gap: 10px; width: 100%; }
.champ .format {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 13px 16px;
  border: 2px solid var(--gris-bord);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.champ .format:hover { border-color: var(--bleu); }
.champ .format input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  accent-color: var(--bleu);
}
.format__corps { display: flex; flex-direction: column; gap: 2px; }
.format__titre { font-weight: 700; color: var(--bleu-nuit); font-size: .95rem; line-height: 1.3; }
.format__detail { font-size: .84rem; color: var(--texte-clair); line-height: 1.35; }
.champ .format:has(input:checked) {
  border-color: var(--bleu);
  background: rgba(11, 187, 246, .07);
}

.formulaire__pied {
  margin: 14px 0 0;
  font-size: .84rem;
  color: var(--texte-clair);
  text-align: center;
  line-height: 1.45;
}

@media (max-width: 599px) {
  .parcours { grid-template-columns: 1fr; }
  .parcours__onglet { padding: 13px 15px; }
}

/* ---------- Résumé des zones sur l'accueil ---------- */
.zone-resume {
  background: var(--blanc);
  border-radius: 12px;
  padding: 26px 28px;
  box-shadow: var(--ombre-carte);
}
.zone-resume p { margin: 0; color: var(--texte-clair); font-size: .95rem; line-height: 1.6; }
.section--gris .zone-resume { background: var(--blanc); }

/* Bouton d'appel : l'action est mise en avant, pas le numéro */
.bouton--appel::before {
  content: "";
  width: 15px; height: 15px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================================
   Page de règlement
   ========================================================= */

.bouton--inactif {
  background: var(--gris-bord);
  color: var(--texte-clair);
  box-shadow: none;
  cursor: not-allowed;
}
.bouton--inactif:hover { background: var(--gris-bord); color: var(--texte-clair); transform: none; }

.procedure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 56px;
}
.procedure__texte, .procedure__paiement {
  border-radius: 14px;
  padding: 28px 30px;
}
.procedure__texte { background: var(--gris-fond); }
.procedure__paiement {
  background: var(--bleu-nuit);
  color: rgba(255, 255, 255, .85);
  display: flex;
  flex-direction: column;
}
.procedure h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin-bottom: .7em;
}
.procedure__paiement h3 { color: var(--blanc); }
.procedure p { font-size: .93rem; margin-bottom: 1em; }
.procedure__paiement p { color: rgba(255, 255, 255, .82); }
.procedure__paiement .bouton { align-self: flex-start; margin-top: auto; }
.procedure__note {
  font-size: .78rem !important;
  color: rgba(255, 255, 255, .55) !important;
  margin: 14px 0 0 !important;
}

.etape-paiement {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--largeur);
  margin: 0 auto 26px;
}
.etape-paiement__num {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.etape-paiement h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  margin: 0 0 .2em;
}
.etape-paiement p { margin: 0; color: var(--texte-clair); font-size: .93rem; }

.tarif {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 12px;
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.tarif:hover { box-shadow: var(--ombre-carte); transform: translateY(-3px); }
.tarif h3 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .3em;
}
.tarif__detail { font-size: .84rem; color: var(--texte-clair); margin-bottom: 1em; flex: 1; }
.tarif__montant {
  font-family: var(--titre);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--bleu-nuit);
  margin-bottom: .8em;
}
.tarif .bouton { width: 100%; }

@media (max-width: 767px) {
  .procedure { grid-template-columns: 1fr; }
  .procedure__paiement .bouton { align-self: stretch; }
}

/* Lien de règlement : visible dans le menu déroulant seulement */
.nav__reglement { display: none !important; }
/* Ces deux entrées n'existent que dans le menu déroulant du format réduit :
   au-dessus, les boutons de l'en-tête les rendent inutiles. */
.nav__action { display: none; }
.entete__actions .bouton--bleu { box-shadow: 0 4px 14px rgba(11, 187, 246, .3); }

@media (max-width: 1400px) and (min-width: 1251px) {
  .entete__logo { padding-left: 46px; }
}
@media (max-width: 1400px) {
  .nav { gap: 24px; }
  .nav a { font-size: .88rem; }
  .entete__actions { gap: 10px; }
  .entete__actions .bouton { padding: 10px 15px; font-size: .81rem; }
}
@media (max-width: 1250px) {
  /* Menu deroulant : le bouton de reglement rejoint la liste */
  .entete__actions .bouton--bleu { display: none; }
  .nav__reglement { display: block !important; color: var(--bleu-sombre) !important; }
  .nav__reglement::after { background: var(--bleu) !important; }
}


/* Wordmark Stripe, aligné dans le fil du texte */
.logo-stripe {
  display: inline-block;
  height: 1.05em;
  width: auto;
  vertical-align: -0.16em;
  margin-left: .12em;
}

/* ---------- Compétences illustrées ---------- */
.competence {
  background: var(--blanc);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.competence:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.competence__media { overflow: hidden; }
.competence__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}
.competence:hover .competence__media img { transform: scale(1.05); }
.competence__corps { padding: 22px 24px 26px; flex: 1; }
.competence__corps h3 {
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bleu-nuit);
  margin-bottom: .5em;
  line-height: 1.35;
}
.competence__corps p { margin: 0; color: var(--texte-clair); font-size: .9rem; line-height: 1.6; }

/* ---------- Page AMO : les neuf missions ---------- */
.missions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mission {
  position: relative;
  background: var(--blanc);
  border-radius: 12px;
  padding: 28px 24px 24px;
  box-shadow: var(--ombre-carte);
  border-top: 3px solid var(--bleu);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mission:hover { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(38,44,66,.14); }
.mission__numero {
  display: block;
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 10px;
}
.mission h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.3;
}
.mission p {
  margin: 0;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--bleu-texte);
}

@media (max-width: 1023px) {
  .missions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .missions { grid-template-columns: 1fr; }
  .cadre { padding: 26px 22px; }
  .cadre__liste { grid-template-columns: 1fr; }
}

/* Bouton d'appel dont le numero vient d'etre devoile (ordinateur / tablette) */
.bouton--appel.est-devoile,
.bouton--contour-nuit.est-devoile { letter-spacing: .02em; }
a[href^="tel:"].est-devoile { animation: devoile .28s ease; }
@keyframes devoile {
  from { opacity: .35; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  a[href^="tel:"].est-devoile { animation: none; }
}

/* ---------- Les deux portes d'entrée : problème / projet ---------- */
.section--besoins { padding-top: 4%; padding-bottom: 4%; }
.besoins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.besoin {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 16px;
  padding: 38px 36px 34px;
  box-shadow: var(--ombre-carte);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.besoin::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.besoin--bleu::before { background: var(--bleu); }
.besoin--orange::before { background: var(--orange); }
.besoin:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(38, 44, 66, .14); }

.besoin__intitule {
  display: inline-block;
  font-family: var(--titre);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 18px;
}
.besoin--bleu .besoin__intitule { background: rgba(11, 187, 246, .12); color: var(--bleu-sombre); }
.besoin--orange .besoin__intitule { background: rgba(255, 138, 0, .12); color: var(--orange-sombre); }

.besoin__metier {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.besoin__verbes {
  font-family: var(--titre);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.besoin--bleu .besoin__verbes { color: var(--bleu-sombre); }
.besoin--orange .besoin__verbes { color: var(--orange-sombre); }

.besoin__texte {
  font-family: var(--chapo);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--bleu-texte);
  margin: 0 0 22px;
}
.besoin__lien {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--bouton);
  font-weight: 500;
  font-size: .95rem;
  color: var(--bleu-nuit);
}
.besoin__lien span { transition: transform var(--transition); }
.besoin__lien:hover span { transform: translateX(5px); }
.besoin--bleu .besoin__lien:hover { color: var(--bleu-sombre); }
.besoin--orange .besoin__lien:hover { color: var(--orange-sombre); }

/* ---------- Quatre blocs de réassurance ---------- */
.atouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.atout {
  background: var(--blanc);
  border-radius: 12px;
  padding: 26px 24px;
  box-shadow: var(--ombre-carte);
  border-bottom: 3px solid var(--bleu);
}
.atout h3 {
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 10px;
}
.atout p {
  margin: 0;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--bleu-texte);
}

@media (max-width: 1023px) {
  .atouts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .besoins { grid-template-columns: 1fr; }
  .besoin { padding: 30px 26px 28px; }
  .atouts { grid-template-columns: 1fr; }
}

/* Sur petit ecran, les deux appels a l'action du hero sont longs
   ("Je souhaite etre accompagne dans mes travaux") : ils passent en pleine
   largeur, l'un sous l'autre, et le texte peut revenir a la ligne. */
@media (max-width: 599px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .bouton {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---------- Page AMO : les projets accompagnés ---------- */
.projets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 46px;
}
.projet {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.projet img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--transition);
}
.projet:hover img { transform: scale(1.05); }
.projet figcaption {
  display: block;
  padding: 16px 18px 18px;
}
.projet__titre {
  display: block;
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bleu-nuit);
  margin-bottom: 6px;
}
.projet__mission {
  display: block;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--bleu-texte);
}

@media (max-width: 1023px) { .projets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .projets { grid-template-columns: 1fr; } }

/* ---------- Engagement d'indépendance, sous les quatre atouts ---------- */
.engagement {
  max-width: 780px;
  margin: 34px auto 0;
  padding: 18px 30px;
  background: var(--blanc);
  border: 2px solid var(--orange);
  border-radius: 10px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--bleu-nuit);
  text-align: center;
}

/* ---------- Page AMO : « vous restez décisionnaire » ----------
   Formulation positive du principe : le cabinet conseille, le client décide. */
.decision { max-width: 820px; margin: 0 auto; text-align: center; }
.decision__accroche {
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 18px;
}
.decision__texte {
  font-family: var(--chapo);
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.55;
  color: var(--blanc);
  margin: 0 0 20px;
}
.decision__note {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 767px) {
  .engagement { padding: 16px 20px; font-size: .95rem; }
}

/* =========================================================
   Parcours en deux colonnes : Expertise / AMO
   Reproduction HTML/CSS du visuel de Mickael Rigaud (§10).
   ========================================================= */
.parcours-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: start;
}

.voie { --teinte: var(--bleu-nuit); position: relative; }
.voie--expertise { --teinte: #1B4C8C; }
.voie--amo       { --teinte: var(--orange); }

/* ---- En-tête de colonne ---- */
.voie__tete {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}
.voie__pastille {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--teinte);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voie__titre {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teinte);
  margin: 6px 0 6px;
  line-height: 1.25;
}
.voie__verbes, .voie__phrase {
  margin: 0;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--bleu-texte);
}

/* ---- Colonne d'étapes ---- */
.voie__etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Le trait vertical qui relie les pastilles, en pointillés comme le visuel. */
.voie__etapes::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 0;
  border-left: 2px dashed var(--teinte);
  opacity: .45;
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  /* Les encadrés du parcours respirent : collés, on ne distinguait plus une
     étape de la suivante. Le trait pointillé les relie toujours. */
  margin-bottom: 26px;
}
.etape:last-child { margin-bottom: 0; }

.etape__numero {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teinte);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titre);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.etape__carte {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--blanc);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 18px rgba(38, 44, 66, .08);
  transition: transform var(--transition), box-shadow var(--transition);
}
.etape__carte:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 28px rgba(38, 44, 66, .14);
}
.etape__corps { flex: 1 1 auto; min-width: 0; }
.etape__titre {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teinte);
  margin: 0 0 5px;
  line-height: 1.3;
}
.etape__texte {
  margin: 0;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--bleu-texte);
}
.etape__picto {
  flex: none;
  color: var(--teinte);
  opacity: .75;
}

/* ---- Bandeau de clôture ---- */
.parcours-pied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 900px;
  margin: 46px auto 0;
  background: var(--blanc);
  border-radius: 14px;
  padding: 22px 30px;
  box-shadow: var(--ombre-carte);
}
.parcours-pied__bouclier {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.parcours-pied__titre {
  margin: 0 0 3px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1rem;
  color: var(--bleu);
}
.parcours-pied__texte {
  margin: 0;
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--bleu-texte);
}

/* ---- Animation : les étapes se révèlent une à une ---- */
[data-anim-actif] .etape[data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-anim-actif] .etape[data-anim].visible {
  opacity: 1;
  transform: none;
}
[data-anim-actif] .voie__etapes .etape:nth-child(1).visible { transition-delay: .00s; }
[data-anim-actif] .voie__etapes .etape:nth-child(2).visible { transition-delay: .06s; }
[data-anim-actif] .voie__etapes .etape:nth-child(3).visible { transition-delay: .12s; }
[data-anim-actif] .voie__etapes .etape:nth-child(4).visible { transition-delay: .18s; }
[data-anim-actif] .voie__etapes .etape:nth-child(5).visible { transition-delay: .24s; }
[data-anim-actif] .voie__etapes .etape:nth-child(6).visible { transition-delay: .30s; }
[data-anim-actif] .voie__etapes .etape:nth-child(7).visible { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  [data-anim-actif] .etape[data-anim] { opacity: 1; transform: none; transition: none; }
  .etape__carte:hover { transform: none; }
}

@media (max-width: 1023px) {
  .parcours-double { grid-template-columns: 1fr; gap: 42px; }
}
@media (max-width: 599px) {
  .etape { grid-template-columns: 38px 1fr; gap: 11px; margin-bottom: 22px; }
  .etape__numero { width: 38px; height: 38px; font-size: .8rem; }
  .voie__etapes::before { left: 18px; }
  .etape__carte { padding: 14px 15px; gap: 11px; }
  .etape__picto { display: none; }
  .parcours-pied { flex-direction: column; text-align: center; padding: 20px 22px; }
}

/* Precision sur le perimetre : ce que le cabinet n'assure pas.
   Sobre et factuel, pas alarmant : c'est une clarification, pas un avertissement. */
.precision-role {
  margin: 22px 0 26px;
  padding: 16px 20px;
  background: var(--gris-fond);
  border-left: 3px solid var(--bleu);
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--texte);
}
.precision-role strong { color: var(--bleu-nuit); }

/* ---------- Liens secondaires du pied de page ---------- */
.pied__secondaire {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: .88rem;
}
.pied__secondaire a { color: var(--bleu-nuit); font-weight: 600; }
.pied__secondaire a:hover { color: var(--orange); }

/* =========================================================
   Page Honoraires
   ========================================================= */
.tarifs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}
.tarif {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 14px;
  padding: 26px 28px 20px;
  box-shadow: var(--ombre-carte);
}
.tarif__famille {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gris-bord);
}
.tarif__table { width: 100%; border-collapse: collapse; }
.tarif__table thead th {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-clair);
  text-align: left;
  padding-bottom: 8px;
}
.tarif__table thead th:last-child { text-align: right; }
.tarif__table tbody th {
  font-family: var(--chapo);
  font-weight: 400;
  font-size: .95rem;
  color: var(--texte);
  text-align: left;
  padding: 14px 14px 14px 0;
  border-top: 1px solid var(--gris-bord);
}
/* Chaque niveau porte sous son nom ce que la mission recouvre : sans cette
   ligne, trois intitules seuls ne disent rien de ce qui est facture. */
.tarif__mission { display: block; font-weight: 600; }
.tarif__precision {
  display: block;
  margin-top: 3px;
  font-family: var(--corps);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texte-clair);
}
.tarif__montant {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--bleu-nuit);
  text-align: right;
  white-space: nowrap;
  padding: 11px 0;
  border-top: 1px solid var(--gris-bord);
}
/* « à partir de » passe au-dessus du montant : sur la même ligne, la cellule
   s'élargit et la colonne des missions se retrouve à l'étroit. */
.tarif__depuis {
  display: block;
  font-family: var(--corps);
  font-size: .7rem !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  color: var(--texte-clair);
  margin-bottom: 1px;
}
.tarif__montant span {
  font-size: .72rem;
  font-weight: 600;
  color: var(--texte-clair);
  letter-spacing: .04em;
}
.tarif__mentions {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 24px 28px;
  background: var(--gris-fond);
  border-radius: 12px;
}
.tarif__mentions p { margin: 0 0 12px; font-size: .93rem; line-height: 1.6; color: var(--texte); }
.tarif__mentions p:last-child { margin-bottom: 0; }

/* ---------- Honoraires : résumé sur l'accueil ---------- */
.tarifs-resume {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.tarif-carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 12px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: var(--ombre-carte);
}
.tarif-carte__mission {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--bleu-nuit);
  margin-bottom: 10px;
  line-height: 1.35;
}
.tarif-carte__prix {
  display: block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--orange);
}

/* =========================================================
   Page Rejoignez-nous
   ========================================================= */
.reseau {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items: start;
}
.reseau__profils {
  background: var(--gris-fond);
  border-radius: 14px;
  padding: 28px 30px;
}
.reseau__profils h3 { font-size: 1.05rem; margin: 0 0 16px; }
.reseau__profils .liste-check { margin: 0; }

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.champ .case {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--chapo);
  font-weight: 400;
  font-size: .92rem;
  color: var(--texte);
  cursor: pointer;
}
.champ .case input {
  width: 17px; height: 17px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  accent-color: var(--bleu);
}

@media (max-width: 899px) {
  .tarifs { grid-template-columns: 1fr; }
  .tarifs-resume { grid-template-columns: 1fr; }
  .reseau { grid-template-columns: 1fr; gap: 30px; }
  .cases { grid-template-columns: 1fr; }
}

/* Sur telephone, deux colonnes laissent trop peu de place au descriptif :
   la colonne de gauche tombait a une quinzaine de caracteres. Chaque ligne
   passe donc en bloc, le tarif sous le texte plutot qu'a cote. */
@media (max-width: 560px) {
  .tarif__table thead { display: none; }
  .tarif__table tbody tr {
    display: block;
    padding: 14px 0;
    border-top: 1px solid var(--gris-bord);
  }
  .tarif__table tbody th,
  .tarif__table tbody td.tarif__montant {
    display: block;
    width: auto;
    padding: 0;
    border-top: 0;
    text-align: left;
    white-space: normal;
  }
  .tarif__table tbody td.tarif__montant { margin-top: 9px; }
  .tarif__depuis { display: inline; margin: 0 4px 0 0; }
}

/* ---------- Honoraires : encadré devis avec illustration ---------- */
.tarif__cadre {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  max-width: 1000px;
  margin: 46px auto 0;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ombre-carte);
}
.tarif__illustration { position: relative; }
.tarif__illustration img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
.tarif__mentions {
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tarif__mentions h3 { font-size: 1.15rem; margin: 0 0 14px; }
.tarif__mentions p {
  margin: 0 0 14px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--texte);
}
.tarif__mentions .bouton { margin-top: 6px; }

@media (max-width: 899px) {
  .tarif__cadre { grid-template-columns: 1fr; }
  .tarif__illustration img { min-height: 200px; max-height: 240px; }
  .tarif__mentions { padding: 26px 24px; align-items: stretch; text-align: left; }
  .tarif__mentions .bouton { width: 100%; }
}

/* =========================================================
   Carte interactive des zones d'intervention
   ========================================================= */
.zone-carte {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
}

.zone-carte__plan { position: relative; }
.zone-carte__plan svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- Communes ---- */
.commune {
  stroke: var(--gris-fond);
  stroke-width: .7;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .18s ease;
}
.commune--06 { fill: #7CD9FB; }
.commune--83 { fill: #FFC073; }
.commune:hover { fill: var(--bleu-nuit); }

/* Toute commune répond au clic, pas seulement les douze qui portent un point.
   Sur téléphone, où il n'y a pas de survol, c'est le seul moyen d'afficher un
   nom. transform-box est nécessaire : sans lui, une forme SVG se met à
   l'échelle depuis l'origine du dessin et part hors de la carte. */
.commune {
  transform-box: fill-box;
  transform-origin: center;
}
.commune.est-choisie {
  fill: var(--orange);
  stroke: var(--blanc);
  stroke-width: 1.3;
  animation: communeChoisie .55s ease;
}
@keyframes communeChoisie {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .commune.est-choisie { animation: none; }
}

/* Les départements se révèlent au défilement, l'un après l'autre. */
[data-anim-actif] .zone-carte .communes { opacity: 0; }
[data-anim-actif] .zone-carte.visible .communes {
  opacity: 1;
  animation: carte-apparait .8s ease both;
}
@keyframes carte-apparait {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Mise en évidence d'un département depuis les listes */
.zone-carte[data-actif="06"] .commune--83,
.zone-carte[data-actif="83"] .commune--06 { fill: #DCE3EC; }

/* ---- Repères des villes ---- */
.repere { pointer-events: none; }
/* Le point et le nom redeviennent cliquables : viser le milieu de Cannes ou
   d'Hyeres tombe dans la mer, et celui de Frejus ou de Brignoles dans la
   commune voisine — leur territoire est en croissant ou comprend des iles.
   Le repere, lui, est toujours au bon endroit. */
.repere__point, .repere__nom { pointer-events: auto; cursor: pointer; }
.repere__point { fill: var(--bleu-nuit); }
.repere__onde {
  fill: none;
  stroke: var(--bleu-nuit);
  stroke-width: 1.4;
  opacity: 0;
  transform-origin: center;
}
.repere__nom {
  font-family: var(--titre);
  font-size: 13px;
  font-weight: 700;
  fill: var(--bleu-nuit);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--gris-fond);
  stroke-width: 3.5;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .2s ease;
}
/* ---- Petite carte des trois villes (page zones d'intervention) ----
   Volontairement distincte de la carte d'exploration de l'accueil : le fond
   est muet, seuls les trois repères réagissent et mènent à une page. */
.carte-villes {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
}
.carte-villes__plan { min-width: 0; }
.carte-villes svg { display: block; width: 100%; height: auto; overflow: visible; }

.commune-muette {
  fill: #E8ECF1;
  stroke: var(--blanc);
  stroke-width: .35;
}
.commune-muette--83 { fill: #EFF2F6; }

/* La commune entière est la cible : elle s'allume au survol, en orange, et
   se soulève légèrement. L'état est aussi déclenché depuis le bouton latéral
   (classe est-active posée par le JS), pour que les deux se répondent. */
.zone-ville { cursor: pointer; }
.zone-ville__forme {
  fill: #C9D3DF;
  stroke: var(--blanc);
  stroke-width: .6;
  transition: fill .25s ease, transform .25s ease;
  transform-origin: center;
}
.zone-ville__nom {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 800;
  fill: var(--bleu-nuit);
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: var(--blanc);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill .25s ease;
}
.zone-ville:hover .zone-ville__forme,
.zone-ville:focus-visible .zone-ville__forme,
.zone-ville.est-active .zone-ville__forme {
  fill: var(--orange);
  transform: translateY(-2px);
}
.zone-ville:hover .zone-ville__nom,
.zone-ville:focus-visible .zone-ville__nom,
.zone-ville.est-active .zone-ville__nom { fill: var(--bleu-nuit); }
.zone-ville:focus-visible { outline: none; }

.carte-villes__liens { display: flex; flex-direction: column; gap: 12px; }
.ville-puce {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 18px;
  border: 2px solid var(--gris-bord);
  border-radius: 10px;
  background: var(--blanc);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ville-puce:hover, .ville-puce:focus-visible, .ville-puce.est-active {
  border-color: var(--orange);
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(38, 44, 66, .09);
}
.ville-puce__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ville-puce__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--bleu-nuit);
}
.ville-puce__cp { font-size: .84rem; color: var(--texte-clair); }
.ville-puce__plus {
  font-size: .86rem;
  font-weight: 600;
  color: var(--bleu);
  transition: color .2s ease;
}
.ville-puce__plus span { display: inline-block; transition: transform .2s ease; }
.ville-puce:hover .ville-puce__plus span,
.ville-puce.est-active .ville-puce__plus span { transform: translateX(4px); }

@media (max-width: 780px) {
  .carte-villes { grid-template-columns: 1fr; gap: 24px; }
  /* Pas de taille forcée ici : le texte est exprimé en unités du dessin, il
     se réduit donc avec la carte. L'agrandir faisait se chevaucher
     « Cannes » et « Antibes », qui sont voisines. */
}
@media (prefers-reduced-motion: reduce) {
  .zone-ville__forme, .ville-puce { transition: fill .25s ease, border-color .2s ease; }
  .zone-ville:hover .zone-ville__forme { transform: none; }
  .ville-puce:hover, .ville-puce.est-active { transform: none; }
}

/* ---- Pages villes : Nice, Cannes, Antibes ---- */
.ville-contexte {
  max-width: 760px;
  margin: 0 auto;
}
.ville-contexte p { margin: 0 0 18px; line-height: 1.75; }
.ville-contexte p:last-child { margin-bottom: 0; }

.ville-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 46px;
  max-width: 900px;
  margin: 0 auto;
}
.ville-detail h2 { margin: 0 0 18px; }
.ville-missions, .ville-quartiers { list-style: none; margin: 0 0 20px; padding: 0; }
.ville-missions li { margin-bottom: 9px; }
.ville-missions a {
  font-weight: 600;
  color: var(--bleu-nuit);
  text-decoration: none;
  border-bottom: 2px solid var(--gris-bord);
  transition: border-color .2s ease, color .2s ease;
}
.ville-missions a:hover { color: var(--bleu); border-color: var(--bleu); }
.ville-quartiers { display: flex; flex-wrap: wrap; gap: 8px; }
.ville-quartiers li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--gris-fond);
  font-size: .88rem;
  color: var(--bleu-nuit);
}
.ville-detail__note { font-size: .88rem; color: var(--texte-clair); margin: 0; }

@media (max-width: 860px) {
  .ville-detail { grid-template-columns: 1fr; gap: 34px; }
}

.repere.est-actif .repere__point { fill: var(--orange); }
.repere.est-actif .repere__nom { opacity: 1; }
.repere.est-actif .repere__onde {
  stroke: var(--orange);
  animation: onde 1.4s ease-out infinite;
}
@keyframes onde {
  0%   { opacity: .8; transform: scale(.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}

/* ---- Info-bulle du survol ---- */
.zone-carte__bulle {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -140%);
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(38, 44, 66, .3);
}
.zone-carte__bulle::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bleu-nuit);
}

/* ---- Listes de villes ---- */
.zone-carte__listes { display: grid; gap: 26px; }
.zone-dept h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.zone-dept h3 span:last-child {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--blanc);
  background: var(--bleu-nuit);
  padding: 3px 9px;
  border-radius: 20px;
}
.zone-dept__puce { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.zone-dept--06 .zone-dept__puce { background: #7CD9FB; }
.zone-dept--83 .zone-dept__puce { background: #FFC073; }

.zone-dept__villes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.zone-dept__villes li { margin: 0; }
.zone-dept__villes button {
  font-family: var(--titre);
  font-size: .84rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 20px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.zone-dept__villes button:hover,
.zone-dept__villes button.est-actif {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: var(--blanc);
}
.zone-carte__note {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--texte-clair);
}

@media (prefers-reduced-motion: reduce) {
  [data-anim-actif] .zone-carte.visible .communes { animation: none; }
  .repere.est-actif .repere__onde { animation: none; opacity: .5; }
}

@media (max-width: 899px) {
  .zone-carte { grid-template-columns: 1fr; gap: 30px; }
  .repere__nom { font-size: 17px; }
}

/* Bouton de renvoi vers la page Zones, sous la carte de l'accueil */
.zone-carte__bouton { margin-top: 6px; }

/* ---------- Page Régler : une ligne par prestation ---------- */
.regler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 44px;
  align-items: start;
}
.regler__famille {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 14px;
  padding: 24px 26px 18px;
  box-shadow: var(--ombre-carte);
}
.regler__famille h3 {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--gris-bord);
}
.regler__table { width: 100%; border-collapse: collapse; }
.regler__table tbody th {
  font-family: var(--chapo);
  font-weight: 400;
  font-size: .93rem;
  color: var(--texte);
  text-align: left;
  padding: 13px 12px 13px 0;
  border-top: 1px solid var(--gris-bord);
  line-height: 1.4;
}
.regler__table tr:first-child th,
.regler__table tr:first-child td { border-top: 0; }
.regler__montant {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1rem;
  color: var(--bleu-nuit);
  text-align: right;
  white-space: nowrap;
  padding: 13px 14px 13px 0;
  border-top: 1px solid var(--gris-bord);
}
.regler__montant span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--texte-clair);
  letter-spacing: .04em;
}
/* Au-dessus du montant plutôt qu'à côté : la colonne est étroite et la
   ligne ne doit pas se casser entre la mention et le prix. */
.regler__depuis {
  display: block;
  font-family: var(--corps);
  font-size: .68rem !important;
  font-weight: 500 !important;
  color: var(--texte-clair);
  margin-bottom: 1px;
}
.regler__action {
  text-align: right;
  padding: 13px 0;
  border-top: 1px solid var(--gris-bord);
  white-space: nowrap;
}
.regler__action .bouton {
  padding: 8px 18px;
  font-size: .82rem;
  box-shadow: none;
}
.regler__mention {
  max-width: 820px;
  margin: 34px auto 0;
  padding: 18px 22px;
  background: var(--gris-fond);
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 899px) {
  .regler { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .regler__table tbody th { font-size: .88rem; }
  .regler__action .bouton { padding: 7px 13px; font-size: .78rem; }
}

/* =========================================================
   Prise de rendez-vous en trois étapes
   ========================================================= */
.rdv { max-width: 780px; margin: 0 auto; }

/* ---- Jalons de progression ---- */
/* Autant de colonnes egales que d'etapes : le nombre d'etapes a deja change
   une fois, une valeur figee laissait une colonne vide et tassait les
   reperes sur la gauche. */
.jalons {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  padding: 0;
  margin: 0 0 28px;
  counter-reset: none;
}
.jalon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 11px 4px 13px;
  border-top: 3px solid var(--gris-bord);
  font-family: var(--titre);
  font-size: .86rem;
  font-weight: 600;
  color: var(--texte-clair);
  transition: color .2s ease, border-color .2s ease;
}
.jalon span {
  flex: none;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--gris-bord);
  color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  transition: background .2s ease;
}
.jalon.est-courant { color: var(--bleu-nuit); border-top-color: var(--bleu); }
.jalon.est-courant span { background: var(--bleu); }
.jalon.est-fait { color: var(--bleu-nuit); border-top-color: var(--vert-ok, #2E9E6B); cursor: pointer; }
.jalon.est-fait span { background: var(--vert-ok, #2E9E6B); }
.jalon.est-fait:hover { color: var(--orange); }

/* ---- Étapes du formulaire de rendez-vous ----
   Toutes ces règles sont limitées au formulaire : la classe .etape sert aussi
   au parcours de la page d'accueil, qui a sa propre présentation. Sans cette
   restriction, les encadrés du parcours héritaient du fond blanc, du padding
   et surtout du margin:0 prévus ici — d'où des étapes collées les unes aux
   autres. */
.rdv__form { padding: 0; background: none; box-shadow: none; border: 0; }
.rdv__form .etape {
  /* Un fieldset ne se dimensionne pas comme un bloc ordinaire : sans
     display:block et min-width:0, ses enfants en grille prennent leur largeur
     de contenu et la mise en page se chevauche. */
  display: block;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 30px 32px 28px;
  background: var(--blanc);
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
}
.rdv__form .etape[hidden] { display: none; }
/* Un <legend> est positionné à cheval sur la bordure du fieldset, hors du
   padding : il débordait donc au-dessus de la carte. Le passer en flottant
   pleine largeur le ramène dans le flux, à l'intérieur de l'encadré. */
.rdv__form .etape__titre {
  float: left;
  width: 100%;
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--bleu-nuit);
  line-height: 1.3;
  padding: 0;
  margin: 0 0 22px;
}
.rdv__form .etape::after { content: ""; display: block; clear: both; }

/* ---- Panneau de confirmation après envoi ----
   Le conteneur .formulaire__message est masqué par défaut ; cette variante le
   rend visible et retire l'habillage de bandeau, le panneau portant le sien. */
.formulaire__message--panneau {
  display: block;
  padding: 0;
  margin-bottom: 0;
  background: none;
  border: 0;
}
.confirmation {
  padding: 34px 32px 30px;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-top: 4px solid #2E9E6B;
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
  text-align: center;
  outline: none;
}
.confirmation__coche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #E8F7EF;
  color: #2E9E6B;
}
.confirmation__titre {
  margin: 0 0 6px;
  font-family: var(--titre);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bleu-nuit);
}
.confirmation__vedette {
  margin: 0 0 20px;
  font-family: var(--titre);
  font-size: 1.05rem;
  font-weight: 700;
  color: #2E9E6B;
}
.confirmation__suite {
  list-style: none;
  max-width: 460px;
  margin: 22px auto 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--gris-bord);
  text-align: left;
}
.confirmation__suite li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--texte-clair);
}
.confirmation__suite li:last-child { margin-bottom: 0; }
.confirmation__suite li::before {
  content: "";
  position: absolute;
  left: 6px; top: .6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bleu);
}
.confirmation__suite strong { color: var(--bleu-nuit); }

@media (max-width: 560px) {
  .confirmation { padding: 28px 20px 24px; }
}

/* ---- Photos et documents joints ---- */
.facultatif {
  margin-left: 6px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-clair);
}
.champ--fichiers input[type="file"] {
  width: 100%;
  padding: 18px 16px;
  border: 2px dashed rgba(11, 187, 246, .55);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 187, 246, .08), rgba(11, 187, 246, .02));
  font-size: .9rem;
  color: var(--bleu-nuit);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.champ--fichiers input[type="file"]:hover,
.champ--fichiers input[type="file"]:focus-visible {
  border-color: var(--orange);
  background: linear-gradient(135deg, rgba(255, 138, 0, .11), rgba(255, 138, 0, .03));
  box-shadow: 0 4px 16px rgba(38, 44, 66, .08);
}
/* Le bouton interne du champ de fichier, stylable séparément. */
.champ--fichiers input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.champ--fichiers input[type="file"]:hover::file-selector-button { background: var(--orange); }
.champ__aide {
  margin: 8px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texte-clair);
}
.fichiers-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.fichiers-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  margin-bottom: 7px;
  background: rgba(11, 187, 246, .06);
  border: 1px solid rgba(11, 187, 246, .3);
  border-left: 3px solid var(--bleu);
  border-radius: 8px;
  font-size: .88rem;
}
.fichiers-liste__nom {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bleu-nuit);
}
.fichiers-liste__poids { flex: none; font-size: .8rem; color: var(--texte-clair); }
.fichiers-liste__retirer {
  flex: none;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gris-fond);
  color: var(--texte-clair);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.fichiers-liste__retirer:hover { background: #FDE4E4; color: #C0392B; }
.etape__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.etape__actions--retour { margin-top: 18px; }
.etape__actions .bouton { flex: 1 1 auto; }
.etape__actions .bouton--contour-nuit { flex: 0 0 auto; }
.etape__note {
  margin: 14px 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--texte-clair);
  text-align: center;
}

/* ---- Choix du besoin ---- */
.besoins-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.champ .besoin-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border: 2px solid var(--gris-bord);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .92rem;
  color: var(--bleu-nuit);
  transition: border-color .18s ease, background .18s ease;
}
.champ .besoin-choix input {
  width: 17px; height: 17px;
  flex: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  accent-color: var(--bleu);
}
.champ .besoin-choix:hover { border-color: var(--bleu); }
.champ .besoin-choix:has(input:checked) {
  border-color: var(--bleu);
  background: rgba(11, 187, 246, .07);
}
.format__titre em { font-style: normal; font-weight: 500; color: var(--texte-clair); }

/* ---- Récapitulatif avant le créneau ---- */
.recap {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--gris-fond);
  border-radius: 10px;
}
.recap__ligne { font-size: .89rem; color: var(--texte); line-height: 1.45; }
.recap__ligne b {
  display: inline-block;
  min-width: 108px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-clair);
}

/* ---- Agenda : le format et le calendrier ne font qu'un seul bloc ----
   Le format change la duree du rendez-vous, donc les creneaux proposes :
   les separer donnait deux ecrans pour une seule decision. */
.agenda-bloc {
  border: 1px solid var(--gris-bord);
  border-radius: 14px;
  overflow: hidden;
  background: var(--blanc);
}
.agenda__formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gris-bord);
  border-bottom: 1px solid var(--gris-bord);
}
.agenda__formats .format { display: block; margin: 0; cursor: pointer; }
/* La pastille radio est masquee : c'est la carte entiere qui porte l'etat.
   Le focus clavier reste visible grace au :focus-visible ci-dessous. */
.agenda__formats .format input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
/* L'etat coche passe par le frere direct du bouton radio, et non par un
   :has() sur le label : le fond ne se redessinait pas au changement de
   format, alors que l'ombre, elle, suivait. */
.agenda__formats .format__corps {
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 100%;
  padding: 14px 18px;
  background: var(--gris-fond);
  transition: background .18s ease;
}
.agenda__formats .format:hover .format__corps { background: var(--blanc); }
.agenda__formats input:checked + .format__corps {
  background: var(--blanc);
  box-shadow: inset 0 3px 0 var(--bleu);
}
.agenda__formats input:focus-visible + .format__corps {
  outline: 2px solid var(--bleu);
  outline-offset: -2px;
}
.agenda__formats .format__titre {
  font-weight: 700;
  color: var(--texte-clair);
  font-size: .95rem;
  line-height: 1.3;
}
.agenda__formats input:checked + .format__corps .format__titre { color: var(--bleu-nuit); }
.agenda__formats .format__detail {
  font-size: .82rem;
  color: var(--texte-clair);
  line-height: 1.35;
}
.agenda-bloc .agenda { padding: 20px 22px 22px; }
.agenda-bloc .agenda__attente,
.agenda-bloc .agenda__erreur { background: none; padding: 22px 0; }

@media (max-width: 560px) {
  .agenda__formats { grid-template-columns: 1fr; }
  .agenda-bloc .agenda { padding: 18px 14px 20px; }
}

/* ---- Agenda : choix du jour puis de l'heure ---- */
.agenda__attente, .agenda__erreur {
  margin: 0;
  padding: 26px 22px;
  background: var(--gris-fond);
  border-radius: 10px;
  text-align: center;
  font-size: .93rem;
  color: var(--texte-clair);
}
.agenda__erreur { color: var(--bleu-nuit); }
.agenda__duree {
  margin: 0 0 16px;
  font-size: .86rem;
  color: var(--texte-clair);
  text-align: center;
}

/* Bandeau des jours, defilable horizontalement */
.agenda__jours {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
  scrollbar-width: thin;
}
.agenda__jour {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 58px;
  padding: 10px 4px;
  border: 2px solid var(--gris-bord);
  border-radius: 10px;
  background: var(--blanc);
  cursor: pointer;
  font-family: var(--titre);
  transition: border-color .18s ease, background .18s ease;
}
.agenda__jour:hover { border-color: var(--bleu); }
.agenda__jour.est-actif {
  border-color: var(--bleu);
  background: var(--bleu);
}
.agenda__jour-nom {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-clair);
}
.agenda__jour-num { font-size: 1.05rem; font-weight: 800; color: var(--bleu-nuit); }
.agenda__jour.est-actif .agenda__jour-nom,
.agenda__jour.est-actif .agenda__jour-num { color: var(--blanc); }

.agenda__libelle {
  margin: 0 0 12px;
  font-family: var(--titre);
  font-weight: 700;
  font-size: .95rem;
  color: var(--bleu-nuit);
  text-transform: capitalize;
}
.agenda__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 9px;
}
.agenda__heure {
  padding: 11px 6px;
  border: 2px solid var(--gris-bord);
  border-radius: 8px;
  background: var(--blanc);
  cursor: pointer;
  font-family: var(--titre);
  font-size: .92rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.agenda__heure:hover { border-color: var(--bleu); }
.agenda__heure.est-actif {
  border-color: var(--bleu);
  background: var(--bleu);
  color: var(--blanc);
}

.agenda__coordonnees {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--gris-bord);
}
.agenda__coordonnees[hidden] { display: none; }

/* ---- Urgence, sous le parcours ---- */
.rdv__urgence {
  text-align: center;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rdv__urgence p { font-size: .9rem; color: var(--texte-clair); margin: 0; }

@media (max-width: 599px) {
  .jalons { gap: 6px; }
  .jalon { font-size: .78rem; gap: 6px; padding: 9px 2px 11px; }
  .jalon span { width: 22px; height: 22px; font-size: .72rem; }
  .rdv__form .etape { padding: 24px 20px 22px; }
  .besoins-choix { grid-template-columns: 1fr; }
  .etape__actions { flex-direction: column-reverse; }
  .etape__actions .bouton { width: 100%; }
  .recap__ligne b { display: block; min-width: 0; }
}

/* =========================================================
   Villes prioritaires : Nice, Cannes, Antibes
   ========================================================= */
.villes-prioritaires {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.ville {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: var(--ombre-carte);
  scroll-margin-top: 130px;
}
.ville__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gris-bord);
}
.ville__titre { font-size: 1.1rem; font-weight: 800; margin: 0; line-height: 1.25; }
.ville__cp {
  flex: none;
  font-family: var(--titre);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--blanc);
  background: var(--bleu);
  padding: 3px 9px;
  border-radius: 20px;
}
.ville__chapo {
  font-family: var(--chapo);
  font-weight: 300;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--bleu-texte);
  margin: 0 0 18px;
}
.ville__desordres { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 13px; }
.ville__desordres li { margin: 0; position: relative; padding-left: 20px; }
.ville__desordres li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--orange);
}
.ville__desordres strong {
  display: block;
  font-family: var(--titre);
  font-size: .88rem;
  font-weight: 700;
  color: var(--bleu-nuit);
  line-height: 1.35;
  margin-bottom: 3px;
}
.ville__desordres span {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--texte-clair);
}
.ville__quartiers {
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-bord);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--texte-clair);
}
.ville__quartiers span {
  display: block;
  font-family: var(--titre);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bleu-nuit);
  margin-bottom: 5px;
}
.ville__lien {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--bouton);
  font-weight: 500;
  font-size: .9rem;
  color: var(--bleu-nuit);
}
.ville__lien span { transition: transform var(--transition); }
.ville__lien:hover { color: var(--bleu-sombre); }
.ville__lien:hover span { transform: translateX(5px); }

@media (max-width: 1023px) {
  .villes-prioritaires { grid-template-columns: 1fr; gap: 20px; }
}