/**
 * Elevation Cie : styles des sections 1 à 5 de l'accueil
 * (patterns accueil-hero, accueil-engagements, accueil-constat,
 * accueil-standard, accueil-offres).
 *
 * À charger en front ET dans l'éditeur (add_editor_style), après theme.css
 * et sections-2.css.
 *
 * S'appuie sur theme.css (styles de blocs, contextes sombres, grilles
 * responsives, mot surligné dans les titres, .ec-section) et sur
 * sections-2.css (.ec-bouton-fleche : flèche « → » des liens secondaires).
 * Le démonstrateur « Planning d'atelier » porte ses propres styles, scopés
 * sous .ec-demo, dans son bloc HTML.
 *
 * Aucun nom de classe ne contient « -- » : ces classes sont stockées dans
 * les commentaires de blocs, où le double tiret est à proscrire.
 */

/* ==========================================================================
   Pictogrammes au trait dans une pastille pétrole clair (44 px)
   .ec-picto + une classe .ec-picto-<nom> sur le groupe parent.
   ========================================================================== */

.ec-picto::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--petrole-clair, #E4EEF0) var(--ec-picto, none) center / 1.375rem 1.375rem no-repeat;
}

.ec-picto-prix {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5A1 1 0 0 1 4.5 3.5H12.2L20.5 11.8A1 1 0 0 1 20.5 13.2L13.2 20.5A1 1 0 0 1 11.8 20.5L3.5 12.2Z'/%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/svg%3E");
}

.ec-picto-calendrier {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5H20.5M8 3V7M16 3V7M9 14.5L11 16.5L15 12.5'/%3E%3C/svg%3E");
}

.ec-picto-cible {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E");
}

.ec-picto-cle {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15.5' r='4.5'/%3E%3Cpath d='M11.3 12.3L20 3.5M16.5 7L19 9.5M14 9.5L16 11.5'/%3E%3C/svg%3E");
}

.ec-picto-horloge {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12L15 14'/%3E%3C/svg%3E");
}

.ec-picto-metre {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8V11M10.5 8V12M14.5 8V11M18.5 8V12'/%3E%3C/svg%3E");
}

.ec-picto-repere {
	--ec-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21C12 21 5.5 15.4 5.5 10A6.5 6.5 0 0 1 18.5 10C18.5 15.4 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
}

@media (forced-colors: active) {
	.ec-picto::before {
		border: 1px solid CanvasText;
	}
}

/* ==========================================================================
   1. Hero (fond encre)
   ========================================================================== */

/* « sur mesure » surligné : ne jamais couper l'expression
   (padding et arrondi : theme.css, « mot mis en valeur »). */
.ec-hero__titre mark {
	white-space: nowrap;
}

.ec-hero__texte {
	max-width: 37.5rem;
}

.ec-hero__commande a {
	font-weight: 500;
}

/* Réassurance : 3 éléments en ligne (coches du style « Coches »,
   pétrole lumineux sur fond encre via theme.css). */
.ec-section .wp-block-list.ec-hero__reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	padding-left: 0;
}

.ec-section .wp-block-list.ec-hero__reassurance > li {
	margin: 0;
}

/* ==========================================================================
   2. Engagements (fond crème)
   ========================================================================== */

.ec-engagement {
	padding-left: 1.5rem;
	border-left: 1px solid var(--wp--preset--color--bordure, #E6E2DA);
}

/* ==========================================================================
   3. Constat (fond blanc)
   ========================================================================== */

/* Titre de carte précédé d'une croix blanche dans une pastille encre. */
.ec-titre-croix {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--bordure, #E6E2DA);
}

.ec-titre-croix::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--encre, #111418) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5'/%3E%3C/svg%3E") center / 0.875rem 0.875rem no-repeat;
}

/* Phrase de conclusion, filet pétrole à gauche ; la seconde moitié est en
   pétrole via le format « Surligner » (couleur de texte) de l'éditeur. */
.ec-conclusion {
	max-width: 55rem;
	padding-left: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--petrole, #1F4E5F);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

/* ==========================================================================
   4. Un nouveau standard (fond crème)
   ========================================================================== */

/* Panneau pétrole de la citation : pleine hauteur de la colonne, citation
   calée en bas, symbole du logo 3b (version crème, 44 px) en haut. */
.ec-citation {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2.5rem;
	height: 100%;
	padding: clamp(1.75rem, 4vw, 3rem);
}

.ec-citation::before {
	content: "";
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='46' cy='46' r='46'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='92' height='27' fill='%23F5F2EC'/%3E%3Crect y='34' width='92' height='58' fill='%23F5F2EC'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-citation__texte {
	margin: 0;
	font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

@media (min-width: 782px) {
	.ec-citation {
		min-height: 16rem;
	}
}

/* ==========================================================================
   5. Mes offres (fond blanc)
   ========================================================================== */

/* Cartes de même hauteur (grille), lien calé en bas. */
.ec-offre {
	display: flex;
	flex-direction: column;
}

.ec-offre > .wp-block-buttons {
	margin-top: auto;
	padding-top: 2rem;
}

.ec-offre .ec-etiquette {
	align-self: flex-start;
	width: fit-content;
	margin: 0;
	padding: 0.3125rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--petrole-clair, #E4EEF0);
	color: var(--wp--preset--color--petrole, #1F4E5F);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.ec-offre .ec-offre__titre {
	margin-top: 1.5rem;
	font-size: clamp(1.625rem, 1.3rem + 1vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.ec-offre .ec-offre__accroche {
	margin-top: 0.5rem;
}

/* Prix : « dès » + montant en grand + « HT ». */
.ec-offre .ec-prix {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 1.75rem;
	font-weight: 500;
}

.ec-prix strong {
	font-family: var(--wp--preset--font-family--inter-tight, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
	font-size: clamp(2.5rem, 2rem + 1.5vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.ec-offre .ec-offre__puces {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--bordure, #E6E2DA);
}

.ec-offre .ec-offre__mention {
	margin-top: 1.5rem;
}

.is-style-carte-encre .ec-offre__puces {
	border-top-color: rgba(243, 244, 245, 0.16);
}

/* Bandeau passerelle sous les 2 cartes. */
.ec-passerelle {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.75rem;
	border-radius: 1rem;
}

.ec-passerelle::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--petrole-clair, #E4EEF0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4E5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12H20M14 6L20 12L14 18'/%3E%3C/svg%3E") center / 1.125rem 1.125rem no-repeat;
}

.ec-passerelle > p {
	margin: 0;
}