/**
 * Urbizen — guides (index, article, archive de catégorie)
 *
 * Feuille dédiée aux gabarits d'articles, chargée après urbizen-homepage.css
 * et urbizen-pages.css. Elle n'écrit que ce que ces deux-là ne donnent pas.
 *
 * POURQUOI SI PEU DE RÈGLES
 *
 * Les gabarits portent `urbizen-accueil urbizen-page urbizen-guides`. Les deux
 * premières classes sont les portées des feuilles existantes : les cartes
 * `.blog-preview-*` de l'accueil, le hero `.page-hero`, le fil d'ariane, les
 * boutons, `.wrap` et la typographie fonctionnent donc déjà. Réécrire une
 * grille de cartes aurait créé un second composant à maintenir, qui aurait
 * dérivé du premier à la première retouche. On réutilise, on n'imite pas.
 *
 * Ce qui reste ici : l'extrait et le lien de carte, que les cartes de l'accueil
 * n'ont pas (elles annoncent sans lier) ; la typographie du corps d'article ;
 * la pagination ; le pied d'article.
 *
 * Toutes les règles sont scopées `.urbizen-guides`, absente partout ailleurs.
 */

/* ===========================================================================
   0 · DEUX LARGEURS, DEUX JETONS, ET AUCUNE TROISIÈME
   ----------------------------------------------------------------------------
   Un guide fait cohabiter deux objets qui n'ont pas la même fonction : du texte
   courant, qui se lit ligne à ligne, et des planches techniques, qui se
   regardent. Les mesurer avec la même règle revient à sacrifier l'un à l'autre.
   D'où deux jetons, et deux seulement.

     --u-guide-col    A · la colonne de LECTURE
                      chapô du hero, corps de l'article, encadrés textuels,
                      sources, appel à l'action, retour à l'index.
     --u-guide-large  B · la largeur ÉDITORIALE
                      visuel d'en-tête, planches et schémas du corps,
                      tableaux de seuils, grille « À lire aussi ».

   POURQUOI PAS `ch`, QUI ÉTAIT LA VALEUR PRÉCÉDENTE

   `ch` vaut l'avance du glyphe « 0 » de la police COURANTE. Dans IBM Plex Sans
   elle fait 0,6 em (mesuré sur `ibm-plex-sans-latin.woff2` : 600 unités pour
   1000 par em). La valeur dépend donc de la taille de texte de l'élément qui
   la lit — et les deux éléments qui portaient `72ch` n'ont pas la même :

     .guide-corps  ·  font-size 17px  ·  72ch = 734,4 px
     .guide-cta    ·  font-size 16px  ·  72ch = 691,2 px

   Deux blocs qui devaient être alignés l'étaient donc à 43 px près. Le même
   jeton écrit deux fois ne suffit pas : il faut une unité qui ne dépende pas de
   l'endroit où on la lit. `rem` se résout toujours sur la racine, jamais sur le
   contexte local — c'est la seule qui tienne cette promesse.

   D'OÙ VIENT 37,5rem

   D'une mesure, pas d'une règle de pouce. Le corps de trois guides a été rendu
   dans Chrome avec IBM Plex Sans réellement chargée, et le nombre de signes de
   chaque ligne relevé caractère par caractère (déplacement d'un `Range`, saut
   de ligne détecté au changement de `top`), lignes finales de paragraphe
   exclues puisqu'elles sont partielles :

     36rem   576 px   médiane 74   quartiles 71 – 78
     37,5rem 600 px   médiane 77   quartiles 74 – 80      ← retenu
     39rem   624 px   médiane 81   quartiles 78 – 84
     42rem   672 px   médiane 87   quartiles 83 – 90
     46rem   736 px   médiane 96   quartiles 93 – 100     ← la valeur d'avant

   37,5rem est la seule largeur dont l'intervalle interquartile tienne
   entièrement dans les 70 à 80 signes visés. 656 à 672 px — l'ordre de grandeur
   attendu — donne 84 à 87 signes : la mesure tranche autrement que l'intuition.

   65rem POUR B

   C'est la bande utile du `.wrap` à partir de 1200 px de fenêtre
   (1120 − 2 × 40 = 1040 px). B ne l'élargit donc jamais : il la NOMME, pour que
   les planches puissent la réclamer explicitement au lieu de subir la colonne.
   Les schémas de ces guides sont dessinés à 840 px et portent des libellés de
   11 à 15 px : sous B ils tiennent leur taille naturelle, sous A ils étaient
   réduits à 706 px, et à 600 px ils tomberaient à 71 % — libellés à 8 px.
   ======================================================================== */

.urbizen-guides {
	--u-guide-col: 37.5rem;
	--u-guide-large: 65rem;
}

/* ===========================================================================
   1 · Index et archive — la grille
   ======================================================================== */

/* Non rendue par les patterns actuels : `guides-archive-entete.php` emploie
   `.lead`. La règle est conservée pour un chapô d'index à venir — mais elle
   prend le jeton, pour ne pas réintroduire une troisième largeur le jour où on
   s'en servira. */
.urbizen-guides .guides-intro {
	max-width: var(--u-guide-col);
	margin-top: 14px;
	color: var(--u-ink-soft);
	font-size: 16.5px;
}

/* La carte devient cliquable en entier. L'ancre couvre la carte plutôt que le
   seul titre : une cible de 335 × 300 px vaut mieux qu'une ligne de texte, et
   le titre reste le libellé annoncé grâce à `aria-labelledby`. */
.urbizen-guides .blog-preview-card {
	position: relative;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.urbizen-guides .blog-preview-card:hover {
	border-color: var(--u-line-strong);
	box-shadow: 0 1px 0 rgba(20, 35, 59, .04), 0 22px 44px -34px rgba(20, 35, 59, .5);
	transform: translateY(-2px);
}
.urbizen-guides .guide-lien::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--u-radius);
}
/* Le halo de focus doit entourer la CARTE, pas l'ancre invisible qui la couvre :
   sans cela, le contour se dessinerait sur le seul titre et le clavier perdrait
   de vue ce qu'il vient de sélectionner. */
.urbizen-guides .blog-preview-card:has(.guide-lien:focus-visible) {
	outline: 2px solid var(--u-brand);
	outline-offset: 3px;
}
.urbizen-guides .guide-lien:focus-visible { outline: none; }

.urbizen-guides .blog-preview-content { gap: 12px; }
.urbizen-guides .guide-extrait {
	margin-top: 2px;
	color: var(--u-ink-soft);
	font-size: 14.5px;
	line-height: 1.55;
}
/* La date reste discrète : sur un guide réglementaire, elle informe de la
   fraîcheur sans devenir un argument. */
.urbizen-guides .blog-preview-meta b {
	font-family: var(--u-font-mono);
	white-space: nowrap;
}

.urbizen-guides .guides-vide {
	margin-top: 26px;
	padding: 26px;
	border: 1px dashed var(--u-line-strong);
	border-radius: var(--u-radius);
	background: var(--u-surface);
	color: var(--u-ink-soft);
}

/* ===========================================================================
   2 · Pagination
   ======================================================================== */

.urbizen-guides .guides-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 34px;
}
.urbizen-guides .guides-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px : la même cible tactile que les contrôles de l'en-tête. */
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--u-line);
	border-radius: 10px;
	background: var(--u-surface);
	color: var(--u-ink);
	font-size: 14px;
	font-weight: 600;
	transition: border-color .15s, color .15s, background-color .15s;
}
.urbizen-guides .guides-pagination a.page-numbers:hover {
	border-color: var(--u-brand);
	color: var(--u-brand-dk);
	background: var(--u-brand-sf);
}
.urbizen-guides .guides-pagination .page-numbers.current {
	border-color: var(--u-brand);
	background: var(--u-brand);
	color: #fff;
}
.urbizen-guides .guides-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--u-ink-faint);
}
.urbizen-guides .guides-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--u-brand);
	outline-offset: 3px;
}

/* ===========================================================================
   3 · Article — en-tête et corps
   ======================================================================== */

/* L'AXE DE LA PAGE
   ----------------------------------------------------------------------------
   Mesuré avant reprise, sur une fenêtre de 1440 px (le `.wrap` fait alors
   1120 − 2×40 = 1040 px de contenu utile) :

     fil d'ariane, titre, chapô  ·  1040 px, calés à gauche du .wrap
     chapô du hero               ·   609 px (58ch à 17,5px), calé à gauche
     visuel d'en-tête            ·  1040 px, centré
     corps de l'article          ·   734 px, centré
     appel à l'action            ·   691 px, centré
     retour à l'index            ·  1040 px, calé à gauche

   Six blocs de lecture, quatre largeurs, trois alignements. Le titre commençait
   152 px à gauche de sa propre première phrase. Aucune de ces valeurs n'était
   fausse prise seule ; ensemble elles ne dessinaient aucune verticale.

   Tout ce qui se LIT prend donc le jeton et se centre : l'article a un axe, et
   un seul. Reste une exception, assumée : la grille « À lire aussi », qui n'est
   pas de la lecture mais une liste de cartes — elle garde la largeur de bande
   du `.wrap`, exactement comme la grille de l'index, pour que les deux pages
   présentent leurs cartes de la même façon. */
.urbizen-guides .guide-hero .wrap > :is(nav, div, h1, p) {
	max-width: var(--u-guide-col);
	margin-inline: auto;
}

.urbizen-guides .guide-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-bottom: 12px;
	font-family: var(--u-font-mono);
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.urbizen-guides .guide-hero-cat {
	color: var(--u-brand);
	font-weight: 600;
}
.urbizen-guides .guide-hero-date { color: var(--u-ink-faint); }

/* LE VISUEL D'EN-TÊTE
   Mesuré avant reprise : la figure allait de 200 à 1240 px quand les `.wrap` du
   hero et du corps allaient de 160 à 1280. Un premier passage l'avait ramenée à
   la largeur du `.wrap` ; elle dépassait donc encore de 152 px de chaque côté la
   colonne de texte qu'elle annonce. Elle prend maintenant le même jeton que le
   corps : elle prend la largeur éditoriale B, celle des planches, et se centre
   sur le même axe que le texte. Le débord négatif est conservé — c'est
   lui qui fait mordre la figure sur le bandeau et relie les deux zones au lieu
   de la laisser flotter entre elles. */
.urbizen-guides .guide-visuel {
	width: 100%;
	max-width: var(--u-guide-large);
	margin: clamp(-96px, -6vw, -48px) auto clamp(28px, 3.4vw, 44px);
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background: var(--u-surface-2);
	box-shadow: 0 2px 0 rgba(20, 35, 59, .04), 0 28px 56px -34px rgba(20, 35, 59, .45);
}
/* Le visuel est cadré, pas laissé à sa hauteur naturelle : une image 3/2 sur
   1140 px de large fait 760 px de haut et remplit l'écran à elle seule, en
   repoussant la première ligne du guide sous la ligne de flottaison. Le rapport
   large la ramène à une bande d'ouverture. */
/* Rapport fixe plutôt que hauteur maximale : la bande garde la même proportion
   quelle que soit l'image fournie, et le cadrage reste centré. */
.urbizen-guides .guide-visuel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center;
}
@media (max-width: 700px) {
	.urbizen-guides .guide-visuel { margin-top: clamp(-56px, -8vw, -32px); }
	.urbizen-guides .guide-visuel img { aspect-ratio: 3 / 2; }
}

/* UNE PIÈCE GRAPHIQUE N'EST PAS UNE PHOTOGRAPHIE
   Le cadrage ci-dessus vaut pour une image d'illustration : on perd du ciel,
   on ne perd rien. Sur une planche 1600 × 1131, `cover` en 21/9 mange 40 % de
   la hauteur — c'est-à-dire le cartouche Urbizen, la ligne d'échelle et les
   cotes basses, soit précisément ce que le guide demande au lecteur de
   regarder. Sept des dix-huit visuels sont dans ce cas ; ils sont posés
   entiers, sur le fond de la figure, qui leur sert de carton de montage.
   La bande reste calée en 16/9 plutôt que laissée au rapport naturel : à
   1140 px de large, une planche non contrainte ferait 806 px de haut et
   repousserait la première ligne du texte sous la ligne de flottaison — le
   défaut que le cadrage évitait au départ. */
.urbizen-guides .guide-visuel--planche img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
}
/* Sur mobile la largeur disponible est déjà l'exacte contrainte : la planche
   prend son rapport naturel, sans bandes perdues de part et d'autre. */
@media (max-width: 700px) {
	.urbizen-guides .guide-visuel--planche img {
		aspect-ratio: auto;
		height: auto;
	}
}

/* Même règle dans les cartes de l'index. La figure garde son rapport 3/2 —
   la grille doit rester régulière — mais la planche y est posée entière. */
.urbizen-guides .blog-preview-media--planche img { object-fit: contain; }

/* LA TRAME TECHNIQUE NE DESCEND PAS DANS L'ARTICLE
   `u-grid-bg` est posé sur le <body> par le thème : elle traverse donc toute la
   page. Sur l'accueil c'est l'identité ; derrière deux mille mots, c'est du
   bruit — et elle réapparaissait dans les interstices entre les blocs opaques.
   `main` reçoit donc la surface. Le hero garde la sienne, dessinée par
   `.page-hero::before` : l'effet est réservé au haut de page, comme voulu. */
.urbizen-guides main { background: var(--u-surface); }

/* Le corps d'un guide se lit sur une surface unie. La trame technique
   `u-grid-bg` fait l'identité de l'accueil et des pages courtes ; derrière deux
   mille mots, elle fatigue. Les pages internes emploient déjà `.sec-blanc` pour
   la même raison. */
.urbizen-guides .guide-contenu {
	background: var(--u-surface);
	border-top: 1px solid var(--u-line);
	border-bottom: 1px solid var(--u-line);
}

/* LE CORPS EST LE CADRE, PAS LA COLONNE
   `.guide-corps` prend la largeur éditoriale : c'est l'enveloppe dans laquelle
   les planches ont le droit de s'étendre. La colonne de lecture est posée un
   cran plus bas, sur les enfants de `.entry-content` (voir « L'ARCHITECTURE
   CONTRAINTE » plus bas) — c'est ce qui permet à un schéma de sortir du texte
   sans marge négative ni risque de débordement. */
.urbizen-guides .guide-corps {
	max-width: var(--u-guide-large);
	margin: 0 auto;
	color: var(--u-ink);
	font-size: 17px;
	line-height: 1.72;
}

/* L'ARCHITECTURE CONTRAINTE
   ----------------------------------------------------------------------------
   Tout enfant direct du contenu prend la colonne de lecture et se centre. C'est
   le défaut, et il est volontairement aveugle au type de bloc : un bloc
   Gutenberg ajouté demain sera lisible sans que personne ait à y penser.

   Les objets qui se REGARDENT sortent ensuite de la colonne, nommément. Ils ne
   « débordent » pas — ils s'étendent dans le cadre `.guide-corps`, qui vaut
   déjà B. Aucune marge négative, donc aucun risque de débordement horizontal à
   une largeur intermédiaire : c'est ce que la technique du `margin-left`
   négatif n'aurait pas garanti.

   Le tableau est du lot des objets larges, et c'est un écart assumé par rapport
   à la liste initiale : un tableau de seuils est un objet technique, pas du
   texte courant. À 600 px, ceux de ces guides passaient en défilement
   horizontal — un tableau qu'il faut faire glisser pour lire la colonne de
   droite ne se compare plus, et comparer est sa seule fonction. */
.urbizen-guides .guide-corps > *,
.urbizen-guides .guide-corps .entry-content > * {
	width: 100%;
	max-width: var(--u-guide-col);
	margin-inline: auto;
	box-sizing: border-box;
}
.urbizen-guides .guide-corps > :is(.wp-block-image, .wp-block-table),
.urbizen-guides .guide-corps .entry-content > :is(.wp-block-image, .wp-block-table) {
	max-width: var(--u-guide-large);
}
/* Le conteneur `.entry-content` est lui-même un enfant de `.guide-corps` : sans
   cette reprise il hériterait de la colonne, et tout ce qu'il contient avec
   lui — les planches comprises. Il reprend donc le cadre. */
.urbizen-guides .guide-corps > .entry-content { max-width: none; }

/* Une planche posée dans un cadre plus large qu'elle se calerait à gauche.
   Elle se centre : c'est l'axe de la page, pas celui du paragraphe. */
.urbizen-guides .guide-corps :is(img, .wp-block-image img) {
	display: block;
	margin-inline: auto;
}
/* LE SÉLECTEUR QUI NE MORDAIT PAS
   `wp:post-content` enveloppe tout le contenu dans un `.entry-content` : le
   `.guide-corps` n'a donc qu'UN enfant, et `> * + *` ne s'appliquait à rien.
   Mesuré : les paragraphes avaient 0 px de marge, haut comme bas. Les titres
   respiraient (sélecteur descendant), le texte non — d'où l'impression de
   page compacte et fade. On cible désormais le conteneur réel, tout en gardant
   l'ancien sélecteur pour un contenu qui ne passerait pas par ce bloc. */
.urbizen-guides .guide-corps > * + *,
.urbizen-guides .guide-corps .entry-content > * + * { margin-top: 1.15em; }
/* LES SECTIONS SE VOIENT
   Un guide de deux mille mots sans repère visuel se lit comme un mémo. Chaque
   H2 ouvre donc une section : un filet fin qui court sur la colonne, un espace
   franc au-dessus, et une barre verte courte — le même signe que l'« eyebrow »
   de l'accueil, pour que la marque se retrouve ici aussi. Le premier H2 n'a ni
   filet ni marge haute : il suit le chapô, il n'a rien à séparer. */
/* Spécificité alignée sur celle de la règle de rythme : sans le second
   sélecteur, `.entry-content > * + *` (trois classes) l'emportait sur
   `.guide-corps h2` (deux classes et un élément), et les sections perdaient
   leur respiration — mesuré à 34,5 px au lieu de 78. */
.urbizen-guides .guide-corps h2,
.urbizen-guides .guide-corps .entry-content > h2 {
	position: relative;
	margin-top: 2.6em;
	padding-top: 1.5em;
	border-top: 1px solid var(--u-line);
	color: var(--u-ink);
	font-size: clamp(24px, 2.5vw, 30px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.012em;
}
.urbizen-guides .guide-corps h2::before,
.urbizen-guides .guide-corps .entry-content > h2::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--u-brand);
	border-radius: 2px;
}
/* Aucune exception pour le premier H2 : le filet le détache du chapô, ce qui
   est exactement ce qu'on veut. La version précédente visait `:first-child`,
   qui ne pouvait de toute façon jamais correspondre — le premier enfant du
   contenu est le chapô, pas un titre. */
.urbizen-guides .guide-corps h3,
.urbizen-guides .guide-corps .entry-content > h3 {
	margin-top: 1.9em;
	color: var(--u-ink);
	font-size: clamp(18.5px, 1.85vw, 21.5px);
	font-weight: 600;
	line-height: 1.3;
}
.urbizen-guides .guide-corps h2 + p,
.urbizen-guides .guide-corps h3 + p { margin-top: .5em; }

.urbizen-guides .guide-corps a {
	color: var(--u-brand-dk);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.urbizen-guides .guide-corps a:hover { color: var(--u-brand); }

.urbizen-guides .guide-corps ul,
.urbizen-guides .guide-corps ol { padding-left: 1.35em; }
.urbizen-guides .guide-corps li + li { margin-top: .45em; }
.urbizen-guides .guide-corps ul { list-style: disc; }
.urbizen-guides .guide-corps ol { list-style: decimal; }
.urbizen-guides .guide-corps li::marker { color: var(--u-brand); }

.urbizen-guides .guide-corps strong { font-weight: 600; }

/* Les tableaux d'un guide portent des seuils et des surfaces : ils doivent
   pouvoir défiler seuls plutôt que d'élargir la page. */
.urbizen-guides .guide-corps .wp-block-table { overflow-x: auto; }
.urbizen-guides .guide-corps table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.urbizen-guides .guide-corps th,
.urbizen-guides .guide-corps td {
	padding: 11px 13px;
	border: 1px solid var(--u-line);
	text-align: left;
	vertical-align: top;
}
.urbizen-guides .guide-corps th {
	background: var(--u-surface-2);
	font-weight: 600;
}
.urbizen-guides .guide-corps td { font-variant-numeric: tabular-nums; }

.urbizen-guides .guide-corps blockquote {
	margin-left: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--u-brand);
	border-radius: 0 10px 10px 0;
	background: var(--u-brand-sf);
	color: var(--u-ink);
}
.urbizen-guides .guide-corps blockquote p { margin: 0; }
.urbizen-guides .guide-corps blockquote > * + * { margin-top: .6em; }

/* Les schémas techniques portent des cotes et des libellés de 12 à 17 px dans un
   dessin de 840 px de large. Ramenés à 354 px sur un téléphone, ces textes
   tombent à cinq pixels : le schéma est là, il ne se lit plus. On leur donne
   donc la même liberté qu'aux tableaux — une largeur minimale lisible, et un
   défilement horizontal contenu dans leur propre boîte, jamais dans la page. */
@media (max-width: 720px) {
	.urbizen-guides .guide-corps .wp-block-image {
		overflow-x: auto;
		/* Le défilement se voit : sans cette marge, rien n'indique qu'il reste
		   du dessin à droite. */
		padding-bottom: 6px;
	}
	.urbizen-guides .guide-corps .wp-block-image img {
		min-width: 640px;
		max-width: none;
	}
	.urbizen-guides .guide-corps .wp-block-image figcaption { min-width: 0; }
}

/* `height: auto` est indispensable : les schémas portent des dimensions
   intrinsèques pour ne pas s'écraser dans un <img>, et `max-width: 100%` seul
   les déformerait dès que la colonne devient plus étroite que 840 px. */
.urbizen-guides .guide-corps :is(img, .wp-block-image img) {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.urbizen-guides .guide-corps figcaption {
	margin-top: 8px;
	color: var(--u-ink-faint);
	font-size: 13.5px;
}

.urbizen-guides .guide-corps hr {
	margin-top: 2em;
	border: 0;
	border-top: 1px solid var(--u-line);
}

/* ===========================================================================
   4 · Pied d'article — appel à l'action et guides voisins
   ======================================================================== */

.urbizen-guides .guide-cta {
	width: 100%;
	max-width: var(--u-guide-col);
	margin: clamp(34px, 4vw, 48px) auto 0;
	padding: clamp(24px, 3vw, 32px);
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-top: 3px solid var(--u-brand);
	border-radius: var(--u-radius);
	background: linear-gradient(135deg, var(--u-surface) 0 72%, var(--u-brand-sf) 100%);
	box-shadow: var(--u-shadow-card);
}

/* Le premier CTA vit dans le contenu de l'article. Sa marge doit gagner sur
   la règle de rythme générique de `.entry-content`, sinon il colle au bloc de
   réponse qui le précède. Le second CTA est le pattern final du gabarit : les
   deux partagent exactement la même largeur et le même modèle de boîte. */
.urbizen-guides .guide-corps .entry-content > .guide-cta--inline {
	margin-top: 1.8em;
}
/* Le cartouche qui NOMME le service. Sans lui, le bloc s'ouvrait sur une
   question et le lecteur devait deviner qui la pose. Même graphie que les
   « eyebrow » de l'accueil et que la méta du hero : mono, capitales, interlettre
   ouvert — la marque parle toujours de la même voix. */
.urbizen-guides .guide-cta-marque {
	margin-bottom: 10px;
	color: var(--u-brand);
	font-family: var(--u-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.urbizen-guides .guide-cta h2 {
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.25;
}
.urbizen-guides .guide-cta .guide-cta-title {
	margin-top: 0;
	color: var(--u-ink);
	font-family: var(--u-font-title);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	line-height: 1.25;
}
.urbizen-guides .guide-cta p {
	margin-top: 10px;
	color: var(--u-ink-soft);
	font-size: 16px;
}

/* CE QUE LE SERVICE PRODUIT, EN TROIS LIGNES
   Le reset de la feuille d'accueil (`.urbizen-accueil *`) remet à zéro marge et
   retrait de toutes les listes : celle-ci est donc dessinée entièrement ici, et
   ne compte sur rien. Le marqueur est la même barre verte que celle des H2 du
   corps, en plus court — un signe de plus, pas un de nouveau. */
.urbizen-guides .guide-cta-points {
	margin-top: 16px;
	list-style: none;
	color: var(--u-ink);
	font-size: 15.5px;
	line-height: 1.55;
}
.urbizen-guides .guide-cta-points li {
	position: relative;
	padding-left: 22px;
}
.urbizen-guides .guide-cta-points li + li { margin-top: 9px; }
.urbizen-guides .guide-cta-points li::before {
	content: "";
	position: absolute;
	left: 0;
	/* Calée sur la hauteur de x plutôt que sur le haut de la ligne : la barre
	   se lit alors comme un tiret en tête de phrase, pas comme une puce
	   flottante. */
	top: .62em;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--u-brand);
}

.urbizen-guides .guide-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.urbizen-guides .guide-cta-actions :is(.btn, .wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--u-radius);
	background: var(--u-brand);
	box-shadow: none;
	color: #fff;
	font-family: var(--u-font-title);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .16s, box-shadow .16s, transform .12s;
}
.urbizen-guides .guide-cta-actions :is(.btn, .wp-block-button__link):hover {
	background: var(--u-brand-dk);
	box-shadow: 0 8px 18px -10px rgba(18, 138, 90, .7);
	color: #fff;
	transform: translateY(-1px);
}
.urbizen-guides .guide-cta-actions :is(.btn, .wp-block-button__link):active {
	transform: translateY(0);
}
.urbizen-guides .guide-cta-actions .wp-block-button { margin: 0; }

@media (max-width: 560px) {
	.urbizen-guides .guide-cta-actions,
	.urbizen-guides .guide-cta-actions .wp-block-button,
	.urbizen-guides .guide-cta-actions :is(.btn, .wp-block-button__link) {
		width: 100%;
	}
}

/* « À lire aussi » relève de la largeur éditoriale : ce sont des cartes, et
   elles doivent ressembler à celles de l'index — les rétrécir à la colonne de
   lecture les ramènerait à 190 px de large. Le décrochement avec l'appel à
   l'action est donc voulu ; le filet le dit, en annonçant « autre zone » là où
   l'œil lisait « mauvais alignement ». */
.urbizen-guides .guide-voisins {
	max-width: var(--u-guide-large);
	margin-top: clamp(40px, 5vw, 60px);
	padding-top: clamp(32px, 4vw, 44px);
	border-top: 1px solid var(--u-line);
}
.urbizen-guides .guide-voisins h2 {
	margin-bottom: 16px;
	font-size: clamp(19px, 1.9vw, 22px);
	font-weight: 600;
}

/* Le lien de retour partage l'axe du reste : sans cette ligne, il repartait au
   bord du `.wrap`, 152 px à gauche de l'appel à l'action qu'il suit. */
.urbizen-guides .guide-retour-ligne {
	max-width: var(--u-guide-col);
	margin-inline: auto;
}

.urbizen-guides .guide-retour {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 30px;
	min-height: 44px;
	color: var(--u-ink-soft);
	font-size: 14.5px;
	font-weight: 600;
}
.urbizen-guides .guide-retour:hover { color: var(--u-brand-dk); }
.urbizen-guides .guide-retour:focus-visible {
	outline: 2px solid var(--u-brand);
	outline-offset: 3px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.urbizen-guides .blog-preview-card { transition: none; }
	.urbizen-guides .blog-preview-card:hover { transform: none; }
}


/* ===========================================================================
   5 · Blocs éditoriaux du gabarit
   ----------------------------------------------------------------------------
   Ces classes sont celles du GABARIT, pas d'un article : tout guide à venir les
   emploie en posant `className` sur un bloc paragraphe. Trois formes, trois
   fonctions, et un code couleur constant — gris pour ce qui conditionne, vert
   pour ce qui conclut, encre pour ce qui nuance.
   ======================================================================== */

/* Ce qui conditionne un calcul : les hypothèses. Fond neutre, filet gris. */
.urbizen-guides .guide-corps .guide-hypotheses {
	margin-top: 1.6em;
	padding: 16px 20px;
	border-left: 3px solid var(--u-line-strong);
	border-radius: 0 10px 10px 0;
	background: var(--u-surface-2);
	color: var(--u-ink-soft);
	font-size: 15.5px;
	line-height: 1.6;
}
.urbizen-guides .guide-corps .guide-hypotheses strong { color: var(--u-ink); }

/* Ce qui conclut : le résultat. Filet vert, fond très pâle, texte encre. */
.urbizen-guides .guide-corps .guide-resultat {
	margin-top: 1.4em;
	width: 100%;
	padding: 16px 20px;
	box-sizing: border-box;
	border-left: 3px solid var(--u-brand);
	border-radius: 0 10px 10px 0;
	background: var(--u-brand-sf);
	color: var(--u-ink);
}
.urbizen-guides .guide-corps .guide-resultat strong { color: var(--u-brand-dk); }

/* Ce qui nuance : la variante si une hypothèse change. Discret, sans fond. */
.urbizen-guides .guide-corps .guide-variante {
	margin-top: .9em;
	padding-left: 20px;
	border-left: 2px dashed var(--u-line-strong);
	color: var(--u-ink-soft);
	font-size: 15.5px;
}

/* Les schémas : une vraie planche, pas une image posée dans le texte. */
.urbizen-guides .guide-corps .wp-block-image {
	margin-top: 1.9em;
	padding: 14px;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background: var(--u-surface);
	box-shadow: var(--u-shadow-card);
}
.urbizen-guides .guide-corps .wp-block-image figcaption {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--u-line);
	color: var(--u-ink-soft);
	font-size: 13.5px;
	line-height: 1.5;
}

/* La citation devient un « à retenir » : c'est son rôle dans ces guides. */
.urbizen-guides .guide-corps blockquote {
	position: relative;
	margin-top: 1.7em;
	padding: 20px 22px 20px 24px;
	border-left: 4px solid var(--u-brand);
	border-radius: 0 12px 12px 0;
	background: var(--u-brand-sf);
	color: var(--u-ink);
	font-size: 17.5px;
	line-height: 1.6;
}
.urbizen-guides .guide-corps blockquote p { font-weight: 500; }

/* Les sources : un encadré sobre, nettement détaché du corps. */
.urbizen-guides .guide-corps .guide-sources {
	margin-top: 2.2em;
	width: 100%;
	padding: 18px 22px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background: var(--u-surface-2);
	color: var(--u-ink-soft);
	font-size: 13.5px;
	line-height: 1.65;
}
.urbizen-guides .guide-corps .guide-sources strong {
	display: block;
	margin-bottom: 6px;
	color: var(--u-ink);
	font-family: var(--u-font-mono);
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.urbizen-guides .guide-corps .guide-sources a {
	color: var(--u-ink-soft);
	text-decoration-thickness: 1px;
}
.urbizen-guides .guide-corps .guide-sources a:hover { color: var(--u-brand-dk); }

/* Le trait de séparation avant les sources : discret, il ne coupe pas. */
.urbizen-guides .guide-corps hr { margin-top: 2.4em; border-top-color: var(--u-line); }

@media (max-width: 700px) {
	.urbizen-guides .guide-corps .guide-hypotheses,
	.urbizen-guides .guide-corps .guide-resultat { padding: 14px 16px; }
	.urbizen-guides .guide-corps .wp-block-image { padding: 10px; }
	.urbizen-guides .guide-corps blockquote { padding: 16px 18px; font-size: 16.5px; }
}

/* La demande de renseignements, sous les deux boutons. Elle occupe la place que
   tenait le lien de prestation avant que celui-ci ne passe en bouton principal.
   En lien simple et non en troisième bouton : trois appels à l'action de même
   poids ne hiérarchisent plus rien, et celui-ci s'adresse à qui hésite encore —
   c'est un recours, pas une alternative. */
.urbizen-guides .guide-cta-lien { margin-top: 14px; font-size: 14.5px; }
/* Mesuré à la recette : cette ancre faisait 20 px de haut de 834 px à 1440 px,
   quand les deux boutons au-dessus d'elle en font 44. C'est la troisième action
   du bloc, pas un lien dans une phrase : elle prend la même cible que ses
   voisines. Sous 700 px le libellé passe déjà sur deux lignes et l'atteignait
   de lui-même — la règle ne change rien là-bas. */
.urbizen-guides .guide-cta-lien a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--u-brand-dk);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.urbizen-guides .guide-cta-lien a:hover { color: var(--u-brand); }