@charset "UTF-8";
/* Elsa Clemente — pages services. Préfixe .ecs-, tokens dans tokens.css.
   Mobile d'abord : le rendu mobile se valide en premier.

   Écarts au plan d'implémentation, tous volontaires et justifiés :
   1. @charset UTF-8 : les pseudo-éléments portent des glyphes non ASCII (✓, –).
      Sans déclaration, le fichier dépend de l'encodage supposé par le navigateur.
   2. Garde-fous anti-débordement (box-sizing, min-width:0 sur les enfants de
      grille, max-width sur les images) : exigence « aucun défilement horizontal ».
   3. --ecs-muted : #7a7f8a ne mesure que 4,02:1 sur blanc et 3,70:1 sur
      --ec-surface, sous le seuil WCAG AA de 4,5:1 pour du texte courant.
      Assombri à #646975 (5,50:1 et 5,06:1) pour les textes réellement lus.
      Le token --ec-muted reste inchangé : le blog n'est pas modifié.
   4. Styles :focus-visible : Divi applique `:focus{outline:0}` à tout le site,
      le parcours au clavier est invisible sans cette réintroduction.
   5. prefers-reduced-motion : neutralise les transformations au survol.
   6. .ecs-grid--tarifs : classe rendue par ecs_render_tarifs() sans règle dans
      le plan, dotée ici d'une grille adaptée à des cartes de formule.

   7. --ecs-cta : DETTE D'ACCESSIBILITÉ CONNUE ET ASSUMÉE. Le blanc sur l'orange
      de marque #fe782e mesure 2,64:1, sous le seuil WCAG AA de 4,5:1 exigé pour
      du texte de 15px gras. Sont concernés le bouton d'appel à l'action, le
      numéro d'étape, la coche de livrable et l'indicateur d'ouverture de la FAQ.
      La variante assombrie #b8490a (5,26:1) a été essayée puis écartée par
      Miguel le 2026-07-26 pour raison esthétique. Le jour où l'on veut la
      conformité, il suffit de redonner une valeur propre aux deux variables
      ci-dessous : rien d'autre n'est à toucher. Le blog porte le même écart.
      Les textes de lecture, eux, sont conformes : voir --ecs-muted et .ecs-more. */

/* ----- base ----- */
.ecs {
	--ecs-muted: #646975;
	/* Orange de marque, choix de Miguel du 2026-07-26 : la variante assombrie testee
	   (#b8490a) rendait mal. Contrepartie assumee, voir le point 7 de l'en-tete. */
	--ecs-cta: var(--ec-accent);
	--ecs-cta-hover: var(--ec-accent-2);
	font-family: "Open Sans", Arial, sans-serif;
	color: var(--ec-body);
	background: #fff;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}
/* Défensif : Divi pose déjà `*{box-sizing:border-box}`, on ne dépend pas de lui. */
.ecs *,
.ecs *::before,
.ecs *::after { box-sizing: border-box; }
/* :where() ne pèse rien en spécificité : les règles de composant ci-dessous
   (photo de témoignage, vignette de carte) gardent la main. */
.ecs :where(img) { max-width: 100%; height: auto; }

.ecs h1, .ecs h2, .ecs h3 {
	color: var(--ec-brand);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 .6em;
}
.ecs h1 { font-size: clamp(28px, 4vw, 42px); }
.ecs h2 { font-size: clamp(24px, 3vw, 32px); }
.ecs h3 { font-size: 20px; line-height: 1.3; }
.ecs p, .ecs li { font-size: 16px; line-height: 1.8; }

.ecs-container { max-width: var(--ec-maxw); margin: 0 auto; padding: 0 20px; }
.ecs-narrow { max-width: var(--ec-contentw); }
.ecs-section { padding: 48px 0; }
.ecs-lead { color: var(--ecs-muted); }
.ecs-rounded { border-radius: var(--ec-radius); width: 100%; height: auto; }

/* Parcours au clavier. Le contour bleu tient sur les fonds clairs (12,49:1 sur
   --ec-surface), il repasse en blanc sur les deux sections à fond bleu. */
.ecs :where(a, summary, button, [tabindex]):focus-visible {
	outline: 3px solid var(--ec-brand);
	outline-offset: 3px;
}
.ecs-reassurance :where(a, summary, button):focus-visible,
.ecs-cta :where(a, summary, button):focus-visible {
	outline-color: #fff;
}

/* Fil d'Ariane */
.ecs-breadcrumb { font-size: 13px; color: var(--ecs-muted); margin-bottom: 18px; }
.ecs-breadcrumb a { color: var(--ecs-muted); text-decoration: none; }
.ecs-breadcrumb a:hover { color: var(--ec-brand); }
.ecs-bc-sep { color: #c7c7d1; margin: 0 4px; }

/* Bouton pilule orange, repris du blog */
/* Fond assombri plutot que --ec-accent : blanc sur #fe782e ne mesure que 2,64:1, sous le
   minimum WCAG AA de 4,5:1 pour du texte de 15px gras. #b8490a mesure 5,26:1, #a84208 au
   survol 6,09:1. Arbitrage de Miguel du 2026-07-26. Le blog garde son bouton d'origine. */
.ecs-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 100px;
	background: var(--ecs-cta);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(254, 120, 46, .32);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ecs-btn:hover {
	background: var(--ecs-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(254, 120, 46, .42);
	color: #fff;
}
.ecs-btn--sm { padding: 10px 22px; font-size: 14px; }
/* Lien de rebond. --ec-accent en texte ne mesure que 2,64:1 sur blanc :
   variante assombrie du même orange, 5,26:1 sur blanc et 4,84:1 sur --ec-surface. */
.ecs-more { color: #b8490a; font-weight: 700; text-decoration: none; }
.ecs-more:hover { text-decoration: underline; }

/* Hero */
.ecs-hero { background: var(--ec-surface); padding: 40px 0 52px; }
.ecs-cols { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
/* Sans min-width:0, un mot long dans une colonne de grille élargit la piste
   au-delà du conteneur et provoque un défilement horizontal. */
.ecs-cols > * { min-width: 0; }
.ecs-intro { margin-bottom: 24px; }
/* Spécificité renforcée, ici et sur les cinq composants signalés plus bas :
   la règle générique « .ecs p, .ecs li » pèse (0,1,1) et sa variante ≥720px
   arrive plus loin dans la feuille. Une taille posée par une classe unique se
   fait donc écraser sur tout élément p ou li. Vérifié au navigateur : le prix
   d'une formule tombait à 17px au lieu de 30px. Même parade que le lead magnet
   du blog dans blog.css. */
.ecs .ecs-intro,
.ecs .ecs-intro p { font-size: 17px; line-height: 1.8; }
.ecs-intro strong { color: var(--ec-ink); }

/* Bandeau de réassurance */
.ecs-reassurance { background: var(--ec-brand); color: #fff; padding: 22px 0; }
.ecs-reassurance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ecs-reassurance li { display: flex; flex-direction: column; }
.ecs-reassurance strong { font-size: 18px; font-weight: 800; }
.ecs-reassurance span { font-size: 13px; opacity: .85; line-height: 1.4; }

/* Cartes */
.ecs-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ecs-grid > * { min-width: 0; }
.ecs-card {
	background: #fff;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius);
	padding: 22px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.ecs-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(16, 6, 159, .1); }
.ecs-card h3 { margin-bottom: .4em; }
.ecs-card h3 a { color: var(--ec-brand); text-decoration: none; }
.ecs-card-img { display: block; margin: -22px -22px 16px; }
.ecs-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ec-radius) var(--ec-radius) 0 0; }

/* Livrables */
.ecs-inclus { background: var(--ec-surface); }
.ecs-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ecs-checklist li { padding-left: 30px; position: relative; }
.ecs-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--ecs-cta);
	font-weight: 800;
}

/* Étapes */
.ecs-etapes { list-style: none; margin: 0; padding: 0; }
.ecs-etapes li { display: flex; gap: 18px; padding-bottom: 26px; position: relative; }
.ecs-etapes li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 44px;
	bottom: 0;
	width: 2px;
	background: var(--ec-line);
}
.ecs-etapes li > div { min-width: 0; }
.ecs-etape-num {
	flex: 0 0 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ecs-cta);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

/* Témoignages */
.ecs-preuves { background: var(--ec-surface); }
.ecs-temoignage {
	margin: 0;
	background: #fff;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius);
	padding: 24px;
}
.ecs-temoignage-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.ecs-stars { color: var(--ec-accent); letter-spacing: .1em; margin-bottom: 8px; }
.ecs-temoignage blockquote { margin: 0 0 14px; padding: 0 0 0 16px; border-left: 4px solid var(--ec-accent); font-style: italic; color: var(--ec-ink); }
.ecs-temoignage figcaption strong { display: block; color: var(--ec-brand); }
.ecs-temoignage figcaption span { font-size: 13px; color: var(--ecs-muted); }

/* Zone d'intervention */
.ecs-communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ecs .ecs-communes li {
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: 100px;
	padding: 7px 16px;
	font-size: 14px;
}

/* Tarifs */
.ecs-tarif {
	background: #fff;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-radius);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
}
.ecs-tarif.is-featured { border-color: var(--ec-accent); box-shadow: 0 12px 34px rgba(254, 120, 46, .16); }
.ecs .ecs-tarif-prix { font-size: 30px; font-weight: 800; color: var(--ec-brand); margin: 0 0 14px; line-height: 1.2; }
.ecs .ecs-tarif-prix span { font-size: 14px; font-weight: 600; color: var(--ecs-muted); }
.ecs-tarif ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.ecs .ecs-tarif li { padding-left: 22px; position: relative; font-size: 15px; }
.ecs-tarif li::before { content: "·"; position: absolute; left: 8px; color: var(--ec-accent); font-weight: 800; }
/* Le bouton d'une formule ne doit pas s'étirer sur toute la carte (flex column). */
.ecs-tarif .ecs-btn { align-self: flex-start; }
.ecs .ecs-note { font-size: 13px; color: var(--ecs-muted); margin-top: 18px; }

/* FAQ */
.ecs-faq-item { border-bottom: 1px solid var(--ec-line); padding: 4px 0; }
.ecs-faq-item summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative; }
.ecs-faq-item summary::-webkit-details-marker { display: none; }
.ecs-faq-item summary h3 { display: inline; margin: 0; font-size: 18px; }
.ecs-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 14px;
	color: var(--ecs-cta);
	font-size: 22px;
	font-weight: 700;
}
.ecs-faq-item[open] summary::after { content: "–"; }
.ecs-faq-item p { margin: 0 0 18px; }
.ecs .ecs-updated { font-size: 13px; color: var(--ecs-muted); margin-top: 24px; }

/* CTA final */
.ecs-cta {
	background: linear-gradient(150deg, var(--ec-brand), var(--ec-brand-dark));
	color: #fff;
	border-radius: 0;
	text-align: center;
}
.ecs-cta h2 { color: #fff; }
.ecs-cta p { max-width: 560px; margin: 0 auto 26px; }

/* Écrans larges */
@media (min-width: 720px) {
	.ecs-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
	.ecs-grid--tarifs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.ecs-reassurance ul { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.ecs-section { padding: 64px 0; }
	.ecs p, .ecs li { font-size: 17px; }
}
@media (min-width: 980px) {
	.ecs-cols { grid-template-columns: 1.15fr .85fr; gap: 48px; }
	/* Plusieurs sujets du silo n'ont pas encore d'image exploitable (nutrition,
	   pilates, coaching en ligne). Le hero ne rend alors qu'une seule colonne :
	   sans cette règle, la moitié droite de l'écran resterait vide. */
	.ecs-cols:has(> :only-child) { grid-template-columns: 1fr; }
	.ecs-hero { padding: 56px 0 72px; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
	.ecs *,
	.ecs *::before,
	.ecs *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.ecs-btn:hover,
	.ecs-card:hover { transform: none; }
}