/* ============================================================
   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 );
}

.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 );
}
.parresia-drawer__brand-accent {
	color: var( --wp--preset--color--secondary );
}
.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. */
.parresia-drawer__switcher .parresia-topics-switcher__btn.is-active {
	background: color-mix( in srgb, var( --wp--preset--color--primary ) 9%, var( --wp--preset--color--neutral-0 ) );
	color: var( --wp--preset--color--accent, var( --wp--preset--color--primary ) );
}
.parresia-drawer__switcher .parresia-topics-switcher__btn.is-active::before {
	background: 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). */
.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;
}
.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;
}
/* Cycle de pastilles colorées (pas de couleur par catégorie en data) */
.parresia-drawer__nav > ul > li:nth-child(8n+1) .parresia-drawer__row::before { background: #DF2318; }
.parresia-drawer__nav > ul > li:nth-child(8n+2) .parresia-drawer__row::before { background: #0f766e; }
.parresia-drawer__nav > ul > li:nth-child(8n+3) .parresia-drawer__row::before { background: #f87171; }
.parresia-drawer__nav > ul > li:nth-child(8n+4) .parresia-drawer__row::before { background: #1d4ed8; }
.parresia-drawer__nav > ul > li:nth-child(8n+5) .parresia-drawer__row::before { background: #d97706; }
.parresia-drawer__nav > ul > li:nth-child(8n+6) .parresia-drawer__row::before { background: #64748b; }
.parresia-drawer__nav > ul > li:nth-child(8n+7) .parresia-drawer__row::before { background: #3b82f6; }
.parresia-drawer__nav > ul > li:nth-child(8n+8) .parresia-drawer__row::before { background: #0d9488; }

/* 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 );
}
.parresia-drawer__subscribe {
	display: block;
	width: 100%;
	padding: 13px 0;
	border-radius: 8px;
	background: var( --wp--preset--color--secondary );
	color: var( --wp--preset--color--neutral-0 );
	font-size: var( --wp--preset--font-size--px-14, 14px );
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.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;
	}

	/* Top bar = uniquement « Lire le magazine » + logo sur une ligne.
	   Connexion / Recherche / S'abonner partent dans le drawer (mobile menu). */
	header .topbar-actions {
		display: none;
	}
	header .topbar .brand .parresia-topics-switcher {
		display: none;
	}

	/* Switch topic : affiché sur la ligne nav-row (drawer + topic en cours),
	   poussé tout à droite. Copie directe uniquement (pas le switcher du drawer). */
	header .main-nav-row > .parresia-topics-switcher {
		display: flex;
		margin-left: auto;
	}
}

/* ---- 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;
}