/* ============================================================================
   Ce qui doit passer APRÈS toutes les autres feuilles — chargé en dernier par
   les trois applications.
   ⚠️ **La règle anti-zoom de Safari iOS vit ici, et c'est sa raison d'être** :
   elle doit battre `.bo-rech input`, qui pose sa taille par le raccourci
   `font:` — à spécificité égale, seul l'ordre la fait gagner. Placée dans
   `base.css`, elle passerait avant la feuille de l'administration et serait
   écrasée en silence, ce qui est déjà arrivé une fois.
   ⚠️ **L'ordre de chargement est une règle, et il est le même partout** :
   `tokens.css`, `logo.css`, `base.css`, la feuille de l'application, puis
   `fin.css`. À spécificité égale la cascade départage par l'ordre ; le
   découpage a été éprouvé élément par élément contre l'ancienne feuille unique
   (`tools/comparer-styles.mjs`), et changer cet ordre défait cette épreuve.
   ⚠️ **Une règle va dans la feuille de l'application qui l'emploie.** Une règle
   d'administration écrite dans la feuille du site ne s'appliquerait pas dans
   /admin — ce qui se voit tout de suite, et c'est voulu : une feuille commune
   était téléchargée par chaque visiteuse, administration comprise. 
   ============================================================================ */

/* Fenêtres de dialogue (APP.UI.confirm / alert / prompt, `components/modal/modal.project.js`) :
   un `<dialog>` modal à la charte des fenêtres de /admin, dans les trois applications —
   carte centrée sur ordinateur, feuille du bas sur téléphone. Ici, après les feuilles des
   applications, pour que leurs `.btn` et champs ne la redessinent pas. `margin:auto` centre
   le `<dialog>` (la remise à zéro `*{margin:0}` de `base.css` le retirait). */
.dlg{margin:auto;border:0;padding:0;color:var(--encre);background:var(--blanc);border-radius:24px;width:min(460px,calc(100vw - 32px));max-width:none;max-height:min(92dvh,640px);overflow:hidden;box-shadow:0 44px 90px -44px rgba(122,74,45,.6);opacity:0;transform:translateY(12px);transition:opacity .18s,transform .22s cubic-bezier(.22,1,.36,1)}
.dlg.open{opacity:1;transform:none} .dlg::backdrop{background:rgba(34,34,33,.45)} .dlg-in{display:flex;flex-direction:column;max-height:inherit}
.dlg-head{padding:22px 26px 16px;flex:none;background:linear-gradient(135deg,var(--accent-soft),var(--creme));border-bottom:1px solid rgba(196,122,83,.22)}
.dlg-head .eyebrow{font-size:9px;margin-bottom:4px} .dlg.is-danger .dlg-head{background:linear-gradient(135deg,rgba(180,84,59,.14),var(--creme))} .dlg.is-danger .dlg-head .eyebrow{color:var(--brique)}
.dlg-titre{font-family:var(--font-serif);font-weight:400;font-size:26px;line-height:1.15}
.dlg-corps{display:flex;flex-direction:column;gap:10px;padding:18px 26px 6px;overflow-y:auto;overscroll-behavior:contain;font-size:14px;line-height:1.6}
.dlg-details{font-size:13px;color:var(--encre-60)} .dlg-liste{background:var(--creme);border-left:3px solid var(--brique);padding:12px 16px;font-size:13.5px} .dlg-liste ul{padding-left:18px}
.dlg-saisie,.dlg-exige{margin:4px 0 6px} .dlg-champ{width:100%} .dlg-exige strong{color:var(--brique);letter-spacing:.08em} .dlg-champ:focus{outline:none;border-color:var(--accent)} .dlg-champ[aria-invalid="true"]{border-color:var(--brique)}
.dlg-erreur{font-size:12.5px;color:var(--brique);margin-top:6px} .dlg-erreur[hidden]{display:none}
.dlg-pied{justify-content:flex-end;flex:none;padding:16px 26px 20px} .dlg-pied .btn{border:1px solid transparent} .dlg-pied .btn-ghost{border-color:var(--encre)}
@media(max-width:560px){
  .dlg{width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)} .dlg:not(.open){transform:translateY(24px)}
  .dlg-head{padding:18px 20px 14px} .dlg-corps{padding:16px 20px 6px} .dlg-pied{padding:14px 20px 18px}
}

/* ⚠️ **Le champ du calendrier doit battre les règles de formulaire**, et c'est
   l'ordre qui l'y faisait parvenir. Son sélecteur est doublé (0,2,0) pour
   valoir autant que `.fo-r .inp{padding:9px 12px}` des espaces
   professionnels ; dans la feuille unique il venait après, et gagnait. Laissé
   dans `base.css`, il passait AVANT la feuille des espaces : le rembourrage
   droit tombait de 32 à 12 px, et la date courait sous l'icône du calendrier —
   Paramètres → Offre & engagement, les deux bornes de l'offre de lancement.
   Trouvé par la comparaison du style calculé, état par état. */
.cal-champ.cal-champ{width:100%;padding-right:32px;font-variant-numeric:lining-nums tabular-nums}

/* La flèche des listes déroulantes, dessinée par nous (demande de la cliente,
   4 octobre 2026 : « trop près du bord »).
   ⚠️ **La flèche native ne se déplace pas** : elle est collée au bord droit
   quel que soit le rembourrage — mesuré à 14 et à 40 px, elle ne bouge pas
   d'un pixel. On la retire (`appearance:none`) et on la peint en fond, là où
   on la veut. Bonus : Safari dessinait la sienne autrement, les trois
   navigateurs montrent désormais la même.
   ⚠️ **Ici, et en propriétés LONGUES** : `.field select`, `.fs-bloc select` ou
   `.inp` posent leur fond par le raccourci `background:`, qui remettrait
   `background-image` à `none` s'il passait après — le piège des raccourcis
   déjà payé trois fois. Le sélecteur (0,2,1) bat `.fo-r .inp` (0,2,0), le plus
   fort des rembourrages posés sur une liste.
   ⚠️ **Le rembourrage droit RÉSERVE la place de la flèche** : sans lui, un
   libellé long passerait dessous.
   ⚠️ Les listes à choix multiple ou à hauteur (`multiple`, `size`) n'ont pas de
   flèche — elles s'affichent ouvertes. */
select:not([multiple]):not([size]){
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222221' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:14px;
  padding-right:42px;
}

.u-c-encre-60.u-c-encre-60{color:var(--encre-60)}
.u-c-terracotta-2.u-c-terracotta-2{color:var(--terracotta-2)}
.u-d-flex.u-d-flex{display:flex}
.u-g-6.u-g-6{gap:6px}

/* justify-content */
.u-jc-center.u-jc-center{justify-content:center}

/* margin */
.u-m-0.u-m-0{margin:0}
.u-mb-16.u-mb-16{margin-bottom:16px}
.u-mt-12.u-mt-12{margin-top:12px}
.u-mt-14.u-mt-14{margin-top:14px}
.u-mt-8.u-mt-8{margin-top:8px}

/* position */
.u-pos-absolute.u-pos-absolute{position:absolute}

/* text-align */
.u-ta-left.u-ta-left{text-align:left}

/* width */
.u-w-100p.u-w-100p{width:100%}

/* ---------- Porte d'erreur ----------
   Affiché lorsqu'une lecture échoue dans un chemin de rendu. Doit rester
   sobre et proposer une reprise : c'est le seul recours de l'utilisatrice. */
.bloc-erreur{
  grid-column:1/-1;text-align:center;padding:40px 22px;
  border:1px solid var(--peche);border-radius:16px;background:var(--blanc);
}
.bloc-erreur p{color:var(--encre-60);margin-bottom:16px}
.daypill.passe{opacity:.72}
.daypill.passe b{font-weight:500}

/* ⚠️ **Sous 16 px, Safari iOS zoome la page dès qu'on touche un champ.** Ce
   n'est pas un défaut de mise en page : c'est un comportement du navigateur, et
   il fait déborder tout ce qui suit hors du viewport visible — le récapitulatif
   du tunnel de réservation, le bouton « Payer », la moitié droite de l'écran.
   La cliente l'a vu sur son iPhone ; aucun navigateur de test ne le reproduit,
   parce qu'aucun ne zoome.
   ⚠️ **`pointer:coarse`, pas une largeur.** Le déclencheur est le doigt, pas la
   taille de l'écran : une tablette large zoome aussi, et un petit écran de
   bureau, non. Cibler `max-width` aurait raté la première et abîmé le second.
   ⚠️ **16 px exactement**, parce que c'est le seuil : à 15,9 il zoome. Ce n'est
   pas un choix de design mais une contrainte de la plateforme — d'où la valeur
   en dur plutôt qu'un jeton, qu'on serait tenté d'ajuster.
   ⚠️ **Placé en fin de feuille, et c'est nécessaire.** `.bo-rech input` pose sa
   taille par le raccourci `font:` deux mille lignes plus bas, à spécificité
   égale : depuis le haut, ma règle était écrasée en silence — un raccourci
   `font` réinitialise `font-size`. Même cascade que les titres des bandeaux.
   ⚠️ Les tableaux denses défilent déjà dans leur conteneur (`.tbl-dense`) : un
   champ plus large les allonge sans rien pousser hors de l'écran. Mesuré. */
@media (pointer: coarse){
  .field input,.field select,.field textarea,
  .bo-rech input,.inp{font-size:16px}
}