/* ==========================================================================
   La Table de Lalia — legal pages (Mentions légales, Conditions
   d'utilisation, Politique de confidentialité).

   Values transcribed from the original:
     --w-accordion-padding: 20px    row padding, top and bottom
     --w-accordion-offset:  30px    gap between the title block and the list
     --w-subtitle-offset:   25px    gap between a row heading and its body
     divider: 1px, --dark-shade at 20% opacity, along the row's bottom edge
     icon:    15px box, 2px bars, 3px radius, .8 opacity (1 on hover)
     motion:  height .3s ease
   ========================================================================== */

:root {
	--accordion-padding: 20px;
	--accordion-offset: 30px;
	--accordion-icon: 15px;
	--accordion-body-offset: 25px;
}

/* ------------------------------------------------------------- page title */

/* Vertical rhythm, measured off the captures at 1440 / 1200 / 992 / 768 / 375.
   The original builds each page from a title block and an accordion block, and
   their padding is set per page AND per breakpoint in the builder, so it does
   not follow --section-v. The values are transcribed rather than derived:

                        above title       title→row1      below last row
     >=992   mentions   200               40              200
     >=992   others     300               100             200
     768-991 all        250               95 (35)         155
     <768    all        220               80 (30)         120

   Mentions keeps a tighter title gap at every width; the others share theirs.
   Reproduced exactly because the bar for this rebuild is "indistinguishable". */
.legal {
	padding-top: 300px;
	padding-bottom: 200px;
}

.legal__title {
	text-align: center;
	margin-bottom: 100px;
}

.legal--mentions-legales { padding-top: 200px; }
.legal--mentions-legales .legal__title { margin-bottom: 40px; }

@media (min-width: 768px) and (max-width: 991px) {
	.legal,
	.legal--mentions-legales {
		padding-top: 250px;
		padding-bottom: 155px;
	}
	.legal__title { margin-bottom: 95px; }
	.legal--mentions-legales .legal__title { margin-bottom: 35px; }
}

@media (max-width: 767px) {
	.legal,
	.legal--mentions-legales {
		padding-top: 220px;
		padding-bottom: 120px;
	}
	.legal__title { margin-bottom: 80px; }
	.legal--mentions-legales .legal__title { margin-bottom: 30px; }
}

/* The original breaks the title over two lines and keeps it that way at every
   width — it is a designed break, not a wrap. */
.legal__title-line { display: block; }

/* ---------------------------------------------------------------- accordion */

/* Measured against the capture: the list runs the full container width
   (1170px inside the 1200px container at desktop), not a narrower text column. */
.accordion {
	width: 100%;
}

.accordion__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.accordion__item {
	position: relative;
	width: 100%;
}

/* One hairline per row, along the bottom edge. */
.accordion__item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--dark-shade);
	opacity: .2;
	pointer-events: none;
}

.accordion__heading {
	margin: 0;
	font: inherit;
}

/* The whole row is the control. Reset the button back to a block of text. */
.accordion__trigger {
	display: flex;
	align-items: center;
	gap: var(--accordion-padding);
	width: 100%;
	padding: var(--accordion-padding) 0;
	margin: 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.accordion__label {
	flex: 1;
	min-width: 0;
	font-weight: 700;
}

/* ------------------------------------------------------------------- icon */

.accordion__icon {
	position: relative;
	flex: none;
	width: var(--accordion-icon);
	height: var(--accordion-icon);
	opacity: .8;
	transition: opacity .2s ease;
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--dark-shade);
	border-radius: 3px;
}

/* Vertical bar collapses to nothing when the row opens: + becomes −. */
.accordion__icon::before {
	width: 2px;
	height: 100%;
	transition: height .3s ease;
}

.accordion__icon::after {
	width: 100%;
	height: 2px;
}

.accordion__trigger:hover .accordion__icon { opacity: 1; }

.accordion__trigger[aria-expanded="true"] .accordion__icon::before { height: 0; }

/* ------------------------------------------------------------------ panel */

/* Rendered open: with JavaScript off the legal text must still be readable.
   The accordion module collapses these on init. */
.accordion__panel {
	width: 100%;
	overflow: hidden;
	transition: height .3s ease;
}

.accordion__panel[hidden] { display: none; }

.accordion__body {
	padding-bottom: var(--accordion-padding);
}

.accordion__body > *:first-child { margin-top: 0; }

.accordion__body p { margin: 0; }
.accordion__body p + p { margin-top: var(--accordion-body-offset); }

.accordion__body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- fallback */

/* Used only if a page assigned this template has no <h3> sections yet. */
.legal__fallback { width: 100%; }
.legal__fallback p + p { margin-top: var(--accordion-body-offset); }

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	.accordion__panel,
	.accordion__icon::before {
		transition: none;
	}
}