/*
Theme Name:   Intolérances GeneratePress
Theme URI:    https://intolerances.local/
Description:  Thème enfant GeneratePress pour intolerances-alimentaires.com. Contrôle via l'interface WordPress classique (Menus, Personnaliser, Widgets).
Author:       Philippe Menestret / Sitedit
Author URI:   https://sitedit.fr/
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  intolerances-generatepress
*/

/* =========================================================================
 * CHARTE GLOBALE
 * ===================================================================== */

/* Fil d'Ariane — affiché dans le bandeau violet, au-dessus du H1.
 * Hiérarchie par l'opacité : liens 0.85, séparateurs 0.5, page courante 0.7
 * (non cliquable). Tout est blanc sur le violet #A36C9E. */
.breadcrumb {
	margin: 0 0 16px;
}
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Exo 2", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}
.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.breadcrumb__lien {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.breadcrumb__lien:hover,
.breadcrumb__lien:focus {
	color: #ffffff;
	opacity: 1;
	text-decoration: underline;
}
.breadcrumb__courant {
	color: #ffffff;
	opacity: 0.7;
}
.breadcrumb__separateur {
	color: #ffffff;
	opacity: 0.5;
}

/* Tous les H3 en vert principal. GeneratePress n'expose pas de réglage de
 * couleur par niveau de titre (typography ne porte que la fonte), d'où cette
 * règle CSS. Sélecteur d'élément (spécificité 0-0-1) : les titres qui ont une
 * couleur définie via une classe la conservent — voir la liste des exceptions
 * dans le commentaire ci-dessous. */
h3 {
	color: #95B049;
}

/*
 * Exceptions assumées (couleur posée au niveau de la classe, donc prioritaire) :
 *   .home-chapitre__titre    → violet #A36C9E (accent voulu de la section 4)
 *   .mon-livre-sous-titre    → gris #575760  (rôle de sous-titre secondaire)
 *
 * .mon-livre-section-titre (« Quatrième de couverture », « Sommaire »,
 * « Extraits à télécharger ») n'est plus une exception : il suit désormais le
 * vert #95B049 de la charte.
 */

/* =========================================================================
 * Templates Single des CPT éditoriaux — .livre-* (livre) et .fait-chiffre-*
 * Structure partagée factorisée par sélecteurs groupés ; les spécificités
 * fait-chiffre (média souple, méta, badge, image complémentaire) sont plus bas.
 * Palette : vert #95B049 · violet #A36C9E · vert foncé #2E3929
 *           crème vert #F3F9ED (fond de sections, couleur de marque)
 * Sections pleine largeur via full-width-content ; contenu re-contenu par la
 * classe native .grid-container. Pas de hack vw.
 * ===================================================================== */

/* 0. Le <main> hérite d'un max-width 1200 de GeneratePress. On le libère pour
 * que les sections hero/related atteignent les bords de la fenêtre ; le contenu
 * reste contenu par les .grid-container internes (max-width 1200).
 * Le fond crème est posé ici (main pleine largeur) : il couvre ainsi la section
 * contenu bord à bord, .livre-body / .fait-chiffre-body étant contenus à 1200. */
.livre-single,
.fait-chiffre-single,
.temoignage-single,
.page-editorial,
.livres-archive,
.fait-chiffre-archive,
.temoignage-archive {
	background-color: #F3F9ED;
}
.full-width-content .site-main.livre-single,
.full-width-content .site-main.fait-chiffre-single,
.full-width-content .site-main.temoignage-single,
.full-width-content .site-main.page-editorial,
.full-width-content .site-main.home-main,
.full-width-content .site-main.livres-archive,
.full-width-content .site-main.fait-chiffre-archive,
.full-width-content .site-main.temoignage-archive {
	width: 100%;
	max-width: 100%;
}

/* 1. Bandeau haut ------------------------------------------------------- */
.livre-hero,
.fait-chiffre-hero,
.temoignage-hero {
	/* Aplat violet accent. Pour une image de fond, l'ajouter en DERNIÈRE couche,
	   précédée d'un voile de lisibilité :
	   background-image: linear-gradient(rgba(163, 108, 158, 0.68), rgba(163, 108, 158, 0.72)), url('.../image.jpg'); */
	background-color: #A36C9E;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 34px 0;
}
.livre-hero__title,
.fait-chiffre-hero__title,
.temoignage-hero__title,
.page-editorial-hero__title {
	margin: 0;
	text-align: left;
	color: #ffffff;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.15;
}

/* 2. Contenu principal (1 colonne par défaut) -------------------------- */
.livre-body,
.fait-chiffre-body,
.temoignage-body {
	padding-top: 60px;
	/* Padding bas réduit et marge basse annulée : avec le padding haut de
	 * .*-related, ces deux valeurs cumulées formaient un vide de 166px entre le
	 * lien « Retour » et la section « Autres … ». */
	padding-bottom: 30px;
	margin-bottom: 0;
}

/* 3. Colonne média (couverture livre / image à la une fait) ------------ */
.livre-body__cover,
.fait-chiffre-body__media,
.temoignage-body__media {
	margin-bottom: 40px;
	text-align: center;
}
.livre-body__cover .livre-cover {
	max-width: 300px;
	height: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Image à la une d'un fait : largeur fixée par la colonne, hauteur libre.
 * Pas de max-height : combiné à max-width il briderait la hauteur sans ajuster
 * la largeur, ce qui déforme les images portrait. */
.fait-chiffre-body__media img,
.temoignage-body__media img {
	width: 100%;
	height: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 4. Contenu droite ---------------------------------------------------- */
.livre-pdf {
	margin-top: 30px;
}
.livre-back,
.fait-chiffre-back,
.temoignage-back {
	margin-top: 40px;
	/* Annule la marge basse par défaut du <p> (1.5em ≈ 25px) : c'est le padding
	 * des blocs qui doit gérer l'espacement, pas le dernier paragraphe. */
	margin-bottom: 0;
}
/* Couleur et soulignement gérés par la charte des liens éditoriaux
 * (section « LIENS ÉDITORIAUX » en fin de fichier). Ne reste ici que la
 * typographie propre au lien de retour. */
.livre-back a,
.fait-chiffre-back a,
.temoignage-back a {
	font-size: 17px;
	font-weight: 500;
}

/* 4b. Spécifique fait-chiffre : méta (auteur • date), badge, CTA, image --- */
.fait-chiffre-meta {
	margin-bottom: 14px;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 15px;
}
/* Pastille de type (fait-chiffre et témoignage).
 * Fond BLANC + filet vert : le fond crème d'origine (#F3F9ED) est devenu
 * identique à celui des pages depuis l'uniformisation des fonds, ce qui rendait
 * la pastille totalement invisible. Règle de base partagée : la correction
 * couvre d'un coup les 3 points de rendu (carte d'archive témoignage, single
 * témoignage, single fait-chiffre). */
.fait-chiffre-badge,
.temoignage-badge {
	display: inline-block;
	margin-bottom: 20px;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: #ffffff;
	border: 1px solid #95B049;
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}
.fait-chiffre-cta {
	margin-top: 30px;
}
.fait-chiffre-extra-image {
	margin-top: 30px;
}
.fait-chiffre-extra-image img {
	max-width: 100%;
	height: auto;
}

/* 5. Section basse ----------------------------------------------------- */
.livre-related,
.fait-chiffre-related,
.temoignage-related {
	background-color: #F3F9ED;
	/* Haut réduit (30px) : il s'ajoutait aux 60px du bloc précédent. Le bas
	 * reste généreux, c'est la dernière respiration avant le footer. */
	padding: 30px 0 60px;
}
.livre-related__title,
.fait-chiffre-related__title,
.temoignage-related__title {
	margin: 0 0 40px;
	text-align: center;
	color: #95B049;
	font-weight: 600;
}

/* 6. Grille (1 colonne par défaut) ------------------------------------- */
.livre-related__grid,
.fait-chiffre-related__grid,
.temoignage-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

/* 7. Carte ------------------------------------------------------------- */
.livre-card,
.fait-chiffre-card,
.temoignage-card {
	min-width: 0; /* évite qu'un item de grille refuse de rétrécir (débordement) */
	background-color: #ffffff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.livre-card:hover,
.fait-chiffre-card:hover,
.temoignage-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.livre-card__link,
.livre-card__link:hover,
.livre-card__link:focus,
.fait-chiffre-card__link,
.temoignage-card__link,
.fait-chiffre-card__link:hover,
.temoignage-card__link:hover,
.fait-chiffre-card__link:focus,
.temoignage-card__link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}
.livre-card__cover,
.fait-chiffre-card__cover,
.temoignage-card__cover {
	display: block;
	margin-bottom: 15px;
	text-align: center;
}
.livre-card__img,
.fait-chiffre-card__img,
.temoignage-card__img {
	max-width: 100%;
	max-height: 250px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.livre-card__title,
.fait-chiffre-card__title,
.temoignage-card__title {
	display: block;
	text-align: center;
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.4;
}

/* 7b. Drapeau de nationalité de l'auteur -------------------------------- */
/* Classes NEUVES, propres au livre : aucune des règles groupées sur les trois
 * CPT ci-dessus n'est modifiée, les cartes fait-chiffre et témoignage sont donc
 * hors d'atteinte. */

/* Wrapper de couverture, partagé par l'archive et les cartes « Autres livres ».
 * inline-block : il épouse exactement l'image, alors que .livres-archive__cover-link
 * et .livre-card__cover sont en display:block + text-align:center et occupent
 * toute la largeur de la colonne. C'est lui, et lui seul, qui sert de référence
 * au positionnement absolu du drapeau. */
.livre-cover-wrap {
	position: relative;
	display: inline-block;
	line-height: 0; /* supprime l'espace de descendante sous l'image inline */
}

/* Drapeau en incrustation sur les cartes (archive et « Autres livres »). */
.livre-drapeau {
	position: absolute;
	right: 6px;
	bottom: 6px;
	/* 32px : multiple de 4 qui donne un 4:3 exact (32 × 24) avec les fichiers
	 * 80 × 60, et donc des attributs width/height entiers côté HTML. */
	width: 32px;
	height: auto;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
/* Le liseré blanc n'est pas cosmétique : sans lui, un drapeau français ou
 * norvégien disparaît sur une couverture claire. */

/* Drapeau de la ligne de méta du single. Seul, sans nom de pays écrit à côté :
 * le nom vit dans l'attribut alt. vertical-align évite que le drapeau ne repose
 * sur la ligne de base du libellé, ce qui le décalerait vers le haut.
 * Filet gris (et non blanc comme sur les cartes) : ici le fond est le crème de
 * la page, pas une couverture. */
.livre-nationalite__drapeau {
	width: 24px;
	height: auto;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 2px;
}

/* Bloc de méta de la colonne de gauche du single (CPT livre).
 *
 * Le motif à deux colonnes de .mon-livre-meta (largeur fixe + space-between) a
 * été ABANDONNÉ ici. Il suppose une largeur de média connue, ce qui est vrai
 * sur la page « Mon livre » (une seule couverture) mais faux sur le CPT : les
 * couvertures y font de 199 à 239 px de large selon les livres. Un bloc de
 * largeur fixe débordait donc de la couverture, du libellé à gauche et du
 * drapeau à droite.
 *
 * Ici chaque ligne se dimensionne sur son contenu et se centre sous la
 * couverture — aucun débord possible, quelle que soit la largeur réelle.
 *
 * Colonne flex sur le <ul>, et non des <li> en inline-flex : les lignes à venir
 * (éditeur, parution, ISBN) s'empileront au lieu de se suivre sur une même
 * ligne, tout en restant chacune centrée et de largeur automatique. */
.livre-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.livre-meta li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #e0e8d6;
}
.livre-meta li:last-child {
	border-bottom: 0;
}
.livre-meta__label {
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 15px;
}
/* text-align retiré avec le space-between : l'alignement est désormais l'affaire
 * du flex de la ligne, plus celle de la valeur. */
.livre-meta__value {
	color: #333333;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
}

/* Tablette ≥ 768px ----------------------------------------------------- */
@media (min-width: 768px) {
	.livre-hero,
	.fait-chiffre-hero,
	.temoignage-hero { padding: 40px 0; }
	.livre-hero__title,
	.fait-chiffre-hero__title,
	.temoignage-hero__title,
	.page-editorial-hero__title { font-size: 34px; }
	.livre-related__grid,
	.fait-chiffre-related__grid,
	.temoignage-related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop ≥ 1024px ----------------------------------------------------- */
@media (min-width: 1024px) {
	.livre-hero,
	.fait-chiffre-hero,
	.temoignage-hero { padding: 46px 0; }
	.livre-hero__title,
	.fait-chiffre-hero__title,
	.temoignage-hero__title,
	.page-editorial-hero__title { font-size: 38px; }

	.livre-body,
	.fait-chiffre-body,
	.temoignage-body {
		display: flex;
		align-items: flex-start;
		gap: 40px;
	}
	.livre-body__cover,
	.fait-chiffre-body__media,
	.temoignage-body__media {
		flex: 0 0 30%;
		margin-bottom: 0;
	}
	.livre-body__content,
	.fait-chiffre-body__content,
	.temoignage-body__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.livre-related__grid,
	.fait-chiffre-related__grid,
	.temoignage-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
 * Templates Archive des CPT éditoriaux — .livres-archive et .fait-chiffre-archive
 * Listing éditorial : bandeau boxed (placeholder + overlay), grille séparée
 * par un filet gris pâle, SANS card/ombre. Structure factorisée ; la méta
 * auteur/date des cartes fait-chiffre est ajoutée plus bas.
 * ===================================================================== */

.livres-archive,
.fait-chiffre-archive,
.temoignage-archive {
	padding-bottom: 60px;
}

/* Bandeau pleine largeur, collé au header (même rendu que les pages
 * éditoriales) : le <main> est libéré par full-width-content, le contenu est
 * re-contenu à 1200 par .*-archive__hero-inner. --------------------------- */
.livres-archive__hero,
.fait-chiffre-archive__hero,
.temoignage-archive__hero {
	/* La marge basse est posée d'un seul endroit : voir le bloc
	 * « ÉCART SOUS LE BANDEAU » en fin de fichier. */
	border-radius: 0;
	/* Aplat violet accent. Pour une image de fond, l'ajouter en DERNIÈRE couche,
	   précédée d'un voile : linear-gradient(rgba(163,108,158,.62), rgba(163,108,158,.66)), url('...'); */
	background-color: #A36C9E;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.livres-archive__hero-inner,
.fait-chiffre-archive__hero-inner,
.temoignage-archive__hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* Le <main> étant pleine largeur, on re-contient le contenu à 1200.
 * Les intros d'archive en sont exclues : elles sont contenues à 800 plus bas,
 * comme les autres zones de texte éditorial du site.
 * .form-temoignage en est exclu aussi : c'est une bande pleine largeur qui
 * gère elle-même son conteneur interne. */
.livres-archive__grid,
.fait-chiffre-archive__grid,
.temoignage-archive__grid,
.livres-archive > .navigation,
.fait-chiffre-archive > .navigation,
.temoignage-archive > .navigation {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.livres-archive__title,
.fait-chiffre-archive__title,
.temoignage-archive__title {
	margin: 0;
	text-align: left;
	color: #ffffff;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.15;
}

/* Grille éditoriale (1 colonne par défaut) -------------------------------- */
.livres-archive__grid,
.fait-chiffre-archive__grid,
.temoignage-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

/* Une entrée : filet séparateur, pas d'ombre ------------------------------ */
/* Base commune aux cartes des 3 archives. */
.livres-archive__card,
.fait-chiffre-archive__card,
.temoignage-archive__card {
	min-width: 0;
}

/* Livre et Fait-chiffre : pas d'encadré, mais un séparateur discret sous chaque
 * carte pour aérer les lignes de la grille. Uniquement border-bottom — surtout
 * pas les 4 côtés, qui redonneraient un cadre. */
.livres-archive__card,
.fait-chiffre-archive__card {
	padding-bottom: 30px;
	border-bottom: 1px solid #e6e6e6;
}

/* Témoignage UNIQUEMENT : filet vert sur toutes les pages de pagination.
 * Le padding intérieur est ici (et pas dans la base) car il n'a de sens que
 * pour une carte encadrée. */
.temoignage-archive__card {
	padding: 24px;
	border: 1px solid #95B049;
	border-radius: 5px;
}
.livres-archive__cover-link,
.fait-chiffre-archive__cover-link,
.temoignage-archive__cover-link {
	display: block;
	margin-bottom: 18px;
	text-align: center;
	text-decoration: none;
}
.livres-archive__cover,
.fait-chiffre-archive__cover,
.temoignage-archive__cover {
	max-width: 100%;
	max-height: 260px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.livres-archive__card-title,
.fait-chiffre-archive__card-title,
.temoignage-archive__card-title {
	margin: 0 0 12px;
	text-align: center;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
}
/* Les titres de carte suivent la charte des liens éditoriaux (fin de fichier) :
 * violet #A36C9E, souligné au survol seulement. */
/* Méta auteur • date des cartes fait-chiffre (sous le titre). */
.fait-chiffre-archive__card-meta {
	margin: 0 0 10px;
	text-align: center;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 14px;
}
.livres-archive__excerpt,
.fait-chiffre-archive__excerpt,
/* Extrait tronqué à 4 lignes : les 3 cartes gardent une hauteur comparable
 * quelle que soit la longueur du témoignage. Le line-clamp s'applique au <p>
 * généré par the_excerpt(), pas au conteneur (sinon la troncature est ignorée).
 * text-overflow n'a pas d'effet avec -webkit-box : les points de suspension
 * sont ajoutés automatiquement. Conservé car inoffensif. */
.temoignage-archive__excerpt {
	font-family: "Source Serif 4", serif;
	line-height: 1.6;
	margin-bottom: 12px;
}
.temoignage-archive__excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================================
 * Single Témoignage — mise en page sans photo
 * Le témoignage n'a plus de colonne média : le contenu passe sur une largeur
 * de lecture éditoriale (800px), comme les autres zones de texte du site.
 * ===================================================================== */
.temoignage-body--sans-media .temoignage-body__content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Type de témoin : icône + badge sur une même ligne. */
.temoignage-type {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}
.temoignage-type-icone {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Couleur posée par le CONTEXTE d'affichage, pas par l'icône : le SVG reste
 * en currentColor et donc réutilisable ailleurs avec une autre teinte. */
.temoignage-type .temoignage-type-icone {
	color: #A36C9E;
}
/* Badge agrandi (~+50 % par rapport aux 13px de base). Le fond blanc et le
 * filet vert viennent de la règle de base partagée : rien à redéclarer ici. */
.temoignage-badge--large {
	margin-bottom: 0;
	padding: 7px 18px;
	font-size: 19px;
}
.livres-archive__excerpt p,
.fait-chiffre-archive__excerpt p,
.temoignage-archive__excerpt p {
	margin: 0;
}
/* CTA « Lire la suite » : vrai bouton violet, identique sur les 3 archives.
 * Sélecteurs groupés plutôt qu'une classe commune : les templates existants
 * gardent leurs classes BEM, aucun markup à modifier. */
.livres-archive__more,
.fait-chiffre-archive__more,
.temoignage-archive__more {
	display: inline-block;
	margin-top: 4px;
	padding: 12px 22px;
	border-radius: 5px;
	background-color: #A36C9E;
	color: #ffffff;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.livres-archive__more:hover,
.livres-archive__more:focus,
.fait-chiffre-archive__more:hover,
.temoignage-archive__more:hover,
.fait-chiffre-archive__more:focus,
.temoignage-archive__more:focus {
	background-color: #8B5C86;
	color: #ffffff;
	text-decoration: none;
}
.livres-archive__empty,
.fait-chiffre-archive__empty,
.temoignage-archive__empty {
	padding: 40px 0;
	text-align: center;
}

/* Tablette ≥ 768px : 2 colonnes ------------------------------------------- */
@media (min-width: 768px) {
	.livres-archive__hero-inner,
	.fait-chiffre-archive__hero-inner,
	.temoignage-archive__hero-inner { padding: 44px 20px; }
	.livres-archive__title,
	.fait-chiffre-archive__title,
	.temoignage-archive__title { font-size: 34px; }
	.livres-archive__grid,
	.fait-chiffre-archive__grid,
	.temoignage-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop ≥ 1024px : 3 colonnes ------------------------------------------- */
@media (min-width: 1024px) {
	.livres-archive__hero-inner,
	.fait-chiffre-archive__hero-inner,
	.temoignage-archive__hero-inner { padding: 48px 20px; }
	.livres-archive__title,
	.fait-chiffre-archive__title,
	.temoignage-archive__title { font-size: 38px; }
	.livres-archive__grid,
	.fait-chiffre-archive__grid,
	.temoignage-archive__grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
 * Spécifique Témoignages — identité du témoin, citation en exergue, intro
 * ===================================================================== */

/* Nom / prénom du témoin (ou « Témoignage anonyme »). */
.temoignage-nom {
	margin: 0 0 4px;
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.temoignage-precision {
	margin: 0 0 14px;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 15px;
}

/* Citation mise en exergue : plus grande que le corps, vert principal. */
.temoignage-citation {
	margin: 0 0 24px;
	padding: 0 0 0 18px;
	border: 0;
	border-left: 3px solid #95B049;
	color: #95B049;
	font-family: "Source Serif 4", serif;
	font-size: 21px;
	font-style: italic;
	line-height: 1.45;
	quotes: none;
}
.temoignage-citation--card {
	margin-bottom: 14px;
	padding-left: 14px;
	font-size: 17px;
}

/* Introduction de l'archive (contenu de la page « Témoignages » en brouillon). */
/* Intros d'archive (contenu des pages brouillon) — même gabarit de lecture
 * que les autres zones de texte éditorial du site : 800px centrés. */
.livres-archive__intro,
.fait-chiffre-archive__intro,
.temoignage-archive__intro {
	max-width: 800px;
	margin: 0 auto 45px;
	padding-left: 20px;
	padding-right: 20px;
	font-family: "Source Serif 4", serif;
	line-height: 1.7;
}
.livres-archive__intro > :last-child,
.fait-chiffre-archive__intro > :last-child,
.temoignage-archive__intro > :last-child {
	margin-bottom: 0;
}

.temoignage-archive__grille-titre {
	max-width: 1200px;
	margin: 0 auto 44px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
	color: #95B049;
	font-weight: 600;
	font-size: 30px;
}

/* Badge de type-témoin : +2px dans les cartes d'archive uniquement.
 * La règle de base .temoignage-badge est partagée avec .fait-chiffre-badge et
 * sert aussi au single — d'où ce sélecteur scopé plutôt qu'un changement global. */
.temoignage-archive__card .temoignage-badge {
	font-size: 15px;
}

/* Identité dans les cartes d'archive. */
.temoignage-archive__nom {
	margin: 0 0 2px;
	text-align: center;
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-size: 20px;
	font-weight: 600;
}
.temoignage-archive__precision {
	margin: 0 0 10px;
	text-align: center;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
}

/* =========================================================================
 * Formulaire de soumission de témoignage — .form-temoignage-*
 * ===================================================================== */

/* Bande blanche pleine largeur : détache le formulaire du fond crème de
 * l'archive. Le formulaire lui-même est recentré à 800px (plus lisible qu'une
 * ligne de saisie de 1200px de large). */
/* Bande du formulaire.
 *
 * Fond repassé au crème de la page : le bloc blanc découpait la page Témoigner
 * en deux panneaux alors que le formulaire est la suite directe du texte
 * d'introduction, pas une section à part.
 *
 * Espacement haut : la marge et le padding d'origine (36 + 50, auxquels
 * s'ajoutait le padding bas du bloc de contenu) creusaient 116px sous le
 * dernier texte. Tout est ramené à un seul contributeur, le padding haut, pour
 * que la valeur soit lisible et ajustable d'un seul endroit. */
.form-temoignage {
	margin-top: 0;
	padding: 48px 0 50px;
	background-color: #F3F9ED;
}
.form-temoignage__inner {
	/* Surcharge le max-width 1200 de .grid-container (classe portée par le même
	 * élément dans parts/form-temoignage.php).
	 *
	 * Gabarit calqué sur .page-editorial-content — mêmes 800px, même padding
	 * latéral de 20px — pour que le titre, le chapeau et la carte du formulaire
	 * s'alignent exactement sur le texte d'introduction qui les précède. Le
	 * padding est déclaré explicitement plutôt que laissé à .grid-container,
	 * dont la valeur varie selon la largeur. */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
/* Titre de section de la page Témoigner, remonté au-dessus du texte
 * d'introduction. Il reprend la présentation qu'avait le titre du formulaire,
 * lequel passe au rang inférieur juste en dessous. */
.temoigner-titre {
	margin: 0 0 26px;
	color: #95B049;
	font-weight: 600;
	font-size: 30px;
}

/* Titre du bloc formulaire — désormais un h3, subordonné au h2 ci-dessus :
 * la taille descend en conséquence. */
.form-temoignage__title {
	margin: 0 0 12px;
	color: #95B049;
	font-weight: 600;
	font-size: 22px;
}
.form-temoignage__intro {
	/* Plus de bride à 640px : le chapeau occupe la même largeur que le titre
	 * au-dessus et que la carte en dessous. */
	margin: 0 0 30px;
	font-family: "Source Serif 4", serif;
	line-height: 1.6;
}
.form-temoignage__form {
	/* Largeur de saisie confortable, centrée dans le bloc de 800px.
	 * Cette règle sert AUSSI le formulaire de contact, qui porte la même classe
	 * (voir parts/form-contact.php) et la neutralise par .form-contact__form. */
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* Carte blanche du formulaire de témoignage, sur le modèle exact de
 * .form-contact : mêmes fond, rayon, ombre et paddings.
 *
 * Sélecteur descendant volontaire. .form-temoignage__form est aussi la classe
 * du formulaire de CONTACT, lequel vit déjà dans sa propre carte
 * (section.form-contact) : sans ce scope, il se retrouverait avec une carte
 * dans une carte. Le formulaire de contact n'est jamais à l'intérieur d'une
 * section .form-temoignage, la portée est donc sûre. */
.form-temoignage .form-temoignage__form {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 34px 30px;
	background-color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.form-temoignage__field {
	margin: 0 0 22px;
}
.form-temoignage__label {
	display: block;
	margin-bottom: 6px;
	color: #2E3929;
	font-family: "Source Serif 4", serif;
	font-weight: 600;
}
.form-temoignage__required {
	color: #A36C9E;
}
.form-temoignage__input,
.form-temoignage__select,
.form-temoignage__textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfd8c4;
	border-radius: 3px;
	background-color: #ffffff;
	color: #000000;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
}
.form-temoignage__input:focus,
.form-temoignage__select:focus,
.form-temoignage__textarea:focus {
	outline: 2px solid #95B049;
	outline-offset: 1px;
	border-color: #95B049;
}
.form-temoignage__textarea {
	min-height: 180px;
	line-height: 1.6;
	resize: vertical;
}
.form-temoignage__aide {
	display: block;
	margin-top: 6px;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 14px;
}
.form-temoignage__field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: "Source Serif 4", serif;
	line-height: 1.5;
}
.form-temoignage__field--checkbox input {
	margin-top: 4px;
	flex: 0 0 auto;
}
.form-temoignage__field--checkbox a {
	color: #A36C9E;
}

/* Champ conditionnel masqué (« Précisez », révélé pour le type « Autre »).
 * Filet de sécurité : l'attribut [hidden] du HTML est masquant par défaut, mais
 * n'importe quelle règle de display sur .form-temoignage__field le neutraliserait
 * silencieusement — et le champ redeviendrait visible ET tabulable. */
.form-temoignage__field[hidden] {
	display: none;
}

/* Honeypot : hors écran, jamais visible ni focusable. */
.form-temoignage__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-temoignage__actions {
	margin: 30px 0 0;
}
.form-temoignage__submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Messages de retour : succès en vert principal, erreur en rouge sobre. */
.form-temoignage__message {
	margin-top: 20px;
	font-family: "Source Serif 4", serif;
	font-size: 17px;
	line-height: 1.5;
}
.form-temoignage__message:empty {
	margin-top: 0;
}
.form-temoignage__message--succes {
	padding: 16px 18px;
	border-left: 3px solid #95B049;
	background-color: #ffffff;
	color: #2E3929;
	font-weight: 600;
}
.form-temoignage__message--erreur {
	padding: 16px 18px;
	border-left: 3px solid #B3261E;
	background-color: #ffffff;
	color: #B3261E;
}

/* Tablette ≥ 768px ----------------------------------------------------- */
@media (min-width: 768px) {
	/* Padding haut maintenu à 48px : c'est lui, et lui seul, qui règle
	 * l'écart entre le texte d'introduction et le titre du formulaire. */
	.form-temoignage {
		padding: 48px 0 60px;
	}
	/* 40px comme .form-contact au-delà de 768px. */
	.form-temoignage .form-temoignage__form {
		padding: 40px;
	}
	.temoigner-titre {
		font-size: 34px;
	}
	.form-temoignage__title {
		font-size: 24px;
	}
	.temoignage-archive__grille-titre {
		margin-bottom: 56px;
		font-size: 34px;
	}
	.temoignage-citation {
		font-size: 23px;
	}
}

/* =========================================================================
 * Template éditorial des pages — .page-editorial-*
 * Bandeau (padding plus court que les CPT, adaptatif au sous-titre), image
 * à la une optionnelle, contenu en colonne de lecture ~800px sur fond crème.
 * ===================================================================== */

/* Bandeau : fond partagé avec les CPT, mais padding propre (plus court). */
.page-editorial-hero {
	/* Aplat violet accent (même traitement que les bandeaux de CPT). */
	background-color: #A36C9E;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 30px 0;
}
.page-editorial-hero--with-subtitle {
	padding: 38px 0;
}
.page-editorial-hero__subtitle {
	margin: 12px 0 0;
	max-width: 760px;
	color: rgba(255, 255, 255, 0.85);
	font-family: "Source Serif 4", serif;
	font-style: italic;
	font-size: 19px;
	line-height: 1.5;
}

/* Image à la une : contenue à 1200, hauteur plafonnée, coins arrondis. */
.page-editorial-media {
	margin-top: 35px;
	margin-bottom: 5px;
}
.page-editorial-media__img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: 6px;
}

/* Contenu : colonne de lecture centrée sur le fond crème (hérité du main). */
.page-editorial-body {
	padding: 60px 0;
}
.page-editorial-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
	font-family: "Source Serif 4", serif;
	line-height: 1.7;
}
.page-editorial-content > :first-child {
	margin-top: 0;
}
.page-editorial-content > :last-child {
	margin-bottom: 0;
}

/* Tablette / desktop ≥ 768px ------------------------------------------- */
@media (min-width: 768px) {
	.page-editorial-hero {
		padding: 40px 0;
	}
	.page-editorial-hero--with-subtitle {
		padding: 46px 0;
	}
	.page-editorial-hero__subtitle {
		font-size: 21px;
	}
	.page-editorial-media__img {
		height: 440px;
	}
	.page-editorial-body {
		padding: 75px 0;
	}
}

/* =========================================================================
 * Page « Mon livre » (fiche produit) — .mon-livre-*
 * Bandeau et fond crème réutilisés du template éditorial (.page-editorial).
 * ===================================================================== */

/* Fiche : 2 colonnes (couverture + méta / contenu) sur le fond crème du main. */
.mon-livre-fiche {
	padding-top: 60px;
	padding-bottom: 60px;
}
.mon-livre-couverture {
	display: block;
	width: 100%;
	max-width: 350px;
	height: auto;
	margin: 0 auto 28px;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Bloc métadonnées : label Exo 2 500, valeur Source Serif 4. */
.mon-livre-meta {
	max-width: 350px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.mon-livre-meta li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid #e0e8d6;
}
.mon-livre-meta li:last-child {
	border-bottom: 0;
}
.mon-livre-meta__label {
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 15px;
}
.mon-livre-meta__value {
	color: #333333;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
	text-align: right;
}

/* Colonne de contenu. */
.mon-livre-titre {
	margin: 0 0 6px;
	color: #2E3929;
	font-weight: 600;
	font-size: 30px;
	line-height: 1.25;
}
.mon-livre-sous-titre {
	margin: 0 0 24px;
	color: #575760;
	font-weight: 500;
	font-size: 21px;
	line-height: 1.35;
}
.mon-livre-resume {
	margin: 0 0 32px;
	padding-left: 18px;
	border-left: 3px solid #A36C9E;
	color: #A36C9E;
	font-family: "Source Serif 4", serif;
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
}
.mon-livre-resume p {
	margin: 0 0 10px;
}
.mon-livre-resume p:last-child {
	margin-bottom: 0;
}
/* Aligné sur la charte globale des H3 (vert #95B049). La couleur est répétée
 * ici plutôt que supprimée : la règle porte aussi marge, graisse et taille, et
 * l'expliciter évite de croire à un oubli. */
.mon-livre-section-titre {
	margin: 30px 0 12px;
	color: #95B049;
	font-weight: 600;
	font-size: 22px;
}
.mon-livre-wysiwyg {
	font-family: "Source Serif 4", serif;
	line-height: 1.7;
}
.mon-livre-wysiwyg :last-child {
	margin-bottom: 0;
}

/* Extraits à télécharger : intégrés à la colonne de contenu, sous le sommaire.
 * Le titre est un .mon-livre-section-titre ordinaire ; il ne reste ici que la
 * disposition des boutons, alignés à gauche comme le reste de la colonne et
 * passant à la ligne au besoin. */
.mon-livre-extraits__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.mon-livre-extrait {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.mon-livre-extrait__icon {
	display: inline-flex;
}
.mon-livre-extrait__label {
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
}

/* Vignettes de la colonne de gauche : grille 2×2 sous les métadonnées.
 * Volontairement petites et non cliquables (aucun agrandissement au clic) :
 * elles illustrent, elles ne se consultent pas. La largeur suit celle de la
 * couverture et du bloc méta pour garder la colonne alignée. */
.mon-livre-vignettes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 350px;
	margin: 24px auto 0;
}
.mon-livre-vignette {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* Lightbox maison. */
.ilb-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background-color: rgba(20, 26, 18, 0.9);
}
.ilb-overlay.is-open {
	display: flex;
}
.ilb-image {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ilb-close {
	position: absolute;
	top: 18px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.ilb-close:hover,
.ilb-close:focus {
	background-color: rgba(255, 255, 255, 0.25);
}
body.ilb-lock {
	overflow: hidden;
}

/* Lecteur vidéo de la lightbox. Le conteneur est présent dans le DOM dès le
 * chargement, mais VIDE : l'<iframe> n'y est injectée qu'au clic, et retirée
 * à la fermeture (une iframe seulement masquée continuerait de jouer).
 *
 * Largeur : min() de trois bornes — 92% de la fenêtre, la largeur de confort,
 * et 145vh qui, au ratio 16/9, garde la hauteur sous ~81vh. Le lecteur ne
 * déborde donc jamais, y compris sur une fenêtre basse en paysage. */
.ilb-image[hidden],
.ilb-player[hidden] {
	display: none;
}
.ilb-player {
	position: relative;
	width: min(92vw, 1100px, 145vh);
	border-radius: 4px;
	background-color: #000000;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.ilb-player::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.ilb-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
}

/* Responsive ≥ 1024px : fiche 2 colonnes (30 / 70). */
@media (min-width: 1024px) {
	.mon-livre-fiche {
		display: flex;
		align-items: flex-start;
		gap: 50px;
	}
	.mon-livre-fiche__aside {
		flex: 0 0 30%;
	}
	.mon-livre-fiche__main {
		flex: 1 1 auto;
		min-width: 0;
	}
	.mon-livre-couverture,
	.mon-livre-meta,
	.mon-livre-vignettes {
		margin-left: 0;
		margin-right: 0;
	}
}

/* =========================================================================
 * Formulaire de contact — .form-contact-*
 * Réutilise les champs .form-temoignage__* ; se présente en carte blanche
 * (contraste sur le fond crème de la page éditoriale).
 * ===================================================================== */
.form-contact {
	margin: 10px 0 0;
	padding: 34px 30px;
	background-color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.form-contact__form {
	max-width: none;
}

@media (min-width: 768px) {
	.form-contact {
		padding: 40px 40px;
	}
}

/* =========================================================================
 * Footer du site — .site-footer-*
 * Zone 1 : identité + 2 menus, 3 colonnes sur fond vert principal.
 * Zone 2 : copyright centré sur fond vert foncé.
 * ===================================================================== */

/* Zone 1 — widgets ----------------------------------------------------- */
.site-footer-widgets {
	background-color: #95B049;
	padding: 45px 0;
}
.site-footer-widgets__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 35px;
}

.site-footer-logo .custom-logo {
	width: auto;
	max-width: 190px;
	height: auto;
}
.site-footer-baseline {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: "Source Serif 4", serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
}

/* Menus (colonnes 2 et 3) : liens Exo 2 blancs, sobres. */
.site-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer-menu li {
	margin: 0 0 10px;
}
.site-footer-menu li:last-child {
	margin-bottom: 0;
}
.site-footer-menu a {
	color: rgba(255, 255, 255, 0.92);
	font-family: "Exo 2", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.site-footer-menu a:hover,
.site-footer-menu a:focus {
	color: #ffffff;
	text-decoration: underline;
}

/* Zone 2 — copyright --------------------------------------------------- */
.site-footer-copyright {
	background-color: #2E3929;
	padding: 18px 0;
}
.site-footer-copyright__text {
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	font-family: "Source Serif 4", serif;
	font-size: 15px;
}

/* Desktop ≥ 768px : 3 colonnes ---------------------------------------- */
@media (min-width: 768px) {
	.site-footer-widgets {
		padding: 58px 0;
	}
	.site-footer-widgets__inner {
		grid-template-columns: 1.5fr 1fr 1fr;
		gap: 40px;
		align-items: start;
	}
}

/* =====================================================================
 * PAGE D'ACCUEIL (front-page.php) — préfixe .home-*
 * Bandes de sections pleine largeur (body.full-width-content), contenu
 * re-contenu à ~1200px par .grid-container. Mobile-first.
 * ===================================================================== */

/* Bouton violet réutilisable (autonome, indépendant des styles GP). */
.home-btn {
	display: inline-block;
	padding: 13px 30px;
	background-color: #A36C9E;
	color: #ffffff;
	font-family: "Exo 2", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}
.home-btn:hover,
.home-btn:focus {
	background-color: #8B5C86;
	color: #ffffff;
}

/* Garde-fou : les décors absolus ne créent pas de scroll horizontal. */
.home-main {
	overflow-x: hidden;
}

/*
 * Conteneur centré des sections (1200px).
 * GeneratePress redéfinit .grid-container en max-width:100% ; on ne s'appuie
 * donc pas dessus et on utilise ce conteneur maison, autonome et prévisible.
 */
.home-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/*
 * Sections collées les unes aux autres : seuls les paddings créent l'espace.
 *
 * Cette liste fait foi : toute nouvelle section de l'accueil doit y être
 * AJOUTÉE, et non neutralisée par une règle isolée ailleurs dans la feuille.
 * Sans cela GeneratePress lui applique son `.site-main > * { margin-bottom:
 * 20px }` (assets/css/main.css) et une bande de fond de page de 20px
 * apparaît sous la section.
 */
.home-hero,
.home-promesses,
.home-videos,
.home-alert,
.home-chapitres,
.home-accompagner {
	margin: 0;
}

/* --- Section 1 · Hero ------------------------------------------------- */
.home-hero {
	position: relative;
	overflow: hidden;
	background-color: #F3F9ED;
	padding: 50px 0;
}
.home-hero__inner {
	position: relative;
	z-index: 1;
}
.home-hero__title {
	margin: 0 0 24px;
	font-weight: 600;
	font-size: 34px;
	line-height: 1.15;
	color: #000000;
}
.home-hero__title-2 {
	color: #95B049;
}
.home-hero__resume {
	margin: 0 0 18px;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
	line-height: 1.6;
	color: #2E3929;
}
.home-hero__signature {
	margin: 0 0 26px;
	font-family: "Source Serif 4", serif;
	font-weight: 600;
	color: #2E3929;
	text-align: right;
}
.home-hero__actions {
	margin: 0;
}
.home-hero__media {
	margin-top: 24px;
	text-align: center;
}
.home-hero__cover {
	/* width 100% + height auto : remplit la colonne sans déformer le ratio.
	 * Sur mobile, max-width borne la largeur ; le parent la centre. */
	width: 100%;
	height: auto;
	max-width: 260px;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Décors SVG décoratifs (masqués sur mobile). */
.home-hero__decor {
	display: none;
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.home-hero__decor svg {
	display: block;
	width: 100%;
	height: 100%;
}
.home-hero__decor--leaf {
	top: -18px;
	right: 7%;
	width: 120px;
	height: 120px;
	opacity: 0.18;
	transform: rotate(-12deg);
}
.home-hero__decor--leaf svg {
	fill: #95B049;
	stroke: #eef6e3;
}
.home-hero__decor--berry {
	bottom: 9%;
	left: 4%;
	width: 96px;
	height: 96px;
	opacity: 0.15;
}
.home-hero__decor--berry svg {
	fill: #A36C9E;
}
.home-hero__decor--blob {
	top: 28%;
	right: -34px;
	width: 200px;
	height: 200px;
	opacity: 0.10;
}
.home-hero__decor--blob svg {
	fill: #95B049;
}

/* --- Section 2 · Promesses (mauve clair) ----------------------------- */
/* Plus de border-top : l'alternance des fonds suffit à séparer de la S1. */
.home-promesses {
	background-color: #F6F0F5;
	padding: 50px 0;
}
.home-promesses__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
.home-promesse {
	text-align: center;
}
/* Icônes des promesses : tracé en trait fin, réglé ici pour les 3 à la fois
 * (les SVG de front-page.php ne portent aucun style en dur). */
.home-promesse__icon {
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 auto 14px;
	fill: none;
	stroke: #A36C9E;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.home-promesse__titre {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 23px;
	color: #95B049;
}
.home-promesse__desc {
	margin: 0;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
	line-height: 1.5;
	color: #000000;
}

/* --- Section 3 · Avertissement (bandeau violet pleine largeur) ------- */
.home-alert {
	background-color: #A36C9E;
	padding: 32px 0;
}
.home-alert__text {
	margin: 0;
	text-align: center;
	color: #ffffff;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
	line-height: 1.6;
}

/* --- Section 4 · Chapitres (crème vert, même teinte que le hero) ------ */
.home-chapitres {
	background-color: #F3F9ED;
	padding: 54px 0;
}
.home-chapitres__titre {
	margin: 0 0 40px;
	text-align: center;
	font-weight: 600;
	font-size: 30px;
	color: #95B049;
}
.home-chapitres__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 42px;
}
.home-chapitre {
	text-align: center;
}
.home-chapitre__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background-color: #95B049;
	color: #ffffff;
	font-family: "Exo 2", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
}
.home-chapitre__titre {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #A36C9E;
}
.home-chapitre__desc {
	margin: 0;
	font-family: "Source Serif 4", serif;
	font-size: 15px;
	line-height: 1.6;
	color: #000000;
	text-align: justify;
}

/* --- Section 5 · Vous accompagner (mauve clair, même teinte que la S2) - */
.home-accompagner {
	background-color: #F6F0F5;
	padding: 54px 0;
}
.home-accompagner__titre {
	margin: 0 0 36px;
	text-align: center;
	font-weight: 600;
	font-size: 30px;
	color: #95B049;
}
.home-accompagner__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}
.home-acc-bloc__media {
	margin: 0 0 18px;
}
.home-acc-bloc__img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.home-acc-bloc__titre {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 25px;
	color: #95B049;
}
.home-acc-bloc__desc {
	margin: 0 0 20px;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
	line-height: 1.6;
	color: #000000;
}
.home-acc-bloc__actions {
	margin: 0;
}

/* --- Tablette / desktop ≥ 768px -------------------------------------- */
@media (min-width: 768px) {
	.home-hero {
		padding: 74px 0;
	}
	.home-hero__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
		/* Colonnes calées en haut : le titre et la couverture démarrent au même
		 * niveau, sans vide au-dessus du texte. */
		align-items: start;
	}
	.home-hero__title {
		font-size: 48px;
	}
	.home-hero__decor {
		display: block;
	}
	.home-hero__media {
		margin-top: 0;
		/* Desktop : couverture alignée sur le bord droit du container.
		 * Mobile : reste centrée (text-align: center de la règle de base). */
		text-align: right;
	}
	.home-hero__cover {
		/* Desktop : couverture bornée à 460px, centrée dans sa colonne par le
		 * text-align du parent .home-hero__media. */
		max-width: 460px;
	}

	.home-promesses {
		padding: 70px 0;
	}
	.home-promesses__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.home-alert {
		padding: 38px 0;
	}

	.home-chapitres {
		padding: 76px 0;
	}
	.home-chapitres__titre {
		font-size: 38px;
	}
	.home-chapitres__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 44px;
	}

	.home-accompagner {
		padding: 76px 0;
	}
	.home-accompagner__titre {
		font-size: 38px;
	}
	.home-accompagner__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.home-acc-bloc__img {
		height: 240px;
	}
}

/* --- Desktop large ≥ 1024px ------------------------------------------ */
@media (min-width: 1024px) {
	.home-hero__title {
		font-size: 52px;
	}
}

/* =====================================================================
 * LIENS ÉDITORIAUX
 * ---------------------------------------------------------------------
 * Charte unique des liens de contenu : violet #A36C9E, non souligné au
 * repos, souligné au survol, couleur inchangée au survol.
 *
 * Périmètre : contenus WYSIWYG (pages éditoriales, articles, singles CPT,
 * intros d'archives) + liens de navigation interne des templates (retour à
 * la liste, titres de carte).
 *
 * Hors périmètre, volontairement épargnés : menu principal (vert), pied de
 * page, fil d'Ariane (blanc sur violet) et tous les boutons CTA — d'où les
 * :not() sur les zones WYSIWYG, où un bloc bouton peut être inséré.
 *
 * Note : text-decoration n'est pas une propriété animable en CSS. La
 * transition ne porte donc que sur la couleur ; l'apparition du soulignement
 * est instantanée par nature. L'obtenir en fondu imposerait un soulignement
 * permanent rendu transparent, ce qui contredirait la règle « non souligné
 * au repos ».
 * ===================================================================== */

/* Zones WYSIWYG : tout lien sauf les boutons. */
.page-editorial-content a:not(.button):not(.wp-block-button__link),
.entry-content a:not(.button):not(.wp-block-button__link),
.livre-content a:not(.button):not(.wp-block-button__link),
.livre-body__content a:not(.button):not(.wp-block-button__link),
.fait-chiffre-content a:not(.button):not(.wp-block-button__link),
.fait-chiffre-body__content a:not(.button):not(.wp-block-button__link),
.temoignage-content a:not(.button):not(.wp-block-button__link),
.temoignage-body__content a:not(.button):not(.wp-block-button__link),
.mon-livre-resume a:not(.button):not(.wp-block-button__link),
.mon-livre-wysiwyg a:not(.button):not(.wp-block-button__link),
.livres-archive__intro a:not(.button):not(.wp-block-button__link),
.fait-chiffre-archive__intro a:not(.button):not(.wp-block-button__link),
.temoignage-archive__intro a:not(.button):not(.wp-block-button__link),
/* Liens de navigation interne des templates (classes maîtrisées, pas de
 * bouton possible : aucun :not() nécessaire). */
.livre-back a,
.fait-chiffre-back a,
.temoignage-back a,
.livres-archive__card-title a,
.fait-chiffre-archive__card-title a,
.temoignage-archive__card-title a {
	color: #A36C9E;
	text-decoration: none;
	transition: color 0.2s ease;
}

.page-editorial-content a:not(.button):not(.wp-block-button__link):hover,
.page-editorial-content a:not(.button):not(.wp-block-button__link):focus,
.entry-content a:not(.button):not(.wp-block-button__link):hover,
.entry-content a:not(.button):not(.wp-block-button__link):focus,
.livre-content a:not(.button):not(.wp-block-button__link):hover,
.livre-content a:not(.button):not(.wp-block-button__link):focus,
.livre-body__content a:not(.button):not(.wp-block-button__link):hover,
.livre-body__content a:not(.button):not(.wp-block-button__link):focus,
.fait-chiffre-content a:not(.button):not(.wp-block-button__link):hover,
.fait-chiffre-content a:not(.button):not(.wp-block-button__link):focus,
.fait-chiffre-body__content a:not(.button):not(.wp-block-button__link):hover,
.fait-chiffre-body__content a:not(.button):not(.wp-block-button__link):focus,
.temoignage-content a:not(.button):not(.wp-block-button__link):hover,
.temoignage-content a:not(.button):not(.wp-block-button__link):focus,
.temoignage-body__content a:not(.button):not(.wp-block-button__link):hover,
.temoignage-body__content a:not(.button):not(.wp-block-button__link):focus,
.mon-livre-resume a:not(.button):not(.wp-block-button__link):hover,
.mon-livre-resume a:not(.button):not(.wp-block-button__link):focus,
.mon-livre-wysiwyg a:not(.button):not(.wp-block-button__link):hover,
.mon-livre-wysiwyg a:not(.button):not(.wp-block-button__link):focus,
.livres-archive__intro a:not(.button):not(.wp-block-button__link):hover,
.livres-archive__intro a:not(.button):not(.wp-block-button__link):focus,
.fait-chiffre-archive__intro a:not(.button):not(.wp-block-button__link):hover,
.fait-chiffre-archive__intro a:not(.button):not(.wp-block-button__link):focus,
.temoignage-archive__intro a:not(.button):not(.wp-block-button__link):hover,
.temoignage-archive__intro a:not(.button):not(.wp-block-button__link):focus,
.livre-back a:hover,
.livre-back a:focus,
.fait-chiffre-back a:hover,
.fait-chiffre-back a:focus,
.temoignage-back a:hover,
.temoignage-back a:focus,
.livres-archive__card-title a:hover,
.livres-archive__card-title a:focus,
.fait-chiffre-archive__card-title a:hover,
.fait-chiffre-archive__card-title a:focus,
.temoignage-archive__card-title a:hover,
.temoignage-archive__card-title a:focus {
	color: #A36C9E;
	text-decoration: underline;
}

/* Cartes « Autres livres / faits et chiffres / témoignages » des singles :
 * le lien enveloppe toute la carte (image comprise) et hérite la couleur, le
 * titre porte donc la charte. Le soulignement au survol ne vise que le titre,
 * jamais la vignette. */
.livre-card__title,
.fait-chiffre-card__title,
.temoignage-card__title {
	color: #A36C9E;
	transition: color 0.2s ease;
}
.livre-card__link:hover .livre-card__title,
.livre-card__link:focus .livre-card__title,
.fait-chiffre-card__link:hover .fait-chiffre-card__title,
.fait-chiffre-card__link:focus .fait-chiffre-card__title,
.temoignage-card__link:hover .temoignage-card__title,
.temoignage-card__link:focus .temoignage-card__title {
	text-decoration: underline;
}

/* =====================================================================
 * BLOC CTA « ACCOMPAGNER » — pied des pages d'accompagnement
 * ---------------------------------------------------------------------
 * Carte blanche posée sur le fond crème de la page, alignée exactement sur
 * la colonne de texte : même max-width 800px et même padding latéral de
 * 20px que .page-editorial-content, la carte occupant l'espace intérieur.
 * ===================================================================== */
.cta-accompagner {
	max-width: 800px;
	/* Marge basse nulle : .page-editorial-body porte déjà 60px de padding
	 * bas, qui assurent la respiration avant le pied de page. */
	margin: 70px auto 0;
	padding: 0 20px;
}
.cta-accompagner__inner {
	padding: 45px;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
/* Variante mauve, portée par le seul CTA « Témoignages ». Réemploi de la teinte
 * #F6F0F5 qui servait au fond pleine largeur du bloc liste, abandonné depuis. */
.cta-accompagner__inner--mauve {
	background-color: #F6F0F5;
}
/* Violet explicite : la charte globale met TOUS les h3 en vert #95B049.
 * La spécificité de classe (0-1-0) l'emporte sur le sélecteur d'élément.
 *
 * font-size explicite pour la même raison : le thème parent pose
 * h3 { font-size: 29px } (generatepress/assets/css/main.min.css), beaucoup
 * trop pour une colonne de 340px. Une déclaration sur la classe suffit à le
 * battre, sans !important et sans toucher au parent. */
.cta-accompagner__titre {
	margin: 0 0 16px;
	color: #A36C9E;
	font-size: 21px;
	line-height: 1.25;
}
.cta-accompagner__texte {
	margin: 0 0 28px;
	font-family: "Source Serif 4", serif;
	line-height: 1.7;
}
/* Même bouton que les CTA « Lire la suite » des archives. */
.cta-accompagner__bouton {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 5px;
	background-color: #A36C9E;
	color: #ffffff;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.cta-accompagner__bouton:hover,
.cta-accompagner__bouton:focus {
	background-color: #8B5C86;
	color: #ffffff;
	text-decoration: none;
}

/* Mobile : padding intérieur resserré, la carte respirant déjà grâce au
 * padding latéral du conteneur. */
@media (max-width: 600px) {
	.cta-accompagner {
		margin-top: 50px;
	}
	.cta-accompagner__inner {
		padding: 30px 24px;
	}
	.cta-accompagner__bouton {
		display: block;
		text-align: center;
	}
}

/* =====================================================================
 * Deux colonnes avec CTA collant — pages d'accompagnement uniquement
 * ---------------------------------------------------------------------
 * Déclenché par .page-editorial-body--cta, classe posée par page.php quand
 * et seulement quand la page reçoit réellement un CTA. page.php servant
 * TOUTES les pages du site, sans ce garde-fou les pages sans CTA verraient
 * leur texte poussé dans une colonne de 800px avec 400px de vide à droite.
 *
 * Entièrement contenu dans une media query ≥ 1024px : en dessous, le rendu
 * mobile et tablette est celui d'avant, à l'identique — une seule colonne,
 * CTA en dessous avec sa marge de 70px, aucun collant.
 *
 * 1200px = la largeur de référence du site (les .grid-container de l'en-tête,
 * du bandeau et du pied de page). 1200 − 60 de gouttière − 340 de colonne CTA
 * laisse exactement 800px à la colonne de texte : .page-editorial-content
 * garde donc son max-width: 800px inchangé, il tombe juste.
 *
 * minmax(0, 1fr) et non 1fr : une piste 1fr a pour taille minimale auto, et
 * un mot long ou un bloc préformaté la ferait déborder.
 *
 * IMPORTANT — ne pas ajouter align-items: start ni align-self: start ici.
 * L'aside doit s'étirer sur toute la hauteur de la rangée : c'est cette
 * hauteur qui donne au bloc interne sa course de défilement. Le caler en
 * haut le figerait et le collant n'aurait plus aucun effet visible.
 * ===================================================================== */
@media (min-width: 1024px) {
	.page-editorial-body--cta,
	.temoignage-archive__body {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 60px;
	}

	/* Padding vertical : sur les pages éditoriales il vient de
	 * .page-editorial-body, pas du modificateur. L'archive n'a pas cet
	 * ancêtre, on le pose donc explicitement pour obtenir le même rythme.
	 * Rien en haut : l'écart sous le bandeau est réglé d'un seul endroit,
	 * voir le bloc « ÉCART SOUS LE BANDEAU » en fin de fichier. */
	.temoignage-archive__body {
		padding-bottom: 75px;
	}

	/* Le CTA n'est plus une bande centrée sous le texte mais une colonne :
	 * il abandonne sa largeur maximale, sa marge haute et son padding
	 * latéral, tous hérités de la disposition en pied de page. */
	.page-editorial-body--cta .cta-accompagner,
	.temoignage-archive__body .cta-accompagner {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* C'est la carte interne qui colle, pas l'aside : l'aside sert de piste
	 * de défilement, la carte s'y déplace. */
	.page-editorial-body--cta .cta-accompagner__inner,
	.temoignage-archive__body .cta-accompagner__inner {
		position: sticky;
		top: 40px;
		padding: 28px;
	}

	/* La grille des témoignages passe de 3 à 2 colonnes une fois logée dans la
	 * colonne de 800px : à 3 colonnes les cartes tombent à ~250px, soit 200px
	 * utiles une fois retirés leurs 24px de padding et leur filet.
	 * Spécificité 0-2-0 contre 0-1-0 pour la règle à 3 colonnes plus haut :
	 * elle l'emporte sans !important, et seulement dans ce contexte. */
	.temoignage-archive__body .temoignage-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Gouttière latérale tant que la grille n'est pas encore centrée.
 *
 * Entre 1024 et 1239px de fenêtre, la grille occupe toute la largeur : la
 * colonne de texte respire grâce au padding de .page-editorial-content, mais
 * la carte du CTA, elle, se retrouvait COLLÉE au bord droit de la fenêtre.
 *
 * La règle s'arrête à 1239px et non à 1199 : à 1200 pile, la grille atteint
 * son max-width et touche encore les deux bords ; il faut 1200 + 2 × 20 pour
 * qu'elle se centre en dégageant d'elle-même ses marges. Au-delà, plus de
 * padding — la largeur mesurée reste donc exactement 1200px en desktop, et la
 * colonne de texte exactement 800px. */
@media (min-width: 1024px) and (max-width: 1239px) {
	.page-editorial-body--cta,
	.temoignage-archive__body {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* =====================================================================
 * ÉCART SOUS LE BANDEAU — valeur unique pour tout le site
 * ---------------------------------------------------------------------
 * UN SEUL endroit règle cet écart, et UN SEUL contributeur le porte : la
 * marge basse du bandeau. Tout ce qui le suit immédiatement est remis à
 * zéro par le second groupe.
 *
 * ⚠ EFFET DE BORD À CONNAÎTRE AVANT D'AJOUTER UN BLOC.
 * Le second groupe utilise le sélecteur « bandeau + * » : il met à zéro le
 * margin-top ET le padding-top de l'élément qui suit le bandeau, QUEL QU'IL
 * SOIT. Ce n'est pas une liste d'exceptions, c'est le voisin direct, sans
 * condition sur sa classe ni sur sa nature.
 *
 * Conséquence : tout nouveau bloc inséré juste après un bandeau perdra
 * silencieusement son espacement haut. S'il en a besoin, il doit le porter
 * AUTREMENT — par exemple :
 *   - en le déplaçant sur son premier enfant plutôt que sur lui-même ;
 *   - en repassant une valeur explicite après ce bloc-ci dans le fichier
 *     (spécificité égale, c'est l'ordre qui tranche) ;
 *   - ou, si l'écart de 48px ne lui convient pas, en surchargeant la marge
 *     basse du bandeau pour ce gabarit précis.
 * Un bloc placé PLUS BAS dans la page n'est pas concerné : seul le voisin
 * immédiat du bandeau est touché.
 *
 * POUR TRAITER UN NOUVEAU GABARIT : ajouter son bandeau au premier groupe.
 * Le sélecteur « + * » du second se charge du reste, quel que soit
 * l'élément qui suit.
 *
 * Pourquoi la marge du bandeau plutôt que le padding de ce qui suit : le
 * bandeau est le seul élément commun à tous les gabarits. Les conteneurs
 * qui le suivent, eux, changent de nom à chaque gabarit
 * (.page-editorial-body, .mon-livre-fiche, .livre-body,
 * .temoignage-archive__body, .livres-archive__intro…) et certains portent
 * un padding haut qui sert AUSSI à autre chose — celui de
 * .page-editorial-body espace l'image à la une du texte sur les pages qui
 * en ont une. D'où le « + * », qui ne neutralise que le voisin direct.
 *
 * Écarts mesurés AVANT consolidation, à 1424px :
 *   pages éditoriales sans image        95px   (20 + 75)
 *   pages éditoriales avec image        35px   (20 + 35, marges fusionnées)
 *   pages à CTA et Témoigner            47,5px (20 + 27,5)
 *   Mon livre                           80px   (20 + 60)
 *   archives Livres et Faits & chiffres 50px   (50 + 0)
 *   archive Témoignages                 62,5px (25 + 37,5)
 *   singles de CPT                      80px   (20 + 60)
 *   index du blog et articles           20px   (marge de .site-main)
 * ===================================================================== */
.page-editorial-hero,
.livres-archive__hero,
.fait-chiffre-archive__hero,
.temoignage-archive__hero,
.livre-hero,
.fait-chiffre-hero,
.temoignage-hero {
	margin-bottom: 48px;
}

.page-editorial-hero + *,
.livres-archive__hero + *,
.fait-chiffre-archive__hero + *,
.temoignage-archive__hero + *,
.livre-hero + *,
.fait-chiffre-hero + *,
.temoignage-hero + * {
	margin-top: 0;
	padding-top: 0;
}

/* Index du blog et articles : le bandeau est posé par
 * intolerances_blog_hero() sur generate_after_header, donc À L'EXTÉRIEUR de
 * #page. Son voisin direct est #page, mais l'écart réel vient de la marge de
 * .site-main, posée par GeneratePress (.site-main { margin: 20px }). C'est
 * elle qu'il faut neutraliser ici — le sélecteur ne mord que dans ce cas de
 * figure, où le bandeau précède immédiatement #page. */
.page-editorial-hero + #page .site-main {
	margin-top: 0;
}

/* =====================================================================
 * BAS DU BLOC DE CONTENU — selon ce qui suit
 * ---------------------------------------------------------------------
 * Le bloc de contenu porte 75px de padding bas (60px sous 768px). Cette
 * réserve sert de respiration avant le pied de page : quand le bloc est le
 * DERNIER de la page, elle est juste, et elle est conservée telle quelle.
 *
 * Quand un autre bloc suit — le cas de /temoigner/, où la section blanche du
 * formulaire vient juste après —, ces 75px s'ajoutent à l'écart entre les
 * deux blocs et creusent un vide que rien ne justifie. On les ramène à 20px.
 *
 * Aucune condition PHP : le cas se lit dans la structure. .page-editorial-body
 * est bien enfant direct de #main sur toutes les pages, et n'est pas dernier
 * sur la seule page où un bloc le suit. :not(:last-child) suffit donc, et la
 * règle s'appliquera d'elle-même si un autre gabarit adopte le même schéma.
 *
 * Spécificité 0-2-0 contre 0-1-0 pour la règle de base : elle l'emporte sans
 * !important. .temoignage-archive__body est ajouté par cohérence — il est
 * dernier partout aujourd'hui, la règle y est donc sans effet pour l'instant.
 * ===================================================================== */
.page-editorial-body:not(:last-child),
.temoignage-archive__body:not(:last-child) {
	padding-bottom: 20px;
}

/* =====================================================================
 * PAGE TÉMOIGNER — rythme vertical propre
 * ---------------------------------------------------------------------
 * Cette page n'a pas de CTA : elle n'était donc pas couverte par la
 * réduction appliquée aux pages à CTA. On lui applique la même règle —
 * moitié de l'écart mesuré entre le bas du bandeau et le premier texte :
 * 20 (marge du bandeau) + 75 (padding du conteneur) = 95px → 47,5px.
 *
 * Le bas du conteneur est mis à zéro, marge comprise : tout l'espace qui
 * sépare le texte d'introduction du titre du formulaire est porté par le
 * seul padding haut de .form-temoignage. Un contributeur, une valeur.
 * Cela remplace, sur cette page uniquement, les 20px de la règle
 * :not(:last-child) ci-dessus — même spécificité, cette règle vient après.
 * ===================================================================== */
.temoigner .page-editorial-body {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* =====================================================================
 * Cartes « Autres témoignages » (bas du single témoignage)
 * ---------------------------------------------------------------------
 * Contenu volontairement réduit à identité + parole : ni badge de type,
 * ni extrait, ni photo. La citation n'est plus mise en exergue (ni filet,
 * ni italique, ni fond) : c'est un simple lien, calé sur le comportement
 * des titres de carte « Autres livres ».
 *
 * Sélecteurs propres au témoignage : les règles groupées .livre-card__* /
 * .fait-chiffre-card__* ne sont pas touchées, les deux autres sections
 * « Autres … » gardent donc exactement leur rendu.
 * ===================================================================== */
.temoignage-card__nom {
	margin: 0 0 2px;
	text-align: center;
	color: #95B049;
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
}
.temoignage-card__precision {
	margin: 0 0 12px;
	text-align: center;
	color: #575760;
	font-family: "Source Serif 4", serif;
	font-size: 16px;
}
/* Tronquée à 4 lignes pour égaliser la hauteur des cartes, comme sur
 * l'archive. quotes: none — aucun guillemet ajouté automatiquement. */
.temoignage-card__citation {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #A36C9E;
	font-family: "Source Serif 4", serif;
	font-size: 17px;
	line-height: 1.5;
	text-decoration: none;
	quotes: none;
	transition: color 0.2s ease;
}
.temoignage-card__citation:hover,
.temoignage-card__citation:focus {
	color: #A36C9E;
	text-decoration: underline;
}

/* =====================================================================
 * Sous-menus déroulants du menu principal
 * ---------------------------------------------------------------------
 * Filet vert et suppression de l'ombre GeneratePress (qui pose par défaut
 * box-shadow: 1px 1px 0 rgba(0,0,0,.1) sur .main-navigation ul ul).
 *
 * Portée limitée au déroulant DESKTOP via :not(.toggled) — le même motif
 * que GeneratePress utilise lui-même. En dessous de 769px le menu passe en
 * accordéon et reçoit la classe .toggled : il conserve alors intégralement
 * son rendu natif, filet compris.
 *
 * Spécificité 0-2-2 contre 0-1-2 pour la règle GP : aucun !important.
 * box-sizing: border-box étant global, le filet se dessine à l'intérieur
 * des 200px du déroulant, qui ne se décale donc pas.
 * ===================================================================== */
.main-navigation:not(.toggled) ul ul {
	background-color: #ffffff;
	border: 1px solid #95B049;
	border-radius: 3px;
	box-shadow: none;
}

/* =========================================================================
 * GALERIES VIDÉO — .videos-galerie / .video-vignette
 * ---------------------------------------------------------------------
 * Deux implantations, un seul jeu de règles :
 *   accueil    → .home-videos,      2 colonnes ≥ 768px
 *   Mon livre  → .mon-livre-videos, 1 colonne, dans la colonne de gauche
 *
 * Les vignettes ne sont PAS des lecteurs : ce sont des <button> qui ouvrent
 * la lightbox (.ilb-*, plus haut). Aucune <iframe> n'est présente dans la
 * page avant le clic — voir intolerances_videos_galerie() dans functions.php.
 *
 * Ratio 16/9 obtenu par padding-top: 56.25% plutôt que par aspect-ratio :
 * la technique est équivalente ici et ne dépend d'aucun support récent, ce
 * qui rejoint le parti pris du reste de la feuille (hauteurs explicites).
 *
 * Le titre de section n'est PAS stylé sur .videos-galerie__titre : la classe
 * n'est qu'un point d'accroche. La mise en forme reste portée par la classe
 * de page (.home-videos__titre ici, .mon-livre-section-titre plus haut), pour
 * qu'un titre « Vidéos » soit rigoureusement identique aux titres voisins.
 * ===================================================================== */

.videos-galerie__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

/* La vignette est un <button> (ou un <a> si le fournisseur n'est pas reconnu) :
 * on neutralise le rendu natif du contrôle, on garde le comportement.
 *
 * SÉLECTEUR DESCENDANT OBLIGATOIRE, ne pas simplifier en « .video-vignette ».
 * La charte des boutons du site (fond violet #A36C9E, texte blanc) est posée
 * dans le CSS additionnel du Personnalisateur — <style id="wp-custom-css"> —
 * que WordPress imprime APRÈS style.css, avec le sélecteur
 * « button:not(.menu-toggle) », de spécificité 0-1-1. Un « .video-vignette »
 * seul (0-1-0) perdait, et le fond violet réapparaissait derrière le titre de
 * chaque vignette. Le descendant depuis la section vaut 0-2-0 et l'emporte
 * sans !important — c'est le raisonnement que tient déjà le commentaire de ce
 * CSS additionnel à propos de a.button.
 *
 * Conséquence : le survol doit lui aussi être scopé (0-3-0 contre le 0-2-1 de
 * « button:not(.menu-toggle):hover », qui repasse au violet assombri). */
.videos-galerie .video-vignette {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.videos-galerie .video-vignette:hover,
.videos-galerie .video-vignette:focus {
	background: none;
	color: inherit;
	text-decoration: none;
}
.videos-galerie .video-vignette:focus-visible {
	outline: 3px solid #A36C9E;
	outline-offset: 3px;
}

/* Zone média : image téléversée, ou carte de repli en dégradé de charte. */
.video-vignette__media {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	border-radius: 4px;
	background-color: #2E3929;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.video-vignette__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Repli (video_vignette vide) : aucune requête vers un service externe pour
 * aller chercher une image d'aperçu — le dégradé de charte tient ce rôle. */
.video-vignette__media--repli {
	background-image: linear-gradient(135deg, #95B049 0%, #2E3929 100%);
}

.video-vignette__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	transition: transform 0.18s ease;
}
.video-vignette__play svg {
	display: block;
	width: 100%;
	height: 100%;
}
.video-vignette__play circle {
	fill: rgba(46, 57, 41, 0.55);
	stroke: #ffffff;
	stroke-width: 2;
}
.video-vignette__play path {
	fill: #ffffff;
}
.video-vignette__media--repli .video-vignette__play circle {
	fill: rgba(255, 255, 255, 0.16);
}
.video-vignette:hover .video-vignette__play,
.video-vignette:focus .video-vignette__play {
	transform: scale(1.08);
}

.video-vignette__titre {
	display: block;
	margin-top: 10px;
	color: #2E3929;
	font-family: "Exo 2", sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.35;
	transition: color 0.2s ease;
}
.video-vignette:hover .video-vignette__titre,
.video-vignette:focus .video-vignette__titre {
	color: #95B049;
}

/* --- Implantation accueil (section pleine largeur, fond blanc) -------- */
.home-videos {
	background-color: #ffffff;
	padding: 50px 0;
}
.home-videos__titre {
	margin: 0 0 32px;
	text-align: center;
	font-weight: 600;
	font-size: 30px;
	color: #95B049;
}

/* --- Implantation Mon livre (colonne de gauche) ----------------------- */
/* Même gabarit que la couverture, le bloc méta et les vignettes 2×2 :
 * max-width 350px, marges automatiques sous 1024px (colonne pleine largeur,
 * blocs centrés), marges remises à 0 au-delà (fiche en 2 colonnes, blocs
 * alignés à gauche) — voir le @media 1024 de la galerie, plus bas.
 *
 * L'alignement ≥ 1024px est refait ICI et non ajouté à la règle groupée
 * .mon-livre-couverture/.mon-livre-meta/.mon-livre-vignettes du @media 1024 :
 * cette règle-là vit plus HAUT dans la feuille que la règle de base
 * ci-dessous. À spécificité égale (0-1-0 de part et d'autre, un @media
 * n'ajoutant aucune spécificité), c'est la dernière déclarée qui l'emporte —
 * le `margin: 24px auto 0` aurait donc gagné et la galerie serait restée
 * centrée dans les 360px de la colonne, décalée de 5px vers la droite. */
.mon-livre-videos {
	max-width: 350px;
	margin: 24px auto 0;
}
.mon-livre-videos .videos-galerie__grid {
	gap: 20px;
}

/* --- Responsive ≥ 768px ---------------------------------------------- */
@media (min-width: 768px) {
	.videos-galerie--cols-2 .videos-galerie__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.home-videos {
		padding: 70px 0;
	}
	.home-videos__titre {
		font-size: 38px;
	}
}

/* --- Responsive ≥ 1024px --------------------------------------------- */
/* La fiche « Mon livre » passe en 2 colonnes : la galerie s'aligne à gauche
 * comme la couverture, le bloc méta et les vignettes 2×2. */
@media (min-width: 1024px) {
	.mon-livre-videos {
		margin-left: 0;
		margin-right: 0;
	}
}