/**
 * Accueil — apparence de la structure posée par la migration 005.
 *
 * Le contenu et la structure vivent dans Elementor (le propriétaire les
 * édite) ; tout ce qui suit cible les identifiants d'éléments FIXÉS par
 * scripts/migrations/005-structure-home.php. Les changer casse cette feuille.
 *
 * Repères d'identifiants :
 *   praccher…  héros            praccrea…  réassurance
 *   praccfor…  formules         praccder…  déroulement
 *   pracczon…  les deux zones   praccban…  bande photo
 *   praccfaq…  FAQ courte       praccfin…  appel final
 *
 * Toutes les tailles, couleurs et espacements viennent de tokens.css.
 *
 * @package Plein_R_Astra_Child
 */

/* ========================================================================
   1. Tronc commun des huit sections
   ======================================================================== */

/* Largeur de lecture et gouttières, comme l'en-tête et le pied. */
.elementor-element-praccher1 > .elementor-container,
.elementor-element-praccrea1 > .elementor-container,
.elementor-element-praccfor1 > .elementor-container,
.elementor-element-praccder1 > .elementor-container,
.elementor-element-pracczon1 > .elementor-container,
.elementor-element-praccfaq1 > .elementor-container,
.elementor-element-praccfin1 > .elementor-container {
	width: min(100%, 1380px);
	margin-inline: auto;
	padding-inline: clamp(16px, 2vw, 24px);
}

/* Rythme vertical des sections. */
.elementor-element-praccrea1,
.elementor-element-praccfor1,
.elementor-element-praccder1,
.elementor-element-pracczon1,
.elementor-element-praccfaq1,
.elementor-element-praccfin1 {
	padding-block: var(--e-section);
}

/* Fonds : alternance claire / blanche / sombre, pour séparer les sections
   sans multiplier les filets. */
.elementor-element-praccrea1,
.elementor-element-praccfaq1 { background-color: var(--surface); }

.elementor-element-praccder1,
.elementor-element-praccfin1 {
	background-color: var(--sombre);
	color: var(--encre-claire);
}

/* Espacement entre les blocs d'une même section. Elementor pose une marge
   basse sur chaque widget : on la remplace par un `gap`, qui ne s'ajoute pas
   à celle du voisin et ne fuit pas en fin de colonne. */
.elementor-element-praccher1 .elementor-widget-wrap,
.elementor-element-praccrea1 .elementor-widget-wrap,
.elementor-element-praccfor1 .elementor-widget-wrap,
.elementor-element-praccder1 .elementor-widget-wrap,
.elementor-element-pracczon1 .elementor-widget-wrap,
.elementor-element-praccfaq1 .elementor-widget-wrap,
.elementor-element-praccfin1 .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-2);
	padding: 0;
}

.elementor-element-praccher1 .elementor-widget,
.elementor-element-praccrea1 .elementor-widget,
.elementor-element-praccfor1 .elementor-widget,
.elementor-element-praccder1 .elementor-widget,
.elementor-element-pracczon1 .elementor-widget,
.elementor-element-praccfaq1 .elementor-widget,
.elementor-element-praccfin1 .elementor-widget {
	margin-bottom: 0;
	width: 100%;
}

/* Le sous-titre d'une section appartient à son titre : on resserre la paire. */
.elementor-element-praccfor4,
.elementor-element-praccder4 { margin-top: calc(var(--e-2) * -1 + var(--e-1)) !important; }

/* Mesure de lecture : un paragraphe pleine largeur à 1380 px est illisible. */
.elementor-element-praccfor4 p,
.elementor-element-praccder4 p,
.elementor-element-praccfin4 p { max-width: var(--mesure); }

/* Sur fond sombre, TOUT le texte passe en clair — titres compris. Cette
   règle doit rester AVANT celle des numéros d'étape : à spécificité égale
   (0,2,0), c'est la dernière déclarée qui gagne. */
.elementor-element-praccder1 p,
.elementor-element-praccfin1 p,
.elementor-element-praccban1 .elementor-heading-title,
.elementor-element-praccder1 .elementor-heading-title,
.elementor-element-praccfin1 .elementor-heading-title {
	color: var(--encre-claire);
}

/* Liens « voir la suite » en fin de section. */
.elementor-element-praccfor6 a,
.elementor-element-praccfaq5 a,
.elementor-element-pracczon6 a,
.elementor-element-pracczon9 a {
	color: var(--lien);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ========================================================================
   2. Boutons
   ======================================================================== */

/* Les deux paires de boutons (héros et appel final) sont des sections
   internes de deux colonnes : en faire une rangée qui se replie. */
.elementor-element-praccher6 > .elementor-container,
.elementor-element-praccfin5 > .elementor-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	justify-content: flex-start;
}

/* `!important` nécessaire, pas paresseux : Elementor réimprime `width: 50%`
   sur ces colonnes dans un <style> placé APRÈS nos feuilles. */
.elementor-element-praccher6 > .elementor-container > .elementor-column,
.elementor-element-praccfin5 > .elementor-container > .elementor-column {
	width: auto !important;
	flex: 0 0 auto;
}

.elementor-element-praccher1 .elementor-button,
.elementor-element-praccfin1 .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--e-3);
	border-radius: var(--rayon-s);
	border: 2px solid transparent;
	font-size: var(--t-corps);
	line-height: var(--lh-ui);
	font-weight: 700;
	text-decoration: none;
}

/* Action principale. */
.elementor-element-praccher7 .elementor-button,
.elementor-element-praccfin6 .elementor-button {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-texte);
}

/* Action secondaire, sur fond sombre : contour de la couleur du texte. */
.elementor-element-praccher9 .elementor-button,
.elementor-element-praccfin8 .elementor-button {
	background-color: transparent;
	border-color: currentColor;
	color: var(--encre-claire);
}

/* Le survol INVERSE le bouton au lieu de l'assombrir : un `filter` sur un
   contour clair posé sur fond sombre faisait tomber le contraste sous AA.
   Chaque état est ici une paire de couleurs opaques, donc mesurable. */
.elementor-element-praccher7 .elementor-button:hover,
.elementor-element-praccher7 .elementor-button:focus-visible,
.elementor-element-praccfin6 .elementor-button:hover,
.elementor-element-praccfin6 .elementor-button:focus-visible {
	background-color: var(--encre-claire);
	border-color: var(--encre-claire);
	color: var(--sombre);
}

.elementor-element-praccher9 .elementor-button:hover,
.elementor-element-praccher9 .elementor-button:focus-visible,
.elementor-element-praccfin8 .elementor-button:hover,
.elementor-element-praccfin8 .elementor-button:focus-visible {
	background-color: var(--encre-claire);
	border-color: var(--encre-claire);
	color: var(--sombre);
}

/* ========================================================================
   3. Héros
   ======================================================================== */

.elementor-element-praccher1 {
	position: relative;
	isolation: isolate;
	color: var(--encre-claire);
	padding-block: clamp(3.5rem, 9vw, 7rem);
	background-position: center center;
	background-size: cover;
}

/* Voile dégradé : la photo seule ne garantit aucun contraste de texte, et
   axe ne mesure pas un texte posé sur une image — donc il faut l'assurer. */
.elementor-element-praccher1::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(20, 24, 31, .92) 0%, rgba(20, 24, 31, .78) 46%, rgba(20, 24, 31, .48) 100%);
}

.elementor-element-praccher1 .elementor-widget-wrap { gap: var(--e-3); }

/* Surtitre : petite capitale espacée, dans le rose clair du logo. */
.elementor-element-praccher3 .elementor-heading-title {
	font-size: var(--t-menu);
	line-height: var(--lh-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent-clair);
}

.elementor-element-praccher4 .elementor-heading-title {
	max-width: 18ch;
	color: var(--encre-claire);
}

.elementor-element-praccher5 p {
	font-size: var(--t-h5);
	line-height: var(--lh-lead);
	max-width: var(--mesure-etroite);
	color: var(--encre-claire);
}

/* Quatre repères. Un widget de texte plutôt que douze widgets : quatre
   chiffres ne justifient pas douze blocs à éditer. */
.elementor-element-praccherc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-element-praccherc li {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.elementor-element-praccherc strong {
	font-size: var(--t-h4);
	line-height: var(--lh-h4);
	color: var(--encre-claire);
}

.elementor-element-praccherc span {
	font-size: var(--t-petit);
	line-height: var(--lh-ui);
	color: var(--encre-claire);
	opacity: .92;
}

/* ========================================================================
   4. Grilles internes (réassurance, déroulement, zones)
   ======================================================================== */

.elementor-element-praccrea0 > .elementor-container,
.elementor-element-praccder0 > .elementor-container,
.elementor-element-pracczon0 > .elementor-container {
	display: grid;
	gap: var(--e-3);
	width: 100%;
}

.elementor-element-praccrea0 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr)); }
.elementor-element-praccder0 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr)); }
.elementor-element-pracczon0 > .elementor-container { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* Même motif que dans le pied : les pourcentages d'Elementor se résolvent
   contre la piste de grille et rétrécissent chaque colonne. */
.elementor-element-praccrea0 > .elementor-container > .elementor-column,
.elementor-element-praccder0 > .elementor-container > .elementor-column,
.elementor-element-pracczon0 > .elementor-container > .elementor-column {
	width: 100% !important;
}

.elementor-element-praccrea0 .elementor-widget-wrap,
.elementor-element-praccder0 .elementor-widget-wrap,
.elementor-element-pracczon0 .elementor-widget-wrap {
	gap: var(--e-1);
	align-content: start;
}

/* Les trois atouts étaient trois colonnes de texte nu sur un fond rose pâle :
   rien ne les désignait comme trois éléments d'un même ensemble. Ils
   deviennent des cartes, posées sur ce fond, avec une arête colorée en tête —
   la couleur vient de la charte, pas d'un aplat supplémentaire. */
.elementor-element-praccrea0 > .elementor-container > .elementor-column {
	background-color: var(--fond);
	border: 1px solid var(--bordure);
	border-top: 3px solid var(--accent);
	border-radius: var(--rayon);
	padding: var(--e-3);
}

.elementor-element-praccrea0 p,
.elementor-element-pracczon0 p:not(.pracc-acces) { color: var(--encre-douce); }

/* Déroulement : le numéro porte une information, c'est une séquence. */
.elementor-element-praccder6 .elementor-heading-title,
.elementor-element-praccderb .elementor-heading-title,
.elementor-element-praccderf .elementor-heading-title,
.elementor-element-praccderj .elementor-heading-title {
	font-size: var(--t-h2);
	line-height: 1;
	font-weight: 700;
	color: var(--accent-clair);
}

.elementor-element-praccder0 p { color: var(--encre-claire); opacity: .88; }

/* Zones : l'accès est une donnée pratique, pas du corps de texte. */
.pracc-acces {
	font-size: var(--t-menu);
	line-height: var(--lh-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
}

.elementor-element-pracczon4,
.elementor-element-pracczon7 {
	border: 1px solid var(--bordure);
	border-radius: var(--rayon);
	padding: var(--e-3);
}

/* ========================================================================
   5. Formules — disposition de la grille
   ======================================================================== */

/* L'APPARENCE des cartes vit dans `boutique.css` : elle est commune à la
   boutique et à cet accueil, qui passent par le même gabarit WooCommerce.
   Ici, seule la disposition propre à la section.

   Le shortcode `[products]` est préféré à des cartes écrites en dur : les
   prix restent ceux du catalogue, sans divergence possible le jour où le
   propriétaire les change dans WooCommerce.

   La grille elle-même est déclarée dans `boutique.css`, commune aux deux
   pages. Rien à ajouter ici : trois produits sur une largeur de 1380 px
   tombent naturellement sur trois colonnes. */

/* ========================================================================
   6. Bande photo
   ======================================================================== */

.elementor-element-praccban1 { background-color: var(--sombre); }
/* La marge basse que Elementor pose sous le widget d'image décalait la
   citation vers le bas de la barre noire : elle n'y était plus centrée. */
.elementor-element-praccban1 .elementor-widget-wrap { gap: 0; }

.elementor-element-praccban3.elementor-widget { margin-bottom: 0; }

.elementor-element-praccban3 img {
	width: 100%;
	height: clamp(230px, 40vw, 440px);
	object-fit: cover;
	display: block;
}

.elementor-element-praccban4 .elementor-heading-title {
	display: block;
	padding: var(--e-2) clamp(16px, 2vw, 24px);
	font-size: var(--t-h5);
	line-height: var(--lh-lead);
	font-style: italic;
	color: var(--encre-claire);
	text-align: center;
}

/* ========================================================================
   7. FAQ courte
   ======================================================================== */

/* L'habillage de l'accordéon vit dans `accordeon.css` : il sert ici et sur la
   page « Questions fréquentes », il doit avoir le même aspect aux deux
   endroits. Rien de spécifique à l'accueil. */

/* ========================================================================
   8. Appel final
   ======================================================================== */

.elementor-element-praccfin1 .elementor-widget-wrap { align-items: center; }
.elementor-element-praccfin3 .elementor-heading-title,
.elementor-element-praccfin4 p { text-align: center; }
.elementor-element-praccfin4 p { margin-inline: auto; }

.elementor-element-praccfin5 > .elementor-container { justify-content: center; }

/* ========================================================================
   9. Paliers
   ======================================================================== */

@media (max-width: 767px) {
	.elementor-element-praccher1 .elementor-button,
	.elementor-element-praccfin1 .elementor-button {
		width: 100%;
	}

	.elementor-element-praccher6 > .elementor-container > .elementor-column,
	.elementor-element-praccfin5 > .elementor-container > .elementor-column {
		flex: 1 0 100%;
	}

	/* Le voile passe en vertical : en mobile le texte occupe toute la
	   largeur, un dégradé latéral ne le couvrirait plus. */
	.elementor-element-praccher1::before {
		background: linear-gradient(180deg, rgba(20, 24, 31, .88) 0%, rgba(20, 24, 31, .82) 60%, rgba(20, 24, 31, .70) 100%);
	}

	.elementor-element-praccherc ul { gap: var(--e-2) var(--e-3); }
	.elementor-element-praccherc li { flex: 1 0 40%; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-praccfor5 * { transition: none !important; }
}