/* ============================================================
   layout.css — fixes structurels Gutenberg (parresia-theme)
   Zéro framework. Zéro override forcé. Specificité plate.
   Tout le visuel (couleurs/typo/spacing) vient des presets theme.json ;
   ici uniquement : dimensions, object-fit, déco non-preset, états natifs.
   Les couleurs référencées le sont via var(--wp--preset--*), jamais en hex.
   ============================================================ */

/* ---- Images placeholders / médias en grille ---- */
.parresia-media img,
.parresia-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.parresia-media--hero { aspect-ratio: 16 / 11; }
.parresia-media--card { aspect-ratio: 16 / 10; }
.parresia-media--thumb { aspect-ratio: 16 / 10; }
.parresia-media--wide { aspect-ratio: 21 / 9; }

/* ---- Section head : barre rouge + titre + lien ---- */
.parresia-sec-head {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--px-12 );
}
.parresia-sec-head__bar {
	flex: none;
	width: 26px;
	height: 5px;
	background: var( --wp--preset--color--secondary );
}
.parresia-sec-head__more { margin-left: auto; }

/* ---- Marqueur carré doré devant certains titres ---- */
.parresia-sq::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	background: var( --wp--preset--color--accent );
	transform: translateY(1px);
}

/* ---- Pill "Tout voir" (lien bordé) ---- */
.parresia-pill {
	display: inline-block;
	border: 1px solid var( --wp--preset--color--secondary );
	border-radius: 13px;
	white-space: nowrap;
}

/* ---- Grille 3 rails : empêche l'overflow des colonnes ---- */
.parresia-rails .wp-block-column { min-width: 0; }

/* ---- Bande full-bleed sombre (vidéos) : médias 16/9 + play ---- */
.parresia-video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.parresia-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.parresia-video-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --wp--preset--color--neutral-0 );
	opacity: 0.92;
}

/* ---- Ramp de logos exposants ---- */
.parresia-logo-ramp { display: flex; gap: var( --wp--preset--spacing--px-18 ); align-items: center; overflow: hidden; }
.parresia-logo-ramp .wp-block-post { flex: 1; }
.parresia-logo-ramp img { width: 100%; height: 64px; object-fit: contain; }

/* ---- Carrousel dots (déco statique) ---- */
.parresia-dots { display: flex; gap: 7px; justify-content: center; }
.parresia-dots span { width: 22px; height: 5px; border-radius: 3px; background: var( --wp--preset--color--neutral-300 ); }
.parresia-dots span.is-active { background: var( --wp--preset--color--secondary ); }

/* ---- Annonce : filet supérieur ---- */
.parresia-annonce-item { border-top: 3px solid var( --wp--preset--color--primary ); }

/* ---- Tab/étiquette (À la une, Masterclass) ---- */
.parresia-tab {
	display: inline-block;
	align-self: flex-start;
}

/* ---- Badge thématique Topics (OMNI / ORTHO) — bloc parresia-topics/topic-badge ----
   Couleur pilotée par la palette du topic actif : `primary` flippe rouge↔bleu
   via le Palette_Filter du plugin (SSR). Absent si le module est désactivé. */
.parresia-topics-badge {
	display: inline-block;
	line-height: 1;
	font-size: var( --wp--preset--font-size--px-11 );
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var( --wp--preset--color--neutral-0 );
	background: var( --wp--preset--color--primary );
	padding: var( --wp--preset--spacing--px-6 ) var( --wp--preset--spacing--px-11 );
	border-radius: 3px;
}

/* ---- Switcher thématique Topics (Omni / Ortho) — bloc parresia-topics/topic-switcher ----
   Calqué sur le segment Omni/Ortho du design (.seg) : pill bordée + pastille par
   topic. Bordure et pastille active en `primary` (flippe rouge↔bleu via le
   Palette_Filter). Liens SSR vers /switch, sans JS. */
.parresia-topics-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border: 1.5px solid var( --wp--preset--color--primary );
	border-radius: 18px;
}
.parresia-topics-switcher__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var( --wp--preset--font-size--px-12 );
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var( --wp--preset--color--neutral-900 );
}
.parresia-topics-switcher__btn::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --wp--preset--color--neutral-300 );
}
.parresia-topics-switcher__btn.is-active::before {
	background: var( --wp--preset--color--primary );
}

/* ---- Drawer spécialités (bloc parresia-topics/topic-drawer) ----
   Off-canvas en Popover API native : zéro JS, Échap + light-dismiss + top-layer
   gérés par le navigateur. Le burger vit dans la nav-row du header ; le panneau
   glisse depuis la gauche (340px, plein écran en mobile). Couleurs : navy
   structurel en `primary-light` (stable — `primary` est flippé rouge/bleu par
   topic via Palette_Filter), accent topic (switcher actif) en `primary`,
   rouge marque (« 365 », CTA abonnement) en `secondary`. */
.parresia-drawer__burger {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	align-items: center;
	width: 46px;
	height: 34px;
	border: 1px solid var( --wp--preset--color--neutral-300 );
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
	flex: none;
	padding: 0;
}
.parresia-drawer__burger span {
	width: 20px;
	height: 2px;
	background: var( --wp--preset--color--primary-light );
}
/* Picto « menu et recherche » : telephone seulement (voir plus bas). */
.parresia-drawer__burger-icon {
	display: none;
}

.parresia-drawer {
	margin: 0;
	inset: 0 auto 0 0;
	width: min( 340px, 100vw );
	height: 100dvh;
	max-height: 100dvh;
	border: 0;
	padding: 0;
	background: var( --wp--preset--color--neutral-50 );
	overflow-y: auto;
	transform: translateX( -100% );
	transition: transform 0.25s ease, display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}
.parresia-drawer:popover-open {
	display: flex;
	flex-direction: column;
	transform: translateX( 0 );
}
@starting-style {
	.parresia-drawer:popover-open {
		transform: translateX( -100% );
	}
}
.parresia-drawer::backdrop {
	background: rgba( 16, 24, 40, 0.45 );
}

/* Bandeau marque */
.parresia-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var( --wp--preset--color--primary-light );
}
.parresia-drawer__brand {
	font-size: var( --wp--preset--font-size--px-22, 22px );
	font-weight: 800;
	line-height: 1;
	color: var( --wp--preset--color--neutral-0 );
}
/* AFF-13 : sur le bandeau bleu du menu, le logo se lit en blanc d'un bloc.
   Le rouge de la marque, pose sur ce bleu nuit, sortait sombre sur sombre. */
.parresia-drawer__brand-accent {
	color: var( --wp--preset--color--neutral-0 );
}
.parresia-drawer__close {
	position: relative;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex: none;
}
.parresia-drawer__close::before,
.parresia-drawer__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: var( --wp--preset--color--neutral-0 );
}
.parresia-drawer__close::before { transform: translate( -50%, -50% ) rotate( 45deg ); }
.parresia-drawer__close::after { transform: translate( -50%, -50% ) rotate( -45deg ); }

/* Rangée switcher : segments pleine largeur sur bande grise */
.parresia-drawer__switcher {
	padding: 12px 14px;
	background: var( --wp--preset--color--neutral-100 );
}
.parresia-drawer__switcher .parresia-topics-switcher {
	display: flex;
	width: 100%;
	gap: 6px;
	border: 0;
	padding: 0;
	border-radius: 0;
}
.parresia-drawer__switcher .parresia-topics-switcher__btn {
	flex: 1;
	justify-content: center;
	padding: 10px 0;
	border-radius: 8px;
	font-size: var( --wp--preset--font-size--px-12, 12px );
}
/* §11 — sur son fond teinté à 9 %, l'accent plein tombe à 3,55:1. On prend sa
   variante foncée (`accent`, soit --c-rouge-h) : 4,9:1, AA tenu.
   Retour du 2026-10-13 : la bascule du tiroir ne recharge pas la page, les
   couleurs viennent donc du bouton (`--topic-*`, posées par le Switcher),
   celles de la page en repli. */
.parresia-drawer__switcher .parresia-topics-switcher__btn.is-active {
	background: color-mix( in srgb, var( --topic-primary, var( --wp--preset--color--primary ) ) 9%, var( --wp--preset--color--neutral-0 ) );
	color: var( --topic-accent, var( --wp--preset--color--accent, var( --wp--preset--color--primary ) ) );
}
.parresia-drawer__switcher .parresia-topics-switcher__btn.is-active::before {
	background: var( --topic-primary, var( --wp--preset--color--primary ) );
}

/* Liste des spécialités : rangées blanches, pastille colorée, chevron.
   `.parresia-drawer__row` = rangée de premier niveau (lien direct OU
   `<summary>` d'un accordéon natif `<details>` quand la catégorie a des
   sous-catégories — zéro JS). */

/* Le panneau porte une liste par univers, seule celle de l'univers actif est
   visible. Règle posée explicitement : une feuille d'auteur qui donnerait un
   `display` à `.parresia-drawer__nav` l'emporterait sur le `[hidden]` de la
   feuille du navigateur, et les deux listes s'afficheraient à la suite. */
.parresia-drawer__nav[hidden] {
	display: none;
}
.parresia-drawer__nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.parresia-drawer__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	background: var( --wp--preset--color--neutral-0 );
	font-size: var( --wp--preset--font-size--px-14, 14px );
	font-weight: 700;
	text-decoration: none;
	color: var( --wp--preset--color--primary-light );
	cursor: pointer;
	list-style: none;
}
.parresia-drawer__row::-webkit-details-marker { display: none; }
/* §6.1 — puces carrées, comme le Top 5 : la pastille ronde du drawer et le
   carré de la sidebar racontaient deux systèmes différents. */
.parresia-drawer__row::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: var( --r-etiquette );
	flex: none;
}
/* Retours du 2026-10-07 (I4) : le chevron annonce un sous-menu. Il ne se pose
   que sur le `<summary>` d'un accordéon ; une rangée en lien direct
   (Masterclass, Vidéos, Formations, Petites annonces) n'en porte pas. */
summary.parresia-drawer__row::after {
	content: "›";
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	color: var( --wp--preset--color--neutral-300 );
	transition: transform 0.2s ease;
}
/* Recette NAV-08 : la pastille prend la teinte de la RUBRIQUE, posee par la
   classe `is-rub-N` que le rendu PHP calcule a partir du slug.
   Elle suivait auparavant un cycle de huit couleurs par POSITION dans la liste,
   avec des hexadecimaux hors du design system. Deux consequences : la couleur
   d'une rubrique changeait des qu'une autre etait ajoutee ou masquee, et elle ne
   correspondait jamais a celle du TOP 5, qui cyclait de son cote sur cinq
   teintes. Le repli couvre les lignes sans rubrique, comme « Petites annonces ». */
.parresia-drawer__row::before { background: var( --rub, var( --c-rub-1 ) ); }

/* Accordéon ouvert : rangée parente teintée couleur topic, chevron tourné */
.parresia-drawer__group[open] > .parresia-drawer__row {
	color: var( --wp--preset--color--primary );
	background: color-mix( in srgb, var( --wp--preset--color--primary ) 7%, var( --wp--preset--color--neutral-0 ) );
}
.parresia-drawer__group[open] > .parresia-drawer__row::after {
	transform: rotate( 90deg );
}

/* Sous-catégories : liens indentés sur fond blanc, filets fins */
.parresia-drawer__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var( --wp--preset--color--neutral-0 );
}
.parresia-drawer__sub li + li {
	border-top: 1px solid var( --wp--preset--color--neutral-100 );
}
.parresia-drawer__sub a {
	display: flex;
	align-items: center;
	padding: 13px 18px 13px 38px;
	font-size: var( --wp--preset--font-size--px-13, 13px );
	font-weight: 600;
	text-decoration: none;
	color: var( --wp--preset--color--primary-light );
}
.parresia-drawer__sub a::after {
	content: "›";
	margin-left: auto;
	font-size: 16px;
	line-height: 1;
	color: var( --wp--preset--color--neutral-300 );
}

/* Pied : CTA abonnement + liens secondaires */
.parresia-drawer__footer {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 14px 16px 18px;
	border-top: 1px solid var( --wp--preset--color--neutral-200 );
	background: var( --wp--preset--color--neutral-50 );
}
/*
 * Recette NAV-07 : le CTA du burger passe au jaune du parcours abonnement.
 *
 * `home-dentaire365.css` pose la doctrine et ne souffre aucune exception :
 * `--c-jaune` est le token du parcours abonnement, « jaunes partout, paywall et
 * menu burger compris ». Ce bouton etait reste au rouge `secondary`, qui est la
 * couleur editoriale de marque, pas celle de l'abonnement.
 *
 * Le texte passe a l'encre : le jaune est clair, du blanc dessus tombe sous le
 * seuil de contraste.
 */
/*
 * Teinte de rubrique (recette NAV-08). Definie une seule fois ici, consommee
 * partout via `--rub` : le TOP 5 et le menu burger doivent montrer la meme
 * couleur pour la meme rubrique. La regle d'attribution est dans
 * `parresia_rubrique_couleur()`, cote PHP.
 */
.is-rub-1 { --rub: var( --c-rub-1 ); }
.is-rub-2 { --rub: var( --c-rub-2 ); }
.is-rub-3 { --rub: var( --c-rub-3 ); }
.is-rub-4 { --rub: var( --c-rub-4 ); }
.is-rub-5 { --rub: var( --c-rub-5 ); }

.parresia-drawer__subscribe {
	display: block;
	width: 100%;
	padding: 13px 0;
	border-radius: 8px;
	background: var( --c-jaune );
	color: var( --c-encre );
	font-size: var( --wp--preset--font-size--px-14, 14px );
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.parresia-drawer__subscribe:hover,
.parresia-drawer__subscribe:focus-visible {
	background: var( --c-jaune-h );
	color: var( --c-encre );
}
.parresia-drawer__footer > a:not( .parresia-drawer__subscribe ),
.parresia-drawer__login {
	font-size: var( --wp--preset--font-size--px-13, 13px );
	font-weight: 600;
	color: var( --wp--preset--color--primary-light );
	text-decoration: none;
}
/* « Se connecter » du drawer = <button> déclencheur Popover : reset. */
.parresia-drawer__login {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
}


/* ---- Top bar : copie mobile du switch topic masquée en desktop ----
   Le switch desktop vit dans `.topbar .brand` (collé au logo). Une 2e instance
   est posée dans `.main-nav-row` pour le mobile/tablette ; on la masque ici.
   Combinateur `>` : on ne vise QUE la copie directe, pas le switcher imbriqué
   du drawer (`.parresia-drawer__switcher .parresia-topics-switcher`). */
header .main-nav-row > .parresia-topics-switcher {
	display: none;
}

/* ---- Mobile + tablette portrait (≤1024) : la nav principale s'efface (le
   drawer prend le relais), la top bar se réorganise ---- */
@media ( max-width: 1024px ) {
	header .wp-block-navigation {
		display: none;
	}

	/* RESP-02, ligne 1 : plus de « Lire le magazine », le logo ferre a gauche,
	   a droite le picto de connexion et le bouton jaune S'abonner, comme la
	   version mobile du Point. La recherche descend en ligne 2, a cote du
	   burger. Le selecteur d'univers de la marque reste cache ici, sa copie
	   vit en ligne 2. */
	header .mag-btn {
		display: none;
	}
	/* M2 (audit du 2026-10-05) : en-tete de 154 px a 360 px de large. La
	   ligne 1 passe de 68 a 52 px (ses pictos de 44 px y tiennent) et la
	   marge de flux de 16 px entre les deux lignes saute : la bordure les
	   separe deja. */
	header .topbar {
		gap: 12px;
		height: 52px;
	}
	header .wrap:has(> .topbar) + .wp-block-group {
		margin-block-start: 0;
	}
	header .topbar .brand {
		min-width: 0;
	}
	/* Le logo cede la place aux actions : hauteur bornee et largeur plafonnee,
	   sinon son SVG de 229 px passait sous le picto de connexion a 390 px. */
	header .topbar .brand,
	header .topbar .brand .logo--svg {
		flex: 1 1 auto;
		min-width: 0;
	}
	header .topbar .brand .logo--svg img {
		height: 28px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}
	header .topbar .topbar-actions {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
		flex: none;
	}
	header .topbar .topbar-actions .icon-link[popovertarget="parresia-search-modal"] {
		display: none;
	}
	/* Le libelle est un noeud texte nu apres le SVG : eteint par la taille de
	   police, le picto garde la sienne. */
	header .topbar .topbar-actions .icon-link {
		font-size: 0;
		line-height: 0;
		gap: 0;
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
	}
	header .topbar .topbar-actions .icon-link svg {
		width: 24px;
		height: 24px;
	}
	header .topbar .topbar-actions .subscribe {
		padding: 9px 14px;
		font-size: 13px;
	}
	header .topbar .brand .parresia-topics-switcher {
		display: none;
	}

	/* RESP-03, ligne 2 : burger a gauche, la loupe juste a cote (modele picto
	   burger + loupe du Point), puis l'univers actif et le selecteur Omni /
	   Ortho. La loupe est le bouton de recherche de la copie d'actions posee
	   pour la barre epinglee, dont on ne garde que ce bouton. */
	header .main-nav-row {
		gap: 10px;
		flex-wrap: nowrap;
	}
	header .main-nav-row .parresia-drawer__burger {
		order: 0;
	}
	header .main-nav-row .nav-pin-actions {
		display: flex;
		order: 1;
		margin: 0;
		flex: none;
	}
	header .main-nav-row .nav-pin-actions .topbar-actions {
		display: flex;
	}
	header .main-nav-row .nav-pin-actions .icon-link[popovertarget="parresia-auth-modal"],
	header .main-nav-row .nav-pin-actions .subscribe {
		display: none;
	}
	header .main-nav-row .nav-pin-actions .icon-link {
		font-size: 0;
		line-height: 0;
		gap: 0;
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
		border: 1px solid var(--wp--preset--color--neutral-200);
		border-radius: 6px;
	}
	header .main-nav-row .nav-pin-actions .icon-link svg {
		width: 22px;
		height: 22px;
	}
	header .main-nav-row .parresia-topics-badge {
		order: 2;
	}
	/* Switch topic : copie directe uniquement (pas le switcher du drawer). */
	header .main-nav-row > .parresia-topics-switcher {
		display: flex;
		order: 3;
		margin-left: auto;
	}
}

/* Retours du 2026-10-09 : sur telephone, le contenu de l'en-tete est a 16 px
   des bords, comme le reste de la page. La marge globale du theme (spacing
   md, environ 38 px a 375 px) s'ajoutait aux 16 px des lignes `.wrap`. Le
   selecteur Omni / Ortho passe a 14 px, plus lisible au doigt, et le burger
   prend le picto « menu et recherche » du Point. */
@media (max-width:767px) {
	header.wp-block-template-part > header.wp-block-group {
		padding-inline: 0;
	}
	header .main-nav-row > .parresia-topics-switcher .parresia-topics-switcher__btn {
		font-size: 14px;
	}
	/* Burger : picto « menu et recherche » a la place des trois barres. */
	header .parresia-drawer__burger span {
		display: none;
	}
	header .parresia-drawer__burger .parresia-drawer__burger-icon {
		display: block;
		color: var( --wp--preset--color--neutral-900 );
	}
	/* La loupe voisine fait doublon : le picto annonce la recherche, et le
	   menu porte son propre champ de recherche. */
	header .main-nav-row .nav-pin-actions {
		display: none;
	}
}

/* ---- Navigation principale : couleur + état hover ----
   Base : navy #111F3F (neutre). Hover / focus : couleur du topic actif
   (`primary`, flippe rouge↔bleu via le Palette_Filter SSR) → la nav s'accentue
   à la couleur du topic en cours. Jamais souligné.
   La couleur est posée ICI en CSS, et NON via textColor sur le bloc
   navigation : sinon WP applique `.has-primary-color { color … !important }`
   sur tous les états, ce qui rendrait le hover impossible à surcharger sans
   `!important` (interdit). Avec la couleur en CSS, le :hover gagne par
   spécificité d'état. Voir DESIGN.md §Hovers & liens. */
/* WP core force `color:inherit` sur les liens nav via un sélecteur à DOUBLE
   classe (.wp-block-navigation-item__content.wp-block-navigation-item__content,
   spécificité 0,3,0). On reprend la même technique double-classe pour
   reprendre la main sans `!important`. */
header .wp-block-navigation a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #111F3F;
}
header .wp-block-navigation a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
header .wp-block-navigation a.wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

/* ---- Footer ----
   La base vient du CSS proto (home-dentaire365.css : .foot-logo,
   .foot-bottom). Ici uniquement les classes du markup WP qui n'existent pas
   dans le proto (.foot-links ≙ .foot-grid a, .foot-desc ≙ .foot-grid p) et
   la neutralisation du bleu `info` posé sur les liens par les styles
   globaux. Gris bleutés du proto en dur (teintes navy du fond). */
footer .foot-desc {
	max-width: 30ch;
	line-height: 1.5;
	color: #9aa4b8;
}
footer .foot-links a {
	display: block;
	padding: 5px 0;
	color: #aab3c5;
	text-decoration: none;
}
footer .foot-links a:hover {
	color: var( --wp--preset--color--neutral-0 );
}
footer .foot-bottom a {
	color: #8089a0;
	text-decoration: none;
}

/* ---- §6.1 — pas de sous-menu dans la navigation principale ----
   Décision du 28/07 : ni au survol, ni au clic. Les sous-rubriques sont déjà
   listées sous la barre de navigation par le bloc `parresia/rubrique-subnav`
   dès qu'on est sur la rubrique — un sous-menu ferait doublon. La navigation
   reste donc une liste plate de liens. */

/* ---- §11 — cibles tactiles ≥ 44px sur les commandes de l'en-tête ----
   Le visuel ne bouge pas : on n'agrandit que la zone atteignable au doigt. */
header .icon-link,
header .mag-btn,
.parresia-drawer__burger {
	min-height: 44px;
}

.wp-block-navigation .wp-block-navigation-item__content {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================
   §11 — ACCESSIBILITÉ
   ============================================================ */

/* ---- Focus visible sur tout élément interactif ----
   Le thème ne posait de focus que sur une poignée de boutons : partout
   ailleurs, un visiteur au clavier perdait sa position dès qu'il quittait un
   bouton jaune. `:where()` maintient la spécificité à zéro, si bien que les
   focus sur mesure déjà écrits (boutons du parcours abonnement, pavé du mur
   payant, étiquettes de fiche) continuent de l'emporter sur ce socle. */
:where( a[href], button, input, select, textarea, summary, [tabindex]:not( [tabindex="-1"] ) ):focus-visible {
	outline: 2px solid var( --c-encre );
	outline-offset: 2px;
}

/* Sur les fonds sombres, l'encre ne se voit pas : le trait passe au papier. */
:where( .nlbox, .hero-card, .videos, .sub-header, .videos-page .mc-search, footer ) :where( a[href], button, input ):focus-visible {
	outline-color: var( --c-papier );
}

/* Le champ de l'encart newsletter neutralisait son contour sans rien mettre à
   la place : au clavier, le focus y était simplement invisible. */
.nlbox input:focus-visible {
	outline: 2px solid var( --c-papier );
	outline-offset: 2px;
}

/* ---- Cibles tactiles ≥ 44px ----
   La règle s'applique aux commandes — boutons, pastilles, bascules — et non
   aux liens posés dans un bloc de texte, que le critère 2.5.5 dispense.
   La surface est étendue par pseudo-élément quand la maquette fixe une
   hauteur : le dessin reste celui validé, seule la zone atteignable grandit.
   C'est la technique déjà retenue pour « tout voir » (`.pill`, §5.1), reprise
   ici pour les boutons du référentiel, hauts de 40px.
   Le pseudo-élément est transparent et ne capte que le pointeur. */
.bt-abo,
.bt-rouge,
.bt-blanc,
.btn-red,
.subscribe,
.deposit-btn,
.more-btn a,
.billing-seg button,
.seg-plan button,
.lk,
.lk2,
.parresia-topics-switcher__btn,
.dots i {
	position: relative;
}
.bt-abo::after,
.bt-rouge::after,
.bt-blanc::after,
.btn-red::after,
.subscribe::after,
.deposit-btn::after,
.more-btn a::after,
.billing-seg button::after,
.seg-plan button::after,
.lk::after,
.lk2::after,
.parresia-topics-switcher__btn::after,
.dots i::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	transform: translateY( -50% );
	height: 44px;
	min-height: 100%;
}

/* La bascule Omni/Ortho fait 43px de large selon le libellé : le seuil vaut
   dans les deux sens. */
.parresia-topics-switcher__btn {
	min-width: 44px;
}

/* Listes de rubriques des rails (Top 5, Accès rapide) et liens du pied de
   page : ce sont des cibles de navigation, pas des liens dans un paragraphe.
   La marge verticale passe de la rangée au lien lui-même, sinon la rangée
   grandit sans que la zone cliquable suive. Les libellés et les filets ne
   bougent pas ; seule la hauteur des modules augmente. */
.list-red li {
	padding-block: 0;
}
.list-red li a {
	display: block;
	padding-block: 13px;
}

/* La puce suivait une position fixée sur l'ancienne hauteur de rangée : elle
   se recale sur le centre, qui ne dépend plus des marges. */
.list-red li::before {
	top: 50%;
	transform: translateY( -50% );
}

footer .foot-links a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* Pastilles du carrousel : 22 × 5px, inatteignables au doigt. La zone est
   étendue dans les deux sens, et l'écart entre pastilles suit — sans quoi
   deux zones voisines se recouvriraient et le mauvais volet s'ouvrirait. */
.dots {
	gap: 22px;
}
.dots i::after {
	inset-inline: -11px;
}

/* Choix de sondage : la case radio fait 13px, mais c'est l'étiquette entière
   qui est cliquable — c'est donc elle qu'on porte à 44px. */
.poll-choice {
	min-height: 44px;
}

/* Encart newsletter : champ et bouton pleine largeur, hauteur portée au seuil. */
.nlbox input,
.nlbox button {
	min-height: 44px;
}

/* ---- RESP-04 : blocs du menu lateral, recherche et encart magazine ----
   Deposes par le theme via `parresia/topics/drawer_blocks`, entre le
   selecteur d'univers et les rubriques. */
.parresia-drawer__block {
	padding: 12px 14px;
	border-bottom: 1px solid var( --wp--preset--color--neutral-100 );
	background: var( --wp--preset--color--neutral-0 );
}

.drawer-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var( --wp--preset--color--neutral-200 );
	border-radius: 6px;
	padding: 0 10px;
	background: var( --wp--preset--color--neutral-0 );
}

.drawer-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 11px 0;
	font-size: 14px;
	background: transparent;
	outline: none;
}

.drawer-search button {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 34px;
	border: 0;
	padding: 0;
	background: transparent;
	color: var( --wp--preset--color--neutral-700 );
	cursor: pointer;
}

.drawer-search button svg {
	width: 20px;
	height: 20px;
}

.drawer-mag__title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--neutral-700 );
}

.drawer-mag__row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.drawer-mag__cover {
	flex: 0 0 84px;
	display: block;
}

.drawer-mag__cover img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
}

.drawer-mag__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.drawer-mag__issue {
	margin: 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
}

.drawer-mag__period {
	margin: 0 0 4px;
	font-size: 12.5px;
	color: var( --wp--preset--color--neutral-700 );
}

/*
 * Le bouton et le lien partagent la largeur du plus large des deux : celle
 * d'Omni, quel que soit le titre du numéro posé au-dessus.
 */
.drawer-mag__actions {
	display: inline-grid;
	align-self: flex-start;
	gap: 4px;
}

.drawer-mag__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 6px;
	background: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--neutral-0 );
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.drawer-mag__link {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}