/* DTL Flight : parcours « Obtenir un devis » et page /merci.
   Refonte 03/11/2026 : DA du site (fond creme, cartes, Montserrat pour les titres, or #C19A59). HTML et JS inchanges.
   Feuille separee : la vitrine (css/styles.css) est verrouillee et n'est pas chargee ici.
   Les jetons de couleur reprennent ceux de la vitrine. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Drapeaux du selecteur de pays : Windows n'affiche pas les drapeaux emoji (il montre « FR »).
   Police Twemoji Country Flags (CC-BY 4.0), telechargee seulement quand un drapeau s'affiche. */
@font-face {
  font-family: "Drapeaux";
  src: url("/assets/fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF; font-display: swap;
}

/* Montserrat (titres), copie locale des fichiers Google Fonts, licence SIL OFL 1.1 */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("/assets/fonts/montserrat-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("/assets/fonts/montserrat-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Couleur de marque officielle (validee le 20/10/2026). */
  --dtl-accent: #C19A59;
  --or-grad: linear-gradient(135deg, #d8bb85 0%, #C19A59 50%, #a5803f 100%);
  --or: #8f6b2e;                 /* petits textes dores, lisibles sur fond clair */
  --or-filet: var(--dtl-accent);
  --or-pale: color-mix(in srgb, var(--dtl-accent) 45%, #fff);
  --fond: #f7f3ee;               /* creme du site */
  --fond-carte: #fffdfa;
  --fond-champ: #ffffff;
  --fond-doux: #efe9e1;            /* = --panel du site */
  --fond-choisi: color-mix(in srgb, var(--dtl-accent) 9%, #fffdfa);
  --noir: #141414;
  --encre: #141414;
  --gris-texte: #3d3a35;
  --gris-doux: #6f6a62;
  --bord: #e2d9cc;
  --bord-saisie: #d9cfc0;
  --nuit: #1e2023;
  --sur-nuit: #f2eee7;
  --sur-nuit-doux: #a9a49b;
  --rouge: #a8402f;
  --rouge-pale: #f3d9d4;
  --vert: #2e7044;
  --vert-bord: #6fa982;
  --vert-fond: #f6fbf7;
  --vert-pale: #d6eadc;
  --police: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --titres: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --anneau: 0 0 0 4px rgba(193, 154, 89, .25);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ombre-carte: 0 1px 0 var(--bord), 0 40px 80px -60px rgba(60, 40, 10, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.devis {
  position: relative; isolation: isolate;
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--fond); color: var(--noir);
  font-family: var(--police); font-size: 16.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Halos dores flous, comme en haut du site */
body.devis::before, body.devis::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: .55; animation: derive 20s ease-in-out infinite alternate;
}
body.devis::before {
  width: min(640px, 90vw); aspect-ratio: 1; right: -12%; top: -28%;
  background: radial-gradient(circle, rgba(193, 154, 89, .75) 0%, rgba(193, 154, 89, 0) 68%);
}
body.devis::after {
  width: min(480px, 80vw); aspect-ratio: 1; left: -14%; bottom: -26%;
  background: radial-gradient(circle, rgba(216, 187, 133, .7) 0%, rgba(216, 187, 133, 0) 68%);
  animation-duration: 26s; animation-delay: -8s;
}
@keyframes derive {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.07); }
  100% { transform: translate(4%, -3%) scale(.96); }
}
h1, h2, p, ol, ul, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dtl-accent); outline-offset: 3px; }

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- En-tete : logo a gauche, appel a droite (comme la barre du site) ---------- */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 68px; padding: 0 max(20px, calc((100% - 980px) / 2));
  background: rgba(247, 243, 238, .8);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
.entete__equilibre { display: none; }
.entete__logo { display: inline-block; border-radius: 6px; }
.entete__logo img { width: auto; height: 40px; }
.entete__appel { display: flex; align-items: center; gap: 14px; }
.entete__question { font-size: 14px; color: var(--gris-doux); white-space: nowrap; }
.bouton-appel {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px;
  border: 1.5px solid var(--noir); border-radius: 12px; background: var(--fond-carte);
  font-size: 14px; font-weight: 600; color: var(--noir); text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.bouton-appel:hover { background: var(--noir); color: var(--fond); }
.bouton-appel:active { transform: scale(.98); }
.bouton-appel svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Progression : 3 segments egaux, alignes sur la carte ---------- */
.parcours {
  max-width: 1020px; margin: 0 auto;
  padding: 30px max(20px, env(safe-area-inset-right, 0px)) 80px max(20px, env(safe-area-inset-left, 0px));
}
.progression { margin: 0 0 18px; animation: monte .8s .08s var(--ease) both; }
.progression__piste { display: none; }   /* remplacee par les segments ci-dessous */
.progression__etapes {
  counter-reset: etape;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  font: 600 13px/16px var(--titres); letter-spacing: .28em; text-transform: uppercase;
  color: #a39c90;
}
.progression__etapes li {
  counter-increment: etape;
  position: relative; padding-top: 14px; min-width: 0;
  transition: color .4s;
}
.progression__etapes li {             /* segment gris */
  background: linear-gradient(var(--bord), var(--bord)) left top / 100% 3px no-repeat; border-radius: 3px;
}
.progression__etapes li::before {      /* numero */
  content: counter(etape, decimal-leading-zero); margin-right: 10px; font-style: italic; font-weight: 800; letter-spacing: .04em;
}
.progression__etapes li::after {       /* remplissage dore */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px;
  background: var(--or-grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.progression__etapes li { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progression__etapes li[aria-current="step"], .progression__etapes li.fait { color: var(--noir); }
.progression__etapes li.fait { color: var(--or); }
.progression__etapes li[aria-current="step"]::after, .progression__etapes li.fait::after { transform: scaleX(1); }
.progression__etapes li[aria-current="step"]::before, .progression__etapes li.fait::before { color: var(--or); }
.progression__etapes li::marker { content: none; }

/* ---------- Etapes : une carte blanche, comme les blocs du site ---------- */
.etape {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--fond-carte); border-radius: 30px; box-shadow: var(--ombre-carte);
  padding: clamp(30px, 4.4vw, 64px);
  animation: monte .9s .12s var(--ease) both;
}
.etape::before {
  content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -170px; top: -250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 154, 89, .22) 0%, rgba(193, 154, 89, 0) 68%); filter: blur(24px);
}
@keyframes monte { from { opacity: 0; transform: translateY(22px); } }

.etape__tete { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; margin-bottom: 30px; }
.etape__tete::before {
  content: ""; flex: none; width: 3px; height: 30px; border-radius: 2px;
  background: var(--or-grad); transform: skewX(-22deg);
}
.etape__tete:has(.retour)::before { display: none; }
.etape__titre {
  font: 800 clamp(28px, 3.4vw, 46px)/1.05 var(--titres); letter-spacing: -.02em;
  color: var(--noir); outline: none; text-wrap: balance;
}
.retour {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--bord); border-radius: 50%;
  background: var(--fond-champ); color: var(--noir);
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.retour:hover { border-color: var(--dtl-accent); transform: translateX(-2px); }
.retour svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Etape 1 : cartes de prestations ---------- */
.prestations__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.carte-choix { position: relative; display: block; cursor: pointer; }
.carte-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.carte-choix__corps {
  display: block; height: 100%; min-height: 136px; padding: 22px 48px 22px 22px;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 20px;
  transition: border-color .3s, background-color .3s, box-shadow .3s, transform .35s var(--ease);
}
.carte-choix:hover .carte-choix__corps { border-color: var(--or-pale); transform: translateY(-3px); box-shadow: 0 20px 36px -26px rgba(60, 40, 10, .45); }
.carte-choix__titre { display: block; font: 700 17px/1.25 var(--titres); letter-spacing: -.01em; color: var(--noir); }
.carte-choix__texte { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--gris-texte); }
.carte-choix__coche {
  position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--bord-saisie); background: var(--fond-champ);
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.carte-choix__coche::after {
  content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(40deg) scale(0); transition: transform .3s var(--ease);
}
.carte-choix input:checked + .carte-choix__corps {
  border-color: var(--or-filet); box-shadow: inset 0 0 0 1px var(--or-filet); background: var(--fond-choisi);
}
.carte-choix input:checked ~ .carte-choix__coche { border-color: transparent; background: var(--or-grad); transform: scale(1.05); }
.carte-choix input:checked ~ .carte-choix__coche::after { transform: rotate(40deg) scale(1); }
.carte-choix input:focus-visible + .carte-choix__corps { box-shadow: var(--anneau); border-color: var(--dtl-accent); }

.message-limite { min-height: 22px; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--gris-doux); }

/* ---------- Champs ---------- */
.champ { margin-top: 28px; }
.champ--autre { margin-top: 10px; }
.champ__ligne-label { display: flex; align-items: baseline; gap: 10px; height: 22px; }
legend.champ__ligne-label { width: 100%; padding: 0; }
.champ__label { display: block; font: 700 15px/22px var(--titres); letter-spacing: -.005em; color: var(--noir); }
.champ__facultatif { font-size: 13px; line-height: 22px; font-weight: 400; color: var(--gris-doux); }
.requis { color: var(--dtl-accent); font-weight: 700; }
.champ__saisie {
  display: block; width: 100%; height: 52px; margin-top: 8px; padding: 0 16px;
  background: var(--fond-champ); border: 1px solid var(--bord-saisie); border-radius: 14px;
  font-size: 16px; color: var(--noir);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.champ__saisie::placeholder { color: #a39c90; }
.champ__saisie:hover { border-color: #c9bca8; }
.champ__saisie:focus { outline: none; border-color: var(--dtl-accent); box-shadow: var(--anneau); }
.champ__saisie--zone { height: auto; min-height: 116px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.champ__saisie[aria-invalid="true"] { border-color: #d29a91; background: #fffaf9; }
.champ__saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--rouge-pale); }
.champ__saisie.champ__saisie--correct { border-color: var(--vert-bord); background: var(--vert-fond); }
.champ__saisie.champ__saisie--correct:focus { box-shadow: 0 0 0 4px var(--vert-pale); }
.champ__aide, .champ__erreur, .champ__ok, .suggestion, .compteur { min-height: 0; margin-top: 7px; font-size: 13.5px; line-height: 19px; }
.champ__aide { color: var(--gris-doux); }
.champ__aide:empty, .champ__erreur:empty, .champ__ok:empty, .suggestion:empty, .compteur:empty { display: none; }
.champ__ok { color: var(--vert); }
.champ__ok::before {
  content: ""; display: inline-block; width: 5px; height: 9px; margin: 0 10px 0 3px;
  border: solid var(--vert); border-width: 0 2px 2px 0; transform: rotate(40deg) translateY(-2px);
}
.champ__erreur, .champ__aide--erreur { color: var(--rouge); }
.compteur { text-align: right; color: #a39c90; }
.compteur.proche { color: var(--or); }
.suggestion { color: var(--gris-texte); }
.suggestion button { padding: 0; border: 0; background: none; color: var(--or); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ville (liste de suggestions) ---------- */
.combobox { position: relative; }
.combobox__repere {
  position: absolute; right: 16px; top: 8px; height: 52px; display: flex; align-items: center;
  font-size: 13.5px; color: var(--gris-doux); pointer-events: none;
}
.combobox__repere.valide::before {
  content: ""; display: inline-block; width: 5px; height: 9px; margin-right: 10px;
  border: solid var(--or); border-width: 0 2px 2px 0; transform: rotate(40deg) translateY(-2px);
}
.combobox__liste {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px);
  max-height: 352px; overflow-y: auto; padding: 6px;
  background: var(--fond-carte); border: 1px solid var(--bord); border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(40, 28, 8, .35);
  animation: deroule .25s var(--ease) both;
}
@keyframes deroule { from { opacity: 0; transform: translateY(-6px); } }
.combobox__option { display: block; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.combobox__option[aria-selected="true"], .combobox__option:hover { background: var(--fond-doux); }
.combobox__nom { display: block; font-size: 15.5px; line-height: 21px; font-weight: 600; color: var(--noir); }
.combobox__lieu { display: block; font-size: 13px; line-height: 18px; color: var(--gris-doux); }
.combobox__vide { padding: 10px 12px; font-size: 14px; color: var(--gris-doux); }

/* ---------- Date ---------- */
.lien-ajout {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; padding: 0 2px;
  border: 0; background: none; font-size: 15px; font-weight: 700; color: var(--or);
}
.lien-ajout span {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--dtl-accent); font-size: 17px; line-height: 1; font-weight: 500;
  transition: background .25s, color .25s;
}
.lien-ajout:hover span { background: var(--or-grad); border-color: transparent; color: #fff; }
.bloc-date { margin-top: 12px; animation: monte .45s var(--ease) both; }
.segments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segment { position: relative; display: inline-block; cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--bord-saisie); border-radius: 22px; background: var(--fond-champ);
  font-size: 14.5px; font-weight: 600; color: var(--noir); transition: border-color .25s, background-color .25s;
}
.segment input:checked + span { border-color: var(--or-filet); background: var(--fond-choisi); box-shadow: inset 0 0 0 1px var(--or-filet); }
.segment input:focus-visible + span { box-shadow: var(--anneau); }
.champ__aide--valide { color: var(--noir); }
.champ__aide--valide::before {
  content: ""; display: inline-block; width: 5px; height: 9px; margin: 0 10px 0 3px;
  border: solid var(--or); border-width: 0 2px 2px 0; transform: rotate(40deg) translateY(-2px);
}
.lien-discret {
  min-height: 44px; margin-left: auto; padding: 0 4px; border: 0; background: none;
  font-size: 13.5px; color: var(--gris-doux); text-decoration: underline; text-underline-offset: 3px;
}
.date-choisie { margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--noir); }
.date-choisie:empty { display: none; }
.champ--periode { margin-top: 6px; }

.calendrier {
  width: 100%; max-width: 380px; margin-top: 14px; padding: 16px;
  border: 1px solid var(--bord); border-radius: 18px; background: var(--fond-champ);
}
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendrier__mois { font: 700 15px var(--titres); color: var(--noir); text-transform: capitalize; }
.calendrier__nav {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--noir);
  display: inline-flex; align-items: center; justify-content: center;
}
.calendrier__nav:hover:not(:disabled) { background: var(--fond-doux); }
.calendrier__nav:disabled { opacity: .3; cursor: default; }
.calendrier__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calendrier table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier th { padding: 4px 0 6px; font-size: 12px; font-weight: 600; color: var(--gris-doux); text-align: center; }
.calendrier td { padding: 1px; text-align: center; }
.calendrier__jour {
  width: 100%; aspect-ratio: 1; max-height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: none; font-size: 14px; color: var(--noir); transition: background .2s;
}
.calendrier__jour:hover:not(:disabled) { background: var(--fond-doux); }
.calendrier__jour:disabled { color: #c9c3b8; cursor: default; }
.calendrier__jour.aujourdhui { font-weight: 800; }
.calendrier__jour[aria-pressed="true"] { background: var(--or-grad); color: #fff; font-weight: 700; }

/* ---------- Rendu ---------- */
.choix-rendu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.puce { position: relative; display: block; cursor: pointer; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce > span {
  position: relative; display: block; height: 100%; padding: 14px 16px 14px 46px;
  border: 1px solid var(--bord-saisie); border-radius: 16px; background: var(--fond-champ);
  transition: border-color .25s, background-color .25s;
}
.puce:hover > span { border-color: var(--or-pale); }
.puce__titre { display: block; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--noir); }
.puce__texte { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--gris-doux); }
.puce > span::before {
  content: ""; position: absolute; left: 16px; top: 16px;
  width: 18px; height: 18px; border: 1.5px solid #c4b9a7; border-radius: 6px; box-sizing: border-box; transition: background .25s, border-color .25s;
}
.puce input:checked + span { border-color: var(--or-filet); background: var(--fond-choisi); box-shadow: inset 0 0 0 1px var(--or-filet); }
.puce input:checked + span::before {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat, var(--or-grad);
}
.puce input:focus-visible + span { box-shadow: var(--anneau); }

/* ---------- Etape 2 et 3 : colonnes ---------- */
.coordonnees {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 24px; align-items: start;
}
.coordonnees .champ { margin-top: 0; }
.champ--ville { margin-top: 0; }
.etape[data-etape="2"] > .champ, .etape[data-etape="2"] > fieldset { max-width: 620px; }
.telephone { display: flex; gap: 8px; margin-top: 8px; }
.telephone .champ__saisie { margin-top: 0; flex: 1; min-width: 0; }
.telephone__pays { position: relative; flex: none; width: 112px; height: 52px; }
.telephone__affiche {
  display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 30px 0 14px;
  border: 1px solid var(--bord-saisie); border-radius: 14px; background: var(--fond-champ);
  font-size: 15.5px; white-space: nowrap;
}
.telephone__affiche::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border: solid var(--gris-doux); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.drapeau { font-family: "Drapeaux", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 18px; line-height: 1; }
.telephone__pays select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.telephone__pays select:focus-visible + .telephone__affiche,
.telephone__pays:focus-within .telephone__affiche { border-color: var(--dtl-accent); box-shadow: var(--anneau); }

.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Boutons (style du site) ---------- */
.etape__actions {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--bord);
}
.bouton-principal {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 240px; height: 56px; padding: 0 30px; border: 0; border-radius: 14px;
  background: var(--or-grad); color: #fff;
  font: 600 16.5px/1 var(--police); letter-spacing: -.005em;
  box-shadow: 0 10px 24px -12px rgba(156, 109, 47, .75);
  transition: transform .25s var(--ease), box-shadow .25s, filter .25s;
}
.bouton-principal::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-18deg); animation: reflet 5s 1.5s ease-in-out infinite;
}
@keyframes reflet { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.bouton-principal:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(156, 109, 47, .8); }
.bouton-principal:active { transform: scale(.98); }
.bouton-principal__texte { transition: opacity .2s ease; }
.bouton-principal[aria-disabled="true"] {
  background: #ebe4d8; color: #9a9389; box-shadow: none; cursor: not-allowed; transform: none;
}
.bouton-principal[aria-disabled="true"]::after { display: none; }
.bouton-principal[aria-busy="true"] { cursor: progress; }
.bouton-principal[aria-busy="true"] .bouton-principal__texte::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 12px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: tourne .8s linear infinite, apparait .2s ease;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes apparait { from { opacity: 0; } }

.erreur-envoi {
  max-width: 620px; margin-top: 16px; padding: 14px 18px; border-radius: 14px;
  background: #fbf1ef; border: 1px solid var(--rouge-pale); color: #6b2a22;
  font-size: 14.5px; line-height: 21px;
}
.erreur-envoi a { font-weight: 700; color: inherit; white-space: nowrap; }
.mention { max-width: 560px; margin-top: 18px; font-size: 13px; line-height: 19px; color: var(--gris-doux); }
.mention__lien { display: inline-block; color: var(--gris-texte); text-underline-offset: 3px; }
.sans-js { max-width: 560px; margin: 0 auto 30px; text-align: center; color: var(--gris-texte); }

/* ---------- Page /merci : carte sombre, comme « Un projet ? » sur le site ---------- */
.merci {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 980px; margin: 34px auto 80px;
  padding: clamp(44px, 6.5vw, 96px) clamp(28px, 5vw, 80px);
  border-radius: 34px; color: var(--sur-nuit);
  background: linear-gradient(90deg, transparent, #e6c992 30%, var(--dtl-accent) 60%, transparent) left top / 0% 2px no-repeat, var(--nuit);
  box-shadow: 0 50px 100px -50px rgba(20, 14, 4, .65);
  animation: monte .9s .1s var(--ease) both, filet 1.6s .5s var(--ease) forwards;
}
@keyframes filet { to { background-size: 100% 2px, auto; } }
.merci::before, .merci::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.merci::before { width: 520px; height: 520px; right: -150px; top: -240px; background: radial-gradient(circle, rgba(193, 154, 89, .5) 0%, rgba(193, 154, 89, 0) 66%); animation: derive 22s ease-in-out infinite alternate; }
.merci::after { width: 420px; height: 420px; left: -170px; bottom: -250px; background: radial-gradient(circle, rgba(216, 187, 133, .3) 0%, rgba(216, 187, 133, 0) 66%); animation: derive 26s -8s ease-in-out infinite alternate; }
.merci__coche {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 30px;
  border-radius: 50%; background: var(--or-grad); color: #fff;
  box-shadow: 0 0 0 10px rgba(193, 154, 89, .14);
  animation: pop .7s .35s var(--ease) both;
}
.merci__coche svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.merci__coche path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: trace .6s .75s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
.merci__titre {
  font: 800 clamp(34px, 6.4vw, 84px)/.95 var(--titres); letter-spacing: -.035em; max-width: 14ch; text-wrap: balance;
  animation: monte .8s .5s var(--ease) both;
}
.merci__texte {
  max-width: 42ch; margin-top: 22px; font-size: clamp(17px, 1.7vw, 19px); line-height: 1.55; color: var(--sur-nuit-doux);
  animation: monte .8s .62s var(--ease) both;
}
.merci__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 30px;
  border-top: 1px solid rgba(242, 238, 231, .14);
  animation: monte .8s .74s var(--ease) both;
}
.merci__reference { margin-top: 26px; font-size: 13px; color: var(--sur-nuit-doux); letter-spacing: .04em; }
.bouton-contour {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 220px; height: 56px; padding: 0 26px; border: 1.5px solid rgba(242, 238, 231, .35); border-radius: 14px;
  font-size: 16.5px; font-weight: 600; color: var(--sur-nuit); text-decoration: none;
  transition: background-color .25s, color .25s;
}
.bouton-contour:hover { background: var(--sur-nuit); color: var(--nuit); }
.bouton-contour svg, .bouton-principal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.bouton-principal { text-decoration: none; }
main.merci { width: calc(100% - 40px); margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .merci__coche path { stroke-dashoffset: 0; }
}

/* ---------- Tablette ---------- */
@media (max-width: 860px) {
  .prestations__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Telephone ---------- */
@media (max-width: 600px) {
  .entete { height: 60px; }
  .entete__logo img { height: 34px; }
  .entete__question { display: none; }
  .parcours { padding-top: 22px; padding-bottom: 48px; }
  .progression { margin-bottom: 14px; }
  .progression__etapes { font-size: 0; letter-spacing: .12em; gap: 6px; }
  .progression__etapes li::before { font-size: 11px; margin-right: 8px; }
  .progression__etapes { display: flex; }
  .progression__etapes li { flex: 1 1 0; transition: flex-grow .5s var(--ease), color .4s; }
  .progression__etapes li[aria-current="step"] { font-size: 11px; flex-grow: 2.6; }
  .etape { border-radius: 24px; padding: 24px 18px 26px; }
  .etape__tete { margin-bottom: 22px; }
  .prestations__grille { grid-template-columns: 1fr; gap: 10px; }
  .coordonnees { grid-template-columns: 1fr; row-gap: 20px; }
  .choix-rendu { grid-template-columns: 1fr; }
  .carte-choix__corps { min-height: 0; padding: 16px 48px 16px 16px; border-radius: 16px; }
  .carte-choix__texte { margin-top: 4px; font-size: 13.5px; }
  .etape__actions { margin-top: 28px; padding-top: 22px; align-items: stretch; }
  .bouton-principal, .bouton-contour { width: 100%; }
  .telephone__pays { width: 104px; }
  .calendrier { max-width: none; }
  main.merci { width: calc(100% - 32px); margin-top: 24px; border-radius: 26px; }
}

/* ---------- /merci : validation (05/11/2026) ----------
   Rond dore qui se trace, puis la coche, puis une onde qui s'efface. Aligne sur le texte, sans halo decale.
   Boutons de la carte : pilules mates comme le bloc « Un projet ? » du site. */
.merci__coche {
  position: relative; display: block; width: 72px; height: 72px; margin: 0 0 34px;
  border-radius: 50%; background: none; box-shadow: none; color: var(--dtl-accent, #C19A59);
  animation: none;
}
.merci__coche::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: rgba(193, 154, 89, .12); opacity: 0; animation: fond-coche .6s 1.05s var(--ease) forwards; }
.merci__coche::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid rgba(193, 154, 89, .55); opacity: 0; animation: onde 1.4s 1.5s cubic-bezier(.2, .6, .2, 1) forwards; }
.merci__coche svg { position: relative; width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }
.merci__coche .merci__rond { stroke-width: 2; stroke-dasharray: 189; stroke-dashoffset: 189; animation: trace .9s .3s cubic-bezier(.65, 0, .35, 1) forwards; }
.merci__coche .merci__trait { stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; transform: rotate(90deg); transform-origin: 32px 32px; animation: trace .45s 1.05s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes fond-coche { to { opacity: 1; } }
@keyframes onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }

.merci .bouton-contour, .merci .bouton-principal {
  min-width: 0; height: 52px; padding: 0 26px; border-radius: 26px; gap: 10px;
  font-size: 15.5px; font-weight: 600; box-shadow: none; transform: none;
}
.merci .bouton-contour { background: rgba(242, 238, 231, .08); border: 1.5px solid rgba(242, 238, 231, .85); color: var(--sur-nuit); }
.merci .bouton-contour:hover { background: var(--sur-nuit); color: var(--nuit); }
.merci .bouton-principal { background: #C19A59; border: 0; color: #141414; }
.merci .bouton-principal:hover { background: #cba76a; }
.merci .bouton-principal:active { background: #b38c4c; }
.merci .bouton-principal svg { width: 18px; height: 18px; }
.merci__reference { overflow-wrap: normal; }

@media (prefers-reduced-motion: reduce) {
  .merci__coche .merci__rond, .merci__coche .merci__trait { stroke-dashoffset: 0; }
  .merci__coche::before { opacity: 1; }
  .merci__coche::after { display: none; }
}
@media (max-width: 600px) {
  .merci__coche { width: 60px; height: 60px; margin-bottom: 26px; }
  .merci__coche svg { width: 60px; height: 60px; }
  .merci .bouton-contour, .merci .bouton-principal { width: 100%; }
  .merci__reference { font-size: 12.5px; letter-spacing: .01em; }
}
.merci .bouton-principal::after { display: none; }
.merci .bouton-principal:hover, .merci .bouton-principal:active { transform: none; box-shadow: none; }

/* Lien d'evitement (05/11/2026) : invisible tant qu'il n'a pas le focus clavier ; meme style que les pages annexes */
.lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--encre); color: var(--fond); text-decoration: none; }
.lien-evitement:focus { top: 12px; }
#parcours { scroll-margin-top: 90px; }
#parcours:focus { outline: none; }