/* =========================================================================
   Pages de référencement (gabarit page-seo.php)

   Rien de neuf côté direction artistique : les tokens, les titres, les bandes
   crème / bleu / bleu léger et les rayons viennent d'app.css. Cette feuille ne
   fait qu'habiller trois blocs qui n'existaient pas — le corps rédactionnel,
   la FAQ et le maillage — plus le fil d'Ariane.

   ⚠️ Ces pages sont longues et TEXTUELLES : la largeur de lecture est bornée à
   ~72 caractères. Un paragraphe étalé sur 1 280 px ne se lit pas.
   ========================================================================= */

/* --- fil d'Ariane --------------------------------------------------------
   Son socle a été DÉPLACÉ dans `app.css` le 22/09/2026 : c'est un composant
   générique, et la page Contact le rendait sans style faute de charger cette
   feuille. Rien à ajouter ici. */

/* --- raccord sous la bande orange ----------------------------------------
   🛑 `.tev-anim-intro` se termine par un bord OBLIQUE (`clip-path`). Le triangle
   qu'elle découpe n'est rempli par personne : c'est le blanc du body qui
   apparaît, en biseau, sur toute la largeur de la page (signalé par Lisa le
   18/09/2026, 35 px mesurés au bord droit).

   La section SUIVANTE doit donc remonter de `--tev-slant` et porter l'oblique
   complémentaire. Le patron existe depuis le 16/09 sur `.tev-fiches`
   (animations.css) et sur `.tev-evt-page .tev-anim-intro + .tev-offres` ; il
   n'avait simplement pas été repris en composant ces pages. **Toute section
   posée après une bande à bord oblique doit reprendre ce couple.**

   ⚠️ Le `clip-path` est posé ici sur la SECTION, et non sur un pseudo-élément
   comme sur la page Événements : un `clip-path` crée un bloc conteneur pour les
   descendants en `position: fixed`, ce qui casserait un épinglage GSAP. Ces
   pages n'en ont aucun — mesuré, 0 scène épinglée. Si l'une d'elles en gagne
   un, repasser au pseudo-élément. */

.tev-seo-page .tev-anim-intro + .tev-anim-enjeux {
	margin-top: calc(var(--tev-slant) * -1);
	clip-path: polygon(0 var(--tev-slant), 100% 0, 100% 100%, 0 100%);
	padding-top: calc(104px + var(--tev-slant));
}

/* Repli : une page sans « ce que nous prenons en charge » enchaîne directement
   sur le corps rédactionnel. Le premier bloc fait alors le raccord, quel que
   soit son fond — l'oblique découpe la couleur qu'il porte déjà. */
.tev-seo-page .tev-anim-intro + .tev-seo-sections > .tev-seo-bloc:first-child {
	margin-top: calc(var(--tev-slant) * -1);
	clip-path: polygon(0 var(--tev-slant), 100% 0, 100% 100%, 0 100%);
	padding-top: calc(72px + var(--tev-slant));
}

/* --- sections rédactionnelles -------------------------------------------- */

.tev-seo-bloc {
	background: var(--tev-cream);
	padding: 72px 0;
}

.tev-seo-bloc--tint { background: var(--tev-tint); }

.tev-seo-bloc--bleu {
	background: var(--tev-blue);
	color: var(--tev-cream);
}
.tev-seo-bloc--bleu .tev-seo-bloc__titre { color: var(--tev-cream); }
.tev-seo-bloc--bleu .tev-seo-bloc__p     { color: rgba(255, 255, 255, .88); }
.tev-seo-bloc--bleu .tev-seo-bloc__puce  { color: rgba(255, 255, 255, .88); }
.tev-seo-bloc--bleu .tev-seo-bloc__coche { color: var(--tev-orange); }

/* Deux sections de même fond qui se suivent ne doivent pas doubler leur
   réserve : sans cela, 144 px séparent deux paragraphes du même propos. */
.tev-seo-bloc + .tev-seo-bloc { padding-top: 0; }
.tev-seo-bloc--tint + .tev-seo-bloc--tint,
.tev-seo-bloc--bleu + .tev-seo-bloc--bleu { padding-top: 0; }
.tev-seo-bloc:not(.tev-seo-bloc--tint):not(.tev-seo-bloc--bleu) + .tev-seo-bloc--tint,
.tev-seo-bloc:not(.tev-seo-bloc--tint):not(.tev-seo-bloc--bleu) + .tev-seo-bloc--bleu,
.tev-seo-bloc--tint + .tev-seo-bloc:not(.tev-seo-bloc--tint),
.tev-seo-bloc--bleu + .tev-seo-bloc:not(.tev-seo-bloc--bleu) { padding-top: 72px; }

.tev-seo-bloc__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.tev-seo-bloc--media .tev-seo-bloc__inner {
	flex-direction: row;
	align-items: center;
	gap: 64px;
}
.tev-seo-bloc--media.tev-seo-bloc--inverse .tev-seo-bloc__inner { flex-direction: row-reverse; }

.tev-seo-bloc__texte { flex: 1 1 0; min-width: 0; max-width: 68ch; }
.tev-seo-bloc--media .tev-seo-bloc__texte { max-width: none; }

.tev-seo-bloc__titre {
	color: var(--tev-blue);
	margin: 0 0 20px;
}

.tev-seo-bloc__p {
	font-family: var(--tev-font-body);
	font-size: 16px; line-height: 28px; font-weight: 400;
	color: var(--tev-grey);
	margin: 0 0 16px;
}
.tev-seo-bloc__p:last-child { margin-bottom: 0; }
.tev-seo-bloc__p a { color: var(--tev-orange); }

.tev-seo-bloc__liste {
	list-style: none; margin: 24px 0 0; padding: 0;
	display: grid; gap: 14px;
}

.tev-seo-bloc__puce {
	display: flex; align-items: flex-start; gap: 12px;
	font-family: var(--tev-font-body);
	font-size: 16px; line-height: 26px;
	color: var(--tev-grey);
}
.tev-seo-bloc__puce strong { color: var(--tev-blue); font-weight: 700; }
.tev-seo-bloc--bleu .tev-seo-bloc__puce strong { color: var(--tev-white); }

.tev-seo-bloc__coche {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 26px;
	color: var(--tev-orange);
}
.tev-seo-bloc__coche svg { width: 16px; height: 14px; }

.tev-seo-bloc__media { flex: 0 0 42%; }
.tev-seo-bloc__media img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--tev-radius-img);
}

/* --- questions fréquentes ------------------------------------------------ */

.tev-seo-faq {
	background: var(--tev-cream);
	padding: 80px 0;
}

.tev-seo-faq__titre {
	color: var(--tev-blue);
	margin: 0 0 32px;
}

.tev-seo-faq__list {
	max-width: 900px;
	border-top: 1px solid var(--tev-tint-line);
}

.tev-seo-faq__item { border-bottom: 1px solid var(--tev-tint-line); }

/* <details> natif : le contenu reste dans le DOM même fermé, donc lisible par
   Google, et l'accordéon fonctionne sans une ligne de JavaScript. */
.tev-seo-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}
.tev-seo-faq__q::-webkit-details-marker { display: none; }

.tev-seo-faq__q-texte {
	margin: 0;
	font-family: var(--tev-font-form);
	font-size: 17px; line-height: 26px; font-weight: 600;
	color: var(--tev-blue);
}

.tev-seo-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--tev-tint);
	color: var(--tev-blue);
	transition: transform .25s var(--tev-ease), background .25s var(--tev-ease);
}
.tev-seo-faq__chevron svg { width: 14px; height: 14px; }
.tev-seo-faq__item[open] .tev-seo-faq__chevron {
	transform: rotate(180deg);
	background: var(--tev-orange);
	color: var(--tev-white);
}

.tev-seo-faq__r { padding: 0 56px 26px 0; }
.tev-seo-faq__r p {
	margin: 0 0 14px;
	font-family: var(--tev-font-body);
	font-size: 16px; line-height: 28px;
	color: var(--tev-grey);
	max-width: 68ch;
}
.tev-seo-faq__r p:last-child { margin-bottom: 0; }
.tev-seo-faq__r a { color: var(--tev-orange); }

/* --- maillage : style déplacé dans app.css le 30/09/2026 (bloc posé aussi sur l'accueil et la page Animations) --- */

/* --- petits écrans -------------------------------------------------------
   ⚠️ Toute règle posée ici doit rester bornée à sa media query : une règle
   scopée par la classe de page (0-2-0) écrase sinon les paliers responsive des
   blocs partagés (0-1-0) — piège déjà payé sur la page Événements. */

@media (max-width: 1024px) {
	.tev-seo-bloc--media .tev-seo-bloc__inner,
	.tev-seo-bloc--media.tev-seo-bloc--inverse .tev-seo-bloc__inner {
		flex-direction: column;
		gap: 32px;
	}
	.tev-seo-bloc__media { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 767px) {
	/* ⚠️ Le raccord ci-dessus fixe un padding-top calé sur le grand écran : sans
	   ce palier, la règle scopée par la classe de page (0-3-0) écraserait le
	   rythme resserré du bloc (0-1-0). Piège déjà payé sur la page Événements. */
	.tev-seo-page .tev-anim-intro + .tev-anim-enjeux { padding-top: calc(56px + var(--tev-slant)); }
	.tev-seo-page .tev-anim-intro + .tev-seo-sections > .tev-seo-bloc:first-child { padding-top: calc(48px + var(--tev-slant)); }

	.tev-seo-bloc { padding: 48px 0; }
	.tev-seo-bloc:not(.tev-seo-bloc--tint):not(.tev-seo-bloc--bleu) + .tev-seo-bloc--tint,
	.tev-seo-bloc:not(.tev-seo-bloc--tint):not(.tev-seo-bloc--bleu) + .tev-seo-bloc--bleu,
	.tev-seo-bloc--tint + .tev-seo-bloc:not(.tev-seo-bloc--tint),
	.tev-seo-bloc--bleu + .tev-seo-bloc:not(.tev-seo-bloc--bleu) { padding-top: 48px; }

	.tev-seo-faq { padding: 56px 0; }
	.tev-seo-faq__r { padding-right: 0; }
	.tev-seo-maillage { padding: 48px 0; }
	.tev-seo-maillage__list { grid-template-columns: 1fr; }
}