/* ============================================================
   PAGE DEMANDE DE DEVIS — page unique (design v2, pixel-perfect)
   Figma desktop 2231:3233 · mobile 2231:5194
   Tokens hérités de base.css (crème #efece9, ink #0f1b24, sauge #9f9a7c,
   orange #f39e00, placeholder #949494). Ne style QUE le tunnel devis.
============================================================ */

body.devis-page { background-color: #ffffff; }

/* Le header sticky (.devis-topbar) était neutralisé par `body,html{overflow-x:hidden}`
   (body/body.css, chargé partout) : `overflow-x:hidden` force `overflow-y:auto`,
   donc body devient un conteneur de défilement → position:sticky ne colle plus.
   `overflow-x:clip` bloque le scroll horizontal SANS créer ce conteneur : le
   sticky refonctionne, et le garde-fou anti-scroll-horizontal reste. Règles
   séparées → si :has() n'est pas supporté, seul le html est ignoré. */
body.devis-page { overflow-x: clip; }
html:has(body.devis-page) { overflow-x: clip; }

/* Header minimal : bouton Fermer. */
.devis-page .devis-topbar {
  position: sticky;   /* le header reste en haut au défilement */
  top: 0;
  z-index: 100;       /* au-dessus du formulaire, sous la pop-in (z-index 1000) */
  background: #fff;   /* opaque : le formulaire ne transparaît pas dessous */
}
.devis-page .devis-topbar .container {
  height: 64px;
  display: flex;
  align-items: center;
}
.devis-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f1b24;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.devis-close:hover { opacity: .7; }
@media (min-width: 769px) {
  .devis-page .devis-topbar .container { height: 84px; }
}
/* Mobile : croix seule, pas de libellé « Fermer ». */
@media (max-width: 768px) {
  .devis-close__txt { display: none; }
}

/* Gouttières de la page devis (design system v2 : 100px « full » jusqu'au
   breakpoint 1100, puis 30px en dessous). Le .container partagé passe en
   padding:0 dès 769px → sans ça le contenu colle aux bords entre 769 et 1166px. */
.devis-page .container { padding-left: 100px; padding-right: 100px; }
@media (max-width: 1099px) {
  .devis-page .container { padding-left: 30px; padding-right: 30px; }
}

/* ============================================================
   TITRE + CONTENEUR FORMULAIRE (colonne 964 centrée)
============================================================ */
.devis { padding: 30px 0 60px; }
.devis__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  color: #0f1b24;
  text-align: center;
  margin: 0 0 40px;
}
@media (min-width: 769px) {
  .devis { padding: 60px 0 90px; }
  .devis__title { font-size: 60px; margin-bottom: 60px; }
}

.devis-form {
  max-width: 964px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ============================================================
   SECTIONS (badge n° + titre, corps)
============================================================ */
.devis-section { display: flex; flex-direction: column; gap: 60px; }
.devis-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.devis-section__num {
  width: 26px;
  height: 26px;
  border: 1px solid #9f9a7c;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #9f9a7c;
}
.devis-section__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  text-align: center;
  margin: 0;
}
.devis-section__body { display: flex; flex-direction: column; gap: 25px; }

/* ============================================================
   LIGNES / GRILLE (2 colonnes desktop, 1 colonne mobile)
============================================================ */
.devis-row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 769px) {
  .devis-row { flex-direction: row; align-items: flex-start; }
  .devis-row > * { flex: 1 1 0; min-width: 0; }
  .devis-row--half > * { flex: 0 0 calc(50% - 10px); }
}
.devis-block { display: flex; flex-direction: column; gap: 20px; }
.devis-label {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}
.devis-hint {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: #0f1b24;
  margin: -10px 0 0;
  max-width: 472px;
}
.devis-required {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #9f9a7c;
  text-align: right;
  margin: 0;
}
/* Mobile : la note « *champs obligatoires » passe centrée (maquette mobile). */
@media (max-width: 768px) {
  .devis-required { text-align: center; }
}

/* Masquage accessible (vrais champs pilotés par une UI custom). */
.devis-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ============================================================
   CHAMPS « pill » (input texte / select / date)
   Bordure sauge, radius 30, hauteur 46, placeholder gris.
============================================================ */
.devis-field { position: relative; }
.devis-field input[type="text"],
.devis-field input[type="email"],
.devis-field input[type="tel"],
.devis-field input[type="number"],
.devis-field input:not([type]) {
  width: 100%;
  height: 46px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  padding: 0 17px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 16px;
  color: #0f1b24;
  outline: none;
  box-sizing: border-box;
}
.devis-field input::placeholder { color: #949494; opacity: 1; }
.devis-field input:focus { border-color: #615d48; }
/* Chevron des selects/dates. */
.devis-field__chevron {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
}
.devis-field--select { position: relative; }

/* Bouton « effacer » (X sauge) à droite des champs texte remplis
   (Figma 857:6602 etc. — close #9f9a7c, 20px). Masqué tant que le champ est
   vide ; on réserve la place à droite pour ne pas passer sous l'icône. */
.devis-field--clearable input { padding-right: 44px; }
.devis-clear {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.devis-field--clearable.has-value .devis-clear { display: inline-flex; }
/* Zone de texte « projet » (Figma 857:2263) : le X se cale en HAUT à droite
   (le texte peut occuper plusieurs lignes), et on réserve la colonne de droite. */
.devis-field--textarea .devis-textarea { padding-right: 44px; }
.devis-field--textarea .devis-clear { top: 15px; right: 17px; transform: none; }

/* Textarea projet. */
.devis-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid #9f9a7c;
  border-radius: 23px;
  background: #fff;
  padding: 15px 17px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 18px;
  color: #0f1b24;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.devis-textarea::placeholder { color: #949494; opacity: 1; }
.devis-textarea:focus { border-color: #615d48; }

/* État ERREUR (validation) — conforme à la maquette (Figma 857:7590) : SEUL le
   texte/placeholder des champs obligatoires incomplets / non valides passe en
   rouge #FF0000 ; la BORDURE reste sauge #9F9A7C (champs, selects2, bascule
   civilité, zone de texte). Message global + note « *champs obligatoires » idem. */
.devis-field.is-error input,
.devis-field.is-error input::placeholder,
.devis-field.is-error .devis-textarea,
.devis-field.is-error .devis-textarea::placeholder { color: #ff0000; }
.devis-field.is-error .select2-selection__placeholder,
.devis-field.is-error .select2-selection__rendered { color: #ff0000 !important; }
/* Select « Comment connu ? / pays » en erreur : placeholder + valeur en rouge.
   La couleur grise par défaut (#949494) a une spécificité (0,5,0)+!important
   (cf. .devis-field--select … .select2-selection__placeholder) → il faut une
   spécificité au moins égale : on ajoute .devis-field + .is-error (0,6,0). Le
   <select> natif (avant init select2) est couvert en fallback. */
.devis-field.devis-field--select.is-error .select2-container--default .select2-selection--single .select2-selection__placeholder,
.devis-field.devis-field--select.is-error .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ff0000 !important;
}
.devis-field.devis-field--select.is-error select { color: #ff0000 !important; }
.devis-toggle.is-error .devis-pill span { color: #ff0000; }

/* Message d'erreur global, sous « 1. Votre voyage ». */
.devis-form-error {
  margin: 0;
  color: #ff0000;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}
.devis-form-error[hidden] { display: none; }

/* Note « *champs obligatoires » passée en rouge. */
.devis-required.is-error { color: #ff0000; }

/* Captcha non valide : encadrement rouge tout autour du widget (le conteneur
   épouse le widget grâce à align-self:flex-start sur .devis-captcha). */
.devis-captcha.is-error {
  border: 2px solid #ff0000;
  border-radius: 6px;
  padding: 4px;
  background: rgba(255, 0, 0, 0.04);
}
/* Message d'erreur explicite du captcha (rouge via .devis-form-error), aligné
   sous le widget (à gauche) plutôt que centré. */
.devis-captcha-error { margin: 8px 0 0; text-align: left; }
/* Message « Adresse mail non valide » sous la ligne tél/email, aligné à gauche. */
.devis-email-error { margin: 8px 0 0; text-align: left; }
/* Message « Veuillez sélectionner une réponse » sous « Comment connu ? », à gauche. */
.devis-site-error { margin: 8px 0 0; text-align: left; }

/* ============================================================
   COMPTEURS adultes / enfants
============================================================ */
.devis-counters {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 46px;
}
.devis-counter {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.devis-counter__label { display: flex; flex-direction: column; gap: 3px; }
.devis-counter__name {
  font-family: 'Lexend', sans-serif; font-weight: 300;
  font-size: 13px; line-height: 18px; color: #0f1b24;
}
.devis-counter__sub {
  font-family: 'Lexend', sans-serif; font-weight: 300;
  font-size: 13px; line-height: 18px; color: #9f9a7c;
}
.devis-counter__picker { display: flex; align-items: center; gap: 10px; }
.devis-counter__btn {
  width: 28px; height: 28px;
  border: 1px solid #9f9a7c;
  border-radius: 50%;
  background: #fff;
  color: #9f9a7c;
  position: relative;   /* repère pour les barres +/− */
  font-size: 0;         /* on masque le glyphe texte : les barres sont dessinées */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
/* +/− dessinés au pixel près, centrés (indépendant des métriques de la police,
   qui décalaient légèrement le glyphe). Barre horizontale sur les deux boutons ;
   barre verticale ajoutée pour le « + ». currentColor suit l'état .is-filled. */
.devis-counter__btn::before,
.devis-counter__btn[data-dir="1"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.devis-counter__btn::before { width: 10px; height: 1.5px; }
.devis-counter__btn[data-dir="1"]::after { width: 1.5px; height: 10px; }
/* Remplissage sauge = bouton actionnable (Figma 857:6540) : le − est plein dès
   que la valeur ≥ 1 ; le + tant que la valeur < 30. La borne (− à 0, + à 30)
   reste blanche (bordure + glyphe sauge) et inactive. */
.devis-counter__btn.is-filled { background: #9f9a7c; color: #fff; }
.devis-counter__btn:not(.is-filled) { cursor: default; }
.devis-counter__val {
  min-width: 18px; text-align: center;
  font-family: 'Lexend Peta', sans-serif; font-weight: 400;
  font-size: 13px; line-height: 18px; color: #0f1b24;
}
/* Mobile : compteurs EMPILÉS (Adultes puis Enfants), chacun pleine largeur —
   label/sous-label à gauche, sélecteur ± à droite (Figma 857:8051). */
@media (max-width: 768px) {
  .devis-counters {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    height: auto;
  }
  .devis-counter { flex: 0 0 auto; }
  .devis-counter__sub { white-space: nowrap; }
}

/* ============================================================
   CHIPS « envies » (et pills civilité) — outline sauge / actif rempli
============================================================ */
.devis-chips { display: flex; flex-wrap: wrap; gap: 15px; }
.devis-chip, .devis-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  cursor: pointer;
  margin: 0;
  transition: background-color .15s ease, color .15s ease;
}
.devis-chip span, .devis-pill span {
  font-family: 'Lexend', sans-serif; font-weight: 400;
  font-size: 15px; line-height: 24px; color: #9f9a7c;
  white-space: nowrap;
}
.devis-chip input, .devis-pill input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.devis-chip:has(input:checked), .devis-chip.is-active,
.devis-pill:has(input:checked), .devis-pill.is-active {
  background: #9f9a7c; border-color: #9f9a7c;
}
.devis-chip:has(input:checked) span, .devis-chip.is-active span,
.devis-pill:has(input:checked) span, .devis-pill.is-active span { color: #fff; }

.devis-toggle { display: flex; gap: 15px; }

/* Survol : envies + civilité deviennent sauge (#9F9A7C). */
.devis-chip:hover, .devis-pill:hover { background: #9f9a7c; border-color: #9f9a7c; }
.devis-chip:hover span, .devis-pill:hover span { color: #fff; }

/* Champs date « Du… / Au… » (readonly, style pill, curseur pointer). */
.devis-date-display {
  width: 100%;
  height: 46px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  padding: 0 44px 0 17px;
  font-family: 'Lexend Deca', sans-serif; font-weight: 300;
  font-size: 13px; color: #0f1b24;
  outline: none; cursor: pointer; box-sizing: border-box;
}
.devis-date-display::placeholder { color: #949494; opacity: 1; }
/* « Je n'ai pas de dates précises » : champ retour grisé/désactivé (maquette 857:3716). */
.devis-date-display.is-nodate,
.devis-date-display:disabled { opacity: 0.45; cursor: not-allowed; background: #fff; }

/* ============================================================
   CASES À COCHER (newsletter, captcha) — cercle custom
============================================================ */
.devis-checks { display: flex; flex-direction: column; gap: 10px; }
.devis-check {
  display: inline-flex; align-items: center; gap: 15px;
  cursor: pointer; margin: 0; position: relative;
}
.devis-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.devis-check__box {
  width: 18.481px; height: 18.481px;
  border: 1px solid #9f9a7c; border-radius: 50%;
  flex-shrink: 0; position: relative; background: #fff;
}
.devis-check:has(input:checked) .devis-check__box,
.devis-check.is-active .devis-check__box {
  background: #9f9a7c;
  box-shadow: inset 0 0 0 3px #fff;
}
.devis-check__label {
  font-family: 'Lexend', sans-serif; font-weight: 300;
  font-size: 13px; line-height: 24px; color: #0f1b24;
}
.devis-captcha { min-height: 24px; align-self: flex-start; }

/* ============================================================
   BOUTON ENVOYER — reste cliquable (révèle les erreurs au clic), mais son
   APPARENCE reflète la complétude du formulaire : orange 50% si incomplet,
   orange plein (100%) si complet ; survol coloré uniquement à l'état complet.
============================================================ */
.devis-submit {
  align-self: center;
  margin-top: 20px;
  min-width: 203px;
  background-color: rgba(243, 158, 0, 0.5);   /* incomplet : orange 50% */
  border-color: rgba(243, 158, 0, 0.5);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Neutralise le fondu générique .btn:hover (opacity .85) : ici le survol
   change la COULEUR, et seulement quand le formulaire est complet. */
.devis-submit:hover { opacity: 1; }
.devis-submit.is-complete {
  background-color: #f39e00;                    /* complet : orange plein */
  border-color: #f39e00;
}
.devis-submit.is-complete:hover {
  background-color: #d98c00;                    /* survol : orange plus soutenu */
  border-color: #d98c00;
}

/* ============================================================
   SELECT2 (pays + « comment connu ») rendus comme un champ pill
============================================================ */
.devis-field--select .select2-container { width: 100% !important; }
.devis-field--select .select2-container--default .select2-selection--single {
  height: 46px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 17px;
}
.devis-field--select .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 22px 0 0; /* réserve la place du chevron à droite */
  color: #0f1b24;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 46px;
}
/* Placeholder gris #949494 (Figma 857:8090). !important : un style global du
   thème force `.select2-selection__placeholder{color:#000!important}` — on le
   bat avec une règle plus spécifique, elle aussi !important. */
.devis-field--select .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #949494 !important; }
/* Chargement de la page : avant l'init de select2, le <select> NATIF affiche son
   placeholder en noir (flash). On le met en gris #949494 comme la maquette
   (857:8090) ; après init, select2 masque le <select> → sans effet. */
.devis-field--select select { color: #949494; }
/* Flèche du select — chevron EXACT de la maquette (Figma 857:2234 fermé /
   857:2482 ouvert) : sauge #9F9A7C, trait 1.25, chevron large. On masque le
   triangle noir de select2. Fermé → chevron vers le BAS. */
.devis-field--select .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  top: 0;
  right: 17px;
  width: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M17%207L10%2014L3%207'%20stroke='%239F9A7C'%20stroke-width='1.25'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.devis-field--select .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
/* Liste ouverte → le chevron bascule vers le HAUT (Figma 857:2482). */
.devis-field--select .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M17%2014L10%207L3%2014'%20stroke='%239F9A7C'%20stroke-width='1.25'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
/* La « bulle » (pill) ne change pas de forme à l'ouverture : select2 carre les
   coins quand le dropdown s'ouvre → on fige le rayon à 30.076px (identique
   fermé/ouvert dans la maquette). */
.devis-field--select .select2-container--default.select2-container--open .select2-selection--single { border-radius: 30.076px !important; }

/* ============================================================
   LES ÉTAPES DE CRÉATION + VISUEL
============================================================ */
.devis-steps { background: #fff; padding: 40px 0; border-top: 0.7px solid #e3e0dc; }
.devis-steps__inner { display: flex; flex-direction: column; gap: 30px; }
.devis-steps__title {
  font-family: 'Asul', sans-serif; font-weight: 400;
  font-size: 26px; line-height: 1.15; color: #0f1b24; margin: 0;
}
.devis-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.devis-step { display: flex; flex-direction: column; gap: 16px; max-width: 160px; }
.devis-step__num {
  width: 26px; height: 26px; border: 1px solid #9f9a7c; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Lexend Deca', sans-serif; font-weight: 500; font-size: 13px; color: #9f9a7c;
}
.devis-step__label {
  font-family: 'Lexend', sans-serif; font-weight: 300;
  font-size: 15px; line-height: 24px; color: #0f1b24;
}
@media (min-width: 769px) {
  .devis-steps { padding: 60px 0; }
  .devis-steps__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .devis-steps__title { font-size: 35px; }
  .devis-steps__list { flex-direction: row; gap: 40px; }
}
/* Mobile : tout le contenu du bloc « étapes » centré (Figma 857:7505) —
   titre, pastilles numérotées et libellés. */
@media (max-width: 768px) {
  .devis-steps__inner { align-items: center; }
  .devis-steps__title { text-align: center; }
  .devis-steps__list { align-items: center; }
  .devis-step { align-items: center; text-align: center; }
}

.devis-visuel { width: 100%; height: 350px; overflow: hidden; }
.devis-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 769px) { .devis-visuel { height: 480px; } }

/* ============================================================
   DROPDOWN select2 (pays + « comment connu ») + RECHERCHE
   Figma 2281:9342 / 2281:9590
============================================================ */
.select2-container--open .select2-dropdown {
  border: 1px solid #9f9a7c;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 27, 36, 0.08);
}
.select2-search--dropdown { padding: 12px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #9f9a7c;
  border-radius: 30px;
  height: 40px;
  padding: 0 15px;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
  color: #0f1b24;
  outline: none;
}
.select2-results__options { padding: 0 12px 12px; }
.select2-container--default .select2-results__option {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: #0f1b24;
  padding: 8px 6px;
  border-radius: 8px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #efece9;
  color: #0f1b24;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: transparent;
  color: #9f9a7c;
  font-weight: 400;
}

/* ============================================================
   PAYS uniquement (#demande_devis_country) — « search-in-field » Figma.
   Scopé via .devis-country-container (champ) + .devis-country-dropdown
   (menu) : n'affecte JAMAIS siteDiscovery, qui garde le dropdown générique.
   La boîte de recherche est tirée par-dessus le champ (transparente, sans
   bordure) ; la liste blanche arrondie tombe juste sous le champ (gap 4px).
============================================================ */
/* Champ ouvert : on masque le placeholder rendu (la recherche prend sa place).
   Scopé au champ pays via .devis-field--country (le dropdown, lui, est en <body>). */
.devis-field--country .select2-container--open .select2-selection__rendered { visibility: hidden; }

/* Le dropdown lui-même n'est plus une boîte : transparent, remonté de la
   hauteur du champ (46px) pour que la recherche recouvre le champ.
   !important : un CSS global du thème force .select2-dropdown en crème #efece9 ;
   on ne surcharge QUE le dropdown pays (siteDiscovery garde sa boîte crème). */
.select2-container--open .select2-dropdown.devis-country-dropdown {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
/* Le remontage de 46px n'a de sens qu'en ouverture VERS LE BAS (cas de la page :
   le champ pays est haut, il y a toujours la place dessous). En --above, on ne
   remonte pas pour éviter tout décalage. */
.select2-container--open .select2-dropdown.devis-country-dropdown.select2-dropdown--below {
  transform: translateY(-46px);
}
/* Recherche = recouvre le champ pill (46px) ; texte identique au champ. */
.select2-dropdown.devis-country-dropdown .select2-search--dropdown {
  padding: 0;
  height: 46px;
  background: transparent;
  border: none;
}
.select2-dropdown.devis-country-dropdown .select2-search--dropdown .select2-search__field {
  height: 46px;
  margin: 0;
  padding: 0 40px 0 17px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 46px;
  color: #0f1b24;
}
.select2-dropdown.devis-country-dropdown .select2-search--dropdown .select2-search__field::placeholder { color: #949494; opacity: 1; }

/* Liste blanche arrondie, juste sous le champ (petit gap 4px). */
.select2-dropdown.devis-country-dropdown .select2-results {
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e3e0dc;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 27, 36, 0.08);
  overflow: hidden;
}
.select2-dropdown.devis-country-dropdown .select2-results__options {
  max-height: 260px;
  overflow-y: auto;
  /* Un peu d'air autour de la liste (Figma 857:2578). */
  padding: 14px 18px;
  scrollbar-width: thin;
  scrollbar-color: #cfcac2 transparent;
  margin-left: 20px;
}
.select2-dropdown.devis-country-dropdown .select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-dropdown.devis-country-dropdown .select2-results__options::-webkit-scrollbar-thumb { background: #cfcac2; border-radius: 3px; }
.select2-dropdown.devis-country-dropdown .select2-results__options::-webkit-scrollbar-track { background: transparent; }

/* Items : Lexend Deca 300 13px ink, padding confortable, coins arrondis. */
.select2-dropdown.devis-country-dropdown .select2-results__option {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 24px;
  color: #0f1b24;
  padding: 5px 8px;
  border-radius: 8px;
}
/* Item survolé/clavier : texte sauge souligné, SANS fond (la ligne reste blanche
   comme les autres). !important : un CSS global du thème force un fond crème
   #efece9 sur l'item survolé — on le neutralise pour le seul dropdown pays. La
   teinte sauge + le soulignement viennent, eux, du thème. */
.select2-dropdown.devis-country-dropdown .select2-results__option--highlighted[aria-selected] {
  background: transparent !important;
  color: #9f9a7c;
}
/* Item sélectionné : texte sauge. */
.select2-dropdown.devis-country-dropdown .select2-results__option[aria-selected="true"] {
  background: transparent;
  color: #9f9a7c;
  font-weight: 400;
}

/* ============================================================
   CALENDRIER Lightpick (dates) — Figma 857:3867 (aller) / 857:4166 (retour)
   Panneau blanc arrondi : en-tête (titre + « Je n'ai pas de dates précises »),
   2 mois (titres sauge, jours de semaine gris), jours sélectionnés sauge en
   carré arrondi + plage claire continue, pied « Réinitialiser » (retour).
============================================================ */
.lightpick {
  border: 1px solid #e3e0dc;
  border-radius: 20px;
  padding: 24px 28px;
  font-family: 'Lexend', sans-serif;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 27, 36, 0.12);
  z-index: 9999;
}
.lightpick__inner { position: relative; }

/* En-tête injecté (JS) : titre centré + lien « Je n'ai pas de dates précises ». */
.devis-cal__head { text-align: center; margin-bottom: 20px; }
.devis-cal__title {
  margin: 0 0 8px;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
}
.devis-cal__nodate,
.devis-cal__reset {
  display: inline-block;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  color: #9f9a7c;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.devis-cal__nodate:hover,
.devis-cal__reset:hover { color: #9f9a7c; }

/* Pied injecté (JS, mode retour) : lien « Réinitialiser » centré. */
.devis-cal__foot { text-align: center; margin-top: 16px; }

/* Flèches prev/next : chevrons sauge (texte natif masqué), calées à droite/
   gauche sur la ligne des titres de mois (position posée par le JS). */
.lightpick__toolbar {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.lightpick__previous-action,
.lightpick__next-action {
  pointer-events: auto;
  background: transparent;
  border: none;
  padding: 0;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  position: relative;
}
.lightpick__previous-action::before,
.lightpick__next-action::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.25px solid #9f9a7c;
  border-right: 1.25px solid #9f9a7c;
}
.lightpick__next-action::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightpick__previous-action::before { transform: translate(-50%, -50%) rotate(-135deg); }
.lightpick__previous-action[disabled],
.lightpick__previous-action.is-hidden { visibility: hidden; }
.lightpick__close-action { display: none; }

/* Grille des mois : fond blanc, espace entre les 2 mois (pas de liseré gris). */
.lightpick__months {
  background-color: #fff !important;
  grid-gap: 0 40px !important;
}
.lightpick__month { width: 288px; background-color: #fff !important; padding: 0; }

/* Titre de mois « AVRIL 2026 » sur une ligne, centré, sauge (Lexend Peta).
   NB : le titre est un <header> → il héritait de la règle globale
   `header{position:absolute;top:0;height:60px;background:gradient}` (topbar) et
   chevauchait l'en-tête ; on remet donc tout à plat. */
.lightpick__month-title-bar {
  position: static !important;
  top: auto !important;
  height: auto !important;
  background: none !important;
  padding: 0 !important;
  justify-content: center;
  margin-bottom: 16px;
}
.lightpick__month-title {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  justify-content: center;
  margin: 0;
}
.lightpick__month-title .lightpick__select,
.lightpick__month-title select {
  font-family: 'Lexend Peta', sans-serif !important;
  font-size: 13px !important;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9f9a7c !important;
  font-weight: 400;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center;
  padding: 0 2px;
  margin: 0 !important;
  width: auto;
  cursor: pointer;
}

/* Jours de la semaine : minuscules, gris. */
.lightpick__day-of-the-week {
  color: #949494;
  font-size: 12px;
  font-weight: 300;
  text-transform: lowercase;
}

/* Jours. Sélection CARRÉE (pas d'arrondi). */
.lightpick__day {
  color: #0f1b24;
  font-weight: 300;
  font-size: 13px;
  border-radius: 0;
}
.lightpick__day.is-today { color: #f39e00; }
.lightpick__day:hover {
  background-color: rgba(159, 154, 124, 0.20);
  border-radius: 0;
}
/* Plage : bande claire continue (pas d'arrondi entre les jours). */
.lightpick__day.is-in-range {
  background-color: rgba(159, 154, 124, 0.22) !important;
  color: #0f1b24 !important;
  border-radius: 0;
}
/* Départ / retour : carré sauge plein, texte blanc. */
.lightpick__day.is-start-date,
.lightpick__day.is-end-date,
.lightpick__day.is-start-date:hover,
.lightpick__day.is-end-date:hover {
  background-color: #9f9a7c !important;
  color: #fff !important;
  border-radius: 0;
}
/* Le thème de base Lightpick arrondit les EXTRÉMITÉS de la plage
   (.is-start-date.is-in-range / .is-end-date.is-in-range en border-radius 50%,
   spécificité 0,3,0) → on force le carré avec !important. */
.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped,
.lightpick__day.is-end-date.is-in-range.is-flipped,
.lightpick__day.is-start-date.is-end-date {
  border-radius: 0 !important;
}
/* Le thème Lightpick de base peint un cercle SVG (background-image) sur les jours
   survolés / de plage / sélectionnés — il masquait notre sauge, si bien que la
   date de RETOUR survolée s'affichait en bleu-gris. On retire ces images pour
   laisser voir la sauge #9F9A7C (couleur demandée au survol de la date retour). */
.lightpick__day:hover,
.lightpick__day.is-in-range,
.lightpick__day.is-start-date,
.lightpick__day.is-end-date {
  background-image: none !important;
}
.lightpick__day.is-disabled { color: #cfcac2; }

/* ---- Mobile (≤768px) : calendrier vertical déroulant façon eluxtravel.
   De nombreux mois pleine largeur empilés (1 colonne) ; seuls les mois
   défilent (scroll interne), l'en-tête (titre + « Je n'ai pas de dates
   précises ») reste en haut et le pied « Réinitialiser » en bas ; pas de
   flèches (navigation au scroll). Le desktop (≥769px) reste inchangé.
   Figma 857:8459 (départ) / 857:9269 (retour). ---- */
@media (max-width: 768px) {
  /* Panneau pleine largeur sous le champ, aligné sur le conteneur (30px).
     `left` en !important écrase le positionnement inline de Lightpick ;
     le `top` inline (juste sous le champ) est conservé. */
  .lightpick {
    left: 30px !important;
    width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
    padding: 20px 16px;
    border-radius: 16px;
  }

  /* Wrapper de scroll : porte la hauteur max + le défilement, de sorte que la
     ligne de jours de la semaine (sticky, premier enfant) reste épinglée en
     haut pendant que .lightpick__months défile dessous. */
  .devis-cal__scroll {
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Zone déroulante : un mois par ligne, pleine largeur. Le scroll est porté
     par le wrapper .devis-cal__scroll (pas ici). */
  .lightpick__months {
    display: block !important;
    grid-gap: 0 !important;
  }
  .lightpick__month {
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
  }
  .lightpick__month:last-child { margin-bottom: 0; }

  /* Une SEULE ligne de jours de la semaine, épinglée en haut de la zone
     déroulante et alignée colonne par colonne avec les grilles de jours
     (7 colonnes égales, même largeur, padding horizontal nul). */
  .devis-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 4px 0 8px;
  }

  /* Les lignes de jours de la semaine PAR MOIS sont masquées (une seule sticky
     partagée en haut). Cellule conservée en 0px pour ne pas décaler la grille. */
  .lightpick__month .lightpick__days-of-the-week { display: none; }

  /* Grille des jours : padding horizontal nul → colonnes alignées sous la
     ligne de jours de la semaine sticky. */
  .lightpick__days { padding: 0; }

  /* Pas de flèches prev/next : la navigation se fait au scroll. */
  .lightpick__toolbar { display: none !important; }

  /* Jours débordant des mois voisins masqués → grille propre comme Figma
     (la cellule reste réservée pour ne pas décaler l'alignement). */
  .lightpick__day.is-previous-month,
  .lightpick__day.is-next-month { visibility: hidden; }
}

/* ============================================================
   POP-IN : confirmation de fermeture + inscription newsletter
   Figma 2636:4381 (erreur) / 2636:4028 (rempli) / 2636:4203 (inscrit)
============================================================ */
.devis-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.devis-modal[hidden] { display: none; }
.devis-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 36, 0.32);
}
.devis-modal__box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 27, 36, 0.18);
  padding: 40px 30px;
  text-align: center;
}
.devis-modal__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  margin: 0 0 20px;
}
.devis-modal__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0 0 30px;
}
.devis-modal__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
}
.devis-modal__btn {
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  color: #9f9a7c;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* Survol → remplissage #9F9A7C + texte blanc. */
.devis-modal__btn:hover {
  background: #9f9a7c;
  border-color: #9f9a7c;
  color: #fff;
}

.devis-modal__nl {
  margin-top: 40px;
}
.devis-modal__nl-title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  margin: 0 0 20px;
}
.devis-modal__nl-text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0 0 40px;
}
.devis-modal__nl-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Après inscription (JS met [hidden]) : le form doit disparaître. `display:flex`
   ci-dessus l'emporte sur le `[hidden]{display:none}` du navigateur → on le force
   ici pour retirer champ email + bouton (maquette Figma 857:12289). */
.devis-modal__nl-form[hidden] { display: none; }
.devis-modal__nl-input {
  width: 188px;
  padding: 3px 0;
  border: none;
  border-bottom: 1px solid #9f9a7c;
  border-radius: 0;
  background: transparent;
  color: #0f1b24;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  outline: none;
  box-sizing: border-box;
  text-align: left;
}
.devis-modal__nl-input::placeholder { color: #949494; opacity: 1; }
/* Erreur : la bordure reste sauge (Figma 857:11992) ; seul le message rouge
   sous le bouton signale l'email invalide. */
.devis-modal__nl-btn {
  display: inline-block;
  width: auto;
  margin-top: 30px;
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: #fff;
  color: #9f9a7c;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.devis-modal__nl-btn:hover {
  background: #9f9a7c;
  border-color: #9f9a7c;
  color: #fff;
}
.devis-modal__nl-error {
  margin: 20px 0 0;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20.87px;
  color: #ff0000;
  text-align: center;
}
.devis-modal__nl-done {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  margin: 0;
}

/* ============================================================
   PAGE CONFIRMATION « Demande de devis enregistrée » (route devis_retour)
   Figma desktop 857:11396 · mobile 857:11460 — mobile-first, pixel-perfect.
   Réutilise les tokens/typos/boutons de base.css. Scopé sous .devis-confirm.
============================================================ */

/* ---------- En-tête : titre + accroche + CTA + visuel (fond blanc) ---------- */
.devis-confirm .confirm-hero { background: #ffffff; }
.devis-confirm .confirm-hero .container { display: flex; flex-direction: column; }
.confirm-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  padding-top: 40px;
}
.confirm-hero__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  color: #0f1b24;
  margin: 0;
}
.confirm-hero__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}
.confirm-hero__cta { align-self: center; }
.confirm-hero__visual {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  margin: 60px 0 30px;
}
.confirm-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 769px) {
  .confirm-hero__head { gap: 60px; padding-top: 40px; }
  .confirm-hero__title { font-size: 50px; }
  .confirm-hero__text { max-width: 564px; }
  .confirm-hero__visual { height: 420px; margin: 60px 0; }
}

/* ---------- Les prochaines étapes (fond crème) ---------- */
.devis-confirm .confirm-steps { background: #efece9; padding: 60px 0; }
.confirm-steps__inner { display: flex; flex-direction: column; gap: 40px; }
.confirm-steps__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
  text-align: center;
  margin: 0;
}
.confirm-steps__title br { display: none; }
.confirm-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.confirm-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 215px;
  text-align: center;
}
.confirm-step__num {
  width: 26px;
  height: 26px;
  border: 1px solid #9f9a7c;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #9f9a7c;
  flex-shrink: 0;
}
.confirm-step__label {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
}
/* Bascule desktop au breakpoint 1100 (comme les gouttières) : en dessous, on
   garde la structure « mobile » réduite — titre centré, étapes 1/2/3 empilées et
   centrées — au lieu de la ligne desktop tassée entre 769 et 1100px. */
@media (min-width: 1100px) {
  .confirm-steps__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .confirm-steps__title { font-size: 50px; line-height: 1; text-align: left; }
  .confirm-steps__title br { display: inline; }
  .confirm-steps__list { flex-direction: row; gap: 40px; align-items: flex-start; }
  .confirm-step { align-items: flex-start; width: 160px; text-align: left; }
}

/* ---------- Spécialiste(s) de votre destination (fond crème) ---------- */
.devis-confirm .confirm-specialists { background: #efece9; }
.confirm-specialists__title-wrap { padding-top: 40px; }
.confirm-specialists__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  color: #0f1b24;
  margin: 0 0 40px;
}
.confirm-specialists__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 60px;
}
@media (min-width: 1100px) {
  .confirm-specialists__title-wrap { border-top: 0.7px solid #c3c3c3; padding-top: 60px; }
  .confirm-specialists__title { font-size: 50px; margin-bottom: 80px; }
  .confirm-specialists__list { gap: 80px; padding-bottom: 80px; }
}

/* ---------- Carte spécialiste / vendeur ---------- */
.confirm-vendor { display: flex; flex-direction: column; gap: 20px; }
.confirm-vendor__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.confirm-vendor__avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.confirm-vendor__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.confirm-vendor__id { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.confirm-vendor__name {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #0f1b24;
  margin: 0;
}
.confirm-vendor__phone { width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
/* Genève : « Genève : prénom(s) » + lignes directes Suisse/France sur des lignes
   distinctes, en sauge (design Figma). Le libellé n'est PAS cliquable : seuls les
   numéros (les <a>) sont des liens soulignés. */
.confirm-vendor__phone--geneve { display: flex; flex-direction: column; }
.confirm-vendor__phone-line {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #9f9a7c;
}
.confirm-vendor__phone-line a {
  color: #9f9a7c;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.confirm-vendor__detail { display: flex; flex-direction: column; gap: 20px; }
.confirm-vendor__specialties {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}
.confirm-vendor__bio { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.confirm-vendor__cursus {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 22px;
  color: #7d7d7d;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.confirm-vendor__bio.is-open .confirm-vendor__cursus {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.confirm-vendor__toggle {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.confirm-vendor__toggle .chevron { transition: transform 0.2s ease; }
.confirm-vendor__bio.is-open .confirm-vendor__toggle .chevron { transform: rotate(180deg); }
@media (min-width: 1100px) {
  .confirm-vendor { flex-direction: row; gap: 20px; align-items: flex-start; }
  .confirm-vendor__main { flex: 1 1 0; min-width: 0; flex-direction: row; align-items: flex-start; gap: 40px; }
  .confirm-vendor__id { flex: 1 1 0; min-width: 0; }
  .confirm-vendor__detail { flex: 1 1 0; min-width: 0; align-self: stretch; }
}