/**
 * Gabarit des pages intérieures.
 *
 * ── Pourquoi ce fichier existe ──
 *
 * Chaque page avait son propre traitement de titre, d'espacement et
 * d'alignement : quatre largeurs de contenu (946, 1118, 1200, 1440 px),
 * quatre positions verticales de titre et deux tailles (30 et 56 px). La
 * cause n'était pas dans le CSS mais dans trois réglages Astra posés page par
 * page — la migration 023 les a unifiés, et le titre est désormais rendu par
 * Astra partout.
 *
 * Ce fichier définit ce qui reste : l'APPARENCE de ce gabarit, en un seul
 * endroit. Une page ajoutée demain le suivra sans rien faire, et une
 * modification du propriétaire ne pourra plus la faire diverger.
 *
 * ── Le gabarit ──
 *
 *   Titre        `--t-h1` (36 → 56 px), aligné à gauche, 1 seul par page
 *   Hiérarchie   h1 (36→56) > h2 (28→40) > h3 (22→30) — jamais inversée
 *   Espacement   --e-8 au-dessus du titre, --e-4 en dessous
 *   Largeur      conteneur d'Astra ; texte courant limité à la mesure
 *   Rythme       multiples de 8 px, marges de titre par niveau
 *   Boutons      charte unique, quelle que soit leur origine
 *
 * @package Plein_R_Astra_Child
 */

/* Portée : les pages de contenu. L'accueil, la boutique, les fiches produit
   et le tunnel d'achat ont leur propre gabarit et sont exclus.

   ⚠ Toute règle visant un widget Elementor est enfermée dans `#content`.
   L'EN-TÊTE ET LE PIED DE PAGE SONT EUX AUSSI DES MODÈLES ELEMENTOR : sans
   cette précaution, la règle des `h2` repeignait les titres du pied en encre
   foncée — invisibles sur son fond sombre — et la mesure de lecture
   rétrécissait le bandeau d'annonce, dont le texte centré cessait de l'être.

   `body.page` et non `.page` : WordPress pose aussi la classe `page` sur
   l'ÉLÉMENT ARTICLE (via `post_class()`). Un sélecteur `.page:not(.home)`
   s'accrochait donc à l'article de l'accueil — que l'exclusion était censée
   protéger — et y repeignait les titres des sections sombres en encre foncée.
   Préfixer par `body` garantit que seule la classe de page compte. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) {

	/* Espace au-dessus du titre, commun à toutes les pages. Il était de 173,
	   183, 332 ou 486 px selon la page. */
	/* Bornes en pixels et non en `rem` : Astra fait varier la taille de
	   police racine selon la largeur, si bien qu'un minimum exprimé en `rem`
	   ne valait plus 56 px en mobile mais 48. */
	--pr-espace-titre: clamp(56px, 2rem + 4vw, 96px);
}

/* Cet espace doit avoir UNE seule source. Astra en empilait trois — 68 px de
   marge sur la zone de contenu, 91 px de rembourrage sur l'article, plus la
   marge de l'en-tête de page — soit 219 px au-dessus du titre, sans que
   personne ne l'ait décidé. Les deux premières sont neutralisées ici ; seul
   `--pr-espace-titre` commande.
   Le rembourrage LATÉRAL de l'article est conservé : c'est lui qui donne sa
   gouttière au contenu. */
/* `#primary` et non `.content-area` : Astra pose cette marge via un
   IDENTIFIANT (`.ast-separate-container #primary`), qui l'emporte sur
   n'importe quel sélecteur de classes. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) #primary {
	margin-top: 0;
	/* En mobile, Astra passe cet espace en REMBOURRAGE plutôt qu'en marge :
	   les deux sont donc neutralisés. */
	padding-top: 0;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .ast-article-single {
	padding-top: 0;
}

/* ========================================================================
   1. Zone de titre
   ======================================================================== */

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-header {
	margin-block: var(--pr-espace-titre) var(--e-4);
	padding: 0;
	border: 0;
	text-align: left;
}

/* `!important` n'est pas utile ici : Astra déclare `.entry-title` en (0,1,0),
   ce sélecteur pèse (0,3,0). */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-title {
	margin: 0;
	font-size: var(--t-h1);
	line-height: var(--lh-display);
	color: var(--encre);
	text-align: left;
	text-wrap: balance;
	/* Un titre n'a pas à courir sur toute la largeur : au-delà, l'œil perd
	   le début de la ligne suivante. */
	max-width: 24ch;
}

/* ========================================================================
   2. Hiérarchie des titres
   ======================================================================== */

/* Le Kit Elementor impose `h2 = 40 px` tandis qu'Astra rendait son titre de
   page à 30 px : la hiérarchie était littéralement INVERSÉE sur dix pages,
   le h2 y paraissant plus grand que le h1. Les trois niveaux sont réaffirmés
   ici, depuis la même échelle. */
/* `:not(.elementor-tab-title)` : un titre d'accordéon est un `h2` lui aussi,
   mais c'est une QUESTION repliable, pas une section — il a sa propre taille
   dans `accordeon.css`. Sans cette exclusion, cette règle l'emportait et les
   questions de la FAQ sortaient à 37,5 px, désalignées de leur icône. */
body.page:not(.home) .entry-content h2:not(.elementor-tab-title),
body.page:not(.home) #content .elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--t-h2);
	line-height: var(--lh-h2);
	color: var(--encre);
}

body.page:not(.home) .entry-content h3,
body.page:not(.home) #content .elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--t-h3);
	line-height: var(--lh-h3);
	color: var(--encre);
}

body.page:not(.home) .entry-content h4,
body.page:not(.home) #content .elementor-widget-heading h4.elementor-heading-title {
	font-size: var(--t-h4);
	line-height: var(--lh-h4);
	color: var(--encre);
}

/* ========================================================================
   3. Largeur de lecture et rythme vertical
   ======================================================================== */

/* Le conteneur d'Astra donne la largeur de page ; le texte courant, lui, est
   ramené à une mesure lisible. Les images et les grilles gardent la largeur
   pleine. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content > p,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content > ul,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content > ol,
body.page:not(.home) #content .elementor-widget-text-editor > .elementor-widget-container > p,
body.page:not(.home) #content .elementor-widget-text-editor > .elementor-widget-container > ul,
body.page:not(.home) #content .elementor-widget-text-editor > .elementor-widget-container > ol {
	max-width: var(--mesure);
}

/* Rythme vertical : l'espace au-dessus d'un titre lui appartient, celui en
   dessous le rattache à son texte. Tous multiples de 8 px. */
body.page:not(.home) .entry-content h2:not(.elementor-tab-title),
body.page:not(.home) #content .elementor-widget-heading h2.elementor-heading-title {
	margin-block: var(--e-6) var(--e-2);
}

body.page:not(.home) .entry-content h3,
body.page:not(.home) #content .elementor-widget-heading h3.elementor-heading-title {
	margin-block: var(--e-4) var(--e-1);
}

body.page:not(.home) .entry-content h4,
body.page:not(.home) #content .elementor-widget-heading h4.elementor-heading-title {
	margin-block: var(--e-3) var(--e-1);
}

/* Un titre en tête de contenu n'a pas besoin de l'espace qui le sépare du
   bloc précédent : celui de la zone de titre suffit. */
body.page:not(.home) .entry-content > *:first-child,
body.page:not(.home) #content .elementor-widget:first-child .elementor-heading-title {
	margin-top: 0;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content li {
	line-height: var(--lh-corps);
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p {
	margin-block: 0 var(--e-2);
}

/* Le dernier bloc de la page ne doit pas coller au pied. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content {
	padding-bottom: var(--e-6);
}

/* ========================================================================
   4. Boutons
   ======================================================================== */

/* Quelle que soit leur origine — Elementor, bloc WordPress, Astra, WPForms —
   les boutons d'une page suivent la même charte. Le bouton d'envoi du
   formulaire de contact sortait en rouge, seul de son espèce. */
body.page:not(.home) .entry-content .wp-block-button__link,
body.page:not(.home) .wpforms-form button.wpforms-submit,
body.page:not(.home) .wpforms-form input[type="submit"],
body.page:not(.home) .entry-content .ast-button,
body.page:not(.home) .entry-content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--e-3);
	border: 2px solid var(--accent);
	border-radius: var(--rayon-s);
	background-color: var(--accent);
	color: var(--accent-texte);
	font-size: var(--t-corps);
	line-height: var(--lh-ui);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

body.page:not(.home) .entry-content .wp-block-button__link:hover,
body.page:not(.home) .wpforms-form button.wpforms-submit:hover,
body.page:not(.home) .wpforms-form button.wpforms-submit:focus-visible,
body.page:not(.home) .wpforms-form input[type="submit"]:hover,
body.page:not(.home) .entry-content .ast-button:hover,
body.page:not(.home) .entry-content button[type="submit"]:hover {
	background-color: var(--encre);
	border-color: var(--encre);
	color: var(--fond);
}

/* ========================================================================
   5. Formulaires
   ======================================================================== */

body.page:not(.home) .wpforms-form label.wpforms-field-label {
	font-size: var(--t-petit);
	font-weight: 700;
	color: var(--encre);
}

body.page:not(.home) .wpforms-form input[type="text"],
body.page:not(.home) .wpforms-form input[type="email"],
body.page:not(.home) .wpforms-form input[type="tel"],
body.page:not(.home) .wpforms-form textarea {
	min-height: 48px;
	padding: var(--e-1);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-s);
	background-color: var(--fond);
	color: var(--encre);
	font-size: var(--t-corps);
}

body.page:not(.home) .wpforms-form textarea { min-height: 140px; }

body.page:not(.home) .wpforms-form input:focus-visible,
body.page:not(.home) .wpforms-form textarea:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* ========================================================================
   6. Pages sommaire
   ======================================================================== */

/* « Infos essentielles » et « Découvrir » ne sont pas des pages de contenu
   mais des SOMMAIRES : une phrase, puis des liens vers les rubriques. Leurs
   liens méritent donc d'être des cibles franches, pas des boutons empilés
   les uns sous les autres. */
body.page:not(.home) .pr-accroche {
	font-size: var(--t-h5);
	line-height: var(--lh-lead);
	color: var(--encre-douce);
	max-width: var(--mesure);
}

/* Les liens d'une page sommaire passent en RANGÉE : on les parcourt du
   regard au lieu de les lire en colonne. Elementor donne 100 % de largeur à
   chaque widget d'une colonne — c'est le conteneur qu'il faut passer en
   rangée, pas les boutons. */
body.page-id-3577 #content .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	align-items: flex-start;
}

body.page-id-3577 #content .elementor-widget-image,
body.page-id-3577 #content .elementor-widget-text-editor {
	flex: 1 0 100%;
	width: 100%;
}

body.page-id-3577 #content .elementor-widget-button {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

/* Variante SECONDAIRE de la charte : contour et texte à l'accent, fond clair.
   Ces quatre liens mènent à des rubriques, ils ne déclenchent pas d'achat —
   quatre boutons pleins auraient concurrencé « Réserver » de l'en-tête. Mais
   un fond gris et un texte à l'encre les faisait lire comme désactivés : un
   lien secondaire doit rester visiblement cliquable. */
body.page-id-3577 #content .elementor-widget-button a.elementor-button,
body.page-id-3577 #content .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 var(--e-3);
	border: 2px solid var(--accent);
	border-radius: var(--rayon-s);
	background-color: var(--fond);
	color: var(--accent);
	font-size: var(--t-corps);
	font-weight: 700;
	text-decoration: none;
}

/* Au survol, la variante secondaire se remplit : c'est le même mouvement que
   le bouton primaire, en sens inverse. */
body.page-id-3577 #content .elementor-widget-button a.elementor-button:hover,
body.page-id-3577 #content .elementor-widget-button a.elementor-button:focus-visible {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-texte);
}

/* ========================================================================
   7. Bandeau d'ouverture
   ======================================================================== */

/* Sur « Présentation », la photo de ciel servait de FOND au texte : gris
   foncé sur nuages clairs, illisible et variable d'un paragraphe à l'autre.
   Elle est devenue un bandeau (migration 024) — le texte n'est plus dessus,
   et la photo garde toute sa lumière. */
/* Une seule marge sous le bandeau : elle est portée par le WIDGET. L'image en
   avait une de son côté, et Elementor en ajoute 20 px au widget — les deux
   s'additionnaient en un écart double. */
.elementor-element-prpresban1.elementor-widget,
.elementor-element-prinfimg1.elementor-widget {
	margin-bottom: var(--e-4);
}

.elementor-element-prpresban1 img,
.elementor-element-prinfimg1 img {
	width: 100%;
	aspect-ratio: 21 / 9;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: var(--rayon);
	margin-bottom: 0;
}

@media (max-width: 600px) {
	/* Une seule marge sous le bandeau : elle est portée par le WIDGET. L'image en
   avait une de son côté, et Elementor en ajoute 20 px au widget — les deux
   s'additionnaient en un écart double. */
.elementor-element-prpresban1.elementor-widget,
.elementor-element-prinfimg1.elementor-widget {
	margin-bottom: var(--e-4);
}

.elementor-element-prpresban1 img,
.elementor-element-prinfimg1 img { aspect-ratio: 16 / 9; }
}

/* ========================================================================
   8. Fil d'Ariane
   ======================================================================== */

/* Posé par `inc/fil-ariane.php` sur toutes les pages sauf l'accueil, et rendu
   par WooCommerce sur la boutique : un seul balisage pour tout le site, donc
   un seul habillage. */
.woocommerce-breadcrumb {
	margin: 0 0 var(--e-2);
	padding: 0;
	font-size: var(--t-petit);
	line-height: var(--lh-ui);
	color: var(--encre-douce);
}

.woocommerce-breadcrumb a {
	color: var(--encre-douce);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible { color: var(--accent); }

.plnr-fil-ariane__sep { margin-inline: .4em; color: var(--bordure); }

/* Le fil prend la place de l'espace au-dessus du titre : sans cela, les deux
   s'additionnent et le titre descend. */
body.page:not(.home) .woocommerce-breadcrumb {
	margin-top: var(--pr-espace-titre);
}

/* Le préfixe complet est repris : la règle de base de `.entry-header` pèse
   (0,5,1) et l'emportait sur un sélecteur plus court — l'espace du fil
   s'ajoutait alors à celui du titre, 194 px au lieu de 88. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .woocommerce-breadcrumb + .entry-header {
	margin-top: var(--e-2);
}

/* ========================================================================
   9. La boutique suit le même gabarit
   ======================================================================== */

/* `/tarifs/` est une archive WooCommerce, pas une `page` : le gabarit ne s'y
   appliquait pas, et son titre sortait au gris par défaut d'Astra (#4e4e4e)
   quand toutes les autres pages étaient à l'encre de la charte. Son chapô
   aussi. */
.post-type-archive-product .woocommerce-products-header__title,
.post-type-archive-product .entry-title {
	font-size: var(--t-h1);
	line-height: var(--lh-display);
	color: var(--encre);
	text-align: left;
	text-wrap: balance;
	max-width: 24ch;
	margin: 0;
}

/* La description de la boutique est rendue À L'INTÉRIEUR de l'en-tête : la
   marge basse de l'en-tête ne les sépare donc pas, c'est au titre de la
   porter. Et cette règle doit venir APRÈS le `margin: 0` ci-dessus, qui
   sinon l'annule — à spécificité égale, la dernière déclarée gagne. */
.post-type-archive-product .woocommerce-products-header__title {
	margin-bottom: var(--e-3);
}

.post-type-archive-product .woocommerce-products-header {
	margin-block: var(--pr-espace-titre) var(--e-4);
}

.post-type-archive-product .woocommerce-breadcrumb {
	margin-top: var(--pr-espace-titre);
	margin-bottom: var(--e-2);
}

.post-type-archive-product .woocommerce-breadcrumb + .woocommerce-products-header {
	margin-top: var(--e-2);
}

.post-type-archive-product .page-description p {
	color: var(--encre-douce);
}

/* L'espace au-dessus du titre vient d'une seule source ici aussi. */
.post-type-archive-product {
	--pr-espace-titre: clamp(56px, 2rem + 4vw, 96px);
}

.post-type-archive-product #primary { margin-top: 0; padding-top: 0; }

/* ========================================================================
   12. Images dans le contenu
   ======================================================================== */

/* Deux cas, et deux seulement — c'est la migration 032 qui range le contenu
   pour qu'il n'y en ait pas un troisième :

     `pr-photo`   une image seule  → toute la largeur de la colonne, en 16/9
     `pr-galerie` deux ou plus     → une rangée, chacune en 3/2

   Les classes sont posées dans le CONTENU, jamais déduites par CSS : chaque
   image étant enveloppée dans un lien vers sa page de pièce jointe, aucun
   sélecteur ne pouvait distinguer une rangée de photos d'un paragraphe.

   Le préfixe complet est repris : la règle générale des paragraphes, déclarée
   plus haut avec les mêmes exclusions, pèse une classe de plus et annulait
   ces marges. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-photo,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-galerie {
	margin-block: var(--e-5);
	/* Les images portent une classe d'alignement de l'éditeur
	   (`alignright`, `alignleft`) : elle n'a plus de sens ici, et c'est elle
	   qui faisait remonter une photo dans le paragraphe précédent. */
	clear: both;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-galerie {
	display: grid;
	/* 200 px et non 240 : à 240, trois photos réclamaient 752 px pour 748
	   disponibles et la troisième passait à la ligne. */
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--e-2);
	align-items: start;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-photo img,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-galerie img,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-photo a,
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-galerie a {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	float: none;
	border-radius: var(--rayon);
	/* Les vignettes du contenu font parfois 239 px de large pour un rendu à
	   360 : sans recadrage, la rangée devient un escalier. */
	object-fit: cover;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-galerie img { aspect-ratio: 3 / 2; }

/* Sauf quand la rangée MÊLE LES ORIENTATIONS. Un format unique impose alors
   son cadrage aux deux, et c'est la photo verticale qui paie : sur « Qui peut
   sauter », un 3/2 n'en laissait voir que 44 %, contre 89 % de sa voisine
   horizontale.

   Il n'existe pas de format qui ménage les deux — un cadre plus haut
   sacrifierait l'horizontale exactement de la même façon. On renonce donc au
   format unique pour ces rangées : chaque photo garde le sien, et la rangée
   les aligne par le haut. Les hauteurs diffèrent, mais aucune image n'est
   amputée.

   La classe est posée DANS LE CONTENU par la migration 032, qui lit les
   dimensions réelles des fichiers. Le CSS n'a aucun moyen de comparer la
   largeur et la hauteur d'une image : c'est la même raison qui nous avait
   déjà fait écrire `pr-photo` et `pr-galerie` dans le contenu.

   Le préfixe complet est repris : la règle du 3/2 juste au-dessus porte
   quatre `:not()`, et une règle qui en a moins ne la bat pas. */
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-orientations-melees {
	align-items: start;
}

body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-orientations-melees img {
	aspect-ratio: auto;
	object-fit: contain;
}
body.page:not(.home):not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content p.pr-photo img { aspect-ratio: 16 / 9; }

/* Le lien de pièce jointe n'est pas un lien de lecture : il ne prend ni
   soulignement ni couleur d'accent. */
body.page:not(.home) #content .entry-content p.pr-photo a,
body.page:not(.home) #content .entry-content p.pr-galerie a { border: 0; text-decoration: none; }

/* ========================================================================
   13. Carrousel d'images
   ======================================================================== */

/* Les flèches d'Elementor se posaient aux angles du carrousel, à mi-hauteur
   de rien. Elles sont ramenées au centre vertical, dans une pastille qui les
   détache de la photo. */
body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button {
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: rgba(20, 24, 31, .72);
	color: var(--encre-claire);
	font-size: 1.1rem;
}

body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button-prev { left: var(--e-2); right: auto; }
body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button-next { right: var(--e-2); left: auto; }

body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button:hover,
body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button:focus-visible {
	background-color: var(--accent);
}

body.page:not(.home) #content .elementor-widget-image-carousel .elementor-swiper-button svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}