/**
 * Feuille de style du rapport consolidé (module reporting).
 *
 * Reprend les conventions visuelles DCOD déjà en place sur le site : angles
 * droits sur les encadrés (jamais d'arrondi), vert de marque #88cc00 réservé
 * aux accents, fond blanc, bordures discrètes. Les graphiques portent leurs
 * propres couleurs en SVG, jamais d'ici.
 *
 * Exception délibérée : les pastilles de sélection (.dcod-sec-report__pill)
 * sont arrondies (border-radius:999px), pour la MÊME raison et avec le MÊME
 * traitement que les pastilles de périmètre de la barre de navigation
 * ([dcod_sec_nav], includes/views.php) - une forme réservée aux contrôles de
 * sélection à l'état visible (actif/inactif), jamais aux encadrés de
 * contenu.
 *
 * L'impression est traitée comme un mode d'affichage à part entière, pas
 * comme un effet de bord : c'est sous cette forme que le rapport est transmis
 * à une direction.
 */

.dcod-sec-report {
	--dsr-ink: #121212;
	--dsr-ink-soft: #5c6152;
	--dsr-line: #e4e7de;
	--dsr-brand: #88cc00;
	--dsr-brand-deep: #4c7300;
	--dsr-surface: #ffffff;
	--dsr-ground: #f6f7f2;
	color: var(--dsr-ink);
	font-size: 15px;
	line-height: 1.55;
}

.dcod-sec-report * {
	box-sizing: border-box;
}

/* Chargement d'une variante en arrière-plan (report.js) : léger plutôt
   qu'un voile ou un squelette, pour ne pas produire de saut de mise en page
   pendant un remplacement qui dure typiquement quelques dizaines de
   millisecondes. pointer-events:none évite un second clic pendant l'attente,
   déjà écarté côté script mais doublé ici pour tout élément non couvert par
   son écouteur (un lien du plan d'action, par exemple). */
.dcod-sec-report[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
	.dcod-sec-report[aria-busy="true"] {
		transition: none;
	}
}

/* ── Barre de sélecteurs : pastilles cliquables, au-dessus de tout le reste ── */

.dcod-sec-report__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 28px;
	padding: 14px 16px;
	margin: 0 0 18px;
	background: var(--dsr-ground);
	border: 1px solid var(--dsr-line);
}

.dcod-sec-report__control {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dsr-ink-soft);
}

/* Pastilles cliquables : chaque option est un lien direct vers l'état
   qu'elle désigne, jamais une valeur à choisir puis à valider - le résultat
   s'affiche dès le clic, sans bouton "Afficher" intermédiaire. */
.dcod-sec-report__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dcod-sec-report__pill {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	color: var(--dsr-ink);
	text-decoration: none;
	background: var(--dsr-surface);
	border: 1px solid #c9ccd1;
	border-radius: 999px;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.dcod-sec-report__pill:hover,
.dcod-sec-report__pill:focus-visible {
	border-color: var(--dsr-brand-deep);
}

/* Choix courant : fond plein, jamais un lien - même principe que les
   pastilles de périmètre de la barre de navigation ([dcod_sec_nav]),
   texte foncé sur le vert de marque pour rester lisible. */
.dcod-sec-report__pill.is-active {
	background: var(--dsr-brand);
	border-color: var(--dsr-brand-deep);
	color: var(--dsr-ink);
	cursor: default;
}

.dcod-sec-report__context {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--dsr-ink-soft);
}

/* Séparateur discret entre segments de la ligne de contexte (date, lien
   carte, provenance) - un filet vertical plutôt qu'un caractère « | »
   littéral, pour un espacement qui reste net à toute taille de police. */
.dcod-sec-report__date {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid var(--dsr-line);
}

/* Lien "Voir la carte" : seul lien de texte courant de la ligne de contexte,
   d'où un traitement dédié plutôt que la couleur de lien par défaut du
   navigateur, qui jurerait avec le reste de la page. */
.dcod-sec-report__context a {
	color: var(--dsr-brand-deep);
	font-weight: 700;
}

.dcod-sec-report__context a:hover,
.dcod-sec-report__context a:focus-visible {
	color: var(--dsr-ink);
}

/* ── Tuiles de contenu : le libellé introduit, la valeur reste le point fort ── */

.dcod-sec-report__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

/* Même cadre que .dcod-sec-report__block (fond, bordure 1px) : une tuile
   n'est qu'un bloc compact, pas un objet visuel à part - le filet de couleur
   qui la distinguait auparavant chargeait la ligne sans rien apporter que
   les autres blocs de la page n'aient déjà. */
.dcod-sec-report__tile {
	padding: 16px 18px;
	background: var(--dsr-surface);
	border: 1px solid var(--dsr-line);
}

/* Même traitement que la légende d'un sélecteur (.dcod-sec-report__control) :
   une tuile et un groupe de pastilles répondent à la même question - « à
   quoi correspond ce qui suit ? » - et le partagent visuellement. */
.dcod-sec-report__tile-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__tile-value {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--dsr-ink);
}

.dcod-sec-report__tile-note {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 700;
}

/* Le ton ne colore QUE la précision, jamais la valeur elle-même : un chiffre
   vert se lirait comme « bon » avant même d'avoir été lu. */
.dcod-sec-report__tile-note--neutral { color: var(--dsr-ink-soft); }
.dcod-sec-report__tile-note--up { color: #146c2e; }
.dcod-sec-report__tile-note--down { color: #a4262c; }

/* ── Les trois sections de contenu, et les blocs qu'elles contiennent ──

   Deux niveaux, et deux seulement : la section porte le h2, chaque bloc son
   h3. La hiérarchie se lit à la taille et à l'espace, pas à l'encadrement -
   une section n'est pas un cadre autour de cadres, ce qui ferait trois
   bordures imbriquées pour une seule information. */

.dcod-sec-report__section {
	margin: 0 0 30px;
}

.dcod-sec-report__section-head {
	margin: 0 0 16px;
	padding-top: 14px;
	border-top: 2px solid var(--dsr-brand);
}

.dcod-sec-report__section-head h2 {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--dsr-ink);
}

.dcod-sec-report__section-lead {
	margin: 5px 0 0;
	max-width: 68ch;
	font-size: 13.5px;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__block {
	padding: 18px 20px;
	margin: 0 0 18px;
	background: var(--dsr-surface);
	border: 1px solid var(--dsr-line);
}

.dcod-sec-report__block h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--dsr-ink);
}

.dcod-sec-report__lead {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--dsr-ink-soft);
}

/* Sous-titre A L'INTERIEUR d'un bloc, quand deux graphiques distincts
   partagent le meme <h3> (ex. « Comparaison entre domaines » pour
   security.txt : taux de presence, puis niveau de conformite) - sans
   ouvrir un troisieme niveau de titre. Meme traitement que la legende
   d'un selecteur ou le libelle d'une tuile, pour rester une seule et
   meme convention de "petite majuscule grise" partout sur la page. */
.dcod-sec-report__subhead {
	margin: 22px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dsr-ink-soft);
}

/* Etat d'un controle dans le plan d'action : « partiellement configure »
   distingue un reglage commence mais sans effet contraignant (SPF ~all,
   DMARC p=quarantine) d'un reglage absent. Discret : c'est une nuance sur
   la ligne, pas un second niveau de gravite. */
.dcod-sec-report__state {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border: 1px solid var(--dsr-line);
	border-radius: 10px;
	font-size: 11px;
	color: var(--dsr-ink-soft);
	white-space: nowrap;
}

/* Cause precise d'une ligne du plan d'action (« p=none (surveillance seule) »).
   Sur sa propre ligne, sous le code : c'est elle qui distingue deux lignes du
   meme controle, elle doit donc se lire sans se confondre avec le libelle. */
.dcod-sec-report__reason {
	display: inline-block;
	margin-top: 3px;
	font-size: 12px;
	font-style: italic;
	color: var(--dsr-ink-soft);
}

/* ── Matrice « une entité par ligne, une analyse par colonne » ──

   Remplace, pour un classement d'ENTITÉS, la barre empilée des agrégats :
   une entité unique a toujours 100 % d'un seul état, donc une barre pleine
   largeur qui ne code rien. Ici chaque ligne varie d'une colonne à l'autre,
   et c'est cette variation qui porte l'information. */

.dcod-sec-report__matrix {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 4px;
	font-size: 13px;
}

.dcod-sec-report__matrix th,
.dcod-sec-report__matrix td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--dsr-line);
	text-align: left;
}

.dcod-sec-report__matrix thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dsr-ink-soft);
	border-bottom: 2px solid var(--dsr-line);
	vertical-align: bottom;
}

/* Colonnes d'analyse : la pastille est centree sous son intitule.
   Le selecteur porte l'element (th/td) pour egaler la specificite de la regle
   generale `.matrix th, .matrix td` plus haut, qui impose text-align: left :
   avec une simple classe, elle l'emportait et la pastille restait a gauche. */
.dcod-sec-report__matrix th.dcod-sec-report__matrix-col,
.dcod-sec-report__matrix td.dcod-sec-report__matrix-cell {
	text-align: center;
	width: 1%;
	white-space: nowrap;
}

/* L'analyse AFFICHEE par la page : c'est elle qui ordonne les lignes, elle
   merite donc de se distinguer des colonnes de contexte. */
.dcod-sec-report__matrix-col--current,
.dcod-sec-report__matrix-cell--current {
	/* Teinte assez marquee pour delimiter une colonne : --dsr-ground, concu
	   pour des aplats larges, disparait sur une colonne etroite. Les filets
	   lateraux font le reste du travail. */
	background: #ecefe4;
	border-left: 1px solid var(--dsr-line);
	border-right: 1px solid var(--dsr-line);
}

.dcod-sec-report__matrix-col--current {
	color: var(--dsr-ink);
}

.dcod-sec-report__matrix th.dcod-sec-report__matrix-rank,
.dcod-sec-report__matrix td.dcod-sec-report__matrix-rank {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	color: var(--dsr-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* Marque d'ex aequo : discrete, et explicitee au survol comme au lecteur
   d'ecran par son attribut title. */
.dcod-sec-report__matrix-rank abbr {
	margin-left: 2px;
	border: 0;
	text-decoration: none;
	cursor: help;
}

.dcod-sec-report__matrix-name {
	font-weight: 400;
	color: var(--dsr-ink);
}

/* L'entite du visiteur : le gras suffit a la reperer dans la colonne, comme
   pour la comparaison entre domaines - une couleur de plus entrerait en
   concurrence avec celles des etats. */
.dcod-sec-report__matrix-row--mine .dcod-sec-report__matrix-name,
.dcod-sec-report__matrix-row--mine .dcod-sec-report__matrix-rank {
	font-weight: 700;
	color: var(--dsr-ink);
}

.dcod-sec-report__matrix-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	vertical-align: middle;
}

/* Texte reserve aux lecteurs d'ecran : la couleur d'une pastille ne doit
   jamais porter seule l'information (WCAG 1.4.1). */
.dcod-sec-report__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── « Votre position » : le rang du visiteur parmi ses pairs ──

   Un seul chiffre porte la carte, en très grand : c'est la réponse à la
   première question que se pose une collectivité qui ouvre le rapport. Tout
   le reste (groupe de pairs, bande, jauge) l'explique, sans jamais lui
   disputer l'attention. Les groupes suivants ne reçoivent qu'un pourcentage,
   en corps de texte : voir dcod_sec_report_standing() pour le pourquoi. */

.dcod-sec-report__standing-main {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 14px 0 0;
}

/* Le grand chiffre et son ordinal partagent une ligne de base : l'ordinal
   ne se centre pas verticalement, il s'aligne en haut comme un exposant. */
.dcod-sec-report__standing-rank {
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
	margin: 0;
	line-height: 1;
	color: var(--dsr-brand-deep);
}

.dcod-sec-report__standing-rank-value {
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -0.03em;
	/* Les chiffres gardent la meme chasse d'un scan a l'autre : sans cela, un
	   rang qui passe de 12 a 9 fait sauter toute la carte. */
	font-variant-numeric: tabular-nums;
}

.dcod-sec-report__standing-rank-ord {
	margin-top: 6px;
	font-size: 22px;
	font-weight: 700;
}

.dcod-sec-report__standing-body {
	flex: 1 1 auto;
	min-width: 0;
}

.dcod-sec-report__standing-of {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--dsr-ink);
}

.dcod-sec-report__standing-band {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__standing-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.dcod-sec-report__standing-gauge {
	display: block;
	height: 8px;
	margin: 10px 0 0;
	border-radius: 4px;
	background: var(--dsr-ground);
	overflow: hidden;
}

.dcod-sec-report__standing-gauge-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--dsr-brand);
}

.dcod-sec-report__standing-note {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__standing-others {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--dsr-ink);
}

.dcod-sec-report__standing-others li {
	margin: 0 0 4px;
}

.dcod-sec-report__standing-others strong {
	font-variant-numeric: tabular-nums;
}

/* Le levier d'action : ce qui transforme un rang en quelque chose a faire.
   Detache du reste par un filet, pas par une couleur d'etat - ce n'est ni
   un defaut ni une alerte, c'est une invitation. */
.dcod-sec-report__standing-hint {
	margin: 14px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--dsr-line);
	font-size: 14px;
	line-height: 1.5;
	color: var(--dsr-ink);
}

/* Vue d'exemple (compte sans entite attribuee) : dite, jamais deguisee. */
.dcod-sec-report__standing-example {
	font-style: italic;
}

/* ── Comparaison entre domaines : barres empilées, pleine largeur ──

   En HTML et non en SVG, contrairement aux autres graphiques du module : un
   SVG à repère fixe ne peut pas occuper toute la largeur disponible sans
   grossir son texte dans la même proportion. Ici c'est justement la longueur
   des barres qui porte la comparaison, et la largeur utile varie beaucoup
   d'un gabarit à l'autre. Les aplats restent des fonds CSS, imprimés
   correctement grâce au print-color-adjust posé plus bas sur tout le
   rapport. */

.dcod-sec-report__domains {
	margin: 12px 0 4px;
}

.dcod-sec-report__domain {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	align-items: center;
	gap: 4px 14px;
	margin: 0 0 8px;
}

/* Colonne de rang (comparaison entre cantons). Le selecteur porte le
   conteneur ET la ligne : la regle nue .dcod-sec-report__domain, de
   specificite inferieure, ne peut donc pas la reprendre - y compris dans la
   requete media plus bas, ou la variante rangee est redeclaree pour la meme
   raison. */
.dcod-sec-report__domains--ranked .dcod-sec-report__domain {
	grid-template-columns: 2.4rem minmax(0, 13rem) minmax(0, 1fr);
}

.dcod-sec-report__domain-rank {
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__domain-name {
	font-size: 13px;
	color: var(--dsr-ink);
}

/* Le périmètre en cours de lecture : le gras suffit à le repérer - une
   couleur de plus entrerait en concurrence avec celles des états, qui sont
   la seule chose que la couleur doit dire ici. */
.dcod-sec-report__domain-name--mine {
	font-weight: 700;
}

.dcod-sec-report__domain-bar {
	display: flex;
	gap: 2px;
	width: 100%;
	height: 22px;
	background: var(--dsr-line);
}

/* Cette classe est PARTAGÉE avec dcod_sec_report_html_stacked() (barre des
   verdicts d'un seul périmètre, modules/reporting/includes/render.php) :
   même écart de 2px, même rayon de 3px, chaque segment reste un petit
   rectangle à coins arrondis, jamais un seul bloc continu - c'est ce qui
   sépare visuellement deux couleurs voisines. */
.dcod-sec-report__domain-seg {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	border-radius: 3px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
}

/* Mobile : pourcentage seul dans les segments, l'effectif restant lu dans
   la légende juste en dessous (voir dcod_sec_report_seg_text()). Écran
   uniquement : l'impression garde le libellé complet. */
.dcod-sec-report__seg-count {
	margin-left: 0.3em;
}

@media screen and (max-width: 640px) {
	.dcod-sec-report__seg-count {
		display: none;
	}
}

.dcod-sec-report__domain-empty {
	display: flex;
	align-items: center;
	padding-left: 10px;
	font-size: 12px;
	color: var(--dsr-ink-soft);
}

/* Légende sans aucune valeur : chaque ligne porte les siennes dans ses
   propres segments. */
.dcod-sec-report__domains-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--dsr-ink-soft);
}

.dcod-sec-report__domains-legend li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dcod-sec-report__domains-swatch {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	/* Sous cette largeur, une colonne de libellés prendrait la moitié de la
	   place utile : le libellé passe au-dessus de sa barre. */
	.dcod-sec-report__domain {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Le rang reste a cote du libelle plutot que seul sur sa ligne : deux
	   colonnes etroites cote a cote, la barre en dessous. */
	.dcod-sec-report__domains--ranked .dcod-sec-report__domain {
		grid-template-columns: 2.4rem minmax(0, 1fr);
	}

	.dcod-sec-report__domains--ranked .dcod-sec-report__domain-bar {
		grid-column: 1 / -1;
	}
}

.dcod-sec-report__empty {
	margin: 8px 0 0;
	padding: 12px 14px;
	font-size: 13.5px;
	color: var(--dsr-ink-soft);
	background: var(--dsr-ground);
	border-left: 3px solid var(--dsr-line);
}

/* Seul un TABLEAU peut légitimement dépasser l'écran (beaucoup de colonnes) :
   il défile DANS son propre conteneur plutôt que d'emporter tout le corps de
   la page de travers. Un graphique SVG, lui, ne doit JAMAIS avoir besoin de
   ce défilement : voir max-width:100% ci-dessous - imposer un défilement
   horizontal pour lire la fin d'un graphique est le contraire des bonnes
   pratiques d'accessibilité (WCAG 1.4.10 Reflow), et le tableau qui
   accompagne chaque graphique reste de toute façon la source de lecture
   exacte, jamais remplacée par le graphique lui-même. */
/* position:relative OBLIGATOIRE : overflow ne découpe un descendant en
   position:absolute que si le conteneur défilant est aussi son bloc
   conteneur. Sans elle, les libellés pour lecteur d'écran
   (.dcod-sec-report__sr, position:absolute) des cellules de la matrice
   comparative se positionnaient par rapport à un ancêtre HORS de la zone
   défilante : ceux des colonnes de droite débordaient de la page entière -
   611px de large pour un écran de 390px, sans rien de visible à droite, et
   la page glissait de gauche à droite au défilement sur mobile. */
.dcod-sec-report__scroll {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 10px 0 4px;
}

/* max-width:100%, sans plancher : un SVG à viewBox fixe qui rétrécit voit
   AUSSI son texte rétrécir (même échelle pour tout le dessin), donc devenir
   moins net sur un petit écran - mais rester illisible faute de place n'est
   pas une option non plus. Le compromis retenu est de toujours tenir dans la
   largeur disponible (jamais de défilement force) : le tableau juste en
   dessous de chaque graphique reste l'alternative textuelle exacte, à taille
   de police fixe, qui ne rétrécit jamais. */
.dcod-sec-report__svg {
	display: block;
	max-width: 100%;
	overflow: visible;
}

/* ── Tableaux (vue alternative obligatoire aux graphiques) ── */

.dcod-sec-report__table {
	width: 100%;
	margin: 14px 0 0;
	border-collapse: collapse;
	font-size: 13.5px;
}

.dcod-sec-report__table th,
.dcod-sec-report__table td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--dsr-line);
}

.dcod-sec-report__table thead th {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dsr-ink-soft);
	border-bottom: 2px solid var(--dsr-line);
}

.dcod-sec-report__table--plan td:last-child {
	color: var(--dsr-ink-soft);
}

/* Barre proportionnelle dans une cellule : complète un chiffre écrit, ne le
   remplace pas. Employée là où un graphique SVG rognerait les libellés -
   « Adresse de contact valide (champ Contact) » ou « Appenzell Rhodes-
   Intérieures » ne tiennent pas dans l'axe d'un graphique, et tronquer une
   liste de référence serait pire que de ne pas la tracer.

   Les teintes sont celles des verdicts et des gravités déjà en place sur la
   page et sur les cartes - aucune couleur propre à ce composant. */
.dcod-sec-report__cell--bar {
	white-space: nowrap;
}

.dcod-sec-report__bar-value {
	display: block;
	font-variant-numeric: tabular-nums;
}

.dcod-sec-report__bar {
	display: block;
	width: 100%;
	min-width: 72px;
	height: 6px;
	margin-top: 5px;
	background: var(--dsr-line);
}

.dcod-sec-report__bar-fill {
	display: block;
	height: 100%;
}

.dcod-sec-report__bar-fill--critical { background: #d63638; }
.dcod-sec-report__bar-fill--major { background: #dba617; }
.dcod-sec-report__bar-fill--minor { background: #787c82; }
.dcod-sec-report__bar-fill--neutral { background: #9aa3ad; }

.dcod-sec-report__code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	color: var(--dsr-ink-soft);
}

/* Gravité : fond clair et texte foncé plutôt qu'un aplat saturé, pour que le
   libellé reste lisible - et le libellé est TOUJOURS écrit, la couleur ne
   porte jamais l'information seule. */
.dcod-sec-report__sev {
	display: inline-block;
	padding: 2px 9px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	border: 1px solid;
}

.dcod-sec-report__sev--critical {
	color: #a4262c;
	background: #fce8e8;
	border-color: #d63638;
}

.dcod-sec-report__sev--major {
	color: #8a6100;
	background: #fdf6e3;
	border-color: #dba617;
}

.dcod-sec-report__sev--minor {
	color: var(--dsr-ink-soft);
	background: var(--dsr-ground);
	border-color: #c9ccd1;
}

/* ── Actions ── */

.dcod-sec-report__block--actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Cadre repris du theme (.button / .button-primary) : bordure de 1px, padding
   de 0.375rem 1rem, corps de 0.85rem, angles droits et transition de 0.15s.
   Un bouton du rapport doit avoir exactement la meme assise qu'un bouton du
   reste du site, sans quoi la page se lit comme une piece rapportee. */
.dcod-sec-report__btn {
	display: inline-block;
	padding: 0.375rem 1rem;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	color: #ffffff;
	text-decoration: none;
	background: var(--dsr-ink);
	border: 1px solid var(--dsr-ink);
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.dcod-sec-report__btn:hover,
.dcod-sec-report__btn:focus-visible {
	color: var(--dsr-ink);
	background: var(--dsr-brand);
	border-color: var(--dsr-brand-deep);
}

/* Ligne discrète « réservé aux CISO » dans la rangée des exports. Le bloc
   d'invitation lui-même porte ses styles EN LIGNE (dcod_sec_report_access_cta()),
   pour ne jamais dépendre du déploiement de ce fichier. */
.dcod-sec-report__access-line {
	flex-basis: 100%;
	margin-top: 4px;
}

/* Même assise que .dcod-sec-report__btn (bordure, padding, taille), pour un
   choix qui s'insère dans la même rangée sans rupture visuelle. */
.dcod-sec-report__pdf-select {
	padding: 0.375rem 0.75rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--dsr-ink);
	background: var(--dsr-surface);
	border: 1px solid var(--dsr-ink);
	border-radius: 0;
	max-width: 100%;
}

.dcod-sec-report__block--actions .dcod-sec-report__lead {
	flex: 1 1 100%;
	margin: 0;
}

/* Lien secondaire discret (ex. "CSV avec séparateur virgule") : une
   alternative de repli, jamais un second bouton pleine taille qui
   concurrencerait visuellement le choix par défaut. */
.dcod-sec-report__link-muted {
	color: var(--dsr-ink-soft);
	text-decoration: underline;
	font-size: 0.9em;
}
.dcod-sec-report__link-muted:hover,
.dcod-sec-report__link-muted:focus-visible {
	color: var(--dsr-ink);
}

@media screen and (prefers-reduced-motion: reduce) {
	.dcod-sec-report__btn,
	.dcod-sec-report__pill {
		transition: none;
	}
}

/* Rappel methodologique : meme registre discret que .dcod-sec-report__lead
   (jamais un encadre d'alerte - ce n'est pas un probleme, c'est un rappel de
   perimetre valable en permanence). Visible a l'ecran ET a l'impression. */
.dcod-sec-report__methodology .dcod-sec-report__lead {
	color: var(--dsr-ink-soft);
}

/* Uniquement a l'impression (voir @media print ci-dessous) : sur ecran, la
   date de production de la page n'apporte rien que l'horloge du visiteur
   ne sache deja - seul un tirage papier a besoin de porter sa propre date. */
/* En-tete et pied d'impression : invisibles a l'ecran, repetes sur chaque
   page imprimee (voir @media print). */
.dcod-sec-report__print-head,
.dcod-sec-report__print-footer {
	display: none;
}

/* ── Impression : le rapport est fait pour être transmis sur papier ou en PDF ── */

/* Problèmes à corriger : au-delà des dix premiers, lignes repliées. */
.dcod-sec-report__plan:not(.is-open) .dcod-sec-report__row--more {
	display: none;
}

.dcod-sec-report__more {
	display: block;
	margin: 10px auto 0;
	padding: 8px 16px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	color: #1d2327;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.dcod-sec-report__more:hover,
.dcod-sec-report__more:focus-visible {
	border-color: #88cc00;
}

@media print {
	/* Toutes les lignes à l'impression, sans le bouton. */
	.dcod-sec-report__plan .dcod-sec-report__row--more { display: table-row !important; }
	.dcod-sec-report__more { display: none !important; }

	@page {
		margin: 14mm;
	}

	/* Rapport isole par report.js (dcodSecReportPrint) : tout ce qui entoure
	   le rapport dans le theme (en-tete, navigation, titre, pied) disparait
	   du tirage. .dcod-sec-report__noprint : elements propres au rapport sans
	   utilite sur papier (lien vers la carte interactive, titre de section). */
	.dcod-sec-print-hide,
	.dcod-sec-report__noprint {
		display: none !important;
	}

	/* En-tete (une fois, en haut) : logo, adresse, domaines et contexte de
	   l'observatoire - un tirage papier ou PDF echange hors du site porte ainsi
	   sa provenance. Pas repete a chaque page : les navigateurs ne le permettent
	   pas de facon fiable sans deformer la mise en page du rapport. */
	.dcod-sec-report__print-head {
		display: block;
	}

	.dcod-sec-report__print-head-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12mm;
		margin: 0 0 6mm;
		padding-bottom: 2mm;
		border-bottom: 2px solid #88cc00;
	}

	.dcod-sec-report__print-logo {
		height: 13mm;
		width: auto;
		margin: 0;
	}

	.dcod-sec-report__print-brand {
		text-align: right;
		line-height: 1.3;
	}

	.dcod-sec-report__print-brand strong {
		font-size: 10pt;
		color: #1e1e1e;
	}

	.dcod-sec-report__print-brand span {
		font-size: 8pt;
		color: #898781;
		padding-left: 6px;
	}

	.dcod-sec-report__print-context {
		font-size: 8.5pt;
		font-weight: bold;
		color: #4f8a00;
		padding-top: 2px;
	}

	.dcod-sec-report__controls,
	.dcod-sec-report__block--actions {
		display: none !important;
	}

	.dcod-sec-report {
		font-size: 11pt;
	}

	/* Sans cela, la plupart des navigateurs impriment les aplats en blanc :
	   les barres disparaîtraient purement et simplement du PDF. */
	.dcod-sec-report,
	.dcod-sec-report * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.dcod-sec-report__block,
	.dcod-sec-report__tile {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.dcod-sec-report__block {
		border: 1px solid #cccccc;
		box-shadow: none;
	}

	.dcod-sec-report__table {
		font-size: 9.5pt;
	}

	.dcod-sec-report__table thead {
		display: table-header-group; /* En-tetes repetes sur chaque page d'un long plan d'action. */
	}

	/* Plan d'action : chaque ligne est une recommandation autonome (motif +
	   correctif) - jamais coupee entre deux pages, contrairement au tableau
	   dans son ensemble (deja pagine par thead au-dessus). */
	.dcod-sec-report__table--plan tr {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.dcod-sec-report__print-footer {
		display: block;
	}

	/* En-tete, pied et pagination deja rendus dans la marge de CHAQUE page
	   (report.js) : ceux en flux ne sont plus que le repli des navigateurs sans
	   boites de marge. */
	.dcod-sec-report.dcod-sec-print-mb .dcod-sec-report__print-footer {
		display: none;
	}

	/* Rapport imprime comme un vrai tableau (voir wrapBlocks() dans report.js) :
	   l'en-tete DCOD est dans le thead, reimprime en haut de CHAQUE page. Styles
	   forces : un theme peut habiller ses tableaux (bordures, marges, fonds). */
	.dcod-sec-print-table {
		width: 100% !important;
		table-layout: fixed;
		border-collapse: collapse !important;
		border: 0 !important;
		margin: 0 !important;
		background: none !important;
	}

	.dcod-sec-print-table > thead > tr > td,
	.dcod-sec-print-table > tbody > tr > td {
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		vertical-align: top;
	}

	.dcod-sec-report__print-footer-text {
		display: block;
		margin: 6mm 0 0;
		padding-top: 2mm;
		border-top: 1px solid #dddddd;
		font-size: 8pt;
		color: #898781;
	}
}

@media (max-width: 640px) {
	.dcod-sec-report {
		font-size: 14.5px;
	}

	/* Groupes en pleine largeur : sur un écran étroit, plusieurs groupes de
	   pastilles côte à côte deviennent difficiles à parcourir. */
	.dcod-sec-report__control {
		flex: 1 1 100%;
	}

	/* Cibles tactiles confortables : au doigt, une pastille de 6px de
	   padding vertical est trop fine à viser précisément. */
	.dcod-sec-report__pill {
		padding: 9px 16px;
	}

	.dcod-sec-report__block,
	.dcod-sec-report__tile {
		padding: 14px;
	}

	.dcod-sec-report__tile-value {
		font-size: 26px;
	}

	/* Le grand chiffre reste le point d'entree de la carte, mais a 64px il
	   pousserait le libelle du groupe de pairs sous lui sur un telephone. */
	.dcod-sec-report__standing-rank-value {
		font-size: 48px;
	}

	.dcod-sec-report__standing-of {
		font-size: 15px;
	}

	/* Cibles tactiles confortables : la hauteur augmente, le cadre (bordure,
	   corps de texte, angles) reste celui du theme. */
	.dcod-sec-report__btn {
		flex: 1 1 100%;
		padding: 0.75rem 1rem;
	}
}