/* ============================================================
   Vexillum - feuille de style du front
   ------------------------------------------------------------
   Volontairement neutre : elle herite des couleurs du modele du
   site plutot que d'en imposer. Les seules couleurs ecrites en
   dur sont celles qui PORTENT une information - une penalite en
   rouge, une cible manquee en gris - et elles restent lisibles
   sur fond clair comme sur fond sombre.
   ============================================================ */

.vexillum { max-width: 1000px; }
.vexillum h2 { margin-top: 2rem; font-size: 1.15rem; }

.cib-entete { margin-bottom: 1.5rem; }
.cib-abo { font-size: .95rem; margin: .25rem 0 0; }
.cib-abo-actif::before   { content: "●"; color: #16a34a; margin-right: .4em; }
.cib-abo-inactif::before { content: "●"; color: #9ca3af; margin-right: .4em; }
.cib-restants { opacity: .7; }
.cib-bientot  { color: #b45309; opacity: 1; font-weight: 600; }

/* Les tuiles : une valeur, un mot. Rien d'autre ne se lit d'un
   coup d'oeil entre deux series. */
.cib-tuiles { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.cib-tuile  { flex: 1 1 8rem; padding: .9rem; border-radius: .6rem;
              background: rgba(127, 127, 127, .09); text-align: center; }
.cib-tuile b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cib-tuile i { font-style: normal; opacity: .65; font-size: .78rem; }

.cib-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cib-table th, .cib-table td { padding: .5rem .4rem; border-bottom: 1px solid rgba(127,127,127,.22); text-align: left; }
.cib-table th { font-weight: 600; opacity: .7; font-size: .82rem; }
.cib-table td { font-variant-numeric: tabular-nums; }
.cib-penalite td { color: #dc2626; }
.cib-manquee td  { opacity: .5; }

/* Histogramme de progression, en CSS pur : douze barres ne
   justifient pas de charger une bibliotheque de graphiques, et
   celui-ci s'affiche meme sans JavaScript. */
.cib-courbe { display: flex; align-items: flex-end; gap: .35rem; height: 130px; margin: .75rem 0; }
.cib-barre  { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
              align-items: center; height: 100%; }
.cib-barre span { display: block; width: 100%; background: currentColor; opacity: .35;
                  border-radius: .2rem .2rem 0 0; min-height: 2px; }
.cib-barre i { font-style: normal; font-size: .68rem; opacity: .6; margin-top: .3rem; white-space: nowrap; }

.cib-note  { font-size: .85rem; opacity: .65; }
.cib-vide  { padding: 2rem; text-align: center; background: rgba(127,127,127,.07); border-radius: .6rem; }
.cib-badges { list-style: none; padding: 0; }
.cib-badges li { padding: .35rem 0; border-bottom: 1px solid rgba(127,127,127,.18); }
.cib-badges code { font-size: .9rem; margin-right: .6rem; }

@media (max-width: 640px) {
	.cib-tuile { flex-basis: 45%; }
	.cib-table { font-size: .85rem; }
}

/* --- La carriere de terrain -------------------------------- */
/* Le grade en premier et en gros : c'est la seule ligne que le
   joueur cherche vraiment en ouvrant la page. Le reste est du
   detail qu'il lit ensuite, s'il en a envie. */
.cib-terrain .cib-grade { margin: .25rem 0 1rem; }
.cib-terrain .cib-grade b { font-size: 1.4rem; }
.cib-terrain .cib-grade span { margin-left: .6rem; opacity: .75; }

/* --- La carriere ------------------------------------------- */
.cib-carriere { margin: 1rem 0 1.5rem; }
.cib-grade-nom { font-size: 1.7rem; line-height: 1.2; }
.cib-grade-pts { margin-left: .6rem; opacity: .75; }

/* La jauge montre l'avancement DANS le grade courant, pas dans
   la carriere entiere - sinon elle serait pleine des le caporal
   et ne bougerait plus jamais visiblement. */
.cib-jauge { height: 10px; border-radius: 5px; background: rgba(127,127,127,.22);
             overflow: hidden; margin: .6rem 0 .35rem; }
.cib-jauge i { display: block; height: 100%; background: currentColor; opacity: .65; }

.cib-detail { list-style: none; padding: 0; margin: .8rem 0;
              display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.cib-detail li { display: flex; gap: .5rem; align-items: baseline; }
.cib-detail span { opacity: .75; }
.cib-journee { margin: .6rem 0 0; }

.cib-bonus { list-style: none; padding: 0; margin: .5rem 0; }
.cib-bonus li { display: flex; gap: .6rem; align-items: baseline;
                padding: .35rem 0; border-bottom: 1px solid rgba(127,127,127,.15); }
.cib-bonus b { min-width: 3.5rem; }
.cib-bonus em { margin-left: auto; opacity: .6; font-style: normal; font-size: .9em; }

.cib-periode { font-size: 1rem; margin: 1.2rem 0 .4rem; opacity: .8; }

/* --- Formules et classement -------------------------------- */
.cib-formules { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.cib-formule { flex: 1 1 12rem; padding: 1rem; border: 1px solid rgba(127,127,127,.3);
               border-radius: .5rem; text-align: center; }
.cib-formule-nom { display: block; font-size: 1.1rem; }
.cib-formule-prix { display: block; font-size: 1.9rem; margin: .4rem 0; }
.cib-formule-duree { display: block; opacity: .7; font-style: normal; margin-bottom: .8rem; }
.cib-avantages { margin: .5rem 0 .8rem; }
/* La ligne du visiteur ressort : dans un classement de cinquante
   lignes, se chercher soi-meme est la premiere chose qu'on fait. */
.cib-moi { font-weight: 700; background: rgba(127,127,127,.10); }
.cib-anon { opacity: .6; font-style: italic; }

/* --- Terrains ---------------------------------------------- */
.cib-terrains { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.cib-terrain { padding: 1rem; border: 1px solid rgba(127,127,127,.3); border-radius: .5rem; }
.cib-terrain h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.cib-lieu { opacity: .75; margin: 0 0 .6rem; }
.cib-gps code { margin-left: .6rem; opacity: .7; }
.cib-prochaine { margin: .6rem 0 0; font-weight: 600; }
/* Une date annulee doit se voir sans avoir a lire la colonne
   Statut : c'est la seule ligne qu'on ne veut pas rater. */
.cib-j-annule { opacity: .55; text-decoration: line-through; }
.cib-j-complet { opacity: .8; }
.cib-essai { padding: 1rem; border: 2px solid currentColor; border-radius: .5rem; margin: 1rem 0; }
.cib-essai-teaser { font-weight: 600; }
.cib-ajout { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-bottom: 1rem; }

/* Un organisateur retire reste dans la liste, en retrait : le
   faire disparaitre ferait croire qu'il n'a jamais existe, et
   les journees qu'il a menees sont toujours a son nom. */
.vexillum .cib-inactif { opacity: .55; }
.vexillum .cib-inactif b { font-weight: 400; text-decoration: line-through; }

/* ------------------------------------------------------------
   LES POINTS DORMANTS (3.26.0)
   ------------------------------------------------------------
   Un encadre qui se voit, mais qui ne crie pas : c'est une
   bonne nouvelle - "vos points ne sont pas perdus" - pas une
   alerte. Le ton doit le dire avant le texte.
   ------------------------------------------------------------ */
.cib-dormants{
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.35)
}
.cib-dormants h3{margin:0 0 6px;font-size:15px}
.cib-dormants p{margin:0 0 6px}
.cib-dormants p:last-child{margin-bottom:0}

/* ============================================================
   L'AGENDA DES TERRAINS  (3.43.0)
   ------------------------------------------------------------
   AJOUTE APRES UN OUBLI DE MA PART : les pages de l'agenda ont
   ete livrees en 3.42.0 en employant dix-huit classes qui
   n'existaient pas ici. Le HTML etait valable, les bancs de
   rendu passaient - mais l'affichage etait nu. Une classe
   supposee est une affirmation non verifiee comme une autre.

   MEME PRINCIPE QUE LE RESTE DE CETTE FEUILLE : aucune couleur
   de decor n'est imposee, on herite du modele du site. Les
   seules couleurs en dur sont celles qui PORTENT une
   information - une journee annulee, une place restante - et
   elles restent lisibles sur fond clair comme sur fond sombre.
   ============================================================ */

/* --- La rubrique : un bloc par journee --------------------- */
/* EN FRANCAIS, LES MOIS NE PRENNENT PAS DE MAJUSCULE. Un
   text-transform: capitalize sur la ligne de date donnait
   « dimanche 14 Mars 2027 », ce qui est faux - vu sur une
   capture, pas devine. On ne releve donc que la PREMIERE lettre
   du titre de mois, ou la majuscule est celle d'un titre. */
.cib-mois { margin-top: 1.8rem; font-size: 1.1rem; opacity: .85; }
.cib-mois::first-letter { text-transform: uppercase; }

.cib-agenda { display: flex; flex-direction: column; gap: .75rem; }

.cib-jour { display: flex; gap: 1rem; align-items: flex-start;
            padding: .9rem; border-radius: .6rem;
            background: rgba(127, 127, 127, .09); }
.cib-jour-corps { flex: 1 1 auto; min-width: 0; }
.cib-jour h3 { margin: .3rem 0 .2rem; font-size: 1.05rem; }
.cib-jour .cib-detail { margin: .5rem 0 0; }

/* Une journee annulee reste LISIBLE : on l'estompe, on ne la
   barre pas entierement. Elle doit se retrouver, c'est tout
   l'interet de la laisser affichee. */
.cib-annule { opacity: .62; }
.cib-annule h3 a { text-decoration: line-through; }

/* --- La date et l'heure ------------------------------------ */
.cib-date { margin: 0; font-size: .95rem; }
.cib-date b::first-letter { text-transform: uppercase; }
.cib-horaire { margin-left: .5rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* Le type de journee : discret, mais toujours a la meme place,
   pour qu'on le trouve sans le chercher. */
.cib-type { margin-left: .5rem; padding: .1rem .45rem; border-radius: .3rem;
            background: rgba(127, 127, 127, .18); font-size: .78rem;
            text-transform: uppercase; letter-spacing: .03em; }

.cib-pastille { margin-left: .5rem; padding: .1rem .45rem; border-radius: .3rem;
                background: rgba(180, 83, 9, .18); color: #b45309;
                font-size: .78rem; font-weight: 600; }
.cib-pastille.cib-ko { background: rgba(220, 38, 38, .15); color: #dc2626; }

/* --- Les affiches ----------------------------------------- */
/* AUCUNE HAUTEUR IMPOSEE, seulement une largeur : les affiches
   des clubs sont de toutes les proportions, et forcer un ratio
   en couperait la moitie. object-fit y suffirait mal.  */
.cib-affiche { flex: 0 0 auto; display: block; }
.cib-affiche img { display: block; width: 110px; height: auto;
                   border-radius: .4rem; background: rgba(127, 127, 127, .12); }

/* UNE HAUTEUR PLAFONNEE, vue sur une capture : une affiche au
   format portrait occupait 400 px de haut et repoussait tout le
   pratique sous la ligne de flottaison. On la borne en hauteur
   et la largeur suit - object-fit serait pire, il couperait
   l'image. */
.cib-affiche-grande { margin: 1rem 0; }
.cib-affiche-grande img { display: block; max-width: 100%; max-height: 420px;
                          width: auto; height: auto; border-radius: .5rem; }

.cib-affiche-petite { margin: .5rem 0; }
.cib-affiche-petite img { display: block; width: 160px; height: auto; border-radius: .4rem; }

/* --- Les filtres : des liens, pas un formulaire ------------ */
.cib-filtres { margin: 1rem 0 1.5rem; font-size: .9rem; }
.cib-filtres p { margin: .3rem 0; }
.cib-filtres a { text-decoration: none; opacity: .75; }
.cib-filtres a:hover { opacity: 1; text-decoration: underline; }
.cib-filtres a.actif { opacity: 1; font-weight: 700; text-decoration: underline; }

/* --- La fiche d'une journee -------------------------------- */
.cib-fil { font-size: .85rem; opacity: .7; margin-bottom: .2rem; }
.cib-texte { margin: .8rem 0; line-height: 1.6; }

/* Un avis qui compte (journee annulee) : il doit arreter l'oeil
   avant que la personne ne note la date. */
.cib-alerte { padding: .7rem .9rem; border-radius: .5rem; margin: .8rem 0;
              background: rgba(220, 38, 38, .12); color: #dc2626; font-weight: 600; }

/* Une confirmation : la personne sait ou elle en est. */
.cib-ok { padding: .6rem .9rem; border-radius: .5rem; margin: .8rem 0;
          background: rgba(22, 163, 74, .12); color: #15803d; }

/* Un encart d'explication : il dit ou appuyer, il ne crie pas. */
.cib-encart { padding: .9rem; border-radius: .6rem; margin: 1rem 0;
              background: rgba(127, 127, 127, .09);
              border-left: 3px solid rgba(127, 127, 127, .45); }
.cib-encart p { margin: .3rem 0; }

/* --- Les boutons ------------------------------------------ */
/* LES TROIS FORMULAIRES COTE A COTE, et qui retombent les uns
   sous les autres sur un telephone : « je viens », « ca
   m'interesse » et « me retirer » sont des formulaires separes,
   pour qu'un clic ne puisse jamais en declencher deux. */
.cib-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; }
.cib-actions form { margin: 0; }

.cib-bouton { display: inline-block; padding: .5rem 1rem; border-radius: .4rem;
              background: rgba(127, 127, 127, .22); color: inherit;
              text-decoration: none; font-weight: 600; border: 0; cursor: pointer;
              font-size: 1rem; line-height: 1.4; }
.cib-bouton:hover { background: rgba(127, 127, 127, .34); text-decoration: none; }

/* TOUT BOUTON DE CES DEUX BLOCS PREND L'ALLURE, sans qu'on ait
   a poser une classe dessus. Vu sur une capture en mode sombre :
   « Ca m'interesse » et « Me retirer » sortaient en boutons
   blancs du navigateur, illisibles a cote du reste. Un selecteur
   d'ELEMENT evite d'avoir a se souvenir de la classe a chaque
   nouveau bouton. */
.cib-actions button, .cib-ajout button, .cib-encart button {
	padding: .5rem 1rem; border-radius: .4rem; border: 0; cursor: pointer;
	background: rgba(127, 127, 127, .22); color: inherit;
	font: inherit; font-weight: 600;
}
.cib-actions button:hover, .cib-ajout button:hover { background: rgba(127, 127, 127, .34); }

/* Un geste qui RETIRE se signale, sans hurler : bordure rouge et
   texte rouge, fond discret. C'est aussi ce que porte btn-danger
   quand le modele du site charge Bootstrap - la regle ci-dessous
   vaut quand il ne le charge PAS, ce que je ne peux pas savoir
   d'ici. */
.cib-bouton-danger, .cib-actions button.cib-bouton-danger {
	background: rgba(220, 38, 38, .12) !important;
	color: #dc2626 !important;
	box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .4);
}
.cib-bouton-danger:hover { background: rgba(220, 38, 38, .2) !important; }

.cib-bouton-petit { display: inline-block; padding: .2rem .55rem; border-radius: .3rem;
                    background: rgba(127, 127, 127, .2); color: inherit;
                    text-decoration: none; font-size: .82rem; }
.cib-bouton-petit:hover { background: rgba(127, 127, 127, .32); }

@media (max-width: 640px) {
	/* L'affiche passe AU-DESSUS du texte : a 110 px de large a
	   cote d'un titre, elle ne montrait plus rien d'utile. */
	.cib-jour { flex-direction: column; }
	.cib-affiche img { width: 100%; max-width: 320px; }
	.cib-affiche-petite img { width: 100%; max-width: 240px; }
}

/* ============================================================
   TROIS CLASSES PLUS ANCIENNES, JAMAIS DEFINIES
   ------------------------------------------------------------
   Trouvees par le meme balayage, dans des gabarits qui ne sont
   pas de cette version : cib-connexion et cib-joueur et
   cib-mes-terrains (page Abonnement), cib-grade-bloc (page
   Statistiques). Elles s'affichaient donc sans style depuis le
   debut. On leur donne le minimum coherent avec le reste plutot
   que de les laisser muettes.
   ============================================================ */
.cib-connexion { padding: .9rem; border-radius: .6rem; margin: 1rem 0;
                 background: rgba(127, 127, 127, .09); }
.cib-joueur { margin: .5rem 0; }
.cib-mes-terrains { list-style: none; padding: 0; margin: .5rem 0; }
.cib-mes-terrains li { padding: .3rem 0; border-bottom: 1px solid rgba(127, 127, 127, .18); }
.cib-grade-bloc { margin: .5rem 0 1.2rem; }

/* ============================================================
   MON INVENTAIRE  (3.49.0)
   ------------------------------------------------------------
   Memes gris translucides que le reste de la feuille : ils se
   lisent sur fond clair comme sur fond sombre sans rien
   redefinir pour le mode sombre.
   ============================================================ */
.cib-postes { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1rem; }
.cib-poste  { flex: 1 1 14rem; padding: .8rem .9rem; border-radius: .6rem;
              background: rgba(127, 127, 127, .09); }
.cib-poste i { display: block; font-style: normal; opacity: .65; font-size: .78rem;
               text-transform: uppercase; letter-spacing: .04em; }
.cib-poste b { display: block; font-size: 1.05rem; line-height: 1.3; margin-top: .2rem; }

.cib-reps { list-style: none; padding: 0; margin: .5rem 0; }
.cib-rep  { padding: .8rem .9rem; margin: 0 0 .6rem; border-radius: .6rem;
            border: 1px solid rgba(127, 127, 127, .22); }
.cib-rep-edition { border-color: rgba(127, 127, 127, .6); box-shadow: 0 0 0 1px rgba(127, 127, 127, .35); }
.cib-rep-tete b { font-size: 1.02rem; }
.cib-rep-tete .cib-pastille { vertical-align: middle; display: inline-block; white-space: nowrap; }
.cib-rep-poste { background: rgba(37, 99, 235, .15); color: #2563eb; }
.cib-rep-attente { background: rgba(180, 83, 9, .18); color: #b45309; }
.cib-rep-surnom { margin: .15rem 0 0; opacity: .8; font-style: italic; }
.cib-rep-infos { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .35rem 0 0; font-size: .9rem; }
.cib-rep-infos code { font-size: .85rem; }
.cib-rep-manque { opacity: .6; }
.cib-rep .cib-actions { margin: .6rem 0 0; }
/* .cib-actions button (plus haut) donne leur taille aux boutons ;
   ceux d'une fiche de replique restent petits, comme le lien
   « Modifier » a cote d'eux. */
.cib-rep .cib-actions button.cib-bouton-petit,
.cib-rep .cib-actions a.cib-bouton-petit { padding: .2rem .55rem; font-size: .82rem; font-weight: 400; }

.cib-rep-fiche summary { cursor: pointer; font-weight: 600; }
.cib-rep-form fieldset { border: 0; padding: 0; margin: 1rem 0 0; }
.cib-rep-form legend { font-weight: 600; font-size: .95rem; margin-bottom: .3rem; padding: 0; }
.cib-rep-form label { display: block; margin: .55rem 0 .15rem; font-size: .9rem; }
.cib-rep-form select, .cib-rep-form input[type="text"], .cib-rep-form textarea {
	width: 100%; max-width: 32rem; box-sizing: border-box; font: inherit; }
.cib-rep-radios { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .5rem 0 0; }
.cib-rep-radios label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.cib-rep-proposer { margin: .6rem 0 0; }
.cib-rep-proposer summary { cursor: pointer; font-size: .9rem; }

/* --- L'avis (3.50.0) --------------------------------------- */
.cib-rep-avis { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .7rem; margin: .45rem 0 0; font-size: .9rem; }
.cib-rep-avis .cib-pastille { margin-left: 0; }
.cib-avis-fiche h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
/* Deux colonnes de notes sur un ecran large, une seule sur un
   telephone : dix listes l'une sous l'autre, c'est long mais
   lisible ; dix listes cote a cote a 360 px, ca ne l'est plus. */
.cib-avis-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .1rem 1.2rem; }
.cib-avis-notes label { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cib-avis-notes select { width: auto; min-width: 7.5rem; }

/* ============================================================
   LES SOUS-MENUS ET LES COURBES  (3.50.2)
   ------------------------------------------------------------
   Sans JavaScript, la barre d'onglets reste une rangee de liens
   qui descendent aux panneaux, tous affiches. Avec, stats.js pose
   .cib-onglets-js sur la page et ne montre qu'un panneau.
   ============================================================ */
.cib-onglets { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.2rem 0 .4rem;
               border-bottom: 1px solid rgba(127, 127, 127, .3); padding-bottom: .35rem; }
.cib-onglets a { padding: .45rem .8rem; border-radius: .45rem .45rem 0 0; text-decoration: none;
                 color: inherit; font-weight: 600; font-size: .95rem; opacity: .7; }
.cib-onglets a:hover { background: rgba(127, 127, 127, .12); opacity: 1; }
.cib-onglets a[aria-selected="true"] { opacity: 1; background: rgba(127, 127, 127, .18);
                                       box-shadow: inset 0 -3px 0 #3987e5; }
.cib-onglets a:focus-visible { outline: 2px solid #3987e5; outline-offset: 2px; }
/* Sur un telephone, les six onglets restent sur une ligne qui
   defile du doigt plutot que de s'empiler sur trois rangees. */
@media (max-width: 640px) {
	.cib-onglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cib-onglets a { white-space: nowrap; flex: 0 0 auto; }
}
.cib-panneau { margin-top: .6rem; }
.cib-panneau[hidden] { display: none; }
/* Le titre du panneau repete l'onglet : on le cache quand les
   onglets sont actifs, on le garde sans JavaScript. */
.cib-onglets-js .cib-panneau > h2:first-child,
.cib-onglets-js .cib-panneau > section:first-child > h2:first-child { display: none; }
/* ... sauf un titre qui dit autre chose que l'onglet (Mes badges :
   « Mes cartes de joueur » puis « Les stickers de mes repliques »). */
.cib-onglets-js .cib-panneau h2.cib-garde { display: block; }

/* Les couleurs des courbes : bleu pour la serie, vert pour le
   meilleur, vert et rouge pour les ecarts. Les memes teintes que
   la page arcade ; les textes prennent la couleur de la page. */
.cib-courbes { --cib-g-ligne: #3987e5; --cib-g-best: #199e70;
               --cib-g-moins: #15803d; --cib-g-plus: #dc2626; margin: .8rem 0; }
@media (prefers-color-scheme: dark) {
	.cib-courbes { --cib-g-moins: #5ddc93; --cib-g-plus: #ff6b6b; }
}
.cib-hero { padding: 1rem; border-radius: .6rem; background: rgba(127, 127, 127, .09); text-align: center; margin: .6rem 0; }
.cib-hero span { display: block; font-size: .8rem; opacity: .65; text-transform: uppercase; letter-spacing: .04em; }
.cib-hero b { display: block; font-size: 2.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cib-hero b small { font-size: 1.1rem; }
.cib-hero i { font-style: normal; opacity: .75; font-size: .9rem; }
.cib-trio .cib-tuile { flex-basis: 6rem; }
.cib-gcarte { border: 1px solid rgba(127, 127, 127, .22); border-radius: .6rem; padding: .8rem .8rem .4rem; margin: .8rem 0; }
.cib-gcarte h3 { margin: 0 0 .2rem; font-size: 1rem; }
.cib-gdef { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cib-g { display: block; }
.cib-g-grille { stroke: rgba(127, 127, 127, .3); stroke-width: 1; }
.cib-g-doux { fill: currentColor; opacity: .6; }
.cib-g-lavis { fill: var(--cib-g-ligne); fill-opacity: .12; }
.cib-g-courbe { fill: none; stroke: var(--cib-g-ligne); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cib-g-point { fill: var(--cib-g-ligne); }
.cib-g-best { fill: var(--cib-g-best); }
.cib-g-etiquette { fill: currentColor; }
text.cib-g-moins, b.cib-g-moins { fill: var(--cib-g-moins); color: var(--cib-g-moins); }
text.cib-g-plus, b.cib-g-plus { fill: var(--cib-g-plus); color: var(--cib-g-plus); }

/* DEFAUT ANTERIEUR corrige en 3.50.2 : sur un telephone, les
   tableaux a sept colonnes (dernieres parties, records) debordaient
   de l'ecran et faisaient glisser TOUTE la page de cote. Mesure a
   360 px : 465 px de large. Le tableau defile maintenant seul, du
   doigt, et la page reste en place. */
@media (max-width: 640px) {
	.vexillum .cib-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* DEFAUT ANTERIEUR corrige en 3.50.2 : sur un telephone, les tuiles
   devaient aller par deux (flex-basis 45 %) mais sortaient une par
   ligne. Mesure a 360 px : 45 % + le rembourrage (.9rem de chaque
   cote, ajoute par-dessus en content-box) = 176 px par tuile, deux
   ne tenaient plus dans 328 px. En border-box, le rembourrage est
   compris dans les 45 %. */
.cib-tuile { box-sizing: border-box; }

/* Les trois chiffres sous le meilleur temps restent sur une ligne
   chacun, meme a 360 px. */
.cib-trio .cib-tuile b { white-space: nowrap; }
@media (max-width: 640px) {
	.cib-trio .cib-tuile { flex-basis: 30%; padding: .7rem .3rem; }
	.cib-trio .cib-tuile b { font-size: 1.15rem; }
}

/* ============================================================
   LA BROCANTE  (3.51.0)
   ============================================================ */
.cib-compte { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .3rem; border-radius: 1rem;
              background: rgba(127, 127, 127, .25); font-size: .75rem; text-align: center; line-height: 1.3rem; }
.cib-compte-neuf { background: #dc2626; color: #fff; }

.cib-bro-filtres { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; margin: .8rem 0; }
.cib-bro-filtres label { display: flex; flex-direction: column; font-size: .82rem; gap: .15rem; }
.cib-bro-filtres label span { opacity: .7; }
.cib-bro-filtres select, .cib-bro-filtres input { font: inherit; max-width: 14rem; }
.cib-bro-filtres button { padding: .45rem 1rem; border-radius: .4rem; border: 0; cursor: pointer;
                          background: rgba(127, 127, 127, .22); color: inherit; font: inherit; font-weight: 600; }
.cib-bro-filtres [hidden], .cib-rep-form [hidden] { display: none; }

.cib-bro-grille { list-style: none; padding: 0; margin: .6rem 0; display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.cib-bro-carte { border: 1px solid rgba(127, 127, 127, .22); border-radius: .6rem; overflow: hidden; }
.cib-bro-carte > a { display: flex; flex-direction: column; gap: .2rem; color: inherit; text-decoration: none; padding-bottom: .6rem; }
.cib-bro-carte > a:hover { background: rgba(127, 127, 127, .07); }
.cib-bro-carte > a > :not(.cib-bro-image) { margin: 0 .6rem; }
.cib-bro-carte form { margin: .4rem .6rem .6rem; }
.cib-bro-image { display: block; aspect-ratio: 4 / 3; background: rgba(127, 127, 127, .12); overflow: hidden; }
.cib-bro-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cib-bro-sans-photo { display: flex; height: 100%; align-items: center; justify-content: center; opacity: .5; font-size: .85rem; text-align: center; padding: .5rem; }
.cib-bro-titre { font-size: .95rem; line-height: 1.25; }
.cib-bro-prix { font-weight: 700; font-variant-numeric: tabular-nums; }
.cib-bro-meta { font-size: .8rem; opacity: .7; }
.cib-bro-reservee { opacity: .75; }
.cib-bro-carte .cib-pastille { align-self: flex-start; margin-left: .6rem; }
.cib-bro-pages { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.cib-bro-pages a, .cib-bro-pages b { padding: .3rem .65rem; border-radius: .35rem; background: rgba(127, 127, 127, .14); text-decoration: none; color: inherit; }
.cib-bro-pages b { background: #3987e5; color: #fff; }

.cib-bro-liste { list-style: none; padding: 0; margin: .5rem 0; }
.cib-bro-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .55rem 0;
                    border-bottom: 1px solid rgba(127, 127, 127, .18); }
.cib-bro-liste .cib-pastille { margin-left: 0; }
.cib-bro-ok { background: rgba(22, 163, 74, .15); color: #15803d; }
.cib-bro-neuf b { font-weight: 800; }

.cib-bro-fiche h1 { margin-bottom: .2rem; }
.cib-bro-prix-grand { font-size: 1.5rem; font-weight: 800; margin: 0 0 .8rem; }
.cib-bro-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .6rem 0 1rem; }
.cib-bro-photos a { display: block; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; background: rgba(127, 127, 127, .12); }
.cib-bro-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cib-bro-infos { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.cib-bro-infos dt { opacity: .65; font-size: .9rem; }
.cib-bro-infos dd { margin: 0; }
.cib-bro-description { padding: .8rem; border-radius: .5rem; background: rgba(127, 127, 127, .07); white-space: normal; }

.cib-conv { border-top: 1px solid rgba(127, 127, 127, .22); padding: .6rem 0; }
.cib-conv h3 { font-size: .95rem; margin: 0 0 .4rem; }
.cib-msg { max-width: 85%; margin: .35rem 0; padding: .5rem .7rem; border-radius: .7rem .7rem .7rem .15rem;
           background: rgba(127, 127, 127, .12); }
.cib-msg-moi { margin-left: auto; border-radius: .7rem .7rem .15rem .7rem; background: rgba(57, 135, 229, .15); }
.cib-msg p { margin: 0; overflow-wrap: anywhere; }
.cib-msg em { display: block; font-size: .72rem; opacity: .6; font-style: normal; margin-top: .15rem; }
.cib-bro-signaler { margin: 1rem 0; font-size: .9rem; }
.cib-bro-signaler summary { cursor: pointer; opacity: .75; }
.cib-bro-lien { box-shadow: inset 0 0 0 1px rgba(57, 135, 229, .6); }
.cib-rep-form input[type="file"] { display: block; margin: .35rem 0; max-width: 100%; }
/* Les boutons des formulaires de la brocante et de l'inventaire
   prennent la meme allure que ceux de .cib-actions : sans ca,
   « Envoyer » sortait en bouton gris du navigateur. */
.cib-rep-form > button, .cib-conv button, .cib-bro-signaler button {
	padding: .45rem 1rem; border-radius: .4rem; border: 0; cursor: pointer; margin-top: .3rem;
	background: rgba(127, 127, 127, .22); color: inherit; font: inherit; font-weight: 600;
}
.cib-rep-form > button:hover, .cib-conv button:hover { background: rgba(127, 127, 127, .34); }
.cib-conv form { margin-top: .4rem; }
@media (max-width: 640px) {
	.cib-bro-infos { grid-template-columns: 1fr; gap: 0; }
	.cib-bro-infos dd { margin-bottom: .45rem; }
}

/* ============================================================
   LE SIMULATEUR DU MASTER (3.52.0, format tablette en 3.52.2)
   L'ecran du Master est presente comme sur une tablette posee a
   l'horizontale (1180 x 820, la taille d'un iPad Air en paysage) :
   la page du Master y est DESSINEE a cette taille, puis reduite ou
   agrandie pour occuper toute la largeur de la page du site
   (simulateur.js). Sur un ecran trop etroit (telephone), elle
   reprend simplement toute la largeur, sans mise a l'echelle.
   ============================================================ */
.cib-simu-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 .9rem; }
.cib-simu-barre > button[data-simu="lancer"] {
	padding: .45rem 1rem; border-radius: .4rem; border: 0; cursor: pointer; font: inherit; font-weight: 600;
	background: #16a34a; color: #fff;
}
.cib-simu-barre > button[data-simu="lancer"]:hover { background: #15803d; }
.cib-simu-vitesse { display: inline-flex; align-items: center; gap: .3rem; }
.cib-simu-vitesse > span { opacity: .75; font-size: .9rem; margin-right: .2rem; }
.cib-simu-barre button.cib-bouton-petit { border: 0; cursor: pointer; font: inherit; font-size: .88rem; color: inherit; }
.cib-simu-barre button[aria-pressed="true"] { background: #3987e5; color: #fff; }
/* La coque de la tablette : un bord epais et regulier, comme un iPad. */
.cib-simu-ecran { margin: 0 0 1rem; border-radius: 1.8rem; padding: 1.1rem;
	background: #0b0f14; box-shadow: 0 8px 30px rgba(0, 0, 0, .35), inset 0 0 0 2px #262d38; }
.cib-simu-vitre { position: relative; overflow: hidden; border-radius: .9rem; background: #0f141a; }
/* Sans JavaScript (ou avant son calcul) : pleine largeur, hauteur raisonnable. */
.cib-simu-vitre iframe { display: block; width: 100%; height: 70vh; border: 0; background: #0f141a; }
/* Avec JavaScript : la page est dessinee a 1180 x 820 puis mise a l'echelle. */
.cib-simu-vitre.cib-simu-tablette iframe { position: absolute; top: 0; left: 0; width: 1180px; height: 820px;
	max-width: none; transform-origin: 0 0; }
@media (max-width: 640px) {
	.cib-simu-ecran { padding: .4rem; border-radius: 1rem; }
	.cib-simu-vitre iframe { height: 75vh; }
}
/* 3.72.0 - LE TELEPHONE (classe posee par simulateur.js) : la page du
   Master comme sur le telephone lui-meme. Pas de coque, toute la largeur
   de l'ecran (on sort des marges de la page), haute d'un ecran : 100svh =
   la hauteur visible quand les barres de Safari sont affichees (100vh
   pour les navigateurs qui ne connaissent pas svh). La largeur et le
   recul a gauche sont mesures et poses par simulateur.js.
   width:1px + min-width:100% : Safari sur iPhone a longtemps ignore
   « width:100% » sur un cadre et l'elargissait a son contenu. */
.cib-simu-ecran.cib-simu-tel { padding: 0; border-radius: 0; box-shadow: none; background: #0f141a;
	max-width: none; margin-right: 0; }
.cib-simu-ecran.cib-simu-tel .cib-simu-vitre { border-radius: 0; }
.cib-simu-ecran.cib-simu-tel .cib-simu-vitre iframe { width: 1px; min-width: 100%; height: 100vh; height: 100svh; }

/* ============================================================
   LA PREVENTE (3.55.0)
   ------------------------------------------------------------
   Meme principe que le reste : les couleurs du modele du site,
   sauf le vert de la jauge, qui PORTE une information (ce qui est
   deja reuni). Les barres sont en CSS pur, lisibles sans script.
   ============================================================ */
.vx-pv { --vx-pv-vert: #16a34a; }
@media (prefers-color-scheme: dark) { .vx-pv { --vx-pv-vert: #4ade80; } }
.vx-pv-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vx-pv-accroche { font-size: 1.08rem; }

.vx-pv-objectif { margin: 1.2rem 0 1.6rem; padding: 1.1rem; border-radius: .8rem; background: rgba(127,127,127,.08); }
.vx-pv-chiffres { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-bottom: .8rem; }
.vx-pv-chiffres div { flex: 1 1 9rem; }
.vx-pv-chiffres b { display: block; font-size: 1.9rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vx-pv-chiffres div:first-child b { color: var(--vx-pv-vert); }
.vx-pv-chiffres i { font-style: normal; opacity: .7; font-size: .85rem; }
.vx-pv-jauge { height: 14px; border-radius: 99px; background: rgba(127,127,127,.2); overflow: hidden; }
.vx-pv-jauge span { display: block; height: 100%; border-radius: 99px; background: var(--vx-pv-vert); }
.vx-pv-boule { margin: .8rem 0 0; font-weight: 600; }

.vx-pv-terrains { list-style: none; padding: 0; margin: .8rem 0; }
.vx-pv-t { display: grid; grid-template-columns: 2.2rem 1fr minmax(8rem, 14rem); gap: .3rem .8rem; align-items: center;
           padding: .6rem .2rem; border-bottom: 1px solid rgba(127,127,127,.2); }
.vx-pv-t-num { font-weight: 700; font-size: 1.1rem; text-align: center; opacity: .8; font-variant-numeric: tabular-nums; }
.vx-pv-t-nom b { margin-right: .4rem; }
.vx-pv-t-nom i { font-style: normal; opacity: .7; margin-right: .5rem; }
.vx-pv-etat, .vx-pv-moi { display: inline-block; font-style: normal; font-size: .75rem; padding: .05rem .5rem; border-radius: 99px;
           background: rgba(127,127,127,.15); margin: .15rem .3rem 0 0; }
.vx-pv-t-equipe .vx-pv-etat { background: var(--vx-pv-vert); color: #fff; }
.vx-pv-moi { outline: 1px solid currentColor; background: transparent; }
.vx-pv-t-moi { background: rgba(127,127,127,.06); }
.vx-pv-t-pot i { display: block; font-style: normal; font-size: .78rem; opacity: .75; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.vx-pv-mini { display: block; height: 6px; border-radius: 99px; background: rgba(127,127,127,.18); overflow: hidden; }
.vx-pv-mini span { display: block; height: 100%; background: var(--vx-pv-vert); border-radius: 99px; }
@media (max-width: 560px) {
	.vx-pv-t { grid-template-columns: 1.8rem 1fr; }
	.vx-pv-t-pot { grid-column: 2; }
}

.vx-pv-appel { margin: 1rem 0; padding: .9rem 1rem; border-left: 3px solid var(--vx-pv-vert); background: rgba(127,127,127,.06); border-radius: 0 .6rem .6rem 0; }
.vx-pv-appel p { margin: 0 0 .5rem; }
.vx-pv-lien { font-weight: 600; }

.vx-pv-regles { padding-left: 1.2rem; }
.vx-pv-regles li { margin: .25rem 0; }
.vx-pv-form label { display: block; margin: .8rem 0 .3rem; font-weight: 600; }
.vx-pv-form select, .vx-pv-form input[type="text"] { width: 100%; max-width: 28rem; }
.vx-pv-bulles { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.vx-pv-bulle { border-radius: 99px; padding: .35rem .9rem; }
.vx-pv-bulle[aria-pressed="true"] { outline: 2px solid var(--vx-pv-vert); }
.vx-pv-go { margin-top: .9rem; font-size: 1.05rem; }
.vx-pv-autre { padding-left: .8rem; border-left: 2px solid rgba(127,127,127,.3); margin-top: .4rem; }
.vx-pv-details { margin: 1rem 0; }
.vx-pv-details summary { cursor: pointer; font-weight: 600; }
.vx-pv-faq dt { font-weight: 600; margin-top: .8rem; }
.vx-pv-faq dd { margin: .2rem 0 0; }

/* ============================================================
   LA PAGE D'ACCUEIL (3.56.0) : l'image du vexillum et le petit
   mot, puis le simulateur, puis la suite de l'article.
   Le bandeau est sombre comme l'image : les couleurs du texte y
   sont fixees ici, independamment du gabarit du site.
   ============================================================ */
.vex-accueil { display: flex; flex-direction: column; gap: 1.6rem; }
.vex-une { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
	background: #141312; color: #efe9dd; border-radius: 14px; overflow: hidden; }
.vex-une-image { display: block; width: 100%; height: auto; }
/* 3.72.0 : le bandeau du haut (panneau de la prevente) prend les deux colonnes. */
.vex-une-haut { grid-column: 1 / -1; padding: 1.4rem 1.6rem 0; }
.vex-une-haut .vex-panneau { margin: .6rem 0 .4rem; }
.vex-une-texte { padding: 1.4rem 1.6rem; }
.vex-une-texte .vex-article { margin: 0; padding: 0; background: none; color: inherit; }
.vex-une .vex-kick { margin: 0 0 .5rem; color: #d6a93f; font-size: .85rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; }
.vex-une .vex-lead { margin: 0 0 .9rem; font-size: 1.22rem; line-height: 1.45; color: #fbf7ef; }
.vex-une p { line-height: 1.55; }
.vex-une a { color: #e9c56b; }
.vex-une em { color: #e9c56b; font-style: normal; }
.vex-une .vex-chiffres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.vex-une .vex-chiffre { flex: 1 1 5.5rem; min-width: 0; padding: .55rem .6rem; border-radius: 8px;
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(214, 169, 63, .35); color: inherit; text-align: center; }
.vex-une .vex-chiffre b { display: block; font-size: 1.35rem; color: #d6a93f; }
.vex-une .vex-chiffre span { display: block; font-size: .78rem; opacity: .8; }
.vex-accueil-simu > h2 { margin: 0 0 .7rem; }
/* Les pastilles de l'accueil (3.64.0) : une par jeu, le Medecin, la
   ciblerie et les grades. Toute la pastille est le lien. Chacune se
   reconnait a son MOT (Jeu, Carriere...) et a la fleche, pas a une
   couleur. */
.vex-une-texte { container-type: inline-size; }
/* Deux par ligne, ou quatre quand la colonne est assez large :
   8 pastilles = 4 x 2 ou 2 x 4, jamais une ligne boiteuse. */
.vex-une .vex-pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0; }
@container (min-width: 40rem) { .vex-une .vex-pastilles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vex-une a.vex-pastille { position: relative; display: flex; flex-direction: column; gap: .1rem; min-width: 0;
	padding: .55rem 1.6rem .6rem .7rem; border-radius: 10px; text-decoration: none; color: inherit;
	background: rgba(255, 255, 255, .05); border: 2px solid rgba(214, 169, 63, .45);
	transition: background .15s, border-color .15s, transform .15s; }
.vex-une a.vex-pastille:hover, .vex-une a.vex-pastille:focus-visible { background: rgba(214, 169, 63, .14);
	border-color: #d6a93f; transform: translateY(-1px); }
.vex-une a.vex-pastille:focus-visible { outline: 2px solid #fbf7ef; outline-offset: 2px; }
.vex-une .vex-pastille small { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.vex-une .vex-pastille b { font-size: 1.02rem; line-height: 1.2; color: #e9c56b; }
.vex-une .vex-pastille span { font-size: .76rem; line-height: 1.3; opacity: .85; }
.vex-une .vex-pastille i { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); font-style: normal;
	font-size: 1.05rem; color: #d6a93f; }
@media (prefers-reduced-motion: reduce) { .vex-une a.vex-pastille { transition: none; } .vex-une a.vex-pastille:hover { transform: none; } }
@media (max-width: 760px) {
	.vex-une { grid-template-columns: 1fr; }
	.vex-une-texte { padding: 1.1rem 1rem 1.2rem; }
	.vex-une-haut { padding: 1.1rem 1rem 0; }
	.vex-une .vex-lead { font-size: 1.08rem; }
}
/* 3.76.0 : sur telephone, le bandeau de l'accueil prend tout l'ecran,
   d'un bord a l'autre, et le panneau de la prevente presque toute la
   largeur : ses cases se calculent sur la largeur (100cqi), elles
   grandissent d'un tiers sur un iPhone. */
@media (max-width: 560px) {
	.vex-une { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
	.vex-une-haut { padding: .9rem .4rem 0; }
}

/* ============================================================
   LA PREVENTE, PAGE DES TERRAINS (3.57.0) : deux tableaux, les
   places numerotees puis la liste d'attente.
   ============================================================ */
.vx-pvt section { margin: 1.4rem 0; }
.vx-pvt-table { width: 100%; }
.vx-pvt-table .vx-pvt-num { width: 4.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vx-pvt-libre td { opacity: .6; font-style: italic; }
.vx-pvt-prise .vx-pvt-num { color: var(--vx-pv-vert, #15803d); }
.vx-pvt-moi td { background: rgba(21, 128, 61, .10); }
.vx-pvt-ville { opacity: .7; font-size: .92em; margin-left: .35rem; }
/* Page des joueurs (3.57.0) : la liste des cagnottes, sans numero de place. */
.vx-pv-sansnum { list-style: none; padding-left: 0; }
.vx-pv-sansnum .vx-pv-t { grid-template-columns: 1fr minmax(8rem, 14rem); }
@media (max-width: 560px) {
	.vx-pv-sansnum .vx-pv-t { grid-template-columns: 1fr; }
	.vx-pv-sansnum .vx-pv-t-pot { grid-column: 1; }
}

/* ============================================================
   LA CARTE DES TERRAINS ET DES MAGASINS (3.60.0)
   ------------------------------------------------------------
   Deux couleurs qui PORTENT une information, et deux formes pour
   ne pas dependre de la couleur seule : le terrain est un carre
   pose sur la pointe, le magasin un rond.
   ============================================================ */
.cib-carte { max-width: 1100px; }
.cib-pt { display: inline-block; width: 12px; height: 12px; margin-right: .45em; vertical-align: -1px;
          border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); box-sizing: content-box; }
.cib-pt-terrain { background: #2f7d3b; transform: rotate(45deg); border-radius: 2px; }
.cib-pt-magasin { background: #c2412d; border-radius: 50%; }

.cib-carte-filtres { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: 0 0 .8rem; }
.cib-carte-filtres label { display: flex; flex-direction: column; font-size: .82rem; gap: .2rem; }
.cib-carte-filtres label span { opacity: .7; font-weight: 600; }
.cib-carte-filtres select { min-width: 12rem; padding: .35rem .5rem; font: inherit; }
.cib-carte-types { display: flex; flex-wrap: wrap; gap: .4rem; }
.cib-carte-types button { padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(127,127,127,.4);
                          background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.cib-carte-types button[aria-pressed="true"] { background: rgba(127,127,127,.28); border-color: rgba(127,127,127,.7); }

.cib-carte-vue { position: relative; height: 62vh; min-height: 360px; max-height: 720px; overflow: hidden;
                 border-radius: .6rem; background: #d6e3ea; touch-action: none; cursor: grab;
                 user-select: none; -webkit-user-select: none; outline-offset: 2px; }
.cib-carte-vue:active { cursor: grabbing; }
.cib-carte-tuiles, .cib-carte-marques { position: absolute; inset: 0; }
.cib-carte-tuiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none;
                        pointer-events: none; }
/* Le point est centre sur sa position : le bouton fait 22 px et
   recule de la moitie. La forme est DEDANS, parce que le script
   deplace le bouton avec transform - la rotation du carre du
   terrain serait ecrasee s'il la portait lui-meme. */
.cib-carte-marque { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; margin: 0;
                     padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cib-carte-marque .cib-pt { margin: 0; }
.cib-carte-marque[hidden] { display: none; }
/* Une grappe de magasins : la couleur des magasins, le nombre au
   milieu, un peu plus grosse au-dela de dix. */
.cib-carte-grappe { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; padding: 0; margin: 0;
                    border-radius: 50%; border: 3px solid rgba(255,255,255,.9); background: #c2412d; color: #fff;
                    font: 700 13px/1 system-ui, sans-serif; cursor: pointer; z-index: 1;
                    box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 0 6px rgba(194,65,45,.25); }
.cib-carte-grappe-grande { left: -20px; top: -20px; width: 40px; height: 40px; font-size: 14px; }
.cib-carte-grappe:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* Les terrains passent devant les magasins : ils sont moins
   nombreux, et c'est eux qu'on vient chercher. */
.cib-carte-marque-terrain { z-index: 3; }
.cib-carte-marques .cib-carte-marque:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.cib-carte-bulle { position: absolute; left: 0; top: 0; z-index: 4; }
.cib-carte-bulle > div { position: absolute; left: -110px; bottom: 14px; width: 220px; padding: .55rem .7rem;
                         background: #fff; color: #1d2320; border-radius: .45rem; font-size: .88rem;
                         box-shadow: 0 2px 10px rgba(0,0,0,.25); line-height: 1.35; }
.cib-carte-bulle a { color: #1d4ed8; }
.cib-carte-bulle em { display: block; opacity: .7; font-size: .8rem; }
.cib-carte-zoom { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.cib-carte-zoom button { width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.25); border-radius: 6px;
                         background: #fff; color: #1d2320; font-size: 20px; line-height: 1; cursor: pointer; }
.cib-carte-attrib { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 2px 6px; font-size: 11px;
                    background: rgba(255,255,255,.85); color: #333; border-top-left-radius: 4px; }
.cib-carte-attrib a { color: #1d4ed8; }

.cib-carte-compte { margin: .5rem 0 1rem; }
.cib-carte-liste { list-style: none; padding: 0; margin: 0; columns: 2 22rem; column-gap: 2rem; }
.cib-carte-liste li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid rgba(127,127,127,.18); font-size: .93rem; }
.cib-carte-lieu { display: block; opacity: .7; font-size: .85rem; margin-left: 1.6em; }
.cib-carte-web { margin-left: 1.6em; font-size: .85rem; }
.cib-carte-sanspos { display: block; margin-left: 1.6em; font-size: .8rem; opacity: .65; }
.cib-carte-voir { margin-left: 1.6em; padding: .1rem .5rem; border-radius: .3rem; border: 1px solid rgba(127,127,127,.4);
                  background: transparent; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }

/* Le pays et la region d'un terrain (3.60.0) : la case libre ne
   sert que pour un pays sans liste, region.js cache l'autre. */
.cib-pays-region select, .cib-pays-region input { display: block; }
.cib-pays-region [hidden] { display: none !important; }

/* 3.71.0 : case a cocher avec son libelle (panneau a volets de l'agenda) */
.cib-case { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; cursor: pointer; }
.cib-case input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; }

/* ============================================================
   3.85.0 : AUDIT TELEPHONE (24/10/2026)
   Mesure : chaque gabarit du composant rendu avec des donnees
   d'exemple, a 320, 375 et 414 px de large (Chromium en mode
   mobile ; pas de Safari iOS ici). Ce qui est corrige :
   - les cartes de la liste des terrains debordaient sous 344 px
     (colonne minimale de 19rem = 304 px) ;
   - le tableau « Mes badges » (page Abonnement) faisait 504 px a
     320 : la page entiere glissait de cote ;
   - les champs de saisie faisaient 21 a 24 px de haut, en 15 px :
     trop petits pour un doigt, et Safari iOS agrandit toute la page
     quand on touche un champ ecrit en moins de 16 px ;
   - les petits boutons (25 a 30 px de haut) et les libelles places
     a cote des champs au lieu d'au-dessus dans les formulaires.
   ============================================================ */
.cib-terrains { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.cib-avis-notes { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
/* ce que tapent les membres (titres, modeles, descriptions) se coupe
   au lieu de pousser la page : un mot ou une adresse trop longs */
.cib-bro-infos dd, .cib-bro-description, .cib-rep-tete b, .cib-rep-infos span, .cib-conv { overflow-wrap: anywhere; }

@media (max-width: 640px) {
	:is(.vexillum, .vx-pv, .cib-plein, .cib-simu-page) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
		font-size: 16px; min-height: 44px; box-sizing: border-box; max-width: 100%;
	}
	/* une case a cocher ou un bouton radio : tout le libelle se touche */
	:is(.vexillum, .vx-pv, .cib-plein, .cib-simu-page) label:has(> input:is([type="checkbox"], [type="radio"])) { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; }
	:is(.vexillum, .vx-pv) textarea { font-family: inherit; min-height: 6rem; }
	/* un fieldset s'elargit par defaut a son plus large contenu (min-width:
	   min-content) : sans ceci, le champ « photo » poussait la page a 340 px */
	:is(.vexillum, .vx-pv) fieldset { min-width: 0; }
	:is(.vexillum, .vx-pv) input[type="file"] { width: 100%; }
	/* dans les formulaires, le libelle AU-DESSUS du champ, le champ sur toute la largeur */
	.vexillum form > label:not(.cib-case), .vexillum .cib-ajout > label:not(.cib-case) { display: block; width: 100%; margin: .7rem 0 .25rem; }
	.vexillum form > :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) { display: block; width: 100%; }
	.vexillum .cib-ajout { align-items: stretch; }
	/* des boutons a la taille d'un doigt */
	:is(.vexillum, .vx-pv, .cib-plein, .cib-simu-page) :is(button, .cib-bouton, .vex-bouton, summary) { min-height: 44px; box-sizing: border-box; }
	:is(.vexillum, .vx-pv, .cib-plein, .cib-simu-page) :is(.cib-bouton-petit, .vx-pv-bulle) { min-height: 40px; min-width: 44px; }
	.vexillum a.cib-bouton, .vexillum a.cib-bouton-petit { display: inline-flex; align-items: center; }
	.vexillum summary { display: flex; align-items: center; }
	/* « Mes badges » : une fiche par badge au lieu d'un tableau trop large */
	.vexillum table.cib-badges, .cib-badges thead, .cib-badges tbody, .cib-badges tr, .cib-badges td { display: block; width: 100%; }
	.cib-badges thead { display: none; }
	.cib-badges tr { border-bottom: 1px solid rgba(127, 127, 127, .25); padding: .6rem 0; }
	.cib-badges td { padding: .2rem 0; border: 0; }
	.cib-badges td form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
	.cib-badges td form input[type="text"] { flex: 1 1 10rem; width: auto; }
	/* un titre colle au bouton du dessus : un peu d'air */
	.vexillum :is(h2, h3) { margin-top: 1.4rem; }
}
/* 3.85.0 : le gabarit du site habille les champs texte, courriel, mot de
   passe et recherche ; les champs nombre, date, heure, telephone et
   adresse web restaient blancs, au style du navigateur. Meme habit ici. */
:is(.vexillum, .vx-pv) input:is([type="number"], [type="date"], [type="time"], [type="tel"], [type="url"], [type="datetime-local"]) {
	background: var(--vex-fond2, transparent); color: var(--vex-texte, inherit);
	border: 1px solid var(--vex-trait, rgba(127, 127, 127, .45)); border-radius: 9px; padding: 9px 12px;
}
/* l'icone du calendrier et de l'horloge, lisible sur le fond sombre */
[data-theme="dark"] :is(.vexillum, .vx-pv) input:is([type="date"], [type="time"], [type="datetime-local"]) { color-scheme: dark; }