/* Écran Devis : page, titre, cartes de formulaire (Séjour, Voyageurs, Options). Récapitulatif, échéancier et barre basse : devis-recap.css.
   Aucune valeur en dur : tout vient de tokens.css. 4 tailles de texte (--t-h3, --t-h4, --t-corps, --t-micro) et 2 graisses (400, 600).
   Dérivés locaux : voir devis-recap.css (fonds du Total). */

.devis { padding-block: var(--e5) var(--e7); }
.devis [hidden], .barre[hidden] { display: none; }

.devis__titre { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-block-end: var(--e5); }
.devis h1 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: 0; }
.devis__sous { margin-block-start: var(--e1); color: var(--sourdine); }

.devis__colonnes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
.devis__formulaire { grid-column: 1 / span 7; display: grid; gap: var(--e4); min-inline-size: 0; }

.carte {
  --devis-carte-pad: var(--e4);
  margin: 0;
  min-inline-size: 0;
  padding: 0 var(--devis-carte-pad) var(--devis-carte-pad);
  /* la légende est centrée sur la bordure haute : une bordure transparente de sa hauteur plus deux marges la loge dans la carte */
  border: 0;
  border-block-start: calc(var(--t-h4) * 1.3 + var(--devis-carte-pad) * 2) solid transparent;
  background: var(--surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-carte); }
.carte > legend { padding: 0; margin: 0; font-family: var(--police-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }

.devis__aide { margin-block-start: var(--e2); font-size: var(--t-micro); line-height: 1.5; color: var(--sourdine); }
.devis .champ__note { font-size: var(--t-micro); }
.devis .champ__entete label { font-size: var(--t-corps); }
.devis .champ__erreur { font-size: var(--t-micro); }
.devis .socle { block-size: var(--socle-h); }
.devis__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }

/* Voyageurs : deux pas (moins, nombre, plus) */
.devis__voyageurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.pas { display: flex; flex-direction: column; min-inline-size: 0; }
.pas__etiquette { margin-block-end: var(--e2); font-weight: 600; }
.pas__controles { display: flex; align-items: center; gap: var(--e2); }
.pas__bouton {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--cible);
  block-size: var(--cible);
  padding: 0;
  background: var(--surface);
  color: var(--dominante);
  border: var(--trait-champ) solid var(--dominante);
  border-radius: var(--rayon-s);
  cursor: pointer;
  transition: background-color var(--d-micro) linear;
}
.pas__bouton svg { inline-size: var(--icone-m); block-size: var(--icone-m); }
.pas__bouton:hover:not(:disabled) { background: var(--dominante-douce); }
.pas__bouton:disabled { color: var(--sourdine); border-color: var(--filet); cursor: not-allowed; }
.pas__champ {
  inline-size: calc(var(--champ-h) + var(--e4));
  block-size: var(--champ-h);
  min-inline-size: 0;
  padding: 0;
  background: var(--surface);
  color: var(--encre);
  border: var(--trait-champ) solid var(--filet-fort);
  border-radius: var(--rayon-s);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pas__champ:hover { border-color: var(--dominante); }
.pas__champ[aria-invalid="true"] { border-color: var(--attention); border-width: var(--trait-fort); }
.devis__whatsapp { margin-block-start: var(--e3); }

/* Options : lignes-cartes cliquables sur toute leur largeur */
.options { display: grid; gap: var(--e3); }
.option {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-block-size: calc(var(--ligne-devis) + var(--e4));
  padding: var(--e2) var(--e3);
  background: var(--fond);
  border: var(--filet-trait);
  border-radius: var(--rayon-m);
  cursor: pointer;
  transition: border-color var(--d-micro) linear, background-color var(--d-micro) linear;
}
.option:hover { border-color: var(--dominante); }
.option:has(input:checked) { border-color: var(--dominante); background: var(--dominante-douce); }
.option:has(input:focus-visible) { outline: var(--anneau) solid var(--dominante); outline-offset: var(--anneau-decalage); }
.option__case { display: grid; place-items: center; flex: none; inline-size: var(--cible); block-size: var(--cible); }
.option input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-items: center;
  margin: 0;
  inline-size: var(--case);
  block-size: var(--case);
  background: var(--surface);
  border: var(--trait-champ) solid var(--filet-fort);
  border-radius: var(--rayon-s);
  cursor: pointer;
}
.option input[type="checkbox"]:focus-visible { outline: none; }
.option input[type="checkbox"]:checked { background: var(--dominante); border-color: var(--dominante); }
.option input[type="checkbox"]:checked::after {
  content: "";
  inline-size: calc(var(--case) / 4);
  block-size: calc(var(--case) / 2);
  margin-block-end: var(--e1);
  border: solid var(--surface);
  border-width: 0 var(--trait-fort) var(--trait-fort) 0;
  transform: rotate(45deg);
}
.option__texte { display: flex; flex-direction: column; min-inline-size: 0; }
.option__libelle { font-weight: 600; }
.option__prix { font-size: var(--t-micro); line-height: 1.5; color: var(--sourdine); }

@media (max-width: 959px) {
  .devis__formulaire { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .devis { padding-block: var(--e4) var(--e6); }
  .carte { --devis-carte-pad: var(--e3); }
  .devis__dates { grid-template-columns: minmax(0, 1fr); }
  .devis__voyageurs { gap: var(--e2); }
  .pas__champ { inline-size: var(--champ-h); }
}
@media (prefers-reduced-motion: reduce) {
  .pas__bouton, .option { transition: none; }
}