/*
Theme Name: PhoneDroid Blog
Theme URI: https://www.phonedroid.fr/blog/
Author: PhoneDroid
Description: Thème en blocs du blog PhoneDroid. Écrit sur mesure, sans constructeur, sans licence et sans dépendance : les gabarits sont des fichiers HTML lisibles, la charte tient dans theme.json, et les polices sont locales. Tout est dans Git.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phonedroid-blog
Tags: blog, news, block-patterns, full-site-editing
*/

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * ⛔ CE FICHIER NE PORTE PRESQUE PAS DE STYLE, ET C'EST VOULU.
 *
 * Dans un thème en blocs, la charte vit dans `theme.json` : couleurs,
 * typographie, espacements, largeurs. On la modifie là, et l'éditeur du site
 * la propose ensuite à PhoneDroid dans l'interface.
 *
 * On n'écrit ici que ce que theme.json ne sait pas exprimer.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Le fil d'Ariane de Yoast, qui n'est pas un bloc et n'a donc pas de style. */
.pd-fil-ariane {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-texte);
}
.pd-fil-ariane a { color: inherit; text-decoration: none; }
.pd-fil-ariane a:hover { text-decoration: underline; }

/* La grille de la page d'accueil : la première carte occupe deux colonnes. */
@media (min-width: 782px) {
	.pd-grille-une .wp-block-post-template > li:first-child {
		grid-column: span 2;
	}
	.pd-grille-une .wp-block-post-template > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Lisibilité du corps d'article — la mesure, pas la largeur d'écran. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	max-width: 68ch;
}

/* ⚠️ Le défilement des tableaux est désormais traité plus bas, avec toute
   leur mise en forme — voir « LES FICHES TECHNIQUES ». */

/* ─────────────────────────────────────────────────────────────────────────────
 * L'EN-TÊTE — ce que theme.json ne sait pas exprimer
 * ───────────────────────────────────────────────────────────────────────── */

/* La barre fait 48 px sur la production, et l'élément COURANT y occupe toute
   la hauteur — c'est le seul repère de position qu'ait le visiteur. Le lien
   remplit donc la barre, au lieu de porter un padding vertical. */
.pd-menu .wp-block-navigation-item > a {
	display: block;
	padding: 0 16px;
	line-height: 48px;
}

/* Le sous-menu.
 *
 * ⛔ PAS DE `background: #fff` ICI. Le bloc impose sa propre couleur et gagne :
 *    la règle ne servait à rien et laissait croire le contraire. Le fond bleu
 *    convient à PhoneDroid, on le garde tel que le bloc le pose.
 *
 * 🔑 ET SURTOUT PAS DE GRAISSE À MOI. J'avais mis 500 ; le premier niveau est
 *    en 700. Même police, même taille — mais l'écart de graisse suffisait à
 *    faire lire « ce n'est pas la même police ». Le sous-menu hérite donc,
 *    et il est identique à son parent.
 */
.pd-menu .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: 0;
	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
	padding: 10px 0 15px;
}
.pd-menu .wp-block-navigation__submenu-container a {
	line-height: 1.5;
	padding: 8px 20px;
	white-space: nowrap;   /* une entrée par ligne, comme sur la production */
}
.pd-menu .wp-block-navigation__submenu-container a:hover {
	background: rgba(255, 255, 255, 0.07);
}
/* ⚠️ PAS de bleu franc. Sur la production la règle pose `var(--accent-color)`,
   c'est-à-dire #082E3C — la couleur de la barre elle-même. L'effet visible
   n'est donc qu'un très léger éclaircissement, pas un changement de teinte.
   Mon #0D5069 sautait aux yeux à côté. */
.pd-menu .wp-block-navigation-item.current-menu-item > a,
.pd-menu .wp-block-navigation-item.current-menu-ancestor > a,
.pd-menu .wp-block-navigation-item > a:hover {
	background-color: rgba(255, 255, 255, 0.07);
}

/* ⛔ Et surtout pas de soulignement : il vient de la règle générale des liens
   dans theme.json, qui n'a rien à faire dans une barre de navigation. */
.pd-menu a,
.pd-menu a:hover,
.pd-menu a:focus {
	text-decoration: none;
}

/* La barre de recherche : blanche, arrondie, et elle prend la place restante. */
.pd-recherche {
	flex: 1 1 320px;
	max-width: 640px;
}
.pd-recherche .wp-block-search__inside-wrapper {
	background: #fff;
	border-radius: 999px;
	border: 0;
	padding: 4px 6px 4px 18px;
}
.pd-recherche .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--encre);
	font-size: 1rem;
	padding: 10px 0;
}
.pd-recherche .wp-block-search__input::placeholder { color: var(--wp--preset--color--gris-texte); }
.pd-recherche .wp-block-search__input:focus { outline: 0; }
.pd-recherche .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--acier);
	padding: 8px 12px;
}

/* ⚠️ Sur mobile, le logo et la recherche ne tiennent pas côte à côte. */
@media (max-width: 781px) {
	.pd-recherche { flex-basis: 100%; }
}

/* La ligne qui sépare le logo du menu. ⚠️ Elle EXISTE sur la production, mais
   discrète : un voile blanc très faible, pas un trait de couleur. */
.pd-barre-menu {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LA MOSAÏQUE DE L'ACCUEIL — 1 grande à gauche, 4 petites à droite
 * ───────────────────────────────────────────────────────────────────────── */
.pd-mosaique {
	align-items: stretch;
}
.pd-mosaique > .pd-mosaique-une   { flex: 1 1 48%; min-width: 300px; }
.pd-mosaique > .pd-mosaique-suite { flex: 1 1 48%; min-width: 300px; }

/* Les couvertures remplissent leur colonne, quelle que soit la hauteur. */
.pd-mosaique .wp-block-cover { height: 100%; }
.pd-mosaique .wp-block-post-template { height: 100%; }

/* Le texte est POSÉ EN BAS de l'image, pas centré : c'est ce que fait la
   production, et c'est ce qui rend le titre lisible sur une photo. */
.pd-mosaique .wp-block-cover__inner-container {
	margin-top: auto;
	margin-bottom: 0;
	width: 100%;
}

/* L'étiquette de rubrique : discrète, au-dessus du titre. */
.pd-etiquette a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.pd-etiquette a:hover { text-decoration: underline; }

/* ⚠️ Sur mobile la mosaïque s'empile — deux colonnes de 14 rem ne tiennent pas
   sur un téléphone, et une image de 215 px de haut y devient illisible. */
@media (max-width: 781px) {
	.pd-mosaique > .pd-mosaique-une,
	.pd-mosaique > .pd-mosaique-suite { flex-basis: 100%; }
}

/* La signature de la grande tuile : « PhoneDroid - 30 juillet 2026 ».
   ⚠️ La date était GRISE parce que theme.json impose « gris-texte » à tous les
      blocs date. Sur une image sombre, elle devenait illisible : elle est donc
      forcée en blanc ici, et le tiret vient du CSS plutôt que d'un bloc de
      texte à maintenir. */
.pd-signature .wp-block-post-date,
.pd-signature .wp-block-post-date a,
.pd-signature .wp-block-post-date time {
	color: #fff;
	font-size: inherit;   /* theme.json impose aussi la TAILLE aux blocs date */
}
.pd-signature .wp-block-post-author-name::after {
	content: "-";
	margin-left: 0.6em;
	opacity: 0.7;
}

/* ⚠️ UNE SEULE RUBRIQUE SUR L'ÉTIQUETTE. Le bloc « Termes de l'article » les
   affiche TOUTES : « Actualité smartphone chinois, Fabricant, Vivo » là où la
   production n'en montre qu'une. Sur une image, trois rubriques deviennent une
   ligne de bruit au-dessus du titre.
   ▶️ On masque les suivantes en CSS plutôt que de bricoler la requête : le
      balisage reste complet pour Google, seul l'affichage est allégé. */
.pd-etiquette a:not(:first-of-type),
.pd-etiquette .wp-block-post-terms__separator {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LES SECTIONS DE L'ACCUEIL — titre à filet, 1 grand + N petits
 * ───────────────────────────────────────────────────────────────────────── */

/* Le titre de section porte un filet qui court jusqu'au bord droit.
   C'est le repère visuel de la production, et il tient en trois lignes. */
.pd-titre-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.pd-titre-section::after {
	content: "";
	flex: 1;
	height: 4px;
	background: var(--wp--preset--color--acier);
}

/* Une section : le grand article à gauche, la liste à droite.
 *
 * 🔑 EXACTEMENT MOITIÉ-MOITIÉ, ÉCART DE 24 px. Mesuré dans la page de Nico le
 *    28/08 : ses deux colonnes font 444 px sur 864, et 672 px sur 1320 — la
 *    moitié pile, dans les deux cas, avec 24 px entre l'image de gauche et la
 *    vignette de droite. Mes `flex: 1 1 46%` laissaient les deux colonnes se
 *    répartir le reste au petit bonheur, et c'est ce qui donnait l'impression
 *    que « rien n'était aligné ».
 *
 * ⚠️ `min-width: 0` et non 260 px : sans lui, un titre long refuse de se
 *    couper et pousse sa colonne au-delà de sa moitié. */
.pd-section {
	align-items: flex-start;
	gap: 24px;
}
.pd-section > .pd-section-une,
.pd-section > .pd-section-liste { flex: 1 1 0; min-width: 0; }

/* Une ligne de liste : vignette à gauche, titre et date à droite.
   ⚠️ `min-width: 0` sur la colonne de texte, sinon un titre long refuse de se
      couper et fait déborder toute la ligne. */
.pd-ligne { align-items: flex-start; }
.pd-ligne > .wp-block-post-featured-image { flex: 0 0 auto; margin: 0; }

/* 🔑 LA VIGNETTE VAUT 29 % DE SA COLONNE, PAS UNE TAILLE FIXE. Relevé dans la
 *    production : 126 px sur une colonne de 444, 194 px sur une colonne de 672
 *    — 28,4 % et 28,9 %. Une largeur en pixels marchait dans la colonne étroite
 *    et devenait minuscule en pleine largeur : c'est ce qui faisait des lignes
 *    de hauteurs différentes, donc « mal alignées ».
 *    Le format 4/3 vient du gabarit (aspectRatio), pas d'ici. */
.pd-section-liste .pd-ligne > .wp-block-post-featured-image { flex: 0 0 29%; }
.pd-section-liste .pd-ligne .wp-block-post-date { color: var(--wp--preset--color--gris-texte); }
.pd-ligne > .wp-block-group { flex: 1 1 auto; min-width: 0; }
.pd-ligne .wp-block-post-title { margin: 0; }
.pd-ligne .wp-block-post-date { margin: 0; }

/* Les vignettes rondes de la barre latérale. */
.pd-rond img { border-radius: 999px; }

/* La rubrique en surtitre, discrète. */
.pd-rubrique a { color: inherit; text-decoration: none; }
.pd-rubrique a:hover { text-decoration: underline; }
.pd-rubrique a:not(:first-of-type),
.pd-rubrique .wp-block-post-terms__separator { display: none; }

/* La signature sur fond clair : auteur et date de même taille, séparés. */
.pd-signature-claire { color: var(--wp--preset--color--gris-texte); }
.pd-signature-claire .wp-block-post-date { font-size: inherit; }
.pd-signature-claire .wp-block-post-author-name::after {
	content: "-";
	margin-left: 0.6em;
	opacity: 0.7;
}

/* ⚠️ Sous 900 px, la barre latérale passe SOUS le contenu et les sections
      s'empilent : deux colonnes de 260 px ne tiennent pas sur un téléphone. */
@media (max-width: 900px) {
	.pd-section > .pd-section-une,
	.pd-section > .pd-section-liste { flex-basis: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LE PIED DE PAGE — mesuré dans la page de Nico le 28/08/2026
 *
 * ⚠️ MA PREMIÈRE VERSION ÉTAIT « TROP CHARGÉE ». Elle listait vingt-cinq
 *    rubriques à puces et soulignées, et servait trois articles. La production
 *    en montre quinze, sans puce ni soulignement, et deux articles.
 * ───────────────────────────────────────────────────────────────────────── */

.pd-pied a,
.pd-bandeau a { color: #fff; text-decoration: none; }
.pd-pied a:hover,
.pd-bandeau a:hover { text-decoration: underline; }

/* ⛔ Le recadrage des colonnes est retiré avec le filet qui débordait : garder
   un `overflow: hidden` dont plus rien n'a besoin, c'est laisser un piège. */

/* Le titre de colonne : une pastille pleine, prolongée par un filet fin.
   Relevé sur la production : blanc sur #355D6C, 14 px, padding 7px 12px 4px. */
/* ⚠️ PLUS DE PASTILLE PLEINE. Elle venait du thème tagDiv et avait été
   reproduite à l'identique le 28/08, à la demande de Nico. Le 29/08 il a
   tranché autrement : « vu qu'on essaie de ressembler à un site de 2026, suis
   le conseil de Gemini ». Un titre blanc posé sur le marine, souligné d'un
   filet discret — le même vocabulaire que les titres de section de l'accueil.

   ⚠️ La graisse et les majuscules sont dans le GABARIT : le bloc pose son
      `font-weight` en style en ligne, qu'aucune règle CSS ne peut battre. */
.pd-titre-pied {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0 0 10px;
	background: none;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.pd-pied-contact,
.pd-pied-legal { margin: 0; }
.pd-pied-logo { margin-left: 0; }

/* Les réseaux : quatre carrés de 45 px, fond acier — pas des logos nus comme
   dans la barre latérale de l'accueil. */
.pd-pied-reseaux .wp-block-social-link { border-radius: 2px; }
.pd-pied-reseaux .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 0;
}
.pd-pied-reseaux .wp-block-social-link-anchor svg { width: 20px; height: 20px; }

/* ⚠️ theme.json impose au bloc Date la couleur « gris-texte » ET une taille.
      Sur le fond marine du pied, la date en devenait illisible — le même piège
      que sur la mosaïque. */
.pd-pied .wp-block-post-date {
	color: rgba(255, 255, 255, 0.75);
	font-size: inherit;
}
.pd-pied-signature { align-items: center; }
.pd-pied-signature .wp-block-post-author-name::after {
	content: "-";
	margin-left: 0.6em;
	opacity: 0.7;
}

/* L'étiquette de rubrique : blanc sur acier, 10 px. Une seule, comme ailleurs :
   le bloc les rend toutes, la production n'en montre qu'une. */
.pd-pied-etiquette a {
	display: inline-block;
	padding: 3px 6px 4px;
	background: var(--wp--preset--color--acier);
	color: #fff;
	text-transform: none;
}
.pd-pied-etiquette a:hover { text-decoration: none; }
.pd-pied-etiquette a:not(:first-of-type),
.pd-pied-etiquette .wp-block-post-terms__separator { display: none; }

/* Les rubriques : pas de puce, pas de soulignement, le compte poussé à droite.
   Le tri et la coupe à quinze se font dans functions.php. */
.pd-cat-populaires {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pd-cat-populaires li { margin: 0; }
.pd-cat-populaires li a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pd-cat-populaires .pd-cat-nb { opacity: 0.65; flex: 0 0 auto; }

/* Le bandeau du bas : #11171C, le texte à gauche, les liens à droite. */
.pd-bandeau p { margin: 0; }
.pd-bandeau-liens a { margin-left: 22px; }

@media (max-width: 781px) {
	.pd-bandeau-liens a { margin: 0 22px 0 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LE SURVOL DES CARTES — relevé dans la production le 28/08/2026
 *
 * Sa règle : `.td_module_wrap:hover .entry-title a { color: #85A1B2 }`, et
 * `text-decoration: none !important` sur tous les titres. Deux choses à en
 * retenir, que mon premier essai ratait toutes les deux :
 *
 *   1. l'effet se déclenche en survolant TOUTE LA CARTE, pas seulement le
 *      lien — c'est ce qui rend la cible facile à viser ;
 *   2. il n'y a PAS de soulignement. Le mien en avait un, hérité de la règle
 *      générale des liens de theme.json : « plus rétro », a dit Nico.
 * ───────────────────────────────────────────────────────────────────────── */

.pd-section .wp-block-post-title a,
.pd-cote-liste .wp-block-post-title a,
.pd-mosaique .wp-block-post-title a { text-decoration: none; }

.pd-section-une:hover .wp-block-post-title a,
.pd-section-liste .pd-ligne:hover .wp-block-post-title a,
.pd-cote-liste .pd-ligne:hover .wp-block-post-title a,
.pd-section .wp-block-post-title a:hover {
	color: var(--wp--preset--color--survol);
	text-decoration: none;
}

/* La signature : l'auteur en NOIR, la date en gris neutre — c'est ce que fait
   sa production, et non les deux dans la même teinte. */
.pd-signature-claire {
	color: var(--wp--preset--color--encre);
	align-items: center;
}
.pd-signature-claire .wp-block-post-date {
	color: var(--wp--preset--color--gris);
	font-size: inherit;
}

/* La rubrique en surtitre : noire comme chez lui, pas gris bleuté.
   ⚠️ Elle reste limitée à UNE rubrique : le bloc les rend toutes. */
.pd-rubrique { color: var(--wp--preset--color--encre); }
.pd-section-une .pd-rubrique a { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────────
 * LA PORTE DE SORTIE D'UNE SECTION
 *
 * Nico, 28/08 : « un visiteur ne peut pas voir plus d'articles… si possible
 * sans mettre de moches 2-3-4 ». Chaque section porte donc UN lien discret au
 * bout de son filet, qui mène à l'archive de sa rubrique.
 *
 * 🔑 Le titre reste `flex: 1` : son filet s'étire tout seul entre le texte et
 *    le lien, quelle que soit la longueur des deux. Aucun calcul de largeur.
 * ───────────────────────────────────────────────────────────────────────── */

.pd-entete-section {
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.pd-entete-section > .pd-titre-section {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

.pd-tout-voir {
	flex: 0 0 auto;
	margin: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}
.pd-tout-voir a {
	color: var(--wp--preset--color--acier);
	text-decoration: none;
}
.pd-tout-voir a::after {
	content: " ›";
	font-size: 1.2em;
	line-height: 1;
}
.pd-tout-voir a:hover { color: var(--wp--preset--color--survol); }

/* ⚠️ Dans la barre latérale, la colonne est étroite : le lien passe sous le
      titre plutôt que de comprimer celui-ci. */
@media (max-width: 480px) {
	.pd-entete-section { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * LA PAGINATION — deux liens nommés, jamais de numéros
 * ───────────────────────────────────────────────────────────────────────── */
.wp-block-query-pagination a {
	color: var(--wp--preset--color--marine);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--fond-doux);
	border-radius: 4px;
}
.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--fond-doux);
	color: var(--wp--preset--color--marine);
}
/* ⚠️ Sur la première page il n'y a pas de « plus récents » : sans cette règle
      le « plus anciens » se retrouverait à gauche au lieu de rester à droite. */
.pd-pagination .wp-block-query-pagination-next:only-child { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
 * LA PAGE D'UN ARTICLE
 * ───────────────────────────────────────────────────────────────────────── */

/* 🔴 LE PLAFOND DE HAUTEUR DES IMAGES — le défaut relevé par Nico le 28/08.
 *
 *    Mesuré avant de corriger, sur `oppo-reno-15-pro-max-a-t-il-sa-place` :
 *    une image de 851 × 2560 s'affichait sur 1 905 px de haut, soit
 *    2,1 ÉCRANS. Le lecteur devait la faire défiler pour retrouver le texte.
 *
 *    La cause : `max-width: 100%` limite la LARGEUR et rien d'autre. Une image
 *    verticale prend donc toute la colonne en largeur et ce que sa proportion
 *    impose en hauteur — sans limite.
 *
 * ⚠️ `width: auto` est indispensable à côté de `max-height`, sinon la largeur
 *    reste imposée et l'image se déforme au lieu de rétrécir.
 */
/* ⚠️ `:not(.pd-ui)` — UNE IMAGE D’ENCART N’EST PAS UNE IMAGE D’ARTICLE.
 *
 *    Defaut vu par Nico le 31/08, sur les 78 articles qui portent le
 *    raccourci [pd_produit] : la vignette de l’encadre d’achat s’affichait
 *    en 504 x 504 au lieu de 90 x 90.
 *
 *    La cause est une specificite, pas une erreur d’ecriture :
 *      `.pd-article .wp-block-post-content img`  (0,2,1)
 *      `.pd-boite-img`                           (0,1,0)
 *    Ce selecteur-ci gagne, et impose `width:auto; height:auto` — donc la
 *    taille naturelle du fichier (1 440 px), ramenee a 504 par le plafond de
 *    70vh ci-dessous. La regle faisait exactement son travail, sur une image
 *    qui n’etait pas la sienne.
 *
 * 🔑 REGLE DE MAISON : tout composant pose DANS le contenu (encadre d’achat,
 *    encart, bandeau) marque ses images `pd-ui`. Elles sont alors laissees a
 *    leur propre feuille, qui seule connait leur geometrie. */
.pd-article .wp-block-post-content img:not(.pd-ui),
.pd-article .pd-image-article img {
	max-height: 70vh;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}
.pd-article .wp-block-post-content figure,
.pd-article .pd-image-article {
	text-align: center;
}
.pd-article .pd-image-article { margin: 0; }

/* ⚠️ Une légende doit rester sous SON image, pas sous la colonne : sans
      `display: table`, une image centrée à 400 px porte une légende de 760. */
.pd-article .wp-block-image.is-resized,
.pd-article .wp-block-image > figcaption { max-width: 100%; }

/* La barre latérale suit la lecture au lieu de s'arrêter au premier écran.
   ⚠️ `align-self: flex-start` est ce qui rend le `sticky` possible : sans lui
      la colonne est étirée sur toute la hauteur et n'a nulle part où coller. */
@media (min-width: 782px) {
	.pd-cote-article {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
}

/* Le fil d'Ariane : discret, et il porte maintenant la lignée complète de la
   rubrique la plus précise — c'est lui qui remplace la liste de rubriques. */
.pd-article .pd-fil-ariane {
	font-size: 12px;
	color: var(--wp--preset--color--gris);
}
.pd-article .pd-fil-ariane a { color: inherit; }

/* Le corps de l'article : la mesure de lecture prime sur la largeur d'écran. */
.pd-article .wp-block-post-content > p,
.pd-article .wp-block-post-content > ul,
.pd-article .wp-block-post-content > ol { max-width: 68ch; }
.pd-article .wp-block-post-content > h2 {
	font-size: 24px;
	margin-top: var(--wp--preset--spacing--60);
}
.pd-article .wp-block-post-content > h3 {
	font-size: 19px;
	margin-top: var(--wp--preset--spacing--50);
}

/* Le fil d Ariane sort d un bloc « code court » : son paragraphe porte les
   marges par defaut de WordPress, dont on ne veut pas ici. */
.pd-fil-ariane p { margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
 * LES COMMENTAIRES — « le bloc WordPress actuel fait très vieux » (Nico)
 *
 * Il avait raison : champs à bords carrés pleine largeur, titre en 32 px, une
 * mention légale aussi grosse que le texte. Rien à installer pour corriger ça,
 * c'est de la mise en forme.
 * ───────────────────────────────────────────────────────────────────────── */

.pd-article .wp-block-post-comments-form,
.pd-article .wp-block-comments { max-width: 68ch; }

/* Le titre du formulaire à la taille des autres titres de section, filet compris. */
.pd-article .comment-reply-title {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--encre);
	margin-bottom: var(--wp--preset--spacing--40);
}
.pd-article .comment-reply-title::after {
	content: "";
	flex: 1;
	height: 4px;
	background: var(--wp--preset--color--acier);
}

/* La mention légale : une note, pas une phrase de corps de texte. */
.pd-article .comment-notes,
.pd-article .comment-form-cookies-consent label {
	font-size: 13px;
	color: var(--wp--preset--color--gris);
}

.pd-article .comment-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--wp--preset--color--encre);
}
.pd-article .comment-form input[type="text"],
.pd-article .comment-form input[type="email"],
.pd-article .comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 14px;
	border: 1px solid #d9dfe3;
	border-radius: 6px;
	background: var(--wp--preset--color--fond);
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
}
.pd-article .comment-form textarea { min-height: 130px; resize: vertical; }
.pd-article .comment-form input:focus,
.pd-article .comment-form textarea:focus {
	outline: 0;
	border-color: var(--wp--preset--color--acier);
	box-shadow: 0 0 0 3px rgba(53, 93, 108, 0.15);
}

/* ⚠️ Le nom et le courriel tiennent côte à côte sur un écran large : le champ
      « site web » ayant disparu, une seule ligne suffit. */
@media (min-width: 600px) {
	.pd-article .comment-form-author,
	.pd-article .comment-form-email {
		display: inline-block;
		width: calc(50% - 8px);
		vertical-align: top;
	}
	.pd-article .comment-form-author { margin-right: 12px; }
}

.pd-article .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.pd-article .comment-form-cookies-consent label { margin: 0; font-weight: 400; }

/* ⛔ RIEN A ECRIRE POUR LE BOUTON. J avais prevu une regle `.form-submit
   .submit` : elle ne s appliquait a rien. WordPress rend le bouton d envoi
   avec `wp-block-button__link`, donc il porte deja la couleur, l arrondi et
   les marges definis dans theme.json — verifie a l ecran (fond #082E3C,
   texte blanc, rayon 4 px) avant de retirer la regle morte. */

/* Un commentaire déjà publié : une carte sobre plutôt qu'un bloc de texte nu. */
.pd-article .wp-block-comment-author-name { font-weight: 600; }
.pd-article .wp-block-comment-date { color: var(--wp--preset--color--gris); }
.pd-article .wp-block-comment-content { font-size: 15px; }

/* Le H1 de l accueil : present et honnete, mais discret — le logo dit deja le
   nom du site juste au-dessus. */
/* Le H1 de l accueil : PRESENT pour la structure, INVISIBLE pour le lecteur.
 *
 * Nico, 29/08, en le voyant en ligne : « c est voulu ou on enleve ? ». Il
 * repetait le logo a deux centimetres au-dessus. Une page a besoin d un H1 qui
 * la decrive ; le lecteur, lui, a deja le logo.
 *
 * ⛔ SURTOUT PAS `display: none`. Cette technique-la garde le titre dans
 *    l arbre d accessibilite : un lecteur d ecran l annonce, et le texte est
 *    exactement celui du logo — ce n est donc pas du texte cache pour Google,
 *    c est la meme information dite deux fois pour deux publics.
 */
.pd-titre-accueil {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Le menu du bandeau du bas — il remplace quatre liens écrits en dur.
   ⚠️ On ne montre que le premier niveau : c est un rappel, pas une navigation.
      Les sous-menus (12 marques) y seraient absurdes. */
.pd-bandeau-menu .wp-block-navigation-item > a { padding: 0; line-height: inherit; }
.pd-bandeau-menu a { color: #fff; text-decoration: none; }
.pd-bandeau-menu a:hover { text-decoration: underline; }

/* Les messages « aucun résultat » : une note, pas un titre. */
.pd-vide { color: var(--wp--preset--color--gris); }

/* ─────────────────────────────────────────────────────────────────────────────
 * LES FICHES TECHNIQUES — les tableaux dans les articles      29/08/2026
 *
 * Avis extérieur demandé par Nico à Gemini, et il est juste : « un côté
 * tableau Excel des années 2010 qui tranche avec le reste du design ».
 * Quatre défauts nommés, quatre corrections.
 *
 * ⚠️ MAIS SA RÈGLE NE VISAIT QUE `.wp-block-table`. Mesuré avant d'écrire :
 *
 *        109 articles en TablePress   (`[table id=…]`)
 *         61 en bloc natif             (`.wp-block-table`)
 *         67 avec du `<table>` brut
 *
 *    Une règle sur le seul bloc natif en aurait raté les deux tiers. On vise
 *    donc TOUT tableau du corps d'article, quelle que soit son origine.
 *
 * 🔑 LE PLUS IMPORTANT EST L'ALIGNEMENT, pas les bordures. Une ligne dense
 *    centrée oblige l'œil à chercher son début à chaque ligne.
 * ───────────────────────────────────────────────────────────────────────── */

/* Le cadre : une carte, pas une grille posée sur la page.
   ⚠️ `overflow-x: auto` DOIT rester — c'est lui qui laisse la fiche défiler
      seule sur un téléphone au lieu de pousser la page en largeur. Il suffit
      à découper les coins arrondis, `overflow: hidden` casserait le
      défilement. */
.wp-block-post-content .wp-block-table,
.wp-block-post-content .tablepress-table-wrapper,
.wp-block-post-content > table {
	border: 1px solid #eaeaea;
	border-radius: 8px;
	overflow-x: auto;
	margin-block: var(--wp--preset--spacing--50);
}

.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ⛔ PLUS AUCUNE BORDURE VERTICALE. C'est ce qui donnait l'effet « grille
      fermée ». On ne garde que de fins filets horizontaux. */
.wp-block-post-content table td,
.wp-block-post-content table th {
	text-align: left;
	padding: 10px 16px;
	border: 0;
	border-bottom: 1px solid #eaeaea;
	vertical-align: top;
}
.wp-block-post-content table tr:last-child td {
	border-bottom: 0;
}

/* L'en-tête : il pose la structure au premier coup d'œil. */
.wp-block-post-content table thead th,
.wp-block-post-content table tr:first-child th {
	background: var(--wp--preset--color--fond-doux);
	color: var(--wp--preset--color--encre);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-bottom: 1px solid #e0e0e0;
}

/* La colonne de gauche porte le nom du composant : elle guide la lecture. */
.wp-block-post-content table tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	white-space: nowrap;
}

/* ⚠️ Sur un téléphone, `nowrap` sur la première colonne la ferait déborder :
      on la laisse se couper, le défilement horizontal prend le relais. */
@media (max-width: 600px) {
	.wp-block-post-content table tbody td:first-child { white-space: normal; }
	.wp-block-post-content table td,
	.wp-block-post-content table th { padding: 8px 12px; }
}

/* ─── TABLEPRESS ──────────────────────────────────────────────────────────
 * Il apporte sa propre feuille, plus spécifique que la nôtre : on la
 * neutralise plutôt que de surenchérir en `!important`. */
.wp-block-post-content .tablepress {
	border: 0;
	margin: 0;
}
.wp-block-post-content .tablepress > :where(thead, tfoot) > tr > th,
.wp-block-post-content .tablepress > :where(tbody) > tr > td {
	border: 0;
	border-bottom: 1px solid #eaeaea;
	background: none;
}
.wp-block-post-content .tablepress > thead > tr > th {
	background: var(--wp--preset--color--fond-doux);
}
/* ⛔ Et pas de rayures alternées : elles ajoutent du bruit à une fiche qui se
      lit ligne par ligne. */
.wp-block-post-content .tablepress > tbody > tr.odd > td,
.wp-block-post-content .tablepress > tbody > tr.even > td {
	background: none;
}

/* ⚠️ UN TABLEAU TABLEPRESS N EST PAS TOUJOURS DANS UN CONTENEUR. Sur les vieux
   articles il est pose directement dans un bloc d accordeon : le cadre arrondi
   du wrapper ne l atteignait pas. On le lui donne donc a lui-meme.
   `border-collapse: separate` est indispensable — un tableau en `collapse`
   ignore le `border-radius`. */
.wp-block-post-content .tablepress {
	border: 1px solid #eaeaea;
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
}
.wp-block-post-content .tablepress > tbody > tr:last-child > td {
	border-bottom: 0;
}

/* Les vignettes de « Nos tests » : un carre arrondi, pas un cercle.
   ⚠️ Un cercle coupe les bords d une photo de telephone, verticale par nature —
      on n en voyait que le milieu. */
.pd-vignette-carree img { border-radius: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
 * CIBLES TACTILES — 44 × 44 px au doigt, 29/08/2026
 * ══════════════════════════════════════════════════════════════════════════
 *
 * PageSpeed signalait des liens trop petits et trop serrés sur mobile. La
 * règle des 44 px vient d'Apple et de la WCAG : c'est la surface qu'un pouce
 * atteint sans se tromper de voisin.
 *
 * 🔑 On agrandit la SURFACE DE CLIC, pas le texte. Le rendu ne bouge donc
 *    pas sur les écrans larges — c'est du remplissage, pas de la mise en page.
 *
 * ⚠️ On ne touche PAS aux liens dans un paragraphe : leur donner 44 px de
 *    haut casserait l'interligne du texte. PageSpeed ne les signale d'ailleurs
 *    que lorsqu'ils sont côte à côte, ce qui n'arrive pas ici.
 */

/* Les icônes de réseaux : l'image reste à 20 px, la zone atteint 44. */
.pd-pied-reseaux .wp-block-social-link {
	margin: 0;
}
.pd-pied-reseaux .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Les entrées de menu, en-tête et bandeau. */
.pd-menu .wp-block-navigation-item__content,
.pd-bandeau-menu .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Le menu déplié sur mobile : chaque entrée occupe toute la largeur, pour
   qu'on ne vise pas le mot mais la ligne. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 4px 0;
}

/* Le bouton d'ouverture du menu et celui de la recherche. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.pd-recherche .wp-block-search__button {
	min-width: 44px;
	min-height: 44px;
}

/* Les listes de liens du pied de page, et les étiquettes de rubrique. */
.pd-pied li > a,
.pd-cat-populaires li > a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* Les boutons « Tout voir » et la pagination. */
.pd-tout-voir a,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}