/*
Theme Name: dismoicomment
Description: Thème du site dismoicomment.com. Comprendre pour agir, à l'ère de l'IA.
Author: Serge Bollaerts
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dismoicomment
Tags: blog, custom-menu, translation-ready
*/

/*
 * Les couleurs, typographies et espacements ne sont pas définis ici : ils viennent de
 * theme.json, qui les publie en variables CSS (--wp--preset--color--teal, etc.) et les
 * rend disponibles dans l'éditeur. Ce fichier ne contient que la mise en page.
 *
 * Les valeurs qui n'ont pas leur place dans une palette d'éditeur — nuances de gris de
 * l'interface, largeurs de panneaux — sont déclarées en variables locales ci-dessous.
 */

:root {
	--dmc-texte-tertiaire: #8a9a94;
	--dmc-rail: #e3e6e0;
	--dmc-nav-sombre: #d3e0da;
	--dmc-dialogue-voix: #1e3a30;
	--dmc-filet: rgba( 0, 0, 0, 0.08 );
	--dmc-filet-fort: rgba( 0, 0, 0, 0.12 );

	/*
	 * Blocs d'appel — les cinq niveaux, du plus courant au plus rare. Chaque niveau a
	 * trois teintes : le fond, l'accent (filet + intitulé) et le texte.
	 *
	 * Ces couleurs ne sont pas dans la palette de theme.json à dessein : ce sont des
	 * teintes internes aux blocs, pas des couleurs que l'on choisit librement dans
	 * l'éditeur. Les y mettre encombrerait le sélecteur de couleur de quinze entrées
	 * qui n'ont de sens que pour ces cinq blocs. Note et Astuce réutilisent la palette,
	 * les trois niveaux hauts ont leurs teintes propres.
	 */
	--dmc-appel-note-fond: var( --wp--preset--color--vert-pale );
	--dmc-appel-note-accent: var( --wp--preset--color--teal );
	--dmc-appel-note-texte: #1e3a30;

	--dmc-appel-astuce-fond: var( --wp--preset--color--jaune-pale );
	--dmc-appel-astuce-accent: var( --wp--preset--color--olive );
	--dmc-appel-astuce-texte: #5c6a12;

	--dmc-appel-important-fond: #d3e0da;
	--dmc-appel-important-accent: #0d332e;
	--dmc-appel-important-texte: #0d332e;

	--dmc-appel-attention-fond: #f7edd6;
	--dmc-appel-attention-accent: #a06a12;
	--dmc-appel-attention-texte: #6f4a0c;

	--dmc-appel-danger-fond: #f6e0da;
	--dmc-appel-danger-accent: #9e3520;
	--dmc-appel-danger-texte: #7a2a18;

	--dmc-panneau: 220px;
	--dmc-conteneur: 1400px;
	--dmc-large: 900px;

	/*
	 * Un premier réglage (75ch) plafonnait trop tôt : le point médian de `clamp()`
	 * était atteint dès ~1030px de fenêtre, donc figé sur tout écran de bureau normal
	 * — petit portable ou 4K, aucune différence passé ce seuil. Repoussé à 90ch
	 * (~1390px de fenêtre avant plafond) pour vraiment profiter des écrans larges.
	 * 90ch reste la limite haute communément admise en typographie avant qu'une
	 * ligne ne devienne difficile à suivre des yeux d'un bout à l'autre — au-delà,
	 * ce ne serait plus un choix de lisibilité mais un renoncement.
	 */
	--dmc-lecture: clamp( 48ch, 55vw, 90ch );

	--dmc-rayon-s: 8px;
	--dmc-rayon-m: 12px;
	--dmc-rayon-l: 14px;
	--dmc-pilule: 20px;

	--dmc-entete-compact: 49px;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var( --wp--preset--color--fond );
	color: var( --wp--preset--color--texte );
	font-family: var( --wp--preset--font-family--corps );
	font-size: var( --wp--preset--font-size--normal );
	line-height: 1.7;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var( --wp--preset--color--citron );
	color: var( --wp--preset--color--teal );
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var( --wp--preset--color--teal );
}

a:hover {
	color: var( --wp--preset--color--olive );
}

/* Visible uniquement au clavier : le focus ne doit jamais disparaître. */
:focus-visible {
	outline: 2px solid var( --wp--preset--color--olive );
	outline-offset: 2px;
}

.dmc-invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.dmc-invisible:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var( --wp--preset--color--surface );
	border-radius: var( --dmc-rayon-s );
}

/* -------------------------------------------------------------------------
 * Étiquette monospace — le surtitre récurrent des maquettes
 * ---------------------------------------------------------------------- */

.dmc-etiquette {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--etiquette );
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --dmc-texte-tertiaire );
	margin: 0 0 8px;
}

.dmc-etiquette--accent {
	color: var( --wp--preset--color--olive );
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
 * En-tête — deux allures, décidées par page (voir header.php)
 *
 * Étendue (blanche) sur l'accueil, compacte (teal, classe `is-compact`) partout
 * ailleurs. Un seul des deux balisages est rendu par page : pas de bascule, pas de
 * défilement à écouter, pas de scintillement possible.
 * ---------------------------------------------------------------------- */

.dmc-entete {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var( --wp--preset--color--surface );
	border-bottom: 1px solid var( --dmc-filet );
}

.dmc-entete__etendu,
.dmc-entete__compact {
	max-width: var( --dmc-conteneur );
	margin: 0 auto;
}

.dmc-entete__etendu {
	padding: 32px 28px 22px;
	text-align: center;
}

.dmc-entete__compact {
	position: relative;
	padding: 10px 28px;
	display: flex;
	align-items: center;
	gap: 22px;
}

.dmc-entete.is-compact {
	background: var( --wp--preset--color--teal );
}

/*
 * Bouton hamburger — masqué au-dessus de 860px. Le panneau qu'il contrôle reste en
 * `display:contents` par défaut : invisible comme boîte, son contenu (menu et
 * recherche) participe directement à la ligne flex ci-dessus, sans rien changer au
 * layout existant tant qu'on est au-dessus du seuil.
 */
.dmc-entete__bascule {
	display: none;
	background: none;
	border: 0;
	padding: 6px;
	margin-left: auto;
	color: var( --wp--preset--color--surface );
	cursor: pointer;
}

.dmc-entete__panneau {
	display: contents;
}

.dmc-marque {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.dmc-marque__signe {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var( --wp--preset--color--teal );
	display: block;
	margin: 0 auto 12px;
}

.dmc-marque__nom {
	font-family: var( --wp--preset--font-family--titre );
	font-weight: 700;
	font-size: 26px;
	color: var( --wp--preset--color--teal );
	display: block;
	margin-bottom: 6px;
}

.dmc-marque__baseline {
	font-size: 14px;
	color: var( --wp--preset--color--texte-doux );
	margin: 0 0 18px;
}

.dmc-entete__compact .dmc-marque__signe {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var( --wp--preset--color--citron );
	margin: 0;
}

.dmc-entete__compact .dmc-marque__nom {
	font-size: 17px;
	color: var( --wp--preset--color--surface );
	margin: 0;
}

.dmc-entete__barre {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

/* Navigation */

/*
 * `> ul` et non `ul` : cette liste est aussi celle du sous-menu (`.sub-menu` est un
 * `<ul>` imbriqué dans `.dmc-nav`). Sans le combinateur d'enfant direct, le sous-menu
 * hérite de ce `display:flex; justify-content:center`, qui centre chaque lien comme
 * élément flexible — indépendamment de tout `text-align`.
 */
.dmc-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 26px;
	justify-content: center;
	flex-wrap: wrap;
}

/*
 * `flex-wrap: wrap` sur le `ul` ne suffit pas à lui seul : sans ces deux règles, un
 * `<li>` peut se comprimer sous la largeur de son texte et WordPress casse alors
 * une entrée de menu au milieu du mot plutôt que de renvoyer l'entrée entière à la
 * ligne suivante. C'est le bug visible sur la maquette d'origine en largeur moyenne
 * (entre le point de rupture mobile et le plein écran) : on l'évite ici.
 */
.dmc-nav li {
	flex-shrink: 0;
	position: relative;
}

.dmc-nav a {
	font-size: 14px;
	font-weight: 500;
	color: var( --wp--preset--color--texte );
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

/*
 * Sous-menu — profondeur 2 du menu (Apparence → Menus). Masqué par défaut, révélé
 * par trois mécanismes indépendants qui se cumulent :
 * - `:hover` — la souris ;
 * - `:focus-within` — le clavier, dès que le lien parent ou une entrée du sous-menu
 *   reçoit le focus ;
 * - `.is-open` — posé par assets/js/nav.js sur un appui tactile, qui ne déclenche
 *   ni l'un ni l'autre des deux précédents.
 * Sans JavaScript, le sous-menu reste utilisable à la souris et au clavier : ce
 * n'est qu'un bouton d'ouverture explicite qui manque, pas la fonctionnalité.
 */
.dmc-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --dmc-filet-fort );
	border-radius: var( --dmc-rayon-s );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.12 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 20;
	/* .dmc-entete__etendu centre son contenu ; sans cette ligne, le sous-menu hérite
	   ce centrage au lieu de s'aligner à gauche comme une liste de liens normale. */
	text-align: left;
}

.dmc-nav li:hover > .sub-menu,
.dmc-nav li:focus-within > .sub-menu,
.dmc-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.dmc-nav .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var( --wp--preset--color--texte );
	border-bottom: 0;
	white-space: nowrap;
}

.dmc-nav .sub-menu a:hover,
.dmc-nav .sub-menu a:focus {
	background: var( --wp--preset--color--vert-pale );
	color: var( --wp--preset--color--teal );
}

.dmc-entete__compact .dmc-nav .sub-menu a {
	color: var( --wp--preset--color--texte );
}

/* Le bouton d'ouverture ajouté par nav.js, uniquement utile au tactile. */
.dmc-nav__toggle {
	background: none;
	border: 0;
	padding: 2px 4px;
	margin-left: 2px;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.dmc-nav__toggle svg {
	display: block;
}

.dmc-nav li.is-open > .dmc-nav__toggle svg {
	transform: rotate( 180deg );
}

.dmc-nav .current-menu-item > a,
.dmc-nav .current_page_item > a,
.dmc-nav .current-menu-ancestor > a,
.dmc-nav .current_page_ancestor > a {
	color: var( --wp--preset--color--teal );
	font-weight: 700;
	border-bottom-color: var( --wp--preset--color--olive );
}

.dmc-entete__compact .dmc-nav > ul {
	gap: 20px;
	justify-content: flex-start;
	margin-left: 20px;
}

.dmc-entete__compact .dmc-nav a {
	color: var( --dmc-nav-sombre );
	border-bottom: 0;
}

.dmc-entete__compact .dmc-nav .current-menu-item > a,
.dmc-entete__compact .dmc-nav .current_page_item > a,
.dmc-entete__compact .dmc-nav .current-menu-ancestor > a,
.dmc-entete__compact .dmc-nav .current_page_ancestor > a {
	color: var( --wp--preset--color--surface );
	font-weight: 600;
}

/*
 * Exception : l'entrée courante DANS le sous-menu déroulant.
 *
 * Les règles « entrée courante » ci-dessus visent la barre de navigation — texte clair
 * sur fond teal. Leur sélecteur atteint aussi les entrées du sous-menu, dont le panneau
 * est blanc : la page qu'on est en train de lire y devenait blanche sur blanc, donc
 * invisible. On la marque comme le sommaire latéral (`.dmc-sommaire a.is-active`) :
 * pastille vert pâle, texte teal.
 */
.dmc-nav .sub-menu .current-menu-item > a,
.dmc-nav .sub-menu .current_page_item > a,
.dmc-entete__compact .dmc-nav .sub-menu .current-menu-item > a,
.dmc-entete__compact .dmc-nav .sub-menu .current_page_item > a {
	background: var( --wp--preset--color--vert-pale );
	color: var( --wp--preset--color--teal );
	font-weight: 700;
}

/* Recherche */

.dmc-recherche {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --wp--preset--color--surface );
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: var( --dmc-rayon-s );
	padding: 6px 12px;
	min-width: 160px;
}

.dmc-recherche__icone {
	color: var( --wp--preset--color--olive );
	flex-shrink: 0;
	display: block;
}

.dmc-recherche input {
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	color: var( --wp--preset--color--texte );
	width: 100%;
	min-width: 0;
}

.dmc-entete__compact .dmc-recherche {
	margin-left: auto;
	background: rgba( 255, 255, 255, 0.16 );
	border-color: transparent;
}

.dmc-entete__compact .dmc-recherche__icone {
	color: var( --wp--preset--color--citron );
}

.dmc-entete__compact .dmc-recherche input {
	color: var( --wp--preset--color--surface );
}

.dmc-entete__compact .dmc-recherche input::placeholder {
	color: var( --dmc-nav-sombre );
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Gabarit à trois colonnes — article et page de série
 * ---------------------------------------------------------------------- */

.dmc-corps {
	max-width: var( --dmc-conteneur );
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
}

.dmc-panneau {
	width: var( --dmc-panneau );
	flex-shrink: 0;
	padding: 24px 16px;
}

.dmc-panneau--gauche {
	border-right: 1px solid var( --dmc-filet );
	position: sticky;
	top: 0;
	align-self: flex-start;
	/* Plafonné à la hauteur visible : au-delà (une série longue, 14 chapitres…), la
	   liste défile dans le panneau au lieu d'emporter toute la page. */
	max-height: 100vh;
	overflow-y: auto;
}

.dmc-entete.is-compact ~ .dmc-corps .dmc-panneau--gauche {
	top: var( --dmc-entete-compact );
	max-height: calc( 100vh - var( --dmc-entete-compact ) );
}

.dmc-panneau--droite {
	border-left: 1px solid var( --dmc-filet );
	padding: 28px 20px;
}

/*
 * Colonne latérale vide — page ordinaire (page.php).
 *
 * Elle ne porte ni contenu ni filet : son seul rôle est de réserver la même largeur
 * que les panneaux d'une page de série, pour que la colonne de lecture tombe au pixel
 * près au même endroit d'un type de page à l'autre. Pas de bordure, sinon on verrait
 * deux traits verticaux encadrant du vide.
 */
.dmc-panneau--vide {
	padding: 0;
}

.dmc-principal {
	flex: 1;
	min-width: 0;
	padding: 36px 44px;
}

.dmc-principal > * {
	max-width: var( --dmc-lecture );
}

/*
 * Pas de plafond plus étroit que --dmc-lecture pour le titre : un plafond fixe (32ch
 * à l'origine, calé sur un exemple de maquette court) casse la ligne au milieu de la
 * phrase dès qu'un vrai titre est plus long.
 */
.dmc-principal > h1 {
	margin: 0 0 20px;
}

/* Sommaire */

.dmc-sommaire ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dmc-sommaire a {
	display: block;
	padding: 6px 8px;
	border-radius: 7px;
	font-size: 13px;
	color: var( --wp--preset--color--texte-doux );
	text-decoration: none;
	margin-bottom: 2px;
}

.dmc-sommaire a.is-active {
	background: var( --wp--preset--color--vert-pale );
	color: var( --wp--preset--color--teal );
	font-weight: 600;
}

.dmc-panneau__separateur {
	border: 0;
	border-top: 1px solid var( --dmc-filet );
	margin: 16px 0 12px;
}

/* Bouton de repli du sommaire, sur mobile */

.dmc-plan-bascule {
	display: none;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	background: var( --wp--preset--color--surface );
	border-radius: 7px;
	padding: 6px 12px;
	font-family: inherit;
	font-size: 13px;
	color: var( --wp--preset--color--teal );
	margin-bottom: 18px;
	cursor: pointer;
}

/* Le contenu rédigé : une colonne de lecture, sauf échappatoire volontaire. */

.dmc-contenu > * {
	max-width: var( --dmc-lecture );
}

.dmc-contenu > h2 {
	margin: 32px 0 14px;
	scroll-margin-top: calc( var( --dmc-entete-compact ) + 16px );
}

/*
 * Échappatoires : un bloc mis en « Largeur » ou « Pleine largeur » dans l'éditeur
 * (barre d'outils du bloc — schéma, tableau, groupe…) sort de la colonne de lecture.
 * Sans ces deux règles, la clé du problème signalé restait entière : l'option existe
 * dans l'éditeur, mais site public l'ignorait purement et simplement.
 */
.dmc-contenu > .alignwide {
	max-width: var( --dmc-large );
}

.dmc-contenu > .alignfull {
	max-width: none;
}

/*
 * Image centrée : la légende retrouve toute la largeur de lecture.
 *
 * WordPress rend une image centrée en `display: table` — la figure se rétrécit donc à
 * la largeur de l'image — et sa légende en `display: table-caption`, enfermée dans
 * cette même largeur. Résultat : sous une image étroite, une légende de quelques mots
 * se casse en deux ou trois lignes alors que la colonne de lecture est large.
 *
 * On repasse la figure en bloc pleine largeur et on centre l'image à l'intérieur : le
 * rendu visuel de l'image est identique, mais la légende dispose de toute la colonne
 * et tient sur une ligne tant qu'elle est courte.
 */
.wp-block-image.aligncenter {
	display: block;
	width: 100%;
}

.wp-block-image.aligncenter > img,
.wp-block-image.aligncenter > a > img {
	display: block;
	margin-inline: auto;
}

.wp-block-image.aligncenter > figcaption {
	display: block;
	text-align: center;
}

/*
 * Le code profite de la largeur — une ligne trop longue qui se casse mal est pire
 * qu'une colonne large — sans avoir la même contrainte de lisibilité que la prose.
 * Contrairement aux échappatoires ci-dessus, pas besoin de le choisir bloc par
 * bloc : c'est systématiquement vrai pour du code, donc le thème le fait par défaut.
 */
.dmc-contenu > .wp-block-code {
	max-width: var( --dmc-large );
}

/* Navigation précédent / suivant */

.dmc-nav-contenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: var( --dmc-lecture );
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
	padding-top: 18px;
	margin-top: 32px;
}

.dmc-nav-contenu a,
.dmc-nav-contenu .nav-links a {
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.dmc-nav-contenu .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

/* Support téléchargeable */

.dmc-emporter {
	font-size: 14px;
	font-weight: 600;
	color: var( --wp--preset--color--olive );
	text-decoration: none;
}

/* Panneau « fiche de la série » (page mère) */

.dmc-serie__couverture {
	width: 88px;
	margin-bottom: 12px;
}

.dmc-serie__couverture img {
	border-radius: 6px;
	display: block;
}

.dmc-serie__titre {
	font-size: 14px;
	font-weight: 600;
	color: var( --wp--preset--color--teal );
	margin: 0 0 4px;
}

.dmc-serie__progression {
	font-size: 13px;
	color: var( --dmc-texte-tertiaire );
	margin: 0 0 16px;
}

.dmc-serie__lien {
	font-size: 13px;
	font-weight: 600;
	color: var( --wp--preset--color--olive );
	text-decoration: none;
}

/* Pages larges — index, archives, recherche */

.dmc-page {
	max-width: var( --dmc-conteneur );
	margin: 0 auto;
}

.dmc-principal--large {
	padding: 36px 44px 80px;
}

.dmc-principal--large > * {
	max-width: none;
}

.dmc-page__entete {
	margin-bottom: 26px;
}

.dmc-page__entete h1 {
	font-size: var( --wp--preset--font-size--grand );
	margin: 0 0 6px;
	max-width: none;
}

.dmc-page__intro {
	font-size: 14px;
	color: var( --wp--preset--color--texte-doux );
	margin: 0;
	max-width: 70ch;
}

/* -------------------------------------------------------------------------
 * Boussole
 * ---------------------------------------------------------------------- */

.dmc-boussole__rail {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var( --dmc-rail );
	margin-bottom: 6px;
}

.dmc-boussole__remplissage {
	position: absolute;
	inset: 0 auto 0 0;
	background: var( --wp--preset--color--teal );
	border-radius: 3px;
}

.dmc-boussole__marqueur {
	position: absolute;
	top: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --wp--preset--color--citron );
	transform: translateX( -50% );
}

.dmc-boussole__bornes {
	display: flex;
	justify-content: space-between;
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11px;
	color: var( --dmc-texte-tertiaire );
	margin-bottom: 24px;
}

/* Version compacte, sur les cartes */

.dmc-boussole--carte {
	width: 56px;
	flex-shrink: 0;
}

.dmc-boussole--carte .dmc-boussole__rail {
	height: 4px;
	border-radius: 2px;
	margin: 0;
}

.dmc-boussole--carte .dmc-boussole__marqueur {
	width: 8px;
	height: 8px;
}

/* -------------------------------------------------------------------------
 * Étiquettes de thème
 * ---------------------------------------------------------------------- */

.dmc-themes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dmc-theme {
	background: var( --wp--preset--color--vert-pale );
	color: var( --wp--preset--color--teal );
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var( --dmc-pilule );
	text-decoration: none;
	display: inline-block;
}

/* -------------------------------------------------------------------------
 * Cartes
 * ---------------------------------------------------------------------- */

.dmc-grille {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dmc-carte {
	flex: 1;
	min-width: 250px;
	background: var( --wp--preset--color--surface );
	border: 1px solid var( --dmc-filet );
	border-radius: var( --dmc-rayon-m );
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dmc-carte__titre {
	font-family: var( --wp--preset--font-family--titre );
	font-weight: 600;
	font-size: 16px;
	color: var( --wp--preset--color--teal );
	margin: 0;
	line-height: 1.35;
}

.dmc-carte__titre a {
	text-decoration: none;
	color: inherit;
}

.dmc-carte__titre a:hover {
	color: var( --wp--preset--color--olive );
}

.dmc-carte__resume {
	font-size: 13px;
	color: var( --wp--preset--color--texte-doux );
	line-height: 1.55;
	margin: 0;
}

.dmc-carte__pied {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

/* -------------------------------------------------------------------------
 * Styles éditoriaux — variantes du bloc Groupe natif
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-dialogue {
	background: var( --wp--preset--color--vert-pale );
	border-left: 3px solid var( --wp--preset--color--teal );
	border-radius: 0 10px 10px 0;
	padding: 18px 22px;
}

.wp-block-group.is-style-dialogue p {
	font-style: italic;
	color: var( --dmc-dialogue-voix );
	margin: 0 0 8px;
}

.wp-block-group.is-style-dialogue p:last-child {
	margin-bottom: 0;
	color: var( --wp--preset--color--texte-doux );
}

/*
 * Blocs d'appel — cinq niveaux, sur le modèle des alertes GitHub.
 *
 * Un seul bloc (Groupe natif) avec une variante par niveau, comme le prévoit le
 * design : même géométrie pour tous, seules les trois teintes changent. L'intitulé
 * (« ◆ NOTE ») est posé par `::before` plutôt que saisi à la main — sinon il faudrait
 * l'écrire dans chaque encadré, avec le risque de fautes de casse ou d'oubli.
 *
 * Rôles éditoriaux, à ne pas mélanger : Note et Astuce portent l'essentiel du volume ;
 * Important sert à ce qu'il faut retenir ; Attention et Danger sont rares, réservés
 * aux erreurs coûteuses.
 */

.wp-block-group.is-style-appel-note,
.wp-block-group.is-style-appel-astuce,
.wp-block-group.is-style-appel-important,
.wp-block-group.is-style-appel-attention,
.wp-block-group.is-style-appel-danger {
	border-radius: 0 10px 10px 0;
	padding: 14px 20px;
}

.wp-block-group.is-style-appel-note::before,
.wp-block-group.is-style-appel-astuce::before,
.wp-block-group.is-style-appel-important::before,
.wp-block-group.is-style-appel-attention::before,
.wp-block-group.is-style-appel-danger::before {
	display: block;
	margin-bottom: 6px;
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.wp-block-group.is-style-appel-note > *,
.wp-block-group.is-style-appel-astuce > *,
.wp-block-group.is-style-appel-important > *,
.wp-block-group.is-style-appel-attention > *,
.wp-block-group.is-style-appel-danger > * {
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

.wp-block-group.is-style-appel-note {
	background: var( --dmc-appel-note-fond );
	border-left: 3px solid var( --dmc-appel-note-accent );
	color: var( --dmc-appel-note-texte );
}

.wp-block-group.is-style-appel-note::before {
	content: "◆  NOTE";
	color: var( --dmc-appel-note-accent );
}

.wp-block-group.is-style-appel-astuce {
	background: var( --dmc-appel-astuce-fond );
	border-left: 3px solid var( --dmc-appel-astuce-accent );
	color: var( --dmc-appel-astuce-texte );
}

.wp-block-group.is-style-appel-astuce::before {
	content: "✦  ASTUCE";
	color: var( --dmc-appel-astuce-accent );
}

.wp-block-group.is-style-appel-important {
	background: var( --dmc-appel-important-fond );
	border-left: 3px solid var( --dmc-appel-important-accent );
	color: var( --dmc-appel-important-texte );
}

.wp-block-group.is-style-appel-important::before {
	content: "▲  IMPORTANT";
	color: var( --dmc-appel-important-accent );
}

.wp-block-group.is-style-appel-attention {
	background: var( --dmc-appel-attention-fond );
	border-left: 3px solid var( --dmc-appel-attention-accent );
	color: var( --dmc-appel-attention-texte );
}

.wp-block-group.is-style-appel-attention::before {
	content: "!  ATTENTION";
	color: var( --dmc-appel-attention-accent );
}

.wp-block-group.is-style-appel-danger {
	background: var( --dmc-appel-danger-fond );
	border-left: 3px solid var( --dmc-appel-danger-accent );
	color: var( --dmc-appel-danger-texte );
}

.wp-block-group.is-style-appel-danger::before {
	content: "✕  DANGER";
	color: var( --dmc-appel-danger-accent );
}

/*
 * Tableau à rayures.
 *
 * La rayure par défaut de WordPress est un gris neutre (#f0f0f0), pensé pour un fond
 * blanc. Sur le fond du site (#eef2ee) les deux teintes sont à deux points l'une de
 * l'autre : la rayure existait, mais ne se voyait pas. On reprend le vert pâle de la
 * palette, qui tranche franchement sur ce fond tout en restant discret.
 */
.wp-block-table.is-style-stripes tbody tr:nth-child( odd ) {
	background-color: var( --wp--preset--color--vert-pale );
}

/* Citation détachée — sans fond, filet citron, pour une phrase clé. */

.wp-block-pullquote {
	margin: 28px 0;
	padding: 6px 0 6px 22px;
	border-left: 3px solid var( --wp--preset--color--citron );
	text-align: left;
}

.wp-block-pullquote p {
	font-family: var( --wp--preset--font-family--titre );
	font-size: 19px;
	line-height: 1.5;
	color: var( --wp--preset--color--teal );
	margin: 0;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-style: normal;
	text-transform: none;
	color: var( --dmc-texte-tertiaire );
}

/* Piliers de l'accueil — même carte, filet supérieur de couleur différente */

.wp-block-group.is-style-pilier-un,
.wp-block-group.is-style-pilier-deux,
.wp-block-group.is-style-pilier-trois {
	background: var( --wp--preset--color--surface );
	border-radius: var( --dmc-rayon-m );
	border-top: 3px solid;
	padding: 22px 20px;
}

.wp-block-group.is-style-pilier-un {
	border-top-color: var( --wp--preset--color--teal );
}

.wp-block-group.is-style-pilier-deux {
	border-top-color: var( --wp--preset--color--olive );
}

.wp-block-group.is-style-pilier-trois {
	border-top-color: var( --wp--preset--color--citron );
}

/* Étiquette — surtitre en capitales, sur un bloc Paragraphe natif */

.wp-block-paragraph.is-style-etiquette {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--olive );
}

/* -------------------------------------------------------------------------
 * Accueil
 * ---------------------------------------------------------------------- */

.dmc-accueil {
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 28px 80px;
}

.dmc-accueil__contenu {
	margin-bottom: 56px;
}

.dmc-section {
	margin-bottom: 56px;
}

.dmc-section:last-child {
	margin-bottom: 0;
}

.dmc-section__entete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 16px;
}

.dmc-section__entete .dmc-etiquette {
	margin: 0;
}

.dmc-voir-tout {
	font-size: 13px;
	color: var( --wp--preset--color--olive );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Carte compacte de ressource — icône, titre, étiquette de type */

.dmc-carte--ressource {
	padding: 16px 18px;
}

.dmc-carte--ressource__lien {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
}

.dmc-carte--ressource__icone {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.dmc-carte--ressource__corps {
	display: flex;
	flex-direction: column;
	/* Sans ça, le comportement par défaut (`stretch`) étire chaque enfant sur toute
	   la largeur de la colonne — y compris le badge, qui doit rester à sa taille. */
	align-items: flex-start;
	gap: 8px;
}

/* -------------------------------------------------------------------------
 * Pied de page
 * ---------------------------------------------------------------------- */

.dmc-pied {
	background: var( --wp--preset--color--teal );
	color: var( --dmc-nav-sombre );
	margin-top: 80px;
}

.dmc-pied__inner {
	max-width: var( --dmc-conteneur );
	margin: 0 auto;
	padding: 40px 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
}

.dmc-pied a {
	color: var( --dmc-nav-sombre );
	text-decoration: none;
	font-size: 14px;
}

.dmc-pied a:hover {
	color: var( --wp--preset--color--citron );
}

.dmc-pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.dmc-pied__mention {
	font-size: 13px;
	margin: 0;
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
 * Mobile — les maquettes basculent à 860px
 * ---------------------------------------------------------------------- */

@media ( max-width: 860px ) {
	.dmc-corps {
		flex-direction: column;
	}

	.dmc-panneau {
		width: 100%;
		position: static;
	}

	.dmc-panneau--gauche {
		border-right: 0;
		display: none;
	}

	/*
	 * En pile, une colonne de calage n'a plus rien à caler : elle n'ajouterait que du
	 * vide vertical au-dessus et au-dessous du texte.
	 */
	.dmc-panneau--vide {
		display: none;
	}

	.dmc-panneau--gauche.is-open {
		display: block;
		border-bottom: 1px solid var( --dmc-filet );
		background: var( --wp--preset--color--surface );
	}

	.dmc-panneau--droite {
		border-left: 0;
		border-top: 1px solid var( --dmc-filet );
	}

	.dmc-principal {
		padding: 24px 20px;
	}

	.dmc-plan-bascule {
		display: block;
	}

	/*
	 * En-tête compact : menu et recherche se replient derrière le bouton hamburger.
	 * `.dmc-entete__panneau` sort de `display:contents` (voir plus haut) et redevient
	 * une vraie boîte, positionnée en panneau déroulant sous la barre.
	 */
	.dmc-entete__bascule {
		display: inline-flex;
	}

	.dmc-entete__panneau {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px 20px 20px;
		background: var( --wp--preset--color--teal );
		border-bottom: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	.dmc-entete__panneau.is-open {
		display: flex;
	}

	.dmc-entete__compact .dmc-nav > ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin-left: 0;
	}

	.dmc-entete__compact .dmc-recherche {
		/* Sans ce reset, `margin-left: auto` (hérité, pensé pour la ligne horizontale
		   du bureau) pousserait le champ vers la droite dans la pile verticale. */
		margin-left: 0;
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}