/* =============================================================================================
   about.css — design de la page « About Us » (/about-us), servi hashe + immutable via asset_hashed().
   Ecrit A LA MAIN : Tailwind n'est pas recompilable sur le VPS. Meme convention que cards.css /
   mobile.css / breadcrumb.css. Charge UNIQUEMENT par templates/template_page/about.html.twig.

   PRINCIPE : ne cible que des elements SEMANTIQUES sous .about-prose (h2, p, ol, ul, li, strong, a)
   et les classes posees par LE TEMPLATE (.about-hero, .about-faq...). AUCUNE classe n'est requise
   dans le champ `content` -> rien que la traduction Gemini puisse casser d'une locale a l'autre.

   RTL : proprietes logiques (padding-inline, margin-inline, border-inline-start, text-align:start)
   -> miroir automatique sous /ar. Quelques reglages [dir="rtl"] la ou le logique ne suffit pas.
   ============================================================================================= */

:root {
	--about-brand: #1447e6;         /* = brand du site (blue-700) */
	--about-brand-strong: #1036b8;
	--about-ink: #0f172a;
	--about-body: #374151;
	--about-muted: #6b7280;
	--about-line: #e5e7eb;
	--about-card: #ffffff;
	--about-soft: #f8fafc;
	--about-maxw: 56rem;            /* largeur de lecture editoriale */
}

/* Degage le header fixe du site (position:fixed, h-[60px] md:h-[65px]) pour que le hero ne passe
   pas dessous — meme lecon que /terms et /privacy. */
.about-page {
	padding-top: 60px;
	background: #ffffff;
	color: var(--about-body);
	overflow-x: hidden;             /* garde-fou : aucune bande ne deborde en RTL / mobile */
}
@media (min-width: 768px) {
	.about-page { padding-top: 65px; }
}

/* ---------- HERO ---------- */
.about-hero {
	background: linear-gradient(135deg, var(--about-brand) 0%, var(--about-brand-strong) 100%);
	color: #fff;
	padding: 4rem 1.25rem 4.25rem;
	text-align: center;
}
.about-hero__inner {
	max-width: var(--about-maxw);
	margin-inline: auto;
}
.about-hero__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

/* ---------- CORPS EDITORIAL ---------- */
.about-prose {
	max-width: var(--about-maxw);
	margin-inline: auto;
	padding: 3.5rem 1.25rem 1rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--about-body);
}
.about-prose > * { margin-block: 0 1.25rem; }

/* Accroche + intro : les 2 premiers paragraphes, en lead. */
.about-prose > p:first-child {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	line-height: 1.35;
	font-weight: 700;
	color: var(--about-ink);
	margin-bottom: 1rem;
}
.about-prose > p:first-child + p {
	font-size: 1.1875rem;
	color: #4b5563;
	margin-bottom: 2.5rem;
}

.about-prose h2 {
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--about-ink);
	padding-inline-start: 0.9rem;
	border-inline-start: 4px solid var(--about-brand);
}
.about-prose p { color: var(--about-body); }
.about-prose strong { color: var(--about-ink); font-weight: 700; }
.about-prose a {
	color: var(--about-brand);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}
.about-prose a:hover { color: var(--about-brand-strong); }

/* ---------- « HOW IT WORKS » : la SEULE liste ordonnee du contenu -> etapes numerotees ---------- */
.about-prose ol {
	list-style: none;
	counter-reset: about-step;
	margin: 1.5rem 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.about-prose ol > li {
	counter-increment: about-step;
	position: relative;
	background: var(--about-soft);
	border: 1px solid var(--about-line);
	border-radius: 0.9rem;
	padding: 1.35rem 1.5rem 1.35rem 4.25rem;
	padding-inline-start: 4.25rem;
	padding-inline-end: 1.5rem;
	color: var(--about-body);
}
.about-prose ol > li::before {
	content: counter(about-step);
	position: absolute;
	inset-inline-start: 1.25rem;
	top: 1.15rem;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--about-brand);
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1;
}
.about-prose ol > li strong { display: block; color: var(--about-ink); margin-bottom: 0.15rem; }

/* ---------- « WHAT SETS US APART » : la SEULE liste a puces -> grille de cartes de valeurs ---------- */
.about-prose ul {
	list-style: none;
	margin: 1.5rem 0 2.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.about-prose ul { grid-template-columns: 1fr 1fr; }
}
.about-prose ul > li {
	background: var(--about-card);
	border: 1px solid var(--about-line);
	border-radius: 0.9rem;
	padding: 1.35rem 1.5rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	color: var(--about-body);
	border-top: 3px solid var(--about-brand);
}
.about-prose ul > li strong { display: block; color: var(--about-ink); margin-bottom: 0.2rem; font-size: 1.05rem; }

/* ---------- FAQ (accordeon <details>/<summary>, sans JS) ---------- */
.about-faq {
	max-width: var(--about-maxw);
	margin-inline: auto;
	padding: 2rem 1.25rem 4.5rem;
}
.about-faq__title {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--about-ink);
	text-align: center;
	margin: 0 0 2rem;
}
.about-faq__list { display: grid; gap: 0.85rem; }
.about-faq__item {
	background: var(--about-card);
	border: 1px solid var(--about-line);
	border-radius: 0.9rem;
	overflow: hidden;
}
.about-faq__item[open] { border-color: var(--about-brand); }
.about-faq__q {
	list-style: none;                 /* retire la fleche native (WebKit + standard) */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	font-weight: 700;
	color: var(--about-ink);
	font-size: 1.05rem;
	line-height: 1.4;
}
.about-faq__q::-webkit-details-marker { display: none; }
.about-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border-inline-end: 2.5px solid var(--about-muted);
	border-block-end: 2.5px solid var(--about-muted);
	transform: rotate(45deg);         /* chevron vers le bas */
	transition: transform 0.2s ease;
	margin-top: -0.25rem;
}
.about-faq__item[open] .about-faq__q::after { transform: rotate(-135deg); } /* vers le haut */
.about-faq__q:focus-visible { outline: 2px solid var(--about-brand); outline-offset: 2px; }
.about-faq__a {
	padding: 0 1.35rem 1.25rem;
	color: var(--about-body);
	line-height: 1.7;
}
.about-faq__a p { margin: 0 0 0.75rem; }
.about-faq__a p:last-child { margin-bottom: 0; }
.about-faq__a a { color: var(--about-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- RTL : reglages la ou le logique ne suffit pas ---------- */
[dir="rtl"] .about-prose ol > li::before { transform: none; }
/* le chevron doit pointer bas/haut identiquement en RTL : on repart du carre et on ne mire que le sens */
[dir="rtl"] .about-faq__q::after {
	border-inline-end: 2.5px solid var(--about-muted);
	border-block-end: 2.5px solid var(--about-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.about-hero { padding: 3rem 1rem 3.25rem; }
	.about-prose { padding-top: 2.5rem; }
	.about-prose ol > li { padding-inline-start: 3.75rem; }
}