/*
Theme Name:   Intense Réunion
Theme URI:    https://www.intensereunion.fr
Description:  Thème du guide Intense Réunion. Enfant de GeneratePress : la
              présentation vit ici, la structure et les données vivent dans le
              plugin intense-reunion-core.
Author:       Intense Réunion
Template:     generatepress
Version:      0.1.0
Text Domain:  intense-reunion
*/

/* ==========================================================================
   Jetons de design
   Palette dérivée du logo : le bleu nuit des lettres, le turquoise du lagon,
   l'orange du volcan, le vert des remparts. Le fond n'est pas un gris neutre
   mais un sable très clair, qui réchauffe les grandes plages d'image.
   ========================================================================== */

:root {
	--nuit:          #0E3446;
	--nuit-2:        #16465C;
	--nuit-3:        #2A5B72;

	--lagon:         #17A2B4;
	--lagon-fonce:   #0E7F8E;
	--lagon-clair:   #E4F4F6;

	--brasier:       #F0761F;
	--brasier-fonce: #D25F0C;
	--brasier-clair: #FDEBDD;

	--fougere:       #4C8B3E;

	--sable:         #FBF8F3;
	--sable-2:       #F3EDE4;
	--blanc:         #FFFFFF;

	--encre:         #16272F;
	--encre-2:       #4C606A;
	--encre-3:       #7A8C94;
	--trait:         #E4DFD5;

	--ombre-carte:   0 1px 2px rgba(14, 52, 70, .05), 0 12px 28px -18px rgba(14, 52, 70, .35);
	--ombre-flottant:0 4px 12px rgba(14, 52, 70, .08), 0 24px 48px -24px rgba(14, 52, 70, .4);

	--rayon:         14px;
	--rayon-s:       8px;

	--titre:         "Outfit", ui-sans-serif, system-ui, sans-serif;
	--texte:         "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
	--script:        "Kaushan Script", "Outfit", cursive;

	--largeur:       1220px;
	--gouttiere:     clamp(20px, 5vw, 40px);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	font-family: var(--texte);
	font-size: 17px;
	line-height: 1.65;
	color: var(--encre);
	background: var(--sable);
}

h1, h2, h3, h4, .ir-titre {
	font-family: var(--titre);
	color: var(--nuit);
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
}

a { color: var(--lagon-fonce); }

:focus-visible {
	outline: 3px solid var(--lagon);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.ir-conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.ir-script {
	font-family: var(--script);
	font-weight: 400;
	letter-spacing: 0;
}

.ir-surtitre {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lagon-fonce);
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.ir-bouton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--titre);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 22px;
	border-radius: var(--rayon-s);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ir-bouton--brasier {
	background: var(--brasier);
	color: var(--blanc);
}

.ir-bouton--brasier:hover,
.ir-bouton--brasier:focus-visible {
	background: var(--brasier-fonce);
	color: var(--blanc);
}

.ir-bouton--contour {
	background: transparent;
	border-color: var(--brasier);
	color: var(--brasier-fonce);
}

.ir-bouton--contour:hover,
.ir-bouton--contour:focus-visible {
	background: var(--brasier-clair);
}

.ir-bouton--nuit {
	background: var(--nuit);
	color: var(--blanc);
}

.ir-bouton--nuit:hover,
.ir-bouton--nuit:focus-visible {
	background: var(--nuit-2);
	color: var(--blanc);
}

/* ==========================================================================
   En-tête — on habille la navigation de GeneratePress
   ========================================================================== */

.main-navigation,
.site-header {
	background: var(--blanc);
	border-bottom: 1px solid var(--trait);
}

.main-navigation .main-nav ul li a {
	font-family: var(--titre);
	font-weight: 500;
	font-size: 15px;
	color: var(--nuit);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--lagon-fonce);
	background: transparent;
}

.main-navigation .main-nav ul li.current-menu-item > a {
	box-shadow: inset 0 -3px 0 var(--brasier);
}

.ir-barre-menu {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 14px;
}

.ir-barre-menu__lien {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--titre);
	font-size: 14px;
	font-weight: 500;
	color: var(--encre-2);
	text-decoration: none;
	white-space: nowrap;
}

.ir-barre-menu__lien:hover { color: var(--nuit); }

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

/* Six entrées plus les raccourcis : sans ce resserrement, la barre déborde
   et les raccourcis passent à la ligne. */
.main-navigation .main-nav ul li a {
	padding-left: 14px;
	padding-right: 14px;
}

/* ==========================================================================
   Sections génériques
   ========================================================================== */

.ir-section { padding-block: clamp(56px, 8vw, 96px); }

.ir-section--sable { background: var(--sable-2); }
.ir-section--blanc { background: var(--blanc); }

.ir-section__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 34px;
}

.ir-section__titre {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 700;
	margin: 0;
}

.ir-section__lien {
	font-family: var(--titre);
	font-size: 15px;
	font-weight: 600;
	color: var(--lagon-fonce);
	text-decoration: none;
	white-space: nowrap;
}

.ir-section__lien:hover { text-decoration: underline; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer,
.ir-pied {
	background: var(--nuit);
	color: #B9CBD4;
}

.ir-pied a { color: #B9CBD4; text-decoration: none; }
.ir-pied a:hover { color: var(--blanc); }

.ir-pied__grille {
	display: grid;
	gap: 40px;
	padding-block: clamp(48px, 6vw, 72px);
	grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .ir-pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ir-pied__grille { grid-template-columns: 1.6fr repeat(4, 1fr); } }

.ir-pied__titre {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blanc);
	margin: 0 0 16px;
}

.ir-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }

.ir-pied__signature { font-size: 15px; max-width: 34ch; }

.ir-pied__bas {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Logo
   Le fichier envoyé fait 640 px de large pour un affichage à 320 : net sur
   écran Retina sans charger une image de 900 Ko.
   ========================================================================== */

.site-header .inside-header {
	padding-block: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-logo .header-image {
	max-height: 54px;
	width: auto;
}

@media (max-width: 768px) {
	.site-logo .header-image { max-height: 40px; }
}

/* En-tête sur deux étages centrés.
   GeneratePress, en structure « flexbox », place la navigation dans la même
   ligne que le logo. On force le retour à la ligne et on centre les deux
   étages : le logo au-dessus, la navigation et ses raccourcis en dessous. */

.site-header .inside-header {
	flex-wrap: wrap;
	row-gap: 2px;
}

.site-header .site-logo {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
}

.site-header .main-navigation:not(.mobile-menu-control-wrapper) {
	flex: 0 0 100%;
	background: transparent;
	border: 0;
}

.site-header .inside-navigation {
	justify-content: center;
	padding: 0;
}

.site-header .main-nav { flex: 0 1 auto; }

/* ==========================================================================
   Menu mobile
   GeneratePress dessine le bouton hamburger en blanc, couleur héritée de sa
   barre de navigation sombre par défaut. Sur notre en-tête blanc, il était
   invisible : présent, cliquable, mais introuvable à l'œil.
   ========================================================================== */

.menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
	color: var(--nuit);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
	color: var(--lagon-fonce);
}

@media (max-width: 768px) {

	/* Le panneau déroulé doit rester opaque : ouvert au-dessus du hero, un
	   fond transparent rendait les liens illisibles. */
	.site-header .main-navigation:not(.mobile-menu-control-wrapper) {
		background: var(--blanc);
		border-top: 1px solid var(--trait);
	}

	/* Le panneau va d'un bord à l'autre : on retire la marge du conteneur
	   et on la rend aux deux éléments qui restent visibles. */
	.site-header .inside-header { padding-left: 0; padding-right: 0; }

	.site-header .site-logo,
	.site-header .mobile-menu-control-wrapper { padding-inline: 20px; }

	.site-header .inside-navigation { padding: 0; }

	.main-navigation .main-nav ul li a {
		padding: 15px 20px;
		/* GeneratePress applique ici la hauteur de ligne de sa barre
		   horizontale — 60 px — qui donnait des lignes de 89 px de haut. */
		line-height: 1.4;
		border-bottom: 1px solid var(--trait);
	}

	.main-navigation .main-nav ul li.current-menu-item > a {
		box-shadow: inset 3px 0 0 var(--brasier);
	}

	/* Cibles tactiles : 44 px minimum. */
	.menu-toggle { min-height: 44px; min-width: 44px; }
}

/* ==========================================================================
   Fil d'Ariane — partagé par les articles, les auteurs et les fiches
   ========================================================================== */

.ir-fil {
	background: var(--blanc);
	border-bottom: 1px solid var(--trait);
	font-size: 13.5px;
}

.ir-fil ol {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
}

.ir-fil li { display: flex; align-items: center; gap: 10px; color: var(--encre-3); }

.ir-fil li:not(:last-child)::after {
	content: "›";
	color: var(--rule, var(--trait));
	color: var(--encre-3);
	opacity: .6;
}

.ir-fil a { color: var(--encre-2); text-decoration: none; }
.ir-fil a:hover { color: var(--lagon-fonce); text-decoration: underline; }
.ir-fil [aria-current] { color: var(--nuit); font-weight: 600; }


/* Le cœur du pied de page : l'emoji hérite de la taille du texte, on lui
   rend un poil d'air pour qu'il ne colle pas aux mots. */
.ir-pied__coeur {
	font-size: 1.05em;
	line-height: 1;
	margin-inline: 1px;
	vertical-align: -1px;
}

/* ==========================================================================
   FAQ — partagée par les articles, les communes et les fiches
   ========================================================================== */

.ir-faq { margin-top: 3em; }

.ir-faq__titre { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 0 0 18px; }

.ir-faq__liste {
	display: grid;
	gap: 10px;
}

.ir-faq__item {
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon-s);
}

.ir-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	font-family: var(--titre);
	font-size: 15.5px;
	font-weight: 500;
	color: var(--nuit);
	cursor: pointer;
	list-style: none;
}

.ir-faq__item summary::-webkit-details-marker { display: none; }

.ir-faq__chevron {
	flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--encre-3);
	border-bottom: 2px solid var(--encre-3);
	transform: rotate(45deg);
	transition: transform .18s ease;
	margin-top: -4px;
}

.ir-faq__item[open] .ir-faq__chevron { transform: rotate(-135deg); margin-top: 3px; }

.ir-faq__reponse {
	padding: 0 18px 18px;
	font-size: 15.5px;
	color: var(--encre-2);
}

.ir-faq__reponse > *:first-child { margin-top: 0; }


/* Une question par ligne, partout. Sur deux colonnes, les réponses de
   longueurs inégales laissaient des trous et l'ordre de lecture devenait
   ambigu : ce que l'on gagnait en hauteur, on le perdait en clarté. */

/* ==========================================================================
   Badges éditoriaux
   « Testé par nous » se distingue des autres : c'est une attestation, pas
   une appréciation. Couleur propre, coche, et toujours en tête.
   ========================================================================== */

.ir-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.ir-badge-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--blanc);
	color: var(--nuit);
	border: 1px solid var(--trait);
	font-family: var(--titre);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 5px 11px;
	border-radius: 100px;
	white-space: nowrap;
}

.ir-badge-label--teste {
	background: var(--lagon-fonce);
	border-color: var(--lagon-fonce);
	color: #fff;
}

.ir-badge-label--teste svg { color: #fff; flex: none; }

.ir-badges-fiche { margin: 0 0 18px; }

/* ==========================================================================
   Cartes
   Composant partagé par l'accueil, les hubs communes, « À lire aussi » et
   les pages auteur. Il vivait dans home.css, donc il n'était stylé que sur
   la page d'accueil : ailleurs, les cartes s'affichaient nues.
   ========================================================================== */

.ir-cartes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ir-carte__lien {
	display: grid;
	gap: 0;
	height: 100%;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	overflow: hidden;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ir-carte__lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }

.ir-carte__visuel {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--sable-2);
}

.ir-carte__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ir-carte__label {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--blanc);
	color: var(--nuit);
	font-family: var(--titre);
	font-size: 11.5px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 100px;
}

.ir-carte__corps { display: grid; gap: 4px; padding: 14px 16px 16px; }
.ir-carte__titre { font-family: var(--titre); font-size: 16px; color: var(--nuit); line-height: 1.25; }
.ir-carte__lieu  { font-size: 13.5px; color: var(--encre-3); }
.ir-carte__prix  { font-size: 14px; color: var(--encre-2); margin-top: 4px; }
.ir-carte__prix strong { color: var(--nuit); font-family: var(--titre); }


.ir-carte__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	display: flex;
}

.ir-carte__badges .ir-badge-label { box-shadow: 0 1px 3px rgba(14, 52, 70, .18); }

/* ==========================================================================
   Contenus servis par les gabarits par défaut de GeneratePress
   Les fiches sans gabarit dédié — randonnées, lieux, hébergements — passent
   encore par là. En attendant, elles méritent au moins une largeur de lecture
   correcte et la typographie du site : sans contrainte, le texte s'étalait
   sur 110 caractères par ligne.
   ========================================================================== */

.entry-header,
.entry-content,
.ir-badges-fiche {
	max-width: 72ch;
	margin-inline: auto;
}

.entry-title {
	font-family: var(--titre);
	font-size: clamp(2rem, 4.4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--nuit);
	margin: 0 0 14px;
}

.entry-content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--encre-2);
}

.entry-content > * + * { margin-top: 1.1em; }

.entry-content h2 {
	font-family: var(--titre);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 700;
	color: var(--nuit);
	margin-top: 2em;
}

.entry-content h3 {
	font-family: var(--titre);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--nuit);
	margin-top: 1.6em;
}

.entry-content a { color: var(--lagon-fonce); text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; display: grid; gap: 8px; }
.entry-content img { border-radius: var(--rayon); }

/* ==========================================================================
   Avertissement de terrain
   Présent sur les randonnées, cascades, bassins et sites naturels. Assez
   visible pour être lu, assez sobre pour ne pas crier au loup à chaque page.
   ========================================================================== */

.ir-avertissement {
	margin: 2em auto 0;
	padding: 17px 19px;
	background: #FFF9F0;
	border: 1px solid #F0D9B5;
	border-left: 3px solid #C87A1E;
	border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
	max-width: 72ch;
}

.ir-avertissement__titre {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--titre);
	font-size: .95rem;
	font-weight: 700;
	color: #7A4A0E;
	margin: 0 0 9px;
}

.ir-avertissement__titre svg { color: #C87A1E; flex: none; }

.ir-avertissement p {
	margin: 0 0 9px;
	font-size: 14px;
	line-height: 1.55;
	color: #6B5432;
}

.ir-avertissement strong { color: #4A3720; font-weight: 600; }

.ir-avertissement__liste {
	list-style: none;
	margin: 0 0 11px;
	padding: 0;
	display: grid;
	gap: 5px;
}

.ir-avertissement__liste li {
	position: relative;
	padding-left: 17px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6B5432;
	max-width: none;
}

.ir-avertissement__liste li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #C87A1E;
}

.ir-avertissement__regle {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid #F0D9B5;
	font-size: 13.5px;
	font-weight: 600;
	color: #7A4A0E;
}

/* ==========================================================================
   Repères d'une fiche lieu
   Ce que le lecteur cherche avant de partir : la hauteur, l'altitude, où se
   garer. Une liste de définitions, pas un tableau : la structure porte déjà
   le sens, et elle se replie proprement sur téléphone.
   ========================================================================== */

.ir-fiche-lieu {
	margin: 2.4em 0 0;
	padding: 22px 24px;
	background: var(--sable);
	border: 1px solid var(--trait);
	border-radius: var(--rayon-s);
	max-width: 72ch;
	margin-inline: auto;
}

.ir-fiche-lieu__titre {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--titre);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--nuit);
	margin: 0 0 16px;
}

.ir-fiche-lieu__titre svg { color: var(--lagon-fonce); flex: none; }

.ir-fiche-lieu__liste {
	margin: 0;
	display: grid;
	gap: 0;
}

.ir-fiche-lieu__ligne {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 8px 18px;
	padding: 9px 0;
	border-top: 1px solid var(--trait);
}

.ir-fiche-lieu__ligne:first-child { border-top: 0; padding-top: 0; }

.ir-fiche-lieu__ligne dt {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--encre-2);
}

.ir-fiche-lieu__ligne dd {
	margin: 0;
	font-size: 15px;
	color: var(--encre);
}

@media (max-width: 600px) {
	.ir-fiche-lieu { padding: 18px 18px; }
	.ir-fiche-lieu__ligne { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   Coordonnées GPS
   Un point se recopie, se dicte, se colle dans une application. Il ne se
   décore pas : le chiffre reste sélectionnable et lisible en plein soleil.
   ========================================================================== */

.ir-coordonnees {
	margin: 1.2em 0 0;
	padding: 20px 24px;
	background: var(--lagon-clair);
	border: 1px solid #C3E4E9;
	border-radius: var(--rayon-s);
	max-width: 72ch;
	margin-inline: auto;
}

.ir-coordonnees__titre {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--titre);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--nuit);
	margin: 0 0 12px;
}

.ir-coordonnees__titre svg { color: var(--lagon-fonce); flex: none; }

.ir-coordonnees__valeurs {
	margin: 0 0 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
}

.ir-coordonnees__valeurs code {
	font-size: 17px;
	font-weight: 600;
	color: var(--nuit);
	background: var(--blanc);
	border: 1px solid #C3E4E9;
	border-radius: var(--rayon-s);
	padding: 5px 11px;
	user-select: all;
}

.ir-coordonnees__dms {
	font-size: 14px;
	color: var(--encre-2);
	font-variant-numeric: tabular-nums;
}

.ir-coordonnees__liens {
	margin: 0 0 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.ir-coordonnees__liens a {
	font-size: 14px;
	font-weight: 600;
	color: var(--lagon-fonce);
	text-decoration: none;
	background: var(--blanc);
	border: 1px solid #C3E4E9;
	border-radius: 999px;
	padding: 5px 14px;
}

.ir-coordonnees__liens a:hover,
.ir-coordonnees__liens a:focus { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }

.ir-coordonnees__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--encre-2);
}

@media (max-width: 600px) {
	.ir-coordonnees { padding: 18px; }
	.ir-coordonnees__valeurs code { font-size: 16px; }
}

/* ==========================================================================
   Regard croisé
   Déclaré pour les communes, les lieux, les randonnées, les activités et les
   restaurants : le style appartient donc au thème, pas à la feuille d'une
   seule page. Quatrième fois que ce piège se referme — d'où le rappel ici.
   ========================================================================== */
.ir-regards__entete { text-align: center; margin-bottom: 34px; }
.ir-regards__entete p { color: var(--encre-2); margin: 10px 0 0; }

.ir-regards__grille { display: grid; gap: 22px; }

@media (min-width: 900px) { .ir-regards__grille { grid-template-columns: repeat(2, 1fr); } }

.ir-regard {
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-left: 3px solid var(--brasier);
	border-radius: var(--rayon);
	padding: 24px 26px;
}

.ir-regard--zoreil { border-left-color: var(--lagon); }

.ir-regard__entete { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.ir-regard__portrait { width: 48px; height: 48px; border-radius: 50%; }
.ir-regard__titre { font-size: 1.05rem; margin: 0; color: var(--brasier-fonce); }
.ir-regard--zoreil .ir-regard__titre { color: var(--lagon-fonce); }
.ir-regard__signature { margin: 2px 0 0; font-size: 13px; color: var(--encre-3); }

.ir-regard__citation {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--encre-2);
	font-style: italic;
}

.ir-regard__citation::before { content: "“"; color: var(--brasier); font-size: 1.4em; line-height: 0; margin-right: 2px; }
.ir-regard--zoreil .ir-regard__citation::before { color: var(--lagon); }

.ir-regard__points {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--trait);
	display: grid;
	gap: 12px;
}

@media (min-width: 520px) { .ir-regard__points { grid-template-columns: repeat(2, 1fr); } }

.ir-regard__points li { display: grid; gap: 2px; }
.ir-regard__points strong { font-family: var(--titre); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brasier); }
.ir-regard--zoreil .ir-regard__points strong { color: var(--lagon-fonce); }
.ir-regard__points span { font-size: 14px; color: var(--encre-2); line-height: 1.4; }