/**
 * Formulaire « Demander un devis », sous TC Horizon.
 *
 * Pensé pour être rempli sans effort : texte courant de 17 px, commandes de
 * 56 px au moins, intitulés toujours visibles, choix en grandes tuiles, erreurs
 * écrites en clair sous le champ. Le balisage est celui du webform : ces
 * règles ne font que le mettre en forme.
 */

.tc-devis-tete,
.tc-devis__corps,
.tc-devis-confirmation {
  --dv-vert: var(--tc-accent, #00251B);
  --dv-vert-clair: var(--tc-accent-light, #E8EFE9);
  --dv-ok: var(--tc-positive, #157A58);
  --dv-sable: var(--tc-primary, #CDA06D);
  --dv-sable-fonce: var(--tc-primary-strong, #8F6530);
  --dv-jaune: var(--tc-action, #FCDB1A);
  --dv-encre: var(--tc-ink, #2A2C29);
  --dv-gris: var(--tc-ink-soft, #5A5C58);
  --dv-bord: var(--tc-border, #E3E1DC);
  --dv-fond: var(--tc-surface-soft, #F6F6F4);
  --dv-rouge: #B3261E;
  font-size: 17px;
  line-height: 1.55;
  color: var(--dv-encre);
}

.tc-devis-tete *,
.tc-devis__corps *,
.tc-devis-confirmation * {
  box-sizing: border-box;
}

/* --- En-tête de page -------------------------------------------------------- */

.tc-devis-tete {
  border-bottom: 1px solid var(--dv-bord);
  background:
    radial-gradient(1200px 300px at 85% -40%, rgba(205, 160, 109, .28), transparent 70%),
    var(--dv-fond);
}

.tc-devis-tete__inner {
  max-width: var(--tc-max-width, 1280px);
  margin: 0 auto;
  padding: 34px var(--tc-gutter, 24px) 38px;
}

.tc-devis-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  color: var(--dv-gris);
}

.tc-devis-fil li + li::before {
  content: "›";
  margin-right: 10px;
}

.tc-devis-fil a {
  color: var(--dv-vert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tc-devis-fil [aria-current] {
  font-weight: 700;
  color: var(--dv-encre);
}

.tc-devis-tete__titre {
  margin: 0 0 10px;
  font-family: var(--tc-serif);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--dv-vert);
  text-wrap: balance;
}

.tc-devis-tete__sous-titre {
  max-width: 44ch;
  margin: 0 0 22px;
  font-size: clamp(18px, 1.6vw, 20px);
}

.tc-devis-promesses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-devis-promesses li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--dv-bord);
  font-size: 16px;
  font-weight: 700;
}

.tc-devis-promesses svg {
  flex: none;
  color: var(--dv-ok);
}

/* --- Le formulaire et son récapitulatif ------------------------------------- */

.tc-devis__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
  max-width: var(--tc-max-width, 1280px);
  margin: 0 auto;
  padding: 40px var(--tc-gutter, 24px) 88px;
}

.tc-devis__carte {
  min-width: 0;
  padding: 32px 36px 36px;
  border: 1px solid var(--dv-bord);
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
}

.tc-devis__form .form-item,
.tc-devis__form .webform-section,
.tc-devis__form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Les sections se suivent, bien séparées. */
.tc-devis__form .webform-section,
.tc-devis__form [data-webform-key] > .form-item,
.tc-devis__form [data-webform-key] > fieldset {
  margin-bottom: 30px;
}

.tc-devis__form .webform-section-wrapper > * + * {
  margin-top: 0;
}

/* --- Les étapes ---------------------------------------------------------------- */

.tc-devis-etapes__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.tc-devis-etapes__liste li {
  /* Le numéro au milieu de sa barre, le libellé centré dessous. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  text-align: center;
  border-top: 5px solid var(--dv-bord);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dv-gris);
}

.tc-devis-etapes__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--dv-bord);
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 16px;
}

.tc-devis-etapes__liste li.is-courante {
  border-top-color: var(--tc-highlight, var(--dv-jaune));
  color: var(--dv-encre);
}

.tc-devis-etapes__liste li.is-courante .tc-devis-etapes__num {
  border-color: var(--dv-encre);
  background: var(--tc-highlight, var(--dv-jaune));
}

.tc-devis-etapes__liste li.is-faite {
  border-top-color: var(--dv-vert);
  color: var(--dv-vert);
}

.tc-devis-etapes__liste li.is-faite .tc-devis-etapes__num {
  border-color: var(--dv-vert);
  background: var(--dv-vert);
  font-size: 0;
  color: #FFFFFF;
}

.tc-devis-etapes__liste li.is-faite .tc-devis-etapes__num::after {
  content: "✓";
  font-size: 17px;
}

.tc-devis-etape__compteur {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dv-sable-fonce);
}

.tc-devis-etape__titre {
  margin: 0 0 24px;
  font-family: var(--tc-serif);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dv-encre);
}

.tc-devis-etape__titre:focus {
  outline: none;
}

.tc-devis-etape__intro {
  margin: -14px 0 26px;
  color: var(--dv-gris);
}

/* --- Intitulés, aides, champs obligatoires -------------------------------------- */

.tc-devis__form legend,
.tc-devis__form .webform-section-title,
.tc-devis__form .form-item > label:not(.option) {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--dv-encre);
}

.tc-devis__form .form-item > label:not(.option) {
  margin-bottom: 8px;
  font-size: 17px;
}

.tc-devis__form h3.webform-section-title {
  font-family: inherit;
}

.tc-devis__form .form-required::after {
  content: var(--tc-requis, "*");
  display: inline-block;
  margin-left: 8px;
  background: none;
  width: auto;
  height: auto;
  vertical-align: baseline;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dv-gris);
}

.tc-devis-facultatif {
  margin-left: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dv-gris);
}

/* Deux champs d'une même section : bien séparés. */
.tc-devis__form .webform-section-wrapper > :is(.form-item, fieldset) + :is(.form-item, fieldset) {
  margin-top: 30px;
}

.tc-devis-deux > .webform-section-wrapper > :is(.form-item, fieldset) + :is(.form-item, fieldset),
.tc-devis-compteurs > .webform-section-wrapper > .form-item + .form-item {
  margin-top: 0;
}

.tc-devis__form .description,
.tc-devis__form .webform-element-description {
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 400;
  color: var(--dv-gris);
}

.tc-devis__form .form-item > .description:last-child {
  margin: 8px 0 0;
}

/* --- Les champs ----------------------------------------------------------------- */

.tc-devis__form input[type="text"],
.tc-devis__form input[type="email"],
.tc-devis__form input[type="password"],
.tc-devis__form input[type="tel"],
.tc-devis__form input[type="date"],
.tc-devis__form select,
.tc-devis__form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border: 2px solid #CFCBC3;
  border-radius: 12px;
  background-color: #FFFFFF;
  font: inherit;
  font-size: 17.5px;
  color: var(--dv-encre);
}

.tc-devis__form select {
  padding-right: 48px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%232A2C29' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
  appearance: none;
  cursor: pointer;
}

.tc-devis__form textarea {
  min-height: 180px;
  line-height: 1.55;
  resize: vertical;
}

.tc-devis__form input:hover,
.tc-devis__form select:hover,
.tc-devis__form textarea:hover {
  border-color: var(--dv-gris);
}

.tc-devis__form input:focus-visible,
.tc-devis__form select:focus-visible,
.tc-devis__form textarea:focus-visible {
  border-color: var(--dv-vert);
  outline: 3px solid var(--tc-focus, var(--dv-jaune));
  outline-offset: 2px;
}

/* Deux champs côte à côte. */
.tc-devis-deux > .webform-section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.tc-devis-deux .form-item {
  margin: 0;
}

.tc-devis-champ--individual-liberties-law-message,
.tc-devis-deux .tc-devis-champ--birth-date {
  grid-column: auto;
}

/* La date de naissance : trois listes sur une ligne. */
.tc-devis__form .tc-devis-champ--birth-date .container-inline,
.tc-devis__form .tc-devis-champ--birth-date .form--inline {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr;
  gap: 8px;
}

.tc-devis__form .tc-devis-champ--birth-date .form-item {
  margin: 0;
}

.tc-devis__form .tc-devis-champ--birth-date select {
  padding-right: 34px;
  background-position: right 12px center;
}

.tc-devis__form .tc-devis-champ--birth-date .form-item label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le téléphone international : le drapeau à gauche, dans le champ. */
.tc-devis__form .iti {
  display: block;
  width: 100%;
}

.tc-devis__form .iti input[type="tel"] {
  padding-left: 58px;
}

.tc-devis__form .iti--allow-dropdown .iti__flag-container,
.tc-devis__form .iti__flag-container {
  padding: 2px;
}

.tc-devis-rgpd {
  margin: 4px 0 26px;
  font-size: 15px;
  color: var(--dv-gris);
}

/* --- Les tuiles : de vrais boutons radio et cases, en grand ------------------ */

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) {
  display: grid;
  gap: 12px;
}

.tc-devis-tuiles--qui :is(.form-radios, .form-checkboxes) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* L'intitulé du groupe, bien détaché des tuiles. */
fieldset.tc-devis-tuiles > .fieldset-wrapper {
  margin-top: 12px;
}

.tc-devis-tuiles--dates :is(.form-radios, .form-checkboxes) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-devis-tuiles--hebergement :is(.form-radios, .form-checkboxes) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item {
  position: relative;
  margin: 0;
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > input {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--dv-vert);
  pointer-events: none;
}

/* Toute la tuile est l'étiquette : on clique où l'on veut. */
.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > label.option {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 120px;
  height: 100%;
  margin: 0;
  padding: 16px 10px;
  border: 2px solid var(--dv-bord);
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > label.option:hover {
  border-color: var(--dv-sable);
  transform: translateY(-1px);
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > input:checked + label.option {
  border-color: var(--dv-vert);
  background: var(--dv-vert-clair);
  box-shadow: inset 0 0 0 1px var(--dv-vert);
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > input:focus-visible {
  outline: none;
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > input:focus-visible + label.option {
  outline: 3px solid var(--tc-focus, var(--dv-jaune));
  outline-offset: 3px;
}

/* Le pictogramme de chaque choix, dessiné en masque : il prend la couleur. */
.tc-devis-tuiles--qui label.option::before,
.tc-devis-tuiles--dates label.option::before {
  content: "";
  width: 46px;
  height: 46px;
  background: var(--dv-sable-fonce);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > input:checked + label.option::before {
  background: var(--dv-vert);
}

/* Tuiles en ligne : le pictogramme à gauche, le texte à droite. */
.tc-devis-tuiles--dates :is(.form-radios, .form-checkboxes) > .form-item > label.option {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  min-height: 92px;
  padding: 16px 48px 16px 18px;
  text-align: left;
}

.tc-devis-tuiles--hebergement :is(.form-radios, .form-checkboxes) > .form-item > label.option {
  justify-items: start;
  align-content: start;
  min-height: 132px;
  padding: 18px 44px 18px 18px;
  text-align: left;
}

.tc-devis-tuile__texte b {
  display: block;
  font-size: 17.5px;
}

.tc-devis-tuile__texte small {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--dv-gris);
}

/* Les losanges du confort, comme sur la fiche circuit. */
.tc-devis-losanges {
  display: inline-flex;
  gap: 6px;
  margin: 4px 0 2px 3px;
}

.tc-devis-losanges i {
  width: 11px;
  height: 11px;
  border: 1.8px solid var(--dv-sable-fonce);
  border-radius: 2px;
  transform: rotate(45deg);
}

.tc-devis-losanges i.on {
  background: var(--dv-sable-fonce);
}

/* --- Les compteurs de voyageurs ---------------------------------------------------- */

.tc-devis-compteurs > .webform-section-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.tc-devis__form .tc-devis-compteur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  margin: 0;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--dv-bord);
  border-radius: 14px;
}

.tc-devis__form .tc-devis-compteur > label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 17px;
}

.tc-devis__form .tc-devis-compteur > .description {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

.tc-devis__form .tc-devis-compteur > .tc-devis-compteur__reglage,
.tc-devis__form .tc-devis-compteur > input {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.tc-devis-compteur__reglage {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tc-devis-compteur__reglage button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--dv-bord);
  border-radius: 50%;
  background: #FFFFFF;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--dv-vert);
  cursor: pointer;
}

.tc-devis-compteur__reglage button svg {
  display: block;
}

.tc-devis-compteur__reglage button:hover {
  border-color: var(--dv-vert);
}

.tc-devis-compteur__reglage button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.tc-devis-compteur__reglage button:focus-visible {
  outline: 3px solid var(--tc-focus, var(--dv-jaune));
  outline-offset: 2px;
}

.tc-devis__form input.tc-devis-compteur__nombre {
  width: 56px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

.tc-devis__form input.tc-devis-compteur__nombre::-webkit-inner-spin-button,
.tc-devis__form input.tc-devis-compteur__nombre::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Il y a toujours au moins un adulte : la mention « obligatoire » n'apprend rien. */
.tc-devis__form .tc-devis-compteur .form-required::after {
  content: none;
}

@media (max-width: 420px) {
  .tc-devis__form .tc-devis-compteur {
    padding: 10px 10px 10px 14px;
  }

  .tc-devis-compteur__reglage {
    gap: 2px;
  }

  .tc-devis-compteur__reglage button {
    width: 44px;
    height: 44px;
  }

  .tc-devis__form input.tc-devis-compteur__nombre {
    width: 40px;
  }
}

/* --- Les erreurs : un liseré rouge, un message en clair ------------------------ */

.tc-devis__form .form-item--error-message,
.tc-devis__form .form-item-error-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--dv-rouge);
}

.tc-devis__form .form-item--error-message::before {
  content: "!";
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dv-rouge);
  font-size: 14px;
  color: #FFFFFF;
}

.tc-devis__form input.error,
.tc-devis__form select.error,
.tc-devis__form textarea.error {
  border-color: var(--dv-rouge);
  background-color: #FFF7F6;
}

.tc-devis__form .error.tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > label.option,
.tc-devis__form fieldset.error label.option {
  border-color: #E9B7B3;
}

/* La bulle d'erreurs de Drupal répète le résumé de l'étape : sur cette page,
   elle s'efface. Les autres messages restent. */
body:has(form.tc-devis__form) .messages--error:has(a[href^="#edit-"]) {
  display: none !important;
}

/* Le résumé des erreurs, en haut de l'étape. */
.tc-devis-erreurs {
  margin: 0 0 26px;
  padding: 16px 20px;
  border-left: 6px solid var(--dv-rouge);
  border-radius: 12px;
  background: #FFF4F3;
}

.tc-devis-erreurs:focus {
  outline: 3px solid var(--tc-focus, var(--dv-jaune));
  outline-offset: 2px;
}

.tc-devis-erreurs__titre {
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--dv-rouge);
}

.tc-devis-erreurs ul {
  margin: 0;
  padding-left: 20px;
}

.tc-devis-erreurs a {
  font-weight: 700;
  color: var(--dv-rouge);
}

/* --- Les boutons ------------------------------------------------------------------- */

.tc-devis-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--dv-bord);
}

.tc-devis__form input.tc-devis-bouton {
  min-height: 58px;
  margin: 0;
  padding: 0 56px 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--dv-jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") right 22px center / 22px no-repeat;
  font: inherit;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--tc-on-action, var(--dv-encre));
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* L'action principale à droite, même seule. */
.tc-devis__form input.tc-devis-bouton--suivant,
.tc-devis__form input.tc-devis-bouton--envoi {
  margin-left: auto;
}

.tc-devis__form input.tc-devis-bouton:hover {
  box-shadow: 0 6px 18px rgb(20 19 17 / 25%);
  transform: translateY(-1px);
}

.tc-devis__form input.tc-devis-bouton:focus-visible {
  outline: 3px solid var(--dv-vert);
  outline-offset: 3px;
}

.tc-devis__form input.tc-devis-bouton--retour {
  padding: 0 28px 0 56px;
  border-color: var(--dv-bord);
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2C29' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") left 22px center / 22px no-repeat;
}

.tc-devis__form input.tc-devis-bouton--retour:hover {
  border-color: var(--dv-encre);
  box-shadow: none;
}

.tc-devis__form input.tc-devis-bouton--envoi {
  padding: 0 32px 0 58px;
  background: var(--dv-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5L4 12z'/%3E%3C/svg%3E") left 24px center / 22px no-repeat;
  color: #FFFFFF;
}

.tc-devis__form input.tc-devis-bouton--envoi:hover {
  box-shadow: 0 6px 18px rgb(20 19 17 / 30%);
}

/* --- Le récapitulatif ------------------------------------------------------------ */

.tc-devis-recap {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.tc-devis-recap__carte {
  overflow: hidden;
  border: 1px solid var(--dv-bord);
  border-radius: 20px;
  background: #FFFFFF;
}

.tc-devis-recap__voyage img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.tc-devis-recap__voyage > div {
  padding: 16px 22px 0;
}

.tc-devis-recap__surtitre {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dv-sable-fonce);
}

.tc-devis-recap__nom {
  margin: 2px 0 4px;
  font-family: var(--tc-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.tc-devis-recap__nom a {
  color: inherit;
  text-decoration: none;
}

.tc-devis-recap__nom a:hover {
  text-decoration: underline;
}

.tc-devis-recap__infos {
  margin: 0;
  font-size: 15.5px;
  color: var(--dv-gris);
}

.tc-devis-recap__titre {
  margin: 0;
  padding: 20px 22px 6px;
  font-family: var(--tc-serif);
  font-size: 22px;
  font-weight: 700;
}

.tc-devis-recap__liste {
  margin: 0;
  padding: 0 22px 18px;
}

.tc-devis-recap__liste > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--dv-bord);
}

.tc-devis-recap__liste > div:last-child {
  border-bottom: 0;
}

.tc-devis-recap__liste dt {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dv-gris);
}

.tc-devis-recap__liste dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.tc-devis-recap__liste dd.is-vide {
  font-style: italic;
  font-weight: 500;
  color: var(--dv-gris);
}

.tc-devis-aide {
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--dv-vert);
  color: #FFFFFF;
}

.tc-devis-aide p {
  margin: 0;
}

.tc-devis-aide__titre {
  margin-bottom: 4px !important;
  font-family: var(--tc-serif);
  font-size: 20px;
  font-weight: 700;
}

.tc-devis-aide__numero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}

.tc-devis-aide__numero:hover {
  text-decoration: underline;
}

/* --- La confirmation --------------------------------------------------------------- */

.tc-devis-confirmation {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--tc-gutter, 24px) 88px;
  text-align: center;
}

.tc-devis-confirmation__carte {
  padding: 40px 36px;
  border: 1px solid var(--dv-bord);
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .06);
}

.tc-devis-confirmation__icone {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--dv-vert-clair);
  color: var(--dv-ok);
}

.tc-devis-confirmation__titre {
  margin: 0 0 8px;
  font-family: var(--tc-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dv-vert);
  text-wrap: balance;
}

.tc-devis-confirmation__numero {
  margin: 0 0 26px;
  color: var(--dv-gris);
}

.tc-devis-suite {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: suite;
}

.tc-devis-suite li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--dv-bord);
  border-radius: 14px;
  counter-increment: suite;
}

.tc-devis-suite li::before {
  content: counter(suite);
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tc-highlight, var(--dv-jaune));
  font-weight: 800;
}

.tc-devis-suite b {
  font-size: 17px;
}

.tc-devis-suite span {
  color: var(--dv-gris);
}

.tc-devis-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tc-devis-confirmation__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 26px;
  border: 2px solid var(--dv-bord);
  border-radius: 999px;
  background: #FFFFFF;
  font-weight: 800;
  color: var(--dv-encre);
  text-decoration: none;
}

.tc-devis-confirmation__actions a:hover {
  border-color: var(--dv-encre);
}

.tc-devis-confirmation__actions a:focus-visible {
  outline: 3px solid var(--dv-vert);
  outline-offset: 3px;
}

/* --- Réactif ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .tc-devis__corps {
    grid-template-columns: minmax(0, 1fr);
  }

  .tc-devis-recap {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tc-devis-tuiles--qui :is(.form-radios, .form-checkboxes) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tc-devis__carte {
    padding: 22px 18px 24px;
    border-radius: 18px;
  }

  .tc-devis__corps {
    gap: 22px;
    padding-top: 22px;
  }

  .tc-devis-etapes__liste {
    margin-bottom: 22px;
  }

  .tc-devis-etapes__nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tc-devis-tuiles--qui :is(.form-radios, .form-checkboxes),
  .tc-devis-tuiles--hebergement :is(.form-radios, .form-checkboxes) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tc-devis-tuiles--qui :is(.form-radios, .form-checkboxes) > .form-item:last-child,
  .tc-devis-tuiles--hebergement :is(.form-radios, .form-checkboxes) > .form-item:last-child {
    grid-column: 1 / -1;
  }

  .tc-devis-tuiles--qui :is(.form-radios, .form-checkboxes) > .form-item:last-child > label.option {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    min-height: 88px;
  }

  .tc-devis-tuiles--dates :is(.form-radios, .form-checkboxes),
  .tc-devis-deux > .webform-section-wrapper,
  .tc-devis-compteurs > .webform-section-wrapper,
  .tc-devis-recap {
    grid-template-columns: minmax(0, 1fr);
  }

  .tc-devis-tuiles :is(.form-radios, .form-checkboxes) > .form-item > label.option {
    min-height: 104px;
  }

  .tc-devis-actions {
    flex-direction: column-reverse;
  }

  .tc-devis__form input.tc-devis-bouton--suivant,
  .tc-devis__form input.tc-devis-bouton--envoi {
    margin-left: 0;
  }

  .tc-devis__form input.tc-devis-bouton {
    width: 100%;
  }

  .tc-devis-confirmation__carte {
    padding: 28px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-devis__form *,
  .tc-devis__form label.option {
    transition: none !important;
  }
}

/* --- Les pictogrammes des tuiles ------------------------------------------------ */

.tc-devis__form input[name="you_go"][value="alone"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='15' r='6.5'/%3E%3Cpath d='M12 40c1.5-8 6-12 12-12s10.5 4 12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='15' r='6.5'/%3E%3Cpath d='M12 40c1.5-8 6-12 12-12s10.5 4 12 12'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="you_go"][value="couple"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='16' r='5.5'/%3E%3Ccircle cx='31' cy='16' r='5.5'/%3E%3Cpath d='M6 39c1.2-7 5-10.5 11-10.5 3 0 5.4.9 7 2.6M42 39c-1.2-7-5-10.5-11-10.5-3 0-5.4.9-7 2.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='16' r='5.5'/%3E%3Ccircle cx='31' cy='16' r='5.5'/%3E%3Cpath d='M6 39c1.2-7 5-10.5 11-10.5 3 0 5.4.9 7 2.6M42 39c-1.2-7-5-10.5-11-10.5-3 0-5.4.9-7 2.6'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="you_go"][value="family"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='13' r='5'/%3E%3Ccircle cx='33' cy='13' r='5'/%3E%3Ccircle cx='24' cy='25' r='3.8'/%3E%3Cpath d='M5 38c1-6.5 4.5-10 10-10M43 38c-1-6.5-4.5-10-10-10M16.5 40c.8-5 3.6-7.6 7.5-7.6s6.7 2.6 7.5 7.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='13' r='5'/%3E%3Ccircle cx='33' cy='13' r='5'/%3E%3Ccircle cx='24' cy='25' r='3.8'/%3E%3Cpath d='M5 38c1-6.5 4.5-10 10-10M43 38c-1-6.5-4.5-10-10-10M16.5 40c.8-5 3.6-7.6 7.5-7.6s6.7 2.6 7.5 7.6'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="you_go"][value="friends"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='17' r='4.8'/%3E%3Ccircle cx='24' cy='14' r='5.2'/%3E%3Ccircle cx='35' cy='17' r='4.8'/%3E%3Cpath d='M4 38c.8-6 4-9 9-9M44 38c-.8-6-4-9-9-9M15 39c1-7 4.4-10.5 9-10.5S32 32 33 39'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='17' r='4.8'/%3E%3Ccircle cx='24' cy='14' r='5.2'/%3E%3Ccircle cx='35' cy='17' r='4.8'/%3E%3Cpath d='M4 38c.8-6 4-9 9-9M44 38c-.8-6-4-9-9-9M15 39c1-7 4.4-10.5 9-10.5S32 32 33 39'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="you_go"][value="group"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='18' r='4'/%3E%3Ccircle cx='19' cy='14' r='4.4'/%3E%3Ccircle cx='29' cy='14' r='4.4'/%3E%3Ccircle cx='38' cy='18' r='4'/%3E%3Cpath d='M3 37c.6-5 3.3-7.5 7-7.5M45 37c-.6-5-3.3-7.5-7-7.5M12 38c.9-6.5 3.5-9.5 7-9.5 2 0 3.7.9 5 2.6 1.3-1.7 3-2.6 5-2.6 3.5 0 6.1 3 7 9.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='18' r='4'/%3E%3Ccircle cx='19' cy='14' r='4.4'/%3E%3Ccircle cx='29' cy='14' r='4.4'/%3E%3Ccircle cx='38' cy='18' r='4'/%3E%3Cpath d='M3 37c.6-5 3.3-7.5 7-7.5M45 37c-.6-5-3.3-7.5-7-7.5M12 38c.9-6.5 3.5-9.5 7-9.5 2 0 3.7.9 5 2.6 1.3-1.7 3-2.6 5-2.6 3.5 0 6.1 3 7 9.5'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="know_precise_dates"][value="Yes"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='10' width='32' height='30' rx='4'/%3E%3Cpath d='M8 19h32M16 6v8M32 6v8M18 29l4 4 8-8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='10' width='32' height='30' rx='4'/%3E%3Cpath d='M8 19h32M16 6v8M32 6v8M18 29l4 4 8-8'/%3E%3C/svg%3E"); }
.tc-devis__form input[name="know_precise_dates"][value="No"] + label::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='10' width='32' height='30' rx='4'/%3E%3Cpath d='M8 19h32M16 6v8M32 6v8M20.5 27.5a3.5 3.5 0 1 1 5 3.2c-1 .5-1.5 1.2-1.5 2.3M24 36.5v.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='10' width='32' height='30' rx='4'/%3E%3Cpath d='M8 19h32M16 6v8M32 6v8M20.5 27.5a3.5 3.5 0 1 1 5 3.2c-1 .5-1.5 1.2-1.5 2.3M24 36.5v.5'/%3E%3C/svg%3E"); }

/* Le petit chargeur natif que l'option « envoi unique » du webform pose à
   côté du bouton : remplacé par le chargeur plein écran du thème (devis.js). */
.tc-devis__form:not(.tc-resa-compte__form) .form-actions .ajax-progress-throbber {
  display: none;
}

/* Le compteur du récit du projet : discret, sous le champ, à droite. */
.tc-devis-compteur-texte {
  margin: 6px 0 0;
  font-size: 13px;
  text-align: right;
  color: var(--tc-ink-soft, var(--dv-gris));
}

.tc-devis-compteur-texte.is-atteint {
  color: var(--tc-ink-faint, var(--dv-gris));
}