/*
Theme Name: CSE DRUMEDIS
Theme URI: https://ts-digital.fr
Description: Habillage Art déco du site du CSE DRUMEDIS — indigo, or et géométrie, en écho à la rénovation du magasin. Thème enfant de Twenty Twenty-Five : aucun gabarit de contenu n'est remplacé, les pages WooCommerce fonctionnent à l'identique.
Author: Thibaud Sergent
Template: twentytwentyfive
Version: 2.6.4
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cse-drumedis
*/

/* ==========================================================================
   Polices : Poiret One et Jost, sous licence SIL Open Font License 1.1,
   embarquées dans le thème (assets/fonts/). Aucune requête vers un serveur
   tiers : un site qui traite des données de salariés n'a pas à transmettre
   leur adresse IP à Google à chaque page. Les licences sont dans le dossier.
   Les @font-face sont déclarées par theme.json, pas ici.
   ========================================================================== */

/* ==========================================================================
   1. ORNEMENTS ART DÉCO
   Tout est dessiné en CSS — dégradés, filets, éventails. Aucune image, donc
   rien à charger, rien qui pixellise, et les couleurs suivent la palette si
   un élu la modifie depuis l'éditeur.
   ========================================================================== */

:root {
	--cse-or: var(--wp--preset--color--accent-5, #c9a24a);
	--cse-or-clair: var(--wp--preset--color--accent-6, #e6cf94);
	--cse-indigo: var(--wp--preset--color--accent-1, #1b1d4e);
	--cse-nuit: var(--wp--preset--color--accent-2, #101233);
	--cse-ivoire: var(--wp--preset--color--base, #f7f3ea);

	/* Le fond exact du logo fourni, relevé au pixel dans le fichier
	   (#fbfbf9). Ce n'est PAS l'ivoire de la palette : un écart d'un ton
	   entre le médaillon et le fond de l'image se voit immédiatement,
	   comme une vignette collée de travers. Si le CSE fournit un jour un
	   logo détouré, cette variable et les deux règles qui l'utilisent
	   n'ont plus lieu d'être. */
	--cse-logo-fond: #fbfbf9;
}

/* Filet d'or à trois traits — le séparateur signature du style. */
.cse-filet {
	height: 9px;
	border: 0;
	background:
		linear-gradient(var(--cse-or), var(--cse-or)) center top / 100% 1px no-repeat,
		linear-gradient(var(--cse-or), var(--cse-or)) center center / 100% 2px no-repeat,
		linear-gradient(var(--cse-or), var(--cse-or)) center bottom / 100% 1px no-repeat;
	opacity: 0.85;
}

/* Éventail rayonnant, motif central de l'Art déco.
   Construit en dégradé conique : 24 rayons alternés, coupés en demi-disque. */
/* Soleil levant — le motif Art déco le plus reconnaissable, et le seul qui
   reste net.

   La version précédente était un éventail de rayons de 1,4 degré tracés en
   `repeating-conic-gradient`. Près du sommet, ces rayons sont plus fins qu'un
   pixel : le navigateur les moyenne, et l'ornement rendait un gris sale au lieu
   d'un dessin. C'est un piège classique des dégradés coniques — l'épaisseur y
   est angulaire, donc variable, alors qu'un écran a des pixels de taille fixe.

   Ici, trois formes seulement, toutes à épaisseur constante : un demi-disque
   plein, et deux arcs de 1,5 px. Aucune ne dépend de l'échelle, donc le motif
   est aussi propre sur un téléphone que sur un grand écran. */
.cse-eventail {
	position: relative;
	height: 88px;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 100%,
		var(--cse-or) 0 19px,
		transparent 19px
	);
}

.cse-eventail::before,
.cse-eventail::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	border: 1.5px solid var(--cse-or);
	border-bottom: 0;
	/* Demi-ellipse : la seconde moitié de la notation `border-radius` donne le
	   rayon vertical, ce qui permet un arc plus large que haut. */
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.cse-eventail::before {
	width: 98px;
	height: 49px;
	opacity: 0.85;
}

.cse-eventail::after {
	width: 176px;
	height: 88px;
	opacity: 0.5;
}

/* Chevrons — bande décorative fine, utilisable en haut ou bas de section. */
.cse-chevrons {
	height: 14px;
	background-image:
		linear-gradient(135deg, var(--cse-or) 25%, transparent 25%),
		linear-gradient(225deg, var(--cse-or) 25%, transparent 25%);
	background-size: 14px 14px;
	background-position: 0 0;
	opacity: 0.5;
}

/* ==========================================================================
   2. EN-TÊTE ET NAVIGATION
   ========================================================================== */

.cse-entete {
	background: linear-gradient(160deg, var(--cse-indigo) 0%, var(--cse-nuit) 100%);
	border-bottom: 1px solid var(--cse-or);
	position: relative;
	z-index: 20;
}

/* Double filet sous l'en-tête : le trait fin décollé du trait principal est
   ce qui distingue une bordure Art déco d'une bordure quelconque. */
.cse-entete::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--cse-or);
	opacity: 0.45;
}

/* --------------------------------------------------------------------------
   LA COULEUR DES LIENS — la règle la plus importante du fichier.

   L'en-tête est indigo foncé, mais rien n'indiquait aux liens de navigation
   d'être clairs : ils héritaient de la couleur de texte du site, un bleu
   presque noir. Résultat, un menu rigoureusement invisible sur son propre
   fond, que seul le survol révélait. Une couleur de fond sombre ne se pose
   jamais sans poser la couleur de texte qui va avec.
   -------------------------------------------------------------------------- */

.cse-entete,
.cse-entete .wp-block-site-title a,
.cse-entete .wp-block-navigation,
.cse-entete .wp-block-navigation a,
.cse-entete .wp-block-navigation button,
.cse-entete .wp-block-navigation .wp-block-navigation-item__content,
.cse-entete .wp-block-navigation__responsive-container-open,
.cse-entete .wp-block-navigation__responsive-container-close {
	color: var(--cse-ivoire);
}

.cse-entete .wp-block-site-title a:hover,
.cse-entete .wp-block-navigation a:hover {
	color: var(--cse-or-clair);
}

/* La marque ne doit jamais pousser la navigation à la ligne. */
.cse-marque {
	min-width: 0;
	flex-shrink: 1;
}

.cse-marque .wp-block-site-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Même traitement dans l'en-tête, à l'échelle : le fond y est le même indigo,
   donc le même rectangle blanc s'y découperait. Cerclage plus discret — à
   52 px, un anneau épais mangerait le logo au lieu de l'habiller. */
.cse-marque .wp-block-site-logo img {
	background: var(--cse-logo-fond);
	padding: .22rem;
	border-radius: 7px;
	box-shadow: 0 0 0 1px rgba(201, 162, 74, .55);
}

.cse-barre {
	flex-shrink: 0;
}

/* Soulignement qui se déploie au survol, plutôt qu'un simple changement de
   couleur : le mouvement horizontal est dans l'esprit du style. */
.cse-entete .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 4px;
}

.cse-entete .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--cse-or-clair);
	transition: right 0.25s ease;
}

.cse-entete .wp-block-navigation-item__content:hover::after,
.cse-entete .current-menu-item .wp-block-navigation-item__content::after,
.cse-entete .current-menu-ancestor > .wp-block-navigation-item__content::after {
	right: 0;
}

/* --------------------------------------------------------------------------
   SOUS-MENUS

   Les entrées de premier niveau sont des boutons, pas des liens : « Le CSE »
   et « Actualité » ne mènent nulle part, elles ouvrent. Un parent cliquable
   qui ouvre AUSSI un menu est le piège classique sur téléphone — le doigt
   déclenche la navigation avant que le sous-menu s'affiche.
   -------------------------------------------------------------------------- */

.cse-entete .wp-block-navigation__submenu-icon {
	margin-left: 0.35rem;
	opacity: 0.75;
}

/* Le panneau était BLANC, avec du texte ivoire dessus : illisible.
   La cause est une règle du cœur de WordPress —
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
   impose un fond blanc tant que le bloc de navigation n'a pas de couleur de
   fond déclarée. Elle pèse deux classes plus un élément, donc plus lourd que
   `.cse-entete .wp-block-navigation__submenu-container` : ma couleur de texte
   passait, ma couleur de fond non. D'où le texte clair sur blanc.

   Deux réponses, et les deux sont en place :
     - header.html déclare maintenant les couleurs sur le bloc lui-même, ce qui
       ajoute la classe `has-background` et désactive la règle du cœur ;
     - les sélecteurs ci-dessous montent d'un cran pour reprendre la main même
       si quelqu'un retire ces couleurs depuis l'éditeur de site.
   Régler ça uniquement en CSS marcherait ; le faire aussi côté bloc évite que
   le problème revienne à la première modification faite dans l'éditeur. */

.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container,
.cse-entete .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--cse-nuit);
	color: var(--cse-ivoire);
	border: 1px solid var(--cse-or);
	border-radius: 0;
	min-width: 15rem;
	padding: 0.35rem 0;
	box-shadow: 0 14px 30px rgba(16, 18, 51, 0.4);
}

.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li a,
.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li a:visited,
.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li button,
.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	color: var(--cse-ivoire);
	padding: 0.6rem 1.15rem;
	width: 100%;
}

.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li a .wp-block-navigation-item__label {
	padding: 0;
}

.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li a:hover,
.cse-entete .wp-block-navigation .wp-block-navigation__submenu-container li a:focus-visible {
	background: rgba(201, 162, 74, 0.18);
	color: var(--cse-or-clair);
}

/* Le soulignement animé n'a de sens qu'au premier niveau : dans un panneau
   déroulant, il redessinerait un trait sous chaque ligne. */
.cse-entete .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* --------------------------------------------------------------------------
   COIN COMPTE ET PANIER

   Mêmes symptômes que le menu : les deux icônes de WooCommerce héritent de la
   couleur de texte du site et disparaissaient sur le fond sombre. Seule la
   pastille du nombre d'articles restait visible, ce qui donnait un carré avec
   un « 1 » dedans, flottant sous le titre, sans rien pour l'expliquer.
   -------------------------------------------------------------------------- */

.cse-outils {
	flex-shrink: 0;
	padding-left: 1.1rem;
	border-left: 1px solid rgba(201, 162, 74, 0.35);
}

.cse-outils a,
.cse-outils button,
.cse-outils .wc-block-mini-cart__button,
.cse-outils .wc-block-customer-account {
	color: var(--cse-ivoire);
	background: transparent;
	border: 0;
}

.cse-outils svg {
	fill: currentColor;
	width: 22px;
	height: 22px;
}

.cse-outils a:hover,
.cse-outils button:hover {
	color: var(--cse-or-clair);
}

/* Pastille du nombre d'articles : or plein, chiffre indigo. Elle doit se lire
   d'un coup d'œil, c'est le seul retour visuel après un ajout au panier. */
.cse-outils .wc-block-mini-cart__badge,
.cse-outils .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
	background: var(--cse-or);
	color: var(--cse-nuit);
	border-color: var(--cse-or);
	font-weight: 600;
}

/* Le prix à côté de l'icône n'apporte rien dans une barre déjà chargée. */
.cse-outils .wc-block-mini-cart__amount,
.cse-outils .wc-block-mini-cart__quantity-badge + .wc-block-mini-cart__amount {
	display: none;
}

/* Tiroir du panier : il s'ouvre par-dessus le site, il doit être lisible. */
.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background: var(--cse-ivoire);
}

/* --------------------------------------------------------------------------
   SUR DEMANDE — le bloc « Demander » d'une fiche produit (sur-demande.php)
   -------------------------------------------------------------------------- */
.cse-sur-demande {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--cse-or);
	background: var(--cse-logo-fond);
}

.cse-sur-demande__info {
	margin: 0 0 .8rem;
}

.cse-sur-demande__form {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}

.cse-sur-demande__note {
	margin: .6rem 0 0;
	font-size: .85em;
	color: var(--wp--preset--color--encre-douce, #5b5a55);
}

/* --------------------------------------------------------------------------
   CARTE CSE — la liste des partenaires (motif carte-cse.php)
   Un partenaire, une ligne : nom à gauche, avantage à droite, filet fin
   entre deux. Le lieu, en petit sous le nom.
   -------------------------------------------------------------------------- */
.cse-carte h2 {
	margin-top: 2.4rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--cse-or);
}

.cse-carte__liste {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	column-gap: 1.5rem;
	margin: 0;
}

.cse-carte__liste dt,
.cse-carte__liste dd {
	margin: 0;
	padding: .7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--trait, #ddd2ba);
}

.cse-carte__liste dt {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-weight: 600;
}

.cse-carte__liste dt small {
	display: block;
	font-weight: 400;
	font-size: .85em;
	color: var(--wp--preset--color--encre-douce, #5b5a55);
}

/* Le logo du partenaire : même médaillon que les logos de la billetterie,
   en petit. Sans logo (trois commerces locaux sans site), les initiales sur
   fond indigo, pour que la colonne reste alignée. */
.cse-carte__logo {
	flex: 0 0 104px;
	width: 104px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--cse-logo-fond);
	box-shadow: 0 0 0 1px var(--cse-or), 0 0 0 4px rgba(201, 162, 74, .14);
	overflow: hidden;
}

.cse-carte__logo .cse-carte__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
}

.cse-carte__logo--vide {
	background: var(--cse-nuit);
	color: var(--cse-or);
	font-family: var(--wp--preset--font-family--titres, inherit);
	font-size: 1.1rem;
	letter-spacing: .06em;
}

@media (max-width: 600px) {
	.cse-carte__liste {
		grid-template-columns: 1fr;
	}

	.cse-carte__liste dt {
		padding-bottom: .1rem;
		border-bottom: 0;
	}

	.cse-carte__liste dd {
		padding-top: .1rem;
	}
}

/* --------------------------------------------------------------------------
   RAYONS DE LA BOUTIQUE — barre produite par rayons.php sous le titre
   -------------------------------------------------------------------------- */
.cse-rayons {
	margin: 1rem 0 1.5rem;
}

.cse-rayons__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.cse-rayons__puce {
	display: inline-block;
	padding: .35rem .9rem;
	border: 1px solid var(--cse-or);
	border-radius: 999px;
	color: var(--cse-nuit);
	font-size: .9rem;
	letter-spacing: .04em;
	text-decoration: none;
	background: var(--cse-logo-fond);
}

.cse-rayons__puce:hover,
.cse-rayons__puce:focus-visible {
	background: var(--cse-or);
	color: var(--cse-nuit);
}

.cse-rayons__puce.est-courante {
	background: var(--cse-nuit);
	border-color: var(--cse-nuit);
	color: var(--cse-ivoire);
}

.cse-rayons__nombre {
	opacity: .65;
	font-size: .8em;
	margin-left: .25em;
}

.cse-rayons__recherche {
	display: flex;
	gap: .5rem;
	max-width: 32rem;
}

.cse-rayons__recherche input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .5rem .8rem;
	border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
	background: var(--cse-logo-fond);
}

/* Accueil : le prochain rendez-vous, entre « Ce que fait votre CSE » et les
   commissions. */
.cse-prochain {
	margin-top: var(--wp--preset--spacing--60);
}

.cse-prochain .cse-evenement {
	margin-top: var(--wp--preset--spacing--40);
}

.cse-prochain__tous {
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   ÉVÉNEMENTS — cartes produites par [cse_evenements] (plugin, evenements.php)
   L'élu remplit un formulaire ; la mise en forme, c'est ici, une fois pour
   toutes : photo à gauche, date en petites capitales or, titre, texte, infos.
   -------------------------------------------------------------------------- */
.cse-evenement {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 1.5rem;
	margin-top: 2rem;
	border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
	background: var(--cse-logo-fond);
	overflow: hidden;
}

.cse-evenement:not(:has(.cse-evenement__photo)) {
	grid-template-columns: 1fr;
}

.cse-evenement__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.cse-evenement__corps {
	padding: 1.4rem 1.6rem 1.6rem 0;
}

.cse-evenement:not(:has(.cse-evenement__photo)) .cse-evenement__corps {
	padding-left: 1.6rem;
}

.cse-evenement__quand {
	margin: 0 0 .3rem;
	color: var(--cse-or);
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cse-evenement__titre {
	margin: 0 0 .8rem;
}

.cse-evenement__infos {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	list-style: none;
	background: var(--wp--preset--color--accent-4, #ede4cf);
	font-size: .95em;
}

.cse-evenement__infos li + li {
	margin-top: .3rem;
}

.cse-evenements__passes {
	margin-top: 3rem;
}

.cse-evenement--passe {
	opacity: .78;
	grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}

.cse-evenements__vide {
	font-style: italic;
}

@media (max-width: 700px) {
	.cse-evenement,
	.cse-evenement--passe {
		grid-template-columns: 1fr;
	}

	.cse-evenement__corps {
		padding: 1.2rem 1.2rem 1.4rem;
	}
}

/* Les rangées d'élus : deux personnes ne doivent pas se retrouver l'une à
   l'extrême gauche et l'autre à l'extrême droite d'une page large (capture du
   porteur, commission égalité). Colonnes de largeur fixe, centrées, quel que
   soit leur nombre ; sur téléphone, WordPress les empile comme avant. */
@media (min-width: 782px) {
	.wp-block-columns:has(> .cse-elu) {
		justify-content: center;
		gap: 2.5rem;
	}

	.wp-block-columns:has(> .cse-elu) > .cse-elu {
		flex: 0 1 240px;
	}
}

/* --------------------------------------------------------------------------
   TÉLÉPHONE ET TABLETTE
   -------------------------------------------------------------------------- */

/* Menu déroulant mobile : fond indigo plein, sinon le texte ivoire disparaît. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cse-nuit) !important;
	color: var(--cse-ivoire);
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open button {
	color: var(--cse-ivoire) !important;
}

/* Dans le panneau plein écran, les sous-menus sont dépliés : pas de cadre, pas
   d'ombre, juste un retrait qui montre la hiérarchie. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 1.2rem;
}

/* Le menu de l'en-tête est justifié à droite sur PC ; dans le panneau plein
   écran, WordPress recopiait cet alignement : entrées collées au bord droit,
   sous-menus flottant au milieu, chaque bloc décalé différemment (capture du
   porteur, 8/09). Dans le panneau, tout part du bord gauche : les entrées
   principales, puis leurs sous-entrées en retrait, comme une table des
   matières. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	width: 100%;
}

/* Deuxième passe (capture du 8/09, 9 h 24) : la première visait les
   conteneurs, or WordPress aligne CHAQUE entrée par une variable posée sur le
   bloc (`--navigation-layout-justification-alignment: flex-end`, issue de
   « justifié à droite »), et chaque entrée est une colonne flex : le parent se
   colle à droite, son sous-menu, plus étroit, flotte au milieu. On remet la
   variable à gauche dans le panneau et on force l'alignement des entrées. */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-alignment: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-left: 1.5rem;
	margin-top: .35rem;
	border-left: 1px solid rgba(201, 162, 74, .45);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: .92em;
	letter-spacing: .12em;
}

/* Sous-menus REPLIÉS par défaut dans le panneau (demande du porteur, 8/09).
   WordPress les déplie tous et cache le chevron ; on fait l'inverse. Le
   chevron est l'interrupteur — mais le script du bloc tient tout sous-menu
   pour ouvert tant que le panneau l'est (aria-expanded reste « true »), donc
   l'état est le nôtre : classe `cse-ouvert` posée par menu-mobile.js. Pour
   qu'un doigt n'ait pas à viser une flèche de 12 px, le bouton recouvre
   toute la ligne du parent — lien et bouton sont posés sur
   la même cellule d'une grille, le bouton dessus, le lien (href="#", il ne
   mène nulle part) sans réaction au toucher. Sur PC rien ne change : ces
   règles ne vivent que dans .is-menu-open. */
.cse-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
	row-gap: 0;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	grid-column: 1 / -1;
	grid-row: 1;
	pointer-events: none;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-icon {
	display: flex !important;
	grid-column: 1 / -1;
	grid-row: 1;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	min-height: 2.6em;
	margin: 0;
	padding: 0 .2rem 0 0;
	background: transparent;
	border: 0;
	color: var(--cse-ivoire);
	cursor: pointer;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-icon svg {
	width: 1.1em;
	height: 1.1em;
	stroke: var(--cse-or);
	transition: rotate .2s ease;
	/* !important : le bloc retourne le chevron dès que le panneau est ouvert,
	   puisqu'il tient alors tout sous-menu pour ouvert. */
	transform: none !important;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child.cse-ouvert > .wp-block-navigation__submenu-icon svg {
	rotate: 180deg !important;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none !important;
	grid-column: 1 / -1;
	grid-row: 2;
	padding-top: .6rem;
}

.cse-entete .wp-block-navigation__responsive-container.is-menu-open .has-child.cse-ouvert > .wp-block-navigation__submenu-container {
	display: flex !important;
}

/* Le cadre blanc autour de l'entrée touchée était l'anneau de focus par
   défaut : on le garde (clavier, lecteurs d'écran) mais en or et discret. */
.wp-block-navigation__responsive-container.is-menu-open button:focus,
.wp-block-navigation__responsive-container.is-menu-open a:focus {
	outline: 2px solid var(--cse-or);
	outline-offset: 4px;
}

@media (max-width: 781px) {
	.cse-outils {
		padding-left: 0.8rem;
	}

	.cse-marque .wp-block-site-title {
		font-size: 1rem;
	}
}

/* Le logo dans le bandeau d'accueil. Le bloc « logo du site » ne produit rien
   du tout tant qu'aucune image n'est posée : le bandeau reste donc exactement
   tel qu'il est aujourd'hui, sans trou ni cadre vide, jusqu'au jour où un élu
   dépose le logo depuis Billetterie CSE → Logo du CSE. */
.cse-logo-accueil {
	margin-bottom: 1.6rem;
}

/* Le logo fourni est un JPEG : il porte donc un fond opaque, et il n'y a pas
   de canal alpha à exploiter. Le détourer ne réglerait de toute façon rien —
   son arc « CENTRE E.LECLERC » est en NOIR, et deviendrait illisible sur
   l'indigo du bandeau.

   On assume donc l'inverse de ce qu'on ferait d'habitude : plutôt que de
   masquer le fond clair, on en fait un médaillon cerclé d'or. Le rectangle
   blanc oublié devient un cartouche, ce qui est exactement le vocabulaire Art
   déco du reste de la page.

   La marge intérieure est ce qui fait tout le travail : les angles arrondis
   rognent alors du fond, jamais l'image — donc jamais les extrémités de l'arc
   de texte, qui montent haut dans les coins. */
.cse-logo-accueil .wp-block-site-logo img {
	margin-inline: auto;
	/* Demande de la secrétaire du CSE (8/09) : le logo en grand remplace le
	   titre « Comité social et économique » du bandeau (gardé pour les
	   lecteurs d'écran, invisible). */
	max-height: 240px;
	width: auto;
	background: var(--cse-logo-fond);
	padding: .5rem;
	border-radius: 12px;
	box-shadow:
		0 0 0 1px var(--cse-or),
		0 0 0 6px rgba(201, 162, 74, .16),
		0 12px 28px -14px rgba(0, 0, 0, .65);
}

/* Le titre « Accueil » imprimé par le gabarit de page n'a rien à faire
   au-dessus du bandeau : celui-ci porte déjà « Comité social et économique »
   en H1. Masqué ici, et ici seulement — sur toutes les autres pages c'est ce
   titre de gabarit qui fait office de H1, les motifs n'en ont plus. */
.home .wp-block-post-title {
	display: none;
}

/* Masquer le titre ne suffisait pas : le gabarit `page.html` du parent pose une
   marge haute sur <main> et un rembourrage haut sur le groupe qui enveloppe le
   contenu (spacing 60 chacun). Sur l'accueil, ça laissait 120 px de crème vide
   entre l'en-tête et le bandeau indigo. Le bandeau doit coller à l'en-tête,
   seule la bande de chevrons les sépare. Accueil uniquement : ailleurs, ces
   espacements encadrent le vrai titre de page. */
.home main.wp-block-group {
	/* !important, à regret : le gabarit écrit ces espacements en attribut
	   style="…" sur les éléments, et un style inline bat n'importe quelle
	   règle de feuille. C'est le seul moyen sans dupliquer le gabarit. */
	margin-top: 0 !important;
}

.home main.wp-block-group > .wp-block-group.alignfull {
	padding-top: 0 !important;
}

/* ==========================================================================
   3. SECTIONS SOMBRES
   ========================================================================== */

.cse-nuit {
	background: linear-gradient(160deg, var(--cse-indigo) 0%, var(--cse-nuit) 100%);
	color: var(--cse-ivoire);
	position: relative;
}

.cse-nuit :is(h1, h2, h3, h4, p, li) {
	color: var(--cse-ivoire);
}

.cse-nuit a:not(.wp-element-button) {
	color: var(--cse-or-clair);
}

/* Encadrement en retrait — le cadre dans le cadre, motif récurrent du style. */
.cse-cadre-or {
	position: relative;
}

.cse-cadre-or::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid var(--cse-or);
	opacity: 0.45;
	pointer-events: none;
}

/* Bouton clair sur fond sombre. */
.cse-nuit .wp-element-button,
.cse-nuit .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--cse-or);
	color: var(--cse-or-clair);
}

.cse-nuit .wp-element-button:hover,
.cse-nuit .wp-block-button__link:hover {
	background-color: var(--cse-or);
	color: var(--cse-nuit);
}

/* ==========================================================================
   4. CARTES
   ========================================================================== */

.cse-carte {
	background: var(--cse-ivoire);
	border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
	position: relative;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Coin cranté en haut à gauche : deux traits d'or, signature discrète. */
.cse-carte::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 26px;
	height: 26px;
	border-top: 1px solid var(--cse-or);
	border-left: 1px solid var(--cse-or);
	pointer-events: none;
}

.cse-carte:hover {
	border-color: var(--cse-or);
	transform: translateY(-2px);
}

/* Titre de carte souligné d'un court filet d'or. */
.cse-carte :is(h2, h3)::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-top: 0.6rem;
	background: var(--cse-or);
}

/* ==========================================================================
   5. TITRES DE SECTION
   ========================================================================== */

.cse-titre-orne {
	text-align: center;
}

.cse-titre-orne::after {
	content: "◆";
	display: block;
	margin: 0.5rem auto 0;
	font-size: 0.7em;
	line-height: 1;
	color: var(--cse-or);
}

/* ==========================================================================
   6. WOOCOMMERCE
   Le catalogue doit ressembler au reste du site, sans réécrire ses gabarits.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product,
li.wc-block-product {
	border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
	padding: 1rem;
	transition: border-color 0.25s ease;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
li.wc-block-product:hover {
	border-color: var(--cse-or);
}

/* Les visuels des prestations sont des logos (Pathé, Walibi, Cinéchèque),
   pas des photos : un logo recadré au carré perd ses lettres. On le montre
   entier, sur un médaillon blanc à liseré or comme le logo du CSE, ce qui
   uniformise aussi les fonds (le logo Walibi arrive sur fond blanc opaque,
   les deux autres sur fond transparent). !important, à regret : le bloc
   Product Image écrit `style="object-fit:cover;aspect-ratio:1/1"` directement
   sur la balise <img> (constaté dans Chrome le 8/09), et un style inline
   bat n'importe quelle règle de feuille. */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	box-sizing: border-box;
	padding: 1.5rem;
	background: var(--cse-logo-fond);
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--cse-or), 0 0 0 5px rgba(201, 162, 74, .16);
}

/* Fiche produit. Le visuel est un logo : la loupe, le zoom au survol et la
   visionneuse plein écran du bloc Galerie n'apportent rien et intriguent
   (« pourquoi une loupe ? »). Masqués. Le titre, lui, reprend le libellé de
   la grille tarifaire — long, avec une parenthèse — et débordait sur quatre
   lignes en capitales : taille fluide, et `text-wrap: balance` pour que les
   lignes se coupent à des endroits qui ont un sens. */
.wc-block-product-gallery-dialog-on-click,
.woocommerce-product-gallery__trigger {
	display: none !important;
}

.wc-block-product-gallery-large-image__image--hoverZoom,
.wc-block-product-gallery-large-image img {
	transform: none !important;
	cursor: default !important;
}

.single-product h1.wp-block-post-title {
	font-size: clamp(1.5rem, 1.9vw + 0.7rem, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--cse-indigo);
	font-weight: 600;
	letter-spacing: 0.03em;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--cse-or);
}

.woocommerce .woocommerce-error {
	border-top-color: #a03024;
}

/* Formulaire de connexion : encadré, centré, traité comme une pièce à part. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
	position: relative;
	padding: 2rem;
}

.woocommerce-account .woocommerce-form-login::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid var(--cse-or);
	opacity: 0.35;
	pointer-events: none;
}

/* Même médaillon que dans l'en-tête et le bandeau : sans lui, le logo du
   corps de la page de connexion réapparaissait en carré blanc nu. */
.cse-logo-connexion img {
	/* Même taille qu'ailleurs depuis le retour de la secrétaire (8/09). */
	max-height: 200px;
	width: auto;
	background: var(--cse-logo-fond);
	padding: .4rem;
	border-radius: 10px;
	box-shadow: 0 0 0 1px var(--cse-or), 0 0 0 5px rgba(201, 162, 74, .16);
}

/* ==========================================================================
   7. ÉLÉMENTS DU PLUGIN DE BILLETTERIE
   ========================================================================== */

.cse-bandeau-statut {
	background: var(--wp--preset--color--alerte-fond, #f6edd8);
	border-left: 3px solid var(--wp--preset--color--alerte, #8a6a12);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}

.cse-ventilation {
	font-size: 0.9375em;
	line-height: 1.55;
	color: var(--wp--preset--color--encre-douce, #4f4d5c);
}

.cse-ventilation strong {
	color: var(--cse-indigo);
}

/* Tableau « Mes billets » lisible sur téléphone : c'est là que la plupart des
   salariés ouvriront leur billet, souvent devant la caisse. */
@media (max-width: 600px) {
	.cse-mes-billets :is(table, thead, tbody, th, td, tr) {
		display: block;
	}

	.cse-mes-billets thead {
		position: absolute;
		left: -9999px;
	}

	.cse-mes-billets tr {
		margin-bottom: 1rem;
		border: 1px solid var(--wp--preset--color--trait, #ddd2ba);
		padding: 0.75rem;
	}

	.cse-mes-billets td::before {
		content: attr(data-libelle) " : ";
		font-weight: 600;
		letter-spacing: 0.04em;
	}
}

/* ==========================================================================
   8. PORTRAITS DES ÉLUS
   Les commissions sont des personnes avant d'être des sigles : la photo
   compte autant que le nom. Tant qu'aucune image n'est envoyée, le cadre
   affiche un décor plutôt qu'un trou blanc — une page en cours de
   remplissage reste présentable.
   ========================================================================== */

.cse-portrait {
	position: relative;
	max-width: 220px;
	margin-bottom: 1rem;
	border: 1px solid var(--cse-or);
	padding: 6px;
	background: var(--cse-ivoire);
}

.cse-portrait figure.wp-block-image {
	margin: 0;
}

.cse-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Emplacement vide : le bloc Image sans média sort un <img> sans src. */
.cse-portrait img:not([src]),
.cse-portrait img[src=""] {
	display: none;
}

.cse-portrait:not(:has(img[src]))::after {
	content: "";
	display: block;
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 50% 42%, var(--cse-or-clair) 0 14%, transparent 15%),
		repeating-linear-gradient(135deg, rgba(201, 162, 74, 0.16) 0 6px, transparent 6px 12px),
		linear-gradient(160deg, var(--cse-indigo) 0%, var(--cse-nuit) 100%);
}

/* Sur fond sombre, le cadre reprend le fond de la section. */
.cse-nuit .cse-portrait {
	background: transparent;
}

.cse-elu h3 {
	margin-bottom: 0.2rem;
}

.cse-elu p {
	margin-top: 0.2rem;
}

/* Fil d'Ariane des pages de commission. */
.cse-fil-ariane a {
	text-decoration: none;
}

/* ==========================================================================
   9. ACCESSIBILITÉ
   ========================================================================== */

:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--cse-or);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cse-carte,
	.cse-entete .wp-block-navigation-item__content::after {
		transition: none;
	}
}


/* ==========================================================================
   AFFINAGE 2.6 — 23 septembre 2026
   --------------------------------------------------------------------------
   Titres : Bodoni Moda a été essayée en 2.6.0-2.6.2 puis abandonnée à la
   demande du porteur (23/09/2026) : Poiret One en capitales espacées reste
   la signature Art déco du site. Ce qui suit (boutique, portraits, en-tête
   mobile, tri) est conservé.
   ========================================================================== */

/* Chiffres alignés dans les prix et les tableaux. */
.wc-block-components-product-price,
.woocommerce-Price-amount,
table {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Les h2 réutilisés comme titres de produit dans la grille : Jost, lisible,
   à l'encre, au lieu d'une didone capitale grise en corps 17. */
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--geometrique);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-3);
}

/* Épuisé : ce n'est pas une action, donc pas un bouton plein. */
.wc-block-product.outofstock .wp-block-button__link,
.wc-block-product.outofstock .wc-block-components-product-button__button {
	background: transparent;
	color: var(--wp--preset--color--encre-douce);
	border-color: var(--wp--preset--color--trait);
	cursor: default;
}

/* Pas de grisage des visuels épuisés : tant que le stock de démonstration
   est vide, tout le catalogue serait gris. Le libellé suffit. */

/* Barre au-dessus de la grille : décompte discret, tri au style du site. */
.woocommerce-result-count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--encre-douce);
	margin: 0;
}

.woocommerce-ordering select,
.orderby {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: #fffdf8;
	border: 1px solid var(--wp--preset--color--trait);
	border-radius: 0;
	padding: .55rem 2.2rem .55rem .8rem;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--accent-3) 50%),
		linear-gradient(135deg, var(--wp--preset--color--accent-3) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
	background-size: .35rem .35rem;
	background-repeat: no-repeat;
	max-width: 100%;
}

/* Champ de recherche de la boutique. */
.cse-rayons input[type="search"],
.wp-block-search__input {
	background: #fffdf8;
	border: 1px solid var(--wp--preset--color--trait);
	font: inherit;
	min-width: 0;
}

/* En-tête sur téléphone : le nom du site était coupé en « CSE DRU… ». On
   resserre, et jusqu’à 1100 px (menu complet à côté) on garde le logo seul, qui porte déjà le nom. */
@media (max-width: 600px) {
	.cse-marque .wp-block-site-title {
		font-size: 1rem;
		letter-spacing: .1em;
		white-space: nowrap;
	}
}

@media (max-width: 1100px) {
	.cse-marque .wp-block-site-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Titres de section : un peu d'air au-dessus, pour que la page respire. */
.entry-content > h2.wp-block-heading,
.wp-block-post-content > h2.wp-block-heading {
	margin-top: var(--wp--preset--spacing--60, 3rem);
}

/* Texte courant : lignes de lecture raisonnables sur grand écran. */
.wp-block-post-content > p {
	max-width: 68ch;
}

/* Portraits des élus : moins massifs sur téléphone, deux par ligne. */
@media (max-width: 781px) {
	.wp-block-columns:has(> .cse-elu) {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
	}
	.wp-block-columns:has(> .cse-elu) > .cse-elu {
		flex-basis: auto !important;
	}
	.cse-elu h3 {
		font-size: 1rem !important;
	}
}

/* Boutique : filtres et recherche alignés sur la grille (largeur « wide »),
   comme le titre, au lieu d'une colonne étroite centrée. */
.cse-rayons,
.cse-rayons + form,
.cse-rayons + .cse-rayons__recherche {
	max-width: var(--wp--style--global--wide-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Décompte et tri : côte à côte sur ordinateur, l'un sous l'autre sur
   téléphone (le décompte s'écrasait sur quatre lignes). */
@media (max-width: 600px) {
	.wp-block-group:has(> .wc-block-product-results-count) {
		flex-wrap: wrap !important;
		gap: .6rem;
	}
	.wp-block-group:has(> .wc-block-product-results-count) > * {
		flex: 1 1 100%;
	}
	.woocommerce-ordering select {
		width: 100%;
	}
}

/* ==========================================================================
   ÉLUS ET SUPPLÉANTS — cartes générées par [cse_membres] (23/09/2026)
   Grille qui passe à la ligne toute seule : 4 par rangée sur ordinateur,
   2 sur téléphone, centrées, quel que soit le nombre de personnes.
   ========================================================================== */

.cse-membres-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
	justify-content: center;
	gap: 2.5rem 2rem;
	margin: 1.5rem auto 2.5rem;
	max-width: var(--wp--style--global--wide-size);
}

.cse-membres-grille .cse-elu h3 {
	margin: 0 0 .2rem;
	line-height: 1.25;
}

@media (max-width: 600px) {
	.cse-membres-grille {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
	}
	.cse-membres-grille .cse-elu h3 {
		font-size: 1rem !important;
	}
}

/* Le référent en grand, sur fond de nuit (page harcèlement). */
.cse-vedette {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

.cse-vedette__portrait {
	flex: 0 0 170px;
	margin: 0;
}

.cse-vedette__texte h2 {
	margin: .2rem 0;
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.cse-vedette {
		flex-direction: column;
		text-align: center;
	}
}

/* Tri de la boutique : pleine largeur sur téléphone. */
@media (max-width: 600px) {
	.wc-block-catalog-sorting,
	.woocommerce-ordering {
		width: 100%;
	}
}