/*
Theme Name: DGTCP - Variante B
Theme URI: https://tresor.gov.bf/
Author: Direction Générale du Trésor et de la Comptabilité Publique
Description: Variante B de la refonte du site DGTCP. Direction retenue : moderne et contrastée, fondée sur le magenta du logo officiel du Trésor Public. Thème enfant d'Abiz : le thème parent n'est jamais modifié.
Template: abiz
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dgtcp
*/

/* -------------------------------------------------------------------------
 * Ce fichier est chargé APRÈS le thème parent : tout ce qui est écrit ici
 * écrase Abiz sans jamais toucher à ses fichiers.
 * ---------------------------------------------------------------------- */

/* =========================================================================
 * 1. Palette
 *
 * Variante B — identité de marque.
 *
 * Le magenta est prélevé sur le logo officiel du Trésor Public
 * (assets/logo.png, teinte dominante #F0008D). Contrairement à la
 * variante A, qui part des couleurs du drapeau, cette variante assume
 * l'identité graphique existante de la direction.
 *
 * Le drapeau n'y est plus la couleur de base mais un rappel discret,
 * réservé au filet d'en-tête (assets/bg_banner_bf.png).
 *
 * Codes à confirmer par le SCRP : un seul bloc à modifier.
 *
 * LE LEVIER À CONNAÎTRE
 *
 * Abiz ne code pas ses couleurs en dur : il pilote TOUTE sa colorimétrie par
 * deux variables déclarées sur :root dans abiz/assets/css/main.css —
 * --bs-primary (212 usages) et --bs-secondary (92). Les redéclarer ici fait
 * basculer le site entier.
 *
 * C'est ce qui règle le point de vigilance de cette variante : le parent
 * impose un rouge vif (#e11c09) sur ses boutons, liens et icônes, et rouge
 * et magenta côte à côte donnent un résultat brouillon. Plutôt que de
 * traquer 212 règles une par une, on reprend le système du parent à notre
 * compte.
 * ====================================================================== */

:root {
	/* --- Reprise du système de couleurs du thème parent --- */
	--bs-primary: #f0008d;
	--bs-primary-dark: #b30069;
	--bs-primary-light: rgba(240, 0, 141, 0.09);
	--bs-primary-shadow: rgba(240, 0, 141, 0.35);
	--bs-secondary: #1a1418;
	--bs-secondary-dark: #0d0a0c;

	/* --- Palette propre au projet --- */
	--dgtcp-magenta: #f0008d;
	--dgtcp-magenta-dark: #b30069;
	--dgtcp-magenta-light: #ff4fb0;
	--dgtcp-magenta-wash: #fdf2f8;

	/*
	 * MAGENTA DE TEXTE — plus sombre, et ce n est pas un caprice.
	 *
	 * Mesure au DOM : #f0008d sur blanc donne 4,13:1. Le niveau AA exige
	 * 4,5:1 pour du texte courant, et seulement 3:1 pour du GRAND texte
	 * (24 px, ou 18,66 px en gras). Le magenta de marque passe donc pour les
	 * titres et echoue pour un onglet a 15 px ou un surtitre a 14 px.
	 *
	 * #b30069 monte a 6,7:1 et reste la meme teinte, simplement assombrie :
	 * a cette taille, l oeil ne fait pas la difference entre les deux, mais
	 * le contraste, si.
	 *
	 * REGLE : magenta clair pour les APLATS et le grand texte, magenta de
	 * texte pour tout ce qui est ecrit petit. Le cahier des charges impose
	 * l accessibilite et une validation W3C.
	 */
	--dgtcp-magenta-texte: #b30069;

	/*
	 * APLAT QUI PORTE DU TEXTE BLANC.
	 *
	 * Revue qualite du 1er octobre. Le magenta de marque servait de fond aux
	 * boutons, texte blanc par-dessus : mesure au DOM, 4,13:1 — le meme manque
	 * d un dixieme que le magenta sur blanc, dans l autre sens. Quatre boutons
	 * etaient concernes : « Espace agent », la loupe de recherche, « Appeler
	 * maintenant », et le survol des boutons « Voir plus ».
	 *
	 * Le magenta assombri donne 6,7:1 face au blanc. Meme teinte, simplement
	 * plus dense : l oeil n y voit pas un autre magenta.
	 *
	 * La regle complete du systeme, desormais :
	 *
	 *   texte sur BLANC      -> magenta de texte   #b30069
	 *   texte sur ENCRE      -> magenta clair      #ff4fb0
	 *   APLAT SOUS DU BLANC  -> magenta d aplat    #b30069
	 *   ornement sans texte  -> magenta de marque  #f0008d
	 *
	 * La derniere ligne est ce qui reste au magenta vif : pastilles, filets,
	 * soulignements, bordures, anneaux de focus. Rien qui porte un caractere.
	 */
	--dgtcp-magenta-aplat: #b30069;

	--dgtcp-ink: #1a1418;
	--dgtcp-ink-soft: #3d3339;
	--dgtcp-muted: #6b5f65;
	--dgtcp-texte: #5c545a;
	--dgtcp-light: #faf6f8;
	--dgtcp-border: rgba(255, 255, 255, 0.16);

	/*
	 * Couleurs des RESEAUX SOCIAUX, pour leurs icones du pied de page
	 * (amendement du 28 septembre). Facebook et LinkedIn passent au magenta
	 * clair a la demande du client : leurs deux bleus juraient avec la
	 * palette. X reste blanc (sa marque est noire, invisible sur l encre),
	 * YouTube rouge. Tous depassent le 3:1 exige d un pictogramme.
	 */
	--dgtcp-reseau-facebook: var(--dgtcp-magenta-light);
	--dgtcp-reseau-x: #ffffff;
	--dgtcp-reseau-linkedin: var(--dgtcp-magenta-light);
	--dgtcp-reseau-youtube: #ff0000;

	/*
	 * Propres au portail (variante B). Le modèle ivoirien pose un fond gris
	 * très clair plutôt que du blanc : les cartes s'en détachent sans qu'il
	 * faille leur dessiner une bordure, ce qui allège la page à densité
	 * égale. On garde le principe, avec une nuance tirée du magenta plutôt
	 * qu'un gris neutre.
	 */
	/*
	 * LE BLANC EST LA COULEUR PRINCIPALE.
	 *
	 * Une premiere version posait un fond gris rose et un magenta genereux —
	 * barre de navigation pleine, degrade sur les chiffres cles. Le magenta
	 * revenait a tous les coins de la page et n'y designait plus rien : une
	 * couleur d'accent qui couvre la moitie de l'ecran cesse d'etre un accent.
	 *
	 * Le fond passe donc au blanc, et le magenta est reserve a ce qui doit
	 * etre DESIGNE : un onglet actif, un titre de section, un bouton, un
	 * chiffre. C'est le rapport qu'on mesure sur fasoarzeka.bf, le site du
	 * Tresor Public lui-meme : le blanc y est employe 39 fois contre 26 a la
	 * couleur de marque.
	 *
	 * Le gris tres clair ne sert plus de fond general : il alterne d'une
	 * section a l'autre, pour separer sans tracer de bordure.
	 */
	/*
	 * HAUTEURS DU PREMIER ECRAN — une seule source de verite.
	 *
	 * Le carrousel doit occuper exactement ce qui reste sous l en-tete, une
	 * fois le bandeau d informations pose au bas de l ecran. Ces trois
	 * mesures ont d abord ete ecrites EN DUR a deux endroits — la hauteur du
	 * bandeau dans sa propre regle, et la somme dans le calc() du carrousel.
	 * Deux copies d un meme nombre finissent toujours par diverger : il a
	 * suffi d agrandir le bandeau pour qu un lisere blanc apparaisse sous lui.
	 *
	 * Desormais le calc() soustrait les variables. Changer une hauteur ici
	 * suffit, et le premier ecran reste cale.
	 */
	--dgtcp-utilitaire-h: 34px;
	--dgtcp-nav-h: 88px;
	--dgtcp-entete-h: calc(var(--dgtcp-utilitaire-h) + var(--dgtcp-nav-h) + 1px);
	--dgtcp-flash-h: 68px;

	/*
	 * HAUTEUR DU CARROUSEL SUR ORDINATEUR.
	 *
	 * Valeur de repli : le Personnalisateur la remplace (réglage « Hauteur sur
	 * ordinateur », dgtcp_carrousel_hauteur_css()). Tablette et téléphone en
	 * prennent 83 % et 67 %, chapitre 17.
	 *
	 * 480 px depuis l'amendement du 20 septembre, contre un plancher de 720
	 * auparavant. Ce plancher tenait au bloc de texte d'alors : 487 px, le
	 * surtitre en pastilles s'étalant sur plusieurs lignes dans 512 px utiles.
	 * Surtitre en 16 px sur une ligne et bloc porté à 880 px, le même texte
	 * complet — surtitre, titre, description, deux boutons — ne fait plus que
	 * 264 px à 1280 px de large (mesuré le 21 septembre).
	 */
	--dgtcp-carrousel-h: 480px;

	/*
	 * De combien les tuiles mordent sur l image. Sur la capture du comite,
	 * la carte passe derriere le bas de l image sur environ un sixieme de sa
	 * hauteur. 60 px ici : au-dela, la rangee remontait sur le bouton de la
	 * diapositive, qu il aurait fallu deplacer d autant plus haut.
	 */
	--dgtcp-tuiles-chevauchement: 60px;

	/*
	 * LARGEUR DU PREMIER ECRAN SUR GRAND ECRAN.
	 *
	 * Mesure a 1852 px de large : l en-tete et le texte du carrousel tenaient
	 * dans 1320 px, les tuiles dans 1600. Il restait 261 px vides de chaque cote
	 * de la barre de navigation — le logo flottait loin du bord, le bouton
	 * « Espace agent » aussi.
	 *
	 * Barre utilitaire, barre de navigation, texte du carrousel et rangee de
	 * tuiles partagent desormais cette largeur : leurs bords tombent au meme
	 * endroit, et le logo s aligne sur la premiere tuile. Les sections
	 * suivantes gardent leurs 1320 px — des lignes de texte plus longues s y
	 * liraient moins bien.
	 *
	 * Sous 1792 px de large, le conteneur occupe deja tout l ecran : ce plafond
	 * n y change rien.
	 */
	--dgtcp-conteneur-large: 1760px;

	/*
	 * Marge minimale entre le bord de l ecran et ce conteneur large.
	 *
	 * Sans elle, sur un portable, le plafond de 1760 px depassait l ecran : le
	 * conteneur prenait toute la largeur et le logo tombait a 16 px du bord —
	 * mesure a 1440 px, contre 76 px avant l elargissement. On corrigeait un
	 * vide sur grand ecran en creant un tassement sur les ecrans moyens.
	 *
	 * ELLE EST PROGRESSIVE, ET NON FIXE.
	 *
	 * 40 px d emblee coutaient trop pres de la bascule mobile : a 1200 px, le
	 * conteneur tombait a 1110 px et le menu passait sur deux lignes (176 px de
	 * haut au lieu de 88). Sans marge, il tenait sur une ligne avec 64 px de
	 * libre de chaque cote — le menu ne peut pas payer 40 px sous ~1300 px.
	 *
	 * Elle part donc de 0 a 1200 px et atteint 40 px a 1400 px, un pixel de
	 * marge pour cinq pixels d ecran gagnes. Pas de saut de mise en page a une
	 * largeur donnee.
	 */
	--dgtcp-marge-ecran: clamp(0px, calc((100vw - 1200px) / 5), 40px);

	--dgtcp-portail-fond: #ffffff;
	--dgtcp-portail-alterne: #f7f5f6;
	--dgtcp-portail-carte: #ffffff;
	--dgtcp-portail-rule: rgba(26, 20, 24, 0.09);



	/*
	 * RESPIRATION VERTICALE DES SECTIONS DE L ACCUEIL.
	 *
	 * Chaque section posait sa propre valeur — 3,5 rem pour les blocs courants,
	 * 4,5 rem pour les chiffres cles et les secteurs regules. Deux sections qui
	 * se suivent cumulant leurs respirations, cela faisait 112 a 128 px de vide
	 * entre deux contenus. Mesure sur la page entiere : 680 px de respiration.
	 *
	 * Le client a demande de resserrer. 2,5 rem et 3 rem ramenent l ecart entre
	 * deux sections a 80 ou 88 px — un tiers de moins — sans que les blocs se
	 * touchent.
	 *
	 * DEUX VALEURS ET NON UNE : les chiffres cles et les secteurs regules sont
	 * bordes d un filet et portent un fond propre ; serres au meme pas que les
	 * autres, leurs filets viendraient trop pres du texte.
	 *
	 * Declarees ici et non section par section : le jour ou le rythme se
	 * rediscute, il se change en deux lignes.
	 */
	--dgtcp-section-respiration: 2.5rem;
	--dgtcp-section-respiration-ample: 3rem;

	/*
	 * Alias, pour que les blocs repris de la variante A fonctionnent tels
	 * quels. Les renommer dans le CSS importe aurait multiplie les occasions
	 * de se tromper, et rendu illisible toute comparaison ulterieure entre les
	 * deux maquettes.
	 */
	--dgtcp-white: var(--dgtcp-portail-carte);
	--dgtcp-rule: var(--dgtcp-portail-rule);

	/* Couleurs nationales, en rappel uniquement. */
	--dgtcp-flag-red: #ef2b2d;
	--dgtcp-flag-green: #009e49;
	--dgtcp-flag-yellow: #fcd116;
}

/* =========================================================================
 * 2. Section « Chiffres clés »
 *
 * Version sobre. La première mouture posait un degrade encre -> magenta sur
 * toute la largeur, haut de 477 px : le bloc criait plus fort que le
 * carrousel qui le precede et que les services qui le suivent, alors qu'il ne
 * porte que quatre nombres.
 *
 * Le magenta ne sert plus de fond mais d'ACCENT, reserve aux chiffres
 * eux-memes. Le bloc repose sur le blanc des cartes du portail, separe du
 * reste par deux filets. Hauteur divisee par pres de deux.
 * ====================================================================== */

.dgtcp-key-figures {
	padding: 2.75rem 0;
	background: var(--dgtcp-portail-carte);
	border-top: 1px solid var(--dgtcp-portail-rule);
	border-bottom: 1px solid var(--dgtcp-portail-rule);
	color: var(--dgtcp-ink);
}

.dgtcp-key-figures__title {
	margin: 0 0 2rem;
	text-align: center;
	color: var(--dgtcp-ink);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
}

/* Un filet magenta court, plutot que le jaune du drapeau : sur fond clair, le
   jaune ne se voyait pas, et il faisait un troisieme accent de couleur dans
   une section qui n'en demande qu'un. */
.dgtcp-key-figures__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 0.75rem auto 0;
	border-radius: 2px;
	background: var(--dgtcp-magenta);
}

/*
 * Grille fluide : 4 colonnes en grand ecran, 2 sur tablette ET SUR MOBILE.
 *
 * Le seuil est a 140 px et non 200 : a 200, la grille retombait a une seule
 * colonne sur un ecran de 375 px et la section atteignait 689 px de haut pour
 * quatre nombres. Deux colonnes la ramenent a moitie, et un nombre de deux ou
 * trois chiffres se lit tres bien dans 140 px.
 */
.dgtcp-key-figures__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * LA CARTE DOIT POUVOIR RETRECIR SOUS SON CONTENU.
 *
 * Un element de grille vaut « min-width: auto » par defaut : il refuse de
 * passer sous la largeur de ce qu il contient. « 2000 + » compose a 2,5 rem
 * mesure environ 125 px, plus 2 rem de marges interieures : la colonne etait
 * donc poussee au-dela des 140 px demandes, et la rangee debordait l ecran sur
 * telephone au lieu de se replier.
 */
.dgtcp-key-figures__item {
	min-width: 0;
}

/*
 * Plus de carte encadree : un simple filet vertical separe les colonnes, et
 * disparait sur la premiere de chaque rangee. C'est la presentation la plus
 * discrete qui garde les quatre nombres lisibles comme un ensemble.
 */
.dgtcp-key-figures__item {
	padding: 0.5rem 1rem;
	text-align: center;
}

.dgtcp-key-figures__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta);
	font-size: 1rem;
}

.dgtcp-key-figures__value {
	margin: 0 0 0.25rem;
	color: var(--dgtcp-magenta);
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
}

.dgtcp-key-figures__suffix {
	color: var(--dgtcp-magenta-light);
}

.dgtcp-key-figures__label {
	margin: 0;
	color: var(--dgtcp-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* =========================================================================
 * 3. Fondations du portail
 *
 * La variante B n'est pas une page vitrine mais un PORTAIL : beaucoup
 * d'information par écran, peu d'effets. Le fond gris très clair remplace le
 * blanc du thème, de sorte que chaque bloc se détache sans qu'il faille lui
 * dessiner une bordure — on gagne en densité sans gagner en bruit.
 * ====================================================================== */

/*
 * Corps de texte aere et adouci. Releve sur fasoarzeka.bf : 16 px, interligne
 * 1,8, et un texte gris plutot que noir. Le noir pur sur blanc fatigue a la
 * lecture longue ; l'encre reste reservee aux titres, ou elle porte.
 */
body {
	background-color: var(--dgtcp-portail-fond);
	color: var(--dgtcp-texte);
	/*
	 * PAS DE font-size ICI. Le theme imprime « body { font-size: 16px } » dans
	 * une balise <style> EN LIGNE, generee depuis le Customizer
	 * (abiz/core/core.php, ~ligne 100). Une balise en ligne sort apres les
	 * feuilles liees : a specificite egale, elle gagne toujours, et la regle
	 * ecrite ici restait sans effet.
	 *
	 * La taille se regle donc par le reglage du theme lui-meme —
	 * « abiz_body_font_size », porte a 17 px pour cette variante. Le SCRP peut
	 * la modifier depuis Apparence > Personnaliser, sans developpeur, ce
	 * qu'exige le cahier des charges. Surencherir en specificite lui aurait
	 * retire ce controle.
	 */
	line-height: 1.75;
}

/*
 * Les titres portent l'encre — mais SEULEMENT dans nos propres sections.
 *
 * Une regle generale « h1..h6 { color: encre } » a existe ici, et elle a
 * rendu le titre « Secteurs regules » INVISIBLE : la section correspondante
 * du theme a un fond sombre et comptait sur un titre blanc. Noir sur noir,
 * sans le moindre avertissement.
 *
 * La lecon vaut au-dela de ce cas : dans un theme enfant, une regle qui vise
 * une balise nue s'applique aussi a tout ce que le parent affiche, y compris
 * ce qu'on n'a pas sous les yeux au moment ou on l'ecrit.
 */
.dgtcp-bloc h1,
.dgtcp-bloc h2,
.dgtcp-bloc h3,
.dgtcp-key-figures h2,
.dgtcp-nav h1 {
	color: var(--dgtcp-ink);
}

/*
 * Le thème plafonne son conteneur à 1140 px. Un portail à trois colonnes
 * d'actualités y devient étriqué : 1320 px laissent respirer les colonnes
 * sans que la ligne de texte devienne trop longue à lire.
 */
.dgtcp-portail .container,
.dgtcp-bloc .container {
	max-width: 1320px;
}

/*
 * L en-tete et le texte du carrousel passent a la largeur du premier ecran —
 * voir --dgtcp-conteneur-large.
 *
 * #main-header et non .dgtcp-portail : la regle ne doit viser que l en-tete,
 * quel que soit l usage futur de cette classe. La specificite (1,2,0) passe
 * au-dessus de la regle commune ci-dessus.
 *
 * Le carrousel etait regle par le theme : .container a 1500 px au-dela de
 * 1400 px (abiz/assets/css/responsive.css), specificite (0,1,0). Le texte
 * garde sa gouttiere de 104 px (chapitre 25) : il ne passe donc pas sous le
 * chevron gauche, qui occupe x 43 a 87.
 */
#main-header.dgtcp-portail .container,
.home .slider-section .main-slider .container {
	max-width: var(--dgtcp-conteneur-large);
}

/*
 * Au-dessus de 1200 px, la barre de bureau est affichee : le conteneur large
 * ne descend jamais sous une marge d ecran de 40 px. Sur grand ecran, c est
 * le plafond de 1760 px qui joue ; sur un portable, c est la marge — et le
 * logo reste a la meme distance du bord a toutes les tailles.
 *
 * Borne a 1200 px : en dessous vivent l en-tete mobile et les tuiles
 * empilees, a qui 80 px de largeur en moins couteraient cher sur un
 * telephone.
 */
@media (min-width: 1200px) {
	#main-header.dgtcp-portail .container,
	.home .slider-section .main-slider .container {
		max-width: min(var(--dgtcp-conteneur-large), calc(100% - 2 * var(--dgtcp-marge-ecran)));
	}
}

/* =========================================================================
 * 4. Barre utilitaire — le filet le plus haut
 *
 * Quatre postes sur une ligne : écrire, appeler, trouver, suivre. À gauche les
 * trois coordonnées, à droite les réseaux sociaux, séparés par des filets
 * verticaux.
 *
 * POURQUOI LES FILETS SONT DES BORDURES ET NON DES PSEUDO-ÉLÉMENTS
 *
 * Une bordure gauche posée sur « li + li » occupe toute la hauteur de la
 * ligne sans qu'on ait à la mesurer, et se retire d'elle-même sur le premier
 * élément. Un séparateur en ::before aurait demandé une hauteur en dur — donc
 * à refaire à chaque changement de --dgtcp-utilitaire-h.
 * ====================================================================== */

.dgtcp-utilitaire {
	background: var(--dgtcp-ink);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.dgtcp-utilitaire__interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	min-height: var(--dgtcp-utilitaire-h);
}

.dgtcp-utilitaire__liens,
.dgtcp-utilitaire__reseaux {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-utilitaire__liens > li,
.dgtcp-utilitaire__reseaux > li {
	display: flex;
	align-items: center;
}

.dgtcp-utilitaire__liens > li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Le groupe des réseaux est détaché du reste par le même filet. */
.dgtcp-utilitaire__reseaux {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: 0.5rem;
}

/* Spécificité (0,2,1) : le thème cible les liens par a:not(.comments-count),
   de spécificité (0,1,1), qu'une simple classe ne battrait pas. */
.dgtcp-utilitaire .dgtcp-utilitaire__liens a,
.dgtcp-utilitaire .dgtcp-utilitaire__inerte {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 1.1rem;
	color: #fff;
	text-decoration: none;
}

/* Le premier poste s'aligne sur le bord du conteneur, comme le logo en
   dessous : sans cela, la barre paraîtrait décalée d'une gouttière. */
.dgtcp-utilitaire .dgtcp-utilitaire__liens > li:first-child a,
.dgtcp-utilitaire .dgtcp-utilitaire__liens > li:first-child .dgtcp-utilitaire__inerte {
	padding-left: 0;
}

.dgtcp-utilitaire__liens i {
	color: var(--dgtcp-magenta-light);
	font-size: 0.875rem;
}

.dgtcp-utilitaire .dgtcp-utilitaire__liens a:hover,
.dgtcp-utilitaire .dgtcp-utilitaire__liens a:focus-visible {
	color: var(--dgtcp-magenta-light);
	text-decoration: underline;
}

/*
 * Les réseaux : une pastille par compte.
 *
 * Le fond est un blanc très dilué plutôt qu'une couleur pleine — la consigne
 * est un magenta « fin et raffiné », pas un magenta à tous les coins. Il ne
 * s'allume qu'au survol, et c'est là qu'il désigne.
 *
 * 28 px de pastille pour une icône : le rapport de contraste du blanc sur le
 * magenta est de 4,1:1, au-dessus du 3:1 exigé d'un élément graphique.
 */
.dgtcp-utilitaire__reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 0.15rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-utilitaire .dgtcp-utilitaire__reseaux a {
	color: #fff;
}

.dgtcp-utilitaire .dgtcp-utilitaire__reseaux a:hover,
.dgtcp-utilitaire .dgtcp-utilitaire__reseaux a:focus-visible {
	background: var(--dgtcp-magenta);
	color: #fff;
}

/* =========================================================================
 * 5. Barre de navigation — logo, rubriques, actions
 *
 * Une seule barre, blanche. Le magenta n'y sert qu'à désigner : l'onglet
 * survolé, l'onglet courant. Une barre entièrement magenta a existé ici — elle
 * mettait une couleur forte sur toute la largeur de l'écran, à l'endroit le
 * plus regardé de la page, et écrasait tout ce qui venait ensuite.
 *
 * TROIS ZONES, ET LES RUBRIQUES AU MILIEU
 *
 *   [ logo ]        [ La DGTCP  E-services  Réformes … ]        [ 🔍  agent ]
 *
 * Le logo et le bloc d'actions gardent leur largeur utile ; la zone du milieu
 * prend tout le reste (flex: 1) et y centre sa liste. Les onglets se posent
 * donc au centre de l'espace DISPONIBLE, et non au centre de l'écran : quand
 * le logo et le bloc d'actions n'ont pas la même largeur, le décalage est de
 * quelques dizaines de pixels. Le centrage à l'écran exact demanderait de
 * sortir la liste du flux — au prix d'un chevauchement dès que les rubriques
 * s'allongent, ce qui est le risque le plus probable ici.
 * ====================================================================== */

/*
 * Le fond est redevenu blanc le 2 octobre au soir. Il etait passe au gris tres
 * clair le matin, pour detacher la barre du contenu de la page quand un bandeau
 * institutionnel la surmontait ; ce bandeau retire, la distinction n a plus
 * d objet. Le filet du bas suffit a tenir la barre.
 */
.main-navigation.dgtcp-navigation {
	min-height: 0;
	background: var(--dgtcp-portail-carte);
	border-bottom: 1px solid var(--dgtcp-portail-rule);
}

/*
 * space-between : le logo est plaque a l extreme gauche, le menu a l extreme
 * droite, et l espace disponible se met entierement entre les deux. Un
 * margin-left: auto sur le menu donnait le meme resultat, mais il le devait a
 * un effet de bord ; ici l intention se lit dans la regle.
 */
/*
 * LE MENU SUIT LE PICTOGRAMME, LES ACTIONS PARTENT A DROITE.
 *
 * « space-between » repartissait l espace a parts egales entre les trois
 * elements : le menu flottait au milieu, loin du filet qui le precede. La
 * maquette du 2 octobre le colle au pictogramme d accueil, et renvoie la
 * recherche et « Espace agent » a l extremite droite.
 *
 * « margin-left: auto » sur le bloc d actions plutot qu un « space-between » :
 * il n y a qu un seul espace a ouvrir, et il est a cet endroit precis.
 */
.dgtcp-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	min-height: var(--dgtcp-nav-h);
}

.dgtcp-nav .dgtcp-nav__actions {
	margin-left: auto;
}

.dgtcp-nav__marque {
	flex-shrink: 0;
}

/*
 * Le bloc <nav> herite du theme s etire sur tout l espace restant, mais la
 * liste des onglets, elle, resterait calee a gauche A L INTERIEUR de lui — on
 * mesurait 470 px d onglets dans un bloc de 1151. Il faut donc dire deux
 * choses : que le bloc prend le reste de la rangee (flex: 1), et ou sa liste
 * se pose dedans (center).
 *
 * min-width: 0 n est pas decoratif : sans lui, un element flex refuse de
 * passer sous la largeur de son contenu, et une rubrique de plus ferait
 * deborder la rangee au lieu de la comprimer.
 */
/*
 * LE MENU EST CENTRE DANS L ESPACE DISPONIBLE.
 *
 * Il a ete cale a gauche le temps du bandeau institutionnel, la barre portant
 * alors un simple pictogramme d accueil. Le logo lui est revenu : il tient le
 * bord gauche, et centrer evite que les onglets paraissent lui coller.
 *
 * « flex: 1 » pour que la liste occupe toute la place restante, et
 * « min-width: 0 » pour qu elle puisse se comprimer plutot que deborder la
 * rangee.
 */
.dgtcp-nav__menu {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
}

/* =========================================================================
 * 5 bis a. Les sous-menus
 *
 * Le cahier des charges autorise DEUX NIVEAUX, et chaque rubrique a ses
 * sous-rubriques. Le walker du theme parent emet deja le balisage qu il faut —
 * li.dropdown > a.nav-link + ul.dropdown-menu — mais il l a prevu pour le
 * JavaScript de Bootstrap, qui n est pas charge ici. Le depliage se fait donc
 * en CSS.
 *
 * VISIBILITY PLUTOT QUE DISPLAY
 *
 * Un menu ferme par « display: none » ne peut pas etre anime, et surtout il
 * disparait du parcours au clavier — ce qui est le comportement voulu — mais
 * il reapparait d un coup, sans transition. visibility: hidden fait les deux :
 * il retire l element du parcours de tabulation ET se transitionne. C est ce
 * qui permet de deplier au survol comme au focus, sans une ligne de script.
 *
 * :focus-within est ce qui rend le menu utilisable au clavier : des qu un lien
 * du sous-menu recoit le focus, le parent le sait et garde le panneau ouvert.
 * ====================================================================== */

.dgtcp-navigation .main-navbar .main-menu > li.menu-item-has-children {
	position: relative;
}

/*
 * LA LARGEUR SUIT LE PLUS LONG INTITULE
 *
 * A 16 rem fixes, « Modernisation du systeme d information » passait sur deux
 * lignes : son entree mesurait 62 px quand les trois autres en faisaient 41,
 * et le panneau des Reformes perdait l alignement de sa liste — c est
 * l anomalie relevee par le client le 23 septembre.
 *
 * width: max-content donne au panneau la largeur de son intitule le plus long,
 * 16 rem restant le plancher pour que les panneaux courts gardent la meme
 * allure. Le plafond de 22 rem evite qu un intitule tres long ne pousse le
 * panneau hors de l ecran ; au-dela, white-space: normal le laisse revenir a
 * la ligne plutot que deborder.
 */
.dgtcp-navigation .main-navbar .main-menu .dropdown-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	width: max-content;
	min-width: 16rem;
	max-width: 22rem;
	margin: 0;
	padding: 0.5rem 0;
	border: 1px solid var(--dgtcp-portail-rule);
	border-top: 3px solid var(--dgtcp-magenta);
	border-radius: 0 0 8px 8px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 16px 34px rgba(26, 20, 24, 0.14);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dgtcp-navigation .main-navbar .main-menu > li:hover > .dropdown-menu,
.dgtcp-navigation .main-navbar .main-menu > li:focus-within > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/*
 * Les deux dernieres rubriques ouvrent vers la GAUCHE.
 *
 * Mesure sur 1440 px : « Relation clientele » se termine a 1036 px et un
 * panneau de 16 rem partant de la deborderait sur un ecran plus etroit. On
 * ancre donc les deux derniers a droite, ou ils ont toute la barre devant eux.
 */
.dgtcp-navigation .main-navbar .main-menu > li:nth-last-child(-n + 2) > .dropdown-menu {
	left: auto;
	right: 0;
}

.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li {
	display: block;
}

.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li > a {
	display: block;
	padding: 0.6rem 1.25rem;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: normal;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li > a:hover,
.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li > a:focus-visible {
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
}

/*
 * La sous-rubrique ouverte est designee par un filet magenta a gauche : la
 * couleur seule ne suffit pas, le cahier des charges impose l accessibilite.
 * box-shadow plutot que border, pour ne pas decaler le texte d un pixel.
 */
.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li.current-menu-item > a,
.dgtcp-navigation .main-navbar .main-menu .dropdown-menu > li.current_page_item > a {
	color: var(--dgtcp-magenta-texte);
	box-shadow: inset 3px 0 0 0 var(--dgtcp-magenta);
}

/*
 * Le chevron du walker n a de sens que sur la barre mobile : sur le bureau,
 * c est le survol qui deplie. Il n est pas masque en display: none mais retire
 * du flux, pour ne pas creer d espace entre les onglets.
 */
.dgtcp-navigation .main-navbar .mobile-collapsed {
	display: none;
}

/*
 * ENTRE 992 ET 1199 PX, LE CHEVRON MOBILE DISPARAISSAIT.
 *
 * Le walker du parent lui pose la classe « d-lg-none », qui le masque des
 * 992 px — parce que le parent bascule sur son menu de bureau a cette
 * largeur. Cette variante, elle, bascule a 1200 px (d-xl-block, voir
 * theme-header.php) : entre les deux, le menu mobile etait affiche mais ses
 * sous-menus n avaient plus rien pour s ouvrir. Sur une tablette de 1024 px,
 * dix-huit sous-rubriques etaient donc inatteignables.
 *
 * !important est ici inevitable : les utilitaires d affichage de Bootstrap
 * sont eux-memes declares en !important, rien d autre ne les bat.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.main-mobile-build .mobile-collapsed {
		display: inline-block !important;
	}
}

/* Un depliage anime ne s impose pas a qui a demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-navigation .main-navbar .main-menu .dropdown-menu {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
 * 5 bis. Les actions de droite — rechercher, agir, entrer
 *
 * LA HIERARCHIE A ETE INVERSEE LE 1er NOVEMBRE.
 *
 * « Espace agent » etait le seul bouton de l en-tete, et il etait plein
 * magenta : le geste le plus visible du site s adressait donc aux agents du
 * Tresor, quand le site est fait pour les usagers. Il passe en FILAIRE, et
 * « Services en ligne » prend le magenta plein.
 *
 * UN SEUL APLAT MAGENTA DANS LA BARRE, ET C EST LE POINT.
 *
 * Deux boutons pleins ne feraient pas une hierarchie, ils feraient deux
 * boutons. Le filaire dit « second » sans dire « desactive » : son texte est
 * au magenta sombre (#b30069, 6,7:1 sur blanc), son contour aussi, et au
 * survol il se remplit — le geste reste franc.
 * ====================================================================== */

.dgtcp-nav__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Le prefixe est .dgtcp-portail, la racine de l en-tete, et non .dgtcp-nav :
 * les memes boutons figurent AUSSI dans la barre mobile, qui n est pas dans
 * .dgtcp-nav. La specificite (0,2,0) reste au-dessus du a:not(...) du theme,
 * qui vaut (0,1,1).
 */
.dgtcp-portail .dgtcp-nav__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 40px;
	/*
	 * 1 rem et non 1,15 : la rangee porte un bouton de plus depuis le 1er
	 * novembre, et chaque pixel rendu ici l est au menu. Mesure : 5 px par
	 * bouton, 10 px pour les deux.
	 */
	padding: 0 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: transparent;
	color: var(--dgtcp-ink);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* --- Le geste de l usager : plein ---------------------------------------- */

.dgtcp-portail .dgtcp-nav__action--eservices {
	border-color: var(--dgtcp-magenta-aplat);
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
}

/*
 * Au survol il FONCE, il ne change pas de famille. Le magenta de marque
 * (#f0008d) sous du blanc ne donne que 4,13:1 : il sert d ornement, jamais de
 * fond a un caractere. Voir la regle du systeme, dans :root.
 */
.dgtcp-portail .dgtcp-nav__action--eservices:hover,
.dgtcp-portail .dgtcp-nav__action--eservices:focus-visible {
	border-color: var(--dgtcp-ink);
	background: var(--dgtcp-ink);
	color: #fff;
}

/* --- Le geste de l agent : filaire --------------------------------------- */

.dgtcp-portail .dgtcp-nav__action--agent {
	border-color: var(--dgtcp-magenta-aplat);
	background: transparent;
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-portail .dgtcp-nav__action--agent:hover,
.dgtcp-portail .dgtcp-nav__action--agent:focus-visible {
	border-color: var(--dgtcp-magenta-texte);
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

/*
 * LE FOCUS CLAVIER NE PEUT PAS ETRE LA SEULE COULEUR.
 *
 * Les deux boutons changent deja de fond au survol : un focus qui ne ferait
 * que cela ne se distinguerait pas d un survol a la souris, et ne se verrait
 * pas du tout pour qui ne percoit pas ce magenta. Un anneau, donc, pose a
 * l exterieur du trace.
 */
.dgtcp-portail .dgtcp-nav__action:focus-visible {
	outline: 2px solid var(--dgtcp-ink);
	outline-offset: 2px;
}

/*
 * SOUS 1400 PX, LES BOUTONS RENDENT LEURS PROPRES PIXELS.
 *
 * LE MENU N EST PAS TOUCHE — et il ne peut pas l etre : le theme le resserre
 * deja a 0,55 rem par onglet entre 1200 et 1400 px (chapitre 5 quinquies).
 * Une regle de plus y serait sans effet, et la consigne du 1er novembre
 * l interdit de toute facon.
 *
 * Restait a prendre sur ce qui vient d arriver. Apres le libelle de
 * « Espace agent » et le coefficient du champ de recherche, il manquait
 * encore de la marge aux deux largeurs les plus serrees :
 *
 *   1340 px  menu dispo 705  rubriques 681   24 px
 *   1200 px  menu dispo 694  rubriques 681   13 px
 *
 * Treize pixels ne sont pas une marge : il suffit que Source Sans Pro n arrive
 * pas et que la police de secours soit d un pour cent plus large pour que la
 * barre passe a deux etages chez le visiteur, et nulle part chez nous.
 *
 * Deux retraits, qui ne coutent rien a personne : l ecart entre les actions,
 * et le retrait lateral du bouton plein. Onze pixels.
 *
 * LE SEUIL EST CELUI DU LIBELLE DE « ESPACE AGENT », 1440 PX, ET PAS 1400.
 *
 * Essaye d abord a 1400, il laissait un creux : a 1400 px tout juste, le
 * theme n a pas encore resserre ses onglets — il ne le fait que SOUS 1400 —
 * et ces retraits ne s appliquaient pas encore non plus. Mesure : 15 px de
 * marge, le pire point de toute la plage. Les deux regles partagent donc le
 * meme seuil, et la plage n a plus de creux. Marge restante du menu, mesuree
 * d un bout a l autre de la plage de bureau :
 *
 *   1920  320 px    1560   73 px    1399   74 px    1280   75 px
 *   1600  109 px    1500  129 px    1366   54 px    1240   51 px
 *   1559  188 px    1440   69 px    1340   38 px    1200   27 px
 *
 *   plus 1400 px : 29 px — le pire point, juste au-dessus du palier ou le
 *   theme resserre ses onglets.
 */
@media (max-width: 1439.98px) {
	.dgtcp-nav .dgtcp-nav__actions {
		gap: 0.25rem;
	}

	.dgtcp-nav .dgtcp-nav__action--eservices {
		padding: 0 0.8rem;
	}
}

/*
 * SOUS 1440 PX, « ESPACE AGENT » SE REDUIT A SON PICTOGRAMME.
 *
 * LE CHIFFRAGE, PARCE QUE C EST LUI QUI DECIDE. La rangee de bureau porte le
 * logo (113 px), six rubriques (726 px a pleine taille), le champ de
 * recherche, deux boutons et les armoiries. Mesure apres l ajout du second
 * bouton, les deux libelles affiches :
 *
 *   1600 px  menu dispo 788  rubriques 726   tient
 *   1440 px  menu dispo 647  rubriques 726   MANQUE 79 px
 *   1366 px  menu dispo 596  rubriques 681   MANQUE 85 px
 *   1280 px  menu dispo 554  rubriques 681   MANQUE 127 px
 *
 * Sous le seuil, le menu repassait a deux lignes et la barre doublait de
 * hauteur — 89 px a 177 px. Il fallait donc rendre de la place, et choisir a
 * qui la prendre. Trois candidats :
 *
 *   - LE MENU. Exclu : la consigne du 1er novembre est de n y pas toucher.
 *   - LES ARMOIRIES. Elles couteraient 72 px, et la meme consigne demande de
 *     les AGRANDIR. Les effacer sur un portable de 1366 px — la taille la
 *     plus repandue — pour cette raison serait une reponse a l envers.
 *   - LE LIBELLE DE « ESPACE AGENT ». Il rend 102 px, et c est le seul des
 *     trois que la consigne demande justement de rendre moins voyant. La
 *     barre mobile le fait deja, pour la meme raison de largeur.
 *
 * Le bouton reste, filaire et magenta ; seul son texte sort du flux. Il n est
 * PAS masque : « clip-path » le laisse dans l arbre d accessibilite, de sorte
 * qu un lecteur d ecran annonce toujours « Espace agent ».
 *
 * LE SEUIL EST REDESCENDU DE 1560 A 1440 PX, LE MEME JOUR.
 *
 * Il valait 1560 le temps que la recherche occupe la rangee. Repliee sur sa
 * loupe (objectif 3 bis), elle est passee de 140-230 px a 40 : cent pixels
 * rendus au menu. Marge restante mesuree apres le repli :
 *
 *   1920  453 px    1559  288 px    1366  154 px    1280  175 px
 *   1600  213 px    1440  169 px    1340  138 px    1200  127 px
 *   1560  173 px    1400  129 px    1339  211 px
 *
 * Rendre le libelle coute 102 px, et les deux retraits 11 de plus. A 1440 px
 * il reste donc 56 px de marge — assez pour absorber une police de secours un
 * peu plus large. A 1400 px il n en resterait que 16, et seize pixels ne sont
 * pas une marge : la barre passerait a deux etages chez le visiteur, et nulle
 * part chez nous.
 */
@media (max-width: 1439.98px) {
	.dgtcp-portail .dgtcp-nav__actions:not(.dgtcp-nav__actions--compact) .dgtcp-nav__action--agent {
		width: 40px;
		padding: 0;
	}

	.dgtcp-portail .dgtcp-nav__actions:not(.dgtcp-nav__actions--compact) .dgtcp-nav__action--agent .dgtcp-nav__action-texte {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* =========================================================================
 * 5 ter. La recherche, toujours ouverte
 *
 * Sur bureau, un champ en pilule a cote du bouton agent, la loupe a
 * l interieur. Sa largeur suit l ecran : la barre porte deja le logo et six
 * rubriques, et entre 1200 et 1400 px chaque pixel pris au champ l est au
 * menu. Mesure : a 1200 px, la rangee tient sans passer a la ligne.
 *
 * Sur mobile, une rangee pleine largeur sous la barre (d-xl-none dans le
 * HTML), qui defile avec la page au lieu d alourdir la barre fixee.
 * ====================================================================== */

/*
 * LE PLANCHER NE DESCEND PAS SOUS 140 PX, ET CE CHIFFRE EST MESURE.
 *
 * La rangee porte un bouton de plus depuis le 1er novembre, et il a fallu
 * rendre de la place. Le champ a d abord ete ramene a 104 px : a cette
 * largeur, capture a l appui, l espace reserve s affichait « Rechercl » —
 * le champ ne disait plus ce qu il attendait.
 *
 * Le calcul : « Rechercher… » mesure 79 px dans Source Sans Pro a 14 px, le
 * champ porte 16 px de retrait a gauche et 44 px a droite pour degager la
 * loupe. Soit 139 px. Le plancher est donc a 140, et il ne se negocie pas.
 *
 * Ce qui change : le coefficient, de 12vw a 9vw. Au-dessus de 1560 px le
 * champ grandit moins vite, ce qui rend au menu une centaine de pixels sur un
 * grand ecran sans jamais tronquer quoi que ce soit. Le plafond de 230 px ne
 * bouge pas.
 */
/*
 * L ENVELOPPE GARDE LA PLACE, LE FORMULAIRE S EN ECHAPPE.
 *
 * C est tout le principe du depliage « en place » : l enveloppe occupe dans
 * la rangee la largeur du BOUTON, et rien d autre ; le formulaire est pose en
 * absolu, cale sur son bord droit, et grandit vers la gauche par-dessus le
 * menu. Aucun element de l en-tete ne bouge a l ouverture.
 *
 * SANS SCRIPT, L ENVELOPPE VAUT LA LARGEUR DU CHAMP OUVERT. La classe
 * « --repliable » n est posee que par assets/js/recherche.js : sans lui, le
 * champ reste visible et utilisable — c est un formulaire GET vers
 * home_url(), celui que WordPress attend pour « ?s= ». Un bouton qui ne
 * deplierait rien serait un piege.
 */
.dgtcp-recherche-barre {
	position: relative;
	flex: 0 0 auto;
	width: clamp(140px, 9vw, 230px);
	height: 40px;
	margin: 0;
}

.dgtcp-recherche-barre__form {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	width: 100%;
	height: 40px;
}

/* --- Avec script : replie sur sa loupe ----------------------------------- */

.dgtcp-recherche-barre--repliable {
	width: 40px;
}

.dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__form {
	width: 40px;
	transition: width 0.25s ease;
}

/*
 * OUVERT : la largeur vient du script, qui la MESURE sur le bord gauche d un
 * onglet du menu a chaque ouverture et a chaque redimensionnement. Le repli
 * de 240 px ne sert que le temps d un rendu, si le script n a pas encore
 * mesure.
 *
 * Le z-index passe au-dessus du menu, et reste sous les menus deroulants du
 * theme (z-index 999) : un champ ouvert ne doit pas recouvrir un sous-menu
 * deja deplie.
 */
.dgtcp-recherche-barre--repliable[data-ouvert] .dgtcp-recherche-barre__form {
	width: var(--dgtcp-recherche-largeur, 240px);
	z-index: 60;
}

/*
 * Replie, le champ s efface — mais il reste dans le flux : c est lui qui
 * porte la pilule, le fond et la bordure, et le faire disparaitre du DOM
 * couterait un saut de mise en page a chaque ouverture.
 *
 * « visibility » en plus de l opacite : un champ transparent reste atteignable
 * a la tabulation, et le focus se poserait dans un champ invisible.
 */
.dgtcp-recherche-barre--repliable:not([data-ouvert]) .dgtcp-recherche-barre__champ {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}

.dgtcp-recherche-barre--repliable[data-ouvert] .dgtcp-recherche-barre__champ {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease 0.1s;
}

/*
 * Replie, la loupe occupe toute l enveloppe : un disque magenta de 40 px, la
 * hauteur des deux boutons voisins. Ouverte, elle reprend sa place DANS la
 * pilule, 32 px cales a droite — c est la meme loupe, elle ne fait que
 * changer de taille.
 */
.dgtcp-portail .dgtcp-recherche-barre--repliable:not([data-ouvert]) .dgtcp-recherche-barre__envoi {
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 1rem;
}

.dgtcp-portail .dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__envoi {
	transition: background-color 0.2s ease, width 0.25s ease, height 0.25s ease, top 0.25s ease, right 0.25s ease;
}

/*
 * MOUVEMENT REFUSE : le champ s ouvre d un coup. Il s ouvre tout de meme —
 * c est l animation qu on retire, pas la fonction.
 */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__form,
	.dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__champ,
	.dgtcp-portail .dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__envoi {
		transition: none;
	}
}

/*
 * SUR LA BARRE MOBILE, 44 PX — la cible tactile des deux boutons voisins.
 */
@media (max-width: 1199.98px) {
	/*
	 * SUR LA BARRE MOBILE, LA LOUPE PASSE EN DERNIER.
	 *
	 * Le champ s ouvre vers la gauche depuis le bord droit de son enveloppe :
	 * la largeur qu il peut prendre est donc tout ce qui separe le logo de
	 * cette enveloppe. Loupe en PREMIERE position, mesure a 390 px : 76 px —
	 * moins que les 139 px dont l espace reserve « Rechercher… » a besoin.
	 *
	 * En dernier, juste avant le hamburger, le champ dispose de 180 px et
	 * recouvre les deux boutons d action le temps de la saisie. Il les
	 * RECOUVRE seulement : il est pose en absolu, rien ne se deplace, et ils
	 * reviennent a la fermeture.
	 *
	 * L ordre de BUREAU ne change pas : la maquette place la recherche entre
	 * le menu et « Services en ligne ».
	 */
	.dgtcp-nav__actions--compact .dgtcp-recherche-barre {
		order: 1;
		height: 44px;
	}

	.dgtcp-nav__actions--compact .dgtcp-recherche-barre--repliable {
		width: 44px;
	}

	.dgtcp-nav__actions--compact .dgtcp-recherche-barre__form {
		height: 44px;
	}

	.dgtcp-nav__actions--compact .dgtcp-recherche-barre--repliable .dgtcp-recherche-barre__form {
		width: 44px;
	}

	.dgtcp-nav__actions--compact .dgtcp-recherche-barre--repliable[data-ouvert] .dgtcp-recherche-barre__form {
		width: var(--dgtcp-recherche-largeur, 240px);
	}

	.dgtcp-portail .dgtcp-nav__actions--compact .dgtcp-recherche-barre--repliable:not([data-ouvert]) .dgtcp-recherche-barre__envoi {
		width: 44px;
		height: 44px;
	}

	.dgtcp-portail .dgtcp-nav__actions--compact .dgtcp-recherche-barre__champ {
		height: 44px;
	}
}

/*
 * Entre 1200 et 1400 px, le champ prend sa place au menu : sans cette marge
 * resserree, les six rubriques passaient sur deux lignes a 1280 px (barre de
 * 176 px au lieu de 88). Mesure apres coup : une seule ligne de 1200 a 1400.
 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.dgtcp-nav .main-navbar .main-menu > li.menu-item > a {
		padding-right: 0.55rem;
		padding-left: 0.55rem;
	}
}

/*
 * LE CHAMP A DISPARU QUAND LA BARRE EST PASSEE AU GRIS.
 *
 * Il etait en « portail-alterne » (#f7f5f6) sur une barre blanche : deja peu
 * marque, mais visible. La barre passee a #f3f4f6 le 2 octobre, les deux
 * teintes se sont rejointes — mesure au DOM, 1,01:1. Le champ n existait plus
 * pour l oeil, et son contour a 9 % d opacite n y changeait rien.
 *
 * Fond BLANC, qui le detache du gris de la barre, et contour a 3,12:1 — le
 * seuil que les regles d accessibilite demandent au pourtour d un champ de
 * saisie (critere 1.4.11). Le blanc seul ne donnait que 1,10:1 : c est la
 * bordure qui porte le contraste, le fond ne fait que l accompagner.
 */
.dgtcp-portail .dgtcp-recherche-barre__champ {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 0; /* le theme impose 50 px a tout champ */
	margin: 0;
	/*
	 * LES RETRAITS SONT CALCULES SUR L ESPACE RESERVE, PAS CHOISIS.
	 *
	 * « Rechercher… » mesure 79 px dans Source Sans Pro a 14 px. Le champ
	 * descend a 140 px de large sur les ecrans serres (chapitre 5 ter) : il
	 * reste donc 61 px pour les deux retraits. A 2,75 rem + 1 rem — 44 + 16 —
	 * il n en restait que 80 pour 79 px de texte, et la capture montrait
	 * « Recherche » sans sa fin.
	 *
	 * 2,5 rem + 0,875 rem, soit 40 + 14 : 86 px de place pour 79 px de texte.
	 * La loupe occupe les 36 derniers pixels (32 px de diametre, 4 px de
	 * marge) : les 40 px de retrait a droite lui laissent encore 4 px.
	 */
	padding: 0 2.5rem 0 0.875rem;
	border: 1px solid #8a8a90;
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 0.875rem;
	box-shadow: none;
}

.dgtcp-portail .dgtcp-recherche-barre__champ::placeholder {
	color: var(--dgtcp-muted);
	opacity: 1;
}

.dgtcp-portail .dgtcp-recherche-barre__champ:focus {
	border-color: var(--dgtcp-magenta);
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 1px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-portail .dgtcp-recherche-barre__envoi {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
	font-size: 0.8125rem;
	transition: background-color 0.2s ease;
}

.dgtcp-portail .dgtcp-recherche-barre__envoi:hover,
.dgtcp-portail .dgtcp-recherche-barre__envoi:focus-visible {
	background: var(--dgtcp-magenta-texte);
}

.dgtcp-recherche {
	border-top: 1px solid var(--dgtcp-portail-rule);
	border-bottom: 1px solid var(--dgtcp-portail-rule);
	background: var(--dgtcp-portail-alterne);
	padding: 0.625rem 0;
}

.dgtcp-recherche__form {
	position: relative;
	display: flex;
	margin: 0;
}

.dgtcp-recherche .dgtcp-recherche__champ {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	height: 44px;
	min-height: 0; /* le theme impose 50 px a tout champ */
	margin: 0;
	padding: 0 3.25rem 0 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 1rem;
}

.dgtcp-recherche .dgtcp-recherche__champ:focus {
	border-color: var(--dgtcp-magenta);
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 1px;
}

/* 36 px dans un champ de 44 : la cible reste au seuil du pouce, puisque le
   champ entier recoit aussi le toucher. */
.dgtcp-recherche .dgtcp-recherche__envoi {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
}

.dgtcp-recherche .dgtcp-recherche__envoi:hover,
.dgtcp-recherche .dgtcp-recherche__envoi:focus-visible {
	background: var(--dgtcp-magenta-texte);
}

.dgtcp-nav__embleme {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.dgtcp-marque {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.dgtcp-marque__logo {
	max-height: 58px;
	width: auto;
}

.dgtcp-nav .dgtcp-marque__nom {
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

/* =========================================================================
 * 9 bis. Les armoiries, a l extremite droite de la barre
 *
 * Elles ont loge un jour dans un bandeau institutionnel, le 2 octobre, puis
 * sont revenues ici — le bandeau a ete retire, sa denomination repetant ce que
 * le logo du Tresor dit deja. Leur place est celle que l en-tete de
 * inc/entete.php leur donnait depuis le debut.
 * ====================================================================== */

/*
 * 44 px, et 1,5 rem d ecart avec « Espace agent ».
 *
 * La hauteur : 62 px au depart, pensee pour un bandeau qui disposait d un etage
 * entier. Dans la rangee de navigation, 62 px poussaient le menu a se replier —
 * mesure, la barre passait de 89 a 177 px. 44 px tiennent dans les 88 px de la
 * rangee sans la grandir.
 *
 * L ecart lateral est demande par le client, qui le veut franc : 24 px, un peu
 * au-dela des 16 a 20 qu il avait d abord indiques, parce qu il l a redemande.
 * Sans lui, les armoiries touchent le bouton « Espace agent ».
 *
 * « flex-shrink: 0 » : sans lui, l image se laisse comprimer des que le menu
 * s allonge, et les armoiries s ecrasent au lieu de reduire l espace entre les
 * onglets.
 */
/*
 * 56 PX DEPUIS LE 1er NOVEMBRE, ET NON PLUS 44.
 *
 * A 44 px, les armoiries mesuraient 38 px de large : le cheval, les lances et
 * le listel qui porte « UNITE - PROGRES - JUSTICE » s y confondaient en une
 * tache. Un emblema d Etat qu on ne peut pas lire ne dit plus qu il est un
 * emblema d Etat.
 *
 * 56 px : +27 %, soit 48 px de large. La rangee en fait 88 : il reste 16 px
 * au-dessus et au-dessous, et la barre ne grandit pas d un pixel. Les 10 px
 * de largeur pris au menu sont rendus par le libelle de « Espace agent »,
 * qui s efface au meme endroit (chapitre 5 bis).
 *
 * L alignement vertical ne change pas : il vient du « align-items: center »
 * de la rangee, pas d une marge.
 */
.dgtcp-armoiries {
	flex-shrink: 0;
	margin-left: 1.5rem;
	width: auto;
	height: 56px;
	object-fit: contain;
}

/*
 * SOUS 1280 PX, LES ARMOIRIES S EFFACENT.
 *
 * Le menu de bureau apparait des 1200 px. En dessous du seuil, mesure faite :
 * meme onglets resserres, la rangee n a pas la largeur et le menu repasse a
 * deux lignes — la barre double de hauteur, 89 px a 177. Les armoiries disent
 * que c est un site d Etat ; un en-tete casse dit autre chose. Elles cedent
 * la place.
 *
 * LE SEUIL EST PASSE A 1340 PUIS EST REVENU A 1280, LE MEME JOUR.
 *
 * La rangee avait recu un second bouton (165 px) et les armoiries avaient
 * grandi (10 px de plus) : entre 1200 et 1340, l espace reserve du champ de
 * recherche — 140 px, sous lesquels il se tronquait en « Rechercl » — et les
 * armoiries se disputaient les memes pixels, et le champ l avait emporte.
 *
 * La recherche s est ensuite repliee sur sa loupe (objectif 3 bis) : elle ne
 * prend plus 140 px mais 40, et la question ne se pose plus. Mesure a
 * 1280 px, il reste 175 px de marge au menu, soit 102 une fois les armoiries
 * et leur ecart rendus. Elles reparaissent donc des 1280 px, comme avant.
 *
 * Ce n est pas une perte sur telephone : la barre mobile ne les affiche pas
 * non plus, pour la meme raison de largeur.
 */
@media (max-width: 1279.98px) {
	.dgtcp-armoiries {
		display: none;
	}
}

/* --- Les onglets --------------------------------------------------------- */

/*
 * 0,75 rem de respiration laterale et non 1 rem.
 *
 * Les armoiries avaient ete essayees DANS cette rangee, qui faisait alors
 * 1328 px pour 1328 px de contenu a 1440 px : le menu passait a deux lignes.
 * Elles sont depuis montees dans le bandeau institutionnel, et le logo avec —
 * la rangee a retrouve de la place.
 *
 * La valeur resserree est conservee : le pictogramme d accueil prend 30 px la
 * ou le logo en prenait 113, mais le champ de recherche et « Espace agent »
 * occupent toujours 328 px, et la maquette montre des onglets serres.
 */
.dgtcp-navigation .main-navbar ul.main-menu > li > a {
	color: var(--dgtcp-ink);
	padding: 0 0.75rem;
	line-height: 88px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dgtcp-navigation .main-navbar ul.main-menu > li > a:hover,
.dgtcp-navigation .main-navbar ul.main-menu > li > a:focus-visible,
.dgtcp-navigation .main-navbar ul.main-menu > li:hover > a {
	color: var(--dgtcp-magenta-texte);
}

/*
 * L'onglet courant est désigné par la couleur ET par un filet : la couleur
 * seule ne suffit pas — elle est invisible pour une part des lecteurs, et le
 * cahier des charges impose l'accessibilité. Le filet est posé en ombre
 * intérieure plutôt qu'en bordure, pour ne pas déplacer le texte d'un pixel.
 */
.dgtcp-navigation .main-navbar ul.main-menu > li.current-menu-item > a,
.dgtcp-navigation .main-navbar ul.main-menu > li.current_page_item > a,
.dgtcp-navigation .main-navbar ul.main-menu > li.current-menu-ancestor > a {
	color: var(--dgtcp-magenta-texte);
	box-shadow: inset 0 -3px 0 0 var(--dgtcp-magenta);
}

/* =========================================================================
 * 5 quater. Les deux actions sur la barre mobile
 *
 * Sous 1200 px, la barre de bureau disparait et la barre mobile prend le
 * relais. Les deux actions y suivent : rechercher et entrer restent les deux
 * gestes les plus demandes, et un usager qui navigue au telephone n a pas a
 * ouvrir le menu pour les trouver.
 *
 * Le libelle « Espace agent » y est masque — il reste annonce aux lecteurs
 * d ecran par une classe screen-reader-text, posee cote PHP. Mesure faite sur
 * 375 px : logo 120 px + libelle 105 px + loupe + hamburger depassaient de
 * 30 px, et le hamburger sortait de l ecran.
 * ====================================================================== */

@media (max-width: 1199.98px) {
	/*
	 * margin-left: auto plutot qu un justify-content sur le parent : la rangee
	 * .main-mobile-menu vient du theme, et lui imposer une repartition
	 * deplacerait aussi le logo et le hamburger, dont le placement est deja
	 * juste.
	 */
	.main-mobile-menu .dgtcp-nav__actions {
		margin-left: auto;
		margin-right: 0.75rem;
	}

	/* 44 px : le seuil en dessous duquel une cible se rate au pouce. */
	.dgtcp-portail .dgtcp-nav__actions--compact .dgtcp-nav__action {
		width: 44px;
		height: 44px;
		padding: 0;
	}
}

/* =========================================================================
 * 6. Bascule mobile
 *
 * Le parent bascule sur le menu hamburger à 992 px. Le seuil est remonté à
 * 1200 px, en miroir du d-xl-block posé dans theme-header.php : le menu doit
 * encore recevoir des rubriques, et une barre qui déborde sur deux lignes est
 * plus laide qu'un menu replié.
 * ====================================================================== */

@media (max-width: 1199.98px) {
	div.main-mobile-nav {
		display: block;
	}
}

@media (max-width: 991.98px) {
	/* Les postes se resserrent : la barre doit tenir sur une seule ligne, un
	   retour à la ligne la ferait grandir et décalerait le carrousel, dont la
	   hauteur se calcule à partir de --dgtcp-utilitaire-h. */
	.dgtcp-utilitaire .dgtcp-utilitaire__liens a,
	.dgtcp-utilitaire .dgtcp-utilitaire__inerte {
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}

	/*
	 * 44 px est le seuil en-dessous duquel une cible tactile devient
	 * difficile à viser au pouce. Le thème s'en tient à 40.
	 */
	.main-mobile-nav .hamburger-menu .menu-collapsed {
		width: 44px;
		height: 44px;
	}

	/*
	 * La barre mobile du thème mesurait 156 px. Trois postes, mesurés un par
	 * un plutôt que devinés :
	 *
	 *   77 px de logo — il n'est plus lu sur un téléphone, il est reconnu ;
	 *   34 px de « description du site » imprimée sous le logo par
	 *      template-parts/site-branding.php, qui répète mot pour mot la
	 *      dénomination déjà portée par le logo lui-même ;
	 *   39 px de marge interne, plus un min-height de 97 px.
	 *
	 * Ramenée à 64 px, la barre laisse au bouton du menu ses 44 px de zone
	 * tactile et rien de plus.
	 */
	.main-mobile-nav .main-mobile-menu {
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.main-mobile-nav .site-description {
		display: none;
	}

	.main-mobile-nav .logo img {
		max-height: 44px;
		width: auto;
	}
}

/* =========================================================================
 * 8. Bandeau « Informations » déroulant
 *
 * Le défilement est une translation CSS, sans JavaScript. Le ruban est écrit
 * deux fois dans le balisage : à -50 %, la seconde copie occupe exactement la
 * place que la première vient de quitter, d'où une boucle sans raccord.
 * ====================================================================== */

.dgtcp-flash {
	background: var(--dgtcp-ink);
	color: #fff;
	overflow: hidden;
}

.dgtcp-flash__interieur {
	display: flex;
	align-items: stretch;
	min-height: var(--dgtcp-flash-h);
}

.dgtcp-flash__pastille {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
	margin: 0;
	padding: 0 1.1rem;
	/* Blanc a 12 px : il faut 4,5:1, et le magenta clair n en donne que 4,13.
	   Le magenta de texte, plus sombre, monte a 6,7:1. */
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* La piste masque ce qui déborde ; c'est elle qui donne l'illusion du
   défilement. min-width: 0 est indispensable : sans lui, un enfant flex
   refuse de rétrécir sous sa largeur de contenu et le ruban pousserait la
   pastille hors de l'écran. */
.dgtcp-flash__piste {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.dgtcp-flash__defile {
	display: flex;
	flex-shrink: 0;
	animation: dgtcp-defilement 42s linear infinite;
}

/* Le défilement s'arrête au survol et dès qu'un lien du bandeau reçoit le
   focus clavier : sans cela, atteindre un lien reviendrait à viser une cible
   mobile. */
.dgtcp-flash:hover .dgtcp-flash__defile,
.dgtcp-flash:focus-within .dgtcp-flash__defile {
	animation-play-state: paused;
}

@keyframes dgtcp-defilement {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.dgtcp-flash__ruban {
	display: flex;
	align-items: center;
	gap: 0 2.5rem;
	margin: 0;
	padding: 0 1.25rem;
	list-style: none;
	white-space: nowrap;
}

.dgtcp-flash__ligne {
	position: relative;
	font-size: 1rem;
	line-height: var(--dgtcp-flash-h);
}

/* Un point sépare deux annonces. Il appartient à l'espace entre elles, pas à
   l'annonce : d'où le sélecteur d'adjacence, qui l'omet sur la première. */
.dgtcp-flash__ligne + .dgtcp-flash__ligne::before {
	content: "";
	position: absolute;
	left: -1.3rem;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-light);
}

/* Spécificité (0,2,1) : le thème cible les liens en a:not(.comments-count),
   soit (0,1,1) — une classe seule ne suffirait pas. */
.dgtcp-flash .dgtcp-flash__ligne a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.dgtcp-flash .dgtcp-flash__ligne a:hover,
.dgtcp-flash .dgtcp-flash__ligne a:focus-visible {
	color: var(--dgtcp-magenta-light);
	border-bottom-color: var(--dgtcp-magenta-light);
}

/*
 * Réglage système « réduire les animations » : le ruban s'immobilise et les
 * annonces reviennent à la ligne au lieu de sortir de l'écran. La copie est
 * masquée — immobile, elle ne ferait que doubler chaque annonce.
 *
 * Exigence d'accessibilité du cahier des charges (section 7.2).
 */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-flash__defile {
		animation: none;
		flex-wrap: wrap;
	}

	.dgtcp-flash__ruban[aria-hidden="true"] {
		display: none;
	}

	.dgtcp-flash__ruban {
		flex-wrap: wrap;
		white-space: normal;
		gap: 0.25rem 2.5rem;
	}
}

@media (max-width: 575.98px) {
	/* L'intitulé se réduit au pictogramme : sur 375 px, « Informations » en
	   toutes lettres mangeait un tiers de la largeur du bandeau. */
	.dgtcp-flash__pastille span {
		display: none;
	}

	.dgtcp-flash__pastille {
		padding: 0 0.85rem;
	}
}

/* =========================================================================
 * 10. Chevrons du carrousel
 *
 * Le thème superpose deux masques SVG et fait pivoter le bouton suivant de
 * 180°. On lui substitue deux chevrons de la police Font Awesome, déjà
 * chargée par le thème — donc sans requête supplémentaire.
 *
 * Au repos, un fond translucide suffit à les détacher de la photo sans
 * l'encombrer. Au survol et au focus clavier, le fond devient blanc plein :
 * c'est ce contraste qui les désigne.
 * ====================================================================== */

/* Neutralisation de l'habillage du parent. */
.slider-section .home-slider div.owl-nav button[class*="owl-"]::after,
.slider-section .home-slider div.owl-nav button .icon {
	display: none;
}

.slider-section .home-slider div.owl-nav .owl-next {
	transform: none;
}

.slider-section .home-slider div.owl-nav button[class*="owl-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: rgba(26, 20, 24, 0.4);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.slider-section .home-slider div.owl-nav button[class*="owl-"]::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1rem;
	line-height: 1;
	color: #fff;
	transition: color 0.25s ease;
}

.slider-section .home-slider div.owl-nav .owl-prev::before {
	content: "\f053"; /* chevron-left */
}

.slider-section .home-slider div.owl-nav .owl-next::before {
	content: "\f054"; /* chevron-right */
}

/*
 * Survol et focus traités ensemble : la navigation au clavier doit être aussi
 * visible que celle à la souris. Le chevron passe en magenta, sans quoi il
 * disparaîtrait — blanc sur blanc.
 */
.slider-section .home-slider div.owl-nav button[class*="owl-"]:hover,
.slider-section .home-slider div.owl-nav button[class*="owl-"]:focus-visible {
	background: #fff;
	border-color: #fff;
}

.slider-section .home-slider div.owl-nav button[class*="owl-"]:hover::before,
.slider-section .home-slider div.owl-nav button[class*="owl-"]:focus-visible::before {
	color: var(--dgtcp-magenta);
}

@media (prefers-reduced-motion: reduce) {
	.slider-section .home-slider div.owl-nav button[class*="owl-"],
	.slider-section .home-slider div.owl-nav button[class*="owl-"]::before {
		transition: none;
	}
}

/* =========================================================================
 * 11. Entête de bloc — commun aux sections maison
 * ====================================================================== */

.dgtcp-bloc {
	padding: var(--dgtcp-section-respiration) 0;
}

/*
 * LE FLASH INFO RESPIRE MOINS QUE LES AUTRES SECTIONS.
 *
 * Consigne du 1er novembre : le bloc doit se compacter pour que « Services en
 * ligne » arrive plus tot dans la page. 2 rem au lieu de 2,5 : 16 px rendus,
 * et le bandeau reste detache de la rangee de tuiles qui le precede.
 */
.dgtcp-flash-section {
	padding: 2rem 0;
}

.dgtcp-bloc__entete {
	margin-bottom: 2.25rem;
	text-align: center;
}

.dgtcp-bloc__surtitre {
	margin: 0 0 0.45rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dgtcp-bloc__titre {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
}

.dgtcp-bloc__chapeau {
	max-width: 62ch;
	margin: 0.9rem auto 0;
	color: var(--dgtcp-muted);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* =========================================================================
 * 12. Services en ligne — quatre cartes sur une rangee
 *
 * Photo, logo, description : l ordre demande par le comite, empile dans
 * chaque carte. Les quatre plateformes se lisent cote a cote.
 *
 * Meme principe que les tuiles des secteurs (chapitre 24) : le CADRE de la
 * photo porte le rapport et l image le remplit, puis une marque est posee a
 * cheval sur la couture. Deux rangees de cartes sur une meme page doivent
 * parler la meme langue.
 * ====================================================================== */

/*
 * LES COMMANDES, REPRISES LE 1er NOVEMBRE.
 *
 * Deux petites fleches grises, seules dans l angle bas droit : rien ne disait
 * combien de services restaient a voir, ni ou l on en etait. La rangee porte
 * desormais les PASTILLES DE PAGINATION a gauche et deux fleches FRANCHES a
 * droite.
 *
 * Les fleches passent de 48 a 56 px et changent de langage : elles etaient en
 * magenta pale sur fond clair — un gris rose qui se confondait avec le fond de
 * section. Elles sont maintenant cerclees de magenta, chevron magenta, et se
 * remplissent au survol comme au focus. Meme dessin que les boutons « Acceder »
 * de la section, en rond.
 */
.dgtcp-eservices__commandes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.dgtcp-eservices__commandes[hidden] {
	display: none;
}

.dgtcp-eservices__fleches {
	display: flex;
	gap: 0.75rem;
	margin-left: auto;
}

/*
 * Le point visible fait 10 px, la cible 28 : un doigt ne vise pas un point de
 * 10 px. Le disque est dessine par ::before, centre dans le bouton. Meme
 * principe que les points du Flash info, un cran plus grand — ils portent ici
 * un groupe de quatre services, non une annonce.
 */
.dgtcp-eservices__points {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-eservices .dgtcp-eservices__points .dgtcp-eservices__point {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dgtcp-eservices .dgtcp-eservices__points .dgtcp-eservices__point:hover,
.dgtcp-eservices .dgtcp-eservices__points .dgtcp-eservices__point:focus,
.dgtcp-eservices .dgtcp-eservices__points .dgtcp-eservices__point:active {
	outline: none;
	background: none;
}

.dgtcp-eservices__point::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--dgtcp-portail-rule);
	box-shadow: inset 0 0 0 1px rgba(26, 20, 24, 0.12);
	transition: background-color 0.2s ease, width 0.2s ease;
}

.dgtcp-eservices__point:hover::before {
	background: var(--dgtcp-magenta-light);
}

/*
 * La pastille courante s allonge en batonnet plutot que de seulement changer
 * de couleur : la forme se voit quand la couleur ne se voit pas.
 */
.dgtcp-eservices__point[aria-current]::before {
	width: 26px;
	background: var(--dgtcp-magenta);
}

.dgtcp-eservices .dgtcp-eservices__points .dgtcp-eservices__point:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
	border-radius: 999px;
}

/*
 * MEME PRECAUTION QUE POUR LE FLASH INFO.
 *
 * main.css noircit tout « button[type=button]:hover » avec une specificite
 * de (0,2,1). Les regles ci-dessous montent a (0,3,0) pour garder la main.
 */
.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid var(--dgtcp-magenta);
	border-radius: 50%;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
	font-size: 1.125rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche:hover,
.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche:focus,
.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche:active {
	outline: none;
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
}

.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

/* Bout de piste atteint : la fleche reste lisible mais n appelle plus le clic. */
.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

/*
 * UNE PISTE QUI DEFILE, ET NON PLUS UNE GRILLE.
 *
 * Six services pour quatre colonnes laissaient une seconde rangee a moitie
 * vide. Le carrousel les garde sur une ligne, quel que soit leur nombre : la
 * rubrique peut en gagner un sans deranger la mise en page.
 *
 * Defilement natif plutot qu un script qui deplace les cartes : le doigt, le
 * pave tactile et le clavier marchent d emblee, et sans JavaScript la rangee
 * reste parcourable. Les fleches ne font que s y ajouter.
 */
/*
 * LES 13 PX DE DEFILEMENT HORIZONTAL DE LA PAGE, EN MOBILE.
 *
 * Mesure a 390 px : la page acceptait de glisser de 13 px vers la droite. On
 * pouvait pousser le site de cote au doigt — ce que le cahier des charges range
 * parmi les defauts de responsive, et c est le second cas apres les 8 px du
 * pied de page (chapitre 29 bis).
 *
 * LA CAUSE, ET ELLE N EST PAS CELLE QU ON CROIT
 *
 * Ce n est aucune boite : mesurees une a une, toutes tiennent dans les 390 px.
 * Ce sont les libelles « screen-reader-text » poses dans les cartes — le nom du
 * service repete pour les lecteurs d ecran. WordPress les declare en
 * « position: absolute » SANS « left », donc a leur place naturelle : pour la
 * sixieme carte, a 1572 px dans l espace de defilement de la piste.
 *
 * La piste a pourtant « overflow-x: auto ». Mesure : lui imposer
 * « overflow-x: hidden » NE CORRIGE RIEN, quand « contain: paint » corrige. Ce
 * qui deborde echappe donc au recadrage de la piste, et seule une coupe posee
 * plus haut l arrete.
 *
 * « overflow-x: clip » et non « hidden » : « hidden » ferait de la section une
 * zone defilante — elle pourrait etre poussee par un script ou par le clavier,
 * et un « position: sticky » a l interieur cesserait de coller. « clip » coupe,
 * sans rien rendre defilant.
 *
 * Pose sur la SECTION et non sur la piste : la piste doit, elle, continuer de
 * defiler a l horizontale, c est tout son objet.
 */
.dgtcp-eservices {
	overflow-x: clip;
}

.dgtcp-eservices__carrousel {
	position: relative;
}

/*
 * « VOIR TOUS LES SERVICES », A DROITE DU TITRE.
 *
 * L en-tete des sections maison est CENTRE : surtitre et titre au milieu. Le
 * lien ne peut donc pas prendre sa place dans le flux sans decaler le titre.
 * Il est pose en absolu, cale sur le bord droit et sur la ligne de base du
 * titre.
 *
 * Il porte la MEME classe que « Voir toutes les actualites »
 * (.dgtcp-duo__tout) : deux liens qui font la meme chose a deux endroits de
 * la meme page doivent se ressembler. Les regles de cette classe sont
 * prefixees par .dgtcp-duo ; il faut donc les redire ici, a l identique.
 */
.dgtcp-eservices__entete {
	position: relative;
}

.dgtcp-eservices a.dgtcp-eservices__tout {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-eservices a.dgtcp-eservices__tout:hover,
.dgtcp-eservices a.dgtcp-eservices__tout:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-eservices a.dgtcp-eservices__tout:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * SOUS 992 PX IL REPREND SA PLACE DANS LE FLUX, centre sous le titre : a
 * cette largeur, un lien colle au bord droit toucherait le titre, qui occupe
 * alors presque toute la ligne.
 */
@media (min-width: 992px) {
	.dgtcp-eservices a.dgtcp-eservices__tout {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

@media (max-width: 991.98px) {
	.dgtcp-eservices a.dgtcp-eservices__tout {
		margin-top: 1rem;
	}
}

.dgtcp-eservices__liste {
	display: flex;
	gap: 1.75rem;
	/* Le bas laisse respirer l ombre des cartes et la barre de defilement. */
	margin: 0;
	padding: 0 0 0.75rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--dgtcp-magenta-wash) transparent;
}

/* La piste prend le focus au clavier : il lui faut un contour visible. */
.dgtcp-eservices__liste:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 4px;
}

/*
 * QUATRE CARTES, ET LA MOITIE D UNE CINQUIEME.
 *
 * Elles etaient quatre pile : la rangee se terminait net au bord droit, et
 * rien ne disait qu il y en avait d autres — il fallait voir les fleches, en
 * bas, pour s en douter. La demi-carte qui depasse est le signal le plus
 * direct : on voit qu on a coupe quelque chose.
 *
 * 4,5 cartes de front et quatre gouttieres entre elles, d ou le diviseur. Le
 * script, lui, continue de defiler par CARTES ENTIERES — quatre a la fois —
 * sans quoi la demi-carte se retrouverait coupee a gauche au coup suivant.
 */
.dgtcp-eservices__liste > .dgtcp-eservice {
	flex: 0 0 calc((100% - 4 * 1.75rem) / 4.5);
	scroll-snap-align: start;
}

.dgtcp-eservice {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dgtcp-eservice:hover,
.dgtcp-eservice:focus-within {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 10px 30px rgba(26, 20, 24, 0.10);
}

/*
 * LE CADRE COMMANDE, PAS LA PHOTO — meme lecon qu au chapitre 24 : pose sur
 * l image, aspect-ratio cede devant les dimensions du fichier, et une photo
 * au rapport different desalignait la rangee. L image est donc sortie du flux
 * et plaquee sur le cadre.
 */
.dgtcp-eservice__visuel {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dgtcp-portail-alterne);
}

/*
 * LE POINT FOCAL VIENT DU GABARIT, LE CENTRE RESTE LE DEFAUT.
 *
 * Toutes les photos fournies mesurent 768 x 576, soit exactement le 4/3 du
 * cadre : « cover » ne les recadre d AUCUN pixel, et le point focal n a donc
 * aujourd hui rien a corriger. Il sert a la SUITE — le jour ou un service
 * arrive avec un 16/9 ou un carre. Voir dgtcp_eservice_cadrage() et le filtre
 * « dgtcp_eservice_cadrage ».
 *
 * Ce que le cadrage ne peut PAS faire : rendre lisibles les captures d ecran
 * de Faso Arzeka, Lanaya et e-BDT. Leur texte est trop petit dans le fichier
 * source ; il y faut d autres visuels.
 */
.dgtcp-eservice__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--dgtcp-eservice-cadrage, center);
}

.dgtcp-eservice__visuel--vide {
	background: linear-gradient(160deg, var(--dgtcp-magenta-wash) 0%, var(--dgtcp-portail-alterne) 100%);
}

/*
 * Le logo, sur une plaque blanche a cheval sur le bas de la photo.
 *
 * Une PLAQUE et non un disque, comme sur les tuiles : les logos de Faso Arzeka
 * et d e-BDT sont en longueur, un cercle les aurait reduits a une vignette
 * illisible.
 *
 * LA LARGEUR EST FIXE DEPUIS LE 1er NOVEMBRE, ET ELLE NE SUIT PLUS LE LOGO.
 *
 * Mesure a 1440 px avant correction : Faso Arzeka 72 px, e-BDT 103, Lanaya
 * 150. Trois plaques de trois largeurs sur une meme rangee, a la meme hauteur,
 * se lisaient comme trois dessins differents — et la plus etroite paraissait
 * une erreur de mise en page. Une seule largeur, et le logo se loge dedans :
 * c est la plaque qui est uniforme, pas le logo, qu on ne deforme pas.
 *
 * 140 px : la largeur que demande le plus long des trois (Lanaya, 118 px de
 * logo) avec son retrait. Les autres y respirent.
 */
.dgtcp-eservice__marque {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 64px;
	max-width: calc(100% - 3rem);
	margin: -32px 0 0 1.5rem;
	padding: 0 0.75rem;
	border-radius: 12px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 6px 18px rgba(26, 20, 24, 0.12);
}

.dgtcp-eservice__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 42px;
	object-fit: contain;
}

/*
 * SANS LOGO, UNE PASTILLE MAGENTA, ET PLUS JAMAIS RIEN.
 *
 * « Centre d'appel » n avait ni logo ni pictogramme : sa carte montrait un
 * trou la ou ses cinq voisines portent une marque. Le gabarit pose desormais
 * un pictogramme de repli (DGTCP_ESERVICE_ICONE_DEFAUT), de sorte qu aucune
 * carte ne puisse etre nue.
 *
 * Meme hauteur et meme place que la plaque — seule la forme change, ronde
 * plutot que rectangulaire, parce qu un pictogramme est centre quand un logo
 * est couche.
 */
.dgtcp-eservice__marque--icone {
	width: 64px;
	padding: 0;
	border-radius: 50%;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-size: 1.5rem;
}

/*
 * Colonne flex, bouton pousse en pied : des descriptions de longueurs
 * differentes laissaient sinon quatre boutons a quatre hauteurs dans une meme
 * rangee — le defaut deja corrige sur les tuiles.
 */
.dgtcp-eservice__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem 1.75rem;
}

.dgtcp-eservices .dgtcp-eservice__nom {
	margin: 0 0 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * TROIS LIGNES ICI AUSSI.
 *
 * La coupe a vingt-quatre mots a ete retiree de dgtcp_carte_de_page(), qui
 * sert aux DEUX sections : sans clamp, une page de service sans extrait
 * saisi deverserait soixante mots dans sa carte et briserait l egalite des
 * hauteurs que verifier-eservices.js exige.
 */
.dgtcp-eservice__description {
	display: -webkit-box;
	margin: 0 0 1.5rem;
	overflow: hidden;
	color: var(--dgtcp-texte);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.dgtcp-eservice__bouton {
	align-self: flex-start;
	margin-top: auto;
}

/*
 * TABLETTE : DEUX CARTES PLEINES, sans demi-carte.
 *
 * La demande du 1er novembre est explicite. A cette largeur une demi-carte de
 * plus ramenerait chacune sous 300 px, ou la description passe a cinq lignes.
 * Les pastilles disent la suite.
 */
@media (max-width: 1199.98px) {
	.dgtcp-eservices__liste > .dgtcp-eservice {
		flex-basis: calc((100% - 1.75rem) / 2);
	}
}

/*
 * TELEPHONE : 1,2 CARTE.
 *
 * Une carte entiere, et un cinquieme de la suivante qui depasse — c est ce
 * debord qui dit qu il y en a d autres a cote. Le calcul : la piste moins une
 * gouttiere, divise par 1,2. 82 % donnaient 1,28 carte ; le diviseur dit
 * l intention au lieu de la laisser deviner d un pourcentage.
 */
@media (max-width: 575.98px) {
	.dgtcp-eservices__liste > .dgtcp-eservice {
		flex-basis: calc((100% - 1.75rem) / 1.2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-eservices__liste {
		scroll-behavior: auto;
	}

	.dgtcp-eservice,
	.dgtcp-eservices__point::before,
	.dgtcp-eservices .dgtcp-eservices__commandes .dgtcp-eservices__fleche {
		transition: none;
	}
}

/* =========================================================================
 * 14. Lien-bouton commun
 *
 * Un seul dessin de bouton pour toute la maquette : « Voir toutes les
 * actualités », « En savoir plus », « Accéder ». Trois dessins différents
 * pour trois libellés donneraient une page bricolée.
 * ====================================================================== */

.dgtcp-bloc .dgtcp-lien-bouton,
a.dgtcp-lien-bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--dgtcp-magenta);
	border-radius: 999px;
	background: transparent;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.dgtcp-bloc .dgtcp-lien-bouton:hover,
.dgtcp-bloc .dgtcp-lien-bouton:focus-visible {
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
}

.dgtcp-bloc__suite {
	margin: 2.25rem 0 0;
	text-align: center;
}

/* Section sur fond alterné : c'est ce gris très clair qui sépare deux blocs
   sans qu'il faille tracer une bordure. */
.dgtcp-bloc--alterne {
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-invite {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--dgtcp-magenta);
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
}

/* =========================================================================
 * 15. Flash info, puis actualites et communiques en deux colonnes
 *
 * La premiere vient juste sous les tuiles : une annonce a la fois, en
 * diaporama, chacune menant a sa page (amendement du 28 septembre).
 *
 * La seconde ferme la page en posant cote a cote ce que le Tresor FAIT et ce
 * qu il ANNONCE, distinction que le tableau « Elements » du cahier des charges
 * etablit.
 * ====================================================================== */

/* --- Flash info : une annonce a la fois, en diaporama ------------------- */

/*
 * Amendement du 28 septembre, figure 2 : une seule carte blanche, la photo a
 * gauche, le texte a droite, flèches et points en bas a droite. Le HTML pose
 * toutes les annonces empilees ; flash.js n en laisse voir qu une (attribut
 * hidden) et ajoute .dgtcp-flash--diaporama a la section.
 *
 * Le cadre d image porte le rapport et l image le remplit : pose sur l image,
 * aspect-ratio cederait devant les dimensions du fichier (lecon du
 * chapitre 24).
 */
.dgtcp-flash-visuel {
	position: relative;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-flash-visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans photo : le meme cadre, un aplat et le porte-voix. */
.dgtcp-flash-visuel--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--dgtcp-magenta-wash) 0%, var(--dgtcp-portail-carte) 100%);
	color: var(--dgtcp-magenta);
	font-size: 4rem;
}

.dgtcp-flash {
	position: relative;
	/* 1 rem et non 1,25 : le bloc doit arriver plus tot dans la page. */
	padding: 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 18px 40px rgba(26, 20, 24, 0.06);
}

/* Sans script, les annonces se suivent, separees d un filet. */
.dgtcp-flash__diapo + .dgtcp-flash__diapo {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-flash--diaporama .dgtcp-flash__diapo + .dgtcp-flash__diapo {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/*
 * hidden est un attribut, mais display: grid le battrait : la regle qui suit
 * lui rend son sens.
 */
.dgtcp-flash__diapo[hidden] {
	display: none;
}

/*
 * LA COLONNE DE TEXTE PREND LE PAS SUR LA PHOTO.
 *
 * Les deux colonnes etaient egales. La hauteur du bloc ne vient pourtant pas
 * de la photo mais du TEXTE : mesure a 1440 px, la photo demandait 360 px de
 * plancher quand le corps en occupait 403. Elargir la colonne de texte lui
 * fait gagner des lignes, et le bloc entier descend d autant.
 *
 * L ecart passe de 2,5 a 2 rem : 8 px rendus a chaque colonne.
 */
.dgtcp-flash__diapo {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: 2rem;
	align-items: stretch;
}

/* --- La photo et l accroche --- */

/*
 * 260 PX DE PLANCHER, ET NON PLUS 360.
 *
 * Le plancher ne borne que les annonces dont le texte est court ; les autres
 * suivent la hauteur du corps. 360 px imposaient donc un minimum que rien ne
 * justifiait une fois l accroche retiree de la photo — c est elle qui occupait
 * le tiers bas du cadre et demandait de la place.
 */
.dgtcp-flash__image {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	border-radius: 12px;
}

.dgtcp-flash__image .dgtcp-flash-visuel {
	position: absolute;
	inset: 0;
}

/*
 * L ACCROCHE A QUITTE LES PHOTOS LE 1er NOVEMBRE.
 *
 * Elle etait posee en surimpression sur CHAQUE photo du diaporama, blanche sur
 * un degrade sombre qui montait du bas : la meme phrase, six fois, sur six
 * images differentes. Elle mangeait le tiers bas de chaque visuel et ne disait
 * rien de l annonce qu elle recouvrait.
 *
 * C est une devise, pas une information : une ligne en tete de section, et les
 * photos sont rendues a ce qu elles montrent. Elle tient sur UNE ligne — le
 * bloc doit se compacter, pas gagner un etage — et se retire entierement en
 * vidant les deux champs dans Personnaliser > Flash info.
 *
 * Les regles de .dgtcp-flash__accroche sont retirees : plus rien ne porte
 * cette classe. Pour les retrouver : l historique git.
 */
.dgtcp-flash-section__accroche {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
	margin: 0 0 1rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.35;
}

/* Le filet magenta reprend celui des autres en-tetes de section. */
.dgtcp-flash-section__accroche::before {
	content: "";
	align-self: center;
	flex-shrink: 0;
	width: 28px;
	height: 2px;
	background: var(--dgtcp-magenta);
}

.dgtcp-flash-section__accroche strong {
	color: var(--dgtcp-ink);
	font-weight: 800;
}

/* --- Le texte --- */

/*
 * La marge basse laisse la place des commandes, posees en absolu en bas a
 * droite de la carte : le bouton ne passe jamais dessous.
 */
/*
 * LE RETRAIT BAS TOMBE DE 5,5 A 4 REM.
 *
 * Il reserve la place des commandes, posees en absolu en bas a droite de la
 * carte, pour que le bouton ne passe jamais dessous. Il valait 88 px : la
 * hauteur d une colonne de fleches (48 px) surmontant une rangee de points
 * (24 px), ecart compris.
 *
 * Les commandes passent en RANGEE (fleches et points cote a cote, plus bas) :
 * elles ne font plus que 48 px de haut.
 *
 * LE CHIFFRE SE CALCULE, IL NE SE CHOISIT PAS. La bande qu occupent les
 * commandes vaut leur hauteur plus leur ecart au bas de la carte : 48 + 16,
 * soit 64 px. Un retrait de 64 px la toucherait donc exactement ; il en faut
 * un peu plus. 4,25 rem — 68 px — laissent 4 px entre le bas du bouton et le
 * haut des fleches, et le bloc perd tout de meme 20 px.
 *
 * Premier jet pose a 4 rem : 64 px de retrait pour 68 px de bande, les deux
 * se chevauchaient de 4 px. Ils ne se touchaient a l oeil que parce que le
 * bouton est a gauche et les commandes a droite — un libelle de bouton plus
 * long les aurait superposes. verifier-flash.js mesure desormais cet ecart.
 */
.dgtcp-flash__corps {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem 1.25rem 4.25rem 0;
}

.dgtcp-flash__etiquette {
	margin: 0 0 0.5rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dgtcp-flash-section .dgtcp-flash__titre {
	margin: 0 0 0.875rem;
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
}

.dgtcp-flash-section .dgtcp-flash__titre a {
	color: var(--dgtcp-ink);
	text-decoration: none;
}

.dgtcp-flash-section .dgtcp-flash__titre a:hover,
.dgtcp-flash-section .dgtcp-flash__titre a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/*
 * La partie en couleur est en magenta de MARQUE : c est du grand texte gras,
 * pour lequel 3:1 suffit, et le magenta sombre de texte l eteindrait.
 */
.dgtcp-flash__accent {
	color: var(--dgtcp-magenta);
}

/*
 * LA PARTIE ACCENTUEE NE SE BRISE PAS EN FIN DE LIGNE.
 *
 * Elle porte ce que l annonce a de precis — un numero de telephone, une date,
 * un montant. « 80 00 13 23 » se repliait entre « 13 » et « 23 », et le lecteur
 * devait recoller les deux moities. Un numero se lit d un bloc ou ne se lit pas.
 *
 * Les deux endroits qui l affichent sont vises ensemble, a dessein : c est la
 * MEME donnee, le champ « accent » de la fiche de l annonce, et le client a
 * demande la correction aux deux endroits. Les traiter separement les aurait
 * laisses diverger.
 *
 * Risque assume : un accent tres long ne pourrait pas se replier et sortirait
 * de sa colonne. Le champ sert a mettre en valeur quelques caracteres, pas une
 * phrase ; l encadre de la fiche le dit.
 */
.dgtcp-flash__accent,
.slider-section .main-content h1 .primary,
.slider-section .main-content .dgtcp-carrousel__titre .primary {
	white-space: nowrap;
}

/*
 * LA COULEUR DE L ACCENT, PERDUE EN CHEMIN.
 *
 * main.css la pose par « .main-content h1 .primary ». Le titre de diapositive
 * etant devenu un paragraphe le 1er octobre, cette regle ne l atteint plus :
 * mesure au DOM, le numero vert ressortait en BLANC au lieu du magenta, donc
 * sans se distinguer du reste du titre — alors que c est precisement ce que
 * l annonce vient dire.
 *
 * Meme valeur qu avant, pour que le rendu revienne a l identique. Le titre
 * fait 46 px en gras : c est du grand texte, ou 3:1 suffit.
 */
.slider-section .main-content .dgtcp-carrousel__titre .primary {
	color: var(--dgtcp-magenta);
}

.dgtcp-flash__resume {
	margin: 0 0 1.25rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.dgtcp-flash__action {
	margin: 0;
}

.dgtcp-flash-section a.dgtcp-flash__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 52px;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--dgtcp-magenta-aplat);
	border-radius: 999px;
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-flash-section a.dgtcp-flash__bouton:hover,
.dgtcp-flash-section a.dgtcp-flash__bouton:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-flash-section a.dgtcp-flash__bouton:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

/* --- Fleches et points --- */

/*
 * LES COMMANDES PASSENT EN RANGEE.
 *
 * Fleches au-dessus, points en dessous : la pile faisait 88 px de haut, et le
 * corps de l annonce devait lui reserver autant de retrait bas pour que le
 * bouton ne passe pas dessous. Cote a cote, elles font la hauteur d une
 * fleche — 48 px — et rendent 24 px au bloc.
 *
 * Les points viennent AVANT les fleches a l oeil (row-reverse) : la main va
 * naturellement aux fleches, qui restent dans l angle.
 */
.dgtcp-flash__commandes {
	position: absolute;
	right: 1.75rem;
	bottom: 1rem;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 1rem;
}

.dgtcp-flash__commandes[hidden] {
	display: none;
}

.dgtcp-flash__fleches {
	display: flex;
	gap: 0.75rem;
}

/*
 * LE THEME NOIRCIT TOUT BOUTON SURVOLE.
 *
 * main.css pose sur « button[type=button]:hover » et « :focus » un fond
 * --bs-secondary (l encre), un texte blanc et un pointille : specificite
 * (0,2,1). Les regles ci-dessous montent a (0,3,0) pour garder la main.
 */
.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-ink);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche:hover,
.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche:focus,
.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche:active {
	outline: none;
	background: var(--dgtcp-magenta);
	color: #fff;
}

.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

.dgtcp-flash__points {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le point visible fait 8 px, la cible 24 : un doigt ne vise pas un point de
 * 8 px. Le disque est dessine par ::before, centre dans le bouton.
 */
.dgtcp-flash-section .dgtcp-flash__points .dgtcp-flash__point {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dgtcp-flash-section .dgtcp-flash__points .dgtcp-flash__point:hover,
.dgtcp-flash-section .dgtcp-flash__points .dgtcp-flash__point:focus,
.dgtcp-flash-section .dgtcp-flash__points .dgtcp-flash__point:active {
	outline: none;
	background: none;
}

.dgtcp-flash__point::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--dgtcp-portail-rule);
	box-shadow: inset 0 0 0 1px rgba(26, 20, 24, 0.12);
	transition: width 0.2s ease, background-color 0.2s ease;
}

.dgtcp-flash__point[aria-current="true"]::before {
	width: 18px;
	background: var(--dgtcp-magenta);
	box-shadow: none;
}

.dgtcp-flash__point:hover::before {
	background: var(--dgtcp-magenta-light);
}

.dgtcp-flash-section .dgtcp-flash__points .dgtcp-flash__point:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 0;
	border-radius: 50%;
}

@media (max-width: 991.98px) {
	/* Une colonne : la photo au-dessus, le texte dessous, les commandes en pied. */
	.dgtcp-flash__diapo {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	/*
	 * 16/9 ET NON PLUS 16/10.
	 *
	 * En une colonne, la photo prend toute la largeur : mesure a 768 px, le
	 * 16/10 lui donnait 440 px de haut, soit pres de la moitie du bloc, et il
	 * fallait defiler pour atteindre le titre de l annonce. Le 16/9 est le
	 * rapport des photos fournies : elles y sont recadrees de moins, et le
	 * bloc perd 44 px.
	 */
	.dgtcp-flash__image {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.dgtcp-flash__corps {
		padding: 0.25rem 0.5rem 0.5rem;
	}

	.dgtcp-flash__commandes {
		position: static;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 1.5rem;
		padding: 0 0.5rem;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-flash {
		padding: 0.75rem;
	}

	/* L accroche en surimpression a disparu : voir le chapitre ci-dessus. */
	.dgtcp-flash-section__accroche {
		font-size: 0.9375rem;
	}

	.dgtcp-flash-section a.dgtcp-flash__bouton {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-flash-section a.dgtcp-flash__bouton,
	.dgtcp-flash-section .dgtcp-flash__commandes .dgtcp-flash__fleche,
	.dgtcp-flash__point::before {
		transition: none;
	}
}

/* --- Les deux colonnes --------------------------------------------------- */

/*
 * Amendement du 28 septembre, figure 3 : un filet magenta vertical devant le
 * titre, « Voir tout » a sa droite, puis des cartes a photo et date en
 * pastille. Actualites couchees a gauche, communiques debout a droite, les
 * deux colonnes separees d un filet.
 */
/*
 * LES COLONNES NE S ETIRENT PLUS L UNE SUR L AUTRE.
 *
 * Par defaut, une grille etire ses cellules sur la hauteur de la rangee. La
 * colonne des communiques — deux cartes la ou les actualites en ont quatre —
 * etait donc aussi haute que sa voisine, et son filet de separation courait
 * le long de quatre cents pixels de vide. Ce filet est ce qui faisait lire
 * l espace comme un TROU : sans lui, la colonne se termine simplement.
 *
 * « start » : chaque colonne prend la hauteur de son contenu, et le filet
 * s arrete ou les cartes s arretent.
 *
 * CE N EST PAS UN PROBLEME DE CODE. Le nombre affiche est deja de quatre de
 * chaque cote (reglage « dgtcp_duo_nombre ») ; il n y a que DEUX communiques
 * publies. La colonne se remplira d elle-meme des que la DGTCP en publiera
 * d autres.
 */
.dgtcp-duo__rangee {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem;
}

/*
 * Une seule colonne remplie : elle prend toute la largeur plutot que de
 * laisser un demi-ecran blanc a cote d elle.
 */
.dgtcp-duo__rangee--seule {
	grid-template-columns: minmax(0, 1fr);
}

.dgtcp-duo__colonne {
	display: flex;
	flex-direction: column;
}

.dgtcp-duo__colonne--communiques {
	padding-left: 2.5rem;
	border-left: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-duo__rangee--seule .dgtcp-duo__colonne--communiques {
	padding-left: 0;
	border-left: 0;
}

.dgtcp-duo__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
}

.dgtcp-duo .dgtcp-duo__titre {
	position: relative;
	margin: 0;
	padding-left: 1.1rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
	font-weight: 800;
}

.dgtcp-duo .dgtcp-duo__titre::before {
	content: "";
	position: absolute;
	top: 0.12em;
	bottom: 0.12em;
	left: 0;
	width: 5px;
	border-radius: 3px;
	background: var(--dgtcp-magenta);
}

/* « Voir tout » passe a la ligne sous le titre quand la colonne est etroite,
   cale a droite comme sur la maquette. */
.dgtcp-duo a.dgtcp-duo__tout {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-duo a.dgtcp-duo__tout:hover,
.dgtcp-duo a.dgtcp-duo__tout:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-duo__liste {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * position: relative ancre le lien etendu du titre sur la carte, et pas
 * au-dela. Aucun ancetre intermediaire ne doit etre positionne, sinon le lien
 * ne couvrirait que le corps (lecon du chapitre 39).
 */
.dgtcp-duo__carte {
	position: relative;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 12px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 6px 18px rgba(26, 20, 24, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dgtcp-duo__carte:hover,
.dgtcp-duo__carte:focus-within {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 10px 26px rgba(26, 20, 24, 0.09);
}

/* Actualites : photo a gauche, texte a droite. */
.dgtcp-duo__colonne--actualites .dgtcp-duo__carte {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

/*
 * Le CADRE porte le rapport, l image le remplit, sortie du flux : laissee
 * dedans, sa hauteur propre agrandissait la carte (une photo en portrait
 * doublait la hauteur de sa rangee). Le cadre peut etre positionne : le lien
 * etendu du titre vit dans le corps, pas ici, et s ancre toujours a la carte.
 */
.dgtcp-duo__visuel {
	position: relative;
	min-height: 11rem;
	overflow: hidden;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-duo__visuel > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dgtcp-duo__visuel > img {
	object-fit: cover;
}

/* Communiques : un bandeau de photo au-dessus du texte. */
.dgtcp-duo__colonne--communiques .dgtcp-duo__visuel {
	min-height: 0;
	aspect-ratio: 16 / 5;
}

/*
 * SANS PHOTO, UNE CARTE DE TEXTE — ET PLUS UN CADRE GRIS DE TROIS CENTS PIXELS.
 *
 * Le gabarit posait le cadre d image meme sans image : un aplat gris avec un
 * petit pictogramme au centre et la date posee dessus. Mesure a 1440 px : 174
 * px de haut pour ne rien montrer, soit plus que le texte qu il annoncait.
 *
 * La carte garde son cadre, son arrondi, son ombre et son survol — c est la
 * meme carte. Seul le bandeau disparait, remplace par une ligne de tete :
 * pictogramme de document, puis date.
 *
 * Les regles de .dgtcp-duo__sansphoto sont retirees : plus rien ne porte
 * cette classe. Pour les retrouver : l historique git.
 */
.dgtcp-duo__carte--texte {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * La regle des actualites impose deux colonnes a toute carte de sa colonne :
 * elle vaut (0,2,0) la ou le modificateur vaut (0,1,0). On la redit ici, plus
 * precisement, plutot que de l affaiblir — elle est juste pour les cartes qui
 * ont une photo.
 */
.dgtcp-duo__colonne--actualites .dgtcp-duo__carte--texte {
	grid-template-columns: minmax(0, 1fr);
}

.dgtcp-duo__entete-texte {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dgtcp-duo__entete-texte i {
	font-size: 0.9375rem;
}

.dgtcp-duo .dgtcp-duo__date {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 4px 12px rgba(26, 20, 24, 0.12);
	color: var(--dgtcp-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dgtcp-duo__date i {
	color: var(--dgtcp-magenta);
}

.dgtcp-duo__corps {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem;
}

.dgtcp-duo .dgtcp-duo__article {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.4;
}

.dgtcp-duo .dgtcp-duo__article a {
	color: var(--dgtcp-ink);
	text-decoration: none;
}

/* Toute la carte est la cible du lien du titre. */
.dgtcp-duo .dgtcp-duo__article a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dgtcp-duo__carte:hover .dgtcp-duo__article a,
.dgtcp-duo .dgtcp-duo__article a:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-duo .dgtcp-duo__article a:focus-visible {
	outline: none;
}

.dgtcp-duo__carte:has(a:focus-visible) {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

/*
 * TROIS LIGNES D EXTRAIT, ET C EST LA SEULE COUPE.
 *
 * Le texte etait tronque DEUX FOIS : une coupe PHP a dix-huit mots, qui
 * posait ses points de suspension au milieu d une phrase — « … par appel
 * public a l epargne d… » —, puis ces deux lignes de CSS par-dessus. La
 * premiere coupe ne servait donc a rien, et se voyait.
 *
 * Le PHP ne coupe plus (section-actus-communiques.php) : le clamp s arrete a
 * la fin d une ligne, avec les points de suspension du navigateur. Trois
 * lignes plutot que deux : a 340 px de colonne, deux lignes ne portaient
 * qu une trentaine de mots, trop peu pour dire de quoi parle l article.
 *
 * Les cartes gardent la meme hauteur : le clamp borne le texte, et le cadre
 * d image porte son propre plancher.
 */
.dgtcp-duo__extrait {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.dgtcp-duo__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: auto;
	padding-top: 0.4rem;
}

.dgtcp-duo__nature {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem;
	border-radius: 8px;
	background: var(--dgtcp-portail-alterne);
	color: var(--dgtcp-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

.dgtcp-duo__nature i {
	color: var(--dgtcp-magenta);
}

.dgtcp-duo__suite {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 700;
}

/* Dans la colonne des actualites, « Voir plus » vient seul, a gauche. */
.dgtcp-duo__colonne--actualites .dgtcp-duo__pied {
	justify-content: flex-start;
}

.dgtcp-duo__suite i {
	transition: transform 0.2s ease;
}

.dgtcp-duo__carte:hover .dgtcp-duo__suite {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-duo__carte:hover .dgtcp-duo__suite i {
	transform: translateX(3px);
}

@media (max-width: 991.98px) {
	.dgtcp-duo__rangee {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.dgtcp-duo__colonne--communiques {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 575.98px) {
	/* Sur telephone, la photo des actualites passe au-dessus, pleine largeur. */
	.dgtcp-duo__colonne--actualites .dgtcp-duo__carte {
		grid-template-columns: minmax(0, 1fr);
	}

	.dgtcp-duo__visuel {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.dgtcp-duo__colonne--communiques .dgtcp-duo__visuel {
		aspect-ratio: 16 / 7;
	}

	.dgtcp-duo__corps {
		padding: 1rem 1.15rem 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-duo__carte,
	.dgtcp-duo__suite i,
	a.dgtcp-lien-bouton {
		transition: none;
	}

	.dgtcp-duo__carte:hover .dgtcp-duo__suite i {
		transform: none;
	}
}

/* =========================================================================
 * 17. Le premier écran
 *
 * OBJECTIF : en arrivant sur le site, on voit le carrousel et, juste en
 * dessous, le bandeau d'informations — et RIEN D'AUTRE. « Actualités
 * récentes » doit commencer sous le pli, sans quoi la page d'accueil livre
 * tout d'un coup et le carrousel perd son rôle d'accroche.
 *
 * Le carrousel prend donc exactement la hauteur restante :
 *
 *     100vh − (en-tête 123 px + bandeau 48 px) = 100vh − 171 px
 *
 * Ces deux nombres sont MESURÉS, pas estimés. Si l'en-tête ou le bandeau
 * changent de hauteur, ce calcul doit être repris — c'est le prix d'un
 * premier écran calé au pixel.
 *
 * min-height : sur un écran très bas (un portable de 620 px, un navigateur
 * avec trois barres d'outils), la soustraction donnerait un carrousel écrasé.
 * Le plancher de 340 px le rend simplement défilable dans ce cas.
 *
 * Ces règles remplacent celles de la section 9.
 *
 * UNE HAUTEUR RÉGLÉE, ET NON PLUS CALCULÉE SUR L'ÉCRAN
 *
 * Le carrousel suivait la hauteur de la fenêtre, avec un plancher de 720 px
 * (620 sous 1200 px). Depuis l'amendement du 20 septembre, sa hauteur est
 * réglée dans le Personnalisateur (--dgtcp-carrousel-h), et en découle par
 * proportion sur tablette et téléphone : 480, 400, 320 px par défaut. La
 * raison du plancher — un bloc de texte de 487 px — a disparu avec la
 * nouvelle mise en forme du surtitre : voir --dgtcp-carrousel-h dans :root.
 *
 * Sur téléphone, c'est aussi ce qui évite le piège de 100vh, qui compte la
 * barre d'adresse du navigateur et la voit se rétracter au défilement.
 *
 * L'image est RECADRÉE (object-fit: cover), plus étirée : le thème la
 * déformait (fill), et une photo carrée parmi des photos en 16/9 s'étalait en
 * largeur. Le recadrage ne réduit pas le poids téléchargé.
 * ====================================================================== */

.slider-section .home-slider,
.slider-section .home-slider .owl-stage-outer,
.slider-section .home-slider .owl-item,
.slider-section .home-slider .item,
.slider-section .home-slider .item img {
	min-height: 0;
	height: var(--dgtcp-carrousel-h);
}

.slider-section .home-slider .item img {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1199.98px) {
	/* En-tete mobile : 34 px de barre utilitaire + 65 px de barre logo. */
	:root {
		--dgtcp-nav-h: 65px;
	}
}

@media (max-width: 991.98px) {
	.slider-section .home-slider,
	.slider-section .home-slider .owl-stage-outer,
	.slider-section .home-slider .owl-item,
	.slider-section .home-slider .item,
	.slider-section .home-slider .item img {
		height: calc(var(--dgtcp-carrousel-h) * 0.83);
	}
}

@media (max-width: 575.98px) {
	.slider-section .home-slider,
	.slider-section .home-slider .owl-stage-outer,
	.slider-section .home-slider .owl-item,
	.slider-section .home-slider .item,
	.slider-section .home-slider .item img {
		height: calc(var(--dgtcp-carrousel-h) * 0.67);
	}
}

/* =========================================================================
 * 16 bis. La taille des titres du pied de page ne suit plus leur niveau
 *
 * REGRESSION DE MA PROPRE CORRECTION, LE 1er OCTOBRE.
 *
 * Pour supprimer un saut de niveau signale par le validateur (h3 puis h5, sans
 * h4), les titres des colonnes du pied sont passes de <h5> a <h2>. Or AUCUNE
 * regle ne leur donnait de taille : « .main-footer .widget .widget-title » ne
 * pose qu une couleur et une marge. La taille venait donc de la BALISE.
 *
 * Mesure : 20 px en h5, 40 px en h2. « Services en ligne » est passe sur deux
 * lignes a 1440 px, et les trois titres sur deux lignes des 1200 px.
 *
 * La taille est donc fixee ici, a la valeur d avant. Le niveau d un titre dit
 * sa place dans le plan du document ; il n a pas a decider de son corps. C est
 * aussi ce qui evitera la meme surprise au prochain changement de niveau.
 * ====================================================================== */

.main-footer .widget .widget-title {
	font-size: 1.25rem;
	line-height: 1.3;
}

/* =========================================================================
 * 16 ter. Les trois barres du hamburger sont des <span>
 *
 * Revue qualite du 1er octobre : le validateur du W3C refusait trois <div>
 * dans un <button>. Un bouton n accepte que du contenu de phrase ; un <div>
 * n en est pas. Les trois barres sont donc devenues des <span>, dans
 * theme-header.php — un fichier que l enfant possede deja.
 *
 * MAIS LE PARENT LES DESSINE PAR LA BALISE.
 *
 * main.css vise « .hamburger-menu div » : avec des <span>, le hamburger
 * disparaissait purement et simplement. Ses declarations sont donc reprises
 * ici pour les <span>, a l identique, plus le « display: block » dont un
 * <div> n avait pas besoin.
 *
 * A reverifier si Abiz change le dessin de son hamburger : ces regles en sont
 * la copie, pas une surcharge.
 * ====================================================================== */

.hamburger-menu span {
	display: block;
	width: 100%;
	height: 3px;
	margin: 0 0 5px;
	background: var(--bs-white);
}

.hamburger-menu span:first-child {
	margin-top: 0;
}

.hamburger-menu span:last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * 17 ter. Le surtitre et le titre sont des PARAGRAPHES
 *
 * Revue qualite du 1er octobre : le gabarit composait le surtitre en <h4> et
 * le titre en <h1>. Cinq diapositives faisaient donc cinq <h1> — onze avec les
 * clones d Owl —, et le <h4> ouvrait le plan du document avant son <h1>. Les
 * deux sont devenus des paragraphes nommes (section-carrousel.php).
 *
 * UN PARAGRAPHE N HERITE PAS DE CE QUE LE THEME DONNAIT AUX TITRES.
 *
 * main.css habillait « .main-content h4 » d un cadre et d une marge basse, et
 * « .main-content h1 » d une marge basse. Ces declarations sont reprises ici,
 * a l identique, pour que le rendu ne bouge pas d un pixel. Le reste — taille,
 * graisse, fond retire, lettrage — est deja pose par les chapitres 20 et 21,
 * dont les selecteurs ont recu la classe a cote de la balise.
 *
 * Les tailles des deux paliers du parent (responsive.css, 2,125 rem puis
 * 1,75 rem) ne sont PAS reprises : nos propres regles les remplacaient deja
 * par une fourchette fluide.
 * ====================================================================== */

/*
 * Le filet repris du parent a ete retire le 1er octobre : le surtitre porte de
 * nouveau un aplat plein (chapitre 21), sur lequel un contour n ajoute rien.
 */
.slider-section .main-content .dgtcp-carrousel__surtitre {
	position: relative;
	display: inline-block;
	margin-bottom: 1rem;
	color: var(--bs-white);
	font-weight: 500;
}

.slider-section .main-content .dgtcp-carrousel__titre {
	margin-bottom: 1rem;
	font-weight: 700;
}

@media (max-width: 991.98px) {
	.slider-section .main-content .dgtcp-carrousel__surtitre,
	.slider-section .main-content .dgtcp-carrousel__titre {
		margin-bottom: 0.5rem;
	}
}

/* =========================================================================
 * 17 bis. Carrousel de flash infos — pastilles et titres longs
 *
 * Amendement du 1er octobre : le carrousel devient un carrousel d information.
 * Deux consequences de forme.
 *
 * LES PASTILLES
 *
 * Le theme parent ne les cree pas pour cette section — il les conditionne a la
 * classe « owl-dot-1 », la notre porte « owl-dot-2 ». C est
 * assets/js/carrousel-accueil.js qui les fabrique, dans un conteneur
 * « owl-dots » pose sur la section.
 *
 * Elles heritent donc de l habillage « .owl-dot-2 .owl-dots button » du
 * parent — 15 px, cercle borde de blanc, magenta a l etat actif. Il ne reste
 * ici qu a les PLACER, ce que le parent ne fait pas.
 *
 * Au-dessus du chevauchement des tuiles : la rangee de cartes remonte sur les
 * 60 derniers pixels de l image (chapitre 30 bis), des pastilles centrees en
 * bas disparaitraient derriere elles. Le calcul suit la variable, de sorte
 * qu un chevauchement modifie n ait pas a etre reporte ici.
 *
 * LES TITRES LONGS
 *
 * Un titre de diapositive etait ecrit pour tenir en deux ou trois mots. Un
 * titre de flash info est une phrase — « Les plateformes Lanaya et e-BDT sont
 * desormais accessibles en ligne ». Sur telephone, a 2 rem, il prenait quatre
 * lignes et poussait le texte hors du bandeau.
 *
 * Deux lignes au plus, la suite coupee par des points de suspension. L annonce
 * entiere reste lisible dans la section « Flash info », juste dessous, et sur
 * sa page.
 * ====================================================================== */

.slider-section .owl-dots.dgtcp-carrousel__pastilles {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--dgtcp-tuiles-chevauchement) + 1.25rem);
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 0;
	line-height: 1;
}

/*
 * La pastille active cesse de repondre au survol : elle est deja la
 * destination. Sans cela, le pointeur donne a croire qu il reste un pas a
 * faire.
 */
.slider-section .owl-dots.dgtcp-carrousel__pastilles .owl-dot.active {
	cursor: default;
}

/*
 * Le focus clavier doit se voir AUTREMENT que par la couleur : le magenta de
 * l etat actif et celui du focus se confondraient.
 */
.slider-section .owl-dots.dgtcp-carrousel__pastilles .owl-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/*
 * Le plafond de deux lignes du titre vivait ici, borne au telephone. Il est
 * remonte au chapitre 5, ou il vaut a toutes les tailles : sur ordinateur
 * aussi, un titre d annonce de trois lignes repousse le texte hors du bandeau.
 */

/*
 * SOUS 1200 PX, LES PASTILLES DESCENDENT.
 *
 * Leur position haute reserve les 60 px dont les tuiles mordent sur le bas de
 * l image. Or ce chevauchement n existe qu au-dessus de 1200 px : en dessous,
 * les tuiles s empilent sous le carrousel (chapitre 30 bis,
 * « .home .dgtcp-secteurs { margin-top: 0 } »). Les 60 px etaient donc
 * reserves contre rien.
 *
 * Et ils coutaient cher : sur telephone, le texte d une annonce prend trois
 * lignes de titre et quatre de paragraphe. Mesure a 390 px, les pastilles
 * mordaient de 10 px sur la derniere ligne. Les descendre rend ces 60 px au
 * texte, et l ecart passe a une soixantaine de pixels.
 */
@media (max-width: 1199.98px) {
	.slider-section .owl-dots.dgtcp-carrousel__pastilles {
		bottom: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slider-section .owl-dots.dgtcp-carrousel__pastilles .owl-dot {
		transition: none;
	}
}

/* =========================================================================
 * 18. Secteurs regules — reliquat pour les pages interieures
 *
 * La section « features-2 » du theme ne sert plus la page d accueil, remplacee
 * par le gabarit maison du bloc 24. Ces regles restent : l extension peut
 * encore rendre cette section ailleurs, et son fond sombre d origine y serait
 * un corps etranger.
 * ====================================================================== */

section.abiz-features-section-2 {
	background: var(--dgtcp-portail-carte);
	background-image: none;
}

section.abiz-features-section-2 .subtitle,
section.abiz-features-section-2 h2,
section.abiz-features-section-2 h3,
section.abiz-features-section-2 h4,
section.abiz-features-section-2 .feature-single-item h3,
section.abiz-features-section-2 .feature-single-item h4 {
	color: var(--dgtcp-ink);
}

section.abiz-features-section-2 .title {
	color: var(--dgtcp-magenta-texte);
}

section.abiz-features-section-2 p,
section.abiz-features-section-2 .content,
section.abiz-features-section-2 li,
section.abiz-features-section-2 .feature-single-item p {
	color: var(--dgtcp-texte);
}

/* =========================================================================
 * 19. Texte du carrousel
 *
 * Le titre du thème est déjà à 72 px ; ce sont le surtitre et le paragraphe
 * qui restaient petits, et c'est eux qu'on lit après le titre.
 *
 * Le voile sombre du thème est CONSERVÉ : c'est lui qui rend ce texte
 * lisible par-dessus une photo, dont on ne maîtrise ni le cadrage ni la
 * luminosité. Il est la contrepartie du texte, pas un choix décoratif.
 * ====================================================================== */

.slider-section .main-slider h4,
.slider-section .main-slider .dgtcp-carrousel__surtitre {
	font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem);
	letter-spacing: 0.08em;
}

/*
 * LA TAILLE DU TITRE A BAISSE LE 1er OCTOBRE.
 *
 * Elle montait a 4,75 rem — 76 px, l echelle d un slogan. Elle convenait a
 * « Finances publiques » ; depuis que le carrousel deroule les flash infos, un
 * titre est une PHRASE de soixante caracteres. A cette taille, deux lignes n en
 * tenaient que la moitie, et la coupe tombait au milieu du numero vert —
 * « 80 00 13… » —, c est-a-dire au milieu de ce que l annonce venait dire.
 *
 * 3,25 rem au plus : une phrase de soixante-dix caracteres tient en deux
 * lignes. Le bas de la fourchette descend aussi, pour que le telephone suive.
 */
.slider-section .main-slider h1,
.slider-section .main-slider .dgtcp-carrousel__titre {
	font-size: clamp(1.75rem, 0.9rem + 2.2vw, 3.25rem);
	line-height: 1.15;
}

.slider-section .main-slider p {
	font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
	line-height: 1.65;
}

/*
 * SOUS 540 PX, LE THEME REDUISAIT LE TEXTE A UNE DEMI-PHRASE.
 *
 * responsive.css du parent impose au paragraphe du carrousel, sous 540 px :
 * « max-width: 275px », « white-space: nowrap », « overflow: hidden » et
 * « text-overflow: ellipsis ». Une ligne, et des points de suspension.
 *
 * Cela se defendait quand la diapositive portait un slogan : une ligne suffit
 * a « Des plateformes modernes et securisees ». Depuis que le carrousel
 * deroule les flash infos, ce paragraphe EST l information. Mesure a 390 px :
 * sur 138 caracteres, 38 restaient lisibles — « Le numero vert anti-corruption
 * permet… », et le numero lui-meme disparaissait du texte.
 *
 * On rend donc au paragraphe le droit de se replier, et toute la largeur. Le
 * texte est deja borne cote PHP a 160 caracteres (DGTCP_CARROUSEL_TEXTE_MAX),
 * soit quatre a cinq lignes ici : le bandeau de 415 px les loge sans deborder.
 */
@media (max-width: 540px) {
	.slider-section .main-content p {
		max-width: none;
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
	}
}

.slider-section .main-slider .btn {
	font-size: 1.0625rem;
}

/* =========================================================================
 * 20. Secteurs régulés — fond blanc franc
 * ====================================================================== */

section.abiz-features-section-2 {
	background: var(--dgtcp-portail-carte);
}

/*
 * Meme cause, meme remede que dans le pied de page : le theme colore les
 * descriptions des secteurs par « .abiz-features-section-2 .feature-single-item p »
 * en (0,3,1), plus specifique que notre « section.abiz-features-section-2 p »
 * en (0,1,2). Blanc sur blanc, la encore.
 *
 * Ces trois cas — titre des secteurs, textes du pied de page, descriptions des
 * secteurs — disent tous la meme chose : REPEINDRE UNE SECTION DU THEME
 * PARENT, c'est reprendre chacune de ses couleurs, jamais seulement son fond.
 * L'audit de contraste au DOM les trouve en une passe ; l'oeil, non.
 */
section.abiz-features-section-2 .feature-single-item p,
section.abiz-features-section-2 .feature-single-item .text {
	color: var(--dgtcp-texte);
}

section.abiz-features-section-2 .feature-single-item h3,
section.abiz-features-section-2 .feature-single-item h4,
section.abiz-features-section-2 .feature-single-item .title {
	color: var(--dgtcp-ink);
}

/* =========================================================================
 * 21. Pied de page — fond sombre conserve
 *
 * Il a ete passe au blanc puis rendu au sombre. La raison de ce retour tient
 * en une phrase : un pied de page fonce FERME la page. Il separe le contenu
 * des mentions legales et des liens de service, et c est la convention de la
 * quasi-totalite des sites institutionnels, fasoarzeka.bf compris.
 *
 * En clair, il fallait lui adjoindre un filet pour qu on voie ou le contenu
 * s arrete — un rustine pour retrouver ce que le fond sombre donnait seul.
 *
 * Le theme le compose deja en blanc sur encre : on ne touche donc plus a ses
 * couleurs, on se contente d aligner son fond sur la palette du projet.
 * ====================================================================== */

footer.footer-section {
	background: var(--dgtcp-ink);
}

/* Un filet magenta marque quand meme la couture avec le contenu : c est le
   seul rappel de la couleur de marque a cet endroit de la page. */
footer.footer-section {
	border-top: 3px solid var(--dgtcp-magenta);
}

/*
 * Le lien d evitement du theme (« Skip to content ») herite de --bs-primary,
 * donc du magenta clair, a 17 px : 4,13:1. C est le tout premier element que
 * rencontre un utilisateur au clavier — il doit etre le plus lisible de la
 * page, pas le moins.
 */
a.skip-link {
	color: var(--dgtcp-magenta-texte);
}

/*
 * Le surtitre des diapositives est en blanc sur magenta a 21,6 px, poids 500 :
 * 4,13:1, et 21,6 px ne suffit pas a le qualifier de « grand texte » — il y
 * faudrait 24 px, ou 18,66 px EN GRAS. Le passer en 700 le fait entrer dans
 * la categorie ou 3:1 suffit, sans toucher a la couleur de marque.
 */
.slider-section .main-slider h4,
.slider-section .main-slider .dgtcp-carrousel__surtitre {
	font-weight: 700;
}

/*
 * Dans le pied de page, le magenta de marque se pose sur l encre et donne
 * 4,4:1 — il manque un dixieme pour le niveau AA. Le magenta CLAIR, lui,
 * monte a 5,3:1 sur ce meme fond.
 *
 * D ou une regle simple, et desormais explicite dans les trois cas :
 *
 *   sur BLANC  -> magenta de texte (sombre)   #b30069
 *   sur ENCRE  -> magenta clair                #ff4fb0
 *   en APLAT   -> magenta de marque            #f0008d
 *
 * Une seule teinte ne peut pas servir sur les deux fonds : c est la contrainte
 * de tout systeme de couleur qui alterne clair et sombre.
 */
footer.footer-section .container a,
footer.footer-section .widget a {
	color: var(--dgtcp-magenta-light);
}

footer.footer-section .container a:hover,
footer.footer-section .container a:focus-visible,
footer.footer-section .widget a:hover,
footer.footer-section .widget a:focus-visible {
	color: #fff;
}

/*
 * LE SURTITRE PORTE L'INTITULÉ DE LA DGTCP, EN BLANC ET SANS APLAT.
 *
 * Amendement du 20 septembre. Le thème compose le surtitre mot par mot, chaque
 * mot dans un <span> portant un aplat magenta : on retirait l'aplat et sa marge
 * interne, et le texte passait en blanc sur la photo voilée.
 *
 * L'APLAT REVIENT LE 1er OCTOBRE, ET EN MAGENTA DE LA CHARTE.
 *
 * Le client a montré la référence : le surtitre y porte un aplat plein, quand
 * le nôtre n'avait plus qu'un filet. Sans aplat, le blanc repose sur une photo
 * dont on ne maîtrise ni le cadrage ni la luminosité — c'était d'ailleurs la
 * faiblesse du parti pris du 20 septembre, que le voile seul ne suffit pas
 * toujours à couvrir.
 *
 * La référence est en rouge-orangé #e33020 : c'est la couleur du thème Abiz
 * d'origine, pas celle du Trésor. Elle jurerait avec le magenta de la page, et
 * le blanc n'y atteindrait que 4,46:1 — sous le seuil, pour un texte de 16 px.
 *
 * On reprend donc le magenta d'aplat de la charte, celui des boutons « Espace
 * agent » et « Appeler maintenant » : 6,73:1, et une seule couleur vive dans la
 * page.
 *
 * Le filet du parent disparaît : un contour sur un aplat plein ne dessine plus
 * rien, il épaissit.
 */
.slider-section .main-slider h4,
.slider-section .main-slider .dgtcp-carrousel__surtitre {
	padding: 0.35rem 0.85rem;
	border: 0;
	background: var(--dgtcp-magenta-aplat);
	font-size: 1rem;
}

.slider-section .main-slider h4 span,
.slider-section .main-slider .dgtcp-carrousel__surtitre span {
	background: none;
	padding: 0;
	color: #fff;
}

@media (max-width: 991.98px) {
	.slider-section .main-slider h4,
.slider-section .main-slider .dgtcp-carrousel__surtitre {
		font-size: 0.8125rem;
	}
}

/* =========================================================================
 * 22. Rythme des sections
 *
 * Toute la page etait blanche, et on ne sentait plus le passage d une section
 * a l autre : les blocs se touchaient sans couture. Un gris tres clair alterne
 * donc avec le blanc.
 *
 * Le gris est TIRE DU MAGENTA, pas neutre : #f7f5f6 porte une pointe de la
 * teinte de marque. Un gris pur a cote d une palette chaude se remarque, et
 * pas en bien.
 *
 * L alternance est declaree ICI, en un seul endroit, et non par une classe
 * posee section par section dans frontpage.php : reordonner la page ne doit
 * pas obliger a redistribuer les fonds a la main.
 *
 * « .dgtcp-regules » y a rejoint les autres le 1er novembre 2026 : son fond
 * vivait avec ses propres regles, et la promesse du « un seul endroit » etait
 * donc fausse pour une section sur six.
 * ====================================================================== */

/*
 * L ALTERNANCE, DANS L ORDRE DE LA PAGE.
 *
 * Les deux listes suivent frontpage.php, de haut en bas. Le carrousel ouvre
 * sur l anthracite ; viennent ensuite, une section sur deux :
 *
 *     2. Nos Missions ......... blanc
 *     3. Flash info ........... gris
 *     4. Services en ligne .... blanc
 *     5. Actualites ........... gris
 *     6. Secteurs sous tutelle  blanc
 *     7. Chiffres cles ........ gris
 *
 * Redistribue le 1er novembre 2026, quand les e-services sont remontes en
 * quatrieme position. Deux sections de meme fond se seraient alors touchees
 * deux fois — flash et e-services en gris, actualites et secteurs en blanc —
 * et quatre sections auraient paru n en faire que deux.
 *
 * Les chiffres cles gardent le gris : ils ferment la page sur un bandeau qui
 * fait transition vers l encre du pied.
 */

.dgtcp-flash-section,
.dgtcp-duo,
.dgtcp-key-figures {
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-secteurs,
.dgtcp-eservices,
.dgtcp-regules {
	background: var(--dgtcp-portail-carte);
}

/* La section « A propos » a ete retiree de l accueil a la demande du comite :
   ses regles de fond ont suivi. */

/* =========================================================================
 * 23. Chiffres cles — echelle relevee
 *
 * La section avait ete ramenee a 299 px pour cesser de crier ; elle criait
 * alors par sa COULEUR, un degrade magenta plein ecran. Le fond etant
 * desormais un gris discret, les nombres peuvent reprendre de la taille sans
 * que le bloc redevienne envahissant : ce sont eux le contenu.
 * ====================================================================== */

.dgtcp-key-figures {
	padding: var(--dgtcp-section-respiration-ample) 0;
	border-top: 1px solid var(--dgtcp-portail-rule);
	border-bottom: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-key-figures__title {
	margin: 0 0 3rem;
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
}

.dgtcp-key-figures__title::after {
	width: 64px;
	margin-top: 1rem;
}

.dgtcp-key-figures__grid {
	gap: 2rem 1.5rem;
}

/*
 * Une carte encadree par chiffre, le pictogramme en grand au-dessus du
 * nombre : le dessin de la maquette filaire de depart, retenu par le comite
 * le 18 septembre. Dans une pastille de 56 px, le pictogramme se lisait comme
 * une puce ; a 40 px et sans fond, il dit de quoi parle le nombre avant qu on
 * l ait lu.
 */
.dgtcp-key-figures__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.75rem 1rem 1.5rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 12px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-key-figures__icon {
	width: auto;
	height: auto;
	margin-bottom: 1rem;
	border-radius: 0;
	background: none;
	color: var(--dgtcp-magenta);
	font-size: 2.5rem;
	line-height: 1;
}

.dgtcp-key-figures__value {
	margin-bottom: 0.4rem;
	font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
}

.dgtcp-key-figures__label {
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* =========================================================================
 * 24. Secteurs regules — cartes a photo
 *
 * Chaque carte empile une photo, une decoupe courbe, une pastille d icone
 * posee a cheval sur la couture, puis l intitule et sa ligne d explication.
 *
 * CINQ CARTES, TROIS COLONNES
 *
 * Une grille de cinq colonnes donnait des cartes de 248 px — trop etroites
 * pour porter une photo. En trois colonnes, elles atteignent 413 px, et les
 * deux dernieres se centrent sous les trois premieres. D ou un flex plutot
 * qu une grille : une grille aurait laisse la derniere rangee alignee a
 * gauche, avec un vide a droite qui se lit comme un oubli.
 * ====================================================================== */

.dgtcp-secteurs__grille {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * QUATRE PAR RANGEE.
 *
 * La rangee comptait cinq tuiles et se posait sur trois colonnes ; le comite
 * en retient quatre, et le modele les montre alignees. calc(25% - 1.32rem)
 * retire a chaque carte les trois quarts de la gouttiere de 1,75 rem qui la
 * separe de ses voisines — 1,3125 rem, arrondi a 1,32.
 *
 * min-width empeche la quatrieme de se comprimer sous 220 px, largeur en
 * dessous de laquelle « Etablissements publics » passe sur trois lignes.
 */
.dgtcp-secteur {
	flex: 0 1 calc(25% - 1.32rem);
	min-width: 220px;
	display: flex;
	flex-direction: column;
	/* Référence du lien étendu à toute la tuile (voir .dgtcp-secteur__nom a::after). */
	position: relative;
	background: var(--dgtcp-portail-carte);
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/*
 * TOUTE LA TUILE EST UN LIEN : ELLE DOIT LE DIRE.
 *
 * Le survol ne posait qu une bordure magenta et une ombre grise de 10 %
 * d opacite — a peine un voile. Rien ne disait au visiteur que la carte
 * entiere cliquait, et le pointeur seul ne le dit qu a la souris.
 *
 * Trois signes depuis le 1er novembre, et ils vont ensemble : la carte MONTE
 * de 4 px, sa bordure passe au magenta, et son ombre prend la teinte de la
 * marque au lieu du gris. L elevation est ce qui se lit le plus vite — un
 * objet qui se souleve est un objet qu on peut prendre.
 *
 * LE FOCUS CLAVIER DIT EXACTEMENT LA MEME CHOSE, en plus de son cadre : qui
 * navigue au clavier doit voir ce que voit celui qui survole, sans quoi il
 * lui faut deviner que la carte repond. Les deux etats partagent donc la
 * meme declaration.
 */
.dgtcp-secteur:hover,
.dgtcp-secteurs .dgtcp-secteur:has(.dgtcp-secteur__nom a:focus-visible) {
	border-color: var(--dgtcp-magenta);
	/*
	 * Ombre magenta et non grise : elle appartient a la charte, et une ombre
	 * teintee se distingue du gris ambiant des cartes voisines. 22 % — au-dela
	 * elle se lit comme un halo colore, en deca elle disparait sur le fond
	 * clair de la section.
	 */
	box-shadow: 0 12px 28px rgba(179, 0, 105, 0.22);
	transform: translateY(-4px);
}

/*
 * LE CADRE COMMANDE, PAS LA PHOTO.
 *
 * aspect-ratio seul ne suffit pas : c est une taille PREFEREE, qu une image au
 * rapport different fait ceder. Constate — une photo carree de 1024 x 1024
 * etirait sa carte a 409 x 409 quand ses voisines faisaient 409 x 306, et la
 * rangee devenait bancale.
 *
 * L image est donc sortie du flux et plaquee sur le cadre. Celui-ci garde son
 * rapport quoi qu on y depose, et object-fit: cover recadre sans deformer. Les
 * photos fournies vont de 1,00 a 1,79 de rapport : la regle doit tenir pour
 * toutes, pas pour celles qu on a sous les yeux.
 */
.dgtcp-secteur__visuel {
	position: relative;
	/*
	 * 5/4 et non 4/3 : a largeur egale, le cadre gagne une quinzaine de pixels
	 * de haut. C est la facon d agrandir une carte dont la largeur est fixee
	 * par la rangee de quatre — on ne peut jouer que sur la hauteur.
	 */
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--dgtcp-portail-alterne);
	color: var(--dgtcp-magenta); /* Hérité par la courbe, en currentColor. */
}

.dgtcp-secteur__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/*
 * Sans photo, le cadre reste un aplat discret plutot qu un trou : la section
 * est presentable avant meme que le SCRP ait fourni les visuels.
 */
.dgtcp-secteur__visuel--vide {
	background:
		linear-gradient(
			160deg,
			var(--dgtcp-magenta-wash) 0%,
			var(--dgtcp-portail-alterne) 100%
		);
}

/*
 * La courbe est plaquee au bas de la photo. Elle est remplie en currentColor,
 * donc en magenta, et se prolonge sous la pastille : c est elle qui fait la
 * couture entre l image et le texte.
 */
.dgtcp-secteur__courbe {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* -1px : evite un liere de fond entre la courbe et le corps. */
	width: 100%;
	height: 34px;
	display: block;
}

/*
 * La pastille chevauche la couture. Son decalage negatif la remonte de la
 * moitie de sa hauteur, de sorte qu elle reste centree sur la ligne quelle
 * que soit la largeur de la carte.
 */
.dgtcp-secteur__pastille {
	position: relative;
	z-index: 1;
	align-self: center;
	/* La moitie de sa hauteur, pour qu elle chevauche la courbe a parts egales. */
	margin-top: -34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-size: 1.5rem;
	box-shadow: 0 0 0 5px var(--dgtcp-portail-carte);
}

/*
 * Colonne flex, pour que le bouton se pousse en pied de carte.
 *
 * Sans cela, il suit son texte : « Assurance » tient en deux lignes quand ses
 * voisines en prennent trois, et son bouton remontait de 22 px. Quatre boutons
 * a quatre hauteurs differentes dans une meme rangee se voient tout de suite.
 *
 * LE CONTENU EST CENTRE DEPUIS LE 1er NOVEMBRE.
 *
 * Les quatre intitules des missions ne font pas le meme nombre de lignes : a
 * 1440 px, « Tenir les comptes de l Etat » en prend une, « Gerer le
 * portefeuille de l Etat » deux, « Assurer la veille du systeme financier
 * national » trois. Les cartes, elles, ont la meme hauteur — la rangee flex
 * les etire toutes sur la plus haute. Le texte restant cale en haut, la
 * difference tombait entierement SOUS lui : la deuxieme carte montrait un
 * creux de 56 px la ou la quatrieme n en avait aucun.
 *
 * Centrer repartit ce creux de part et d autre. La rangee se lit alors comme
 * quatre cartes d une meme famille, et non comme quatre cartes dont trois
 * auraient oublie quelque chose.
 */
.dgtcp-secteur__corps {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*
	 * RETRAIT HAUT ET BAS EGAUX, DEPUIS QUE LE CONTENU EST CENTRE.
	 *
	 * Il valait 1,25 rem en haut et 2,25 en bas : le bas reservait la place
	 * d un bouton « Parcourir » retire le 28 septembre. Centrer dans une boite
	 * dont les retraits different de 1 rem decale le texte de la moitie —
	 * mesure, le titre se posait 23 px au-dessus du centre optique, et la
	 * correction n en etait plus une.
	 */
	padding: 1.25rem 1.75rem;
	text-align: center;
}

/*
 * DEUX LIGNES RESERVEES, MEME QUAND LE TITRE N EN PREND QU UNE.
 *
 * 2,6 em, soit deux fois la hauteur de ligne de 1,3. En em et non en px :
 * la valeur suit la taille du titre, et une retouche de font-size n a pas a
 * etre reportee ici.
 *
 * POURQUOI DEUX ET NON TROIS. Sur telephone, chaque carte forme sa propre
 * rangee : rien ne les etire, et leur hauteur suivait leur titre — mesure a
 * 390 px, 422, 393, 422 et 422 px. Un titre d une ligne faisait une carte
 * plus courte de 29 px, et l empilement se voyait. Deux lignes suffisent a
 * les egaliser toutes : c est le nombre que prennent trois des quatre
 * intitules a cette largeur. Trois lignes creuseraient un vide sur les
 * ecrans ou aucun titre n en prend autant.
 */
.dgtcp-secteur__nom {
	min-height: 2.6em;
	margin: 0 0 0.65rem;
	/* La marge suivante est rendue plus bas quand le titre ferme la carte. */
	color: var(--dgtcp-ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * Le lien du titre s'étend à toute la tuile : ::after la couvre, comme sur
 * les cartes des secteurs régulés. La tuile est positionnée, aucun ancêtre
 * intermédiaire ne l'est (le corps ne doit pas le devenir) : sinon le lien ne
 * couvrirait que la colonne de texte. Spécificité (0,2,1), contre
 * a:not(.comments-count) de main.css.
 *
 * Plus de bouton « Parcourir » depuis l'amendement du 20 septembre : le
 * client ne voulait plus des flèches, et la tuile entière suffit à dire
 * qu'elle mène quelque part.
 */
/*
 * SEUL DANS LA CARTE, LE TITRE NE GARDE PAS SA MARGE BASSE.
 *
 * Les quatre tuiles des missions n ont pas de ligne d explication — le
 * reglage « texte » est vide pour les quatre. Le titre est donc le dernier
 * element du corps, et ses 0,65 rem de marge basse comptaient dans le
 * centrage : ils remontaient le texte de la moitie, soit 5 px.
 *
 * La marge reste pour le jour ou le gestionnaire ajoute une ligne de texte :
 * le selecteur ne la retire que lorsqu elle ne separe plus rien.
 */
.dgtcp-secteur__nom:last-child {
	margin-bottom: 0;
}

.dgtcp-secteurs .dgtcp-secteur__nom a {
	color: inherit;
	text-decoration: none;
}

.dgtcp-secteurs .dgtcp-secteur__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.dgtcp-secteurs .dgtcp-secteur:hover .dgtcp-secteur__nom a,
.dgtcp-secteurs .dgtcp-secteur__nom a:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-secteurs .dgtcp-secteur__nom a:focus-visible {
	outline: none;
}

/* Le cadre de focus est posé sur la tuile entière, là où porte le clic. */
.dgtcp-secteurs .dgtcp-secteur:has(.dgtcp-secteur__nom a:focus-visible) {
	outline: 3px solid var(--dgtcp-magenta);
	outline-offset: 4px;
}

.dgtcp-secteur__texte {
	margin: 0;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.65;
}

@media (max-width: 1199.98px) {
	/* Deux colonnes : quatre cartes font alors deux rangees pleines. */
	.dgtcp-secteur {
		flex: 0 1 calc(50% - 0.875rem);
	}
}

@media (max-width: 575.98px) {
	.dgtcp-secteur {
		flex: 0 1 100%;
	}
}

/*
 * MOUVEMENT REFUSE : LA CARTE NE BOUGE PLUS, MAIS ELLE REPOND TOUJOURS.
 *
 * L elevation est retiree, la bordure et l ombre magenta restent : l etat
 * survole et l etat focus demeurent parfaitement lisibles sans qu aucun
 * element ne se deplace.
 */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-secteur {
		transition: none;
	}

	.dgtcp-secteur:hover,
	.dgtcp-secteurs .dgtcp-secteur:has(.dgtcp-secteur__nom a:focus-visible) {
		transform: none;
	}
}

/* =========================================================================
 * 25. Gouttiere du texte des diapositives
 *
 * Le chevron gauche occupe x 43 a 87 ; le texte commencait a x 16. Ils se
 * chevauchaient : le bouton « precedent » se posait en plein sur le mot
 * « reforme », et sur le paragraphe.
 *
 * C est le TEXTE qu on decale, pas le chevron. Les deux sont a gauche :
 * pousser le chevron vers la droite l aurait enfonce davantage dans le texte,
 * et le ramener vers le bord l aurait fait sortir de l ecran.
 *
 * 104 px = le bord droit du chevron (87) plus une respiration. Le texte gagne
 * au passage une vraie marge : colle a 16 px du bord, il paraissait tombe la
 * par accident.
 *
 * La marge droite est posee par symetrie. Elle ne sert a rien sur un grand
 * ecran, ou le texte s arrete bien avant le chevron « suivant » — mais sur une
 * fenetre etroite, une ligne longue viendrait sinon passer dessous.
 * ====================================================================== */

@media (min-width: 768px) {
	.slider-section .main-slider .main-content {
		padding-left: 104px;
		padding-right: 104px;
	}
}

/*
 * 880 px au lieu des 720 du thème : 672 px utiles une fois les gouttières des
 * chevrons retirées, de quoi loger l'intitulé de la DGTCP (562 px en 16 px)
 * sur une ligne. À 720 px, « Finances publiques » manquait de 4 px.
 */
/*
 * 1040 px depuis le 1er octobre, contre 880. Meme cause que la taille du
 * titre : une phrase a besoin de largeur avant d avoir besoin d une ligne de
 * plus. La colonne reste bien en deca du conteneur de 1320 px, donc le texte ne
 * court pas sur toute l image.
 */
.slider-section .main-slider .main-content {
	max-width: 1040px;
}

/*
 * Case « Surtitre sur une seule ligne » du Personnalisateur. Sur ordinateur
 * seulement : 58 caractères ne tiennent pas sur une tablette, et la majorité
 * des usagers naviguent depuis un téléphone.
 *
 * LE TITRE N EN EST PLUS, ET C EST L AMENDEMENT DU 1er OCTOBRE QUI L IMPOSE.
 *
 * La case tenait surtitre ET titre sur une ligne. Elle le pouvait tant que les
 * titres etaient ceux des diapositives — deux mots, « Finances publiques ».
 * Depuis que le carrousel deroule les flash infos, un titre est une PHRASE :
 * « Numero vert anti-corruption : 80 00 13 23, appel gratuit » sortait de
 * l ecran par la droite, tronquee en plein milieu.
 *
 * Le surtitre, lui, garde le nowrap : c est une ligne unique par nature, et la
 * replier sur deux lignes de capitales la ferait lire comme deux intitules.
 */
@media (min-width: 992px) {
	.slider-section .main-content.dgtcp-carrousel--une-ligne h4,
	.slider-section .main-content.dgtcp-carrousel--une-ligne .dgtcp-carrousel__surtitre {
		white-space: nowrap;
	}
}

/*
 * LE TITRE NE SE COUPE PLUS, IL SE REPLIE.
 *
 * Il a ete plafonne a deux lignes, points de suspension a la cle. Le client l a
 * refuse le 1er octobre au soir, et la demonstration etait sous les yeux : le
 * titre du numero vert sortait en « Numero vert anti-corruption : 80 00 13… ».
 * Un numero de telephone tronque ne se compose pas ; c est l annonce entiere
 * qui devient inutile.
 *
 * Le titre prend donc les lignes qu il lui faut. Trois lignes a 46 px font
 * 160 px, dans un bandeau de 620 : il y a la place, et la taille reduite au
 * meme amendement garde le cas a deux lignes dans la quasi-totalite des cas.
 *
 * Aucune regle ne remplace le plafond : l absence de « -webkit-line-clamp »
 * EST le correctif. Ne pas le remettre sans relire ce paragraphe.
 */

/*
 * LES CHEVRONS DISPARAISSENT SOUS 992 PX, ET IL FAUT LE FAIRE SOI-MEME.
 *
 * Ce commentaire affirmait que le theme s en chargeait : son reglage Owl porte
 * « nav: false » sous 992 px. Verification au navigateur a 390 px : les deux
 * boutons sont bien la, « display: flex », et le conteneur « .owl-nav » ne
 * porte pas la classe « disabled » qui les masquerait. Le reglage ne prend pas.
 * La mesure a donc tranche contre le code lu.
 *
 * Deux chevrons de 44 px sur un telephone mangent le quart de la largeur, et se
 * posent sur le titre. Le doigt, les pastilles et le clavier suffisent a
 * parcourir le carrousel : on les masque pour de bon.
 *
 * « display: none » et non « visibility: hidden » : un bouton seulement
 * invisible resterait atteignable au clavier, et le focus partirait sur un
 * element qu on ne voit pas.
 */
@media (max-width: 991.98px) {
	.slider-section .home-slider div.owl-nav {
		display: none;
	}
}

/* =========================================================================
 * 6. Rubrique « La DGTCP » et organigramme
 *
 * Voir page-la-dgtcp.php, page-organigramme.php et inc/organigramme.php.
 *
 * La rubrique réunit quatre volets en sections d'une même page. Le rythme
 * vient de l'alternance du visuel — à droite, puis à gauche — et d'un fond
 * alterné : deux sections identiques à la suite se liraient comme un seul
 * bloc.
 * ====================================================================== */

.dgtcp-rubrique__chapeau {
	max-width: 46rem;
	margin: 0 auto 1rem;
	text-align: center;
	color: var(--dgtcp-muted);
	font-size: 1.0625rem;
}

.dgtcp-rubrique__attente {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	background: var(--dgtcp-magenta-wash);
	border-left: 4px solid var(--dgtcp-magenta);
	border-radius: 6px;
	color: var(--dgtcp-ink);
}

.dgtcp-section {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 0;
}

/* Une section sur deux prend le fond clair : la séparation naît de la
   couleur, sans filet à dessiner. */
.dgtcp-section:nth-of-type(even) {
	background: var(--dgtcp-light);
}

.dgtcp-section__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 992px) {
	.dgtcp-section__grille {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	/* L'ordre du BALISAGE reste texte puis image : un lecteur d'écran et un
	   usager au clavier rencontrent toujours le titre avant l'illustration.
	   Seul l'affichage inverse les colonnes. */
	.dgtcp-section--visuel-gauche .dgtcp-section__texte {
		order: 2;
	}

	.dgtcp-section--visuel-gauche .dgtcp-section__visuel {
		order: 1;
	}
}

.dgtcp-section--sans-visuel .dgtcp-section__grille {
	grid-template-columns: 1fr;
	max-width: 52rem;
	margin: 0 auto;
}

.dgtcp-section__surtitre {
	margin: 0 0 0.5rem;
	color: var(--dgtcp-magenta);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dgtcp-section__titre {
	margin: 0 0 1.5rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
	line-height: 1.15;
}

.dgtcp-section__titre::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 1rem;
	border-radius: 2px;
	background: var(--dgtcp-magenta);
}

.dgtcp-section__corps {
	color: var(--dgtcp-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dgtcp-section__corps p:last-child {
	margin-bottom: 0;
}

.dgtcp-section__image {
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(26, 20, 24, 0.16);
}

.dgtcp-section__entete {
	max-width: 46rem;
	margin: 0 auto 3rem;
	text-align: center;
}

.dgtcp-section__entete .dgtcp-section__titre::after {
	margin-left: auto;
	margin-right: auto;
}

/* --- Courbes décoratives -------------------------------------------------
 *
 * Tracées en SVG inline par dgtcp_courbes_decoratives(), posées derrière le
 * contenu. Leur discrétion est délibérée : une opacité forte les
 * transformerait en motif, alors qu'elles ne doivent qu'animer le fond.
 * ---------------------------------------------------------------------- */

.dgtcp-courbes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--dgtcp-magenta);
	opacity: 0.14;
	pointer-events: none;
	z-index: 0;
}

.dgtcp-section--decor > .container {
	position: relative;
	z-index: 1;
}

/* --- Organigramme ------------------------------------------------------- */

.dgtcp-orga {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dgtcp-orga__sommet {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Trait de rattachement entre deux échelons de la colonne vertébrale. */
.dgtcp-orga__lien-vertical {
	display: block;
	width: 2px;
	height: 36px;
	background: var(--dgtcp-magenta);
	opacity: 0.45;
}

.dgtcp-orga__groupe {
	width: 100%;
	margin-bottom: 2.5rem;
}

.dgtcp-orga__groupe-titre {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin: 0 0 1.5rem;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dgtcp-orga__rangee {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

/* --- Carte d'entité, retournable --------------------------------------
 *
 * Hauteur FIXE et rotation sur place. La version précédente dépliait le
 * responsable sous la carte : elle grandissait, poussait ses voisines, et
 * toute la page se réorganisait au moindre passage de souris. Une carte qui
 * pivote occupe la même place avant et après, donc plus rien ne bouge
 * autour d'elle.
 * ---------------------------------------------------------------------- */

.dgtcp-orga__carte {
	width: 190px;
	height: 232px;
	/* La perspective donne sa profondeur au retournement ; sans elle, la
	   carte s'aplatirait au lieu de pivoter. */
	perspective: 1100px;
	background: none;
	border: 0;
	padding: 0;
}

.dgtcp-orga__carte--sommet {
	width: 260px;
	height: 268px;
}

.dgtcp-orga__pivot {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):hover .dgtcp-orga__pivot,
.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):focus .dgtcp-orga__pivot,
.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):focus-within .dgtcp-orga__pivot {
	transform: rotateY(180deg);
}

.dgtcp-orga__carte:focus {
	outline: none;
}

/* Les deux faces se superposent. backface-visibility masque celle qui est
   tournée vers l'arrière au RENDU seulement : le texte reste dans l'arbre
   d'accessibilité, donc lisible par un lecteur d'écran sans survol. */
.dgtcp-orga__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1rem;
	background: var(--dgtcp-white);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 12px;
	text-align: center;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 4px 14px rgba(26, 20, 24, 0.06);
}

.dgtcp-orga__face--arriere {
	transform: rotateY(180deg);
	justify-content: center;
	background: var(--dgtcp-magenta);
	border-color: var(--dgtcp-magenta);
}

.dgtcp-orga__carte--sommet .dgtcp-orga__face--avant {
	background: var(--dgtcp-magenta-wash);
}

/* Le filet haut coloré par catégorie a été RETIRÉ à la demande du comité : les
   cartes sont désormais bordées d'un seul trait gris. Les couleurs des familles
   de structures ne sont donc plus rappelées ici — si le besoin revient, les
   reposer sur autre chose que la bordure (pastille, couleur du libellé). */

.dgtcp-orga__portrait {
	margin-bottom: 0.875rem;
}

.dgtcp-orga__photo,
.dgtcp-orga__silhouette {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta);
	font-size: 1.75rem;
	border: 3px solid var(--dgtcp-white);
	box-shadow: 0 0 0 1px var(--dgtcp-rule);
}

.dgtcp-orga__carte--sommet .dgtcp-orga__photo,
.dgtcp-orga__carte--sommet .dgtcp-orga__silhouette {
	width: 96px;
	height: 96px;
	font-size: 2.25rem;
}

.dgtcp-orga__nom {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

.dgtcp-orga__carte--sommet .dgtcp-orga__nom {
	font-size: 1.0625rem;
}

/* --- Face arrière ------------------------------------------------------- */

.dgtcp-orga__fonction {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dgtcp-orga__responsable {
	margin: 0.375rem 0 0;
	color: var(--dgtcp-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.dgtcp-orga__mission {
	margin: 0.625rem 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.8125rem;
	line-height: 1.45;
	/* La hauteur est fixe : une mission trop longue est tronquée
	   proprement plutôt que de déborder de la carte. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dgtcp-orga__carte--sommet .dgtcp-orga__mission {
	-webkit-line-clamp: 6;
}

/* Un usager ayant demandé moins d'animations ne veut pas d'une carte qui
   tourne : les deux faces se croisent alors en fondu, sans rotation. */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-orga__pivot {
		transition: none;
	}

	.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):hover .dgtcp-orga__pivot,
	.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):focus .dgtcp-orga__pivot,
	.dgtcp-orga__carte:not(.dgtcp-orga__carte--sans-dos):focus-within .dgtcp-orga__pivot {
		transform: none;
	}

	.dgtcp-orga__face--arriere {
		transform: none;
		opacity: 0;
		backface-visibility: visible;
		transition: opacity 0.2s ease;
	}

	.dgtcp-orga__carte:hover .dgtcp-orga__face--arriere,
	.dgtcp-orga__carte:focus .dgtcp-orga__face--arriere,
	.dgtcp-orga__carte:focus-within .dgtcp-orga__face--arriere {
		opacity: 1;
	}
}

.dgtcp-orga__vide {
	padding: 2rem;
	background: var(--dgtcp-light);
	border-radius: 10px;
	color: var(--dgtcp-muted);
	text-align: center;
}

.dgtcp-orga__retour {
	margin-top: 2.5rem;
	text-align: center;
}

.dgtcp-orga__retour a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--dgtcp-magenta);
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.dgtcp-orga__carte,
	.dgtcp-orga__carte--sommet {
		width: 100%;
		max-width: 320px;
	}

	.dgtcp-orga__rangee {
		gap: 1rem;
	}
}


/* =========================================================================
 * 10. Foire aux questions
 *
 * Voir page-faq.php, inc/faq.php et assets/js/faq.js.
 *
 * Chaque question est un <details> natif : le dépliage, le clavier et les
 * lecteurs d'écran fonctionnent sans JavaScript. Le script n'ajoute que la
 * recherche instantanée.
 * ====================================================================== */

.dgtcp-faq-section {
	background: var(--dgtcp-white);
}

.dgtcp-faq {
	max-width: 56rem;
	margin: 0 auto;
}

/* --- Champ de recherche -------------------------------------------------- */

.dgtcp-faq__recherche {
	margin-bottom: 2rem;
	padding: 1.75rem;
	background: var(--dgtcp-light);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 12px;
}

.dgtcp-faq__recherche label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dgtcp-faq__saisie {
	position: relative;
	display: block;
}

.dgtcp-faq__saisie i {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
	color: var(--dgtcp-magenta);
	pointer-events: none;
}

.dgtcp-faq__saisie input[type="search"] {
	width: 100%;
	height: 52px;
	padding: 0 1rem 0 2.75rem;
	background: var(--dgtcp-white);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 8px;
	color: var(--dgtcp-ink);
	font-size: 1rem;
}

.dgtcp-faq__saisie input[type="search"]:focus {
	border-color: var(--dgtcp-magenta);
	outline: 2px solid rgba(240, 0, 141, 0.25);
	outline-offset: 1px;
}

.dgtcp-faq__aide {
	margin: 0.75rem 0 0;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

/* Le décompte visible suffit à l'écran ; cette région ne sert qu'aux
   lecteurs d'écran, pour qu'ils entendent le résultat changer. */
.dgtcp-faq__annonce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Sommaire des catégories --------------------------------------------- */

.dgtcp-faq__sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 2.5rem;
}

.dgtcp-faq__puce {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--dgtcp-white);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 999px;
	color: var(--dgtcp-ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dgtcp-faq__puce:hover,
.dgtcp-faq__puce:focus-visible {
	background: var(--dgtcp-magenta);
	border-color: var(--dgtcp-magenta);
	color: var(--dgtcp-white);
}

.dgtcp-faq__puce-compte {
	min-width: 1.5rem;
	padding: 0.0625rem 0.375rem;
	background: var(--dgtcp-magenta-wash);
	border-radius: 999px;
	color: var(--dgtcp-magenta);
	font-size: 0.75rem;
	text-align: center;
}

.dgtcp-faq__puce:hover .dgtcp-faq__puce-compte,
.dgtcp-faq__puce:focus-visible .dgtcp-faq__puce-compte {
	background: rgba(255, 255, 255, 0.24);
	color: var(--dgtcp-white);
}

/* --- Catégories ---------------------------------------------------------- */

.dgtcp-faq__groupe {
	margin-bottom: 2.75rem;
	/* L'en-tête du thème est collant : sans ce décalage, un lien du sommaire
	   amènerait le titre de la catégorie sous la barre de navigation. */
	scroll-margin-top: 110px;
}

.dgtcp-faq__groupe-titre {
	margin: 0 0 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--dgtcp-magenta);
	color: var(--dgtcp-ink);
	font-size: 1.375rem;
}

.dgtcp-faq__groupe-intro {
	margin: 0 0 1.25rem;
	color: var(--dgtcp-muted);
	font-size: 0.9375rem;
}

.dgtcp-faq__liste {
	margin-top: 1.25rem;
}

/* --- Question dépliable -------------------------------------------------- */

.dgtcp-faq__question {
	margin-bottom: 0.75rem;
	background: var(--dgtcp-white);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dgtcp-faq__question[open] {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 6px 22px rgba(26, 20, 24, 0.08);
}

.dgtcp-faq__intitule {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

/* Le triangle par défaut du navigateur est remplacé par un chevron aligné à
   droite, cohérent avec le reste du site. */
.dgtcp-faq__intitule::-webkit-details-marker {
	display: none;
}

.dgtcp-faq__intitule::marker {
	content: "";
}

.dgtcp-faq__intitule:hover {
	color: var(--dgtcp-magenta);
}

.dgtcp-faq__intitule:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: -2px;
}

.dgtcp-faq__chevron {
	flex: 0 0 auto;
	color: var(--dgtcp-magenta);
	font-size: 0.875rem;
	transition: transform 0.25s ease;
}

.dgtcp-faq__question[open] .dgtcp-faq__chevron {
	transform: rotate(180deg);
}

.dgtcp-faq__reponse {
	padding: 0 1.375rem 1.375rem;
	color: var(--dgtcp-ink-soft);
	line-height: 1.7;
}

.dgtcp-faq__reponse > *:first-child {
	margin-top: 0;
}

.dgtcp-faq__reponse > *:last-child {
	margin-bottom: 0;
}

.dgtcp-faq__reponse a {
	color: var(--dgtcp-magenta);
	font-weight: 600;
}

/* --- Absence de résultat ------------------------------------------------- */

.dgtcp-faq__vide {
	max-width: 34rem;
	margin: 0 auto;
	padding: 3rem 2rem;
	background: var(--dgtcp-light);
	border: 1px solid var(--dgtcp-rule);
	border-radius: 12px;
	text-align: center;
	color: var(--dgtcp-muted);
}

.dgtcp-faq__vide-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 1.25rem;
	background: var(--dgtcp-magenta-wash);
	border-radius: 50%;
	color: var(--dgtcp-magenta);
	font-size: 1.875rem;
}

.dgtcp-faq__vide-titre {
	margin: 0 0 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 600;
}

.dgtcp-faq__bouton {
	display: inline-flex;
	align-items: center;
	height: 46px;
	margin-top: 1rem;
	padding: 0 1.75rem;
	background: var(--dgtcp-magenta);
	border-radius: 8px;
	color: var(--dgtcp-white);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.dgtcp-faq__bouton:hover,
.dgtcp-faq__bouton:focus-visible {
	background: var(--dgtcp-magenta-dark);
	color: var(--dgtcp-white);
}

@media (max-width: 575.98px) {
	.dgtcp-faq__recherche {
		padding: 1.25rem;
	}

	.dgtcp-faq__intitule {
		padding: 1rem;
		font-size: 1rem;
	}

	.dgtcp-faq__reponse {
		padding: 0 1rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-faq__question,
	.dgtcp-faq__chevron,
	.dgtcp-faq__puce,
	.dgtcp-faq__bouton {
		transition: none;
	}
}


/* =========================================================================
 * 26. Décors de fond — page d'accueil seulement
 *
 * Ces motifs sont ceux qu'on voit derrière les sections des portails
 * institutionnels : une trame de points, un filet qui relie deux blocs.
 *
 * TOUT EST DESSINÉ EN CSS, aucune image.
 *
 *   - la trame de points est un radial-gradient répété : une déclaration,
 *     zéro requête HTTP, et elle suit la couleur de la palette ;
 *   - les filets sont des pseudo-éléments bordés.
 *
 * Sur une connexion 3G — la règle au Burkina — trois fichiers décoratifs de
 * plus se paieraient à chaque visite pour un ornement que personne ne
 * regarde. C'est le genre de dépense qui ne se voit pas et qui coûte.
 *
 * L'opacité est basse à dessein : un décor qui se remarque n'est plus un
 * décor, c'est un motif qui concurrence le texte. On le voit en fermant les
 * yeux à demi ; on ne le lit pas.
 *
 * RÉSERVÉ À L'ACCUEIL, comme demandé : la classe .home que WordPress pose sur
 * <body> suffit à les cantonner, sans qu'aucun gabarit ait à le savoir.
 * ====================================================================== */

.home .dgtcp-flash-section,
.home .dgtcp-secteurs {
	position: relative;
	isolation: isolate; /* Le décor reste derrière le contenu de CETTE section. */
}

/* La trame : un point de 1,5 px tous les 22 px. Elle se fond vers le centre
   par un masque, pour ne jamais passer sous une colonne de texte. */
.home .dgtcp-flash-section::before,
.home .dgtcp-secteurs::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(var(--dgtcp-magenta) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: 0.10;
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 42%, transparent 58%, #000 100%);
	mask-image: linear-gradient(to right, #000 0%, transparent 42%, transparent 58%, #000 100%);
	pointer-events: none;
}

/*
 * Le filet de couture entre deux sections : un trait vertical court, centré,
 * ponctué d'un point. Il relie visuellement des blocs qui se suivent — c'est
 * le « petit trait qui relie les éléments » des portails institutionnels.
 */
.home .dgtcp-secteurs::after,
.home .dgtcp-eservices::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18px;
	width: 1px;
	height: 36px;
	margin-left: -0.5px;
	z-index: 1;
	background:
		linear-gradient(
			to bottom,
			var(--dgtcp-magenta) 0%,
			var(--dgtcp-magenta) 45%,
			transparent 45%
		);
	pointer-events: none;
}

.home .dgtcp-secteurs,
.home .dgtcp-eservices {
	position: relative;
}

/*
 * Réglage système « réduire les animations » : les décors sont immobiles, il
 * n'y a donc rien à désactiver. Mais en contraste élevé, une trame de points
 * devient du bruit — le système la retire.
 */
@media (prefers-contrast: more) {
	.home .dgtcp-flash-section::before,
	.home .dgtcp-secteurs::before,
	.home .dgtcp-secteurs::after,
	.home .dgtcp-eservices::after {
		display: none;
	}
}

/* =========================================================================
 * 27. Page Contact
 *
 * Deux colonnes : le visuel et les coordonnées à gauche, le formulaire à
 * droite. Le formulaire prend la colonne la plus large — c'est lui qu'on est
 * venu remplir.
 * ====================================================================== */

.dgtcp-contact__rangee {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	align-items: start;
	gap: 3rem;
}

.dgtcp-contact__visuel {
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 4 / 3;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-contact__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dgtcp-contact__liste {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.dgtcp-contact__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.dgtcp-contact__pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-size: 1.0625rem;
}

.dgtcp-contact__texte {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dgtcp-contact__libelle {
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
	line-height: 1.3;
}

.dgtcp-contact .dgtcp-contact__valeur {
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.dgtcp-contact .dgtcp-contact__valeur:hover,
.dgtcp-contact .dgtcp-contact__valeur:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

/* --- Le formulaire ------------------------------------------------------- */

.dgtcp-contact__formulaire {
	padding: 2rem;
	background: var(--dgtcp-portail-carte);
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
}

.dgtcp-formulaire__ligne {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.15rem;
}

/* Deux champs courts par ligne : le courriel et le téléphone tiennent
   ensemble, et le formulaire y gagne une ligne de moins à parcourir. */
.dgtcp-formulaire__paire {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 1rem;
}

.dgtcp-contact label {
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.dgtcp-formulaire__requis {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-contact input[type="text"],
.dgtcp-contact input[type="email"],
.dgtcp-contact input[type="tel"],
.dgtcp-contact select,
.dgtcp-contact textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: var(--dgtcp-portail-carte);
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 8px;
	color: var(--dgtcp-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Le focus est visible ET distinct du survol : c'est la seule indication dont
 * dispose quelqu'un qui remplit le formulaire au clavier. Une ombre plutôt
 * qu'une bordure épaissie, pour que le champ ne bouge pas d'un pixel.
 */
.dgtcp-contact input:focus-visible,
.dgtcp-contact select:focus-visible,
.dgtcp-contact textarea:focus-visible {
	outline: none;
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 0 0 3px var(--dgtcp-magenta-wash);
}

.dgtcp-contact textarea {
	resize: vertical;
	min-height: 150px;
}

.dgtcp-formulaire__envoi {
	margin: 1.5rem 0 0;
}

.dgtcp-contact input[type="submit"] {
	padding: 0.85rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.dgtcp-contact input[type="submit"]:hover,
.dgtcp-contact input[type="submit"]:focus-visible {
	background: var(--dgtcp-ink);
}

/* Messages de Contact Form 7 : le thème ne les habille pas. */
.dgtcp-contact .wpcf7-not-valid-tip {
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
}

.dgtcp-contact .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-left: 3px solid var(--dgtcp-magenta);
	border-radius: 0 8px 8px 0;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
}

.dgtcp-contact__repli {
	margin: 0;
	color: var(--dgtcp-texte);
}

@media (max-width: 991.98px) {
	.dgtcp-contact__rangee {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 575.98px) {
	/* Les deux champs courts passent l'un sous l'autre : côte à côte sur
	   375 px, ni l'un ni l'autre n'a la place d'afficher sa saisie. */
	.dgtcp-formulaire__paire {
		grid-template-columns: minmax(0, 1fr);
	}

	.dgtcp-contact__formulaire {
		padding: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-contact input,
	.dgtcp-contact select,
	.dgtcp-contact textarea,
	.dgtcp-contact input[type="submit"] {
		transition: none;
	}
}

/* =========================================================================
 * 28. Carte du Burkina Faso derrière les chiffres clés
 *
 * La silhouette du pays, remplie d'une trame de points, posée derrière les
 * quatre nombres. Elle dit sans un mot ce que les chiffres racontent : un
 * réseau qui couvre le territoire — 13 directions régionales, plus de
 * 500 agents.
 *
 * COMMENT C'EST FAIT
 *
 * Un seul SVG en data URI : un <pattern> de cercles, et un <path> rempli par
 * ce motif. La découpe se fait donc toute seule, sans masque ni image
 * matricielle, et le tout reste net à n'importe quelle taille. Zéro requête
 * HTTP — ce qui compte sur une connexion 3G.
 *
 * CE QUE CETTE CARTE N'EST PAS
 *
 * Une silhouette SIMPLIFIÉE, tracée à une trentaine de sommets depuis les
 * coordonnées du pays (9,4° à 15,1° de latitude nord, 5,5° ouest à 2,4° est).
 * Elle est reconnaissable, elle n'est pas exacte : ce n'est pas une source
 * cartographique et elle ne doit jamais servir à en tenir lieu. Décor, et
 * rien d'autre.
 *
 * Si la DGTCP fournit un tracé officiel, il remplacera le « d » du path sans
 * qu'aucune autre ligne ne bouge.
 * ====================================================================== */

.dgtcp-key-figures {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.dgtcp-key-figures::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: min(720px, 78%);
	aspect-ratio: 800 / 590;
	transform: translate(-50%, -50%);
	opacity: 0.13;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 590'%3E%3Cdefs%3E%3Cpattern id='d' width='15' height='15' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='4' cy='4' r='2.6' fill='%23f0008d'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23d)' d='M10,330 L30,270 L118,220 L168,180 L207,120 L267,90 L356,100 L454,70 L504,12 L573,30 L602,90 L652,120 L751,180 L790,250 L760,280 L701,320 L672,400 L642,420 L602,420 L573,410 L543,410 L504,420 L464,430 L277,430 L267,560 L237,530 L158,550 L109,530 L59,490 L10,480 L20,420 L59,370 Z'/%3E%3C/svg%3E");
	pointer-events: none;
}

/*
 * Sous 768 px, la carte disparaît. Réduite à la largeur d'un téléphone, sa
 * trame se resserre au point de devenir un aplat sale derrière les nombres —
 * et c'est eux qu'on vient lire.
 */
@media (max-width: 767.98px) {
	.dgtcp-key-figures::before {
		display: none;
	}
}

/* En contraste élevé, tout décor s'efface : même règle que la trame de fond. */
@media (prefers-contrast: more) {
	.dgtcp-key-figures::before {
		display: none;
	}
}

/* =========================================================================
 * 29. Fond des pages FAQ et Contact
 *
 * Le gris clair qui alterne déjà sur la page d'accueil. Sur une page
 * intérieure, il détache le contenu de l'en-tête blanc — sans lui, la barre
 * de navigation et le corps de page se confondent en une seule surface.
 *
 * Le fond est posé sur la SECTION et non sur le <body> : le pied de page
 * garde ainsi son encre, et l'en-tête son blanc.
 * ====================================================================== */

.dgtcp-faq-section,
.dgtcp-contact {
	background: var(--dgtcp-portail-alterne);
}

/*
 * Les blocs qui vivent dessus repassent en blanc, faute de quoi ils
 * disparaîtraient dans le fond : une carte de la même couleur que son support
 * n'est plus une carte.
 */
.dgtcp-contact__formulaire,
.dgtcp-faq-section .dgtcp-faq__question,
.dgtcp-faq-section .dgtcp-faq__groupe {
	background: var(--dgtcp-portail-carte);
}

/* =========================================================================
 * 29 bis. Les 8 px de defilement horizontal du pied de page
 *
 * Mesure sur un ecran de 1440 px : scrollWidth 1438 pour un clientWidth de
 * 1430. La page gagnait une barre de defilement horizontale de 8 px — assez
 * pour qu on puisse pousser le contenu de cote au doigt sur un telephone,
 * ce que le cahier des charges range parmi les defauts de responsive.
 *
 * La cause est dans le pied de page du theme : une rangee Bootstrap « g-5 »
 * porte une marge negative de 24 px de chaque cote, posee dans un .container
 * qui n a que 16 px de marge interne a lui opposer. Il manque 8 px.
 *
 * On rend au conteneur les 24 px qu il doit compenser, plutot que de masquer
 * le debordement : masquer aurait cache le symptome et laisse la rangee
 * decalee de 8 px vers la gauche.
 * ====================================================================== */

.main-footer .footer-main > .container {
	padding-left: 24px;
	padding-right: 24px;
}

/* =========================================================================
 * 30 a. Le texte de la diapositive remonte au-dessus des tuiles
 *
 * Les cartes mordent sur les 80 derniers pixels du carrousel, et le bloc de
 * texte de la diapositive y finissait : mesure, le bouton « Decouvrir la
 * DGTCP » se terminait a 737 px quand les cartes commencaient a 663. Il
 * disparaissait purement et simplement derriere la premiere carte.
 *
 * Le theme centre ce bloc verticalement dans une cellule de tableau. Une marge
 * interne basse deplace donc le centre vers le haut de la MOITIE de sa valeur :
 * il en faut le double du chevauchement pour remonter le texte d autant.
 * ====================================================================== */

@media (min-width: 1200px) {
	/*
	 * ON DEPLACE LE BLOC, ON NE JOUE PAS SUR LE CENTRAGE.
	 *
	 * Le reflexe serait une marge interne basse sur la cellule du tableau, qui
	 * remonterait le contenu centre de la moitie de sa valeur. Elle n a eu
	 * aucun effet : mesure faite, la cellule fait 742 px de haut pour un
	 * carrousel de 620, donc elle DEBORDE et le centrage vertical ne joue plus.
	 * Sa hauteur ne vient pas du carrousel mais de son propre contenu.
	 *
	 * Un decalage direct, lui, ne depend d aucun calcul de centrage.
	 */
	.home .slider-section .main-content {
		position: relative;
		top: -45px;
	}
}

/* =========================================================================
 * 30 bis. La rangee de tuiles a cheval sur le carrousel
 *
 * La mise en page du site vitrine dont le comite a fourni la capture : les
 * cartes remontent derriere le bas de l image d accueil. C est le seul
 * dispositif de la page qui relie deux sections l une a l autre, et il fait
 * l accroche a lui seul.
 *
 * COMMENT LE FOND RESTE TRANSPARENT LA-HAUT
 *
 * La section est blanche. Une simple marge negative aurait donc fait monter un
 * bandeau blanc pleine largeur par-dessus le bas de l image, et l image aurait
 * disparu entre les cartes — l inverse de l effet cherche.
 *
 * Le blanc est donc pose en DEGRADE A ARRET NET : transparent sur les
 * 80 premiers pixels, opaque ensuite. La photo reste visible derriere les
 * gouttieres, exactement comme sur la capture.
 *
 * L entete de section (« NOS DOMAINES / Secteurs regules ») est retire de
 * l accueil : sur la capture, rien ne surmonte les cartes, et le laisser
 * l aurait pose en travers de l image. Le titre reste dans le document pour
 * les lecteurs d ecran — une section sans titre casse le plan de la page.
 * Il reparait tel quel sur toute autre page qui afficherait cette section.
 *
 * RESERVE A L ACCUEIL : la classe .home que WordPress pose sur <body> suffit
 * a cantonner la regle, sans qu aucun gabarit ait a le savoir.
 * ====================================================================== */

.home .dgtcp-secteurs {
	position: relative;
	z-index: 2; /* Au-dessus du carrousel, sans quoi il recouvrirait les cartes. */
	margin-top: calc(-1 * var(--dgtcp-tuiles-chevauchement));

	/*
	 * padding-top: 0 et non la valeur du chevauchement.
	 *
	 * Le reflexe — marge negative d un cote, marge interne de l autre — annule
	 * exactement ce qu il vient de faire : la BOITE monte, le contenu reste ou
	 * il etait. Mesure a l appui, les cartes recommencaient au pixel sous le
	 * carrousel, sans le moindre chevauchement.
	 *
	 * Ce sont les CARTES qui doivent monter. La marge negative suffit donc,
	 * seule, et c est le degrade qui garde la photo visible derriere elles.
	 */
	padding-top: 0;
	background: linear-gradient(
		to bottom,
		transparent 0 var(--dgtcp-tuiles-chevauchement),
		var(--dgtcp-portail-carte) var(--dgtcp-tuiles-chevauchement)
	);
}

/*
 * L entete est masque a l oeil, pas au lecteur d ecran : le titre reste dans
 * le plan du document. Les memes declarations que la classe screen-reader-text
 * de WordPress, appliquees ici pour ne pas avoir a toucher au balisage.
 */
.home .dgtcp-secteurs .dgtcp-bloc__entete {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * LA RANGEE DE TUILES EST PLUS LARGE QUE LE RESTE DE LA PAGE.
 *
 * Toutes les sections maison partagent un conteneur de 1320 px. Les quatre
 * tuiles y tenaient a 301 px chacune — demandees plus larges par le comite.
 * Leur largeur etant fixee par la rangee de quatre, seul le conteneur pouvait
 * la leur donner.
 *
 * 1600 px, et pour CETTE rangee seulement : a cheval sur l image d accueil,
 * elle ne s aligne sur aucun bloc de texte voisin, et deborder la gouttiere
 * commune y lit comme un choix — c est le dessin des portails qui posent une
 * rangee de cartes sous leur bandeau. Les sections suivantes gardent leurs
 * 1320 px, et donc leur alignement entre elles.
 *
 * Sous 1352 px de large, le conteneur occupe deja tout l ecran : ce plafond ne
 * change rien, et il n y a aucun debordement a craindre.
 */
.home .dgtcp-secteurs .container {
	max-width: var(--dgtcp-conteneur-large);
}

/*
 * Meme marge d ecran que l en-tete, et posee ICI, apres la regle ci-dessus.
 *
 * Groupee avec celle de l en-tete en debut de feuille, elle etait ecrasee :
 * meme specificite, mais placee avant. Mesure a 1440 px, le logo tombait a
 * 56 px du bord et la premiere tuile a 16 — les deux bords qu on voulait
 * aligner se decalaient de 40 px.
 */
@media (min-width: 1200px) {
	.home .dgtcp-secteurs .container {
		max-width: min(var(--dgtcp-conteneur-large), calc(100% - 2 * var(--dgtcp-marge-ecran)));
	}

	/*
	 * TOUS LES BLOCS DE L ACCUEIL PRENNENT LA MEME MARGE QUE LES TUILES.
	 *
	 * La regle commune plus haut les plafonne a 1320 px, pensee pour la
	 * longueur de ligne des trois colonnes d actualites. Les tuiles, elles,
	 * s alignent sur le logo de l en-tete. A 1920 px l ecart atteint 440 px :
	 * le bord gauche des cartes changeait d un bloc a l autre en descendant
	 * la page.
	 *
	 * Portee au .home : .dgtcp-bloc sert aussi aux pages Contact et Secteur,
	 * ou le plafond de 1320 px reste le bon — une page de lecture, pas un
	 * portail de cartes.
	 *
	 * Specificite (0,3,0) contre (0,2,0) pour la regle commune : elle passe
	 * au-dessus quelle que soit sa place dans la feuille.
	 *
	 * Le bandeau Flash info n en est pas : il occupe toute la largeur par
	 * construction, c est une bande et non un bloc de contenu.
	 */
	.home .dgtcp-bloc .container,
	.home .dgtcp-key-figures .container,
	.home .dgtcp-regules .container {
		max-width: min(var(--dgtcp-conteneur-large), calc(100% - 2 * var(--dgtcp-marge-ecran)));
	}
}

/*
 * Sous 1200 px, le carrousel garde sa hauteur et les tuiles s empilent : le
 * chevauchement n a plus de sens — une carte pleine largeur posee a cheval
 * masquerait le bas de l image au lieu de le border. La section reprend donc
 * sa mise en page ordinaire, entete compris.
 */
@media (max-width: 1199.98px) {
	.home .dgtcp-secteurs {
		margin-top: 0;
		padding-top: 3.5rem;
		background: var(--dgtcp-portail-carte);
	}

	.home .dgtcp-secteurs .dgtcp-bloc__entete {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 2.25rem;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

/* =========================================================================
 * 31. Sommaire de rubrique
 *
 * Voir page-sommaire.php. Une grille de cartes, une par sous-rubrique. Elle
 * donne une page d accueil aux quatre rubriques du cahier des charges qui n en
 * avaient pas : E-services, Reformes, Bibliotheque, Relation clientele.
 * ====================================================================== */

.dgtcp-sommaire {
	padding: 4rem 0 5rem;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-sommaire__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/*
 * position: relative porte le lien etendu de la carte (voir plus bas). Sans
 * lui, le ::after se calerait sur le premier ancetre positionne — ici la
 * section entiere — et un seul clic n importe ou sur la page ouvrirait la
 * premiere sous-rubrique.
 */
.dgtcp-sommaire__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 10px;
	background: var(--dgtcp-portail-carte);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dgtcp-sommaire__carte:hover,
.dgtcp-sommaire__carte:focus-within {
	transform: translateY(-3px);
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 12px 28px rgba(26, 20, 24, 0.1);
}

/*
 * Le cadre de l image porte le rapport, et l image le remplit en object-fit.
 * Le rapport pose sur l image elle-meme ne tiendrait pas : aspect-ratio est
 * une taille PREFEREE, qui cede devant les dimensions intrinseques du fichier
 * — c est ce qui avait deforme une carte des secteurs, dont la photo etait
 * carree quand le cadre attendait du 4:3.
 */
.dgtcp-sommaire__visuel {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-sommaire__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dgtcp-sommaire__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.5rem;
}

.dgtcp-sommaire .dgtcp-sommaire__titre {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: 1.1875rem;
	line-height: 1.35;
}

/*
 * Le lien couvre la carte entiere : toute la surface est cliquable, alors
 * qu un seul lien est annonce. C est la technique dite du « lien etendu » —
 * preferable a un <a> autour de la carte, qui ferait lire l image, le resume
 * et la fleche comme un seul intitule interminable.
 */
.dgtcp-sommaire .dgtcp-sommaire__titre a {
	color: inherit;
	text-decoration: none;
}

.dgtcp-sommaire .dgtcp-sommaire__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dgtcp-sommaire__carte:hover .dgtcp-sommaire__titre a,
.dgtcp-sommaire__carte:focus-within .dgtcp-sommaire__titre a {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-sommaire__resume {
	margin: 0;
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* La fleche se pousse en bas de carte : les cartes d une meme rangee ont
   alors leur fleche a la meme hauteur, quelle que soit la longueur du texte. */
.dgtcp-sommaire__fleche {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--dgtcp-magenta);
	font-size: 1rem;
	transition: transform 0.2s ease;
}

.dgtcp-sommaire__carte:hover .dgtcp-sommaire__fleche {
	transform: translateX(4px);
}

/* Un mouvement decoratif ne doit pas s imposer a qui l a refuse au niveau du
   systeme : meme regle que pour le bandeau defilant. */
@media (prefers-reduced-motion: reduce) {
	.dgtcp-sommaire__carte,
	.dgtcp-sommaire__fleche {
		transition: none;
	}

	.dgtcp-sommaire__carte:hover,
	.dgtcp-sommaire__carte:focus-within {
		transform: none;
	}

	.dgtcp-sommaire__carte:hover .dgtcp-sommaire__fleche {
		transform: none;
	}
}

/* =========================================================================
 * 32. Page d un secteur regule
 *
 * Voir page-secteur.php. Trois bandes :
 *
 *   1. l en-tete — la photo de la tuile et sa pastille, le chapeau, et le
 *      sommaire des parties en pastilles cliquables ;
 *   2. le corps — les parties, une par titre de niveau 2, les textes
 *      reglementaires en accordeons ;
 *   3. les autres secteurs, et le retour a l accueil.
 *
 * La photo et la pastille reprennent la tuile d accueil : le visiteur qui
 * clique sur « Banques » doit reconnaitre, en arrivant, ce sur quoi il a
 * clique.
 * ====================================================================== */

.dgtcp-secteur-page__entete {
	padding: 3.5rem 0 4.5rem;
	background: var(--dgtcp-portail-alterne);
}

/*
 * La rangee d introduction tombe sur les memes bords que le corps.
 *
 * Sans ce plafond elle occupait les 1500 px du conteneur quand le corps
 * s arretait a 1200 : la photo partait 104 px plus a gauche et le texte
 * finissait 104 px plus a droite que tout ce qui suit. Une seule colonne pour
 * toute la page — photo, chapeau, corps, communiques, actualites.
 */
.dgtcp-secteur-page__rangee {
	max-width: 75rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 3rem;
}

/*
 * Le visuel deborde volontairement : la pastille mord sur le bas de la photo.
 * Le cadre arrondi, lui, rogne l image — d ou deux boites, et non une seule
 * en overflow: hidden qui aurait coupe la pastille en deux.
 */
.dgtcp-secteur-page__visuel {
	position: relative;
	aspect-ratio: 4 / 3;
}

.dgtcp-secteur-page__cadre {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-secteur-page__cadre img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dgtcp-secteur-page__cadre--vide {
	background: linear-gradient(160deg, var(--dgtcp-magenta-wash) 0%, var(--dgtcp-portail-carte) 100%);
}

.dgtcp-secteur-page__pastille {
	position: absolute;
	left: 1.75rem;
	bottom: -34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-size: 1.5rem;
	box-shadow: 0 0 0 5px var(--dgtcp-portail-alterne);
}

.dgtcp-secteur-page__chapeau {
	margin: 0 0 1.75rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.6;
}

.dgtcp-secteur-page__chapeau > :last-child {
	margin-bottom: 0;
}

/*
 * Le sommaire en pastilles. 44 px de haut : ce sont des cibles tactiles, et
 * la majorite des usagers arrive d un telephone.
 */
.dgtcp-secteur-page__sommaire ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Specificite (0,2,1) : le theme cible les liens par a:not(.comments-count), (0,1,1). */
.dgtcp-secteur-page .dgtcp-secteur-page__sommaire a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dgtcp-secteur-page .dgtcp-secteur-page__sommaire a:hover,
.dgtcp-secteur-page .dgtcp-secteur-page__sommaire a:focus-visible {
	border-color: var(--dgtcp-magenta);
	color: var(--dgtcp-magenta-texte);
}

/* --- Le corps ------------------------------------------------------------ */

.dgtcp-secteur-page__corps {
	padding: 4rem 0 3.5rem;
	background: var(--dgtcp-portail-carte);
}

/*
 * 52 rem : au-dela, une ligne de texte depasse les 90 caracteres et l oeil
 * perd le debut de la suivante. Les parties sont faites pour etre lues.
 */
/*
 * LA COLONNE S ELARGIT DE 52 A 75 REM.
 *
 * A 52 rem — 832 px — le contenu n occupait qu une fenetre de 1440 sur deux,
 * et la page des jeux de hasard s etirait sur 7,7 ecrans. Mesure a plusieurs
 * largeurs, avec le contenu reel : 4 223 px en une colonne de 832, contre
 * ~2 573 px sur deux colonnes de 580 — soit 39 % de moins.
 *
 * La moitie du gain vient de la largeur, l autre du nombre de colonnes : a
 * 396 px, une liste grandit de 88 % et un bloc fichier de 53 %, ce qui mange
 * une bonne part de ce qu on croit gagner en coupant.
 */
.dgtcp-secteur-page__contenu,
.dgtcp-secteur-page__communiques {
	max-width: 75rem;

	/*
	 * LE PLAFOND SANS LE CENTRAGE LAISSAIT TOUT LE BLANC A DROITE.
	 *
	 * Le conteneur du theme plafonne a 1500 px et se centre. Le corps, lui,
	 * plafonnait a 1200 px sans marge automatique : il restait colle a gauche
	 * et les 300 px restants s accumulaient du seul cote droit. Mesure a
	 * 1920 : 226 px a gauche, 494 a droite.
	 *
	 * On centre plutot que d elargir : a 1500 px, une colonne sur deux fait
	 * 710 px, soit 89 caracteres par ligne — au-dela des 90 que cette feuille
	 * se donne pour limite plus haut. A 1200 px centre, la colonne fait 576 px
	 * et 72 caracteres.
	 */
	margin-inline: auto;
}

/*
 * Le corps du secteur, sur deux colonnes a partir du premier titre.
 *
 * DEUX COLONNES TYPOGRAPHIQUES, ET NON UNE GRILLE. Une grille aligne ses
 * rangees : « Le texte fondateur » fait 252 px et « Loteries et tombolas »
 * 955 px, ce qui laissait 700 px de blanc sous le premier. Mesure sur la page
 * des jeux de hasard : 3 637 px avec une grille, pour 2 800 px de contenu
 * reel. Les colonnes, elles, comblent au fur et a mesure.
 *
 * « break-inside: avoid » est ce qui rend la chose sure : sans lui, un flux a
 * deux colonnes couperait une liste de pieces a fournir ou le tableau des
 * cautions d une colonne a l autre. Avec lui, chaque partie reste d un seul
 * tenant et le navigateur se contente de choisir ou la poser.
 *
 * Le seuil est a 62rem : en dessous, deux colonnes tomberaient sous les
 * 460 px, ou le texte se reenroule plus qu il ne gagne — a 396 px, une liste
 * grandit de 88 %.
 */
.dgtcp-secteur-grille {
	column-gap: 3rem;
}

.dgtcp-secteur-bloc {
	break-inside: avoid;
}

@media (min-width: 62em) {
	.dgtcp-secteur-grille {
		column-count: 2;
	}

	/* Un titre de partie qui coiffe des sous-parties barre les deux colonnes. */
	.dgtcp-secteur-bloc--pleine {
		column-span: all;
	}
}

/*
 * SEUL le tout premier bloc perd sa marge haute.
 *
 * La regle visait auparavant le premier enfant de CHAQUE bloc, du temps ou un
 * bloc valait une partie entiere. Depuis que le corps est decoupe au grain de
 * l element, chaque paragraphe est un bloc : la regle leur aurait retire a tous
 * leur marge haute et aurait soude le texte.
 */
.dgtcp-secteur-grille > :first-child > :first-child {
	margin-top: 0;
}

/*
 * Les intitules de documents ne sont pas justifies.
 *
 * Le theme justifie tout le corps, hyphenation comprise, et c est tenable pour
 * de la prose. Mais une reference de decret — « n° 2010-829/PRES/PM/MEF/SECU/
 * MATD/MTSS du 31 decembre 2010 portant conditions d exploitation... » — est
 * faite de blocs insecables. Sur une colonne de 576 px, la justification
 * ecartait les mots jusqu a trouer la ligne.
 *
 * On ne leve la justification QUE la : le reste du corps garde le parti pris
 * du theme.
 */
.wp-block-file,
.wp-block-file a {
	text-align: left;
}

/*
 * scroll-margin-top : l en-tete est collant. Sans cette marge, un clic dans le
 * sommaire faisait arriver le titre de la partie SOUS la barre de navigation.
 */
.dgtcp-secteur-page__contenu h2,
.dgtcp-secteur-page__communiques h2 {
	scroll-margin-top: calc(var(--dgtcp-entete-h) + 1.5rem);
	margin: 3rem 0 1.25rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
	color: var(--dgtcp-ink);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	line-height: 1.25;
}

.dgtcp-secteur-page__contenu > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.dgtcp-secteur-page__contenu p,
.dgtcp-secteur-page__contenu li {
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.dgtcp-secteur-page__contenu ul {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
}

.dgtcp-secteur-page__contenu li::marker {
	color: var(--dgtcp-magenta);
}

/*
 * Les textes reglementaires : un bloc « Details » par texte. L intitule est
 * la ligne cliquable, le contenu se deplie dessous.
 *
 * Le triangle natif est remplace par un « + » a droite : il est plus visible,
 * et sa place fixe aligne tous les intitules a gauche quelle que soit leur
 * longueur. Le « - » dit que le texte est ouvert, sans reposer sur la couleur.
 */
.dgtcp-secteur-page__contenu details {
	margin: 0 0 0.75rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 10px;
	background: var(--dgtcp-portail-carte);
	transition: border-color 0.2s ease;
}

.dgtcp-secteur-page__contenu details[open] {
	border-color: var(--dgtcp-magenta);
}

.dgtcp-secteur-page__contenu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.9rem 1.25rem;
	color: var(--dgtcp-ink);
	font-weight: 600;
	line-height: 1.45;
	list-style: none;
	cursor: pointer;
}

.dgtcp-secteur-page__contenu summary::-webkit-details-marker {
	display: none;
}

.dgtcp-secteur-page__contenu summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--dgtcp-magenta);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
}

.dgtcp-secteur-page__contenu details[open] > summary::after {
	content: "\2212";
}

.dgtcp-secteur-page__contenu summary:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
	border-radius: 10px;
}

.dgtcp-secteur-page__contenu details > :not(summary) {
	margin: 0 1.25rem 1.25rem;
}

/* --- Les communiques du secteur ------------------------------------------ */

.dgtcp-secteur-page__communiques ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-secteur-page__communiques li {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-secteur-page__communiques time {
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
}

.dgtcp-secteur-page .dgtcp-secteur-page__communiques a {
	color: var(--dgtcp-ink);
	font-weight: 600;
	text-decoration: none;
}

.dgtcp-secteur-page .dgtcp-secteur-page__communiques a:hover,
.dgtcp-secteur-page .dgtcp-secteur-page__communiques a:focus-visible {
	color: var(--dgtcp-magenta-texte);
	text-decoration: underline;
}

/* Partie « Actualités » (amendement du 28 septembre) : le lien vers toutes
   les actualités garde l allure du lien-bouton commun, que la regle
   ci-dessus, plus specifique, aurait passe a l encre soulignee. */
.dgtcp-secteur-page__tout {
	margin: 1.5rem 0 0;
}

.dgtcp-secteur-page .dgtcp-secteur-page__communiques a.dgtcp-lien-bouton {
	color: var(--dgtcp-magenta-texte);
	text-decoration: none;
}

/* --- Les autres secteurs ------------------------------------------------- */

.dgtcp-secteur-page__autres {
	padding: 3.5rem 0 4rem;
	background: var(--dgtcp-portail-alterne);
	text-align: center;
}

.dgtcp-secteur-page__autres ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.dgtcp-secteur-page .dgtcp-secteur-page__lien-secteur {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 76px;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 12px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dgtcp-secteur-page .dgtcp-secteur-page__lien-secteur:hover,
.dgtcp-secteur-page .dgtcp-secteur-page__lien-secteur:focus-visible {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 8px 22px rgba(26, 20, 24, 0.09);
}

.dgtcp-secteur-page__lien-icone {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-size: 1.125rem;
}

.dgtcp-secteur-page__retour {
	margin: 0;
}

@media (max-width: 991.98px) {
	/*
	 * Une colonne : la photo passe au-dessus du chapeau. L ecart vertical
	 * laisse la place a la pastille, qui deborde de 34 px sous la photo.
	 */
	.dgtcp-secteur-page__rangee {
		grid-template-columns: minmax(0, 1fr);
		gap: 3.25rem;
	}

	.dgtcp-secteur-page__visuel {
		width: 100%;
		max-width: 560px;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-secteur-page__entete {
		padding: 2rem 0 3rem;
	}

	/* La colonne de date prendrait un tiers de l ecran : elle passe au-dessus. */
	.dgtcp-secteur-page__communiques li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-secteur-page .dgtcp-secteur-page__sommaire a,
	.dgtcp-secteur-page .dgtcp-secteur-page__lien-secteur,
	.dgtcp-secteur-page__contenu details {
		transition: none;
	}
}

/* =========================================================================
 * 30. Responsive — deux defauts mesures sur telephone
 * ====================================================================== */

@media (max-width: 991.98px) {
	/*
	 * LES QUATRE ENCADRES DE COORDONNEES S ALIGNENT A GAUCHE.
	 *
	 * Le theme pose justify-content: center sur .widget-contact. Chaque
	 * .contact-area se reduit alors a la largeur de SON texte, puis se centre :
	 * mesure faite, 285 px pour « Numero vert anti-corruption », 207 pour
	 * « Centre d appel », 245 pour « Nous ecrire ». Leurs icones tombaient donc
	 * a 45, 84 et 65 px du bord — trois indentations differentes dans une
	 * colonne qu on lit de haut en bas.
	 *
	 * Sur un grand ecran le defaut ne se voit pas : les quatre encadres sont
	 * cote a cote, chacun centre dans sa colonne, et c est meme voulu. Il
	 * n apparait qu une fois empiles.
	 *
	 * On aligne donc a gauche, et seulement en dessous de 992 px.
	 */
	footer .widget-contact {
		justify-content: flex-start;
		text-align: left;
	}

	footer .widget-contact .contact-area {
		width: 100%;
		text-align: left;
	}

	/*
	 * LES NUMEROS DE LA BARRE UTILITAIRE DEVIENNENT CLIQUABLES AU POUCE.
	 *
	 * Mesure : le lien « 700 » offrait 20 x 18 px. C est un numero de telephone,
	 * donc exactement ce qu on cherche a toucher depuis un telephone — et
	 * 18 px de haut, c est en dessous de tout ce qui est visable.
	 *
	 * La barre passe de 34 a 44 px et les liens l occupent sur toute sa
	 * hauteur. Le carrousel s ajuste tout seul : sa hauteur se calcule a partir
	 * de --dgtcp-utilitaire-h, c est precisement ce que la variable evitait de
	 * recalculer a la main.
	 */
	:root {
		--dgtcp-utilitaire-h: 44px;
	}

	.dgtcp-utilitaire__liens,
	.dgtcp-utilitaire__reseaux {
		align-self: stretch;
	}

	.dgtcp-utilitaire__liens > li,
	.dgtcp-utilitaire__reseaux > li {
		align-self: stretch;
	}

	/* Le lien occupe toute la hauteur de la barre : c est ce qui donne les
	   44 px, la marge interne verticale ne suffisant pas. */
	.dgtcp-utilitaire .dgtcp-utilitaire__liens a,
	.dgtcp-utilitaire .dgtcp-utilitaire__inerte {
		align-self: stretch;
		padding-top: 0;
		padding-bottom: 0;
	}

	.dgtcp-utilitaire__reseaux a {
		width: 32px;
		height: 32px;
	}
}

/*
 * SOUS 768 PX, LES COORDONNEES SE REDUISENT A LEURS PICTOGRAMMES.
 *
 * Mesure : sur un ecran de 375 px, « bdt@tresor.gov.bf », « +226 25 32 49 41 »
 * et « Ouaga 2000, Ouagadougou » demandent a eux seuls plus de 420 px. La
 * barre passait sur deux lignes, gagnait 22 px, et le carrousel descendait
 * d autant — l information du bandeau ne tenait plus au pli.
 *
 * L enveloppe, le combine et l epingle sont trois pictogrammes qu on ne
 * confond pas. Le texte qu ils remplacent reste annonce aux lecteurs d ecran :
 * chaque lien porte un aria-label complet (« Nous ecrire : bdt@... »), et ces
 * memes coordonnees sont ecrites en toutes lettres sur la page Contact et
 * dans le pied de page.
 */
@media (max-width: 767.98px) {
	.dgtcp-utilitaire__texte {
		display: none;
	}

	.dgtcp-utilitaire .dgtcp-utilitaire__liens a,
	.dgtcp-utilitaire .dgtcp-utilitaire__inerte {
		justify-content: center;
		min-width: 44px;
		padding-left: 0.4rem;
		padding-right: 0.4rem;
	}

	.dgtcp-utilitaire__liens i {
		font-size: 1rem;
	}

	/* La pastille passe de 32 a 40 px : c est une cible tactile, et 32 px se
	   rate au pouce. La barre en mesure 44, elle garde donc 2 px de marge. */
	.dgtcp-utilitaire__reseaux a {
		width: 40px;
		height: 40px;
		font-size: 0.9375rem;
	}
}

/* =========================================================================
 * 33. Petites figures — illustration du monument et flèche
 *
 * Deux ornements dans l'en-tête de « Nos e-services » (inc/decors.php) :
 * l'illustration du Monument des Martyrs à gauche, une flèche manuscrite en
 * haut à droite. Le titre reste centré, les figures occupent le vide de part
 * et d'autre.
 *
 * Sur grand écran, positionnées en absolu : elles ne prennent aucune place
 * dans le flux, et les retirer ne décale rien.
 *
 * Le monument au trait d'abord posé dans les chiffres clés a été retiré à la
 * demande du comité, avec ses règles.
 * ====================================================================== */

.dgtcp-eservices .dgtcp-bloc__entete {
	position: relative;
}

.dgtcp-decor {
	position: absolute;
	display: block;
	height: auto;
	color: var(--dgtcp-magenta);
	pointer-events: none;
}

/* La flèche tombe vers la dernière carte : sa pointe vise le haut de la
   quatrième colonne, pas le bord de l'écran. */
/*
 * LA FLECHE MANUSCRITE S EST DECALEE LE 1er NOVEMBRE.
 *
 * Elle etait a 9 % du bord droit, c est-a-dire exactement la ou « Voir tous
 * les services » vient de se poser : capture a l appui, le trace passait en
 * plein sur le libelle, et les deux devenaient illisibles.
 *
 * 20 % la ramenent entre le titre et le lien, et elle continue de pointer la
 * rangee de cartes. Elle n est utilisee que par cette section — aucune autre
 * n est touchee.
 */
.dgtcp-decor--fleche {
	top: 0.25rem;
	right: 20%;
	width: 58px;
	transform: rotate(-6deg);
}

/*
 * Le monument, À PARTIR DE 1200 px : calé sur le bord gauche de la première
 * carte, son sol à 25 px au-dessus de la rangée — la marge de l'en-tête en
 * mesure 36, d'où le décalage négatif. Il déborde vers le haut dans le
 * rembourrage de la section, comme sur la maquette validée.
 *
 * Largeur : la moitié de l'en-tête MOINS la demi-largeur du chapeau centré
 * (62ch, ~524 px) et 40 px d'air. L'illustration s'arrête ainsi toujours à la
 * même distance du texte, quelle que soit la largeur du conteneur — mesuré à
 * 1200, 1440 et 1852 px. Plafond de 340 px : le fichier en fait 680, net sur
 * écran haute densité jusque-là.
 */
.dgtcp-eservices__illustration {
	display: block;
	height: auto;
	pointer-events: none;
}

@media (min-width: 1200px) {
	.dgtcp-eservices__illustration {
		position: absolute;
		left: 0;
		bottom: calc(25px - 2.25rem);
		width: clamp(240px, calc(50% - 305px), 340px);
	}
}

/*
 * Plus étroit, le chapeau centré occupe presque toute la largeur : aucune place
 * sur le côté. L'illustration reprend alors sa place dans le flux, centrée
 * au-dessus du surtitre. Elle reste VISIBLE sur téléphone, à la demande du
 * comité ; comme elle est chargée en différé, elle ne pèse qu'une fois la
 * section approchée.
 */
@media (max-width: 1199.98px) {
	.dgtcp-eservices__illustration {
		width: min(320px, 85%);
		margin: 0 auto 1rem;
	}
}

/*
 * La flèche, elle, n'a de sens qu'à côté des cartes en rangée : sous 992 px
 * elles s'empilent, et elle toucherait le titre.
 */
@media (max-width: 991.98px) {
	.dgtcp-decor {
		display: none;
	}
}

/* En contraste élevé et à l'impression, tout décor s'efface. */
@media (prefers-contrast: more) {
	.dgtcp-decor,
	.dgtcp-eservices__illustration {
		display: none;
	}
}

@media print {
	.dgtcp-decor,
	.dgtcp-eservices__illustration {
		display: none;
	}
}

/* =========================================================================
 * 34. Rubrique en sections — sommaire collant
 *
 * Voir inc/rubriques-sections.php et assets/js/rubrique.js. Une rubrique dont
 * les sous-rubriques sont des sections d'une même page : le menu mène à
 * chacune par une ancre, et ce sommaire permet de passer de l'une à l'autre
 * sans remonter en haut de la page.
 *
 * Les styles des sections elles-mêmes sont au chapitre 6.
 * ====================================================================== */

/*
 * --dgtcp-entete-collant : hauteur de la barre de menu mobile quand le thème
 * la fixe en haut de l'écran, publiée par rubrique.js. Sans elle, le sommaire
 * collant passerait dessous. 0 sur ordinateur, où la barre ne se fixe pas.
 */
.dgtcp-rubrique__sommaire {
	position: sticky;
	top: var(--dgtcp-entete-collant, 0px);
	z-index: 20;
	background: var(--dgtcp-portail-carte);
	border-bottom: 1px solid var(--dgtcp-portail-rule);
	box-shadow: 0 6px 18px rgba(26, 20, 24, 0.06);
}

/*
 * Centrée quand elle tient, défilante quand elle ne tient plus : largeur au
 * contenu, plafonnée à celle du conteneur. Jamais sur deux lignes — un
 * sommaire collant qui double de hauteur mange l'écran d'un téléphone.
 */
.dgtcp-rubrique__sommaire ul {
	display: flex;
	gap: 0.5rem;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.625rem 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.dgtcp-rubrique__sommaire li {
	flex: 0 0 auto;
}

/* Spécificité (0,1,2) : le thème cible les liens par a:not(.comments-count), (0,1,1).
   44 px de haut : ce sont des cibles tactiles. */
.dgtcp-rubrique__sommaire ul a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.15rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dgtcp-rubrique__sommaire ul a:hover,
.dgtcp-rubrique__sommaire ul a:focus-visible {
	border-color: var(--dgtcp-magenta);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-rubrique__sommaire ul a:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

/* La section en cours de lecture. Fond magenta FONCÉ : du texte blanc sur le
   magenta du logo ne passe pas le contraste exigé pour un texte courant. */
.dgtcp-rubrique__sommaire ul a[aria-current="true"],
.dgtcp-rubrique__sommaire ul a[aria-current="page"] {
	border-color: var(--dgtcp-magenta-texte);
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

/*
 * Arrivée par une ancre : la section s'arrête sous le sommaire collant, et non
 * derrière lui.
 */
.dgtcp-rubrique--sections > .dgtcp-section {
	scroll-margin-top: calc(var(--dgtcp-entete-collant, 0px) + 4rem);
}

/* Le titre reçoit le focus à l'arrivée (rubrique.js) : pas de cadre au clic,
   seulement pour qui navigue au clavier. */
.dgtcp-rubrique--sections .dgtcp-section__titre:focus:not(:focus-visible) {
	outline: none;
}

@media (max-width: 767.98px) {
	/* Barre de défilement masquée : sous la rangée, elle se lisait comme un
	   soulignement de la première pastille. La pastille coupée au bord de
	   l'écran suffit à montrer que la rangée défile. */
	.dgtcp-rubrique__sommaire ul {
		padding: 0.5rem 0;
		scrollbar-width: none;
	}

	.dgtcp-rubrique__sommaire ul::-webkit-scrollbar {
		display: none;
	}

	.dgtcp-rubrique__sommaire ul a {
		padding: 0.45rem 0.95rem;
		font-size: 0.875rem;
	}
}

@media print {
	.dgtcp-rubrique__sommaire {
		display: none;
	}
}

/* =========================================================================
 * 35. Sections de rubrique, selon leur nature
 *
 * Voir inc/rubriques-sections-types.php. Squelette commun au chapitre 6
 * (titre, alternance des fonds) ; ici, ce qui distingue une plateforme, un
 * chantier, une liste de documents, une photothèque, un numéro de téléphone.
 * ====================================================================== */

/* --- Chapeau de la rubrique, sous le sommaire --------------------------- */

.dgtcp-rubrique__intro {
	padding: 3rem 0 0;
}

.dgtcp-rubrique__intro .dgtcp-rubrique__chapeau {
	margin-bottom: 0;
	font-size: 1.125rem;
	line-height: 1.65;
}

.dgtcp-rubrique__intro .dgtcp-rubrique__chapeau p:last-child {
	margin-bottom: 0;
}

/* Le chapeau et la première section partagent le blanc : sans resserrer,
   4,5 rem de vide les sépareraient comme deux blocs étrangers. */
.dgtcp-rubrique__intro + .dgtcp-section {
	padding-top: 3rem;
}

/* --- Boutons ------------------------------------------------------------ */

.dgtcp-section__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.dgtcp-section__actions--centre {
	justify-content: center;
}

.dgtcp-section a.dgtcp-lien-bouton:hover,
.dgtcp-section a.dgtcp-lien-bouton:focus-visible {
	background: var(--dgtcp-magenta-texte);
	border-color: var(--dgtcp-magenta-texte);
	color: #fff;
}

/* Le bouton principal d'une section est plein : c'est l'action attendue.
   Magenta FONCÉ, pour que le texte blanc passe le contraste. */
.dgtcp-section a.dgtcp-lien-bouton--plein {
	background: var(--dgtcp-magenta-texte);
	border-color: var(--dgtcp-magenta-texte);
	color: #fff;
}

/* Au survol, le bouton s'inverse : fond blanc, texte et bordure magenta. Le
   noir d'une première version jurait avec la palette du Trésor. */
.dgtcp-section a.dgtcp-lien-bouton--plein:hover,
.dgtcp-section a.dgtcp-lien-bouton--plein:focus-visible {
	background: var(--dgtcp-portail-carte);
	border-color: var(--dgtcp-magenta-texte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-section a.dgtcp-lien-bouton:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

/* --- Section vide : ce qui viendra --------------------------------------- */

.dgtcp-section__vide {
	max-width: 36rem;
	margin: 0 auto;
	padding: 2.25rem 2rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 16px;
	background: var(--dgtcp-portail-carte);
	text-align: center;
}

.dgtcp-section__vide-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-size: 1.5rem;
}

.dgtcp-section__vide-titre {
	margin: 0 0 0.4rem;
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.dgtcp-section__vide-texte {
	margin: 0;
	color: var(--dgtcp-muted);
}

.dgtcp-section__vide + .dgtcp-rubrique__attente {
	max-width: 36rem;
	margin: 1rem auto 0;
}

/* --- Plateforme (E-services) : voir le chapitre 46 ----------------------- */

/* --- FAQ (E-services) ---------------------------------------------------- */

.dgtcp-section__faq {
	max-width: 52rem;
	margin: 0 auto;
}

.dgtcp-section--faq .dgtcp-faq__question {
	background: var(--dgtcp-portail-carte);
}

/* --- Documents (Bibliothèque) -------------------------------------------- */

.dgtcp-documents {
	max-width: 52rem;
	margin: 0 auto;
}

.dgtcp-section--documents .dgtcp-section__corps > p {
	color: var(--dgtcp-muted);
	text-align: center;
}

.dgtcp-section--documents .dgtcp-section__corps + .dgtcp-section__vide {
	margin-top: 1.75rem;
}

/*
 * Chaque bloc « Fichier » devient une ligne de liste : pictogramme, nom,
 * bouton. Le pictogramme est posé en CSS pour ne rien demander au
 * gestionnaire.
 */
.dgtcp-section--documents .wp-block-file {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 12px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-section--documents .wp-block-file::before {
	content: "\f15b";
	flex: 0 0 auto;
	color: var(--dgtcp-magenta-texte);
	font-family: "Font Awesome 6 Free";
	font-size: 1.5rem;
	font-weight: 900;
}

.dgtcp-section--documents .wp-block-file a:not(.wp-block-file__button) {
	flex: 1 1 auto;
	color: var(--dgtcp-ink);
	font-weight: 600;
	text-decoration: none;
}

.dgtcp-section--documents .wp-block-file a.wp-block-file__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* --- Photothèque (Bibliothèque) ------------------------------------------ */

/*
 * Mosaïque : la photo la plus récente en grand, les suivantes autour. Les
 * règles « :last-child » bouchent les trous quand il y a moins de cinq photos,
 * pour que la grille reste pleine.
 */
.dgtcp-phototheque {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 210px;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-phototheque__photo:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.dgtcp-phototheque__photo:first-child:last-child {
	grid-column: 1 / -1;
}

.dgtcp-phototheque__photo:nth-child(2):last-child {
	grid-column: span 2;
	grid-row: span 2;
}

.dgtcp-phototheque__photo:nth-child(2):nth-last-child(2),
.dgtcp-phototheque__photo:nth-child(3):last-child,
.dgtcp-phototheque__photo:nth-child(4):last-child {
	grid-column: span 2;
}

.dgtcp-phototheque__photo a {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--dgtcp-magenta-wash);
	color: #fff;
	text-decoration: none;
}

.dgtcp-phototheque__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dgtcp-phototheque__photo a:hover img,
.dgtcp-phototheque__photo a:focus-visible img {
	transform: scale(1.04);
}

.dgtcp-phototheque__photo a:focus-visible {
	outline: 3px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

/* Voile dégradé : le texte blanc reste lisible sur n'importe quelle photo. */
.dgtcp-phototheque__legende {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 2.5rem 1rem 0.9rem;
	background: linear-gradient(to top, rgba(26, 20, 24, 0.88), rgba(26, 20, 24, 0));
}

.dgtcp-phototheque__categorie {
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dgtcp-phototheque__titre {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.dgtcp-phototheque + .dgtcp-rubrique__attente {
	margin-top: 1.25rem;
}

/* --- Vidéothèque (Bibliothèque) ------------------------------------------ */

.dgtcp-section--videotheque .dgtcp-section__corps {
	max-width: 52rem;
	margin: 0 auto;
}

.dgtcp-section--videotheque iframe,
.dgtcp-section--videotheque video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 14px;
}

/* --- Contact (Relation clientèle) ---------------------------------------- */

/* Dans une section, le fond est celui de la section, pas celui de la page
   Contact (chapitre 29). */
.dgtcp-contact.dgtcp-contact--section {
	background: transparent;
}

/*
 * Relation clientèle s'ouvre sur le formulaire : son fond gris le détache,
 * comme sur l'ancienne page Contact, et l'alternance s'inverse pour les
 * sections suivantes.
 */
.dgtcp-rubrique--relation-clientele > .dgtcp-section:nth-of-type(odd) {
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-rubrique--relation-clientele > .dgtcp-section:nth-of-type(even) {
	background: var(--dgtcp-portail-carte);
}

/* --- Téléphone (Relation clientèle) -------------------------------------- */

.dgtcp-telephone {
	position: relative;
	overflow: hidden;
	max-width: 26rem;
	margin: 0 auto;
	padding: 2.5rem 2rem 2.25rem;
	border-radius: 22px;
	background: var(--dgtcp-ink);
	color: #fff;
	text-align: center;
	box-shadow: 0 22px 50px rgba(26, 20, 24, 0.22);
}

/* Halo magenta dans l'angle : la carte sombre garde la couleur de marque. */
.dgtcp-telephone::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--dgtcp-magenta) 0%, transparent 70%);
	opacity: 0.45;
	pointer-events: none;
}

.dgtcp-telephone > * {
	position: relative;
}

.dgtcp-telephone__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--dgtcp-magenta-texte);
	font-size: 1.5rem;
}

.dgtcp-telephone__libelle {
	margin: 0 0 0.35rem;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}

.dgtcp-telephone__numero {
	margin: 0;
	color: #fff;
	font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.dgtcp-telephone--vert .dgtcp-telephone__numero {
	color: var(--dgtcp-magenta-light);
}

.dgtcp-telephone__gratuit {
	display: inline-block;
	margin: 0.75rem 0 0;
	padding: 0.2rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
}

.dgtcp-telephone a.dgtcp-telephone__appeler {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	margin-top: 1.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-telephone a.dgtcp-telephone__appeler:hover,
.dgtcp-telephone a.dgtcp-telephone__appeler:focus-visible {
	background: #fff;
	color: var(--dgtcp-ink);
}

.dgtcp-telephone a.dgtcp-telephone__appeler:focus-visible {
	outline: 2px solid var(--dgtcp-magenta-light);
	outline-offset: 3px;
}

/* --- Mot du Directeur général : voir le chapitre 44 --------------------- */

/* --- Tablette et téléphone ----------------------------------------------- */

@media (max-width: 991.98px) {
	.dgtcp-phototheque {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 200px;
	}

	.dgtcp-phototheque__photo:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.dgtcp-phototheque__photo:first-child,
	.dgtcp-phototheque__photo:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767.98px) {
	.dgtcp-rubrique__intro {
		padding-top: 2.25rem;
	}


	.dgtcp-section--documents .wp-block-file {
		flex-wrap: wrap;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-phototheque {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.dgtcp-phototheque__photo:nth-child(n) {
		grid-column: auto;
	}

	.dgtcp-telephone {
		padding: 2rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-phototheque__photo img {
		transition: none;
	}
}

/* =========================================================================
 * 36. Bibliothèque — filtres, albums, visionneuse
 *
 * Voir inc/bibliotheque.php et assets/js/bibliotheque.js. Photos, vidéos et
 * documents sont classés par événement : un album par titre de niveau 2 de la
 * page, sa date lue après le tiret.
 * ====================================================================== */

/* --- Filtres ------------------------------------------------------------ */

.dgtcp-filtres {
	margin: 0 0 2rem;
}

.dgtcp-filtres__rangee {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

/*
 * Spécificité (0,3,1) au survol : main.css peint en noir tout
 * button[type="button"]:hover et :focus, à (0,2,1). Même piège que les
 * titres du flash info.
 */
.dgtcp-filtres button.dgtcp-filtres__puce {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.45rem 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dgtcp-filtres button.dgtcp-filtres__puce:hover,
.dgtcp-filtres button.dgtcp-filtres__puce:focus {
	border-color: var(--dgtcp-magenta);
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
	outline: none;
}

.dgtcp-filtres button.dgtcp-filtres__puce:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-filtres button.dgtcp-filtres__puce[aria-pressed="true"] {
	border-color: var(--dgtcp-magenta-texte);
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

.dgtcp-filtres__compte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-size: 0.75rem;
	font-weight: 700;
}

.dgtcp-filtres button.dgtcp-filtres__puce[aria-pressed="true"] .dgtcp-filtres__compte {
	background: #fff;
}

/* L'annonce est pour les lecteurs d'écran : la grille, elle, se voit changer. */
.dgtcp-filtres__annonce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Albums ------------------------------------------------------------- */

.dgtcp-albums {
	display: grid;
	gap: 2rem;
}

.dgtcp-album {
	padding: 1.75rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 12px 32px rgba(26, 20, 24, 0.06);
}

.dgtcp-album__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.25rem;
}

.dgtcp-album__titre {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
}

.dgtcp-album__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

.dgtcp-album__date {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-weight: 600;
}

.dgtcp-album__contenu > :last-child {
	margin-bottom: 0;
}

/*
 * La galerie du bloc WordPress devient une mosaïque : la première photo en
 * grand, les autres autour. Les largeurs posées par le cœur
 * (« figure.wp-block-image:not(#individual-image) », spécificité 1,3,1) ne se
 * battent qu'avec !important — limité à ce seul contexte.
 */
.dgtcp-album__contenu .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 190px;
	gap: 0.75rem;
	margin: 0;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 12px;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/*
 * Quatre colonnes : la grande photo en prend deux sur deux rangées, quatre
 * petites remplissent le reste. Avec moins de cinq photos, la grille aurait
 * des trous — ces règles élargissent les dernières pour la garder pleine.
 */
.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child {
	grid-column: 1 / -1;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(2):last-child {
	grid-column: span 2;
	grid-row: span 2;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(2):nth-last-child(2),
.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3):last-child,
.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4):last-child {
	grid-column: span 2;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image a,
.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image img {
	transition: transform 0.4s ease;
}

.dgtcp-visionneuse__declencheur {
	cursor: zoom-in;
}

.dgtcp-album__contenu figure:hover .dgtcp-visionneuse__declencheur,
.dgtcp-album__contenu a:focus-visible .dgtcp-visionneuse__declencheur {
	transform: scale(1.04);
}

.dgtcp-album__contenu a:focus-visible,
.dgtcp-album__contenu img[role="button"]:focus-visible {
	outline: 3px solid var(--dgtcp-magenta);
	outline-offset: -3px;
}

/* Vidéos d'un album : côte à côte dès que la place le permet. */
.dgtcp-album--videos .dgtcp-album__contenu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.25rem;
}

.dgtcp-album--videos .wp-block-embed {
	margin: 0;
}

.dgtcp-album--videos figcaption {
	margin-top: 0.5rem;
	color: var(--dgtcp-ink);
	font-weight: 600;
}

/* Documents : pictogramme selon le format, lu sur l'adresse du fichier. */
.dgtcp-section--documents .wp-block-file:has(a[href$=".pdf" i])::before {
	content: "\f1c1";
}

.dgtcp-section--documents .wp-block-file:has(a[href$=".doc" i], a[href$=".docx" i])::before {
	content: "\f1c2";
}

.dgtcp-section--documents .wp-block-file:has(a[href$=".xls" i], a[href$=".xlsx" i])::before {
	content: "\f1c3";
}

.dgtcp-section--documents .wp-block-file:has(a[href$=".ppt" i], a[href$=".pptx" i])::before {
	content: "\f1c4";
}

.dgtcp-album--documents {
	padding: 1.5rem;
}

/* --- Visionneuse -------------------------------------------------------- */

.dgtcp-visionneuse {
	width: min(94vw, 1100px);
	max-width: none;
	max-height: none;
	padding: 3.5rem 0 1rem;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: visible;
}

.dgtcp-visionneuse::backdrop {
	background: rgba(12, 9, 11, 0.92);
}

.dgtcp-visionneuse__cadre {
	margin: 0;
	text-align: center;
}

.dgtcp-visionneuse__image {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	margin: 0 auto;
	border-radius: 10px;
	object-fit: contain;
}

.dgtcp-visionneuse__legende {
	margin-top: 0.9rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

.dgtcp-visionneuse__position {
	margin: 0.35rem 0 0;
	color: #fff;
	font-size: 0.875rem;
	text-align: center;
	opacity: 0.75;
}

/* Spécificité relevée contre button[type="button"]:hover de main.css. */
.dgtcp-visionneuse button.dgtcp-visionneuse__fermer,
.dgtcp-visionneuse button.dgtcp-visionneuse__nav {
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--dgtcp-ink);
	font-size: 1.25rem;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dgtcp-visionneuse button.dgtcp-visionneuse__fermer {
	top: 1rem;
	right: 1rem;
}

.dgtcp-visionneuse button.dgtcp-visionneuse__nav {
	top: 50%;
	transform: translateY(-50%);
}

.dgtcp-visionneuse button.dgtcp-visionneuse__nav--precedente {
	left: 1rem;
}

.dgtcp-visionneuse button.dgtcp-visionneuse__nav--suivante {
	right: 1rem;
}

.dgtcp-visionneuse button.dgtcp-visionneuse__fermer:hover,
.dgtcp-visionneuse button.dgtcp-visionneuse__fermer:focus,
.dgtcp-visionneuse button.dgtcp-visionneuse__nav:hover,
.dgtcp-visionneuse button.dgtcp-visionneuse__nav:focus {
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	outline: none;
}

.dgtcp-visionneuse button.dgtcp-visionneuse__fermer:focus-visible,
.dgtcp-visionneuse button.dgtcp-visionneuse__nav:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- Tablette et téléphone ---------------------------------------------- */

@media (max-width: 767.98px) {
	.dgtcp-album {
		padding: 1.15rem;
		border-radius: 14px;
	}

	.dgtcp-album__contenu .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
		gap: 0.5rem;
	}

	/* Deux colonnes : la grande photo prend toute la largeur, les autres vont
	   par deux, et la dernière s'élargit si elle reste seule. */
	.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:first-child {
		grid-column: 1 / -1;
		grid-row: span 2;
	}

	.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(even) {
		grid-column: 1 / -1;
	}

	/* Les flèches passent en bas de l'écran : sur les côtés, elles
	   couvriraient la photo, qui occupe toute la largeur. */
	.dgtcp-visionneuse button.dgtcp-visionneuse__nav {
		top: auto;
		bottom: 1rem;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image img {
		transition: none;
	}
}

/* =========================================================================
 * 37. Bibliothèque — recherche, aperçus, vidéos, page d'album
 *
 * Suite du chapitre 36. Voir inc/bibliotheque.php et assets/js/bibliotheque.js.
 * ====================================================================== */

/* --- Recherche en tête de rubrique -------------------------------------- */

.dgtcp-biblio-recherche {
	padding: 2.5rem 0 0;
}

.dgtcp-biblio-recherche__cadre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.25rem 2rem;
	max-width: 62rem;
	margin: 0 auto;
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 14px 36px rgba(26, 20, 24, 0.07);
}

.dgtcp-biblio-recherche__champ {
	flex: 1 1 18rem;
}

.dgtcp-biblio-recherche__champ label,
.dgtcp-biblio-recherche__annees legend {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--dgtcp-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.dgtcp-biblio-recherche__saisie {
	position: relative;
	display: block;
}

.dgtcp-biblio-recherche__saisie i {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--dgtcp-magenta-texte);
	transform: translateY(-50%);
	pointer-events: none;
}

.dgtcp-biblio-recherche__saisie input[type="search"] {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 1rem 0.65rem 2.75rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-light);
	color: var(--dgtcp-ink);
	font-size: 1rem;
}

.dgtcp-biblio-recherche__saisie input[type="search"]:focus {
	border-color: var(--dgtcp-magenta);
	background: var(--dgtcp-portail-carte);
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 1px;
}

.dgtcp-biblio-recherche__annees {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dgtcp-biblio-recherche__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Mêmes pastilles que les filtres, même piège de spécificité (chapitre 36). */
.dgtcp-biblio-recherche button.dgtcp-filtres__puce {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.dgtcp-biblio-recherche button.dgtcp-filtres__puce:hover,
.dgtcp-biblio-recherche button.dgtcp-filtres__puce:focus {
	border-color: var(--dgtcp-magenta);
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
	outline: none;
}

.dgtcp-biblio-recherche button.dgtcp-filtres__puce:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-biblio-recherche button.dgtcp-filtres__puce[aria-pressed="true"] {
	border-color: var(--dgtcp-magenta-texte);
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

.dgtcp-biblio-recherche__bilan {
	max-width: 62rem;
	margin: 0.9rem auto 0;
	color: var(--dgtcp-ink-soft);
	font-weight: 600;
	text-align: center;
}

.dgtcp-biblio-recherche__bilan:empty {
	display: none;
}

.dgtcp-biblio__aucun {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--dgtcp-portail-rule);
	border-radius: 14px;
	color: var(--dgtcp-muted);
	text-align: center;
}

.dgtcp-biblio__aucun i {
	margin-right: 0.4rem;
	color: var(--dgtcp-magenta-texte);
}

/* --- En-tête d'album et lien vers le tout ------------------------------- */

.dgtcp-album__intitule {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
}

.dgtcp-album a.dgtcp-album__tout {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--dgtcp-magenta);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-album a.dgtcp-album__tout:hover,
.dgtcp-album a.dgtcp-album__tout:focus-visible {
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

.dgtcp-album a.dgtcp-album__tout:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

/* --- Aperçu tronqué : cinq photos, la cinquième porte « +4 » ------------ */

.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n+6) {
	display: none !important;
}

.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(5) {
	position: relative;
}

/* Le voile laisse passer le clic : la photo s'ouvre dans la visionneuse, qui
   parcourt aussi les photos masquées. */
.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(5)::after {
	content: var(--dgtcp-plus);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: rgba(26, 20, 24, 0.55);
	color: #fff;
	font-size: 2rem;
	font-weight: 800;
	pointer-events: none;
}

/* --- Vidéos en vignettes ------------------------------------------------ */

.dgtcp-videos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.dgtcp-video {
	margin: 0;
}

.dgtcp-video a.dgtcp-video__lecture {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: var(--dgtcp-ink);
}

.dgtcp-video__lecture img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.dgtcp-video__bouton {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding-left: 4px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.4rem;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.dgtcp-video a.dgtcp-video__lecture:hover img,
.dgtcp-video a.dgtcp-video__lecture:focus-visible img {
	transform: scale(1.04);
	opacity: 0.85;
}

.dgtcp-video a.dgtcp-video__lecture:hover .dgtcp-video__bouton,
.dgtcp-video a.dgtcp-video__lecture:focus-visible .dgtcp-video__bouton {
	transform: translate(-50%, -50%) scale(1.1);
}

.dgtcp-video a.dgtcp-video__lecture:focus-visible {
	outline: 3px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

.dgtcp-video__lecteur {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

.dgtcp-video__titre {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 0.65rem;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* --- Documents : nom et format ------------------------------------------ */

.dgtcp-section--documents .wp-block-file a:not(.wp-block-file__button) {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.dgtcp-document__meta {
	color: var(--dgtcp-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Page d'un album entier --------------------------------------------- */

.dgtcp-album-page {
	padding: 2.5rem 0 4rem;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-album-page__retour {
	margin: 0 0 1.25rem;
}

.dgtcp-album-page__retour a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	color: var(--dgtcp-magenta-texte);
	font-weight: 600;
	text-decoration: none;
}

.dgtcp-album-page__retour a:hover,
.dgtcp-album-page__retour a:focus-visible {
	text-decoration: underline;
}

/* L'album entier ne fait pas de mosaïque : toutes les photos au même format,
   pour les parcourir d'un regard. */
.dgtcp-album--complet .dgtcp-album__contenu .wp-block-gallery.has-nested-images {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	grid-auto-rows: 210px;
}

.dgtcp-album--complet .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
}

.dgtcp-album-page__autres {
	margin-top: 2.5rem;
}

.dgtcp-album-page__autres-titre {
	margin: 0 0 1rem;
	color: var(--dgtcp-ink);
	font-size: 1.25rem;
}

.dgtcp-album-page__autres ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-album-page__autres a {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.dgtcp-album-page__autres a:hover,
.dgtcp-album-page__autres a:focus-visible {
	border-color: var(--dgtcp-magenta);
}

.dgtcp-album-page__autre-titre {
	font-weight: 700;
}

.dgtcp-album-page__autre-date {
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 600;
}

/* --- Tablette et téléphone ---------------------------------------------- */

@media (max-width: 991.98px) {
	.dgtcp-videos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.dgtcp-biblio-recherche__cadre {
		padding: 1.15rem;
	}

	.dgtcp-biblio-recherche__annees {
		flex-basis: 100%;
	}

	.dgtcp-album--complet .dgtcp-album__contenu .wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 140px;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-videos {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-video__lecture img,
	.dgtcp-video__bouton {
		transition: none;
	}
}

/* =========================================================================
 * 38. Rubrique Réformes — feuille de route et chantiers
 *
 * Voir dgtcp_reformes_feuille_de_route() et dgtcp_section_chantier() dans
 * inc/rubriques-sections-types.php. Une première version posait un numéro et
 * un pictogramme à côté d'une phrase : juste, mais sans relief, et le comité
 * l'a trouvée peu attractive. D'où deux pièces :
 *
 * - la FEUILLE DE ROUTE en tête : les quatre chantiers reliés par un trait,
 *   pour saisir l'ensemble avant le détail ;
 * - des SECTIONS À VISUEL : photo encadrée avec son badge « Chantier 01 »,
 *   numéro en filigrane derrière le titre, lien vers le chantier suivant.
 * ====================================================================== */

/* --- Feuille de route --------------------------------------------------- */

.dgtcp-feuille-route {
	padding: 3rem 0 1rem;
}

.dgtcp-feuille-route__titre-bloc {
	margin: 0 0 1.75rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	text-align: center;
}

.dgtcp-feuille-route__etapes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le trait qui relie les pastilles, passé derrière les cartes. */
.dgtcp-feuille-route__etapes::before {
	content: "";
	position: absolute;
	top: calc(1.5rem + 34px);
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: linear-gradient(to right, var(--dgtcp-magenta), var(--dgtcp-magenta-dark));
	opacity: 0.35;
}

.dgtcp-feuille-route__etape {
	position: relative;
	z-index: 1;
}

/* Spécificité (0,2,1) : main.css cible les liens par a:not(.comments-count). */
.dgtcp-feuille-route .dgtcp-feuille-route__etape a {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 1.5rem 1.25rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	text-align: center;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(26, 20, 24, 0.05);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dgtcp-feuille-route .dgtcp-feuille-route__etape a:hover,
.dgtcp-feuille-route .dgtcp-feuille-route__etape a:focus-visible {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 18px 40px rgba(179, 0, 105, 0.14);
	transform: translateY(-4px);
}

.dgtcp-feuille-route .dgtcp-feuille-route__etape a:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 3px;
}

/* L'anneau blanc coupe le trait : la pastille se pose dessus, sans le chevaucher. */
.dgtcp-feuille-route__pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	margin-bottom: 0.9rem;
	border: 4px solid var(--dgtcp-portail-carte);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--dgtcp-magenta), var(--dgtcp-magenta-dark));
	color: #fff;
	font-size: 1.5rem;
	box-shadow: 0 10px 24px rgba(179, 0, 105, 0.28);
}

.dgtcp-feuille-route__numero {
	color: var(--dgtcp-magenta-texte);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dgtcp-feuille-route__nom {
	margin: 0.35rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.dgtcp-feuille-route__resume {
	display: -webkit-box;
	overflow: hidden;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.dgtcp-feuille-route__suite {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.9rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 600;
}

/* --- Un chantier -------------------------------------------------------- */

.dgtcp-reforme {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2.5rem;
}

@media (min-width: 992px) {
	.dgtcp-reforme {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 4.5rem;
	}

	/* Le balisage garde le texte en premier ; seul l'affichage inverse. */
	.dgtcp-section--visuel-gauche .dgtcp-reforme__visuel {
		order: -1;
	}
}

.dgtcp-reforme__texte {
	position: relative;
}

.dgtcp-reforme__texte > :not(.dgtcp-reforme__filigrane) {
	position: relative;
	z-index: 1;
}

/* Le numéro en filigrane, derrière le titre : on sait où l'on en est. */
.dgtcp-reforme__filigrane {
	position: absolute;
	top: -3.25rem;
	left: -0.75rem;
	z-index: 0;
	color: var(--dgtcp-magenta);
	font-size: clamp(6rem, 4rem + 6vw, 10rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	opacity: 0.08;
	pointer-events: none;
}

.dgtcp-section--chantier .dgtcp-section__corps {
	font-size: 1.125rem;
}

.dgtcp-reforme__visuel {
	position: relative;
	padding-bottom: 30px;
}

.dgtcp-reforme__cadre {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	background: var(--dgtcp-magenta-wash);
	box-shadow: 0 24px 60px rgba(26, 20, 24, 0.18);
}

.dgtcp-reforme__cadre img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile magenta en bas de photo : il relie l'image au badge et à la palette. */
.dgtcp-reforme__cadre::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(179, 0, 105, 0.38), rgba(179, 0, 105, 0) 55%);
	pointer-events: none;
}

.dgtcp-reforme__cadre--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--dgtcp-magenta-dark), var(--dgtcp-ink));
	color: #fff;
	font-size: 5rem;
}

.dgtcp-reforme__cadre--vide i {
	opacity: 0.9;
}

.dgtcp-reforme__badge {
	position: absolute;
	bottom: 0;
	left: 28px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1.25rem 0.65rem 0.65rem;
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 14px 34px rgba(26, 20, 24, 0.16);
}

.dgtcp-section--visuel-gauche .dgtcp-reforme__badge {
	left: auto;
	right: 28px;
}

.dgtcp-reforme__badge-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--dgtcp-magenta), var(--dgtcp-magenta-dark));
	color: #fff;
	font-size: 1.35rem;
}

.dgtcp-reforme__badge-texte {
	display: flex;
	flex-direction: column;
	color: var(--dgtcp-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dgtcp-reforme__badge-texte strong {
	color: var(--dgtcp-ink);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
}

.dgtcp-reforme__suivant {
	margin: 2rem 0 0;
}

.dgtcp-section .dgtcp-reforme__suivant a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.dgtcp-section .dgtcp-reforme__suivant a:hover,
.dgtcp-section .dgtcp-reforme__suivant a:focus-visible {
	border-color: var(--dgtcp-magenta);
}

.dgtcp-section .dgtcp-reforme__suivant a:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-reforme__suivant-libelle {
	color: var(--dgtcp-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dgtcp-reforme__suivant-nom {
	color: var(--dgtcp-magenta-texte);
	font-weight: 600;
}

.dgtcp-reforme__suivant i {
	color: var(--dgtcp-magenta);
}

/* --- Tablette et téléphone ---------------------------------------------- */

@media (max-width: 991.98px) {
	.dgtcp-feuille-route__etapes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Sur deux rangées, un trait horizontal ne relie plus rien. */
	.dgtcp-feuille-route__etapes::before {
		display: none;
	}

	/* La photo passe au-dessus du texte : c'est elle qui accroche l'œil. */
	.dgtcp-reforme__visuel {
		order: -1;
		max-width: 36rem;
	}

	.dgtcp-reforme__filigrane {
		top: -2.25rem;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-feuille-route {
		padding-top: 2rem;
	}

	.dgtcp-feuille-route__etapes {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	/* En colonne, l'étape se couche : pastille à gauche, texte à droite. */
	.dgtcp-feuille-route .dgtcp-feuille-route__etape a {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"pastille numero"
			"pastille nom"
			"pastille resume";
		align-items: start;
		column-gap: 1rem;
		padding: 1rem;
		text-align: left;
	}

	.dgtcp-feuille-route__pastille {
		grid-area: pastille;
		width: 56px;
		height: 56px;
		margin: 0;
		font-size: 1.25rem;
	}

	.dgtcp-feuille-route__numero {
		grid-area: numero;
	}

	.dgtcp-feuille-route__nom {
		grid-area: nom;
		margin: 0.15rem 0 0.25rem;
	}

	.dgtcp-feuille-route__resume {
		grid-area: resume;
	}

	.dgtcp-feuille-route__suite {
		display: none;
	}

	.dgtcp-reforme__badge {
		left: 16px;
	}

	.dgtcp-section--visuel-gauche .dgtcp-reforme__badge {
		right: 16px;
	}

	.dgtcp-reforme__cadre {
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-feuille-route .dgtcp-feuille-route__etape a {
		transition: none;
	}

	.dgtcp-feuille-route .dgtcp-feuille-route__etape a:hover,
	.dgtcp-feuille-route .dgtcp-feuille-route__etape a:focus-visible {
		transform: none;
	}
}

/* =========================================================================
 * 39. Accueil — secteurs régulés rappelés en fin de page
 *
 * Voir inc/frontpage/section-secteurs-regules.php. Ce rappel se distingue des
 * tuiles du haut par sa FORME — cartes horizontales, parties de la page en
 * pastilles — et non par sa couleur.
 *
 * Une première version posait un fond sombre dégradé : le comité l'a trouvé en
 * désaccord avec le reste de l'accueil, qui alterne gris très clair et blanc.
 * La section reprend donc cette alternance : elle suit les e-services, sur
 * gris, elle prend le BLANC — avec la même trame de points magenta en bordure
 * que les autres sections claires.
 * ====================================================================== */

.dgtcp-regules {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: var(--dgtcp-section-respiration-ample) 0;
	/* Son FOND est declare au chapitre de l alternance, avec celui des autres
	   sections de l accueil : il depend du rang de la section, pas d elle. */
	color: var(--dgtcp-ink);
}

/* Trame de points sur les bords, estompée vers le centre : le même motif que
   le flash info et les tuiles (chapitre 26), pour rester dans la famille. */
.dgtcp-regules::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(var(--dgtcp-magenta) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: 0.10;
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 30%, transparent 70%, #000 100%);
	mask-image: linear-gradient(to right, #000 0%, transparent 30%, transparent 70%, #000 100%);
	pointer-events: none;
}

/* --- En-tête : titre à gauche, chapeau à droite ------------------------- */

/*
 * Le titre tient sur UNE ligne (amendement du 28 septembre, figure 4) : il
 * occupe toute la largeur, le chapeau eventuel passe dessous. En deux
 * colonnes, « Les secteurs sous tutelles/régulés du Trésor » se cassait en
 * deux dans sa demi-largeur.
 */
.dgtcp-regules__entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin-bottom: 3rem;
}

.dgtcp-regules__entete .dgtcp-regules__chapeau {
	max-width: 62ch;
}

.dgtcp-regules__surtitre {
	margin: 0 0 0.6rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dgtcp-regules .dgtcp-regules__titre {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
}

.dgtcp-regules__titre::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 1.1rem;
	border-radius: 2px;
	background: var(--dgtcp-magenta);
}

.dgtcp-regules__chapeau {
	margin: 0;
	color: var(--dgtcp-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* --- Cartes horizontales, deux par rangée ------------------------------- */

/*
 * TOUTES LES RANGEES A LA MEME HAUTEUR.
 *
 * Une grille egalise deja les cartes d une MEME rangee ; elle ne fait rien
 * entre rangees. Mesure a 1440 px : 293 px pour les deux premieres cartes,
 * 327 pour les quatre autres — l ecart vient du nombre d etiquettes, deux
 * lignes ici et trois la. Les six boutons « Voir plus » se posaient donc sur
 * trois hauteurs differentes.
 *
 * « grid-auto-rows: 1fr » aligne toutes les rangees sur la plus haute. Les
 * cartes courtes gagnent une trentaine de pixels de blanc sous leurs
 * etiquettes, et les boutons se lisent sur une seule ligne d horizon.
 *
 * Pas sous 768 px : la grille n y a qu une colonne, chaque carte est seule
 * sur sa rangee, et egaliser n alignerait rien — cela ne ferait qu allonger
 * la page de deux cents pixels.
 */
.dgtcp-regules__liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-regule {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 20px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	box-shadow: 0 14px 36px rgba(26, 20, 24, 0.07);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dgtcp-regule:hover,
.dgtcp-regule:focus-within {
	border-color: var(--dgtcp-magenta);
	box-shadow: 0 22px 48px rgba(179, 0, 105, 0.14);
	transform: translateY(-4px);
}

.dgtcp-regule__visuel {
	position: relative;
	min-height: 100%;
	background: var(--dgtcp-magenta-wash);
}

.dgtcp-regule__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dgtcp-regule:hover .dgtcp-regule__visuel img,
.dgtcp-regule:focus-within .dgtcp-regule__visuel img {
	transform: scale(1.06);
}

.dgtcp-regule__visuel--vide {
	background: linear-gradient(135deg, var(--dgtcp-magenta), var(--dgtcp-magenta-dark));
}

/* La pastille mord sur la jointure photo / texte. */
.dgtcp-regule__pastille {
	position: absolute;
	top: 1.25rem;
	right: -26px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 4px solid var(--dgtcp-portail-carte);
	border-radius: 50%;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.15rem;
}

/* Pas de position ici : le lien étendu du titre doit couvrir la carte
   ENTIÈRE, photo comprise, et non la seule colonne de texte. */
.dgtcp-regule__corps {
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.75rem 1.5rem 2.5rem;
}

.dgtcp-regule__rang {
	position: absolute;
	top: 0.75rem;
	right: 1.25rem;
	color: var(--dgtcp-magenta);
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1;
	opacity: 0.1;
	pointer-events: none;
}

.dgtcp-regule__nom {
	margin: 0 0 0.6rem;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

/*
 * Le lien du titre s'étend à toute la carte : ::after la couvre. Spécificité
 * (0,2,1) contre a:not(.comments-count) de main.css.
 */
.dgtcp-regule .dgtcp-regule__nom a {
	color: var(--dgtcp-ink);
	text-decoration: none;
}

.dgtcp-regule .dgtcp-regule__nom a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.dgtcp-regule:hover .dgtcp-regule__nom a,
.dgtcp-regule .dgtcp-regule__nom a:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-regule .dgtcp-regule__nom a:focus-visible {
	outline: none;
}

/* Le cadre de focus est posé sur la carte entière, là où porte le clic. */
.dgtcp-regule:has(.dgtcp-regule__nom a:focus-visible) {
	outline: 3px solid var(--dgtcp-magenta);
	outline-offset: 4px;
}

/*
 * LE TEXTE PASSE DE 15 A 16 PX, ET IL EST CLAMPE A TROIS LIGNES.
 *
 * LA MESURE D ABORD, PARCE QU ELLE CORRIGE L IMPRESSION. Le texte paraissait
 * « gris clair » ; il est en --dgtcp-ink-soft (#3d3339) sur blanc, soit
 * 12,13:1 — bien au-dela du 4,5:1 du niveau AA, et au-dela meme du AAA. Ce
 * qui le delavait n etait pas sa couleur mais la JUSTIFICATION avec cesure :
 * « accordent des credits a des per-sonnes souvent… », rivieres de blanc et
 * mots coupes sur une colonne de 320 px. La justification est levee ici.
 *
 * La taille, elle, monte : 15 px tenaient le minimum demande de 14, 16 px le
 * tiennent plus franchement et alignent ce texte sur celui des cartes de
 * services.
 *
 * TROIS LIGNES, ET C EST LA SEULE COUPE. Le PHP tronquait a vingt-quatre
 * mots ; il ne tronque plus (cartes-pages.php). Le clamp borne aussi la
 * hauteur du bloc, ce qui rapproche les cartes d une meme rangee.
 */
.dgtcp-regule__texte {
	display: -webkit-box;
	margin: 0 0 1rem;
	overflow: hidden;
	color: var(--dgtcp-ink-soft);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/*
 * LA JUSTIFICATION EST LEVEE ICI, ET SEULEMENT ICI.
 *
 * Le chapitre « Justification du texte courant » la pose plus bas dans cette
 * feuille, sur une liste de selecteurs qui comprend .dgtcp-regule__texte —
 * meme specificite que la regle ci-dessus, mais ecrite apres : c est elle qui
 * gagnait. Le prefixe .dgtcp-regules porte celle-ci a (0,2,0) et tranche.
 *
 * POURQUOI LEVER CE QUI VAUT PARTOUT AILLEURS. Deux raisons propres a ce
 * bloc, et qui ne valent pas pour les pages :
 *
 *   - LA COLONNE EST ETROITE : 320 px, une quarantaine de caracteres. La
 *     cesure automatique y coupait un mot par ligne — « etablisse-ments »,
 *     « micro-finance » — et c est ce hachage qui faisait paraitre le texte
 *     delave, bien plus que sa couleur (mesuree a 12,13:1) ;
 *   - LE TEXTE EST CLAMPE. Un paragraphe justifie n etire pas sa DERNIERE
 *     ligne ; mais la derniere ligne VISIBLE d un texte clampe n est pas la
 *     derniere du paragraphe : elle etait donc etiree de bord a bord, juste
 *     avant les points de suspension.
 *
 * La justification reste la regle du site pour tout le reste.
 */
.dgtcp-regules .dgtcp-regule__texte {
	text-align: left;
	-webkit-hyphens: manual;
	hyphens: manual;
}

.dgtcp-regule__parties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

/*
 * LES ETIQUETTES GRANDISSENT, ET SURTOUT ELLES RESPIRENT.
 *
 * 12 px et 27 px de haut : elles tenaient tout juste le plancher demande, et
 * paraissaient minuscules parce que leur retrait vertical valait 0,2 rem —
 * trois pixels. 13 px et 0,35 rem portent la pastille a 32 px, la hauteur
 * d une cible confortable.
 *
 * Elles ne sont PAS cliquables : ce sont les parties de la page du secteur,
 * annoncees pour dire ce qu on y trouvera. Les 44 px d une cible tactile ne
 * s appliquent donc pas — mais 27 px se lisaient mal, et c est ce que le
 * client a vu.
 *
 * UNE SEULE LIGNE PAR ETIQUETTE. « Un principe cardinal : la separation de
 * l ordonnateur et du comptable » est un titre de section, pas un mot-cle :
 * il prenait deux lignes a lui seul et decalait le bouton de sa carte. Le
 * texte entier reste dans l attribut « title » et dans l arbre
 * d accessibilite — seule l affiche est bornee.
 */
.dgtcp-regule__parties li {
	max-width: 100%;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dgtcp-regule__suite {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.9375rem;
	font-weight: 700;
}

.dgtcp-regule__suite i {
	transition: transform 0.2s ease;
}

.dgtcp-regule:hover .dgtcp-regule__suite i {
	transform: translateX(4px);
}

/* --- Tablette et téléphone ---------------------------------------------- */

@media (max-width: 1199.98px) {
	.dgtcp-regules__liste {
		grid-template-columns: 1fr;
		/* Une seule colonne : egaliser les rangees n alignerait plus rien. */
		grid-auto-rows: auto;
	}
}

@media (max-width: 767.98px) {
	.dgtcp-regules {
		padding: var(--dgtcp-section-respiration) 0;
	}

	.dgtcp-regules__entete {
		grid-template-columns: 1fr;
		margin-bottom: 2rem;
	}

	/* La carte se redresse : photo en bandeau, pastille sur sa bordure basse. */
	.dgtcp-regule {
		grid-template-columns: 1fr;
	}

	.dgtcp-regule__visuel {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.dgtcp-regule__pastille {
		top: auto;
		right: auto;
		bottom: -26px;
		left: 1.5rem;
	}

	.dgtcp-regule__corps {
		padding: 2.25rem 1.25rem 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-regule,
	.dgtcp-regule__visuel img,
	.dgtcp-regule__suite i {
		transition: none;
	}

	.dgtcp-regule:hover,
	.dgtcp-regule:focus-within,
	.dgtcp-regule:hover .dgtcp-regule__visuel img {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.dgtcp-regules::before {
		display: none;
	}
}

/* =========================================================================
 * 40. Carrousel — le voile de lisibilite, et le bouton d appel
 *
 * LE VOILE DU THEME PARENT NE PASSAIT PAS LE NIVEAU AA.
 *
 * main.css peint « .main-slider » en rgba(0, 0, 0, 0.5) : un voile UNIFORME,
 * de la meme densite d un bord a l autre. Mesure : du blanc par-dessus — le
 * cas le plus defavorable, et il se presente, la premiere diapositive montrant
 * un marche en plein soleil — donne 3,98:1. Le niveau AA exige 4,5:1 pour du
 * texte courant, et le paragraphe du carrousel fait 19 px. Il echouait donc,
 * et le cahier des charges impose l accessibilite.
 *
 * UN DEGRADE PLUTOT QU UN VOILE PLUS DENSE.
 *
 * Monter le voile uniforme a 0,76 aurait suffi au contraste, et aurait eteint
 * la photo sur toute sa largeur — or la photo est la moitie du message. Le
 * degrade dense le texte, cote gauche, et laisse l image respirer la ou aucun
 * caractere ne se pose.
 *
 * TROIS PALIERS, PARCE QUE LE TEXTE NE S ARRETE PAS AU MEME ENDROIT.
 *
 * Le parent borne « .main-slider div.main-content » a 45 rem ; le chapitre 23
 * de cette feuille le porte a 1040 px. Mesure du bord du DERNIER GLYPHE du
 * paragraphe — et non de la boite, qui court jusqu au bout de la colonne :
 *
 *   1440 px -> 67 %      1200 px -> 75 %
 *   1024 px -> 85 %       992 px -> 87 %
 *
 * Entre 992 et 1200 px, la colonne vaut donc presque toute la largeur : un
 * degrade qui s eclaircirait des 60 %, comme au premier jet, laissait la fin
 * des lignes sur la partie claire. Mesure a 1024 px avant correction : 3,45:1,
 * sous le seuil. D ou un second palier, dense jusqu a 92 %.
 *
 * LES MESURES, SOUS DU BLANC — le pire cas, et il se presente : la premiere
 * diapositive montre un marche en plein soleil.
 *
 *   >= 1200 px   0 % -> 0,90 (12,6:1)    78 % -> 0,76    fin du texte : 8,6:1
 *   992-1199 px  0 % -> 0,90             92 % -> 0,76    fin du texte : 8,5:1
 *   < 992 px     haut -> 0,66 (5,1:1)    bas  -> 0,86
 *
 * L encre du degrade est celle de la charte (--dgtcp-ink, #1a1418) et non du
 * noir pur : le noir pur virait au gris sale sur les photos chaudes.
 *
 * SOUS 992 PX, LE DEGRADE DEVIENT VERTICAL.
 *
 * Le conteneur prend toute la largeur et le texte avec lui : un degrade
 * horizontal n aurait plus rien a laisser respirer. Il descend donc du haut
 * vers le bas — le haut de l image reste lisible, le bas porte le texte.
 *
 * LE BOUTON D APPEL
 *
 * Amendement du 1er novembre : chaque diapositive porte un geste — payer,
 * decouvrir, ecrire. Un seul bouton, plein, magenta d aplat : le premier ecran
 * propose UNE chose a faire, et une hierarchie a deux boutons y serait du
 * bruit.
 *
 * 48 px de haut au minimum, au-dela des 44 px que demandent les criteres de
 * cible tactile : a 44 px pile, le moindre arrondi de coin rogne la zone utile.
 *
 * LE CHAPITRE 40 PORTAIT AUTRE CHOSE JUSQU AU 1er NOVEMBRE.
 *
 * Il habillait deux boutons — « Parcourir » plein, « Nous Contacter » en
 * filaire blanc — poses le 18 septembre puis retires le 28 : les diapositives
 * n ont porte aucun bouton pendant cinq semaines, et ces regles ne
 * s appliquaient plus a rien. Pour les retrouver : l historique git.
 * ====================================================================== */

.slider-section .main-slider {
	background: linear-gradient(
		90deg,
		rgba(26, 20, 24, 0.9) 0%,
		rgba(26, 20, 24, 0.76) 78%,
		rgba(26, 20, 24, 0.26) 100%
	);
}

/* La colonne de texte court jusqu a 87 % de la largeur : voir l en-tete. */
@media (max-width: 1199.98px) {
	.slider-section .main-slider {
		background: linear-gradient(
			90deg,
			rgba(26, 20, 24, 0.9) 0%,
			rgba(26, 20, 24, 0.76) 92%,
			rgba(26, 20, 24, 0.5) 100%
		);
	}
}

@media (max-width: 991.98px) {
	.slider-section .main-slider {
		background: linear-gradient(
			180deg,
			rgba(26, 20, 24, 0.66) 0%,
			rgba(26, 20, 24, 0.86) 100%
		);
	}
}

/*
 * EN CONTRASTE RENFORCE, LE DEGRADE S EFFACE AU PROFIT D UN APLAT.
 *
 * Qui demande « prefers-contrast: more » ne demande pas une photo : il demande
 * a lire. L aplat a 0,92 donne 14,6:1 sur n importe quelle image.
 */
@media (prefers-contrast: more) {
	.slider-section .main-slider {
		background: rgba(26, 20, 24, 0.92);
	}
}

.dgtcp-carrousel__actions {
	margin: 1.75rem 0 0;
}

.main-content.text-center .dgtcp-carrousel__actions {
	text-align: center;
}

.main-content.text-right .dgtcp-carrousel__actions {
	text-align: right;
}

/*
 * Le selecteur porte « .slider-section » pour passer devant
 * « .slider-section .main-slider p », qui fixe la taille du paragraphe : le
 * bouton est un enfant de ce paragraphe, et en heriterait la fourchette fluide.
 */
.slider-section .dgtcp-carrousel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--dgtcp-magenta-aplat);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-section .dgtcp-carrousel__cta:hover {
	background: var(--dgtcp-magenta);
	color: #fff;
	transform: translateY(-2px);
}

/*
 * LE FOCUS SE VOIT SUR N IMPORTE QUELLE PHOTO.
 *
 * Un anneau magenta sur un bouton magenta ne dessinerait rien. Un anneau blanc,
 * double d un liseré sombre, tient aussi bien sur un ciel clair que sur une
 * facade sombre.
 */
.slider-section .dgtcp-carrousel__cta:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(26, 20, 24, 0.55);
}

@media (max-width: 991.98px) {
	.dgtcp-carrousel__actions {
		margin-top: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slider-section .dgtcp-carrousel__cta {
		transition: none;
	}

	.slider-section .dgtcp-carrousel__cta:hover {
		transform: none;
	}
}

/*
 * LES FLECHES DU PARENT N AVAIENT PAS D ANNEAU DE FOCUS VISIBLE.
 *
 * Elles heritaient de l outline par defaut du navigateur — un trait fin, noir
 * ou bleu selon le navigateur, sur un fond translucide pose par-dessus une
 * photo. Meme anneau que le bouton d appel, pour la meme raison.
 */
.slider-section .home-slider div.owl-nav button[class*='owl-']:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(26, 20, 24, 0.55);
}

/*
 * L ANCRE DE LA SECTION « SECTEURS SOUS TUTELLE ».
 *
 * Destination du bouton « Decouvrir les secteurs » de la deuxieme diapositive.
 * L en-tete est collant : sans cette marge de reception, le saut poserait le
 * haut de la section SOUS l en-tete, et le titre resterait invisible. Meme
 * calcul que les ancres des rubriques, chapitre 33.
 */
#secteurs {
	scroll-margin-top: calc(var(--dgtcp-entete-h) + 1.5rem);
}

/* =========================================================================
 * 41. Page d'un sous-onglet
 *
 * Amendement du 18 septembre : chaque sous-onglet est une page à lui. Sa mise
 * en page est celle de l'ancienne section, mais le bandeau de titre du thème
 * porte déjà le nom de la page (<h1>) : le surtitre et le titre de la section
 * le rediraient juste dessous. Ils restent pour les lecteurs d'écran — la
 * section s'annonce par eux (aria-labelledby).
 *
 * La rangée des pages sœurs n'est plus collante : elle ne sert plus à
 * parcourir une longue page, seulement à passer à une autre.
 * ====================================================================== */

.dgtcp-rubrique--page .dgtcp-rubrique__sommaire {
	position: static;
	box-shadow: none;
}

.dgtcp-rubrique--page .dgtcp-section__surtitre,
.dgtcp-rubrique--page .dgtcp-section__titre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * Menu : un chevron à la place du « + »
 *
 * Amendement du 20 septembre, repris du CSS additionnel que le client avait
 * posé en ligne (archivé dans docs/css-additionnel-20260921.css). Même
 * spécificité que la règle d'Abiz qui pose le « + » (0,3,3), déclarée après
 * elle : elle l'emporte.
 * ====================================================================== */
.main-menu > li.menu-item-has-children > a.nav-link::before {
	content: "\f078";
	font-size: 10px;
}

/* =========================================================================
 * 42. Page d une annonce « Flash info »
 *
 * Amendement du 28 septembre : le titre d une annonce du diaporama mene ici.
 * La photo a gauche, le texte a droite — la meme lecture que la diapositive
 * — puis les autres annonces en cours. Sans photo, le texte prend toute la
 * largeur, borne a une longueur de ligne lisible.
 * ====================================================================== */

.dgtcp-annonce {
	padding: 4rem 0 5rem;
}

/* La largeur des sections maison (chapitre 3) : le theme laisse le
   conteneur s etirer a 1500 px sur grand ecran. */
.dgtcp-annonce .container {
	max-width: 1320px;
}

.dgtcp-annonce__rangee {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 3rem;
	align-items: start;
}

.dgtcp-annonce__rangee--sans-photo {
	grid-template-columns: minmax(0, 46rem);
}

.dgtcp-annonce__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-annonce__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dgtcp-annonce__etiquette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dgtcp-annonce__expiree {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	background: var(--dgtcp-portail-alterne);
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
}

.dgtcp-annonce__texte {
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.dgtcp-annonce__texte > :last-child {
	margin-bottom: 0;
}

.dgtcp-annonce__action {
	margin: 2rem 0 0;
}

/* Meme bouton que celui de la diapositive. */
.dgtcp-annonce a.dgtcp-annonce__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 52px;
	padding: 0.75rem 1.75rem;
	border: 2px solid var(--dgtcp-magenta);
	border-radius: 999px;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-annonce a.dgtcp-annonce__bouton:hover,
.dgtcp-annonce a.dgtcp-annonce__bouton:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-annonce__retour {
	margin: 2rem 0 0;
}

.dgtcp-annonce__autres {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-annonce .dgtcp-annonce__autres-titre {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
}

.dgtcp-annonce__autres ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-annonce__autres li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 10px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-annonce__autres time {
	color: var(--dgtcp-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.dgtcp-annonce__autres a {
	color: var(--dgtcp-ink);
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-annonce__autres a:hover,
.dgtcp-annonce__autres a:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

@media (max-width: 991.98px) {
	.dgtcp-annonce__rangee {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.dgtcp-annonce__autres ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.dgtcp-annonce {
		padding: 2.5rem 0 3.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-annonce a.dgtcp-annonce__bouton {
		transition: none;
	}
}

/* =========================================================================
 * 43. Pied de page — maquette du 28 septembre
 *
 * Figure 6 du document du client. Trois etages :
 *   - la rangee des coordonnees, sans cartes : pictogramme, titre, texte,
 *     separes d un filet vertical ;
 *   - les quatre colonnes de widgets ; « Nous joindre » porte le siege, le
 *     Plus code en lien vers la carte, et le numero vert dans un cadre ;
 *   - la barre basse (template-parts/footer-copyright.php) : reseaux,
 *     copyright, liens de service, retour en haut, mention de realisation.
 *
 * Sur l encre, le magenta de texte est le magenta CLAIR (chapitre 21).
 * ====================================================================== */

/* --- Hauteur du blanc au-dessus des colonnes --- */

/*
 * LE PARENT OUVRE LE PIED DE PAGE SUR 100 PX DE BLANC, EN DEUX FOIS.
 *
 * Deux regles de main.css, emboitees, portent 50 px de padding-top chacune :
 * « .main-footer » (le pied de page entier) et « .footer-main » (l etage des
 * colonnes). Elles s additionnent.
 *
 * Ces 100 px separaient la rangee des coordonnees des colonnes de widgets. La
 * rangee a ete retiree avec la maquette du 28 septembre, et le blanc s est
 * retrouve en tete, a vide, sous la bande foncee.
 *
 * On les ramene a 5 px au total : le filet superieur des colonnes
 * (« .footer-main .col border-top ») vient se poser juste sous le bord de la
 * bande. Les colonnes gardent leur propre respiration — 50 px de padding
 * chacune, regle du parent inchangee.
 *
 * Meme specificite que les regles du parent, mais notre feuille se charge
 * apres la sienne (voir functions.php, chapitre de la file d attente) : elle
 * gagne. Et posee ici, dans l enfant, une mise a jour du theme ne l effacera
 * pas.
 */
.main-footer {
	padding: 0;
}

.footer-main {
	padding-top: 5px;
}

/* --- Rangee des coordonnees --- */

.footer-top .widget-contact {
	justify-content: flex-start;
	padding: 0.5rem 1rem;
	border-width: 0;
	background: none;
}

.footer-top .widget-contact .title {
	font-size: 1.0625rem;
}

.footer-top .widget-contact .text,
.footer-top .widget-contact .text a {
	font-size: 0.9375rem;
}

.footer-top .widget-contact .contact-icon {
	margin-right: 1rem;
}

@media (min-width: 992px) {
	.footer-top .row > div:not(:last-child) .widget-contact {
		border-right: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* --- Colonnes de liens : texte blanc, magenta au survol --- */

/*
 * Figure 6 : les liens de « Liens utiles » et « Services en ligne » sont
 * BLANCS, seule la puce est magenta ; le survol passe le texte au magenta
 * clair (5,3:1 sur l encre, chapitre 21).
 *
 * DEUX SELECTEURS, PARCE QUE LES COLONNES NE SONT PAS DES MENUS.
 *
 * « .widget_nav_menu » visait un widget de menu. Nos deux colonnes sont des
 * widgets de HTML personnalise : elles ne portent pas cette classe, la regle
 * ne les atteignait pas, et leurs entrees retombaient sur le magenta clair du
 * chapitre 21 — la couleur generique des liens du pied de page. Elles
 * s affichaient donc en magenta la ou la maquette les veut blanches.
 *
 * « .dgtcp-pied-liste li a » les prend, et avec une specificite superieure a
 * celle du chapitre 21 : trois elements contre deux, a nombre de classes egal.
 */
footer.footer-section .widget_nav_menu li a,
footer.footer-section .dgtcp-pied-liste li a {
	color: #fff;
}

footer.footer-section .widget_nav_menu li a::before {
	color: var(--dgtcp-magenta-light);
}

footer.footer-section .widget_nav_menu li a:hover,
footer.footer-section .widget_nav_menu li a:focus-visible,
footer.footer-section .dgtcp-pied-liste li a:hover,
footer.footer-section .dgtcp-pied-liste li a:focus-visible {
	color: var(--dgtcp-magenta-light);
}

/* --- Colonne de presentation --- */

/* Logo clair fourni par le client : blanc sur transparent, pose a meme
   l encre, sans le cadre blanc qu exigeait l ancien fichier. */
/*
 * Le bloc de marque du pied : le nom du ministere de tutelle, puis le logo.
 *
 * LES DEUX ONT EXACTEMENT LA MEME LARGEUR, et ce n'est pas un reglage a
 * retoucher : le SVG du nom et le cartouche du logo occupent tous deux 100 % de
 * .dgtcp-pied-marque, et le texte du SVG est pose sur toute la largeur de sa
 * boite. L'egalite tient a la geometrie, pas a une mesure de police. Voir
 * inc/pied.php pour le detail.
 *
 * 280 px plutot que les 230 px d'avant. La colonne du pied en fait 259 au plus
 * large, donc le plafond ne mord qu'en mobile, ou la colonne s'etale sur toute
 * la page.
 */
.footer-section .widget .dgtcp-pied-marque {
	display: block;
	width: 100%;
	max-width: 280px;
}

.footer-section .widget .dgtcp-pied-ministere {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 .625rem;
	/*
	 * Les SVG rognent ce qui depasse de leur boite. L'accent de l'E majuscule
	 * d'« Economie » monte tres haut : une police aux accents plus hauts que
	 * Source Sans Pro se ferait couper le sommet.
	 */
	overflow: visible;
}

.footer-section .widget .dgtcp-pied-ministere text {
	fill: #fff;
	font-family: inherit;
	font-weight: 600;
	font-size: 34.5px;
}

/*
 * Le cartouche. Le logo officiel n'a pas de fond transparent : son blanc est
 * dans l'image. Plutot que de le laisser trancher en rectangle a vif sur le
 * noir du pied, on assume ce fond et on l'etend en encadre — une marge, des
 * angles arrondis, et le logo respire au milieu.
 */
.footer-section .widget .dgtcp-pied-cartouche {
	display: block;
	padding: 14px 12px;
	border-radius: 8px;
	background: #fff;
}

.footer-section .widget img.dgtcp-pied-logo {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/*
 * Le theme justifie les paragraphes des widgets texte : sur une colonne
 * etroite, la devise s ouvrait de blancs beants entre ses mots.
 */
.footer-section .widget_text .textwidget p.dgtcp-pied-devise {
	margin: 1.25rem 0 0;
	color: #fff;
	font-size: 1.0625rem;
	line-height: 1.6;
	text-align: left;
}

/* --- Colonne « Nous joindre » --- */

.dgtcp-pied-joindre {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.dgtcp-pied-joindre li {
	display: flex;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.dgtcp-pied-joindre li > i {
	flex-shrink: 0;
	width: 1.1rem;
	margin-top: 0.3em;
	color: var(--dgtcp-magenta-light);
	text-align: center;
}

.dgtcp-pied-joindre strong {
	display: block;
}

/*
 * Le theme pose une fleche devant tout lien de liste des widgets, par un
 * selecteur a dix classes (chaine de :not() de main.css). La lutte a la
 * specificite serait illisible : !important, borne a cette liste.
 */
.dgtcp-pied-joindre li a::before,
.dgtcp-pied-joindre li a::after {
	content: none !important;
}

/*
 * main.css decale de 20 px chaque lien de liste du pied de page, en bloc de
 * 40 px de haut, pour la fleche absente ici. Meme selecteur que le sien, une
 * classe de plus : la regle gagne sans !important.
 */
.footer-main .widget:not(.widget-info):not(.widget_social_widget):not(.widget_calender):not(.widget_tag) .dgtcp-pied-joindre li a:not(.wp-block-social-link-anchor) {
	display: inline;
	left: 0;
	line-height: inherit;
}

footer.footer-section .widget .dgtcp-pied-joindre a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Le numero vert, cadre de magenta : c est le seul numero du pied de page
 * qu un usager doit trouver sans chercher. Tout le cadre est le lien tel:.
 */
footer.footer-section .widget a.dgtcp-pied-numero-vert {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1.1rem;
	border: 1.5px solid var(--dgtcp-magenta);
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	line-height: 1.35;
	transition: background-color 0.2s ease;
}

footer.footer-section .widget a.dgtcp-pied-numero-vert:hover,
footer.footer-section .widget a.dgtcp-pied-numero-vert:focus-visible {
	background: rgba(240, 0, 141, 0.12);
	color: #fff;
}

.dgtcp-pied-numero-vert > i {
	color: var(--dgtcp-magenta-light);
	font-size: 1.5rem;
}

.dgtcp-pied-numero-vert strong,
.dgtcp-pied-numero-vert b {
	display: block;
}

.dgtcp-pied-numero-vert strong {
	font-size: 0.875rem;
}

.dgtcp-pied-numero-vert b {
	color: var(--dgtcp-magenta-light);
	font-size: 1.25rem;
	font-weight: 800;
}

.dgtcp-pied-numero-vert small {
	font-size: 0.8125rem;
}

/* --- Barre basse --- */

.footer-copyright.dgtcp-pied-bas {
	padding: 1.75rem 0 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	line-height: 1.5;
}

.dgtcp-pied-bas__rangee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.dgtcp-pied-bas__reseaux {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

footer.footer-section .dgtcp-pied-bas__reseaux .dgtcp-pied-bas__reseau,
footer.footer-section .container a.dgtcp-pied-bas__haut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--dgtcp-magenta);
	border-radius: 50%;
	color: var(--dgtcp-magenta-light);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau:hover,
footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau:focus-visible,
footer.footer-section .container a.dgtcp-pied-bas__haut:hover,
footer.footer-section .container a.dgtcp-pied-bas__haut:focus-visible {
	background: var(--dgtcp-magenta);
	color: #fff;
}

/*
 * Chaque icone dans la couleur de sa marque ; au survol, le disque se
 * remplit de cette couleur et l icone passe au blanc (a l encre pour X,
 * dont le disque devient blanc).
 */
.dgtcp-pied-bas__reseau--facebook { --dgtcp-reseau: var(--dgtcp-reseau-facebook); }
.dgtcp-pied-bas__reseau--x { --dgtcp-reseau: var(--dgtcp-reseau-x); }
.dgtcp-pied-bas__reseau--linkedin { --dgtcp-reseau: var(--dgtcp-reseau-linkedin); }
.dgtcp-pied-bas__reseau--youtube { --dgtcp-reseau: var(--dgtcp-reseau-youtube); }

footer.footer-section .dgtcp-pied-bas__reseaux .dgtcp-pied-bas__reseau {
	color: var(--dgtcp-reseau, var(--dgtcp-magenta-light));
	font-size: 1.125rem;
}

footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau:hover,
footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau:focus-visible {
	border-color: var(--dgtcp-reseau, var(--dgtcp-magenta));
	background: var(--dgtcp-reseau, var(--dgtcp-magenta));
	color: #fff;
}

footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau--x:hover,
footer.footer-section .dgtcp-pied-bas__reseaux a.dgtcp-pied-bas__reseau--x:focus-visible {
	color: var(--dgtcp-ink);
}

/* Reseau de demonstration, sans adresse : meme dessin, mais ni lien ni
   survol — rien ne doit laisser croire qu on peut cliquer. */
.dgtcp-pied-bas__reseau--inactif {
	cursor: default;
}

footer.footer-section .container a.dgtcp-pied-bas__haut {
	width: 48px;
	height: 48px;
	margin-left: auto;
}

.footer-copyright .dgtcp-pied-bas__copyright {
	flex: 1 1 auto;
	margin: 0;
	padding: 0 2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.9375rem;
	text-align: center;
}

.dgtcp-pied-bas__liens {
	padding-left: 2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-copyright .dgtcp-pied-bas__liens .menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-copyright .dgtcp-pied-bas__liens .menu li:not(:last-child)::after {
	content: "|";
	margin: 0 1rem;
	color: rgba(255, 255, 255, 0.3);
}

footer.footer-section .dgtcp-pied-bas__liens .menu li a {
	color: #fff;
	font-size: 0.9375rem;
	text-decoration: none;
}

footer.footer-section .dgtcp-pied-bas__liens .menu li a:hover,
footer.footer-section .dgtcp-pied-bas__liens .menu li a:focus-visible {
	color: var(--dgtcp-magenta-light);
}

/* La fleche que le theme pose devant chaque lien du menu de pied de page. */
.footer-copyright .dgtcp-pied-bas__liens .menu li a::before {
	content: none;
}

/* Sur telephone, les trois liens tiennent sur une ligne : a la ligne, un
   separateur « | » restait orphelin en bout de rangee. */
@media (max-width: 575.98px) {
	.footer-copyright .dgtcp-pied-bas__liens .menu li:not(:last-child)::after {
		margin: 0 0.5rem;
	}

	footer.footer-section .dgtcp-pied-bas__liens .menu li a {
		font-size: 0.875rem;
	}
}

.dgtcp-pied-bas__credit {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.8125rem;
	text-align: right;
}

.dgtcp-pied-bas__credit strong {
	color: #fff;
	letter-spacing: 0.04em;
}

@media (max-width: 991.98px) {
	.dgtcp-pied-bas__rangee {
		flex-direction: column;
		text-align: center;
	}

	.footer-copyright .dgtcp-pied-bas__copyright,
	.dgtcp-pied-bas__liens {
		padding-left: 0;
		border-left: 0;
	}

	.footer-copyright .dgtcp-pied-bas__liens .menu {
		justify-content: center;
	}

	footer.footer-section .container a.dgtcp-pied-bas__haut {
		margin-left: 0;
	}

	.dgtcp-pied-bas__credit {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	footer.footer-section .widget a.dgtcp-pied-numero-vert,
	footer.footer-section .dgtcp-pied-bas__reseaux a,
	footer.footer-section .container a.dgtcp-pied-bas__haut {
		transition: none;
	}
}

/* =========================================================================
 * 44. Rubrique « La DGTCP » — Mot du DG, Présentation, Missions
 *
 * Amendement du 28 septembre, figures 7 à 9, d apres les maquettes du client
 * redessinees dans la palette du site (inc/la-dgtcp.php). Pieces communes :
 * surtitre a puce, pastille de pictogramme, cartes.
 * ====================================================================== */

/*
 * overflow: clip et non hidden (pose par .dgtcp-section) : hidden fait de la
 * section un conteneur de defilement, et la photo collante des Missions
 * collait a 147 px du haut de la SECTION — decalee sous le texte, jamais a
 * l ecran. clip rogne pareil sans creer ce conteneur.
 */
.dgtcp-dgtcp.dgtcp-section {
	overflow: clip;
	padding: 4rem 0;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-dgtcp--mot.dgtcp-section {
	padding-bottom: 0;
}

/* La largeur des sections maison (chapitre 3) : le theme laisse le
   conteneur s etirer a 1500 px, et le texte collait aux bords. */
.dgtcp-dgtcp .container {
	max-width: 1320px;
}

.dgtcp-dgtcp__surtitre {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dgtcp-dgtcp__surtitre::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dgtcp-magenta);
}

.dgtcp-dgtcp .dgtcp-dgtcp__titre {
	margin: 0 0 2rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
	font-weight: 800;
}

.dgtcp-dgtcp__icone {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta);
	font-size: 1.35rem;
}

/* --- Mot du Directeur general : portrait, message, citation --- */

.dgtcp-mot {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr) 240px;
	gap: 2.5rem;
	/* Le portrait s etire sur toute la hauteur du message (retour du
	   client : pas de vide sous la carte) ; la citation, elle, reste en
	   haut, a sa hauteur. */
	align-items: stretch;
}

.dgtcp-mot--sans-citation {
	grid-template-columns: 440px minmax(0, 1fr);
}

.dgtcp-mot__carte {
	margin: 0;
	padding: 0.75rem 0.75rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 18px 40px rgba(26, 20, 24, 0.08);
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* Au moins CARRE (retour du client : la photo fournie est en paysage), et
   davantage quand la carte s etire avec le message : la photo prend toute
   la hauteur que lui laisse la legende. Le visage reste en haut. */
.dgtcp-mot__photo {
	position: relative;
	flex: 1 0 auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 12px;
	background: var(--dgtcp-light);
}

.dgtcp-mot__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.dgtcp-mot__carte figcaption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	margin-top: 1rem;
}

.dgtcp-mot__carte strong {
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 800;
}

.dgtcp-mot__carte figcaption span {
	color: var(--dgtcp-muted);
	font-size: 0.9375rem;
}

/* Rouge, jaune, vert : les couleurs du Burkina Faso sous le nom du
   Directeur general, comme sur la maquette — un des rares rappels du
   drapeau que garde cette variante. Trois traits separes d un blanc. */
.dgtcp-mot__carte figcaption::after {
	content: "";
	width: 96px;
	height: 5px;
	margin-top: 0.85rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--dgtcp-flag-red) 0 30%, transparent 30% 35%, var(--dgtcp-flag-yellow) 35% 65%, transparent 65% 70%, var(--dgtcp-flag-green) 70%);
}

.dgtcp-dgtcp .dgtcp-mot__titre {
	margin: 0 0 1rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
}

.dgtcp-mot__exergue {
	margin: 0 0 1.5rem;
	color: var(--dgtcp-texte);
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	font-style: italic;
	line-height: 1.55;
}

.dgtcp-mot__message p {
	margin: 0 0 1rem;
	color: var(--dgtcp-texte);
	font-size: 1rem;
	line-height: 1.75;
}

.dgtcp-mot__telecharger {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0 0;
}

.dgtcp-dgtcp a.dgtcp-mot__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.7rem 1.5rem;
	border: 2px solid var(--dgtcp-magenta);
	border-radius: 999px;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-dgtcp a.dgtcp-mot__bouton:hover,
.dgtcp-dgtcp a.dgtcp-mot__bouton:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-mot__poids {
	padding-left: 1rem;
	border-left: 1px solid var(--dgtcp-portail-rule);
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

.dgtcp-mot__citation {
	align-self: start;
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--dgtcp-magenta-wash);
}

.dgtcp-mot__citation > i {
	color: var(--dgtcp-magenta);
	font-size: 1.75rem;
}

/* Le bloc Citation de l editeur, remis a plat : le theme lui donne une
   bordure et des marges qui n ont pas leur place dans ce cadre. */
.dgtcp-mot__citation blockquote {
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.dgtcp-mot__citation blockquote p {
	margin: 0;
	color: var(--dgtcp-magenta-texte);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
}

.dgtcp-mot__citation blockquote::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 1.25rem;
	border-radius: 2px;
	background: var(--dgtcp-magenta);
}

.dgtcp-mot__citation cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
	font-style: normal;
}

/* --- Bandes : parcours, vision --- */

.dgtcp-dgtcp__bande {
	padding: 4rem 0;
}

.dgtcp-dgtcp__bande--claire {
	margin-top: 4rem;
	background: var(--dgtcp-light);
}

.dgtcp-dgtcp__chapeau {
	max-width: 52rem;
	margin: -1rem 0 2rem;
	color: var(--dgtcp-texte);
}

.dgtcp-dgtcp__cartes {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-dgtcp__cartes--trois {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dgtcp-dgtcp__cartes--quatre {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dgtcp-dgtcp__carte {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 1.1rem;
	padding: 1.5rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 8px 22px rgba(26, 20, 24, 0.04);
}

.dgtcp-dgtcp .dgtcp-dgtcp__carte h3 {
	margin: 0.35rem 0 0.5rem;
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
}

.dgtcp-dgtcp__carte p {
	margin: 0;
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Presentation --- */

.dgtcp-presentation {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: start;
}

/* Plus de colonne laterale unique : l'illustration est desormais celle de
   chaque partie, a droite de sa liste. Voir .dgtcp-missions__corps. */
.dgtcp-missions {
	display: block;
}

.dgtcp-presentation--sans-visuel {
	grid-template-columns: minmax(0, 52rem);
}

.dgtcp-dgtcp .dgtcp-presentation__corps h2,
.dgtcp-dgtcp .dgtcp-presentation__corps h3 {
	margin: 0 0 1rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
	font-weight: 800;
}

.dgtcp-presentation__corps p {
	margin: 0 0 0.9rem;
	color: var(--dgtcp-texte);
	line-height: 1.75;
}

/* La liste du texte devient une liste cochee, comme sur la maquette. */
.dgtcp-presentation__corps ul {
	margin: 1.25rem 0 1.5rem;
	padding: 0;
	list-style: none;
}

.dgtcp-presentation__corps li {
	position: relative;
	margin: 0 0 0.6rem;
	padding-left: 2rem;
	color: var(--dgtcp-ink);
	line-height: 1.6;
}

.dgtcp-presentation__corps li::before {
	content: "\f058";
	position: absolute;
	top: 0.05em;
	left: 0;
	color: var(--dgtcp-magenta);
	font-family: "Font Awesome 6 Free";
	font-size: 1.15rem;
	font-weight: 900;
}

.dgtcp-presentation__chiffres {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-presentation__chiffres li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(240, 0, 141, 0.18);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-presentation__chiffres .dgtcp-dgtcp__icone {
	width: 52px;
	height: 52px;
}

.dgtcp-presentation__chiffre {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-left: 0.75rem;
	border-left: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-presentation__chiffre span {
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	line-height: 1.3;
}

/* Grand et gras : le magenta de marque y suffit (3:1). */
.dgtcp-presentation__chiffre strong {
	color: var(--dgtcp-magenta);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.15;
}

.dgtcp-presentation__visuel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(26, 20, 24, 0.14);
	object-fit: cover;
}

/* Illustration d'une partie de « Missions et attributions » : a droite de sa
   liste. Pas de rognage — ces images sont composees, un object-fit: cover y
   couperait des pastilles. */
.dgtcp-missions__illustration {
	margin: 0;
	/*
	 * Centree verticalement en regard de sa liste, et NON collante.
	 *
	 * Elle l'a ete, comme la photo laterale qu'elle remplace. Mais une image
	 * qui suit le defilement le long de sa propre liste donne l'impression de
	 * bouger toute seule : le regard la voit glisser contre un texte immobile.
	 * align-self remplace le align-items: start de la rangee, qui la collait
	 * en haut.
	 */
	align-self: center;
}

.dgtcp-missions__illustration img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(26, 20, 24, 0.14);
}

/*
 * Retour du client : pas de vide sous la photo. Sur grand ecran, celle de
 * la Presentation s etire sur toute la hauteur du texte ; celle des
 * Missions prend la hauteur de l ecran et reste fixe pendant que les deux
 * listes defilent, jusqu au pied de page.
 */
@media (min-width: 992px) {
	.dgtcp-presentation {
		align-items: stretch;
	}

	.dgtcp-presentation__visuel {
		position: relative;
		min-height: 360px;
	}

	.dgtcp-presentation__visuel img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

}

/* --- Missions et attributions --- */

/* Liste a gauche, illustration a droite. Le titre de la partie et son chapeau
   restent pleine largeur, au-dessus. */
.dgtcp-missions__corps {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

.dgtcp-missions__partie + .dgtcp-missions__partie,
.dgtcp-missions__encadre + .dgtcp-missions__partie {
	margin-top: 2rem;
}

.dgtcp-dgtcp .dgtcp-missions__titre {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.dgtcp-missions__titre span {
	padding: 0.3rem 1.25rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta);
	color: #fff;
}

.dgtcp-missions__titre::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--dgtcp-magenta);
}

.dgtcp-missions__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-missions__liste li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-dgtcp .dgtcp-missions__liste h3 {
	margin: 0 0 0.2rem;
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
	scroll-margin-top: calc(var(--dgtcp-entete-h, 100px) + 1.5rem);
}

.dgtcp-missions__liste p {
	margin: 0;
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dgtcp-missions__encadre {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	background: var(--dgtcp-magenta-wash);
}

.dgtcp-missions__encadre-icone {
	padding-right: 1.25rem;
	border-right: 1px solid rgba(240, 0, 141, 0.3);
	color: var(--dgtcp-magenta);
	font-size: 1.75rem;
}

.dgtcp-dgtcp .dgtcp-missions__encadre h2 {
	margin: 0 0 0.15rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 1rem;
	font-weight: 800;
}

.dgtcp-missions__encadre p {
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
}

/* --- Responsive --- */

@media (max-width: 1199.98px) {
	/* La citation passe sous le message, dans la colonne du texte. */
	.dgtcp-mot {
		grid-template-columns: 360px minmax(0, 1fr);
	}

	.dgtcp-mot__citation {
		grid-column: 2;
	}

	.dgtcp-dgtcp__cartes--quatre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.dgtcp-presentation {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.dgtcp-missions__corps {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.dgtcp-dgtcp__cartes--trois {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767.98px) {
	.dgtcp-mot {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.dgtcp-mot__carte {
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}

	.dgtcp-mot__citation {
		grid-column: auto;
	}

	.dgtcp-dgtcp__cartes--quatre,
	.dgtcp-presentation__chiffres {
		grid-template-columns: minmax(0, 1fr);
	}

	.dgtcp-dgtcp__bande,
	.dgtcp-dgtcp.dgtcp-section {
		padding: 3rem 0;
	}

	.dgtcp-dgtcp--mot.dgtcp-section {
		padding-bottom: 0;
	}

	.dgtcp-dgtcp__bande--claire {
		margin-top: 3rem;
	}
}


/* =========================================================================
 * 45. Bandeau de titre des pages interieures
 *
 * Retour du client du 28 septembre : la photo de clavier du theme ne parle
 * pas du Tresor. Le bandeau garde sa disposition — titre et fil d Ariane au
 * centre — sur la photo du siege (Personnaliser > Image d en-tete, posee par
 * scripts/amender-la-dgtcp.php).
 *
 * Le voile passe aux couleurs du site, magenta vers encre, a la place du
 * magenta vers bleu nuit d Abiz ; assez dense pour que le titre blanc reste
 * lisible sur le ciel clair de la photo.
 * ====================================================================== */

.breadcrumb-area {
	background-color: var(--dgtcp-ink);
	/* Photo du client : ciel a gauche, siege a droite, au tiers bas. */
	background-position: right 62%;
	background-repeat: no-repeat;
	background-size: cover;
}

.breadcrumb-area::after {
	background: linear-gradient(90deg, rgba(179, 0, 105, 0.9) 0%, rgba(179, 0, 105, 0.72) 38%, rgba(26, 20, 24, 0.62) 72%, rgba(26, 20, 24, 0.5) 100%);
	opacity: 1;
}


/* =========================================================================
 * 46. Pages des e-services et du Centre d appel
 *
 * Amendement du 28 septembre, figures 10 a 15 (inc/e-services.php). Une
 * meme mise en page pour les cinq plateformes : nom et accroche, texte,
 * listes a pictogramme ou pastilles, bouton ; a droite, la capture dans un
 * cadre et le logo en medaillon. Le Centre d appel garde sa carte sombre
 * (chapitre 35), a cote d un texte a lignes a pictogramme.
 * ====================================================================== */

.dgtcp-plateforme__grille,
.dgtcp-appel__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 3.5rem;
	align-items: center;
}

.dgtcp-plateforme__grille--sans-visuel {
	grid-template-columns: minmax(0, 52rem);
}

.dgtcp-dgtcp .dgtcp-plateforme__titre {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
}

.dgtcp-plateforme__nom {
	display: block;
	color: var(--dgtcp-magenta);
}

.dgtcp-plateforme__accroche {
	display: block;
	margin-top: 0.3rem;
	color: var(--dgtcp-ink);
	font-size: 0.72em;
}

.dgtcp-plateforme__intro p {
	margin: 0 0 1rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Titre de partie : magenta, prolonge d un filet jusqu au bord de colonne. */
.dgtcp-dgtcp .dgtcp-plateforme__partie {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0 1rem;
	color: var(--dgtcp-magenta-texte);
	font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
	font-weight: 800;
}

.dgtcp-plateforme__partie::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--dgtcp-magenta);
	opacity: 0.6;
}

.dgtcp-plateforme__liste {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-plateforme__liste li {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
}

.dgtcp-plateforme__icone {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta);
	font-size: 1.15rem;
}

/* Moyens de paiement : des pastilles bordees, en rangee. */
.dgtcp-plateforme__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-plateforme__pastilles li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1rem 0.55rem 0.6rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 10px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 4px 12px rgba(26, 20, 24, 0.04);
	color: var(--dgtcp-ink);
	font-weight: 600;
}

.dgtcp-plateforme__pastilles .dgtcp-plateforme__icone {
	width: 32px;
	height: 32px;
	background: none;
	font-size: 1.05rem;
}

.dgtcp-plateforme__action {
	margin: 2rem 0 0;
}

.dgtcp-dgtcp a.dgtcp-plateforme__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 54px;
	padding: 0.8rem 1.9rem;
	border: 2px solid var(--dgtcp-magenta-texte);
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-dgtcp a.dgtcp-plateforme__bouton:hover,
.dgtcp-dgtcp a.dgtcp-plateforme__bouton:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

/*
 * Le visuel court sur toute la hauteur du texte (retour du client : pas de
 * vide a cote). Une capture d ecran y flotte, entiere, sur un panneau
 * magenta pale ; une photo remplit le panneau. Le logo deborde en bas a
 * gauche.
 */
/*
 * Retour du client : l illustration etait trop petite. Elle prend la plus
 * grande colonne (58 %).
 */
.dgtcp-plateforme__grille {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
	gap: 3rem;
	align-items: stretch;
}

.dgtcp-plateforme__visuel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	margin-bottom: 2.5rem;
	border-radius: 22px;
}

.dgtcp-plateforme__visuel--capture {
	padding: 2.5rem 2.25rem 3.5rem;
	background:
		radial-gradient(circle at 85% 12%, rgba(240, 0, 141, 0.16) 0, transparent 45%),
		linear-gradient(160deg, var(--dgtcp-magenta-wash) 0%, var(--dgtcp-light) 100%);
}

.dgtcp-plateforme__ecran {
	overflow: hidden;
	width: 100%;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 16px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 24px 54px rgba(26, 20, 24, 0.16);
}

.dgtcp-plateforme__ecran img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Retour du client du 28 septembre : l image — capture ou photo — remplit
 * TOUT le cadre, sans marge blanche autour ; le medaillon du logo peut la
 * recouvrir. Le panneau pale et sa marge interieure ne servent plus.
 */
.dgtcp-plateforme__visuel--capture {
	padding: 0;
	background: var(--dgtcp-magenta-wash);
}

/*
 * UN GRAND CADRE, AU FORMAT DE L IMAGE (retours du client du 28 septembre :
 * trop petit, puis « pas de rognage »). Le format vient de l image, en ligne
 * (inc/e-services.php) : elle remplit le cadre sans etre coupee. La taille
 * vient de la page : elle s elargit jusqu a 1680 px et l image prend 62 %
 * de la rangee — le blanc qui restait a droite du cadre est pour elle. Le
 * medaillon du logo garde sa taille.
 */
.dgtcp-plateforme__visuel {
	align-self: center;
	min-height: 0;
	aspect-ratio: 29 / 20;
}

.dgtcp-plateforme .container {
	max-width: 1680px;
	padding-inline: clamp(1rem, 4vw, 3.5rem);
}

@media (min-width: 992px) {
	.dgtcp-plateforme__grille {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
		gap: 3.5rem;
	}
}

.dgtcp-plateforme__ecran {
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

.dgtcp-plateforme__ecran img {
	height: 100%;
	object-fit: cover;
	/* Rognee a droite seulement : voir le cadre commun, plus haut. */
	object-position: left top;
}

.dgtcp-plateforme__medaillon {
	position: absolute;
	z-index: 1;
	bottom: -2.5rem;
	left: -1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	height: 96px;
	padding: 14px 18px;
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 12px 30px rgba(26, 20, 24, 0.16);
}

.dgtcp-plateforme__medaillon img {
	display: block;
	width: auto;
	max-width: 150px;
	max-height: 64px;
}

/* --- Centre d appel et Numero vert --- */

.dgtcp-appel__grille {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.dgtcp-dgtcp .dgtcp-appel__intro h2 {
	margin: 0 0 1rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.625rem);
	font-weight: 800;
	line-height: 1.15;
}

.dgtcp-appel__intro p {
	margin: 0 0 1.25rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dgtcp-appel__liste {
	display: grid;
	gap: 1.1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.dgtcp-appel__liste li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
}

.dgtcp-dgtcp .dgtcp-appel__liste h3 {
	margin: 0 0 0.15rem;
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	font-weight: 800;
}

.dgtcp-appel__liste p {
	margin: 0;
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
}

.dgtcp-appel__note {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
}

.dgtcp-appel__note p {
	margin: 0;
}

.dgtcp-appel__note a {
	color: var(--dgtcp-magenta-texte);
	font-weight: 600;
}

/* La carte sombre s elargit a sa colonne, et la phrase du bas n est plus
   une pastille : c est une phrase. */
.dgtcp-appel .dgtcp-telephone {
	max-width: 32rem;
	padding: 3rem 2.5rem 2.5rem;
}

.dgtcp-appel .dgtcp-telephone__numero {
	font-size: clamp(3.25rem, 2.2rem + 3.6vw, 5rem);
}

.dgtcp-appel .dgtcp-telephone__gratuit {
	display: block;
	margin-top: 1.1rem;
	padding: 0;
	border: 0;
	font-weight: 500;
	opacity: 0.9;
}

@media (max-width: 991.98px) {
	.dgtcp-plateforme__grille,
	.dgtcp-appel__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.dgtcp-plateforme__medaillon {
		left: 1rem;
	}

	.dgtcp-plateforme__visuel {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-plateforme__pastilles li {
		width: 100%;
	}

	.dgtcp-dgtcp a.dgtcp-plateforme__bouton {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dgtcp-dgtcp a.dgtcp-plateforme__bouton {
		transition: none;
	}
}


/* =========================================================================
 * 47. Page Contact — maquette du 28 septembre (figure 16)
 *
 * A gauche, une seule carte : la photo, puis les coordonnees, pastilles
 * pleines et numeros en magenta. A droite, le formulaire s ouvre sur son
 * titre ; chaque champ porte son pictogramme, pose ici sur l enveloppe que
 * Contact Form 7 met autour du champ (.wpcf7-form-control-wrap).
 * ====================================================================== */

.dgtcp-contact__rangee {
	grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr);
	gap: 2.5rem;
}

/* Declaree apres la regle ci-dessus : sans elle, les deux colonnes
   l emportaient aussi sur telephone, et le texte passait lettre par lettre. */
@media (max-width: 991.98px) {
	.dgtcp-contact__rangee {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

/* La largeur des sections maison (chapitre 3) : le theme laisse le
   conteneur s etirer a 1500 px, les deux cartes collaient aux bords. */
.dgtcp-section--contact .container {
	max-width: 1320px;
}

.dgtcp-contact__carte {
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 18px 40px rgba(26, 20, 24, 0.06);
}

/*
 * Retour du client : la carte de gauche et le formulaire ont la MEME
 * hauteur. La rangee etire ses deux colonnes ; dans la carte, la photo
 * prend toute la hauteur que laissent les coordonnees.
 */
.dgtcp-contact .dgtcp-contact__rangee {
	align-items: stretch;
}

.dgtcp-contact__carte {
	display: flex;
	flex-direction: column;
}

.dgtcp-contact__carte .dgtcp-contact__visuel {
	position: relative;
	flex: 1 1 auto;
	min-height: 240px;
	border-radius: 0;
	aspect-ratio: auto;
}

.dgtcp-contact__carte .dgtcp-contact__visuel img {
	position: absolute;
	inset: 0;
}

@media (max-width: 991.98px) {
	.dgtcp-contact__carte .dgtcp-contact__visuel {
		flex: none;
		aspect-ratio: 16 / 10;
	}
}

.dgtcp-contact__carte .dgtcp-contact__liste {
	gap: 0;
	margin: 0;
	padding: 0.5rem 1.75rem 1rem;
}

.dgtcp-contact__carte .dgtcp-contact__item {
	gap: 1.1rem;
	padding: 0.9rem 0;
}

.dgtcp-contact__carte .dgtcp-contact__item + .dgtcp-contact__item {
	border-top: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-contact__carte .dgtcp-contact__pastille {
	width: 52px;
	height: 52px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.2rem;
}

.dgtcp-contact__carte .dgtcp-contact__libelle {
	color: var(--dgtcp-ink-soft);
	font-size: 0.9375rem;
}

.dgtcp-contact .dgtcp-contact__carte .dgtcp-contact__valeur {
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

/* Grand et gras : le magenta de marque passe (3:1). */
.dgtcp-contact .dgtcp-contact__carte .dgtcp-contact__valeur--numero {
	color: var(--dgtcp-magenta);
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.2;
}

.dgtcp-contact .dgtcp-contact__carte .dgtcp-contact__valeur--numero:hover,
.dgtcp-contact .dgtcp-contact__carte .dgtcp-contact__valeur--numero:focus-visible {
	color: var(--dgtcp-magenta-texte);
}

/* --- Le formulaire --- */

.dgtcp-contact .dgtcp-contact__formulaire {
	padding: 2.25rem 2.25rem 2rem;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(26, 20, 24, 0.06);
}

.dgtcp-contact__entete {
	margin-bottom: 1.5rem;
}

.dgtcp-contact .dgtcp-contact__entete h2 {
	margin: 0 0 0.5rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	font-weight: 800;
}

.dgtcp-contact__entete p {
	margin: 0;
	color: var(--dgtcp-texte);
}

.dgtcp-contact .dgtcp-formulaire__ligne {
	gap: 0.45rem;
	margin-bottom: 1.1rem;
}

/* Le pictogramme du champ, a gauche, dans la marge interieure. */
.dgtcp-champ .wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.dgtcp-champ .wpcf7-form-control-wrap::before {
	position: absolute;
	top: 50%;
	left: 1rem;
	z-index: 1;
	color: var(--dgtcp-muted);
	font-family: "Font Awesome 6 Free";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	transform: translateY(-50%);
}

.dgtcp-champ--nom .wpcf7-form-control-wrap::before { content: "\f007"; }
.dgtcp-champ--courriel .wpcf7-form-control-wrap::before { content: "\f0e0"; }
.dgtcp-champ--telephone .wpcf7-form-control-wrap::before { content: "\f095"; font-weight: 900; }
.dgtcp-champ--structure .wpcf7-form-control-wrap::before { content: "\f19c"; font-weight: 900; }
.dgtcp-champ--objet .wpcf7-form-control-wrap::before { content: "\f03a"; font-weight: 900; }
.dgtcp-champ--message .wpcf7-form-control-wrap::before { content: "\f15c"; top: 1.35rem; }

.dgtcp-contact .dgtcp-champ input[type="text"],
.dgtcp-contact .dgtcp-champ input[type="email"],
.dgtcp-contact .dgtcp-champ input[type="tel"],
.dgtcp-contact .dgtcp-champ select,
.dgtcp-contact .dgtcp-champ textarea {
	min-height: 52px;
	padding-left: 2.9rem;
	border-color: rgba(26, 20, 24, 0.14);
	border-radius: 10px;
}

.dgtcp-contact .dgtcp-champ textarea {
	padding-top: 0.9rem;
}

.dgtcp-contact .dgtcp-champ ::placeholder {
	color: var(--dgtcp-muted);
	opacity: 1;
}

/* Le bouton : l avion en papier est pose sur son enveloppe, a gauche du
   texte ; il suit la couleur du texte au survol. */
.dgtcp-contact .dgtcp-formulaire__envoi {
	position: relative;
	display: inline-block;
	margin-top: 0.5rem;
}

.dgtcp-contact .dgtcp-formulaire__envoi::before {
	content: "\f1d8";
	position: absolute;
	top: 50%;
	left: 1.5rem;
	z-index: 1;
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	pointer-events: none;
	transform: translateY(-50%);
}

.dgtcp-contact .dgtcp-formulaire__envoi input[type="submit"] {
	min-height: 52px;
	padding: 0.85rem 2.25rem 0.85rem 3.4rem;
	background: var(--dgtcp-magenta-texte);
	box-shadow: 0 10px 24px rgba(179, 0, 105, 0.25);
	font-size: 1.0625rem;
	font-weight: 700;
}

/* L enveloppe de Contact Form 7 cache le « spinner » a droite du bouton :
   on le garde, mais hors du bouton. */
.dgtcp-contact .dgtcp-formulaire__envoi .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: -2.5rem;
	margin: 0;
	transform: translateY(-50%);
}

@media (max-width: 575.98px) {
	.dgtcp-contact .dgtcp-contact__formulaire {
		padding: 1.5rem 1.25rem;
	}

	.dgtcp-contact__carte .dgtcp-contact__liste {
		padding: 0.25rem 1.25rem 0.75rem;
	}

	.dgtcp-contact .dgtcp-formulaire__envoi,
	.dgtcp-contact .dgtcp-formulaire__envoi input[type="submit"] {
		width: 100%;
	}
}


/* =========================================================================
 * 48. Cellule anti-corruption — maquette du 28 septembre (figure 17)
 *
 * Sur fond clair, une carte blanche par partie de la page (inc/e-services.php,
 * dgtcp_section_cellule()) : presentation, attributions en cartes a
 * pastille, procedure en etapes numerotees reliees par un trait a cote du
 * numero vert, garanties.
 * ====================================================================== */

.dgtcp-cellule.dgtcp-section {
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-cellule__bloc {
	margin-bottom: 1.5rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 18px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 10px 30px rgba(26, 20, 24, 0.04);
}

.dgtcp-cellule__bloc:last-child {
	margin-bottom: 0;
}

.dgtcp-dgtcp .dgtcp-cellule__titre {
	margin: 0 0 1.1rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
	font-weight: 800;
}

.dgtcp-cellule__principal > p {
	max-width: 70rem;
	margin: 0 0 0.75rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dgtcp-cellule__principal > p:last-child {
	margin-bottom: 0;
}

/* --- Cartes a pastille --- */

.dgtcp-cellule__cartes {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-cellule__cartes--deux {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dgtcp-cellule__cartes--quatre {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dgtcp-cellule__cartes li {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 4px 14px rgba(26, 20, 24, 0.04);
	color: var(--dgtcp-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

.dgtcp-cellule__pastille {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.25rem;
}

/* --- Procedure : etapes a gauche, numero vert a droite --- */

.dgtcp-cellule__bloc--etapes {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

.dgtcp-cellule__etapes {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dgtcp-etape;
}

/*
 * Numero dans un disque magenta, relie au suivant par un trait : le
 * pictogramme de l etape vient ensuite, puis son titre et sa precision.
 */
.dgtcp-cellule__etapes li {
	position: relative;
	display: grid;
	grid-template-columns: 40px 48px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: 0.55rem 0;
	counter-increment: dgtcp-etape;
}

.dgtcp-cellule__etapes li::before {
	content: counter(dgtcp-etape);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-weight: 800;
}

.dgtcp-cellule__etapes li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(50% + 18px);
	left: 17px;
	width: 2px;
	height: calc(100% - 36px);
	background: var(--dgtcp-magenta);
	opacity: 0.5;
}

.dgtcp-cellule__etape {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.dgtcp-cellule__etape strong {
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
}

.dgtcp-cellule__etape span {
	color: var(--dgtcp-texte);
	font-size: 0.9375rem;
}

.dgtcp-cellule .dgtcp-telephone {
	max-width: none;
	margin: 0;
}

@media (max-width: 1199.98px) {
	.dgtcp-cellule__cartes--quatre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.dgtcp-cellule__bloc--etapes {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767.98px) {
	.dgtcp-cellule__bloc {
		padding: 1.25rem;
	}

	.dgtcp-cellule__cartes--deux,
	.dgtcp-cellule__cartes--quatre {
		grid-template-columns: minmax(0, 1fr);
	}

	.dgtcp-cellule__etapes li {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.dgtcp-cellule__etapes .dgtcp-plateforme__icone {
		display: none;
	}
}


/* =========================================================================
 * 47 bis. Page Contact — une seule carte (retour du client du 28 septembre)
 *
 * Coordonnees et formulaire ne font plus qu une carte : la rangee porte la
 * bordure, l ombre et l arrondi ; ses deux colonnes n ont plus de cadre ni
 * d espace entre elles, et aucun filet ne les separe. Le bouton « Envoyer »
 * passe a droite, la ou la main le cherche en fin de formulaire.
 * ====================================================================== */

.dgtcp-contact .dgtcp-contact__rangee {
	gap: 0;
	overflow: hidden;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 20px;
	background: var(--dgtcp-portail-carte);
	box-shadow: 0 18px 40px rgba(26, 20, 24, 0.06);
}

.dgtcp-contact .dgtcp-contact__carte,
.dgtcp-contact .dgtcp-contact__formulaire {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.dgtcp-contact .dgtcp-contact__formulaire {
	padding: 2.5rem 2.75rem;
}

/* Le formulaire suit : son titre s aligne sur le haut de la photo. */
.dgtcp-contact .dgtcp-formulaire__envoi {
	display: block;
	width: fit-content;
	margin: 0.75rem 0 0 auto;
}

/* Le « spinner » de Contact Form 7 passe a gauche du bouton, dans la carte. */
.dgtcp-contact .dgtcp-formulaire__envoi .wpcf7-spinner {
	right: auto;
	left: -2.5rem;
}

@media (max-width: 991.98px) {
	.dgtcp-contact .dgtcp-contact__formulaire {
		padding: 2rem 1.5rem;
	}
}

@media (max-width: 575.98px) {
	.dgtcp-contact .dgtcp-formulaire__envoi {
		width: 100%;
	}
}


/* =========================================================================
 * 49. Chantiers des Reformes — maquettes du 28 septembre (figures 18 a 21)
 *
 * Titre visible a cote du filigrane, chapeau, puis une partie par titre
 * (dgtcp_chantier_corps()) : cartes a pastille deux par rangee, celles de
 * la Cellule anti-corruption (chapitre 48), plus serrees ici. La photo
 * s aligne en haut, sur le titre.
 * ====================================================================== */

@media (min-width: 992px) {
	.dgtcp-section--chantier .dgtcp-reforme {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
		gap: 3.5rem;
		align-items: start;
	}
}

/*
 * Retour du client : sur un grand ecran, la page restait a 1320 px, la
 * photo sortait haute et etroite et le texte serre. Elle s elargit a
 * 1680 px, comme les e-services : les deux colonnes y gagnent, la photo
 * devient plus large que haute.
 */
.dgtcp-section--chantier .container {
	max-width: 1680px;
	padding-inline: clamp(1rem, 4vw, 3.5rem);
}

@media (min-width: 992px) {
	.dgtcp-section--chantier .dgtcp-reforme {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 4rem;
	}
}

.dgtcp-section--chantier .dgtcp-reforme__titre {
	margin: 0.5rem 0 0.9rem;
	color: var(--dgtcp-ink);
	font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
	font-weight: 800;
	line-height: 1.2;
}

.dgtcp-reforme__chapeau p,
.dgtcp-reforme__texte-libre p {
	margin: 0 0 0.75rem;
	color: var(--dgtcp-texte);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dgtcp-section--chantier .dgtcp-reforme__partie {
	margin: 1.75rem 0 0.9rem;
	color: var(--dgtcp-ink);
	font-size: 1.25rem;
	font-weight: 800;
}

.dgtcp-reforme__cartes {
	margin-bottom: 0.9rem;
}

.dgtcp-reforme__cartes li {
	align-items: flex-start;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.dgtcp-reforme__cartes .dgtcp-cellule__pastille {
	width: 46px;
	height: 46px;
	font-size: 1.05rem;
}

.dgtcp-reforme__carte {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	align-self: center;
}

.dgtcp-reforme__carte strong {
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
}

.dgtcp-reforme__carte strong + span {
	color: var(--dgtcp-texte);
	font-weight: 400;
	line-height: 1.5;
}

@media (max-width: 767.98px) {
	.dgtcp-reforme__cartes.dgtcp-cellule__cartes--deux {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Retour du client (pages de La DGTCP) : pas de vide sous la photo. Sur
 * grand ecran, le cadre s etire sur toute la hauteur du texte ; le badge
 * reste pose sur son bas.
 */
@media (min-width: 992px) {
	.dgtcp-section--chantier .dgtcp-reforme {
		align-items: stretch;
	}

	.dgtcp-section--chantier .dgtcp-reforme__visuel {
		display: flex;
		flex-direction: column;
		padding-top: 0.5rem;
	}

	.dgtcp-section--chantier .dgtcp-reforme__cadre {
		flex: 1 1 auto;
		min-height: 420px;
		aspect-ratio: auto;
	}

	/* Cadre plus haut que large : le sujet des quatre photos est a droite
	   (l agent, la commercante, le batiment) — on le garde. */
	.dgtcp-section--chantier .dgtcp-reforme__cadre img {
		position: absolute;
		inset: 0;
		object-position: 72% center;
	}
}


/* =========================================================================
 * 50. Bibliotheque — maquettes du 28 septembre (figures 22 a 24)
 *
 * Un panneau de filtres par page (recherche, annee, categorie) suivi du
 * bilan ; Documents : colonne des categories a gauche, familles repliables,
 * une ligne par fichier ; Phototheque : albums en cartes, deux par rangee,
 * mosaique de quatre photos ; Videotheque : quatre videos par rangee, chaine
 * en badge. « Charger plus » sous les groupes (inc/bibliotheque.php).
 * ====================================================================== */

.dgtcp-section--documents .container,
.dgtcp-section--phototheque .container,
.dgtcp-section--videotheque .container {
	max-width: 1440px;
}

/* overflow: clip et non hidden : hidden fait de la section un conteneur de
   defilement, et la colonne collante des categories s y decalait de 70 px
   (meme piege que la photo des Missions, chapitre 44). */
.dgtcp-section--documents.dgtcp-section {
	overflow: clip;
}

/* La liste des documents deborde la colonne de 52 rem (chapitre 35) : son
   panneau de filtres et ses familles depliables demandent toute la largeur. */
.dgtcp-documents:has(.dgtcp-documents__rangee) {
	max-width: none;
}

/* --- Panneau de filtres, dans la page --- */

.dgtcp-biblio-recherche--page {
	padding: 0;
}

.dgtcp-biblio-recherche--page .dgtcp-biblio-recherche__cadre {
	max-width: none;
	margin: 0;
}

.dgtcp-biblio-recherche__categories {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dgtcp-biblio-recherche__categories legend {
	display: block;
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--dgtcp-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.dgtcp-biblio__total {
	margin: 1.5rem 0 1rem;
	color: var(--dgtcp-muted);
	font-size: 1.0625rem;
}

.dgtcp-biblio__total strong {
	color: var(--dgtcp-magenta-texte);
	font-weight: 800;
}

.dgtcp-biblio__nouveau {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5rem;
	padding: 0.1rem 0.6rem;
	border: 1px solid var(--dgtcp-magenta);
	border-radius: 999px;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.75rem;
	font-weight: 700;
	vertical-align: middle;
	white-space: nowrap;
}

.dgtcp-biblio__plus {
	margin: 2rem 0 0;
	text-align: center;
}

.dgtcp-biblio__plus[hidden] {
	display: none;
}

.dgtcp-section button.dgtcp-biblio__bouton-plus {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.6rem 1.75rem;
	border: 1.5px solid var(--dgtcp-magenta);
	border-radius: 999px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
	font-weight: 700;
	cursor: pointer;
}

.dgtcp-section button.dgtcp-biblio__bouton-plus:hover,
.dgtcp-section button.dgtcp-biblio__bouton-plus:focus {
	outline: none;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

.dgtcp-section button.dgtcp-biblio__bouton-plus:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

/* Un groupe masque par un filtre : details et article ont l attribut hidden,
   que display: grid ou block des regles d album ecraserait. */
.dgtcp-albums [data-groupe][hidden] {
	display: none;
}

/* --- Documents --- */

/* La colonne « Categories » a ete retiree : les pastilles « Type de document »
   du panneau font le meme travail, et le faisaient deja seules sous 992 px. */
.dgtcp-documents__rangee {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.dgtcp-album.dgtcp-album--documents {
	padding: 0;
	overflow: hidden;
}

.dgtcp-documents__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 1.1rem 1.5rem;
	cursor: pointer;
	list-style: none;
}

.dgtcp-documents__entete::-webkit-details-marker {
	display: none;
}

.dgtcp-documents__entete .dgtcp-album__titre {
	margin: 0;
}

.dgtcp-documents__icone {
	color: var(--dgtcp-magenta);
	font-size: 1.5rem;
}

.dgtcp-documents__entete .dgtcp-album__compte {
	color: var(--dgtcp-muted);
	font-size: 0.9375rem;
}

.dgtcp-documents__chevron {
	margin-left: auto;
	color: var(--dgtcp-ink);
	transition: transform 0.2s ease;
}

.dgtcp-album--documents:not([open]) .dgtcp-documents__chevron {
	transform: rotate(180deg);
}

.dgtcp-documents__entete:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: -2px;
}

.dgtcp-fichiers {
	margin: 0;
	padding: 0 1.25rem 1.1rem;
	list-style: none;
}

.dgtcp-fichier {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0.75rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-fichier__format {
	flex-shrink: 0;
	width: 2.25rem;
	font-size: 2rem;
	text-align: center;
}

.dgtcp-fichier__format--pdf { color: #d93025; }
.dgtcp-fichier__format--word { color: #2b579a; }
.dgtcp-fichier__format--excel { color: #217346; }
.dgtcp-fichier__format--powerpoint { color: #c43e1c; }
.dgtcp-fichier__format--autre { color: var(--dgtcp-muted); }

.dgtcp-fichier__texte {
	flex: 1;
	min-width: 0;
}

.dgtcp-fichier__nom {
	margin: 0 0 0.2rem;
	color: var(--dgtcp-ink);
	font-weight: 700;
}

.dgtcp-fichier__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

.dgtcp-fichier__meta time i {
	color: var(--dgtcp-magenta);
}

.dgtcp-section a.dgtcp-fichier__apercu {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 50%;
	color: var(--dgtcp-magenta-texte);
	text-decoration: none;
}

.dgtcp-section a.dgtcp-fichier__apercu:hover,
.dgtcp-section a.dgtcp-fichier__apercu:focus-visible {
	border-color: var(--dgtcp-magenta);
	background: var(--dgtcp-magenta-wash);
}

.dgtcp-section a.dgtcp-fichier__telecharger {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-height: 44px;
	padding: 0.55rem 1.4rem;
	border: 2px solid var(--dgtcp-magenta-texte);
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-section a.dgtcp-fichier__telecharger:hover,
.dgtcp-section a.dgtcp-fichier__telecharger:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

/* --- Aperçu d'un document (assets/js/apercu-documents.js) ---
   Une fenêtre à hauteur fixe : l'en-tête et le bouton Télécharger restent en
   place, seul le document défile. La page derrière ne défile pas. */

html.dgtcp-apercu-ouvert {
	overflow: hidden;
}

.dgtcp-apercu {
	width: min(96vw, 1200px);
	height: min(92vh, 1000px);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* Sur l'élément ouvert seulement : display:flex sur <dialog> l'afficherait fermé. */
.dgtcp-apercu[open] {
	display: flex;
	flex-direction: column;
}

.dgtcp-apercu::backdrop {
	background: rgba(12, 9, 11, 0.8);
}

.dgtcp-apercu__entete {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-apercu__format {
	flex-shrink: 0;
	width: 2.25rem;
	font-size: 1.9rem;
	text-align: center;
}

.dgtcp-apercu__texte {
	flex: 1;
	min-width: 0;
}

.dgtcp-apercu .dgtcp-apercu__titre {
	overflow: hidden;
	margin: 0;
	color: var(--dgtcp-ink);
	font-size: 1.125rem;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dgtcp-apercu__meta {
	margin: 0.15rem 0 0;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

/* Spécificité relevée contre a:not(.comments-count) de main.css. */
.dgtcp-apercu a.dgtcp-apercu__telecharger,
.dgtcp-apercu a.dgtcp-apercu__secondaire {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.55rem 1.4rem;
	border: 2px solid var(--dgtcp-magenta-texte);
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-apercu a.dgtcp-apercu__secondaire {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-apercu a.dgtcp-apercu__telecharger:hover,
.dgtcp-apercu a.dgtcp-apercu__telecharger:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

.dgtcp-apercu a.dgtcp-apercu__secondaire:hover,
.dgtcp-apercu a.dgtcp-apercu__secondaire:focus-visible {
	background: var(--dgtcp-magenta-wash);
}

/* Spécificité relevée contre button[type="button"]:hover de main.css. */
.dgtcp-apercu button.dgtcp-apercu__fermer {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 50%;
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-ink);
	font-size: 1.2rem;
	cursor: pointer;
}

.dgtcp-apercu button.dgtcp-apercu__fermer:hover,
.dgtcp-apercu button.dgtcp-apercu__fermer:focus {
	border-color: var(--dgtcp-magenta);
	background: var(--dgtcp-magenta-wash);
	color: var(--dgtcp-magenta-texte);
	outline: none;
}

.dgtcp-apercu button.dgtcp-apercu__fermer:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-apercu__corps {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: auto;
	background: var(--dgtcp-portail-alterne);
}

.dgtcp-apercu--pdf .dgtcp-apercu__corps {
	overflow: hidden;
}

.dgtcp-apercu__cadre {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.dgtcp-apercu__message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 100%;
	padding: 2rem 1.5rem;
	color: var(--dgtcp-muted);
	text-align: center;
}

.dgtcp-apercu__message > i {
	color: var(--dgtcp-magenta);
	font-size: 2.5rem;
}

.dgtcp-apercu__message p {
	max-width: 32rem;
	margin: 0;
}

.dgtcp-apercu__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* Word : le document sur une feuille blanche, à la largeur d'une page. */
.dgtcp-apercu__page {
	max-width: 816px;
	margin: 2rem auto;
	padding: 72px 80px;
	background: #fff;
	color: var(--dgtcp-ink);
	font-size: 1rem;
	line-height: 1.55;
	box-shadow: 0 2px 12px rgba(26, 20, 24, 0.12);
	overflow-wrap: anywhere;
}

.dgtcp-apercu__page p,
.dgtcp-apercu__page .dgtcp-apercu__titre-doc {
	min-height: 1em;
	margin: 0 0 0.6em;
	white-space: pre-wrap;
}

.dgtcp-apercu__page .dgtcp-apercu__titre-doc {
	margin-top: 1em;
	color: var(--dgtcp-ink);
	line-height: 1.3;
}

.dgtcp-apercu__page .dgtcp-apercu__titre-doc--grand {
	margin-top: 0;
	font-size: 2rem;
}

.dgtcp-apercu__page .dgtcp-apercu__puce {
	position: relative;
	padding-left: calc(1.5em + var(--dgtcp-niveau, 0) * 1.5em);
}

.dgtcp-apercu__page .dgtcp-apercu__puce::before {
	content: attr(data-puce);
	position: absolute;
	left: calc(var(--dgtcp-niveau, 0) * 1.5em);
}

.dgtcp-apercu__page table {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
}

.dgtcp-apercu__page td {
	padding: 0.35rem 0.5rem;
	border: 1px solid #bdb5ba;
	vertical-align: top;
}

.dgtcp-apercu__page td p:last-child {
	margin-bottom: 0;
}

.dgtcp-apercu__page img {
	max-width: 100%;
	height: auto;
}

.dgtcp-apercu__page a {
	color: var(--dgtcp-magenta-texte);
}

/* Excel : la grille, avec lettres de colonnes et numéros de lignes fixés. */
.dgtcp-apercu__classeur {
	min-height: 100%;
	background: #fff;
}

/* Largeur du contenu, comme dans Excel : main.css étire tout tableau à 100 %,
   ce qui écartait une date de son montant de toute la largeur de l'écran. */
.dgtcp-apercu__classeur table {
	width: auto;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.875rem;
}

.dgtcp-apercu__classeur th,
.dgtcp-apercu__classeur td {
	padding: 0.3rem 0.65rem;
	border-right: 1px solid #e3dde0;
	border-bottom: 1px solid #e3dde0;
	white-space: nowrap;
}

.dgtcp-apercu__classeur td {
	min-width: 5rem;
	max-width: 28rem;
	overflow: hidden;
	color: var(--dgtcp-ink);
	text-overflow: ellipsis;
}

.dgtcp-apercu__classeur th {
	position: sticky;
	z-index: 1;
	background: var(--dgtcp-portail-alterne);
	color: var(--dgtcp-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}

.dgtcp-apercu__classeur thead th {
	top: 0;
}

.dgtcp-apercu__classeur tbody th {
	left: 0;
	min-width: 3rem;
}

.dgtcp-apercu__classeur .dgtcp-apercu__coin {
	left: 0;
	z-index: 2;
}

.dgtcp-apercu__classeur .dgtcp-apercu__nombre {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.dgtcp-apercu__limite {
	margin: 0;
	padding: 0.75rem 1rem;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

/* Onglets des feuilles, en bas comme dans Excel. */
.dgtcp-apercu__onglets {
	display: flex;
	flex-shrink: 0;
	gap: 0.25rem;
	padding: 0 1rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
	background: var(--dgtcp-portail-alterne);
	overflow-x: auto;
}

.dgtcp-apercu__onglets[hidden] {
	display: none;
}

.dgtcp-apercu button.dgtcp-apercu__onglet {
	flex-shrink: 0;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 0;
	border-top: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--dgtcp-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.dgtcp-apercu button.dgtcp-apercu__onglet[aria-selected="true"] {
	border-top-color: var(--dgtcp-magenta);
	background: #fff;
	color: var(--dgtcp-ink);
}

.dgtcp-apercu button.dgtcp-apercu__onglet:hover,
.dgtcp-apercu button.dgtcp-apercu__onglet:focus {
	background: #fff;
	color: var(--dgtcp-magenta-texte);
	outline: none;
}

.dgtcp-apercu button.dgtcp-apercu__onglet:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: -2px;
}

/* Téléphone : plein écran, le bouton Télécharger passe sous le titre. */
@media (max-width: 575.98px) {
	.dgtcp-apercu {
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
	}

	.dgtcp-apercu__entete {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
	}

	.dgtcp-apercu__texte {
		flex-basis: calc(100% - 6.5rem);
	}

	.dgtcp-apercu .dgtcp-apercu__titre {
		font-size: 1rem;
		white-space: normal;
	}

	.dgtcp-apercu a.dgtcp-apercu__telecharger {
		order: 1;
		flex: 1 0 100%;
	}

	.dgtcp-apercu__page {
		margin: 0.75rem;
		padding: 1.5rem 1.25rem;
	}
}

/* --- Phototheque : albums en cartes --- */

.dgtcp-albums--grille {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.dgtcp-albums--grille > .dgtcp-biblio__aucun {
	grid-column: 1 / -1;
}

.dgtcp-album--carte {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.dgtcp-album--carte .dgtcp-album__entete {
	margin-bottom: 1rem;
}

.dgtcp-album--carte .dgtcp-album__intitule {
	flex: 1;
}

/*
 * Mosaique de quatre : la premiere photo sur deux rangees a gauche, la
 * deuxieme en large en haut a droite, les deux suivantes en dessous. Les
 * regles de la mosaique a cinq (chapitre 36) sont remises a zero ici.
 */
.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images {
	grid-template-columns: 1.3fr 1fr 1fr;
	grid-template-rows: 150px 150px;
	grid-auto-rows: 0;
	gap: 0.6rem;
}

.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
}

.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(2) {
	grid-column: 2 / span 2;
	grid-row: 1;
}

/* Trois photos : la troisieme prend la largeur du bas. Deux : la seconde
   descend sur les deux rangees. */
.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(3):last-child {
	grid-column: 2 / span 2;
}

.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(2):last-child {
	grid-row: 1 / span 2;
}

.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child {
	grid-column: 1 / -1;
}

.dgtcp-album--carte.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(n+5) {
	display: none !important;
}

.dgtcp-album--carte.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4) {
	position: relative;
}

.dgtcp-album--carte.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(4)::after {
	content: var(--dgtcp-plus);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: rgba(26, 20, 24, 0.55);
	color: #fff;
	font-size: 1.75rem;
	font-weight: 800;
	pointer-events: none;
}

/* La cinquieme n est plus la porteuse du « +N » : la regle de la mosaique a
   cinq ne doit plus la voiler. */
.dgtcp-album--carte.dgtcp-album--tronque .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(5)::after {
	content: none;
}

.dgtcp-album__pied {
	margin: auto 0 0;
	padding-top: 1.1rem;
	text-align: right;
}

.dgtcp-album a.dgtcp-album__complet {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1.35rem;
	border: 1.5px solid var(--dgtcp-magenta);
	border-radius: 999px;
	color: var(--dgtcp-magenta-texte);
	font-weight: 700;
	text-decoration: none;
}

.dgtcp-album a.dgtcp-album__complet:hover,
.dgtcp-album a.dgtcp-album__complet:focus-visible {
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

/* --- Videotheque : quatre par rangee, chaine en badge --- */

.dgtcp-section--videotheque .dgtcp-videos {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dgtcp-video__chaine {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	padding: 0.15rem 0.6rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--dgtcp-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.dgtcp-video .dgtcp-video__titre {
	display: block;
	-webkit-line-clamp: unset;
}

.dgtcp-video__source {
	display: block;
	margin-top: 0.3rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.875rem;
	font-weight: 700;
}

/* --- Tablette et telephone --- */

@media (max-width: 1199.98px) {
	.dgtcp-section--videotheque .dgtcp-videos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.dgtcp-albums--grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.dgtcp-fichier {
		flex-wrap: wrap;
	}

	.dgtcp-fichier__texte {
		flex-basis: calc(100% - 3.25rem);
	}

	.dgtcp-section a.dgtcp-fichier__telecharger {
		flex: 1;
		justify-content: center;
	}

	.dgtcp-album--carte .dgtcp-album__contenu .wp-block-gallery.has-nested-images {
		grid-template-rows: 110px 110px;
	}

	.dgtcp-section--videotheque .dgtcp-videos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
 * TEXTE COURANT JUSTIFIE
 *
 * Demande du client. La cesure est indissociable du procede : sans elle, le
 * francais — mots longs, peu de monosyllabes — creuse des lezardes blanches
 * dans les colonnes etroites. L element <html> porte lang="fr-FR", le
 * navigateur sait donc ou couper.
 *
 * PAR LISTE EXPLICITE, ET NON PAR UNE REGLE LARGE
 *
 * Une regle du genre « #content p » aurait aussi frappe les blocs centres a
 * dessein — chapeaux des sections, entetes de bloc, chiffres cles, mot du
 * directeur, pied de page. Un alignement pose directement l emporte toujours
 * sur un alignement herite : ces blocs seraient repasses a gauche sans que
 * rien ne le signale.
 *
 * On enumere donc les conteneurs de texte courant. Y ajouter un nouveau
 * conteneur de prose quand il en apparait un.
 *
 * text-align-last: left empeche la derniere ligne d un paragraphe d etre
 * etiree elle aussi, ce que certains navigateurs font sur un texte court.
 * ====================================================================== */

.dgtcp-appel__intro,
.dgtcp-cellule__principal,
.dgtcp-plateforme__intro,
.dgtcp-reforme__chapeau,
.dgtcp-reforme__texte-libre,
.dgtcp-presentation__corps,
.dgtcp-mot__message,
.dgtcp-faq__reponse,
.dgtcp-dgtcp__chapeau,
.dgtcp-cellule__bloc,
.dgtcp-section__corps,
.dgtcp-sommaire__corps,
.dgtcp-secteur-page__corps,
.dgtcp-secteur-page__contenu,
.dgtcp-album__contenu,
.dgtcp-missions__chapeau,
.dgtcp-missions__liste p,
.dgtcp-missions__encadre p,
.dgtcp-dgtcp__carte p,
.dgtcp-eservice__description,
.dgtcp-regule__texte,
.dgtcp-duo__extrait,
/*
 * Les cartes des engagements rejoignent la meme recette, plutot qu une
 * seconde ecrite a cote : la justification du site se regle ici, et nulle
 * part ailleurs. « text-align-last: left » evite que la derniere ligne ne
 * s etire, et la cesure automatique empeche les trous dans une colonne
 * etroite — a 340 px, une justification sans cesure troue le texte.
 */
.dgtcp-presentation__engagements .dgtcp-servir li {
	text-align: justify;
	text-align-last: left;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/*
 * Les ecrans etroits gardent le drapeau.
 *
 * Sous 576 px une ligne tient dix a douze mots : la justification y multiplie
 * les blancs inter-mots au lieu de les repartir, et la cesure hache un texte
 * deja fragmente.
 */
@media (max-width: 575.98px) {
	.dgtcp-appel__intro,
	.dgtcp-cellule__principal,
	.dgtcp-plateforme__intro,
	.dgtcp-reforme__chapeau,
	.dgtcp-reforme__texte-libre,
	.dgtcp-presentation__corps,
	.dgtcp-mot__message,
	.dgtcp-faq__reponse,
	.dgtcp-dgtcp__chapeau,
	.dgtcp-cellule__bloc,
	.dgtcp-section__corps,
	.dgtcp-sommaire__corps,
	.dgtcp-secteur-page__corps,
	.dgtcp-secteur-page__contenu,
	.dgtcp-album__contenu,
	.dgtcp-missions__chapeau,
	.dgtcp-missions__liste p,
	.dgtcp-missions__encadre p,
	.dgtcp-dgtcp__carte p,
	.dgtcp-eservice__description,
	.dgtcp-regule__texte,
	.dgtcp-duo__extrait {
		text-align: left;
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}

/* =========================================================================
 * Chiffres cles — repli aux petites largeurs
 *
 * auto-fit calcule le nombre de colonnes sur la largeur DEMANDEE, pas sur
 * celle du contenu : on la lui impose donc en dessous de 768 px.
 * ====================================================================== */

@media (max-width: 767.98px) {
	.dgtcp-key-figures__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 399.98px) {
	.dgtcp-key-figures__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * LE PIED DE PAGE NE DEPEND PLUS DE WOW.JS POUR ETRE VISIBLE
 *
 * Le gabarit du theme parent pose « wow fadeInUp » sur les huit blocs du pied
 * de page : les quatre encadres de coordonnees et les quatre colonnes. Ce sont
 * les SEULS elements de tout le site a porter cette classe.
 *
 * WOW.js ne masque pas en CSS : a l initialisation, il pose « visibility:
 * hidden » EN LIGNE sur chacun, puis les revele quand ils entrent dans
 * l ecran. Si cette revelation n a pas lieu — et sur telephone, ou la page est
 * bien plus haute et ou les positions bougent au chargement des images, elle
 * n a pas lieu — le pied de page reste invisible. Tout le bloc disparait.
 *
 * Un contenu institutionnel ne doit pas dependre d une animation au
 * defilement pour etre lisible : coordonnees, mentions legales et plan du site
 * en font partie.
 *
 * « !important » n est pas une facilite ici : WOW ecrit en STYLE EN LIGNE, et
 * rien d autre ne peut passer devant.
 * ====================================================================== */

footer.footer-section .wow {
	visibility: visible !important;
	animation-name: none !important;
}

/* =========================================================================
 * Pied de page — listes de liens externes et encadres de contact (maquette)
 * ====================================================================== */

.dgtcp-pied-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * UNE PUCE BLANCHE DEVANT CHAQUE ENTREE, POSEE PAR NOUS.
 *
 * Le parent en met une — une fleche Font Awesome, main.css « .footer-main
 * .widget ... li a:before ». Mais son selecteur ecarte « .widget_text », et
 * WordPress ajoute justement cette classe aux widgets de HTML personnalise :
 * nos quatre colonnes sortent en « widget_text widget widget_custom_html ».
 * La regle du parent ne les atteint donc jamais, et les deux listes
 * s affichaient sans rien devant leurs entrees.
 *
 * La puce est posee sur le <li> et non sur le lien : elle sert aussi bien une
 * entree cliquable qu une entree sans adresse (voir plus bas).
 *
 * « top: 1em » avec « line-height: 2 » : la moitie de l interligne, donc le
 * milieu de la PREMIERE ligne, quelle que soit la taille du texte. Une entree
 * qui passe a la ligne garde sa puce en face de sa premiere ligne, et non
 * centree sur les deux.
 */
.dgtcp-pied-liste li {
	position: relative;
	padding-left: 1rem;
	line-height: 2;
}

.dgtcp-pied-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1em;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

/*
 * ENTREE SANS ADRESSE.
 *
 * Les quinze entrees ont aujourd hui leur adresse ; ce cas ne sert plus, mais
 * il reste en place pour la prochaine entree qui arrivera sans la sienne.
 *
 * Elle garde sa puce et son alignement — c est une entree de la liste comme
 * une autre — mais pas la couleur d un lien : elle ne pretend pas mener
 * quelque part. Le gris la distingue sans l effacer.
 */
.dgtcp-pied-liste li > span {
	color: rgba(255, 255, 255, 0.55);
}

/* --- Encadres a pictogramme rond : horaires, telephone, courriel --- */

.dgtcp-pied-contact {
	padding: 0;
	list-style: none;
}

/*
 * L ESPACE AU-DESSUS DES HORAIRES, ET POURQUOI IL FAUT TROIS CLASSES.
 *
 * La devise « La quete permanente de l excellence » et le pictogramme des
 * horaires se touchaient presque : les deux se lisaient comme un seul bloc.
 *
 * La marge etait pourtant ecrite — « .dgtcp-pied-contact { margin: 1,5rem } » —
 * et elle n a JAMAIS pris. Mesure au DOM : marge calculee 0 px. Le parent pose
 * « .widget div > ul { margin: 0 } », une classe et deux balises, ce qui l
 * emporte sur une classe seule. La regle etait morte depuis le debut, et
 * l augmenter n y aurait rien change.
 *
 * Le selecteur porte donc trois classes, et passe devant.
 */
.footer-main .widget .dgtcp-pied-contact {
	margin: 2.5rem 0 0;
}

.dgtcp-pied-contact li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 1.1rem;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dgtcp-pied-contact li > i {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dgtcp-magenta);
	color: #fff;
	font-size: 1.05rem;
}

.dgtcp-pied-contact strong {
	display: block;
	font-weight: 700;
}

footer.footer-section .widget .dgtcp-pied-contact a {
	color: #fff;
	text-decoration: none;
}

footer.footer-section .widget .dgtcp-pied-contact a:hover,
footer.footer-section .widget .dgtcp-pied-contact a:focus-visible {
	color: var(--dgtcp-magenta-light);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Meme precaution que pour « Nous joindre » : le theme pose une fleche devant
 * tout lien de liste des widgets, par un selecteur a dix classes. Bornee a ces
 * deux listes, la neutralisation reste lisible.
 */
.dgtcp-pied-contact li a::before,
.dgtcp-pied-contact li a::after {
	content: none !important;
}

.footer-main .widget:not(.widget-info):not(.widget_social_widget):not(.widget_calender):not(.widget_tag) .dgtcp-pied-contact li a:not(.wp-block-social-link-anchor) {
	display: inline;
	left: 0;
	line-height: inherit;
}

/* --- Les engagements S.E.R.V.I.R ----------------------------------------
 *
 * Six engagements dont les initiales forment SERVIR, chacun suivi d une
 * description. Source : politique qualite de la DGTCP, SMQ/PQ 01 version
 * 2026, signee le 18 septembre 2026.
 *
 * Le gabarit (inc/la-dgtcp.php) sort cette partie de la colonne de texte et
 * la rend en PLEINE LARGEUR, apres les chiffres : six engagements accompagnes
 * d une description ne tiennent pas dans une colonne qui partage sa place
 * avec le visuel.
 */

.dgtcp-presentation__engagements {
	grid-column: 1 / -1;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--dgtcp-portail-rule, #e4dfe2);
}

.dgtcp-presentation__engagements > h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	line-height: 1.25;
}

.dgtcp-presentation__engagements .dgtcp-servir__devise {
	margin: 0 0 1rem;
	padding-left: 1rem;
	border-left: 3px solid var(--dgtcp-magenta, #f0008d);
	color: var(--dgtcp-magenta-texte, #b30069);
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 600;
}

.dgtcp-presentation__engagements .dgtcp-servir__source {
	margin: 1.25rem 0 0;
	color: var(--dgtcp-muted, #6b5f65);
	font-size: 0.86rem;
}

/* Les six engagements, en cartes. */
.dgtcp-presentation__engagements .dgtcp-servir {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.dgtcp-presentation__engagements .dgtcp-servir {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75em) {
	.dgtcp-presentation__engagements .dgtcp-servir {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.dgtcp-presentation__engagements .dgtcp-servir li {
	margin: 0;
	padding: 1.1rem 1.25rem 1.25rem 3.6rem;
	border: 1px solid var(--dgtcp-portail-rule, #e4dfe2);
	border-radius: 8px;
	background: var(--dgtcp-portail-carte, #fff);
	line-height: 1.5;
}

/*
 * L ICONE DU THEME EST RETIREE ICI, ET IL LE FAUT.
 *
 * .dgtcp-presentation__corps li::before pose une puce Font Awesome en
 * position absolue a gauche. Elle occupait exactement la gouttiere de la
 * lettre : les deux se superposaient, et l acrostiche devenait illisible —
 * on lisait « ecuriser », « xecuter », avec une pastille magenta a la place
 * de l initiale. Constate a l ecran le 26 octobre 2026.
 */
.dgtcp-presentation__engagements .dgtcp-servir li::before {
	content: none;
}

/*
 * UNE GOUTTIERE DE LARGEUR FIXE, ET NON UNE LETTRE QUI POUSSE LE TEXTE.
 *
 * Laissee a sa largeur naturelle, la lettre flottante decale le texte
 * differemment a chaque ligne : le « I » d « Innover » est etroit, le « V »
 * de « Valoriser » est large, et les six phrases commencent a six abscisses
 * differentes. On reserve donc une gouttiere fixe par le padding du <li>, et
 * on y tire la lettre par une marge negative de meme valeur.
 */
.dgtcp-presentation__engagements .dgtcp-servir li::first-letter {
	float: left;
	width: 2.4rem;
	margin-left: -2.4rem;
	color: var(--dgtcp-magenta-texte, #b30069);
	font-family: inherit;
	font-size: 2.1em;
	font-weight: 700;
	line-height: 1;
}

.dgtcp-presentation__engagements .dgtcp-servir li strong {
	color: var(--dgtcp-ink, #1a1418);
	font-weight: 700;
}

/*
 * Le titre d ouverture de la presentation garde son allure de h4.
 *
 * Il etait balise <h4> sous un <h2> : la hierarchie sautait le niveau 3, ce
 * que le validateur du W3C refuse et qui egare un lecteur d ecran. Il est
 * passe en <h3> le 26 octobre 2026 — mais un h3 se rend en 28 px, gras 800,
 * encre foncee. On lui rend ici les 24 px, le gras 700 et le gris du h4 :
 * la correction porte sur ce que la machine lit, pas sur ce que l oeil voit.
 */
.dgtcp-presentation__corps > h3:first-child {
	margin: 0 0 10px;
	color: var(--dgtcp-texte, #5c545a);
	font-size: 24px;
	font-weight: 700;
}

/* --- Le bouton natif de Gutenberg ----------------------------------------
 *
 * Le theme n habillait pas « wp-block-button » : un bouton pose depuis
 * l editeur sortait aux styles par defaut de WordPress, etranger au reste du
 * site. On lui donne ici l allure de dgtcp-plateforme__bouton, le bouton
 * d appel des pages de plateforme.
 *
 * Pourquoi habiller le bloc NATIF plutot que creer une classe maison : le
 * gestionnaire insere un bouton depuis l editeur, sans avoir a connaitre un
 * nom de classe ni a basculer en HTML. Cela vaut pour cette page comme pour
 * toutes celles qu il ecrira ensuite.
 */

.dgtcp-section__texte .wp-block-buttons,
.dgtcp-cellule__bloc .wp-block-buttons {
	margin: 1.25rem 0 0;
}

.dgtcp-section__texte .wp-block-button__link,
.dgtcp-cellule__bloc .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 54px;
	padding: 0.8rem 1.9rem;
	border: 2px solid var(--dgtcp-magenta-texte);
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dgtcp-section__texte .wp-block-button__link:hover,
.dgtcp-section__texte .wp-block-button__link:focus-visible,
.dgtcp-cellule__bloc .wp-block-button__link:hover,
.dgtcp-cellule__bloc .wp-block-button__link:focus-visible {
	background: var(--dgtcp-portail-carte);
	color: var(--dgtcp-magenta-texte);
}

/*
 * Le rappel de ce qu il faut choisir sur Lanaya.
 *
 * Lanaya n a qu une page pour la plainte ET la reclamation : sans ce rappel,
 * deux blocs renvoyant a la meme adresse passeraient pour une maladresse.
 */
.dgtcp-section__texte .dgtcp-rc__repere {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--dgtcp-magenta);
	background: var(--dgtcp-magenta-wash, #fdf2f8);
	color: var(--dgtcp-ink);
}

.dgtcp-section__texte .dgtcp-rc__renvoi {
	margin-top: 1.25rem;
	color: var(--dgtcp-muted, #6b5f65);
	font-size: 0.92rem;
}

/* --- Plaintes et reclamations, cote a cote -------------------------------
 *
 * Deux colonnes sur une ligne : la plainte et la reclamation partagent la
 * meme adresse sur Lanaya et le meme geste. Les poser cote a cote laisse
 * l usager comparer et choisir, la ou deux pages l obligeaient a deviner
 * avant d avoir lu.
 *
 * Le bloc « colonnes » est celui de WordPress : il s empile seul sous 782 px,
 * et le gestionnaire peut en reprendre le contenu depuis l editeur. On ne
 * lui ajoute que la carte — bordure, fond, respiration.
 */

.dgtcp-section__texte .dgtcp-rc__duo {
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.dgtcp-section__texte .dgtcp-rc__duo > .wp-block-column {
	padding: 1.5rem 1.6rem 1.75rem;
	border: 1px solid var(--dgtcp-portail-rule, #e4dfe2);
	border-radius: 10px;
	background: var(--dgtcp-portail-carte, #fff);
}

.dgtcp-section__texte .dgtcp-rc__duo h3 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--dgtcp-magenta, #f0008d);
	color: var(--dgtcp-ink, #1a1418);
	font-size: 1.3rem;
}

/*
 * Le bouton colle au bas de la carte.
 *
 * Les deux colonnes n ont pas le meme nombre de lignes : sans cela, un
 * bouton se retrouvait a mi-hauteur de l autre, et les deux cartes
 * paraissaient mal alignees alors que seul leur texte differait.
 */
.dgtcp-section__texte .dgtcp-rc__duo > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.dgtcp-section__texte .dgtcp-rc__duo .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
}

/* =========================================================================
 * Catalogue des documents
 *
 * La page « Documents à télécharger » depuis le 31 octobre 2026. Les
 * documents viennent du catalogue (type « Document » de l'extension) et non
 * plus des blocs « Fichier » de la page ; les filtres portent sur la LIGNE
 * et non sur le groupe.
 *
 * Les pastilles reprennent celles de la bibliothèque — même forme, et même
 * piège de spécificité (chapitre 36) : le thème parent pose des règles sur
 * « button » que seul un sélecteur portant lui aussi « button » surpasse.
 *
 * Voir inc/bibliotheque.php et assets/js/bibliotheque.js.
 * ====================================================================== */

.dgtcp-catalogue__filtres {
	/*
	 * Aucune marge propre : l'écart vient du « gap » de la rangée. Cumulées,
	 * les deux ouvraient 80 px de blanc entre le panneau replié et le bilan
	 * sur téléphone — l'écran y est trop court pour qu'on en fasse cadeau.
	 */
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
}

.dgtcp-catalogue__filtres[hidden] {
	display: none;
}

/* --- Le résumé repliable ---------------------------------------------- */

.dgtcp-catalogue__bascule {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin: -0.25rem 0 0;
	color: var(--dgtcp-ink);
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

/* Le triangle par défaut de Safari, qui ignore « list-style: none ». */
.dgtcp-catalogue__bascule::-webkit-details-marker {
	display: none;
}

.dgtcp-catalogue__bascule i {
	color: var(--dgtcp-magenta);
}

/* Le chevron, dessiné à la place du triangle, et retourné à l'ouverture. */
.dgtcp-catalogue__bascule::after {
	margin-left: auto;
	content: "\f078";
	color: var(--dgtcp-muted);
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	transition: transform 0.2s;
}

.dgtcp-catalogue__filtres[open] .dgtcp-catalogue__bascule::after {
	transform: rotate(180deg);
}

.dgtcp-catalogue__filtres[open] .dgtcp-catalogue__bascule {
	margin-bottom: 1rem;
}

/* Combien de filtres sont posés : replié, le panneau ne le montre plus. */
.dgtcp-catalogue__actifs {
	min-width: 1.4rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--dgtcp-magenta-texte);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
}

.dgtcp-catalogue__actifs[hidden] {
	display: none;
}

.dgtcp-catalogue__cadre {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.dgtcp-catalogue__champ label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--dgtcp-ink);
	font-weight: 700;
}

.dgtcp-catalogue__saisie {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 0.9rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: #fff;
}

.dgtcp-catalogue__saisie i {
	color: var(--dgtcp-muted);
}

.dgtcp-catalogue__saisie input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dgtcp-ink);
	font-size: 1rem;
}

.dgtcp-catalogue__saisie input:focus {
	outline: none;
}

/* Le halo se pose sur le cadre entier, non sur le champ nu. */
.dgtcp-catalogue__saisie:focus-within {
	border-color: var(--dgtcp-magenta);
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-catalogue__facette {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dgtcp-catalogue__facette legend {
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--dgtcp-ink-soft);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dgtcp-catalogue__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dgtcp-catalogue button.dgtcp-filtres__puce {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.45rem 1rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	background: #fff;
	color: var(--dgtcp-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.dgtcp-catalogue button.dgtcp-filtres__puce:hover,
.dgtcp-catalogue button.dgtcp-filtres__puce:focus {
	border-color: var(--dgtcp-magenta);
	background: #fff;
	color: var(--dgtcp-magenta-texte);
	outline: none;
}

.dgtcp-catalogue button.dgtcp-filtres__puce:focus-visible {
	outline: 2px solid var(--dgtcp-magenta);
	outline-offset: 2px;
}

.dgtcp-catalogue button.dgtcp-filtres__puce[aria-pressed="true"] {
	border-color: var(--dgtcp-magenta-texte);
	background: var(--dgtcp-magenta-texte);
	color: #fff;
}

/* Un sous-secteur : décalé, pour que la hiérarchie se voie sans puce. */
.dgtcp-catalogue button.dgtcp-filtres__puce--enfant {
	margin-left: 1.25rem;
}

.dgtcp-catalogue__compte {
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--dgtcp-portail-rule);
	color: var(--dgtcp-ink-soft);
	font-size: 0.8125rem;
	font-weight: 700;
}

.dgtcp-catalogue button.dgtcp-filtres__puce[aria-pressed="true"] .dgtcp-catalogue__compte {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.dgtcp-catalogue button.dgtcp-catalogue__reinit {
	align-self: flex-start;
	min-height: 44px;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.dgtcp-catalogue__reinit[hidden] {
	display: none;
}

/* --- Les groupes ------------------------------------------------------ */

.dgtcp-catalogue__groupes {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.dgtcp-catalogue__groupe {
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 14px;
	background: var(--dgtcp-portail-carte);
	overflow: hidden;
}

.dgtcp-catalogue__groupe[hidden] {
	display: none;
}

.dgtcp-catalogue__titre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.9rem 1.25rem;
	background: var(--dgtcp-portail-carte);
	font-size: 1.0625rem;
	font-weight: 800;
}

/* Le secteur reste présent mais en retrait : c'est la nature qu'on lit. */
.dgtcp-catalogue__secteur {
	color: var(--dgtcp-muted);
	font-weight: 600;
}

.dgtcp-catalogue__secteur::after {
	margin-left: 0.5rem;
	content: "\203A";
}

.dgtcp-catalogue__nature {
	color: var(--dgtcp-ink);
}

.dgtcp-catalogue__nombre {
	margin-left: auto;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--dgtcp-portail-rule);
	color: var(--dgtcp-ink-soft);
	font-size: 0.875rem;
	font-weight: 700;
}

/* --- La ligne d'un document ------------------------------------------- */

.dgtcp-catalogue .dgtcp-fichier[hidden] {
	display: none;
}

.dgtcp-fichier__resume {
	margin: 0 0 0.3rem;
	color: var(--dgtcp-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dgtcp-fichier__etiquette {
	padding: 0.05rem 0.55rem;
	border: 1px solid var(--dgtcp-portail-rule);
	border-radius: 999px;
	color: var(--dgtcp-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* --- Les deux colonnes ------------------------------------------------
   Demande du métier du 31 octobre 2026 : les filtres à gauche, les documents
   à droite sur une colonne large, et la page occupée.

   75rem est la largeur de référence du site (grille des secteurs, rubriques).
   Elle remplace ici les 52rem de « .dgtcp-documents », que deux classes
   suffisent à surpasser sans recourir à !important.
   -------------------------------------------------------------------- */

.dgtcp-documents.dgtcp-catalogue {
	max-width: 75rem;
}

.dgtcp-catalogue__rangee {
	display: grid;
	gap: 2rem;
}

@media (min-width: 62rem) {
	/* La colonne des filtres est fixe, celle des documents prend le reste :
	   avec « 1fr 2fr », un titre de décret long élargirait la colonne des
	   pastilles au lieu de revenir à la ligne. */
	.dgtcp-catalogue__rangee {
		grid-template-columns: 17.5rem minmax(0, 1fr);
		align-items: start;
	}

	/*
	 * Le panneau SUIT LE DÉFILEMENT. Le catalogue dépasse déjà deux écrans
	 * de haut : sans cela, changer de filtre imposerait de remonter tout en
	 * haut. « max-height » et le défilement propre évitent qu'un panneau plus
	 * grand que la fenêtre cache ses dernières facettes — c'est le défaut
	 * classique du position: sticky.
	 */
	/* Colonne de gauche : le panneau est toujours ouvert, son résumé n'a
	   plus de raison d'être et disparaît. */
	.dgtcp-catalogue__bascule {
		display: none;
	}

	.dgtcp-catalogue__colonne {
		position: sticky;
		top: 1.5rem;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.dgtcp-catalogue__principal {
	min-width: 0;
}

/* Le bilan ouvre la colonne : sa marge haute ferait doublon avec le gap. */
.dgtcp-catalogue__principal > .dgtcp-biblio__total:first-child {
	margin-top: 0;
}

@media (max-width: 36rem) {
	.dgtcp-catalogue__titre {
		flex-wrap: wrap;
	}

	.dgtcp-catalogue__nombre {
		margin-left: 0;
	}
}

/* =========================================================================
 * Fonds documentaire — les ouvrages de la bibliothèque du Trésor
 *
 * Quatrième volet de la rubrique Bibliothèque, à côté des documents à
 * télécharger. Il réemploie tout le catalogue ci-dessus — deux colonnes,
 * panneau repliable, pastilles — et n'ajoute que la fiche d'un ouvrage :
 * une couverture, un texte, et l'état du rayon.
 *
 * Voir inc/bibliotheque.php et inc/ouvrages.php de l'extension.
 * ====================================================================== */

.dgtcp-ouvrages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgtcp-ouvrage {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: start;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--dgtcp-portail-rule);
}

.dgtcp-ouvrage[hidden] {
	display: none;
}

/* --- La couverture ----------------------------------------------------- */

.dgtcp-ouvrage__couverture {
	/* Proportion d'un livre broché. Imposée, pour que des couvertures de
	   tailles différentes ne fassent pas onduler la colonne. */
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--dgtcp-light);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.dgtcp-ouvrage__couverture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dgtcp-ouvrage__sans-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--dgtcp-muted);
	font-size: 1.5rem;
}

/* --- Le texte ---------------------------------------------------------- */

.dgtcp-ouvrage__texte {
	min-width: 0;
}

.dgtcp-ouvrage__titre {
	margin: 0 0 0.2rem;
	color: var(--dgtcp-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.dgtcp-ouvrage__auteur {
	margin: 0 0 0.3rem;
	color: var(--dgtcp-magenta-texte);
	font-size: 0.9375rem;
	font-weight: 600;
}

.dgtcp-ouvrage__resume {
	margin: 0 0 0.4rem;
	color: var(--dgtcp-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dgtcp-ouvrage__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.75rem;
	align-items: center;
	margin: 0;
	color: var(--dgtcp-muted);
	font-size: 0.875rem;
}

/* --- Le rayon ---------------------------------------------------------- */

.dgtcp-ouvrage__rayon {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-end;
	text-align: right;
}

.dgtcp-ouvrage__etat {
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * Trois états, trois couleurs — et jamais la couleur seule : chaque pastille
 * porte son texte (« Dernier exemplaire », « Tous empruntés »). Un daltonien
 * ne distingue pas le vert du rouge, et l'exigence ENF-01 demande que
 * l'information ne tienne pas à la seule teinte.
 */
.dgtcp-ouvrage__etat--disponible {
	background: #e7f4e9;
	color: #17672a;
}

.dgtcp-ouvrage__etat--dernier {
	background: #fcf3e3;
	color: #8a5700;
}

.dgtcp-ouvrage__etat--emprunte {
	background: #fbeceb;
	color: #a3241f;
}

.dgtcp-ouvrage__etat--inconnu {
	background: var(--dgtcp-light);
	color: var(--dgtcp-muted);
}

/* La cote : c'est elle qui dit où trouver l'ouvrage une fois sur place. */
.dgtcp-ouvrage__cote {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--dgtcp-muted);
	font-size: 0.8125rem;
}

.dgtcp-ouvrage__cote i {
	color: var(--dgtcp-magenta);
}

.dgtcp-ouvrage__cote code {
	padding: 0.05rem 0.4rem;
	border-radius: 3px;
	background: var(--dgtcp-light);
	color: var(--dgtcp-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

@media (max-width: 36rem) {
	/* L'état du rayon passe sous le texte : à trois colonnes, le titre
	   n'aurait plus que quelques caractères par ligne. */
	.dgtcp-ouvrage {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

	.dgtcp-ouvrage__rayon {
		grid-column: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
	}
}

/* =========================================================================
 * Titre d'un article dans les listes — l'allure du h4, le rang du h2
 *
 * template-parts/content-page.php (surcharge du parent) rend désormais le
 * titre d'un article en h2 et non plus en h4 : la page porte un h1, et
 * sauter deux niveaux est refusé par le validateur autant que pénible au
 * lecteur d'écran.
 *
 * Mais un h2 se rendrait plus grand et plus sombre que le h4 du parent. On
 * lui rend donc exactement son allure : 24 px, gras 700, l'encre douce du
 * thème. On corrige ce que la machine lit, pas ce que l'œil voit.
 * ====================================================================== */

h2.post-title {
	margin: 0 0 10px;
	color: #5c545a;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}