/* ══════════════════════════════════════════════════════════════════════
   BOUTONS (brief §6) — hauteur 48, 52 pour l'action principale mobile,
   rayon 12, libellé 14,5. Cibles tactiles jamais sous 44 px.

   LE LIBELLÉ EST EN --police-titre depuis le 2026-08-27 (demande d'Etienne,
   sur les maquettes de création d'une répétition, puis étendue à TOUS les
   boutons de l'application). Trois choses vont ensemble à chaque fois, comme
   partout où Bebas Neue arrive :
     • `font-weight:400` — Bebas n'a que cette graisse ; le 600 d'avant ne
       donnait rien de plus, ou un faux gras selon le navigateur ;
     • `letter-spacing:normal` — pour ne pas hériter d'un resserrement réglé
       pour une sans normale, qui colle les lettres d'une condensée ;
     • la taille CHANGE DE FAMILLE : les libellés lisent --fof-t-titre-bouton
       (18), le quatrième rôle de l'échelle des titres, et non plus
       --fof-t-libelle (14,5), qui sert encore à des textes qui ne sont pas
       des boutons. Les deux maquettes demandent 16,9 px au téléphone et
       22,0 px sur ordinateur ; ce rôle rend 16,9 et 22,5.

   Ce que ça change à l'écran : Bebas n'a pas de bas-de-casse, tous les
   libellés s'affichent donc en CAPITALES, et 44 % plus étroits. C'est ce que
   montrent les maquettes.

   Ce que ça NE touche PAS, et c'est voulu : le menu de gauche, le segmenté
   et les carrés d'icône sont des `<button>` mais ne sont pas des boutons de
   ce vocabulaire-ci — les captures d'Etienne les montrent en League Spartan.
   La règle est donc posée sur les quatre classes, jamais sur `button`.
   ══════════════════════════════════════════════════════════════════════ */
.fof-btn-primary,.fof-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--fof-px));
  min-height:calc(52 * var(--fof-px));padding:0 calc(18 * var(--fof-px));border-radius:var(--fof-r-md);
  font-family:var(--police-titre);font-size:var(--fof-t-titre-bouton);font-weight:400;
  letter-spacing:normal;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;}
.fof-btn-primary{background:var(--fof-primary-degrade);color:var(--fof-on-primary);border:none;}
.fof-btn-primary:hover{background:var(--fof-primary-hover);}
.fof-btn-secondary{background:var(--fof-surface);color:var(--fof-ink);
  border:1px solid var(--fof-border);}
.fof-btn-secondary:hover{background:var(--fof-surface-2);}
/* Fantôme : action tertiaire, sans fond au repos. */
.fof-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--fof-px));
  min-height:calc(52 * var(--fof-px));padding:0 calc(16 * var(--fof-px));border:none;border-radius:var(--fof-r-md);
  background:none;color:var(--fof-primary);
  font-family:var(--police-titre);font-size:var(--fof-t-titre-bouton);font-weight:400;
  letter-spacing:normal;cursor:pointer;
  text-decoration:none;transition:background .12s,color .12s;}
.fof-btn-ghost:hover{background:var(--fof-surface-2);}

/* Danger : discret au repos, plein au survol — on ne supprime pas par erreur. */
.fof-btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--fof-px));
  min-height:calc(52 * var(--fof-px));padding:0 calc(18 * var(--fof-px));border:none;border-radius:var(--fof-r-md);
  background:var(--fof-danger-soft);color:var(--fof-danger);
  font-family:var(--police-titre);font-size:var(--fof-t-titre-bouton);font-weight:400;
  letter-spacing:normal;cursor:pointer;
  transition:background .12s,color .12s;}
.fof-btn-danger:hover{background:var(--fof-danger);color:var(--fof-surface);}

/* Désactivé : même géométrie, plus aucun signal d'action. */
.fof-btn-primary:disabled,.fof-btn-secondary:disabled,
.fof-btn-ghost:disabled,.fof-btn-danger:disabled,
.fof-btn-primary.is-disabled,.fof-btn-secondary.is-disabled{
  background:var(--fof-surface-2);color:var(--fof-faint);
  border-color:var(--fof-border-soft);cursor:not-allowed;box-shadow:none;}

/* En cours : spinner de 15 px, bouton non cliquable pendant l'envoi. */
.fof-btn-primary.is-loading,.fof-btn-secondary.is-loading{
  pointer-events:none;position:relative;}
.fof-btn-primary.is-loading::before,.fof-btn-secondary.is-loading::before{
  content:"";width:calc(15 * var(--fof-px));height:calc(15 * var(--fof-px));border-radius:50%;
  border:calc(2 * var(--fof-px)) solid currentColor;border-top-color:transparent;
  animation:fofSpin .7s linear infinite;}
@keyframes fofSpin{to{transform:rotate(360deg);}}

/* Variante compacte : action secondaire dans un en-tête de section.
   Elle ne rapetisse PLUS le libellé. Elle descendait à --fof-t-second (14),
   un cran sous les boutons pleins ; en Bebas cela donnait 13,2 px au
   téléphone, la moitié de ce que demandent les maquettes du 2026-08-27. Entre
   un bouton compact et un bouton plein, seules la hauteur et le retrait
   changent désormais — c'est ce que « compact » veut dire. */
.fof-btn-compact{min-height:calc(44 * var(--fof-px));padding:0 calc(14 * var(--fof-px));}

/* ── Déclinaison BLEUE : les écrans de répétition ────────────────────────
   Le bordeaux est la couleur d'action de l'application ; les répétitions ont
   la leur, le bleu, et c'est ce qui les distingue du reste (décision
   d'Etienne, 2026-08-27). Aucune autre géométrie ne change : même hauteur,
   même retrait, même rayon, même libellé en --police-titre. Seule la couleur
   se déplace — d'où un modificateur et non deux boutons de plus.

   Il remplace SIX boutons bleus écrits en `style="…"` dans le gabarit, qui
   redéclaraient chacun leur fond, leur rayon, leur retrait et leur ombre à
   la main, et qui ne suivaient donc ni le dégradé ni le thème sombre.
   Le survol garde son aplat, comme le bordeaux : le dégradé cède la place le
   temps du survol, en attendant une paire dédiée. */
.fof-btn-primary.is-info{background:var(--fof-info-degrade);color:var(--fof-on-primary);}
.fof-btn-primary.is-info:hover{background:var(--fof-info);}
.fof-btn-secondary.is-info{color:var(--fof-info);border-color:var(--fof-info);}
.fof-btn-secondary.is-info:hover{background:var(--fof-info-soft);}
/* Le jumeau du dessus, aux couleurs de l'APPLICATION (accord d'Etienne du
   2026-08-27, maquette EVENEMENT_Create_Desktop). « Annuler » y porte un filet
   et un texte bordeaux, et non le gris neutre du bouton secondaire nu : sur ces
   écrans-là, les deux actions de l'en-tête sont de la même famille, l'une
   pleine, l'autre en creux.
   ⚠ Le survol ne se teinte PAS comme celui d'`is-info` : il n'existe pas de
   --fof-primary-soft dans `1-socle.css`, et on n'en invente pas un ici. Il
   garde donc l'aplat du bouton secondaire nu, --fof-surface-2. Le jour où ce
   token existera, c'est cette ligne-là — et elle seule — qui changera. */
.fof-btn-secondary.is-primary{color:var(--fof-primary);border-color:var(--fof-primary);}
.fof-btn-secondary.is-primary:hover{background:var(--fof-surface-2);}

/* ══════════════════════════════════════════════════════════════════════
   CHAMPS — états d'erreur, de validation, cases et interrupteurs
   ══════════════════════════════════════════════════════════════════════ */
.fof-field{margin-bottom:calc(14 * var(--fof-px));}
/* Le titre au-dessus d'un champ. Il lit --fof-t-libelle-champ depuis le
   2026-08-27 (les deux maquettes REPETITION_Create le demandent à 22,6 px sur
   ordinateur contre 16,25 rendus) et non plus --fof-t-badge, le rôle des
   badges et des mentions, qui n'avait aucune raison de le suivre.
   La règle vaut pour TOUTE l'application, et pas seulement pour la
   répétition : mesuré aux deux largeurs, aucun libellé ne déborde ni ne
   gagne une ligne, y compris la rangée « Date · Prix de vente · Jauge » de la
   fenêtre d'évènement, qui est la plus serrée. */
.fof-field-label{display:block;margin-bottom:calc(6 * var(--fof-px));font-size:var(--fof-t-libelle-champ);font-weight:600;
  color:var(--fof-muted);}
/* Le champ de saisie de référence. Toutes ses mesures viennent des tokens
   « --fof-field-* » (1-socle.css) : les faux champs de l'application — choix
   d'heure, choix de client, téléphone, lignes de devis — tirent des MÊMES
   tokens, c'est ce qui les rend indiscernables les uns des autres. */
.fof-input{width:100%;height:var(--fof-field-h);padding:0 var(--fof-field-px);
  font-family:inherit;font-size:var(--fof-field-size);
  color:var(--fof-ink);background:var(--fof-field-bg);
  border:1px solid var(--fof-border);border-radius:var(--fof-field-radius);outline:none;}
.fof-input:focus{border:calc(1.5 * var(--fof-px)) solid var(--fof-primary);
  box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-focus);}
.fof-input:disabled{background:var(--fof-surface-2);color:var(--fof-faint);cursor:not-allowed;}
.fof-input.is-error{border:calc(1.5 * var(--fof-px)) solid var(--fof-danger);}
.fof-input.is-valid{border:calc(1.5 * var(--fof-px)) solid var(--fof-success);}
/* Le message d'erreur se place SOUS le champ concerné, jamais en tête de
   formulaire : c'est le seul endroit où il est utile. */
.fof-field-error{display:block;margin-top:calc(6 * var(--fof-px));font-size:var(--fof-t-badge);color:var(--fof-danger);}

/* Case à cocher : la case NATIVE du navigateur, agrandie au plancher tactile
   de 24 px du brief et teintée aux couleurs de l'application. On ne redessine
   pas la case avec un <button> : la native est déjà annoncée correctement aux
   lecteurs d'écran et suit le clavier sans une ligne de code.
   (L'ancienne version, jamais employée, était un faux carré à piloter à la
   main ; l'unique case de l'application restait donc à 16 px.) */
.fof-check{width:calc(24 * var(--fof-px));height:calc(24 * var(--fof-px));flex-shrink:0;cursor:pointer;
  accent-color:var(--fof-primary);}
@media (min-width: 760px){
  .fof-btn-primary,.fof-btn-secondary{min-height:calc(48 * var(--fof-px));}
  .fof-btn-compact{min-height:calc(44 * var(--fof-px));}
}

/* ══════════════════════════════════════════════════════════════════════
   FENÊTRES — feuille montante sur téléphone, carte centrée au-delà
   ----------------------------------------------------------------------
   Une seule mécanique pour les 28 fenêtres de l'application. Chacune garde
   sa largeur de bureau via --sheet-w ; sous 760 px elles montent du bas,
   avec poignée, coins arrondis en haut et fermeture au pouce.
   ══════════════════════════════════════════════════════════════════════ */
.fof-modal-overlay{position:fixed;inset:0;z-index:70;display:flex;
  align-items:flex-end;justify-content:center;
  background:rgba(20,4,10,.45);animation:drwFade .16s ease;
  /* Le défilement s'arrête au voile : arrivé en butée, il ne se REPORTE pas
     sur ce qu'il y a dessous. Le verrou de page (`fof-page-lock`) suffirait
     sur ordinateur ; `overscroll-behavior` couvre en plus le geste tactile,
     où le report est fluide et ne peut pas être rattrapé après coup. */
  overscroll-behavior:contain;}
.fof-sheet{width:100%;max-width:100%;max-height:88vh;
  display:flex;flex-direction:column;overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--fof-surface);
  border-radius:var(--fof-r-xl) var(--fof-r-xl) 0 0;
  box-shadow:var(--fof-shadow);
  padding:calc(18 * var(--fof-px)) calc(16 * var(--fof-px)) calc(18 * var(--fof-px) + env(safe-area-inset-bottom));}
.fof-sheet::before{content:"";flex-shrink:0;display:block;width:calc(38 * var(--fof-px));height:calc(4 * var(--fof-px));
  border-radius:calc(2 * var(--fof-px));background:var(--fof-border);margin:0 auto calc(14 * var(--fof-px));}
@media (min-width: 760px){
  .fof-modal-overlay{align-items:center;padding:calc(24 * var(--fof-px));}
  .fof-sheet{width:var(--sheet-w, calc(520 * var(--fof-px)));max-width:100%;max-height:88vh;
    border-radius:var(--fof-r-lg);padding:calc(22 * var(--fof-px));animation:popIn .16s ease;}
  .fof-sheet::before{display:none;}
}

/* ── Fenêtre en PLEINE PAGE sous 1101 px ──────────────────────────────────
   Deux fenêtres sont des formulaires longs : l'évènement et la répétition.
   En feuille montante il n'en restait que 88 % de la hauteur, moins la
   poignée, et le clavier du téléphone mangeait ce qui restait. Elles
   occupent donc TOUT l'écran, exactement comme la lecture d'un mail
   (`.fof-mv`) et comme la fiche de l'Agenda : même bascule, même seuil.
   Au-delà de 1101 px la classe est neutralisée et la fenêtre redevient la
   carte centrée commune aux autres fenêtres de l'application. */
.fof-modal-overlay.is-fullpage{align-items:stretch;justify-content:stretch;
  padding:0;background:var(--fof-surface);}
.fof-modal-overlay.is-fullpage .fof-sheet{width:100%;max-width:100%;
  height:100%;max-height:none;border-radius:0;box-shadow:none;
  animation:none;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
.fof-modal-overlay.is-fullpage .fof-sheet::before{display:none;}
/* La neutralisation au-delà de 1101 px vit dans la grande media query de
   l'ordinateur, plus bas — comme celle de `.fof-mv`. */

/* ══════════════════════════════════════════════════════════════════════
   SÉLECTEUR D'HEURE — un seul modèle pour TOUS les champs d'heure
   ----------------------------------------------------------------------
   Le champ `type="time"` ouvrait la fenêtre du système : polices, couleurs
   et boutons d'Android ou d'iOS au milieu de l'application. Sur téléphone,
   le champ devient donc un BOUTON (`.fof-tp-field`) qui ouvre cette
   feuille-ci, aux couleurs de l'application.

   Deux colonnes qui défilent SOUS un cadre fixe : les heures à gauche, les
   minutes par pas de 5 à droite. On ne touche pas un chiffre pour le
   choisir — on amène le chiffre dans le cadre, et « Valider » enregistre ce
   qui s'y trouve. C'est le geste d'une molette, pas d'une liste.

   Aucun texte dans la feuille : ni titre, ni heure écrite en grand, ni
   intitulé de colonne. Deux colonnes de nombres sous un cadre se lisent
   seules, et la feuille reste petite — donc centrée à l'écran plutôt que
   collée en bas.

   Au-delà de 1101 px ce sélecteur ne sert pas : au clavier, taper « 18:30 »
   est plus rapide que n'importe quel sélecteur. Le champ natif reprend sa
   place — voir la grande media query plus bas.
   ══════════════════════════════════════════════════════════════════════ */
/* Le champ, DANS le formulaire : strictement l'apparence des autres champs
   de saisie — même hauteur, même filet, même arrondi, même taille de texte.
   Seul le geste change, il ouvre le sélecteur au lieu de la fenêtre du
   système. Rien ne doit trahir que ce n'est pas un `<input>`. */
.fof-tp-field{display:flex;width:100%;height:var(--fof-field-h);align-items:center;
  padding:0 var(--fof-field-px);font-family:inherit;font-size:var(--fof-field-size);
  text-align:left;color:var(--fof-ink);background:var(--fof-field-bg);
  border:1px solid var(--fof-border);border-radius:var(--fof-field-radius);cursor:pointer;
  transition:border-color .12s,box-shadow .12s;}
.fof-tp-field:hover{border-color:var(--fof-primary);}
.fof-tp-field:focus-visible{outline:none;border-color:var(--fof-primary);
  box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-focus);}
/* Aucune heure : « --:-- », exactement ce qu'affiche un champ natif vide. */
.fof-tp-field.is-empty{color:var(--fof-faint);}

/* ── Sur ORDINATEUR : le champ se tape, l'horloge ouvre la molette ───────
   Les deux manières coexistent. Taper « 18:30 » au clavier reste le plus
   rapide, mais qui préfère cliquer retrouve la même molette qu'au
   téléphone. Le bouton est posé DANS le champ, à droite : c'est exactement
   l'emplacement et la taille des croix d'effacement de l'application
   (42 × 48, collées à 3 px du bord), pour ne pas inventer une seconde
   manière de poser une action dans un champ. */
.fof-tp-wrap{position:relative;}
/* Le navigateur pose SA propre horloge dans un champ `type="time"`, au même
   endroit — deux horloges côte à côte, et celle du navigateur rouvrait sa
   liste à lui. On la retire, sur ces deux champs UNIQUEMENT : les champs de
   DATE gardent la leur, puisqu'il n'existe pas de calendrier maison.
   Le champ reste saisissable au clavier, flèches comprises. */
.fof-tp-native::-webkit-calendar-picker-indicator,
.fof-tp-native::-webkit-inner-spin-button,
.fof-tp-native::-webkit-clear-button{display:none;-webkit-appearance:none;appearance:none;}
.fof-tp-open{display:none;position:absolute;right:calc(3 * var(--fof-px));top:0;
  height:calc(48 * var(--fof-px));width:calc(42 * var(--fof-px));align-items:center;justify-content:center;
  border:none;background:none;color:var(--fof-faint);cursor:pointer;
  border-radius:var(--fof-r-sm);transition:color .12s,background .12s;}
.fof-tp-open:hover{color:var(--fof-primary);background:var(--fof-surface-2);}

/* La feuille est petite : centrée à l'écran, pas montée du bas. Sans poignée
   non plus — la poignée annonce un geste de glissement vers le bas qui n'a
   pas lieu d'être ici. */
.fof-modal-overlay.is-mid{align-items:center;padding:calc(24 * var(--fof-px));}
.fof-modal-overlay.is-mid .fof-sheet{width:var(--sheet-w, calc(300 * var(--fof-px)));max-width:100%;
  border-radius:var(--fof-r-lg);padding:calc(18 * var(--fof-px));animation:popIn .16s ease;}
.fof-modal-overlay.is-mid .fof-sheet::before{display:none;}

/* Le porte-colonnes reprend le conteneur d'une bascule (`.fof-seg`) : fond
   --fof-bg, filet, 4 px de remplissage. Même objet à l'œil, même famille. */
.fof-tp-cols{--tp-row:calc(44 * var(--fof-px));position:relative;display:flex;gap:calc(10 * var(--fof-px));
  padding:calc(4 * var(--fof-px));background:var(--fof-bg);
  border:1px solid var(--fof-border);border-radius:var(--fof-r-md);}
/* Le CADRE, fixe au centre : c'est lui qui sélectionne. Il reprend trait
   pour trait l'aspect d'un bouton de bascule sélectionné
   (`.fof-seg-btn.is-selected`) : fond de surface et ombre légère — d'où le
   brun foncé qui disparaît. Il ne prend aucun clic : il n'est qu'un repère,
   les chiffres défilent dessous. */
.fof-tp-band{position:absolute;left:calc(4 * var(--fof-px));right:calc(4 * var(--fof-px));top:50%;z-index:0;
  transform:translateY(-50%);height:var(--tp-row);display:flex;gap:calc(10 * var(--fof-px));
  pointer-events:none;}
.fof-tp-band > span{flex:1 1 0;border-radius:var(--fof-r-sm);
  background:var(--fof-surface);box-shadow:0 1px calc(3 * var(--fof-px)) rgba(0,0,0,.10);}
/* Cinq rangées visibles, une seule au centre : la hauteur est un multiple
   IMPAIR de la rangée, sinon le cadre ne tomberait jamais sur une valeur.
   Le remplissage haut et bas vaut deux rangées, pour que la première et la
   dernière valeur puissent elles aussi venir au centre. */
.fof-tp-col{position:relative;z-index:1;flex:1 1 0;min-width:0;
  height:calc(var(--tp-row) * 5);padding:calc(var(--tp-row) * 2) 0;
  overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;}
.fof-tp-col::-webkit-scrollbar{display:none;}
.fof-tp-opt{display:flex;width:100%;height:var(--tp-row);
  align-items:center;justify-content:center;scroll-snap-align:center;
  border:none;background:none;font-family:inherit;font-size:calc(17px * var(--fof-echelle-texte));
  font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--fof-ink);cursor:pointer;}
.fof-tp-acts{flex:0 0 auto;display:flex;gap:calc(9 * var(--fof-px));margin-top:calc(16 * var(--fof-px));}
.fof-tp-acts > *{flex:1 1 0;}
/* Le champ natif et le bouton sont TOUS DEUX dans le document : c'est la
   feuille de style qui choisit, pas le rendu. Une rotation ou un
   redimensionnement bascule donc de l'un à l'autre sans rien recalculer.
   Le natif ne sert qu'au-delà de 1101 px — bascule dans la grande media
   query, plus bas. */
.fof-tp-native{display:none;}

/* ══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — un seul composant pour toute l'application (`.fof-tel`)
   ──────────────────────────────────────────────────────────────────────
   Un bouton drapeau qui ouvre la liste des pays, puis le champ du numéro.
   Comme `.fof-seg` et `.fof-tp` : le style et le comportement sont écrits
   UNE fois, seul l'emplacement se répète. Toute nouvelle saisie de numéro
   réutilise ces classes.

   LES DRAPEAUX SONT DESSINÉS ICI, en dégradés CSS. Ce n'est pas un choix
   d'esthète : sur Windows, Chrome et Edge n'ont pas de police de drapeaux —
   le drapeau emoji français s'y affiche « FR », en deux lettres. Un dessin
   CSS donne le même
   drapeau sur Windows, macOS, iPhone et Android, sans fichier à livrer ni
   service extérieur à interroger.
   ══════════════════════════════════════════════════════════════════════ */
.fof-flag{display:inline-block;flex:0 0 auto;width:calc(22 * var(--fof-px));height:calc(16 * var(--fof-px));
  border-radius:calc(3 * var(--fof-px));overflow:hidden;background:var(--fof-surface-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
/* Trois bandes verticales — le cas le plus courant. */
.fof-flag.is-fr{background:linear-gradient(90deg,#002395 0 33.34%,#fff 33.34% 66.67%,#ED2939 66.67% 100%);}
.fof-flag.is-be{background:linear-gradient(90deg,#2D2926 0 33.34%,#FAE042 33.34% 66.67%,#ED2939 66.67% 100%);}
.fof-flag.is-it{background:linear-gradient(90deg,#008C45 0 33.34%,#F4F5F0 33.34% 66.67%,#CD212A 66.67% 100%);}
/* Portugal : vert 2/5, rouge 3/5, et la sphère armillaire résumée à un
   disque jaune sur la césure — sans lui les deux bandes ne se lisent pas. */
.fof-flag.is-pt{background:
  radial-gradient(circle at 40% 50%, #FFE900 0 22%, transparent 22%),
  linear-gradient(90deg,#046A38 0 40%,#DA291C 40% 100%);}
/* Trois bandes horizontales. */
.fof-flag.is-de{background:linear-gradient(180deg,#000 0 33.34%,#DD0000 33.34% 66.67%,#FFCE00 66.67% 100%);}
.fof-flag.is-nl{background:linear-gradient(180deg,#AE1C28 0 33.34%,#fff 33.34% 66.67%,#21468B 66.67% 100%);}
.fof-flag.is-lu{background:linear-gradient(180deg,#ED2939 0 33.34%,#fff 33.34% 66.67%,#00A1DE 66.67% 100%);}
/* Espagne : rouge / jaune / rouge, la bande centrale double des autres. */
.fof-flag.is-es{background:linear-gradient(180deg,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%);}
/* Suisse : croix blanche sur fond rouge — deux barres croisées. */
.fof-flag.is-ch{background:
  linear-gradient(#fff,#fff) center/38% calc(8 * var(--fof-px)) no-repeat,
  linear-gradient(#fff,#fff) center/calc(8 * var(--fof-px)) 62% no-repeat,
  #D52B1E;}
/* Royaume-Uni : les deux croix de Saint-André (blanche puis rouge, en
   diagonale) sous la croix de Saint-Georges. */
.fof-flag.is-gb{background:
  linear-gradient(180deg,transparent 40%,#C8102E 40% 60%,transparent 60%),
  linear-gradient(90deg,transparent 38%,#C8102E 38% 62%,transparent 62%),
  linear-gradient(180deg,transparent 34%,#fff 34% 66%,transparent 66%),
  linear-gradient(90deg,transparent 31%,#fff 31% 69%,transparent 69%),
  linear-gradient(to bottom right,transparent calc(50% - 1.5 * var(--fof-px)),#C8102E calc(50% - 1.5 * var(--fof-px)) calc(50% + 1.5 * var(--fof-px)),transparent calc(50% + 1.5 * var(--fof-px))),
  linear-gradient(to bottom left,transparent calc(50% - 1.5 * var(--fof-px)),#C8102E calc(50% - 1.5 * var(--fof-px)) calc(50% + 1.5 * var(--fof-px)),transparent calc(50% + 1.5 * var(--fof-px))),
  linear-gradient(to bottom right,transparent calc(50% - 4 * var(--fof-px)),#fff calc(50% - 4 * var(--fof-px)) calc(50% + 4 * var(--fof-px)),transparent calc(50% + 4 * var(--fof-px))),
  linear-gradient(to bottom left,transparent calc(50% - 4 * var(--fof-px)),#fff calc(50% - 4 * var(--fof-px)) calc(50% + 4 * var(--fof-px)),transparent calc(50% + 4 * var(--fof-px))),
  #012169;}
/* États-Unis / Canada : bandes rouges et blanches, carré bleu en tête. */
.fof-flag.is-us{background:
  linear-gradient(90deg,#3C3B6E 0 42%,transparent 42%) 0 0/100% 54% no-repeat,
  repeating-linear-gradient(180deg,#B31942 0 15.4%,#fff 15.4% 30.8%);}

/* Le composant : drapeau collé au champ, comme un seul contrôle. */
.fof-tel{position:relative;display:flex;align-items:stretch;gap:calc(8 * var(--fof-px));}
.fof-tel-cc{flex:0 0 auto;display:inline-flex;align-items:center;gap:calc(6 * var(--fof-px));
  height:var(--fof-field-h);padding:0 calc(10 * var(--fof-px));background:var(--fof-field-bg);
  border:1px solid var(--fof-border);border-radius:var(--fof-field-radius);
  color:var(--fof-muted);font-family:inherit;font-size:var(--fof-t-badge);cursor:pointer;
  transition:border-color .12s,box-shadow .12s;}
.fof-tel-cc:hover{border-color:var(--fof-primary);}
.fof-tel-cc:focus-visible{outline:none;border-color:var(--fof-primary);
  box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-focus);}
.fof-tel-cc svg{flex:0 0 auto;}
.fof-tel-num{flex:1;min-width:0;height:var(--fof-field-h);padding:0 var(--fof-field-px);
  border:1px solid var(--fof-border);border-radius:var(--fof-field-radius);
  background:var(--fof-field-bg);color:var(--fof-ink);
  font-family:inherit;font-size:var(--fof-field-size);outline:none;
  transition:border-color .12s,box-shadow .12s;}
.fof-tel-num:focus{border-color:var(--fof-primary);box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-focus);}
/* La liste : posée sous le drapeau, plafonnée et défilante. Elle sort de la
   fenêtre qui la porte, d'où le z-index — les fenêtres montent jusqu'à 70. */
.fof-tel-list{position:absolute;left:0;top:calc(52 * var(--fof-px));z-index:80;min-width:calc(250 * var(--fof-px));
  max-height:calc(260 * var(--fof-px));overflow-y:auto;overscroll-behavior:contain;
  background:var(--fof-surface);border:1px solid var(--fof-border);
  border-radius:var(--fof-r-md);box-shadow:var(--fof-shadow);padding:calc(6 * var(--fof-px));}
.fof-tel-opt{display:flex;align-items:center;gap:calc(10 * var(--fof-px));width:100%;min-height:calc(44 * var(--fof-px));
  padding:0 calc(10 * var(--fof-px));border:none;border-radius:var(--fof-r-sm);background:none;
  color:var(--fof-ink);font-family:inherit;font-size:var(--fof-t-second);text-align:left;cursor:pointer;}
.fof-tel-opt:hover{background:var(--fof-surface-2);}
.fof-tel-opt.is-selected{background:var(--fof-accent-soft);color:var(--fof-accent-ink);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════
   COMPOSANTS COMMUNS (v4)
   ----------------------------------------------------------------------
   Ces classes remplacent 259 styles écrits directement dans le gabarit —
   des boutons, des champs, des titres et des messages qui se ressemblaient
   à deux ou trois pixels près, chacun avec ses propres valeurs. Ils ont
   maintenant UN seul endroit où être réglés : ici.
   Règle de travail : avant d'écrire un style dans index.html, chercher
   d'abord s'il existe déjà une classe pour ça.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Bouton d'une suppression CONFIRMÉE ───────────────────────────────────
   `.fof-btn-danger` reste discret au repos (c'est ce qu'on veut pour une
   action dangereuse offerte au passage). Mais dans une fenêtre qui demande
   « Confirmer la suppression ? », le bouton EST la réponse attendue : il
   prend alors le rouge plein. Une seule variante, pas dix rouges. */
.fof-btn-danger.is-solid{background:var(--fof-danger);color:var(--fof-on-primary);}
.fof-btn-danger.is-solid:hover{background:var(--fof-danger);filter:brightness(.9);}

/* ── Champ portant une icône à gauche, une action à droite ──────────────── */
.fof-input.is-icon-left{padding-left:calc(40 * var(--fof-px));}
.fof-input.is-action-right{padding-right:calc(44 * var(--fof-px));}
.fof-input-icon{position:absolute;left:calc(12 * var(--fof-px));top:0;height:calc(48 * var(--fof-px));
  display:flex;align-items:center;color:var(--fof-faint);pointer-events:none;}
.fof-input-action{position:absolute;right:calc(4 * var(--fof-px));top:0;height:calc(48 * var(--fof-px));width:calc(40 * var(--fof-px));
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--fof-faint);cursor:pointer;}
.fof-input-action:hover{color:var(--fof-ink);}

/* ── Fenêtres : titre et pied d'actions ──────────────────────────────────
   Le pied aligne toujours à droite, dans le même ordre : annuler à gauche,
   action principale à droite. */
.fof-modal-title{margin:0;font-size:calc(18px * var(--fof-echelle-texte));font-weight:600;color:var(--fof-ink);}
.fof-modal-title.is-tight{margin-bottom:calc(8 * var(--fof-px));}
.fof-modal-actions{display:flex;justify-content:flex-end;gap:calc(10 * var(--fof-px));}

/* ── Bandeau de message (brief §6) ───────────────────────────────────────
   Un fond teinté, jamais du texte rouge seul perdu en haut d'un formulaire. */
.fof-alert{border-radius:var(--fof-r-sm);padding:calc(10 * var(--fof-px)) calc(13 * var(--fof-px));
  font-size:var(--fof-t-badge);line-height:1.5;}
.fof-alert.is-danger{background:var(--fof-danger-soft);color:var(--fof-danger);}
.fof-alert.is-success{background:var(--fof-success-soft);color:var(--fof-success);}

/* ── Textes d'accompagnement ─────────────────────────────────────────────
   Trois rôles, trois classes — au lieu d'une taille inventée à chaque fois.
   `is-spaced` ajoute la respiration d'un texte d'introduction de fenêtre. */
.fof-t-hint{font-size:var(--fof-t-badge);color:var(--fof-faint);}
.fof-t-help{font-size:var(--fof-t-second);color:var(--fof-muted);line-height:1.55;}
.fof-t-help.is-spaced{margin-bottom:calc(20 * var(--fof-px));}
.fof-t-strong{font-size:var(--fof-t-second);font-weight:600;color:var(--fof-ink);}

/* ── Sur-titre d'un bloc de fiche ────────────────────────────────────────
   « CONTACT SUR PLACE », « NOTE », « INFOS TECHNIQUES » : il ANNONCE le bloc
   qui suit, seul sur sa ligne, au-dessus du cadre — jamais dedans. En gras,
   sans quoi il se lisait comme la première ligne du contenu (demande
   d'Etienne, 2026-08-24). Les écarts sont ceux de l'échelle : 20 px au-dessus
   pour détacher le bloc du précédent, 8 px en dessous pour le coller au sien. */
.fof-section-title{display:block;font-weight:700;
  margin:var(--fof-sp-5) 0 var(--fof-sp-2);}

/* ── Menu déroulant : la surface qui attrape le clic « ailleurs » ──────── */
.fof-menu-catch{position:fixed;inset:0;z-index:40;}

/* ── Liste de suggestions sous un champ (adresses, clients…) ───────────── */
.fof-suggest{margin-top:calc(6 * var(--fof-px));background:var(--fof-surface);
  border:1px solid var(--fof-border-soft);border-radius:var(--fof-r-sm);
  max-height:calc(170 * var(--fof-px));overflow-y:auto;}
.fof-suggest-item{padding:calc(9 * var(--fof-px)) calc(12 * var(--fof-px));font-size:var(--fof-t-badge);color:var(--fof-ink-2);
  cursor:pointer;border-bottom:1px solid var(--fof-border-soft);}
.fof-suggest-item:last-child{border-bottom:none;}
.fof-suggest-item:hover{background:var(--fof-surface-2);}

/* ── Petit bouton carré à icône ──────────────────────────────────────────
   Deux tailles cohabitaient (30 et 32 px) : il n'en reste qu'une.
   NOTE : 32 px reste sous le plancher tactile de 44 px du brief. C'est un
   écart assumé — l'élargir déplacerait des lignes entières. À reprendre
   écran par écran, pas d'un coup. */
.fof-icon-btn{width:calc(32 * var(--fof-px));height:calc(32 * var(--fof-px));flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:var(--fof-r-sm);
  color:var(--fof-faint);font-size:var(--fof-t-section);cursor:pointer;
  transition:background .12s,color .12s;}
.fof-icon-btn:hover{background:var(--fof-surface-2);color:var(--fof-ink);}
/* En couleur d'action : le carré cesse d'être un geste d'appoint pour devenir
   une ACTION de l'écran — la corbeille du pied de l'évènement (maquette
   EVENEMENT_Edit_Mobile, 2026-08-28), où elle est bordeaux et non rouge, à
   côté d'un « Annuler » qui l'est aussi. Le gris de --fof-faint la ferait
   passer pour l'icône décorative d'un champ.
   Même modificateur que `.fof-btn-secondary.is-primary` : une seule habitude
   pour dire « celui-ci prend la couleur de l'application ». */
.fof-icon-btn.is-primary{color:var(--fof-primary);}
.fof-icon-btn.is-primary:hover{background:var(--fof-surface-2);color:var(--fof-primary);}
/* Et en BLEU, pour la même corbeille au pied de l'écran de RÉPÉTITION
   (maquette REPETITION_Edit_Mobile, 2026-08-28). Même carré, même geste, à
   l'autre bout de l'application : seule la famille d'écrans change, donc
   seule la couleur change. Le bleu y est déjà partout — le carré d'icône du
   titre le prend par `.fof-rf-icon.is-info`, « Annuler » et « Enregistrer »
   par `is-info` eux aussi ; la corbeille n'avait aucune raison d'y échapper.
   (Choix d'Etienne du 2026-08-28, sur les trois façons de la teinter.) */
.fof-icon-btn.is-info{color:var(--fof-info);}
.fof-icon-btn.is-info:hover{background:var(--fof-surface-2);color:var(--fof-info);}