/* Carte des points — prototype, v4 du 2026-10-23 : maquette Figma « Stash and go »
   (Bi61Q1VPMfngjnQ8RZhIRi, cadres « 01 — Étape 1 », « 02 — Étape 2 » et leurs
   versions mobiles « M — … »). Carte plein écran, panneau de 440 px à gauche :
   en-tête indigo (devise, langue, étape, stepper), Étape 1 = Où / Quand /
   Combien de bagages, Étape 2 = fiche du point ; pied fixe avec le total.
   Épingles carrées avec la distance au-dessus. Mobile (≤ 860 px) : en-tête en
   haut, feuille glissante en bas (repliée = « Où déposer vos bagages ? »).
   v3 (Bounce) sauvegardée dans /home/lockandgo/.recette/carte-avant-figma-20261023/. */

/* Polices : mêmes @font-face que base.css (la page ne charge pas base.css). */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Manrope-500-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: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Manrope-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Manrope-600-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: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Manrope-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Manrope-700-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: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Manrope-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Manrope-800-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: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Manrope-800-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/DMSans-400-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: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/DMSans-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/DMSans-500-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: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/DMSans-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/DMSans-600-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: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/DMSans-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/DMSans-900-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: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/DMSans-900-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cp-indigo: #444CED;
  --cp-nuit: #232A7A;
  --cp-encre: #121A26;
  --cp-gris: #6B7280;
  --cp-lavande: #F5F5FF;
  --cp-trait: rgba(209, 209, 250, .75);
  --cp-trait-doux: rgba(209, 209, 250, .5);
  --cp-degrade: linear-gradient(90deg, #232A7A 0%, #444CED 55%, #818CF8 100%);
  --cp-ombre-panneau: 0 12px 40px rgba(36, 41, 122, .20);
  --cp-ombre-ctrl: 0 4.5px 18px rgba(68, 76, 237, .16);
  --cp-panneau: 440px;
  --cp-marge: 24px;
  --h-entete: 234px;
  --f-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.cp { margin: 0; font: 400 15px/1.4 var(--f-body); color: var(--cp-encre); background: #ECEAF3; overflow: hidden; -webkit-font-smoothing: antialiased; }
.cp button, .cp select, .cp input { font: inherit; color: inherit; }
.cp button { cursor: pointer; }
[hidden] { display: none !important; }
.cp-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cp-carte { position: fixed; inset: 0; }
.cp-proto { position: fixed; z-index: 30; top: 0; left: calc(var(--cp-marge) + var(--cp-panneau) + (100vw - var(--cp-marge) - var(--cp-panneau)) / 2); transform: translateX(-50%); margin: 0; padding: 3px 12px; border-radius: 0 0 10px 10px; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- Panneau ---------- */
.cp-panneau { position: fixed; z-index: 20; top: var(--cp-marge); left: var(--cp-marge); bottom: var(--cp-marge); width: var(--cp-panneau); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--cp-ombre-panneau); }

/* En-tête indigo */
.cp-entete { flex: none; display: grid; gap: 32px; padding: 18px 24px 20px; background: var(--cp-indigo); color: #fff; }
.cp-barre { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.cp-logo img { display: block; width: 96px; height: auto; }
.cp-actions { display: flex; align-items: center; gap: 10px; }
.cp-devise, .cp-langue { display: flex; align-items: center; border: .5px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .1); }
.cp-langue { gap: 4px; height: 33px; padding: 0 10px 0 12px; color: #fff !important; font: 700 12px/1 var(--f-body) !important; }
/* Devise : même pilule que la langue, liste native par-dessus (invisible). */
.cp-devise { position: relative; cursor: pointer; }
.cp-devise select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.cp-devise:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.cp-titre { display: grid; gap: 2px; justify-items: start; }
.cp-etape { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 100px; background: rgba(255, 255, 255, .1); font: italic 600 11px/14px var(--f-body); }
.cp-titre h1 { margin: 0; font: 800 28px/38px var(--f-display); }
.cp-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: -8px 0 0; padding: 0; list-style: none; }
.cp-stepper li { display: grid; gap: 6px; justify-items: center; font: 500 11px/14px var(--f-body); color: rgba(255, 255, 255, .6); white-space: nowrap; }
.cp-stepper li::before { content: ""; justify-self: stretch; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.cp-stepper li.is-fait::before { background: #fff; }
.cp-stepper li.is-fait { color: #fff; }
.cp-stepper li[aria-current="step"] { font-weight: 700; }

/* Feuille = corps défilant + pied */
.cp-feuille { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-poignee { display: none; }
.cp-defile { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cp-vue { display: grid; gap: 32px; padding: 32px 24px; }
.cp-section { display: grid; gap: 14px; }
.cp-section__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-h2 { margin: 0; font: 700 16px/20px var(--f-display); color: var(--cp-encre); }

/* Où ? */
.cp-recherche { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 6px 6px 6px 18px; border: 1px solid var(--cp-trait); border-radius: 100px; background: #fff; }
.cp-recherche:focus-within { border-color: var(--cp-indigo); box-shadow: 0 0 0 3px rgba(68, 76, 237, .12); }
.cp-recherche > svg { flex: none; color: var(--cp-indigo); }
.cp-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 15px/19.5px var(--f-body) !important; color: #1F2B3B !important; }
.cp-recherche input::placeholder { color: var(--cp-gris); font-weight: 400; }
.cp-recherche input::-webkit-search-cancel-button { display: none; }
.cp-autour { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 37px; padding: 0 16px 0 14px; border: 0; border-radius: 100px; background: var(--cp-lavande); color: var(--cp-indigo) !important; font: 600 13px/1 var(--f-body) !important; }
.cp-autour:hover { background: #EBEBFF; }
.cp-autour.is-attente svg, .cp-pres.is-attente svg { animation: cp-pulse 1s infinite; }
@keyframes cp-pulse { 50% { opacity: .3; } }
.cp-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 18px; box-shadow: var(--cp-ombre-panneau); max-height: 340px; overflow: auto; }
.cp-suggestions li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.cp-suggestions li i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cp-lavande); color: var(--cp-indigo); font-style: normal; font-size: 14px; }
.cp-suggestions li span { display: grid; min-width: 0; }
.cp-suggestions li b { font: 700 14px var(--f-display); }
.cp-suggestions li small { color: var(--cp-gris); font-size: 12px; }
.cp-suggestions li:hover, .cp-suggestions li.is-actif { background: var(--cp-lavande); }
.cp-suggestions li[aria-disabled] { cursor: default; background: none; }

/* Quand ? */
.cp-heure-maroc { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 100px; background: #FFF4D7; color: #3D2D00; font: 500 12px/15.6px var(--f-body); white-space: nowrap; }
.cp-dates { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--cp-trait); border-radius: 24px; }
.cp-moment { display: grid; gap: 12px; }
.cp-moment + .cp-moment { padding-top: 16px; border-top: 1px solid #F0F0FF; }
.cp-moment__tete { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 15px/19.5px var(--f-body); }
.cp-moment__tete i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cp-lavande); color: var(--cp-indigo); }
.cp-jours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-jour { position: relative; display: grid; gap: 2px; justify-items: center; align-content: center; min-height: 62px; padding: 10px 9px; border: .75px solid var(--cp-trait-doux); border-radius: 14px; background: #fff; text-align: center; overflow: hidden; }
.cp-jour b { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/18.2px var(--f-body); color: var(--cp-encre); white-space: nowrap; }
.cp-jour small { font: 400 12px/15.6px var(--f-body); color: var(--cp-gris); white-space: nowrap; }
.cp-jour:hover { border-color: rgba(68, 76, 237, .45); }
/* Sélection bien visible (demande client du 2026-10-25) : contour indigo fin
   de 1 px (ombre intérieure, sans décaler la mise en page) et fond teinté. */
.cp-jour[aria-pressed="true"] { border-color: transparent; background: #E6E8FF; box-shadow: inset 0 0 0 1px var(--cp-indigo); }
.cp-jour[aria-pressed="true"] b { color: var(--cp-indigo); font-weight: 700; }
.cp-jour[aria-pressed="true"] small { color: #323BEB; font-weight: 500; }
.cp-jour input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.cp-jour input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.cp-select { position: relative; display: flex; align-items: center; gap: 10px; height: 41px; padding: 0 14px; border: .75px solid var(--cp-trait); border-radius: 100px; background: #fff; color: var(--cp-gris); }
.cp-select.is-choisi { border-color: transparent; background: #E6E8FF; box-shadow: inset 0 0 0 1px var(--cp-indigo); color: var(--cp-indigo); }
.cp-select svg { flex: none; }
.cp-select span { flex: 1; font: 400 14px/18.2px var(--f-body); }
.cp-select.is-choisi span { font-weight: 700; }
.cp-select select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; border: 0; }

/* Combien de bagages ? */
.cp-sacs { display: grid; gap: 16px; }
.cp-sac { display: flex; gap: 14px; padding: 8px; border: 1px solid var(--cp-trait); border-radius: 16px; }
.cp-sac.is-actif { border-color: rgba(68, 76, 237, .55); }
.cp-sac__img { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 13px; background: var(--cp-lavande); }
.cp-sac__img img { max-width: 52px; max-height: 52px; width: auto; height: auto; }
.cp-sac__corps { flex: 1; min-width: 0; display: grid; gap: 10px; align-content: space-between; }
.cp-sac__corps b { display: block; font: 600 14px/18.2px var(--f-body); }
.cp-sac__corps small { display: block; margin-top: 4px; font: 400 11px/14.3px var(--f-body); color: #666D7A; }
.cp-sac__bas { display: flex; align-items: center; justify-content: space-between; }
.cp-qte { display: flex; align-items: center; gap: 11px; }
.cp-qte button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: .6px solid #E5E5FF; border-radius: 50%; background: #fff; color: var(--cp-encre) !important; }
.cp-qte button[data-plus] { border: 0; background: var(--cp-indigo); color: #fff !important; }
.cp-qte button:disabled { opacity: .4; cursor: default; }
.cp-qte output { min-width: 11px; text-align: center; font: 700 16px/22px var(--f-display); }
.cp-puce-prix { padding: 4px 10px; border-radius: 999px; background: var(--cp-lavande); color: var(--cp-indigo); font: 600 12px/15.6px var(--f-body); white-space: nowrap; }

/* ---------- Étape 2 : fiche du point ---------- */
.cp-vue--point { gap: 0; padding: 0; }
.cp-photo { position: relative; height: 252px; background: var(--cp-lavande); }
.cp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cp-photo__retour { position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 40px; height: 36px; border: 0; border-radius: 100px; background: rgba(255, 255, 255, .95); box-shadow: 0 0 14px rgba(0, 0, 0, .07); color: var(--cp-nuit) !important; }
.cp-fiche { position: relative; display: grid; gap: 24px; margin-top: -22px; padding: 22px 22px 32px; border-radius: 24px 24px 0 0; background: #fff; }
.cp-fiche__tete { display: grid; gap: 12px; }
.cp-fiche__titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cp-fiche__titre h2 { margin: 0; font: 800 20px/27px var(--f-display); }
.cp-note { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 100px; background: #FFF7E6; color: #92400E; font: 500 12px/15.6px var(--f-body); white-space: nowrap; }
.cp-note svg { color: #F5B400; }
.cp-adresse { margin: 0; padding-left: 22px; font: 400 14px/18.2px var(--f-body); color: var(--cp-gris); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 100px; background: var(--cp-lavande); color: var(--cp-nuit); font: 500 12px/15.6px var(--f-body); }
.cp-tag--vert { background: #ECFDF3; color: #15803D; }
.cp-tag--vert::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cp-tag--gris { background: #F3F4F6; color: var(--cp-gris); }
.cp-tag--fictif { background: #FEF3C7; color: #92400E; }
.cp-h3 { margin: 0; font: 700 18px/22.5px var(--f-display); }
.cp-proches { display: flex; flex-wrap: wrap; gap: 9px 10px; margin: 0; padding: 0; list-style: none; }
.cp-proches li { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: .75px solid #E5E5FF; border-radius: 100px; font: 500 12px/15.6px var(--f-body); }
.cp-proches li span { font-size: 13px; line-height: 18px; }
.cp-alerte { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(129, 140, 248, .10); }
.cp-alerte b { display: flex; align-items: center; gap: 8px; font: 700 16px/19px var(--f-display); color: var(--cp-nuit); }
.cp-alerte b svg { color: var(--cp-indigo); flex: none; }
.cp-alerte p { margin: 0; font: 400 14px/18.9px var(--f-body); color: #575A6F; }
.cp-bloc { display: grid; gap: 16px; }
.cp-bloc__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.cp-bloc__tete > span { display: flex; align-items: center; gap: 8px; font: 700 18px/23.4px var(--f-display); }
.cp-bloc__tete i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(110, 122, 241, .08); color: var(--cp-indigo); }
/* `.cp-bloc__tete > span` (flex) visait aussi ce rond et décalait la flèche de 6 px. */
.cp-bloc__tete > .cp-chevron { flex: none; display: grid; place-items: center; gap: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(68, 76, 237, .05); color: var(--cp-indigo); transition: transform .2s; }
.cp-bloc__tete[aria-expanded="true"] .cp-chevron { transform: rotate(180deg); }
.cp-horaires { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cp-horaires li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 15px; padding: 16px 14px; border-radius: 13px; background: rgba(110, 122, 241, .06); }
.cp-horaires li.is-auj { background: rgba(110, 122, 241, .12); }
.cp-horaires__jour { font: 600 16px/20.8px var(--f-body); color: #45464D; }
.cp-horaires__heures { justify-self: end; font: 600 12px/15.6px var(--f-body); color: var(--cp-nuit); word-spacing: 6px; white-space: nowrap; }
.cp-statut { padding: 2px 8px; border-radius: 9999px; background: rgba(111, 251, 190, .3); color: #00573A; font: 600 11px/14px var(--f-display); }
.cp-statut--ferme { background: #F3F4F6; color: var(--cp-gris); }
.cp-score { display: flex; align-items: center; gap: 48px; padding: 14px 14px 14px 34px; border: 1px solid rgba(255, 247, 230, .5); border-radius: 18px; background: rgba(255, 247, 230, .35); }
.cp-score__note { display: grid; gap: 8px; justify-items: center; }
.cp-score__note b { font: 800 38px/1 var(--f-body); color: #272730; }
.cp-score__note small { font: 500 12px/16px var(--f-body); color: #454555; white-space: nowrap; }
.cp-barres { flex: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cp-barres li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px; align-items: center; gap: 10px; font: 500 12px/12px var(--f-body); color: #676F78; }
.cp-barres li > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.cp-barres svg { color: #F5B400; }
.cp-barres i { height: 6px; border-radius: 3px; background: #ECECF1; overflow: hidden; }
.cp-barres i::before { content: ""; display: block; width: var(--v); height: 100%; border-radius: 3px; background: #F5B400; }
.cp-barres li > span:last-child { text-align: right; }
.cp-score__source { flex: 1; margin: 0; font: 500 13px/1.45 var(--f-body); color: #454555; }
.cp-avis { display: flex; gap: 16px; margin: 0 -22px; padding: 0 22px 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 22px; scrollbar-width: none; }
.cp-avis::-webkit-scrollbar { display: none; }
.cp-avis li { flex: none; width: 310px; display: grid; gap: 16px; align-content: start; padding: 12px; border-radius: 24px; background: rgba(110, 122, 241, .06); scroll-snap-align: start; }
.cp-avis__tete { display: flex; align-items: center; gap: 12px; }
.cp-avis__tete > i { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--cp-indigo); color: #fff; font: 700 18px var(--f-display); font-style: normal; }
.cp-avis__tete > span { flex: 1; display: grid; gap: 6px; min-width: 0; }
.cp-avis__tete b { font: 600 15px/18.8px var(--f-display); }
.cp-avis__tete small { font: 400 12px/15.6px var(--f-body); color: rgba(95, 103, 113, .95); }
.cp-etoiles, .cp-avis__tete > .cp-etoiles { flex: none; display: inline-flex; gap: 2px; color: #F5B400; }
.cp-avis p { margin: 0; font: 400 12px/16.8px var(--f-body); color: #393D42; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cp-avis li.cp-aucun-avis { width: auto; padding: 0; background: none; font-size: 14px; color: var(--cp-gris); }

/* ---------- Pied ---------- */
.cp-pied { flex: none; display: grid; gap: 14px; padding: 16px 24px 20px; background: #fff; box-shadow: 0 -6px 16px rgba(36, 41, 122, .06); position: relative; z-index: 2; }
.cp-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-resume > div:first-child { display: grid; gap: 8px; min-width: 0; }
.cp-resume b { font: 600 18px/23.4px var(--f-body); }
.cp-resume small { font: 400 13px/16.9px var(--f-body); color: #5E696B; }
.cp-total { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.cp-total small { font: 500 12px/15.6px var(--f-body); }
.cp-total strong { font: 800 24px/32.8px var(--f-display); color: var(--cp-indigo); }
.cp-boutons { display: flex; gap: 12px; }
.cp-bouton { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 51px; padding: 0 26px; border: 1px solid var(--cp-indigo); border-radius: 999px; background: #fff; color: var(--cp-indigo) !important; font: 600 16px/20.8px var(--f-body) !important; text-decoration: none; white-space: nowrap; }
.cp-bouton > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-bouton svg { flex: none; }
.cp-bouton--plein { border: 0; background: var(--cp-degrade); color: #fff !important; box-shadow: 0 4px 16px rgba(68, 76, 237, .16); }
.cp-bouton--plein:hover { filter: brightness(1.06); }
.cp-bouton--retour { flex: none; width: 131px; padding: 0 20px; }
.cp-bouton.is-inactif { opacity: .55; box-shadow: none; }

/* ---------- Carte : épingles, « vous êtes ici », villes ---------- */
/* Le porteur reçoit le transform de MapLibre (AUCUNE transition dessus, cf. v3). */
.cp-porteur { display: block; }
.cp-pin { display: grid; justify-items: center; gap: 8px; padding: 0 0 7px; border: 0; background: none; transform-origin: 50% 100%; transition: transform .12s; }
.cp-pin__km { padding: 4px 14px; border-radius: 100px; background: #fff; box-shadow: 0 2.4px 9.5px rgba(0, 0, 0, .10); color: var(--cp-nuit); font: 700 18px/23.4px var(--f-body); white-space: nowrap; }
.cp-pin__case { position: relative; display: grid; place-items: center; width: 51px; height: 51px; border-radius: 16px; background: #fff; box-shadow: 0 6.4px 16px rgba(35, 42, 122, .15); }
.cp-pin__case::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 0 0 3px 0; background: inherit; transform: rotate(45deg); }
.cp-pin__case svg { position: relative; z-index: 1; width: 31px; height: 31px; }
.cp-pin { --i1: #232A7A; --i2: #535AEE; --i3: #fff; }
.cp-pin:hover, .cp-pin.is-survol { transform: scale(1.06); }
.cp-pin.is-choisi { --i1: #fff; --i2: #fff; --i3: var(--cp-indigo); z-index: 3; }
.cp-pin.is-choisi .cp-pin__km, .cp-pin.is-choisi .cp-pin__case { background: var(--cp-indigo); color: #fff; }
.cp-pin.is-indispo:not(.is-choisi) .cp-pin__case { filter: grayscale(1); opacity: .6; }
.cp-pin.is-indispo:not(.is-choisi) .cp-pin__km { color: #9CA3AF; }
body.cp--loin .cp-pin__km { display: none; }
.cp-pin__km:empty { display: none; }
.cp-pin__km { display: none !important; }   /* distance retirée des épingles (client, 2026-10-30) ; elle reste dans la fiche et la liste */

.cp-moi { display: grid; justify-items: center; gap: 5px; pointer-events: none; }
.cp-moi em { padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); font: 700 10px/1 var(--f-body); font-style: normal; color: var(--cp-nuit); text-transform: uppercase; white-space: nowrap; }
.cp-moi i { display: block; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(68, 76, 237, .5); }
.cp-moi i::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--cp-indigo); }

.cp-ville { display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 5px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px rgba(35, 42, 122, .15); color: var(--cp-nuit) !important; font: 700 15px var(--f-body) !important; white-space: nowrap; }
.cp-ville b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--cp-indigo); color: #fff; }
.cp-ville small { color: var(--cp-gris); font-weight: 600; }
.cp-ville:hover { background: var(--cp-lavande); }
.maplibregl-marker { cursor: pointer; }

/* Contrôles : zoom + « Près de moi » (en bas à droite) */
.cp-ctrl { position: fixed; z-index: 15; right: 25px; bottom: 35px; display: grid; justify-items: end; gap: 14px; }
.cp-zoom { display: grid; width: 50px; border-radius: 16px; background: #fff; box-shadow: var(--cp-ombre-ctrl); overflow: hidden; }
.cp-zoom button { display: grid; place-items: center; width: 50px; height: 50px; border: 0; background: none; color: var(--cp-nuit) !important; }
.cp-zoom button + button { border-top: 1px solid #E4E6F7; }
.cp-zoom button:hover { background: var(--cp-lavande); }
.cp-pres { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 20px 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--cp-ombre-ctrl); color: var(--cp-nuit) !important; font: 600 18px/23.4px var(--f-body) !important; }
.cp-pres svg { color: var(--cp-indigo); }
.cp-pres:hover { background: var(--cp-lavande); }
.maplibregl-ctrl-bottom-right { right: 0; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Chargement : pilule au logo (« Loader 05 · Logo motion ») */
.cp-chargement { position: fixed; z-index: 16; top: 93px; left: calc(var(--cp-marge) + var(--cp-panneau) + (100vw - var(--cp-marge) - var(--cp-panneau)) / 2); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; width: 225px; height: 96px; padding: 14px 0 0; border-radius: 100px; background: #fff; box-shadow: 0 12px 40px rgba(35, 42, 122, .10); animation: cp-apparait .15s ease-out; }
.cp-chargement img { width: 120px; height: 56px; }
.cp-chargement i { position: relative; width: 129px; height: 3px; border-radius: 3px; background: rgba(83, 90, 238, .12); overflow: hidden; }
.cp-chargement i::before { content: ""; position: absolute; top: 0; bottom: 0; width: 51px; border-radius: 3px; background: linear-gradient(90deg, #818CF8, #535AEE, #232A7A); animation: cp-barre 1s ease-in-out infinite; }
@keyframes cp-barre { from { left: -51px; } to { left: 129px; } }
@keyframes cp-apparait { from { opacity: 0; margin-top: -6px; } }

.cp-toast { position: fixed; z-index: 40; left: calc(var(--cp-marge) + var(--cp-panneau) + (100vw - var(--cp-marge) - var(--cp-panneau)) / 2); bottom: 32px; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--cp-encre); color: #fff; font-size: 14px; box-shadow: var(--cp-ombre-panneau); }

/* ---------- Mobile : en-tête en haut, feuille glissante en bas ---------- */
@media (max-width: 860px) {
  .cp-panneau { display: contents; }
  /* En-tête compact (≈ 160 px au lieu de 226) : plus de carte visible. */
  .cp-entete { position: fixed; z-index: 21; top: 0; left: 0; right: 0; gap: 14px; padding: 12px 16px 12px; border-radius: 0 0 20px 20px; }
  .cp-barre { min-height: 38px; }
  .cp-logo img { width: 76px; }
  .cp-devise, .cp-langue { height: 30px; }
  .cp-titre h1 { font-size: 22px; line-height: 28px; }
  .cp-stepper { margin: 0; }
  .cp-stepper li { gap: 5px; font-size: 10px; line-height: 12px; }
  .cp-stepper li::before { height: 3px; }
  .cp-proto { top: calc(var(--h-entete) + 6px); left: 50%; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; border-radius: 10px; font-size: 11px; }
  /* Ouverte : le haut de la feuille laisse 150 px de carte sous l'en-tête
     (maquette « M — 02 — Étape 2 ») ; repliée : seuls la poignée et
     « Où déposer vos bagages ? » dépassent (154 px). */
  .cp-feuille { position: fixed; z-index: 22; left: 0; right: 0; bottom: 0; top: calc(var(--h-entete) + 150px); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -4px 24px rgba(68, 76, 237, .14); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  /* Carte visible sous l'en-tête selon l'écran (maquettes M-01 : 120 px,
     M-02 : 150 px, M-04 à M-06 : 33 px). */
  body[data-ecran="reservation"] .cp-feuille { top: calc(var(--h-entete) + 120px); }
  body[data-ecran="taxi"] .cp-feuille, body[data-ecran="infos"] .cp-feuille, body[data-ecran="confirmation"] .cp-feuille { top: calc(var(--h-entete) + 33px); }
  body.cp-f--bas .cp-feuille { transform: translateY(calc(100% - 154px)); }
  /* Recherche, dates, bagages, taxi, informations : PAS de carte (demande
     client du 2026-10-25). La feuille passe sous l'en-tête et le couvre ; la
     carte ne se montre qu'avec « Voir les points de dépôt » (feuille repliée)
     et sur la fiche d'un point. */
  body[data-ecran="reservation"]:not(.cp-f--bas) .cp-feuille,
  body[data-ecran="point"]:not(.cp-f--bas) .cp-feuille,
  body[data-ecran="taxi"] .cp-feuille, body[data-ecran="infos"] .cp-feuille, body[data-ecran="confirmation"] .cp-feuille { top: calc(var(--h-entete) - 24px); z-index: 20; border-radius: 0; box-shadow: none; }
  body[data-ecran="reservation"]:not(.cp-f--bas) .cp-poignee,
  body[data-ecran="point"]:not(.cp-f--bas) .cp-poignee,
  body[data-ecran="taxi"] .cp-poignee, body[data-ecran="infos"] .cp-poignee, body[data-ecran="confirmation"] .cp-poignee { display: none; }
  /* Fiche du point en plein écran (demande client du 2026-10-25) : la photo
     démarre sous l'en-tête. */
  body[data-ecran="point"]:not(.cp-f--bas) .cp-vue--point { padding-top: 40px; }
  body[data-ecran="reservation"]:not(.cp-f--bas) .cp-vue,
  body[data-ecran="taxi"] .cp-vue, body[data-ecran="infos"] .cp-vue, body[data-ecran="confirmation"] .cp-vue { padding-top: 48px; }
  body:not(.cp-f--bas) .cp-proto { display: none; }
  /* Étape 1 : barre fixe en bas réduite au bouton « Rechercher ». */
  body[data-ecran="reservation"]:not(.cp-f--bas) .cp-pied { position: sticky; bottom: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(36, 41, 122, .08); }
  body[data-ecran="reservation"] .cp-resume { display: none; }
  body.cp-f--bas .cp-pied { visibility: hidden; }
  body.cp-f--bas .cp-defile { overflow: hidden; }
  /* Pas de barre fixe en bas : le total et les boutons suivent le contenu
     (c'est la feuille entière qui défile), sur tous les écrans. */
  .cp-feuille { overflow-y: auto; overscroll-behavior: contain; }
  body.cp-f--bas .cp-feuille { overflow: hidden; }
  .cp-defile { flex: none; overflow: visible; }
  .cp-pied { box-shadow: none; }
  .cp-feuille.is-glisse { transition: none; }
  /* Saisie dans « Où ? » : feuille plein écran, liste au-dessus du clavier. */
  body.cp-cherche .cp-feuille { top: 0; z-index: 25; transform: none; border-radius: 0; transition: none; }
  body.cp-cherche .cp-suggestions { max-height: var(--h-sugg, 340px); }
  body.cp-cherche .cp-proto { display: none; }
  .cp-poignee { display: flex; justify-content: center; flex: none; height: 16px; padding: 10px 0 2px; border: 0; background: none; touch-action: none; cursor: grab; }
  .cp-poignee::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: #DCDCF7; }
  .cp-vue { padding: 32px 20px; }
  .cp-vue--point { padding: 12px 20px 32px; }
  .cp-photo { height: 212px; border-radius: 16px; overflow: hidden; }
  .cp-fiche { margin-top: 0; padding: 20px 0 0; border-radius: 0; }
  .cp-avis { margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px; }
  .cp-pied { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  /* Barre du bas fixe sur tous les écrans, en version compacte (demande
     client du 2026-10-25) : récap sur deux petites lignes, boutons de 44 px. */
  body:not(.cp-f--bas) .cp-pied { position: sticky; bottom: 0; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px rgba(36, 41, 122, .08); }
  .cp-resume > div:first-child { gap: 2px; }
  .cp-resume b { font-size: 15px; line-height: 19px; }
  .cp-resume small { font-size: 12px; line-height: 15px; }
  .cp-total strong { font-size: 20px; line-height: 24px; }
  .cp-pied .cp-bouton { min-height: 44px; font-size: 15px !important; }
  .cp-boutons .cp-bouton--retour { width: auto; flex: .6; }
  /* Libellé long (« Continuer avec le taxi ») : c'est « Retour » qui cède. */
  .cp-boutons .cp-bouton { min-width: max-content; padding: 0 16px; }
  .cp-boutons .cp-bouton--retour { min-width: 0; }
  .cp-zoom { display: none; }
  .cp-pres { height: 44px; font-size: 15px !important; }
  .cp-ctrl { display: none; } /* absent des maquettes mobiles : « Autour de moi » est dans la feuille */
  .cp-chargement { top: calc(var(--h-entete) + 24px); left: 50%; transform: translateX(-50%) scale(.7); transform-origin: 50% 0; }
  .cp-toast { left: 50%; bottom: 176px; }
  body:not(.cp-f--bas) .cp-toast { bottom: auto; top: calc(var(--h-entete) + 16px); }
  /* Épingles plus petites (maquette mobile : case de 32 px, distance en 9 px). */
  .cp-pin { gap: 5px; padding-bottom: 4px; }
  .cp-pin__km { padding: 3px 9px; font-size: 12px; line-height: 14px; }
  .cp-pin__case { width: 36px; height: 36px; border-radius: 11px; }
  .cp-pin__case::after { width: 9px; height: 9px; bottom: -3px; margin-left: -4.5px; }
  .cp-pin__case svg { width: 22px; height: 22px; }
  .cp-moi em { padding: 4px 7px; font-size: 9px; }
  .cp-moi i { width: 18px; height: 18px; padding: 2.5px; }
}
@media (max-width: 380px) {
  /* Écran de 320 px (2026-10-25) : rien ne doit élargir la feuille, sinon
     elle défile vers la droite (overflow-y: auto implique overflow-x: auto). */
  .cp-vue, .cp-section, .cp-dates, .cp-moment, .cp-fiche, .cp-bloc, .cp-pied { grid-template-columns: minmax(0, 1fr); }
  .cp-heure-maroc { min-width: 0; padding: 4px 8px; font-size: 11px; white-space: normal; }
  .cp-autour { padding: 0 12px 0 10px; gap: 5px; font-size: 12px !important; }
  .cp-recherche { padding-left: 14px; gap: 8px; }
  [data-taxi-destinations] .cp-puce { max-width: 100%; height: auto; min-height: 34px; padding: 6px 11px; white-space: normal; text-align: center; }
  .cp-boutons { gap: 8px; }
  .cp-pied .cp-bouton { gap: 6px; padding: 0 12px; font-size: 14px !important; }
  .cp-jour { padding: 8px 4px; }
  .cp-jour b { font-size: 13px; }
  body .cp-recap--feuille .cp-recap__tete { padding: 12px 14px; font-size: 16px; }
  body .cp-recap--feuille .cp-recap__corps { gap: 18px; padding: 16px 14px; }
  body .cp-recap__bloc + .cp-recap__bloc { padding-top: 18px; }
  body .cp-recap__ligne, body .cp-recap__bloc--sacs { gap: 8px; }
  body .cp-recap__ico { width: 36px; height: 36px; border-radius: 9px; }
  body .cp-recap__ico img { max-width: 24px; max-height: 26px; }
  body .cp-recap__ico--taxi img { max-width: 36px; max-height: 36px; }
  body .cp-recap__nom b { font-size: 15px; }
  body .cp-recap__prix { padding: 3px 8px; letter-spacing: 0; }
  body .cp-recap__bloc--sacs .cp-recap__qte { width: 26px; height: 26px; margin-left: 0; font-size: 14px; }
  body .cp-recap__detail { font-size: 11px; line-height: 14px; }
  body .cp-recap__edit { font-size: 13px !important; }
  body .cp-recap__ligne:has(.cp-recap__detail) .cp-recap__nom { flex: none; }
  body .cp-recap__detail { flex: 1; min-width: 0; white-space: normal; }
  body .cp-vue--serree { padding-left: 16px; padding-right: 16px; }
  .cp-jours { gap: 6px; }
  .cp-jour { padding: 8px 2px; }
  .cp-score { gap: 24px; padding-left: 18px; }
  .cp-avis li { width: 270px; }
}
@media (max-width: 340px) {
  .cp-dates { padding: 12px; }
  .cp-jour b { font-size: 12px; }
  .cp-recap__prix { display: none; }   /* 320 px : le prix unitaire n'entre plus, le total reste dans la barre du bas */
}

/* ==========================================================================
   Étapes 3, 4 et confirmation (2026-10-23, maquettes « 04 », « 05 », « 06 »)
   ========================================================================== */
.cp-vue--serree { gap: 20px; padding: 20px 24px 32px; }
.cp-section--16 { gap: 16px; }
.cp-h2--grand { font-size: 20px; line-height: 27px; }

/* Puces (destination, passagers, heures) */
.cp-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-puces--heures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-puce { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 12px; border: .75px solid rgba(228, 230, 247, .75); border-radius: 999px; background: #fff; color: var(--cp-nuit) !important; font: 600 12px/15.6px var(--f-body) !important; white-space: nowrap; }
.cp-puce[aria-pressed="true"] { border-color: transparent; background: linear-gradient(90deg, #444CED, #818CF8); color: #fff !important; }
.cp-puce:disabled { opacity: .4; cursor: default; }
[data-taxi-passagers] { gap: 10px; }
[data-taxi-passagers] .cp-puce { width: 34px; padding: 0; }

/* Case à cocher indigo */
.cp-case { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid #C7CAF5; border-radius: 6px; background: #fff; cursor: pointer; }
.cp-case:checked { border-color: var(--cp-indigo); background: var(--cp-indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.cp-case:focus-visible, .cp-paiement input:focus-visible + .cp-radio { outline: 2px solid var(--cp-indigo); outline-offset: 2px; }

/* Étape 3 : taxi */
.cp-taxi { display: grid; gap: 12px; }
.cp-taxi__intro { display: grid; gap: 3px; }
.cp-taxi__intro p { margin: 0; font: 400 12px/18px var(--f-body); color: var(--cp-gris); }
.cp-taxi__boite { display: grid; gap: 16px; padding: 16px 14px; border-radius: 24px; background: rgba(129, 140, 248, .06); border: .5px solid rgba(68, 76, 237, .5); }
.cp-taxi__option { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cp-taxi__option .cp-case { width: 24px; height: 24px; border-radius: 7px; }
.cp-taxi__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #FFE08A; overflow: hidden; }
.cp-taxi__ico img { width: 44px; height: 44px; }
.cp-taxi__titre { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-taxi__titre b { font: 600 16px/20.8px var(--f-body); }
.cp-taxi__titre small { font: 400 14px/18.2px var(--f-body); color: var(--cp-gris); }
.cp-taxi__prix { font: 800 18px/24.6px var(--f-display); color: var(--cp-indigo); white-space: nowrap; }
.cp-taxi__details { display: grid; gap: 24px; padding-top: 16px; border-top: 1px solid rgba(209, 209, 250, .5); }
.cp-taxi__groupe { display: grid; gap: 10px; }
.cp-taxi__groupe > p { margin: 0; font: 500 14px/18.2px var(--f-body); color: #515B5C; }
.cp-taxi__boite:not(.is-actif) .cp-taxi__details { opacity: .5; }
.cp-taxi__note { margin: -8px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF7E6; color: #92400E; font: 400 12px/17px var(--f-body); }
.cp-conseil { display: flex; gap: 12px; padding: 14px 16px; border: .75px solid rgba(254, 202, 202, .75); border-radius: 16px; background: #FEF2F2; color: #B91C1C; }
.cp-conseil svg { flex: none; margin-top: 1px; }
.cp-conseil p { margin: 0; display: grid; gap: 4px; font: 400 14px/21px var(--f-body); }
.cp-conseil b { font: 600 14px/18.2px var(--f-body); }

/* Étape 4 : coordonnées */
.cp-deja { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 100px; background: rgba(129, 140, 248, .05); text-decoration: none; font: 600 14px/18.2px var(--f-body); }
.cp-deja b { color: var(--cp-nuit); font-weight: 600; }
.cp-deja span { display: inline-flex; align-items: center; gap: 4px; color: var(--cp-indigo); }
.cp-champ { display: grid; gap: 8px; }
.cp-champ > label { font: 400 14px/18.2px var(--f-body); }
.cp-saisie { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border: 1px solid var(--cp-trait); border-radius: 100px; background: #fff; color: #6B7280; }
.cp-saisie:focus-within { border-color: var(--cp-indigo); box-shadow: 0 0 0 3px rgba(68, 76, 237, .12); }
.cp-saisie.is-erreur { border-color: #DC2626; }
.cp-saisie svg { flex: none; }
.cp-saisie input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; font: 500 14px/18.2px var(--f-body) !important; color: var(--cp-encre) !important; }
.cp-saisie input::placeholder { color: #9CA3AF; font-weight: 400; }
.cp-tel { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.cp-indicatif { gap: 6px; padding: 0 12px 0 16px; font: 500 14px/18.2px var(--f-body); color: var(--cp-encre); }
.cp-indicatif span { flex: 1; }
.cp-indicatif select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; border: 0; }
.cp-erreur { color: #DC2626; font: 500 12px/16px var(--f-body); }
.cp-erreur--bloc { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FEF2F2; font-size: 13px; }

.cp-paiements { display: grid; gap: 10px; }
.cp-paiement { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border: 1px solid var(--cp-trait); border-radius: 14px; background: #fff; cursor: pointer; }
.cp-paiement input { position: absolute; opacity: 0; pointer-events: none; }
.cp-radio { flex: none; width: 15px; height: 15px; border: 1px solid #5D5D5D; border-radius: 50%; }
.cp-paiement__corps { flex: 1; display: grid; gap: 10px; min-width: 0; }
.cp-paiement__corps b { font: 500 14px/18.2px var(--f-body); color: #5D5D5D; }
.cp-paiement > img { flex: none; }
.cp-paiement:has(input:checked) { padding: 13px 16px; border: .75px solid rgba(68, 76, 237, .7); background: rgba(129, 140, 248, .07); }
.cp-paiement:has(input:checked) .cp-radio { border-color: #818CF8; background: radial-gradient(circle, var(--cp-indigo) 0 4px, transparent 4.5px); }
.cp-paiement:has(input:checked) .cp-paiement__corps b { font-weight: 600; color: #262626; }
/* Logos des cartes à droite, comme PayPal, toujours visibles (demande client 2026-10-23). */
.cp-paiement > .cp-logos { flex: none; display: flex; gap: 4px; }
.cp-paiement > .cp-logos img { width: 30px; height: 20px; }
.cp-paiement.is-indispo { opacity: .45; pointer-events: none; }
.cp-logos { display: flex; gap: 5px; }
.cp-logos img { display: block; width: 38px; height: 24px; border-radius: 4px; background: #fff; }
.cp-promo { display: grid; grid-template-columns: minmax(0, 1fr) 94px; gap: 8px; }
.cp-saisie--promo { min-height: 48px; padding: 0 12px; border-radius: 12px; cursor: text; }
.cp-saisie--promo > span { flex: 1; display: grid; min-width: 0; }
.cp-saisie--promo small { font: 500 10px/13px var(--f-body); color: #5E696B; }
.cp-saisie--promo input { height: 18px; font-size: 13px !important; text-transform: uppercase; }
.cp-saisie--promo input::placeholder { text-transform: none; color: #9AA0B4; }
.cp-promo__bouton { border: 0; border-radius: 12px; background: rgba(129, 140, 248, .08); color: var(--cp-indigo) !important; font: 600 13px/16.9px var(--f-body) !important; }
.cp-promo__info { font: 500 12px/16px var(--f-body); color: #15803D; }
.cp-promo__info.is-erreur { color: #DC2626; }
.cp-accords { display: grid; gap: 10px; }
.cp-accord { display: flex; align-items: center; gap: 10px; font: 400 12px/15.6px var(--f-body); cursor: pointer; }
.cp-accord a { color: var(--cp-indigo); }
.cp-securise { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px 0 0; font: 500 11px/14.3px var(--f-body); color: #5E696B; }
.cp-bouton[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Récapitulatif « Votre réservation : » */
.cp-recap { border-radius: 24px; background: #fff; overflow: hidden; }
.cp-recap--carte { position: fixed; z-index: 18; top: var(--cp-marge); right: var(--cp-marge); width: 391px; max-height: calc(100vh - 2 * var(--cp-marge) - 190px); overflow: auto; box-shadow: var(--cp-ombre-panneau); }
.cp-recap--feuille { display: none; }
.cp .cp-recap__tete { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 24px; border: 0; background: var(--cp-indigo); color: #fff; font: 700 20px/25px var(--f-display); text-align: start; }
/* Ordinateur : en-tête simple, toujours ouvert. Mobile : repliable (voir ≤ 860 px). */
.cp-recap--carte .cp-recap__tete { pointer-events: none; }
.cp-recap__resume, .cp-recap__chevron { display: none; }
.cp-recap__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }   /* minmax : un nom de point long se coupe (…) au lieu d’élargir la carte */
.cp-recap__bloc + .cp-recap__bloc { padding-top: 24px; border-top: 1px solid #F0F0FF; }
.cp-recap__sacs { display: grid; gap: 16px; }
.cp-recap__ligne { display: flex; align-items: center; gap: 10px; }
.cp-recap__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--cp-lavande); color: var(--cp-indigo); overflow: hidden; }
.cp-recap__ico img { width: auto; height: auto; max-width: 30px; max-height: 32px; }   /* proportions gardées : les valises sont plus hautes que larges */
.cp-recap__ico--taxi { background: #FFE08A; }
.cp-recap__ico--taxi img { max-width: 44px; max-height: 44px; }
.cp-recap__nom { flex: 1; min-width: 0; font: 600 14px/20px var(--f-body); }
.cp-recap__nom small { display: block; font: 500 10px/12.5px var(--f-display); color: #818CF8; }
.cp-recap__nom b { display: block; font: 600 16px/20px var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-recap__prix { padding: 4px 14px; border-radius: 100px; background: rgba(129, 140, 248, .07); color: var(--cp-nuit); font: 700 12px/18px var(--f-body); letter-spacing: .4px; white-space: nowrap; }
.cp-recap__qte { display: grid; place-items: center; width: 32px; height: 32px; margin-left: 24px; border: .75px solid #F4F4F4; border-radius: 50%; font: 700 16px/20px var(--f-body); color: #2F2E41; }
.cp-recap__detail { font: 400 12px/15.6px var(--f-body); color: var(--cp-gris); text-align: right; white-space: nowrap; }
.cp-recap__edit { flex: none; border: 0; padding: 0; background: none; color: var(--cp-indigo) !important; font: 700 14px/20px var(--f-body) !important; }
/* « Modifier » des bagages à droite, comme les autres lignes (demande client 2026-10-23). */
.cp-recap__bloc--sacs { display: flex; align-items: center; gap: 10px; }
.cp-recap__bloc--sacs .cp-recap__sacs { flex: 1; min-width: 0; }
.cp-recap__bloc--sacs .cp-recap__qte { margin-left: 4px; }
.cp-recap__bloc--sacs .cp-recap__prix { margin-left: auto; }

/* Billet de confirmation */
.cp-billet { position: relative; display: grid; padding: 22px 22px 40px; border-radius: 32px; background: #fff; box-shadow: 0 2px 26px rgba(0, 0, 0, .10); }
.cp-billet__qr { justify-self: center; width: 217px; height: 217px; margin-top: 20px; }
.cp-billet__qr svg { display: block; width: 100%; height: 100%; }
.cp-billet__ref { margin: 14px 0 0; text-align: center; font: 500 12px/16px var(--f-body); color: #8387B4; }
.cp-billet__ref b { color: #1E2367; font-weight: 700; letter-spacing: .5px; }
.cp-billet__ref span:not(:empty)::before { content: " · code "; }
.cp-billet__perfo { position: relative; height: 24px; margin: 20px -22px 22px; }
.cp-billet__perfo::before { content: ""; position: absolute; top: 50%; left: 36px; right: 36px; border-top: 1.5px dashed #E1E3F0; }
.cp-billet__perfo::after { content: ""; position: absolute; inset: 0 -13px; background: radial-gradient(circle at 13px 50%, #F1F2F8 12px, transparent 12.5px), radial-gradient(circle at calc(100% - 13px) 50%, #F1F2F8 12px, transparent 12.5px); }
.cp-billet__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px; margin: 0; }
.cp-billet__infos div { display: grid; gap: 10px; }
.cp-billet__infos dt { font: 500 12px/17px var(--f-display); color: #8387B4; }
.cp-billet__infos dd { margin: 0; font: 600 15px/17px var(--f-body); color: #1E2367; }
.cp-billet__large { grid-column: 1 / -1; }
.cp-billet__large dd { line-height: 22px; }
.cp-ligne-taxi { display: flex; align-items: center; gap: 10px; padding: 15px 14px; border: 1px solid #E4E6F7; border-radius: 16px; }
.cp-ligne-taxi i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #EEF0FF; color: var(--cp-indigo); }
.cp-ligne-taxi span { flex: 1; font: 400 12px/15.6px var(--f-body); color: #5E696B; }
.cp-ligne-taxi b { font: 700 13px/16.9px var(--f-body); text-align: right; }
.cp-paye { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #ECFDF3; color: #166534; }
.cp-paye span { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/15.6px var(--f-body); }
.cp-paye strong { font: 800 18px/24.6px var(--f-display); }
.cp-paye.is-a-regler { background: #FFF7E6; color: #92400E; }

/* Carte de suivi (après confirmation) */
.cp-suivi { position: fixed; z-index: 18; right: var(--cp-marge); bottom: var(--cp-marge); width: 340px; display: grid; gap: 18px; padding: 22px; border-radius: 28px; background: linear-gradient(135deg, #1A1D82, #414CF2 55%, #8698FA); color: #fff; box-shadow: 0 16px 40px -8px rgba(68, 76, 237, .35); }
.cp-suivi__tete { display: flex; align-items: center; justify-content: space-between; }
.cp-suivi__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 100px; background: #fff; color: #000072; font: 600 12px/15.6px var(--f-body); }
.cp-suivi__badge i, .cp-suivi__notif > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #444CED, #818CF8); }
.cp-suivi__fermer { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff !important; }
.cp-suivi h2 { margin: 0; font: 800 22px/26.4px var(--f-display); }
.cp-suivi > p { margin: -12px 0 0; font: 400 13px/19.5px var(--f-body); color: rgba(255, 255, 255, .85); }
.cp-suivi__notif { display: flex; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .14); box-shadow: 0 8px 20px -4px rgba(18, 20, 89, .25); }
.cp-suivi__notif > i { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.cp-suivi__notif > span { flex: 1; display: grid; gap: 3px; font: 600 12px/16.8px var(--f-body); }
.cp-suivi__notif b { display: flex; justify-content: space-between; font: 700 12px/15.6px var(--f-body); }
.cp-suivi__notif b small { font-weight: 400; font-size: 11px; }
.cp-suivi__vert { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/14.3px var(--f-body); }
.cp-suivi__vert::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.cp-suivi__lien { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; background: #fff; color: var(--cp-indigo); font: 600 15px var(--f-body); text-decoration: none; }

/* Confirmation : la carte de suivi prend le coin des contrôles (maquette « 06 »). */
body[data-ecran="confirmation"] .cp-ctrl { display: none; }
[data-taxi-destinations] { flex-wrap: nowrap; }
[data-taxi-destinations] .cp-puce { padding: 0 11px; }

@media (max-width: 860px) {
  .cp-vue--serree { padding: 12px 20px 32px; }
  .cp-recap--carte, .cp-suivi { display: none !important; }
  .cp-confirmer-montant { display: none; }   /* le total est juste au-dessus, dans la barre */
  .cp-recap--feuille { display: block; box-shadow: 0 12px 40px rgba(36, 41, 122, .20); }
  .cp-recap--feuille .cp-recap__tete { padding: 14px 20px; font-size: 16px; line-height: 22px; cursor: pointer; }
  .cp-recap--feuille .cp-recap__titre { flex: none; }
  .cp-recap--feuille .cp-recap__resume { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/18px var(--f-body); opacity: .85; }
  .cp-recap--feuille .cp-recap__chevron { display: block; flex: none; margin-inline-start: auto; transition: transform .2s; }
  .cp-recap--feuille.is-ouvert .cp-recap__chevron { transform: rotate(180deg); }
  .cp-recap--feuille:not(.is-ouvert) .cp-recap__corps { display: none; }
  .cp-recap--feuille .cp-recap__corps { padding: 20px; }
  .cp-billet { padding: 16px 16px 32px; }
  .cp-billet__perfo { margin: 16px -16px 20px; }
  .cp-billet__qr { width: 190px; height: 190px; margin-top: 12px; }
  .cp-billet__infos { gap: 26px 16px; }
}
/* La rangée des destinations ne doit jamais élargir le bloc : elle défile (maquette mobile). */
.cp-taxi, .cp-taxi__boite, .cp-taxi__details, .cp-taxi__groupe { min-width: 0; }
[data-taxi-destinations] { overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
[data-taxi-destinations]::-webkit-scrollbar { display: none; }

/* Horaires du point choisi à côté de « Dépôt » / « Récupération » ; jours fermés */
.cp-moment__horaires { margin-left: auto; padding: 3px 9px; border-radius: 100px; background: #ECFDF3; color: #15803D; font: 500 11px/14px var(--f-body); white-space: nowrap; }
.cp-moment__horaires:empty { display: none; }
.cp-jour:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
.cp-jour:disabled b { color: var(--cp-gris); }

/* Fenêtres « Modifier » de l'étape 4 (maquettes « 05a » à « 05d » : 560 px,
   rayon 32, voile flouté ; « M05a » à « M05d » : plein écran sur mobile). */
.cp-modal { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 32px; background: #fff; color: var(--cp-encre); box-shadow: 0 24px 60px rgba(18, 20, 89, .28); overflow: hidden; }
.cp-modal[open] { display: flex; }
.cp-modal::backdrop { background: rgba(18, 26, 38, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cp-modal__boite { display: flex; flex-direction: column; width: 100%; max-height: inherit; min-height: 0; }
.cp-modal__tete { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 20px 28px; border-bottom: 1px solid #F0F0FF; }
.cp-modal__ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cp-lavande); color: var(--cp-indigo); }
.cp-modal__titres { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cp-modal__titres h2 { margin: 0; font: 800 22px/28px var(--f-display); }
.cp-modal__titres p { margin: 0; font: 400 14px/21px var(--f-body); color: var(--cp-gris); }
.cp-modal__fermer { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--cp-lavande); color: var(--cp-encre) !important; }
.cp-modal__corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px 28px; }
.cp-modal__part { display: grid; gap: 20px; }
.cp-modal__part[hidden] { display: none; }
.cp-modal__info { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--cp-lavande); color: var(--cp-nuit); font: 400 14px/21px var(--f-body); }
.cp-modal__info svg { flex: none; margin-top: 1.5px; color: var(--cp-indigo); }
.cp-modal__part .cp-h3 { font-size: 16px; line-height: 20px; }
.cp-modal__duree { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 100px; background: var(--cp-lavande); color: var(--cp-nuit); font: 400 14px/18px var(--f-body); }
.cp-modal__duree span { display: inline-flex; align-items: center; gap: 8px; }
.cp-modal__duree b { font-weight: 600; white-space: nowrap; }
.cp-modal__pied { flex: none; display: flex; align-items: center; gap: 12px; padding: 20px 28px 24px; border-top: 1px solid #E5E5FF; }
.cp-modal__total { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-modal__total small { font: 400 12px/16px var(--f-body); color: var(--cp-gris); }
.cp-modal__total small:empty { display: none; }
.cp-modal__total span { display: flex; align-items: center; gap: 8px; }
.cp-modal__total strong { font: 800 22px/30px var(--f-display); color: var(--cp-indigo); white-space: nowrap; }
.cp-modal__total em { padding: 5px 10px; border-radius: 100px; background: #ECFDF3; color: #15803D; font: 500 12px/16px var(--f-body); font-style: normal; white-space: nowrap; }
.cp-modal__pied .cp-boutons { flex: none; }
.cp-modal__pied .cp-bouton { flex: none; }
.cp-modal__annuler { width: 114px; padding: 0 20px; }
.cp-modal__pied .cp-bouton--plein { width: 209px; }
.cp-modal__retirer { display: none; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; background: none; color: #DC2626 !important; font: 500 14px/18px var(--f-body) !important; white-space: nowrap; }
.cp-modal[data-type="taxi"] .cp-modal__retirer--pied { display: inline-flex; flex: 1; justify-content: flex-start; }
.cp-modal[data-type="taxi"] .cp-modal__total { display: none; }
/* Changer de point */
.cp-modal__carte { height: 170px; border-radius: 20px; overflow: hidden; background: #ECEAF3; }
.cp-modal__carte .cp-pin { pointer-events: none; }
.cp-choix { display: grid; gap: 20px; }
.cp-choix__item { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border: .75px solid #E5E5FF; border-radius: 20px; background: #fff; cursor: pointer; }
.cp-choix__item.is-choisi { border: .5px solid rgba(68, 76, 237, .8); background: var(--cp-lavande); }
.cp-choix__item.is-off { opacity: .55; cursor: not-allowed; }
.cp-choix__item:focus-within { outline: 2px solid var(--cp-indigo); outline-offset: 2px; }
.cp-choix__item input { position: absolute; opacity: 0; pointer-events: none; }
.cp-choix__img { flex: none; width: 86px; height: 86px; border-radius: 14px; object-fit: cover; background: var(--cp-degrade); }
.cp-choix__corps { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cp-choix__titre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-choix__titre b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/22px var(--f-display); }
.cp-choix__corps > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/18px var(--f-body); color: var(--cp-gris); }
.cp-choix__corps .cp-tags { gap: 6px; }
.cp-tag--blanc { background: #fff; border: .75px solid #E5E5FF; }
.cp-choix__radio { flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 1.2px solid #E5E5FF; border-radius: 50%; background: #fff; }
.cp-choix__item.is-choisi .cp-choix__radio { border: 6px solid var(--cp-indigo); }
@media (max-width: 860px) {
  .cp-modal { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .cp-modal__boite { max-height: none; }
  .cp-modal__tete { position: relative; display: grid; justify-items: center; gap: 12px; padding: 16px 20px 20px; text-align: center; }
  .cp-modal__ico { display: none; }
  .cp-modal__titres h2 { padding: 0 44px; font: 700 18px/40px var(--f-display); }
  .cp-modal__fermer { position: absolute; top: 16px; left: 20px; }
  .cp-modal__corps { padding: 20px; }
  .cp-modal__pied { display: grid; gap: 16px; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .cp-modal__total, .cp-modal[data-type="taxi"] .cp-modal__total { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .cp-modal[data-type="taxi"] .cp-modal__total { justify-content: flex-end; }
  .cp-modal__total small { font-size: 14px; }
  .cp-modal__total span { flex-direction: row-reverse; }
  .cp-modal[data-type="taxi"] .cp-modal__total strong { font: 600 14px/18px var(--f-body); color: var(--cp-encre); }
  .cp-modal__pied .cp-boutons { display: flex; }
  .cp-modal__annuler { flex: .5 !important; width: auto; }
  .cp-modal__pied .cp-bouton--plein { flex: 1 !important; width: auto; }
  .cp-modal[data-type="taxi"] .cp-modal__retirer--pied { display: none; }
  .cp-modal[data-type="taxi"] .cp-modal__retirer--bloc { display: flex; width: 100%; min-height: 44px; border-radius: 100px; background: #FEF2F2; font-weight: 600 !important; }
  .cp-choix__img { width: 64px; height: 64px; }
  .cp-choix__item { gap: 12px; padding: 12px; }
}
.cp-modal__boite:focus { outline: none; }   /* focus posé à l'ouverture : pas d'anneau sur la croix */
.cp-modal__mobile { display: none; }
@media (max-width: 860px) { .cp-modal__ordi { display: none; } .cp-modal__mobile { display: inline; } }
/* Code promo replié : une ligne « Ajouter un code promo › » (2026-10-23). */
.cp-promo-ouvrir { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid #ECECF3; background: none; color: var(--cp-encre) !important; font: 400 14px/18px var(--f-body) !important; cursor: pointer; text-align: left; }
.cp-promo-ouvrir svg { flex: none; color: #8A8FA3; transition: transform .2s; }
.cp-promo-ouvrir[aria-expanded="true"] svg { transform: rotate(90deg); }
.cp-promo-zone { display: grid; gap: 8px; }
.cp-promo-zone[hidden] { display: none; }
.cp-demo { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #FEF3C7; color: #92400E; font: 500 12px/16px var(--f-body); }

/* Tirer pour actualiser (mobile) : rond qui descend sous l'en-tête. */
.cp-actualiser { position: fixed; z-index: 30; left: 50%; top: calc(var(--h-entete, 234px) - 20px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--cp-indigo); box-shadow: 0 4px 16px rgba(35, 42, 122, .22); transform: translate(-50%, 0); pointer-events: none; }
.cp-actualiser.is-pret { background: var(--cp-indigo); color: #fff; }
.cp-actualiser.is-charge svg { animation: cp-tourne .8s linear infinite; }
@keyframes cp-tourne { to { transform: rotate(360deg); } }

/* Aperçu d'un point (mobile seulement, comme Bounce). */
.cp-apercu { display: none; }
@media (max-width: 860px) {
  .cp-apercu { position: fixed; z-index: 23; left: 12px; right: 12px; bottom: 166px; display: flex; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(35, 42, 122, .22); animation: cp-apparait .15s ease-out; }
  .cp-apercu[hidden] { display: none; }
  .cp-apercu__ouvrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 44px 10px 10px; border: 0; border-radius: 18px; background: none; color: inherit; text-align: left; cursor: pointer; }
  .cp-apercu__ouvrir img { flex: none; width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: var(--cp-lavande); }
  .cp-apercu__corps { min-width: 0; display: grid; gap: 4px; }
  .cp-apercu__corps b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/20px var(--f-body); color: var(--cp-encre); }
  .cp-apercu__corps small { font: 500 13px/17px var(--f-body); color: var(--cp-gris); }
  .cp-apercu__corps small .is-ok { color: #15803D; }
  .cp-apercu__corps small .is-ko { color: #B91C1C; }
  .cp-apercu__bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .cp-apercu__note { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 100px; background: #E6E8FF; color: var(--cp-indigo); font: 700 13px/16px var(--f-body); }
  .cp-apercu__note svg { color: var(--cp-indigo); }
  .cp-apercu__prix { font: 500 13px/16px var(--f-body); color: var(--cp-encre); }
  .cp-apercu__fermer { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--cp-trait); border-radius: 50%; background: #fff; color: var(--cp-encre); }
}

/* Rafraîchissement : feuille et aperçu cachés le temps de remettre l'écran
   enregistré (classe posée par carte-reprise.js). */
html.cp-reprise .cp-feuille, html.cp-reprise .cp-panneau .cp-defile, html.cp-reprise .cp-pied, html.cp-reprise .cp-apercu { visibility: hidden; transition: none !important; }

/* Sélecteur de langue (2026-10-26) : <details> + liens vers les 6 versions
   de /points/, sans JavaScript ; le déclencheur garde la pilule .cp-langue. */
.cp-langue-menu { position: relative; z-index: 5; }
.cp-langue-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.cp-langue-menu > summary::-webkit-details-marker { display: none; }
.cp-langue-menu > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-langue-menu > summary svg { transition: transform .2s; }
.cp-langue-menu[open] > summary svg { transform: rotate(180deg); }
.cp-langue-menu ul { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(18, 22, 70, .22); }
.cp-langue-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; color: #1F2433; font: 500 14px/1.2 var(--f-body); text-decoration: none; }
.cp-langue-menu a b { min-width: 22px; color: #676F78; font-size: 11px; font-weight: 700; }
.cp-langue-menu a:hover, .cp-langue-menu a:focus-visible { background: #F1F2FE; outline: none; }
.cp-langue-menu a[aria-current] { background: #EEF0FF; color: var(--cp-indigo); font-weight: 700; }
.cp-langue-menu a[aria-current] b { color: var(--cp-indigo); }

/* Drapeaux du menu des langues (2026-10-26), mêmes fichiers que l'en-tête du site. */
.cp-langue-menu > summary { display: inline-flex; align-items: center; gap: 6px; }
.cp-drapeau { display: block; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* Menu des devises (2026-10-26) : boutons présentés comme les liens de langue. */
.cp-devise-menu ul { min-width: 170px; }
.cp-langue-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: #1F2433; font: 500 14px/1.2 var(--f-body); text-align: start; cursor: pointer; }
.cp-langue-menu button b { min-width: 30px; color: #676F78; font-size: 12px; font-weight: 700; }
.cp-langue-menu button:hover, .cp-langue-menu button:focus-visible { background: #F1F2FE; outline: none; }
.cp-langue-menu button[aria-current] { background: #EEF0FF; color: var(--cp-indigo); font-weight: 700; }
.cp-langue-menu button[aria-current] b { color: var(--cp-indigo); }

/* Menu des devises compact, centré sous sa pilule (retour client 2026-10-26) :
   symbole + code seulement. */
.cp-devise-menu ul { min-width: 0; width: max-content; left: 50%; right: auto; transform: translateX(-50%); padding: 4px; }
.cp-devise-menu button { justify-content: center; gap: 6px; padding: 7px 12px; font-size: 13px; }
.cp-devise-menu button b { min-width: 0; font-size: 13px; }

/* Étape 3 : avantages du taxi, 4 tuiles avec icône (2026-11-01, remplace la phrase d'intro) */
.cp-taxi__atouts { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-taxi__atouts li { display: flex; overflow-wrap: anywhere; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--cp-lavande); border: .75px solid var(--cp-trait); font: 600 13px/17px var(--f-body); color: var(--cp-nuit); }
.cp-taxi__atout-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--cp-indigo); box-shadow: 0 1px 2px rgba(36, 41, 122, .10); }
/* Petits écrans : toujours 2 par ligne, en plus compact (2026-11-01). */
@media (max-width: 380px) {
  .cp-taxi__atouts { gap: 6px; }
  .cp-taxi__atouts li { gap: 7px; padding: 8px; border-radius: 12px; font-size: 12px; line-height: 15px; }
  .cp-taxi__atout-ico { width: 26px; height: 26px; border-radius: 8px; }
  .cp-taxi__atout-ico svg { width: 15px; height: 15px; }
}