/* ============================================================
   PAGE FICHE PAYS / TÉLÉCHARGEMENT (design v2, copie-conforme Figma)
   Feuille auto-suffisante, mobile-first, préfixe cd-.
   Valeurs portées de public/v2/devis/css/devis.css.
   Tokens : fond #fff, ink #0f1b24, sauge #9f9a7c, sauge-dark #615d48,
   orange #f39e00, placeholder #949494, erreur (texte) #ff0000.
============================================================ */

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

/* Gouttières 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. */
.country-download-page .container { padding-left: 100px; padding-right: 100px; }
@media (max-width: 1099px) {
  .country-download-page .container { padding-left: 30px; padding-right: 30px; }
}

/* ============================================================
   BARRE « FERMER » (sticky)
============================================================ */
.cd-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}
.cd-topbar .container {
  height: 64px;
  display: flex;
  align-items: center;
}
.cd-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;
}
.cd-close:hover { opacity: .7; }
@media (min-width: 769px) {
  .cd-topbar .container { height: 84px; }
}
/* Mobile : croix seule, pas de libellé « Fermer ». */
@media (max-width: 768px) {
  .cd-close__txt { display: none; }
}

/* ============================================================
   HEADER PAYS : titre + accroche + visuel
============================================================ */
.cd-head-section { background: #fff; }
.cd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px 0 60px;
}
.cd-title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: #0f1b24;
  text-align: center;
  margin: 0;
}
.cd-subtitle {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  text-align: center;
  margin: 0;
}
.cd-head-visuel { line-height: 0; }
.cd-head-visuel img {
  width: 332px;
  height: 187px;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  max-width: 100%;
}
@media (min-width: 769px) {
  .cd-head { gap: 60px; padding: 40px 0 60px; }
  .cd-subtitle { max-width: 764px; }
  .cd-head-visuel img { width: 401px; height: 226px; }
}

/* ============================================================
   FORMULAIRE (colonne 964 centrée)
============================================================ */
.cd-form-section { background: #fff; }
.cd-form-wrap { max-width: 964px; margin: 0 auto; padding-bottom: 60px; }
.cd-form-title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  text-align: center;
  margin: 0 0 60px;
}
.cd-form, .cd-fields { display: flex; flex-direction: column; gap: 25px; }

/* Lignes (2 colonnes desktop / empilées mobile). */
.cd-row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 769px) {
  .cd-row { flex-direction: row; align-items: flex-start; }
  .cd-row > * { flex: 1 1 0; min-width: 0; }
  .cd-row--half > * { flex: 0 0 calc(50% - 10px); }
}

.cd-hint {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: #0f1b24;
  margin: -10px 0 0;
  max-width: 472px;
}
.cd-required {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #9f9a7c;
  text-align: right;
  margin: 0;
}
.cd-required.is-error { color: #ff0000; }
@media (max-width: 768px) {
  .cd-required { text-align: center; }
}

/* ============================================================
   CHAMPS « pill » (input texte)
============================================================ */
.cd-field { position: relative; }
.cd-field input[type="text"],
.cd-field input[type="email"],
.cd-field input[type="tel"],
.cd-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;
}
.cd-field input::placeholder { color: #949494; opacity: 1; }
.cd-field input:focus { border-color: #615d48; }

/* Bouton « effacer » (X sauge) à droite des champs remplis. Masqué tant que
   le champ est vide ; on réserve la place à droite. */
.cd-field--clearable input { padding-right: 44px; }
.cd-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;
}
.cd-field--clearable.has-value .cd-clear { display: inline-flex; }

/* Chevron du select « comment connu ». */
.cd-field__chevron {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
}

/* Select natif « comment nous avez-vous connu ? ». */
.cd-field--select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  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;
  line-height: 16px;
  color: #949494;   /* placeholder gris par défaut */
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.cd-field--select select:focus { border-color: #615d48; }
/* Une option est choisie → texte ink (piloté en JS via .has-value). */
.cd-field--select select.has-value { color: #0f1b24; }
/* Les items de la liste déroulante restent en ink (le gris ne s'applique qu'au
   champ fermé sans sélection). */
.cd-field--select select option { color: #0f1b24; }

/* ------------------------------------------------------------
   « Comment nous avez-vous connu ? » en SELECT2 — design IDENTIQUE à la
   page devis : contrôle fermé = pilule sauge + chevron sauge ; menu ouvert
   = boîte blanche arrondie, options Lexend Deca ink, survol sauge souligné
   (fond transparent). Scopé à .cd-field--select (contrôle) + .cd-select-dropdown
   (menu, rendu en <body>). !important ciblés pour battre les styles select2
   GLOBAUX injectés par basev2 (surlignage teal #075e71, padding 15px, etc.).
------------------------------------------------------------ */
/* --- Contrôle fermé (pilule) --- */
.cd-field--select .select2-container { width: 100% !important; }
.cd-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;
}
.cd-field--select .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 22px 0 0;                 /* place réservée au chevron */
  color: #0f1b24;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 46px;
}
.cd-field--select .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #949494 !important; }
.cd-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;
}
.cd-field--select .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.cd-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;
}
.cd-field--select .select2-container--default.select2-container--open .select2-selection--single { border-radius: 30.076px !important; }
/* Erreur : placeholder/valeur en rouge (bordure sauge conservée). */
.cd-field.cd-field--select.is-error .select2-container--default .select2-selection--single .select2-selection__placeholder,
.cd-field.cd-field--select.is-error .select2-container--default .select2-selection--single .select2-selection__rendered { color: #ff0000 !important; }

/* --- Menu ouvert (boîte blanche arrondie) --- */
.select2-dropdown.cd-select-dropdown {
  margin-top: 4px !important;
  background: #fff !important;
  border: 1px solid #e3e0dc !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 27, 36, 0.08) !important;
  overflow: hidden !important;
}
.cd-select-dropdown .select2-results,
.cd-select-dropdown .select2-results__options { background: #fff !important; }
.cd-select-dropdown .select2-results__options {
  max-height: 260px;
  padding: 8px !important;             /* remplace le padding:15px global */
  scrollbar-width: thin;
  scrollbar-color: #cfcac2 transparent;
}
.cd-select-dropdown .select2-results__options::-webkit-scrollbar { width: 6px; }
.cd-select-dropdown .select2-results__options::-webkit-scrollbar-thumb { background: #cfcac2; border-radius: 3px; }
.cd-select-dropdown .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.cd-select-dropdown .select2-results__option {
  font-family: 'Lexend Deca', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  line-height: 24px !important;
  color: #0f1b24 !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
}
/* Survol / clavier : texte sauge SOULIGNÉ, sans fond (ni beige ni teal #075e71). */
.cd-select-dropdown .select2-results__option--highlighted[aria-selected] {
  background: transparent !important;
  color: #9f9a7c !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
/* Valeur sélectionnée : texte sauge. */
.cd-select-dropdown .select2-results__option[aria-selected="true"] {
  background: transparent !important;
  color: #9f9a7c !important;
  font-weight: 400 !important;
}

/* ============================================================
   PILLS CIVILITÉ (outline sauge / actif rempli)
============================================================ */
.cd-toggle { display: flex; gap: 15px; }
.cd-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;
  position: relative;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cd-pill span {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #9f9a7c;
  white-space: nowrap;
}
.cd-pill input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cd-pill:has(input:checked), .cd-pill.is-active,
.cd-pill:hover { background: #9f9a7c; border-color: #9f9a7c; }
.cd-pill:has(input:checked) span, .cd-pill.is-active span,
.cd-pill:hover span { color: #fff; }
/* Erreur : civilité non choisie → texte rouge (bordure reste sauge). */
.cd-toggle.is-error .cd-pill span { color: #ff0000; }

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

/* Captcha : encadrement rouge si non coché. */
.cd-captcha { min-height: 24px; align-self: flex-start; }
.cd-captcha.is-error {
  border: 2px solid #ff0000;
  border-radius: 6px;
  padding: 4px;
  background: rgba(255, 0, 0, 0.04);
}

/* ============================================================
   MESSAGES / ÉTAT ERREUR
============================================================ */
.cd-form-error {
  margin: 0;
  color: #ff0000;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}
.cd-form-error[hidden] { display: none; }
.cd-email-error { margin: 8px 0 0; text-align: left; }
.cd-captcha-error { margin: 8px 0 0; text-align: left; }
/* Message global (sous le titre du formulaire) — centré via .cd-form-error. */
.cd-global-error { margin: 0; }

/* ============================================================
   POP-IN DE SUCCÈS (3 s puis redirection) — Figma 961:5953 / mobile 961:5562
============================================================ */
.cd-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cd-modal[hidden] { display: none; }
.cd-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 45, 45, 0.45);
}
.cd-modal__box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  width: 450px;
  max-width: min(450px, calc(100% - 60px));
  text-align: center;
  box-shadow: 0 20px 60px rgba(15, 27, 36, 0.2);
}
.cd-modal__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  margin: 0 0 20px;
}
.cd-modal__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}

/* Erreur inputs : SEUL le texte/placeholder passe rouge (bordure reste sauge). */
.cd-field.is-error input,
.cd-field.is-error input::placeholder { color: #ff0000; }
.cd-field.is-error input::-webkit-input-placeholder { color: #ff0000; }
/* Select natif « comment connu » en erreur : texte + placeholder rouge. */
.cd-field--select.is-error select { color: #ff0000; }

/* ============================================================
   TEXTE RGPD
============================================================ */
.cd-rgpd {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}
.cd-rgpd a { color: #9f9a7c; text-decoration: underline; }
@media (min-width: 769px) {
  .cd-rgpd { font-size: 13px; }
}

/* ============================================================
   BOUTON TÉLÉCHARGER — orange 50% si incomplet / 100% si complet.
   La forme/typo Asul vient de .btn / .btn--orange (base.css).
============================================================ */
.cd-submit {
  align-self: center;
  margin-top: 20px;
  min-width: 203px;
  background-color: rgba(243, 158, 0, 0.5);
  border-color: rgba(243, 158, 0, 0.5);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cd-submit:hover { opacity: 1; }
.cd-submit.is-complete {
  background-color: #f39e00;
  border-color: #f39e00;
}
.cd-submit.is-complete:hover {
  background-color: #d98c00;
  border-color: #d98c00;
}

/* ============================================================
   BLOC EXPERTS (fond crème)
============================================================ */
.cd-experts { background: #efece9; }
.cd-experts .container { padding-top: 40px; padding-bottom: 60px; }
.cd-experts__grid { display: flex; flex-direction: column; gap: 20px; }
.cd-experts__left { display: flex; flex-direction: column; gap: 20px; }
.cd-experts__name {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #0f1b24;
  margin: 0;
}
.cd-experts__phone {
  width: fit-content;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #9f9a7c;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.cd-experts__phone:hover{
  color: #9f9a7c;
}
.cd-experts__quote {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}
@media (min-width: 769px) {
  .cd-experts .container { padding-top: 40px; padding-bottom: 40px; }
  .cd-experts__grid { flex-direction: row; gap: 20px; align-items: flex-start; }
  .cd-experts__grid > * { flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   VISUEL PLEINE LARGEUR
============================================================ */
.cd-visuel { width: 100%; height: 350px; overflow: hidden; }
.cd-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 769px) {
  .cd-visuel { height: 480px; }
}