.demande-parcours {
  --encre: #102a37;
  --ocre: #925015;
  --or: #f2a319;
  --sable: #fbefd7;
  --papier: #faf6ec;
  --filet: #d5d8d2;
  --discret: #4e616a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --marge: clamp(24px, 4vw, 56px);
  display: grid;
  grid-template: 'head map' auto 'main map' 1fr 'foot map' auto / minmax(0, 1fr) clamp(280px, 37.5vw, 565px);
  min-height: 100dvh;
  color: var(--encre);
  background: #fff;
  font: 400 14px/1.45 Poppins, system-ui, sans-serif;
}
:where(.demande-parcours button, .demande-parcours input, .demande-parcours select, .demande-parcours textarea) { font: inherit; color: inherit; }
.demande-parcours, .demande-parcours * { box-sizing: border-box; }
.demande-parcours :where(button, summary) { cursor: pointer; }
.demande-parcours :where(p, h1, h2, ol, ul) { margin: 0; }
.demande-parcours :where(button, summary, a, input, select, textarea):focus-visible { outline: 2px solid #a66d36; outline-offset: 3px; }
.demande-parcours h1:focus { outline: none; }
.demande-entete {
  grid-area: head;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 12px var(--marge);
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  border-bottom: 1px solid var(--filet);
  background: white;
}
.demande-logo { display: inline-flex; align-items: center; }
.demande-logo img { width: 108px; height: auto; filter: brightness(0); }
.demande-indicateur { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; max-width: 410px; }
.demande-progression { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.demande-progression i { height: 4px; background: #e1dcd2; }
.demande-progression .est-rempli { background: var(--or); }
.demande-prog-desktop { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.demande-prog-mobile, .demande-projet-mobile, .demande-retour-entete { display: none; }
.demande-garder, .demande-secondaire { background: transparent; border: 1px solid var(--filet); padding: 9px 12px; min-height: 44px; font-size: 12px; font-weight: 600; }
.demande-corps { grid-area: main; min-width: 0; width: 100%; max-width: 990px; padding: 36px var(--marge) 42px; display: flex; flex-direction: column; gap: 18px; }
.demande-intro { display: grid; gap: 9px; }
.demande-surtitre { color: var(--ocre); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.demande-intro h1 { font: 700 clamp(39px, 4vw, 58px)/.97 var(--serif); letter-spacing: -.025em; }
.demande-intro p { color: var(--discret); max-width: 65ch; }
.demande-intro p:empty { display: none; }
.demande-picto { display: none; }
.demande-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demande-carte-choix, .demande-voyageur {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  overflow: hidden;
}
.demande-image-choix { position: relative; display: block; flex: none; width: 100%; aspect-ratio: 1.65; background: #e9e3d3; }
.demande-image-choix img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.demande-carte-texte { display: grid; align-content: center; flex: 1; gap: 3px; padding: 8px 10px 10px; width: 100%; }
.demande-carte-texte strong { font: 700 clamp(20px, 2vw, 26px)/1 var(--serif); }
.demande-carte-texte small { font-size: 11px; color: var(--discret); }
.demande-galerie-envies .demande-carte-texte { text-align: center; min-height: 48px; }
.demande-galerie-envies .demande-carte-texte strong { font: 600 13px/1.2 Poppins, system-ui, sans-serif; }
.demande-galerie-envies .demande-image-choix { aspect-ratio: 1.9; }
.demande-coche { position: absolute; inset: 7px 7px auto auto; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #fff; border-radius: 50%; background: var(--or); color: var(--encre); font-weight: 700; opacity: 0; }
.demande-carte-choix[aria-pressed="true"], .demande-voyageur[aria-checked="true"] { border-color: #bb6d11; background: var(--sable); box-shadow: inset 0 0 0 1px #bb6d11; }
.demande-carte-choix[aria-pressed="true"] .demande-coche, .demande-voyageur[aria-checked="true"] .demande-coche { opacity: 1; }
.demande-carte-choix[aria-disabled="true"] { opacity: .54; cursor: default; }
.demande-contexte { display: flex; align-items: start; gap: 9px; padding: 9px 11px; border: 1px solid #d8ccb6; border-radius: 7px; background: #fff9ed; font-size: 12px; }
.demande-contexte svg { flex: none; color: var(--ocre); }
.demande-incertain { align-self: start; min-height: 40px; padding: 5px 0; color: var(--ocre); border: 0; background: transparent; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.demande-incertain[aria-pressed="true"] { text-decoration-thickness: 2px; }
.demande-groupe-territoires { margin-bottom: 12px; }
.demande-groupe-territoires h2 { margin: 4px 0 8px; font-size: 15px; }
.demande-option { min-width: 0; min-height: 44px; padding: 7px 8px; border: 1px solid #c8ccc4; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 500; }
.demande-option[aria-checked="true"], .demande-option[aria-pressed="true"] { border-color: #ad671d; background: #f5d69a; color: #402100; font-weight: 600; }
.demande-onglets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.demande-onglets .demande-option { min-height: 48px; }
.demande-mois { display: grid; gap: 12px; }
.demande-annee { margin: 0 0 5px; color: var(--discret); font-size: 11px; font-weight: 600; }
.demande-calendrier, .demande-durees { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.demande-calendrier .demande-option { position: relative; overflow-wrap: anywhere; }
.demande-calendrier i { position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 4px; right: 4px; }
.demande-groupe { border-top: 1px solid var(--filet); padding-top: 14px; display: grid; gap: 10px; }
.demande-groupe h2, .demande-fil h2, .demande-recap h2, .demande-projet-panneau h2 { font: 700 29px/1 var(--serif); }
.demande-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.demande-voyageurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.demande-voyageur { align-items: center; justify-content: center; gap: 8px; min-height: 117px; text-align: center; padding: 10px 4px; }
.demande-voyageur[aria-checked="true"] svg { color: var(--ocre); }
.demande-compteurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.demande-compteur { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 0; border-top: 1px solid var(--filet); }
.demande-compteur small, .demande-note small { display: block; color: var(--discret); font-size: 11px; }
.demande-compteur-boutons { display: grid; grid-template-columns: 42px 42px 42px; align-items: center; text-align: center; border: 1px solid #c8ccc4; border-radius: 7px; overflow: hidden; }
.demande-compteur-boutons button { min-height: 44px; border: 0; background: transparent; font-size: 20px; }
.demande-compteur-boutons button[aria-disabled="true"] { opacity: .35; cursor: default; }
.demande-compteur-boutons output { line-height: 44px; font-weight: 600; border-inline: 1px solid var(--filet); }
.demande-confort-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.demande-confort-options .demande-option { display: flex; align-items: center; gap: 8px; text-align: left; }
.demande-radio { flex: none; width: 16px; height: 16px; border: 1px solid #797469; border-radius: 50%; }
.demande-option[aria-checked="true"] .demande-radio { background: #a65c14; box-shadow: inset 0 0 0 3px #fbefd7; border-color: #a65c14; }
.demande-note { display: grid; gap: 7px; }
.demande-note textarea, .demande-champs :where(input, select) { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid #c8ccc4; border-radius: 6px; background: #fff; }
.demande-note textarea { resize: vertical; min-height: 92px; }
.demande-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.demande-champs label, .demande-canal { display: grid; align-content: start; gap: 5px; font-size: 13px; font-weight: 600; }
.demande-champs label small { font-weight: 400; font-size: 12px; }
.demande-champs :where(input, select) { min-height: 44px; font-weight: 400; }
.demande-coordonnees { display: grid; gap: 15px; padding: 0; margin: 0; border: 0; min-width: 0; }
.demande-case { display: flex; align-items: start; gap: 9px; min-height: 44px; padding: 7px 0; border: 0; background: transparent; text-align: left; font-size: 12px; }
.demande-case span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: transparent; border: 1px solid #797469; border-radius: 4px; }
.demande-case[aria-checked="true"] span { background: var(--or); border-color: #ad671d; color: var(--encre); font-weight: 700; }
/* Le récapitulatif peut déborder sans faire varier la largeur de la carte. */
.demande-apercu { grid-area: map; position: sticky; top: 0; height: 100dvh; align-self: start; overflow: auto; scrollbar-gutter: stable; padding: clamp(16px, 2vw, 30px); border-left: 1px solid var(--filet); background: #f5f5f0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.demande-mini-carte { position: relative; overflow: hidden; aspect-ratio: 1; flex: none; border: 1px solid var(--filet); background: #eef0ed; }
.demande-mini-carte > svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.demande-contour-pays { fill: #f7f1e4; stroke: #8b9b9a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.demande-mini-label { position: absolute; z-index: 1; left: 12px; top: 10px; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; }
.demande-mini-point, .demande-mini-repere { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.demande-mini-point { width: 7px; height: 7px; background: #fff; border: 1px solid #697b80; }
.demande-mini-repere { display: grid; place-items: center; width: 16px; height: 16px; background: var(--or); border: 1px solid var(--encre); font-size: 9px; font-weight: 600; font-style: normal; }
.demande-mini-zone, .demande-mini-nom { position: absolute; font-size: 11px; font-weight: 600; }
.demande-mini-zone { transform: translate(-50%, -50%); }
.demande-renvois { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; font-size: 11px; }
.demande-recap-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 9px; }
.demande-recap-entete > span { color: var(--ocre); font-size: 11px; font-weight: 600; white-space: nowrap; }
.demande-recap-liste { list-style: none; padding: 0; border-top: 1px solid var(--filet); }
.demande-recap-liste li { display: grid; grid-template-columns: minmax(65px, .7fr) minmax(0, 1.6fr) auto; align-items: baseline; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.demande-recap-liste small { color: var(--discret); font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: .06em; }
.demande-recap-liste strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.demande-recap-liste button, .demande-lien { background: transparent; border: 0; color: var(--ocre); font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 3px 0; }
.demande-fil { border-top: 1px solid var(--filet); padding-top: 15px; }
.demande-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; }
.demande-fil li { flex: 1 0 95px; position: relative; }
.demande-fil li + li::before { position: absolute; content: ''; height: 1px; background: #c9b590; left: 0; right: 50%; top: 15px; }
.demande-fil li:not(:last-child)::after { position: absolute; content: ''; height: 1px; background: #c9b590; left: 50%; right: -8px; top: 15px; pointer-events: none; }
.demande-fil button { position: relative; z-index: 1; display: grid; gap: 6px; width: 100%; justify-items: center; background: transparent; border: 0; text-align: center; font-size: 12px; font-weight: 600; }
.demande-fil .demande-numero { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: #96561b; }
.demande-footer { grid-area: foot; position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: end; gap: 9px; padding: 12px var(--marge); border-top: 1px solid var(--filet); background: #fff; }
.demande-aide { color: var(--discret); font-size: 12px; }
.demande-footer .demande-aide { margin-right: auto; max-width: 48ch; }
.demande-primaire { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 9px 16px; background: #102e3c; border: 1px solid #102e3c; border-radius: 5px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }
.demande-primaire[aria-disabled="true"] { background: #e5e7e3; color: #536168; border-color: #d6dbd7; cursor: default; }
.demande-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 25; width: max-content; max-width: calc(100% - 32px); padding: 11px 14px; background: #102e3c; color: #fff; border-radius: 6px; font-size: 12px; }
.demande-confirmation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
[data-ecran="confirmation"] .demande-corps { align-self: center; text-align: center; }
[data-ecran="confirmation"] .demande-intro { justify-items: center; }
[data-ecran="confirmation"] .demande-picto { display: block; width: 55px; height: 55px; padding: 9px; color: var(--ocre); border: 1px solid #a66d36; border-radius: 50%; }
[data-ecran="confirmation"] .demande-entete { grid-template-columns: auto minmax(0, 1fr); }
.demande-parcours .demande-atlas .atlas-local { box-shadow: none; }

@media (min-width: 760px) {
  .demande-parcours[data-ecran="coordonnees"] .demande-atlas-etapes { display: none; }
}
@media (max-width: 1080px) and (min-width: 760px) {
  .demande-calendrier, .demande-durees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demande-compteurs, .demande-confort-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .demande-parcours { --marge: clamp(15px, 4.6vw, 24px); grid-template: 'head' auto 'main' 1fr 'foot' auto / minmax(0, 1fr); background: var(--papier); }
  .demande-parcours:is([data-ecran="recapitulatif"], [data-ecran="confirmation"]) { grid-template: 'head' auto 'main' auto 'map' 1fr 'foot' auto / minmax(0, 1fr); }
  .demande-entete, [data-ecran="confirmation"] .demande-entete { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'back logo project' 'progress progress progress'; gap: 6px 9px; padding: 8px var(--marge); background: var(--papier); }
  .demande-logo { grid-area: logo; justify-self: start; }
  .demande-logo img { width: 91px; }
  .demande-retour-entete { grid-area: back; display: grid; place-items: center; width: 36px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; text-decoration: none; font: 400 32px/1 system-ui; }
  .demande-garder, .demande-prog-desktop, .demande-retour-pied { display: none; }
  .demande-projet-mobile { display: block; grid-area: project; }
  .demande-projet-mobile summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 8px; border: 1px solid #b7b1a3; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .demande-projet-mobile summary::-webkit-details-marker { display: none; }
  .demande-projet-mobile summary svg { color: var(--ocre); }
  .demande-projet-panneau { position: absolute; inset: 54px var(--marge) auto; z-index: 2; padding: 14px; max-height: 70dvh; overflow: auto; border: 1px solid #b7b1a3; border-radius: 10px; background: var(--papier); box-shadow: 0 10px 30px #0f1c2426; }
  .demande-projet-panneau h2 { margin-bottom: 10px; }
  .demande-projet-panneau .demande-secondaire { margin-top: 10px; }
  .demande-indicateur { grid-area: progress; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; max-width: none; }
  .demande-prog-mobile { display: inline; font-size: 12px; font-weight: 600; }
  .demande-progression i { border-radius: 20px; height: 6px; background: #dfd6c7; }
  .demande-progression .est-rempli { background: var(--or); }
  .demande-corps { padding: 18px var(--marge) 22px; gap: 14px; }
  .demande-intro { gap: 7px; }
  .demande-intro h1 { font-size: clamp(33px, 9vw, 46px); }
  .demande-intro p { font-size: 13px; }
  .demande-surtitre { display: none; }
  [data-ecran="recapitulatif"] .demande-surtitre, [data-ecran="confirmation"] .demande-surtitre { display: inline; }
  .demande-picto { display: block; width: 37px; height: 37px; color: var(--ocre); justify-self: center; }
  [data-ecran="quand"] .demande-picto { order: 1; margin: 2px 0; width: 45px; height: 45px; }
  .demande-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .demande-carte-choix, .demande-voyageur { border-color: #beb7a8; background: #f8f3e8; }
  .demande-carte-texte { text-align: center; padding: 6px 4px; }
  .demande-carte-texte strong { font: 600 13px/1.2 Poppins, system-ui, sans-serif; }
  .demande-carte-texte small { display: none; }
  .demande-galerie-envies .demande-image-choix { aspect-ratio: 1.65; }
  .demande-galerie-envies .demande-carte-texte { min-height: 40px; }
  .demande-incertain { align-self: center; }
  .demande-option, .demande-note textarea, .demande-champs :where(input, select) { background: #fdfaf4; }
  .demande-option[aria-checked="true"], .demande-option[aria-pressed="true"] { background: #f7db9e; }
  .demande-calendrier, .demande-durees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demande-voyageurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demande-voyageur { min-height: 113px; }
  .demande-compteurs { grid-template-columns: 1fr; gap: 0; }
  .demande-confort { padding-top: 0; border: 0; }
  .demande-confort h2 { display: none; }
  .demande-confort-options { grid-template-columns: 1fr; gap: 8px; }
  .demande-confort-options .demande-option { min-height: 46px; padding-left: 12px; }
  .demande-note { border-top: 1px solid var(--filet); padding-top: 12px; }
  .demande-champs { grid-template-columns: 1fr; gap: 9px; }
  .demande-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demande-apercu { display: none; position: static; height: auto; overflow: visible; padding: 0 var(--marge) 16px; border: 0; background: transparent; }
  [data-ecran="recapitulatif"] .demande-apercu, [data-ecran="confirmation"] .demande-apercu { display: flex; }
  .demande-footer { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 6px; padding: 8px var(--marge) max(10px, env(safe-area-inset-bottom)); background: var(--papier); }
  .demande-footer .demande-aide { font-size: 11px; margin: 0; max-width: none; text-align: center; }
  .demande-footer .demande-primaire { width: 100%; border-radius: 8px; font-size: 15px; }
  [data-ecran="confirmation"] .demande-corps { padding-block: 28px 18px; }
}