/* =====================================================================
   Design check : seulement ce qui est propre a la page (16/10/2026,
   simplifie le 17/10/2026). A gauche l'offre (une case d'ouverture : la
   preuve, une phrase, le compteur de places ; puis les deux choses qu'on
   recoit), a droite le formulaire court. Les champs n'ont pas encore de
   composant dans le design system (Known Gaps) : construits comme le
   bouton cerne, le libelle au-dessus, puis le bouton orange.
   ===================================================================== */
/* chaque case a la hauteur de son texte (17/10/2026 : etirees a la hauteur
   du formulaire, les deux cases "ce qu'on recoit" restaient vides au milieu) ;
   le formulaire, plus long, descend seul */
.dc-offer{display:grid;gap:var(--s-8);align-content:start}
/* les cases de la page prennent la teinte des cases du site (--cell), pas
   celle de la colonne (Elio, 17/10/2026) */
.dc-offer>.box,.form-cell{background-color:var(--cell)}
.dc-intro{gap:var(--s-32);justify-content:flex-start}
.dc-say{display:grid;gap:var(--s-12)}
/* la ligne de preuve : la voix forte de la case, a la taille du texte des cases */
.dc-proof{max-width:26.5em;font-size:var(--t-body-l);line-height:1.3;letter-spacing:var(--tr-text);color:var(--ink-2)}
.dc-offer .cell-head{flex-direction:row;align-items:center;gap:var(--s-12)}

/* le compteur de places : la pastille du design system (.spots), teintee
   d'orange comme celle du prochain depart (seule la vraie rarete se montre),
   cinq cases carrees, pleines quand la place est prise, puis "N left this
   week". Cache tant que design-check.js n'a pas de reponse. */
.dc-spots{align-self:flex-start;gap:var(--s-12);font-size:var(--t-nav);
  border-color:color-mix(in srgb, var(--accent) 24%, var(--cell));background-color:color-mix(in srgb, var(--accent) 7.5%, var(--cell))}
.dc-pips{display:inline-flex;gap:4px}
.dc-pips i{width:8px;height:8px;border-radius:1px;border:1px solid color-mix(in srgb, var(--accent) 55%, transparent)}
.dc-pips i.is-taken{background:var(--accent);border-color:var(--accent)}
.dc-full[hidden]{display:none}

/* la case du formulaire : les champs, puis l'etat "merci" a la place */
.form-cell{justify-content:flex-start}
.dc-form{display:grid;gap:var(--s-16)}
/* deux champs cote a cote (nom et e-mail ; taille et budget), l'un sous
   l'autre sur telephone */
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
.field{display:grid;gap:var(--s-8);align-content:start}
.field label,.field legend{font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--ink-2)}
.field input,.field select{width:100%;height:48px;padding:0 var(--s-16);font-family:var(--f);font-size:var(--t-body);letter-spacing:var(--tr-ui);color:var(--ink-2);
  background:var(--page);border:1px solid var(--grey);border-radius:var(--r-btn-line);transition:border-color var(--d-hover) ease}
/* le contour du champ : --grey, au moins 3:1 sur la case de jour comme de nuit */
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field textarea{display:block;width:100%;min-height:96px;padding:var(--s-12) var(--s-16);font-family:var(--f);font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--ink-2);
  background:var(--page);border:1px solid var(--grey);border-radius:var(--r-btn-line);resize:vertical;transition:border-color var(--d-hover) ease}
/* l'exemple dans le champ, en ardoise comme la premiere option de la liste */
.field ::placeholder{color:var(--quote);opacity:1}
/* la liste : le chevron du set d'icones a la place de celui du navigateur */
.field-select{position:relative}
.field select{appearance:none;-webkit-appearance:none;padding-right:var(--s-48);cursor:pointer}
.field select:invalid{color:var(--quote)}
.field select option{color:var(--ink-2);background:var(--page)}
.field-select .icon{position:absolute;top:50%;right:var(--s-16);transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.field-opt{margin-left:var(--s-8);font-size:var(--t-small);color:var(--quote)}
.field-hint{font-size:var(--t-small);line-height:1.4;letter-spacing:var(--tr-text);color:var(--quote)}
.field [aria-invalid="true"]{border-color:var(--accent)}
.field-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* un choix sur une ligne (taille, budget) : des pastilles de la hauteur des
   champs, a parts egales ; le bouton radio, invisible, couvre sa pastille
   (clic, focus, message du navigateur) ; choisie, elle passe a l'encre */
.field-set{min-width:0;margin:0;padding:0;border:0}
.field-set legend{float:left;width:100%;margin-bottom:var(--s-8);padding:0}
.field-set legend+*{clear:both}
.choices{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--s-8)}
.choice{position:relative;display:block;min-width:0}
.choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice span{display:flex;align-items:center;justify-content:center;height:48px;padding:0 var(--s-8);white-space:nowrap;
  font-size:var(--t-body);letter-spacing:var(--tr-ui);color:var(--ink-2);background:var(--page);border:1px solid var(--grey);border-radius:var(--r-btn-line);
  transition:border-color var(--d-hover) ease,background-color var(--d-hover) ease,color var(--d-hover) ease}
.choice:hover span{border-color:var(--ink-2)}
.choice input:checked+span{color:var(--page);background:var(--ink-2);border-color:var(--ink-2)}
.choice input:focus-visible{outline:none}
.choice input:focus-visible+span{outline:2px solid var(--ink-2);outline-offset:3px}
.choice input[aria-invalid="true"]+span{border-color:var(--accent)}

/* le bouton et, sur sa ligne, l'etat de l'envoi */
.dc-send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12) var(--s-16)}
.dc-form.is-sending .btn{opacity:.6;pointer-events:none}
.form-note{flex:1 1 14em}
.form-note:empty{display:none}
.form-fine{max-width:34em;font-size:var(--t-small);line-height:1.5;letter-spacing:var(--tr-text);color:var(--quote)}
/* envoye : le formulaire laisse la place a une confirmation courte, au
   centre de la case */
.form-done:not([hidden]){display:grid;justify-items:center;align-content:center;gap:var(--s-12);flex:1;min-height:240px;text-align:center}
.form-done .icon{color:var(--ink-2)}
.form-done .cell-p{max-width:24em;text-wrap:balance}
.dc-form[hidden]{display:none}
.form-done:focus{outline:none}

@media (max-width:599px){
  .field-row{grid-template-columns:minmax(0,1fr)}
  .dc-send .btn{flex:1 1 100%}
}