@CHARSET "utf-8";

/* Variables de thème (12/07/2026) : source unique des couleurs/rayons/police
   utilisés dans toute l'appli — valeurs par défaut = apparence historique,
   inchangée pour qui n'a jamais choisi de thème (cf. Profil, panneau
   "Thème"). Un thème alternatif ne redéfinit QUE ces variables (public/css/
   themes.css, sous "body.theme-xxx"), jamais les règles ci-dessous
   directement — permet d'ajouter un thème sans dupliquer tout le CSS.
   Couvre le "chrome" structurel (navbar, boutons, panneaux, alertes,
   tableaux, fond de page) ainsi que les couleurs porteuses de sens du
   calendrier (--couleur-type-xxx, cf. calendrier_all.css) : ces dernières
   restent identiques dans la plupart des thèmes (ne jamais dérouter un
   utilisateur habitué à repérer un type de congé par sa couleur), sauf les
   variantes "(congés colorés)" qui les redéfinissent volontairement. */
:root {
	--couleur-primaire: #337ab7;
	--couleur-primaire-hover: #286090;
	--couleur-secondaire: #008CBA;
	--couleur-secondaire-bordure: #99cada;
	--couleur-accent: #0080ff;
	/* couleurs succès/danger assombries (audit accessibilité axe-core,
	   13/07/2026) : les valeurs Bootstrap 3 d'origine (#5cb85c/#d9534f) ne
	   passaient pas le seuil WCAG AA (4.5:1) pour du texte blanc dessus
	   (boutons .btn-succes/.btn-danger, badges) — mesuré 2.48:1 et 3.96:1.
	   Nouvelles valeurs choisies pour repasser au-dessus de 4.5:1 tout en
	   restant dans la même famille de teinte. */
	--couleur-succes: #1e7e34;
	--couleur-succes-hover: #19692c;
	--couleur-danger: #c9302c;
	--couleur-danger-hover: #ac2925;
	/* bouton neutre (21/07/2026, principe de palette design ajouté ce jour-là,
	   cf. section "Boutons" de Design System) : réserver le fond coloré
	   (primary/succès/danger) à LA SEULE action vraiment mise en avant d'un
	   groupe — les actions fréquentes/secondaires (naviguer, inviter...) qui
	   entouraient jusqu'ici une action importante de boutons tout aussi vifs la
	   noyaient dans le lot plutôt que de la faire ressortir. */
	--couleur-btn-neutre-fond: #f0f0f0;
	--couleur-btn-neutre-fond-hover: #e2e2e2;
	--couleur-btn-neutre-bordure: #ccc;
	--couleur-btn-neutre-texte: #333;
	--couleur-fond: #ffffff;
	--couleur-fond-navbar: #f8f8f8;
	--couleur-bordure-navbar: #e7e7e7;
	--couleur-texte: #000000;
	--couleur-fond-carte: #ffffff;
	--couleur-panel-info-fond: #d9edf7;
	--couleur-panel-info-texte: #31708f;
	--couleur-panel-danger-fond: #f2dede;
	/* #cb2521 sur #f2dede : contraste 4.25, sous le seuil WCAG AA de 4.5:1
	   (audit accessibilité axe-core, 13/07/2026) — #a94442 (combo classique
	   Bootstrap 3 .alert-danger) passe à ~4.6:1. */
	--couleur-panel-danger-texte: #a94442;
	--couleur-panel-info-bordure: #bce8f1;
	--couleur-panel-danger-bordure: #ff9593;
	--couleur-panel-succes-fond: #dff0d8;
	--couleur-panel-succes-texte: #3c763d;
	--couleur-panel-succes-bordure: #d0e9c6;
	--couleur-zebra: #d9ecff;
	--couleur-hover-ligne: #0080ff;
	--couleur-texte-hover-ligne: black;
	--couleur-type-cp: #90ee90;
	--couleur-type-rtt: #ffe4b5;
	--couleur-type-fra: #ffd700;
	--couleur-type-cet: #bda3f9;
	--couleur-type-mal: #ff69b4;
	--couleur-type-aut: #f08080;
	--couleur-type-san: white;
	--couleur-type-tt: orange;
	--rayon-bordure: 4px;
	--rayon-bordure-btn: .2em;
	--police: Roboto, Arial, sans-serif;
	--ombre-carte: 0 1px 1px rgba(0, 0, 0, .05);
	/* Mesures d'un mois du Calendrier (.tbl_tbl, calendrier_all.css) — lues
	   aussi en JS (calendrier.js::nbMoisSelonPlace()) pour décider combien de
	   mois tiennent à l'écran : un seul endroit à retoucher. La largeur
	   maximale de l'application vaut 6 colonnes, soit une année en 2 rangées
	   de 6 ; au-delà, la place restante devient de la marge. */
	--largeur-mois: 270px;
	--marge-mois: 10px;
	--colonnes-mois-max: 6;
	--largeur-contenu-max: calc(var(--colonnes-mois-max) * (var(--largeur-mois) + 2 * var(--marge-mois)));
	/* 2 espaces distincts dans .body-region, à ne pas confondre :
	   --espace-region est le padding de bord de fenêtre, c'est-à-dire la marge
	   MINIMALE du bloc ; passé la largeur maximale de l'app, c'est le centrage
	   qui prend le relais et cette marge grandit toute seule.
	   --gap-pub est l'espace entre une pub et la zone contenu, fixe à toutes
	   les tailles : il fait partie du bloc, il n'a aucune raison de grandir
	   avec l'écran. */
	--espace-region: 10px;
	--gap-pub: 20px;
	/* fond d'une case neutre (grille équipe) : la seule qui suive le thème, les autres
	   portent une couleur porteuse de sens, identique dans tous les thèmes. */
	--couleur-case-presente: #ffffff;
	/* texte atténué (pied de page, aides de champ) : #666 sur blanc, mais il lui faut
	   une valeur claire sur fond sombre sous peine de disparaître. */
	--couleur-texte-secondaire: #666666;
}

/* Aucune règle ne fixait la couleur des liens : ils gardaient le bleu par défaut du
   navigateur, illisible sur le fond sombre. */
a {
	color: var(--couleur-primaire);
}

* {
	box-sizing: border-box;
}

/* réservé aux lecteurs d'écran (audit accessibilité axe-core, 13/07/2026,
   ex: <h1> de la page Calendrier — un titre y est requis par WCAG mais un
   titre visible supplémentaire n'apporterait rien à une page déjà dense en
   UI). Pattern standard (Bootstrap .sr-only et équivalents) : masqué
   visuellement sans display:none, qui le retirerait aussi de l'arbre
   d'accessibilité. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* lien d'évitement (10/08/2026, audit d'accessibilité — WCAG 2.4.1, cf.
   templates/default.php). Volontairement PAS en .sr-only : celui-ci doit
   devenir VISIBLE une fois focalisé, sinon un utilisateur clavier voyant
   déclenche un saut qu'il ne comprend pas. Il est donc simplement remonté
   hors de l'écran, puis ramené en haut à gauche au focus. Couleurs prises
   sur les variables de thème pour rester lisible en Sombre comme en Moderne. */
.lien-evitement {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--couleur-primaire, #0080ff);
	color: #fff;
	border-radius: var(--rayon-bordure, 4px);
	text-decoration: none;
}
.lien-evitement:focus {
	top: 8px;
	color: #fff;
	outline: 3px solid var(--couleur-texte, #222);
	outline-offset: 2px;
}
/* <main> reçoit le focus par programme après le saut (tabindex="-1") : sans
   ça, la tabulation suivante repartirait du début de page dans certains
   navigateurs. Pas de contour visible pour ce focus-là, qui n'est pas le
   résultat d'une tabulation de l'utilisateur. */
#contenu-principal:focus {
	outline: none;
}

html {
	/* pied de page "sticky" (demandé par l'utilisateur le 11/07/2026) : reste
	   collé en bas de l'écran sur une page dont le contenu ne remplit pas tout
	   le viewport (ex: page de connexion), sans pour autant se superposer au
	   contenu sur une page plus longue (pas de position:fixed, qui masquerait
	   du contenu) — html doit avoir une hauteur pour que le min-height:100vh
	   du body ci-dessous se calcule correctement sur tous les navigateurs. */
	height: 100%;
}
body {
	font-family: var(--police);
	font-size: 16px;
	color: var(--couleur-texte);
	background-color: var(--couleur-fond);
	margin: 0px;
	padding: 52px 0px 0px 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.4em;
}
h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
}
.avatarPgLogin  {
	text-align: center;
    
}
.avatarPgLogin img {
	width: 10em;
}
form {
	display: inline;
}

abbr, acronym {
	border-bottom: .1em solid;
	border-color: red;
	cursor: help;
}

.princ {
	/*margin-top: 55px*/
	margin:0;
	padding:0;
	/* prend toute la hauteur restante (body en flex-column, cf. ci-dessus) —
	   repousse le footer en bas de l'écran quand le contenu est court. */
	flex: 1 0 auto;
}

.container {
    padding: 0 16px;
}
.width-300-500 {
	margin : 0 auto;
	min-width : 300px;
	max-width:500px
}
.width-500-50prc {
	margin : 0 auto;
	min-width : 300px;
	max-width: 800px
}
.dl-horizontal-perso dt {
	text-align: left;
	width: 350px;
	font-weight: normal;
}

/** deb bandeau de navigation  */

.navbar {
	position: fixed;
	top: 0;
	font-size: 1em;
	background-color: var(--couleur-fond-navbar);
	right: 0;
	left: 0;
	z-index: 99;
	min-height: 50px;
	margin-bottom: 2px;
	border: none;
	border-bottom: 1px solid var(--couleur-bordure-navbar);
}
.navbar a {
	text-decoration: none;
	color: var(--couleur-texte);
}

.navbar-header {
	padding: 10px 20px;
}

.navbar-brand {
	font-size: 1.5em;
	padding-left: 20px;
}

/* le logo (icône + texte) garde son ratio naturel — sans ça, la règle
   générique ".navbar img { width: 30px; }" plus bas (pensée pour l'avatar
   rond) écrase la largeur et déforme le wordmark. Spécificité égale à
   ".navbar img" (1 classe + 1 élément chacune) : sans le préfixe ".navbar"
   ici aussi, c'est l'ordre d'apparition dans le fichier qui tranchait (règle
   plus bas gagnante), pas l'imbrication visuelle des sélecteurs. */
.navbar .navbar-brand img {
	width: auto;
}

.navbar-brand, .navbar-nav>li>a {
	color: var(--couleur-texte);
}

.navbar-user {
	display: inline-block;
	float: right;
	right: 10px;
	text-align: right;
	position: relative;
}

/* icône notifications (14/07/2026) : à gauche de l'avatar/menu, cf. commun/menu.php
   — 2e élément flottant à droite dans l'ordre du DOM, donc visuellement avant
   (à gauche de) .navbar-user qui reste le 1er (float:right empile de droite à
   gauche selon l'ordre d'apparition dans le code). */
.navbar-notification {
	display: inline-block;
	float: right;
	position: relative;
	/* 28px (pas 16px) : retour utilisateur du 23/07/2026, la cloche collait trop
	   à l'avatar/menu utilisateur. */
	margin-right: 28px;
}
.navbar-notification svg {
	/* alignée sur .navbar img (avatar) — demande utilisateur 19/07/2026 :
	   trop petite à 24px à côté d'un avatar bien dimensionné. Uniquement svg
	   (pas de sélecteur img mort) : commun/menu.php n'utilise que du SVG
	   inline pour cette icône, jamais un <img>. */
	width: 34px;
	height: auto;
	vertical-align: middle;
}
.navbar-notification .badge-notification {
	position: absolute;
	top: -6px;
	right: -8px;
	margin-left: 0;
}


.navbar img {
	width: 30px;
	vertical-align: middle;
}

.navbar-nav>li>.dropdown-menu {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.menuDropDown {
	cursor: pointer;
}

/* burger mobile (24/07/2026, retour utilisateur : avatar+pseudo prenaient
   trop de place à côté du logo en petit écran) — masqué par défaut, affiché
   uniquement sous 480px (cf. media query plus bas). L'identité (avatar+nom)
   passe alors en 1er item du menu déroulant, cf. commun/menu.php et
   .menu-identite-mobile ci-dessous, jamais affichée 2 fois à la fois. */
.navbar-burger {
	display: none;
	width: 26px;
	height: 26px;
	vertical-align: middle;
}
.menu-identite-mobile {
	display: none;
}
li.menu-identite-mobile {
	padding: 8px 20px;
	font-weight: bold;
}
li.menu-identite-mobile img {
	margin-right: 6px;
}

@media (max-width: 480px) {
	/* logo collé au bord gauche, menu/notifs au bord droit (retour utilisateur
	   24/07/2026) : les 20px de .navbar-header ci-dessus + les 20px propres à
	   .navbar-brand cumulaient 40px de marge à gauche du logo sur un écran
	   déjà étroit. */
	.navbar-header {
		padding: 10px 8px;
	}
	.navbar-brand {
		padding-left: 0;
	}
	.navbar-notification {
		margin-right: 14px;
	}
	.navbar-user-desktop {
		display: none;
	}
	.navbar-burger {
		display: inline-block;
	}
	.menu-identite-mobile {
		display: list-item;
	}
}
.dropdown-menu {
	position: absolute;
	top: 0px;
	left: 150px;
	z-index: 0;
	min-width: 160px;
	padding: 5px 0;
	text-align: left;
	list-style: none;
	background-color: var(--couleur-fond-carte, #fff);
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	transition: all 0.3s ease-out;
	/* Menu FERMÉ réellement inerte (10/08/2026, audit d'accessibilité) : il n'était
	   jusqu'ici que glissé derrière la navbar (z-index 0, top 0), donc toujours
	   présent dans l'arbre d'accessibilité — ses liens restaient atteignables à la
	   tabulation et annoncés par un lecteur d'écran alors que le menu paraissait
	   fermé. Un commentaire de .menuOpen évoquait d'ailleurs un "display:none" de
	   .dropdown-menu qui n'a jamais existé ici.
	   visibility (et non display:none) : seule des deux à être animable, la
	   transition de glissement ci-dessus continue donc de fonctionner à
	   l'identique. */
	visibility: hidden;
}

.dropdown-menu li img, .dropdown-menu li svg {
    float: left;
    width: 2em;
    text-align: center;
    margin: 0 0.1em 0 -0.8em;
    padding: 0 .2em;
    pointer-events: none;
} 

.menuOpen {
	/* doit rester APRÈS .dropdown-menu, qui pose visibility:hidden (cf. son
	   commentaire) — c'est cette règle-ci qui redonne vie au menu à l'ouverture. */
	visibility: visible;
	top: 25px;
	left: -60px;
	z-index: 99;
	transition: all 0.3s ease-out;
}
/* menu déroulant décalé hors écran en mobile (retour utilisateur 24/07/2026,
   capture à l'appui) : "left: -60px" ci-dessus positionne le menu OUVERT par
   rapport à son ancêtre .navbar-user, pensé pour un burger loin sur la droite
   d'un écran large — .navbar-user étant déjà collé au bord droit sur petit
   écran, ce même décalage pousse le menu hors du viewport (constaté avec une
   capture d'écran, pas juste en lisant le CSS). Suspendu par la droite
   (right:0) plutôt que par la gauche : s'ouvre vers l'intérieur de l'écran, où
   la place est disponible. Doit rester déclarée APRÈS .menuOpen ci-dessus
   (même spécificité, l'ordre dans le fichier tranche) pour gagner la cascade
   quand la media query s'applique. */
@media (max-width: 480px) {
	.menuOpen {
		left: auto;
		right: 0;
	}
}

.dropdown-menu .divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5;
}
.dropdown-menu>li:hover {
	background-color: var(--couleur-hover-ligne);
}
.dropdown-menu>li:hover>a {
	color: var(--couleur-texte-hover-ligne);
}

/* surbrillance de l'entrée de menu active (18/07/2026 — retour utilisateur :
   beaucoup d'entrées n'avaient pas cette relation). Sélecteur "double classe" :
   $this->pageName du contrôleur courant pose une classe sur <ul class="dropdown-menu
   XXX"> (cf. commun/menu.php), et chaque <li class="XXX"> doit porter EXACTEMENT la
   même valeur pour matcher — un contrôleur qui sert plusieurs entrées de menu
   distinctes (Aide/Aide (perso), Mes équipes/Liste équipes, Liste Users/Inscriptions)
   surcharge $this->pageName par action pour rester spécifique à LA bonne entrée
   (cf. AideController::admin(), EquipeController::toutesEquipes(),
   UsersController::inscriptions()). */
.calendrier .calendrier, .equipe .equipe, .joursPoser .joursPoser, .profil .profil,
.aide .aide, .demande .demande, .compteurs .compteurs, .roles .roles, .users .users,
.nettoyage .nettoyage, .pubSglug .pubSglug, .aide-admin .aide-admin,
.equipes-admin .equipes-admin, .inscriptions .inscriptions, .designSystem .designSystem,
.stats .stats, .structure .structure {
	background-color: var(--couleur-zebra, #d9ecff);
}
/* « Imprimer l'année » n'a de sens que sur le Calendrier, seule page où
   imprimerCalendrier() existe : même mécanisme de classe de page que la
   surbrillance ci-dessus, mais pour montrer l'entrée au lieu de la colorer. */
.dropdown-menu .imprimer-calendrier { display: none; }
.dropdown-menu.calendrier .imprimer-calendrier { display: block; }

.dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 800;
	line-height: 2;
	color: var(--couleur-texte, #333);
	white-space: nowrap;
}

.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 5px solid var(--couleur-texte, #333);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	transform: rotate(270deg);
	transition: all 0.3s ease-out;
}

.panel-fleche {
	display: inline-block;
	height: 0;
	width: 0;
	border-top: 10px solid;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	float: right;
	right: 20px;
	transform: rotate(270deg);
	transition: all 0.3s ease-out;
	margin-top: 4px;
}

.turnCaretFleche {
	transform: rotate(0deg);
	transition: all 0.3s ease-out;
}

.navbar-user .icon-bar {
	background-color: #888;
}

.navbar-user .icon-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
}
/** fin bandeau de navigation */
.btnBlue {
	background-color: var(--couleur-secondaire);
	border: 3px solid var(--couleur-secondaire-bordure);
	color: var(--couleur-texte);
	padding: 10px 10px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	transition-duration: 0.3s;
	cursor: pointer;
	width: 100%;
	max-width:500px;
	border-radius: .3em;
	margin: 10px auto;
}

label {
	margin: 0;
	padding: 0px;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: 700;
}

.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 1em;
	line-height: 1.42857143;
	color: var(--couleur-texte, #555);
	background-color: var(--couleur-fond-carte, #fff);
	background-image: none;
	border: 1px solid var(--couleur-bordure-navbar, #ccc);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/* "height: 34px" ci-dessus écrase l'attribut "rows" d'un <textarea class="form-
   control"> (le réduit visuellement à ~1 ligne quel que soit rows="4"/"6"/"8") -
   bug déjà présent sur Equipe.inviterParEmail, remarqué le 12/07/2026 sur le
   textarea Description de Demande. Un textarea doit garder sa hauteur naturelle
   basée sur son attribut rows. */
textarea.form-control {
	height: auto;
}

.form-group {
	margin: 20px 10px;
}

/* icône œil "afficher le mot de passe", DANS le champ (injecté par quimanque.js, qui
   enveloppe chaque input[type=password] dans .champ-mot-de-passe) — convention la
   plus répandue sur le web, remplace le bouton texte à côté du champ du 1er jet. */
.champ-mot-de-passe {
	position: relative;
	display: block;
}
.champ-mot-de-passe input {
	padding-right: 38px;
}
.btn-toggle-password {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px;
	background: none;
	border: none;
	color: #777;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.btn-toggle-password:hover {
	color: #333;
}

/* Emplacements publicitaires (AdSense, cf. plan_ouverture_publique.md) — PAS
   ENCORE ACTIFS : juste l'espace réservé (aucun script tiers chargé, aucun
   cookie posé). Deux conditions avant d'activer : compte AdSense approuvé ET
   bandeau de consentement cookies en place (obligatoire RGPD).

   Structure, centralisée dans templates/default.php : `.body-region` (flex
   row, jamais de wrap) entoure `.vitrine-cote-gauche` / `<main class="princ">`
   / `.vitrine-cote-droite`. <main> est la seule zone fluide, mais plafonnée à
   --largeur-contenu-max (6 mois de calendrier côte à côte) ; le bloc entier
   est centré, si bien que le surplus d'un très grand écran devient des marges
   égales des deux côtés au lieu d'un vide à droite. `.width-500-50prc` garde
   son propre plafond de 800px (confort de lecture) dans cette zone.

   Chaque seuil est dérivé d'un calcul, jamais d'une valeur devinée : plancher
   de contenu + le VRAI format IAB/AdSense de la pub ajoutée + son gap + le
   padding de bord de fenêtre.
     Pub 1/2 (bannière, .vitrine-haut) : 320×50 (Mobile Banner) par défaut,
       728×90 (Leaderboard) dès que LA ZONE (<main>, pas la fenêtre) atteint
       728px — CONTAINER QUERY (`@container`), pas une media query : la
       largeur de <main> dépend du nombre de skyscrapers déjà affichés autour.
     Pub 3/4 (droite) et 5/6 (gauche) : cf. les seuils commentés plus bas,
       calés sur un plancher de 2 mois côte à côte.
     Bord de fenêtre (--espace-region, 10px) et écart pub/contenu
       (--gap-pub, 20px) : 2 espaces distincts, cf. le commentaire des
       variables. Seul le 1er grandit, et par le centrage, pas par un seuil.

   Skyscrapers dans le FLUX (pas position:fixed) : ils ne restent pas visibles
   pendant le scroll d'une longue page, compromis assumé pour la simplicité.

   Les 3 <div> n'existent pas dans le DOM quand `$this->afficherPub` est faux
   (gate posée UNE fois dans templates/default.php) : inutile de scoper les
   règles de mise en page par `body.page-avec-pub`. Seules les variables du
   menu radial le font, cf. plus bas. */
.body-region {
	display: flex;
	/* prend le relai de .princ (cf. règle de base plus haut) pour repousser
	   le footer en bas de l'écran — .princ, une fois DANS .body-region,
	   n'a plus ce rôle (cf. .body-region .princ plus bas). */
	flex: 1 0 auto;
	flex-wrap: nowrap;
	align-items: stretch;
	/* le bloc pubs+contenu est centré : passé la largeur maximale du contenu,
	   la place en trop se répartit en marges égales de chaque côté plutôt que
	   de laisser un grand vide à droite. */
	justify-content: center;
	gap: var(--gap-pub);
	padding: var(--espace-region);
}
.body-region .princ {
	flex: 1 1 320px;
	min-width: 340px;
	/* seule zone fluide, mais plafonnée : un mois de calendrier ne grandit
	   pas, ce sont les mois affichés côte à côte qui remplissent l'écran. */
	max-width: var(--largeur-contenu-max);
	/* neutralise le padding de .container (0 16px, cf. règle plus haut) —
	   .body-region gère déjà l'espace de bord de fenêtre à sa place. */
	padding: 0;
	/* active les container queries sur cette zone pour .vitrine-haut,
	   cf. @container plus bas. */
	container-type: inline-size;
}

.vitrine-emplacement {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f4;
	/* #999 sur #f4f4f4 : contraste 2.59, sous le seuil WCAG AA de 4.5:1 (audit
	   accessibilité axe-core, 13/07/2026) — #666 passe à ~5.9:1. */
	border: 1px dashed #ccc;
	color: #666;
	font-size: 0.8em;
	box-sizing: border-box;
}
.vitrine-haut {
	width: 320px;
	height: 50px;
	max-width: 100%;
	margin: 10px auto 20px auto;
}
@container (min-width: 728px) {
	.vitrine-haut { width: 728px; height: 90px; }
}
.vitrine-cote {
	width: 300px; /* plafond — réduit à 160px par les seuils ci-dessous */
	min-height: 600px;
	flex-shrink: 0;
	/* pas d'étirement (06/08/2026, retour utilisateur : "les pubs gauche/droite
	   devraient être positionnées en haut de page et non centrées
	   verticalement") : .body-region a align-items:stretch par défaut, qui
	   étire ce bloc à toute la hauteur de <main> — sur une page longue
	   (Calendrier), le contenu "Emplacement pub" (ou la vraie créa, 600px de
	   haut) se retrouvait centré au milieu d'une boîte bien plus grande.
	   align-self:flex-start l'ancre en haut, hauteur naturelle (min-height). */
	align-self: flex-start;
	display: none; /* réaffichées par les seuils ci-dessous */
}
/* ORDRE DE PRIORITÉ (règle de base du site, décision utilisateur) : les 4
   emplacements publicitaires passent AVANT le 2e calendrier. On part d'un
   calendrier qui grandit ; dès qu'il y a la place on ajoute la petite pub de
   droite, puis la grande de droite, puis la petite de gauche, puis la grande
   de gauche — et seulement une fois les 4 placés, la zone contenu recommence à
   grandir et les calendriers s'ajoutent côte à côte.
   Chaque seuil vaut donc 340 (le plancher : un mois sur le plus petit téléphone
   visé) + la largeur IAB de la pub ajoutée + les gaps + le padding de bord de
   fenêtre. La zone contenu redescend à ce plancher à chaque nouvelle pub, c'est
   la contrepartie assumée du modèle économique ; elle ne passe jamais dessous. */
@media (min-width: 540px) {
	.vitrine-cote-droite { display: flex; width: 160px; }
}
@media (min-width: 680px) {
	.vitrine-cote-droite { width: 300px; }
}
@media (min-width: 860px) {
	.vitrine-cote-gauche { display: flex; width: 160px; }
}
@media (min-width: 1000px) {
	.vitrine-cote-gauche { width: 300px; }
}

/* Autopromos sglugtec3d injectées par quimanque.js dans les .vitrine-emplacement
   (17/07/2026) : l'image se cale dans l'emplacement sans le déborder. */
.vitrine-emplacement a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}
.vitrine-emplacement img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}
/* une fois la pub injectée, plus de chrome "emplacement réservé" (fond gris +
   pointillés) : les créas portent leur propre fond/bordure */
.vitrine-emplacement.vitrine-remplie {
	background: transparent;
	border-color: transparent;
}

/* --decalage-menu-radial : le menu radial (.actionMenu/.actionFix, Calendrier
   ET grille équipe) est en position:fixed, donc calé sur le bord de la
   fenêtre ; cette variable le ramène sur le bord droit de <main>. Elle ne
   peut plus être une constante par palier depuis que le bloc est centré : la
   marge extérieure dépend de la place restante, d'où le max() ci-dessous
   (le padding tant que le bloc remplit la fenêtre, la moitié du surplus
   ensuite). 0 par défaut, page sans pub inchangée.
   --largeur-pub-* vaut la largeur IAB + le gap qui la sépare du contenu, et
   0 quand la pub est masquée (display:none : ni largeur, ni gap). */
body.page-avec-pub {
	--largeur-pub-gauche: 0px;
	--largeur-pub-droite: 0px;
}
@media (min-width: 540px) {
	body.page-avec-pub { --largeur-pub-droite: calc(160px + var(--gap-pub)); }
}
@media (min-width: 680px) {
	body.page-avec-pub { --largeur-pub-droite: calc(300px + var(--gap-pub)); }
}
@media (min-width: 860px) {
	body.page-avec-pub { --largeur-pub-gauche: calc(160px + var(--gap-pub)); }
}
@media (min-width: 1000px) {
	body.page-avec-pub { --largeur-pub-gauche: calc(300px + var(--gap-pub)); }
}
body.page-avec-pub {
	--largeur-bloc: calc(var(--largeur-contenu-max) + var(--largeur-pub-gauche) + var(--largeur-pub-droite));
	--decalage-menu-radial: calc(
		max(var(--espace-region), (100vw - var(--largeur-bloc)) / 2)
		+ var(--largeur-pub-droite));
}

/** debut message toast */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/** fin message toast */

/** page Aide */
.explik {
	margin: 10px;
}

/** debut les panel */
.panel {
	margin-bottom: 20px;
	background-color: var(--couleur-fond-carte);
	border: 1px solid transparent;
	border-radius: var(--rayon-bordure);
	-webkit-box-shadow: var(--ombre-carte);
	box-shadow: var(--ombre-carte);
}
.panel ul {
	margin: 10px 0;
    padding-left: 20px;
}
.panel-info {
	border-color: var(--couleur-panel-info-bordure);
}

.panel-danger {
	border-color: var(--couleur-panel-danger-bordure);
}

.panel-succes {
	border-color: var(--couleur-panel-succes-bordure);
}

.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	font-size:1.3em;
	cursor: pointer;
}
.panel-body .panel-heading {
	font-size:1.1em;
}

.panel-info>.panel-heading {
	color: var(--couleur-panel-info-texte);
	background-color: var(--couleur-panel-info-fond);
}

.panel-danger>.panel-heading {
	color: var(--couleur-panel-danger-texte);
	background-color: var(--couleur-panel-danger-fond);
}

.panel-succes>.panel-heading {
	color: var(--couleur-panel-succes-texte);
	background-color: var(--couleur-panel-succes-fond);
}

.panel .caret {
	float: right;
}

.panel-body {
	padding: 10px;
}

.collapse {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	visibility: hidden;
	height: 0px;
	transition: all 0.4s linear;
	/* 03/2018 les transition ne marche pas avec display car il n'a que 2 etats et le visibility: hidden conserve la place dans le HTML*/
	display: none;
}

.collapse.in {
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: auto;
	margin-bottom: auto;
	visibility: visible;
	height: 100%;
	transition: all 0.4s linear;
	display: block;
}

.collapse>p, .collapse>dl {
	/* ici important sert a collapse inclus dans collapse */
	margin-top: 0px;
	margin-bottom: 0px;
}

.collapse.in>p, .collapse.in>dl {
	margin-top: 10px;
	margin-bottom: 10px;
}

/** Fin les panel */
/** Debut alert */
.alert {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.alert-danger {
	color: var(--couleur-panel-danger-texte);
	background-color: var(--couleur-panel-danger-fond);
	border-color: var(--couleur-panel-danger-bordure);
}
.alert-warning {
	color: #714a0d;
	background-color: #f9deb5;
	border-color: #f99904;
}
.alert-succes {
	color: #066108;
	background-color: #dff0d8;
	border-color: #88c589;
}
#bandeauInitCompteurs {
	text-align: center;
}
/* liens en gras, jamais de changement de couleur au clic (06/08/2026, retour
   utilisateur, docs/todo.md) : sans ce couple :link/:visited identique, le
   navigateur applique sa couleur "lien visité" par défaut (violet) une fois
   cliqué. Couleur = celle DÉJÀ utilisée pour le texte de .alert-warning
   (#714a0d, pas --couleur-primaire) : #337ab7 sur #f9deb5 ne passe pas le
   contraste WCAG AA (3.5, audit axe-core du 06/08/2026) — #714a0d, déjà
   validé pour le texte environnant, passe. Gras + soulignement (hérité, non
   retiré) distinguent le lien sans dépendre uniquement de la couleur. */
#bandeauInitCompteurs a,
#bandeauInitCompteurs a:visited {
	color: #714a0d;
	font-weight: bold;
}

/** Fin alert */
/** Deb table */
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
	background-color: var(--couleur-zebra);
}

.table-hover>tbody>tr:hover {
	background-color: var(--couleur-hover-ligne);
	color: var(--couleur-texte-hover-ligne);
}
.table-bordered {
    border: 1px solid #dee2e6;
    border-collapse: collapse;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}
.table td, .table th {
    padding : 0.3em 0.4em 0.3em 0.5em;
}
/* en-tête coloré (12/07/2026) : opt-in via cette classe plutôt qu'inclus dans
   .table de base — plusieurs .table sont des tableaux de formulaire sans
   thead (ex. joursPoser/editJourPoser.php), un fond+texte forcés sur "thead
   tr" n'y aurait aucun sens. Couleur reprise de ce qui existait déjà en CSS
   inline dupliqué sur admin/users/users.php et admin/users/inscriptions.php
   (consolidé ici, cf. CLAUDE.md - éviter la duplication). */
.table-entete thead tr {
	background-color: var(--couleur-primaire-bouton, var(--couleur-primaire));
	color: white;
}
/** fin table */

/* contrôles de pagination (12/07/2026, JoursPoser/Users.users/Users.inscriptions/
   Equipe.toutesEquipes/Demande) : centré, boutons + libellé "Page X / Y" en flex
   avec un vrai espacement (horizontal ET vertical si ça passe à la ligne sur un
   petit écran) plutôt que du texte brut collé dans un <p>. */
.paginationCtrl {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}

/** deb bouton */
.btn {
	display: inline-block;
	padding: 6px 12px;
	/* 10px de tous les côtés (retour utilisateur 24/07/2026, "bug systématique" :
	   des boutons adjacents qui se retrouvent l'un sous l'autre en mobile
	   (retour à la ligne) n'avaient plus aucun espace vertical entre eux, un
	   &nbsp;&nbsp; horizontal ne suffisant pas une fois empilés). Règle globale
	   plutôt qu'un correctif au cas par cas, pour ne plus reproduire le bug. */
	margin: 10px;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: var(--rayon-bordure-btn);
	text-decoration: none;
	color: #fff;
}
.btn:before {
	float: left;
	width: 1em;
	text-align: center;
	margin: 0 0.1em 0 -0.8em;
	padding: 0 .2em;
	pointer-events: none;
	
}
.btn-succes:hover {
	color: #fff;
	background-color: var(--couleur-succes-hover);
	border-color: #398439;
}
.save:before { 
	content: "\2714";
}

.btn.focus, .btn:focus, .btn:hover {
	color: #171717;
	text-decoration: none;
}

.btn-succes {
	color: #fff;
	background-color: var(--couleur-succes);
	border-color: #4cae4c;
}

/* .badge-notification (14/07/2026) : classe distincte de .badge-invitation
   (même déclaration) — un test E2E compte précisément 2 occurrences de
   .badge-invitation (avatar + menu "Mes équipes"), une 3e classe partageant
   le même nom aurait cassé cette assertion dès qu'une notification est
   présente en plus d'une invitation d'équipe en attente. */
.badge-invitation, .badge-notification {
	display: inline-block;
	/* var(--couleur-danger), pas #d9534f en dur (même correctif de contraste
	   que ci-dessus, 13/07/2026) — cette couleur restait la valeur
	   Bootstrap 3 d'origine ici alors que le reste du site est déjà passé à
	   la variable. */
	background-color: var(--couleur-danger);
	color: #fff;
	border-radius: 10px;
	padding: 1px 6px;
	font-size: 0.75em;
	font-weight: bold;
	margin-left: 4px;
}

.btn-danger {
	color: #fff;
	background-color: var(--couleur-danger);
	border-color: #d43f3a;
}

/* sans ce correctif, la règle générique ".btn:focus, .btn:hover { color:
   #171717; }" plus haut s'applique aussi aux boutons danger (fond rouge) —
   texte quasi-noir sur rouge mesuré à 3.36:1, sous le seuil WCAG AA de 4.5:1
   (trouvé le 14/07/2026 en élargissant le scan axe-core à Users.users(), où
   un bouton reste focus après un clic — même famille de correctif que
   .btn-succes:hover/.btn-primary:hover ci-dessus, qui l'évitaient déjà). */
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
	color: #fff;
	background-color: var(--couleur-danger-hover);
	border-color: #ac2925;
}

.btn-primary {
	color: #fff;
	background-color: var(--couleur-primaire-bouton, var(--couleur-primaire));
	border-color: #2e6da4;
}

.btn-primary:hover {
	color: #fff;
	background-color: var(--couleur-primaire-hover);
	border-color: #204d74;
}

/* P5 (09/08/2026) : grise un bouton devenu obsolète (ex. "Copier" sur un lien
   déjà régénéré) sans dépendre de la couleur propre à chaque variante --
   quel que soit .btn-primary/.btn-succes/etc., un bouton disabled doit
   toujours se voir clairement inactif. */
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* neutre (21/07/2026) : texte foncé (pas blanc) sur fond clair — passe
   toujours largement le contraste WCAG AA quel que soit le thème, sans avoir
   à choisir une teinte vive de plus. Réservé aux actions fréquentes/secondaires
   (cf. commentaire sur les variables --couleur-btn-neutre-xxx dans :root). */
.btn-neutre {
	color: var(--couleur-btn-neutre-texte);
	background-color: var(--couleur-btn-neutre-fond);
	border-color: var(--couleur-btn-neutre-bordure);
}
.btn-neutre:hover, .btn-neutre:focus, .btn-neutre.focus {
	color: var(--couleur-btn-neutre-texte);
	background-color: var(--couleur-btn-neutre-fond-hover);
	border-color: var(--couleur-btn-neutre-bordure);
}
/** fin bouton */
/** debut popin de confirmation (remplace window.confirm() natif) */
.popinOverlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}
.popinOverlay.actif {
	display: flex;
}
.popinBoite {
	background-color: var(--couleur-fond-carte, #fff);
	border-radius: 4px;
	max-width: 420px;
	width: 90%;
	padding: 20px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.popinBoite p {
	margin: 0 0 20px 0;
}
.popinActions {
	text-align: right;
}
.popinActions .btn {
	margin-left: 8px;
}
/** fin popin de confirmation */
/** debut indicateur de force du mot de passe */
.forceMdp {
	margin: -8px 0 12px 0;
	font-weight: bold;
	font-size: 0.9em;
}
.forceFaible { color: var(--couleur-force-faible, #d9534f); }
/* #f0ad4e sur blanc : contraste 1,94 — sous le seuil AA de 4,5:1 */
.forceMoyen { color: var(--couleur-force-moyen, #8a5300); }
.forceFort { color: var(--couleur-force-fort, #5cb85c); }
/** fin indicateur de force du mot de passe */
/** debut close alert */
.cross {
	width: 40px;
	height: 40px;
	border-radius: 50% 50%;
	position: relative;
	float:right;
	top: -10px;
	transform: rotate(0deg);
	transition: all 0.3s ease-out;
}

.cross::before {
	background: #d43f3a;
	position: absolute;
	display: block;
	content: '';
	width: 70%;
	height: 6%;
	top: 47%;
	left: 15%;
	transform: rotate(45deg);
	transition: all 0.3s ease-out;
}

.cross::after {
	background: #d43f3a;
	position: absolute;
	display: block;
	content: '';
	width: 6%;
	height: 70%;
	left: 47%;
	top: 15%;
	transform: rotate(45deg);
	transition: all 0.3s ease-out;
}

.cross:hover {
	background: #d43f3a;
	box-shadow: inset 0 0 5px 1px #d43f3a;
	transform: rotate(270deg);
	transition: all 0.3s ease-out;
}

.cross:hover::before, .cross:hover::after {
	background: #fff;
	box-shadow: 0px 0px 8px -1px #d43f3a;
}
.alert-succes .cross:hover::before, .alert-succes .cross:hover::after {
	background: #fff;
	box-shadow: 0px 0px 8px -1px #3c763d;
}
.alert-succes .cross::before, .alert-succes .cross::after, .alert-succes .cross:hover {
	background: #3c763d;
	box-shadow: 0px 0px 8px -1px #3c763d;
}

/** fin close alert */

/** debut card */
.card-container {
	position: relative; /* pour la transition des card */
	display: flex;
	flex-wrap: wrap; 
	justify-content: space-around;
	margin: 20px 0px;
}

.card {
	top: 0;
	left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    word-wrap: break-word;
    background-color: var(--couleur-fond-carte, #fff);
    background-clip: border-box;
    border: 1px solid var(--couleur-bordure-navbar, gray);
    border-radius: 0.25rem;
	padding: 10px;
	margin: 10px 5px;;
}
.card div {
	text-align: center;
}
.card-title {
	font-weight: bold;
    margin-bottom: 0.75rem;
}
/** fin card */

.invalid-saisie {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

/* ==========================================================================
   Utilitaires (10/08/2026) — remplacent les attributs style= qui parsemaient
   les vues. Volontairement peu nombreux et nommés par leur INTENTION, pas par
   leur valeur (.txt-secondaire et non .gris-666) : le jour où la couleur du
   texte secondaire change, elle change à un seul endroit, et le HTML reste
   juste. Tout ce qui est propre à UNE page reste dans son importJsCss.php.

   Ne PAS ajouter d'utilitaire de display ici : plusieurs éléments du site sont
   affichés/masqués par du JS via element.style.display = '' (equipe.js,
   calendrier.js, stats.js...). Ce reset retombe sur la feuille de style : une
   classe .masque poserait un display:none permanent que le JS ne pourrait plus
   lever. Les style="display:none" restants dans les vues sont donc voulus —
   ils portent l'état INITIAL d'éléments que le JS pilote ensuite.
   ========================================================================== */
.txt-centre { text-align: center; }
.txt-droite { text-align: right; }
/* texte de second plan : mentions légales du pied de page, aides sous un champ,
   légendes d'illustration. */
.txt-secondaire { color: var(--couleur-texte-secondaire, #666); }
.txt-grand { font-size: 1.2em; }

/* bouton d'appel à l'action (accueil, page bienvenue) : plus grand que le
   bouton courant, pour être la cible évidente de la page. */
.btn-cta { font-size: 1.1em; padding: 10px 24px; }

/* espacement entre 2 grands blocs d'une page de contenu */
.bloc-espace { margin-top: 30px; }
.bloc-espace-l { margin-top: 40px; }
.bloc-marge-bas { margin-bottom: 20px; }

/* zone qui défile horizontalement pour elle-même, sans élargir la page (cf. le
   test mobile "aucune page ne déborde horizontalement"). */
.defilement-x { overflow-x: auto; }

/* capture d'écran illustrative (page d'accueil) */
.capture-ecran { max-width: 100%; border: 1px solid #ddd; border-radius: 6px; }

/* 2e ligne d'un titre, en graisse normale */
.titre-suite { display: block; font-weight: normal; }

/* précision sous un libellé de formulaire (format attendu, caractère facultatif) */
.champ-aide { font-weight: normal; font-size: 0.85em; color: #666; margin-bottom: 4px; }

/* Sorti de l'écran mais TOUJOURS rempli par un robot : c'est le principe du
   champ piège (honeypot) de l'inscription. Volontairement pas display:none ni
   .sr-only — certains robots ignorent ce qui est en display:none, et .sr-only
   sert à exposer du texte aux lecteurs d'écran, l'inverse du besoin ici. */
.hors-ecran { position: absolute; left: -9999px; }

/* pied de page commun (templates/default.php) */
.site-footer {
	flex-shrink: 0;
	text-align: center;
	padding: 20px 10px;
	color: var(--couleur-texte-secondaire, #666);
	font-size: 0.85em;
	background-color: var(--couleur-fond-navbar, #f8f8f8);
	border-top: 1px solid var(--couleur-bordure-navbar, #e7e7e7);
}
.site-footer a { color: var(--couleur-texte-secondaire, #666); }
/* ligne de version/copyright : détachée de la ligne de liens juste au-dessus
   (11/08/2026, retour utilisateur — un <br> ne donnait que l'interligne, trop
   serré pour distinguer les deux niveaux d'information). */
.site-footer-version { margin-top: 12px; }
/* le lien "Cookies" est un <button> (il ouvre un bandeau, il ne navigue pas) :
   on lui redonne l'apparence d'un lien du pied de page. */
.site-footer .lien-bouton {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #666;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Bandeau de consentement cookies (templates/default.php) — dormant depuis le
   retrait de GA4 le 02/08/2026, conservé intact en vue du branchement AdSense
   (P8). Son style="display:none" reste inline : c'est l'état INITIAL, le JS
   l'affiche ensuite (cf. l'avertissement en tête des utilitaires). */
.bandeau-cookies {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: #1c2530;
	color: #e8eef6;
	padding: 16px 18px;
	font-size: 0.95em;
}
.bandeau-cookies-contenu {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 20px;
}
.bandeau-cookies-texte { margin: 0; text-align: center; }
.bandeau-cookies-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* bouton compact, pour une action rangée dans une cellule de tableau */
.btn.btn-compact { padding: 2px 10px; }
/* bouton décalé du champ qui le précède sur la même ligne */
.btn-decale { margin-left: 8px; }

/* Badge d'état activé/désactivé (Rôles & habilitations). Les 2 variantes
   reprennent les couleurs de panneau du thème — elles étaient jusqu'ici
   choisies par un ternaire PHP qui écrivait du CSS dans un attribut style. */
.badgeEtat { padding: 2px 8px; border-radius: 3px; }
.badgeEtatActif {
	color: var(--couleur-panel-succes-texte);
	background-color: var(--couleur-panel-succes-fond);
}
.badgeEtatInactif {
	color: var(--couleur-panel-danger-texte);
	background-color: var(--couleur-panel-danger-fond);
}

/* message d'erreur du Calendrier (zone #results, remplie par calendrier.js) */
.calendrier-erreur { color: red; }

/* texte à recopier tel quel (texte d'invitation d'équipe) : on conserve les
   retours à la ligne, et on coupe les URL trop longues plutôt que de déborder. */
.texte-brut { white-space: pre-wrap; overflow-wrap: break-word; }

/* champ de saisie qui reste sur la ligne de son bouton, à sa largeur naturelle
   (invitation par pseudo) — .form-control passe sinon en pleine largeur. */
.champPseudoInvitation { display: inline-block; width: auto; }

/* ligne "paliers supplémentaires" de la liste des équipes (vue admin) */
.formPaliers { display: flex; gap: 6px; align-items: center; }
.champPaliers { width: 60px; }

/* le wordmark de la navbar s'aligne sur le texte qui l'entoure */
.navbar-wordmark { vertical-align: middle; }