/* Demande en 3 étapes + confirmation — DA v2 */
.ariane { display: flex; gap: 8px; font-size: .9063rem; color: var(--gris); margin: 18px 0 8px; flex-wrap: wrap; }
.ariane a { color: inherit; }
.demande { padding-bottom: 72px; }
.demande__grille { display: grid; gap: 32px; padding-top: 16px; }
.demande__col { min-width: 0; max-width: 680px; }
@media (min-width: 1040px) { .demande__grille { grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; align-items: start; } }

.progression { display: grid; gap: 8px; margin: 0 0 28px; font-weight: 700; font-size: .9688rem; }
.progression__barre { display: block; height: 8px; border-radius: 4px; background: var(--menthe); overflow: hidden; }
.progression__barre i { display: block; height: 100%; width: 33%; border-radius: 4px; background: var(--ambre); transition: width .5s var(--ease); }

.etape { display: grid; gap: 24px; }
.etape[hidden] { display: none; }
.etape > .chapo { margin: -8px 0 4px; }
.etape h1:focus, .etape h2:focus, .merci h2:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) { .etape:not([hidden]), .merci:not([hidden]) { animation: etape-entre .45s var(--ease) both; } }
@keyframes etape-entre { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.deux { display: grid; gap: 24px; }
@media (min-width: 640px) { .deux { grid-template-columns: 1fr 1fr; gap: 16px; } }
.etape__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.etape__actions .btn--plein { flex: 1 1 220px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.choix .erreur, .naissance .erreur, .cases .erreur { display: none; color: var(--alerte); font-weight: 600; font-size: .9375rem; margin: 2px 0 0; grid-column: 1 / -1; }
.invalide > .erreur, .invalide .erreur { display: block; }
.choix.invalide label { border-color: var(--alerte); }
.naissance { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.naissance legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.naissance .aide { font-size: .9063rem; color: var(--gris); margin: 0 0 4px; }
.naissance__champs { display: flex; gap: 12px; }
.naissance__champs .champ { width: 5.2em; }
.naissance__champs .champ:last-child { width: 7em; }
.naissance__champs label { font-weight: 500; font-size: .9063rem; }
.naissance.invalide input { border-color: var(--alerte); border-width: 2px; }
.cases { display: grid; gap: 12px; }
.cases label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.cases input { width: 24px; height: 24px; accent-color: var(--marine); flex: none; margin: 1px 0 0; }
.cases.invalide input[required] { outline: 2px solid var(--alerte); outline-offset: 2px; }

.resume-erreurs { border: 2px solid var(--alerte); border-radius: var(--r-outil); padding: 18px 20px; margin-bottom: 24px; background: #FFF4F2; }
.resume-erreurs[hidden] { display: none; }
.resume-erreurs ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }
.resume-erreurs a { color: var(--alerte); font-weight: 600; }

.enregistre { display: flex; align-items: center; gap: 14px; background: var(--menthe-pale); border-radius: var(--r-carte); padding: 14px 18px; margin: 0; line-height: 1.45; }
.enregistre img { width: 64px; height: 64px; object-fit: contain; flex: none; }

/* Colonne de rappel */
.rappel { display: grid; gap: 18px; align-content: start; order: -1; }
.rappel__mission { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-carte); padding: 12px; box-shadow: var(--ombre-douce); }
.rappel__mission[hidden] { display: none; }
.rappel__mission img { width: 110px; height: 110px; object-fit: cover; border-radius: 16px; }
.rappel__mission p { margin: 0; }
.rappel__prix { color: var(--gris); font-size: .9375rem; margin: 4px 0 6px !important; }
.rappel__prix b { font: 800 1.25rem var(--titre); color: var(--marine); }
.rappel__equipe, .rappel__points, .rappel__badges { display: none; }
@media (min-width: 1040px) {
  .rappel { order: 0; position: sticky; top: 100px; }
  .rappel__mission { grid-template-columns: 1fr; padding: 14px; }
  .rappel__mission img { width: 100%; height: auto; aspect-ratio: 4/3; }
  .rappel__mission > div { padding: 4px 6px 8px; }
  .rappel__equipe { display: grid; gap: 12px; background: var(--peche-pale); border-radius: var(--r-carte); padding: 14px; }
  .rappel__equipe img { border-radius: 16px; width: 100%; aspect-ratio: 16/7; object-fit: cover; }
  .rappel__equipe p { margin: 0 6px 6px; line-height: 1.45; }
  .rappel__points { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0 6px; font-size: .9688rem; }
  .rappel__points li { position: relative; padding-left: 30px; }
  .rappel__points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232F5233' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
  .rappel__badges { display: flex; gap: 18px; align-items: center; padding: 4px 6px; }
  .rappel__badges img { height: 58px; width: auto; }
}

/* Confirmation */
.merci { display: grid; gap: 20px; }
.merci[hidden] { display: none; }
.merci__tampon { width: 132px; height: 132px; border-radius: 50%; background: var(--ambre); display: grid; place-items: center; }
.merci__tampon img { width: 96px; height: 96px; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .merci:not([hidden]) .merci__tampon { animation: tampon .5s cubic-bezier(.3, 1.6, .5, 1) .15s both; } }
@keyframes tampon { from { transform: scale(1.7) rotate(-16deg); opacity: 0; } to { transform: rotate(-6deg); opacity: 1; } }
.recap { margin: 0; display: grid; gap: 0; border: 1px solid var(--trait); border-radius: var(--r-outil); padding: 4px 18px; }
.recap div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.recap div:last-child { border: 0; }
.recap dt { color: var(--gris); }
.recap dd { margin: 0; font-weight: 700; text-align: right; }
.suite { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.suite li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: start; }
.suite li::before { content: counter(s); grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; background: var(--menthe); display: grid; place-items: center; font: 800 1.25rem var(--titre); }
.suite b { font-size: 1.0625rem; }
.suite span { color: var(--gris); grid-column: 2; }

/* Téléphone : le pays (drapeau + indicatif) puis le numéro, sur une ligne. */
/* Téléphone : l'indicatif (drapeau + « +33 », recherche par pays ou indicatif) puis le numéro, sur une ligne même
   sur mobile : le bouton ne fait que la largeur du drapeau et de l'indicatif. */
.tel { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.tel select { font-variant-numeric: tabular-nums; }
.tel select.indicatif__natif { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.indicatif { position: relative; }
.indicatif__bouton { display: inline-flex; align-items: center; gap: 8px; height: 100%; min-height: 54px; padding: 0 12px 0 14px; border: 1.5px solid #B5C6D2; border-radius: var(--r-outil); background: var(--blanc); cursor: pointer; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .15s; }
.indicatif__bouton:hover, .indicatif__bouton[aria-expanded="true"] { border-color: var(--marine); }
.indicatif__bouton:focus-visible { outline: 3px solid var(--ambre-fonce); outline-offset: 0; border-color: var(--marine); }
.indicatif__bouton svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.indicatif img, .indicatif__globe { flex: none; width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 39, 64, .14); object-fit: cover; }
.indicatif__globe { display: inline-grid; place-items: center; background: #EEF3F7; font-weight: 800; font-size: .8125rem; color: var(--marine); box-shadow: none; }
.indicatif__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px)); background: var(--blanc); border: 1.5px solid #B5C6D2; border-radius: var(--r-outil); box-shadow: 0 16px 40px rgba(5, 39, 64, .18); padding: 8px; }
.champ .indicatif__cherche { min-height: 46px; padding: 10px 14px; font-size: 1rem; }
.indicatif__liste { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.indicatif__liste li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.indicatif__liste li.actif, .indicatif__liste li:hover { background: #EEF3F7; }
.indicatif__liste li[aria-selected="true"] { font-weight: 700; }
.indicatif__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indicatif__code { color: var(--encre-70); font-variant-numeric: tabular-nums; }
.indicatif__liste .indicatif__vide { cursor: default; color: var(--encre-70); background: none; }
@media (max-width: 360px) { .indicatif__bouton { gap: 6px; padding: 0 8px 0 10px; } }