/* ============================================================
   Pages légales EXPAWORLD : template astra-child
   ------------------------------------------------------------
   Tout est scopé sous .exw-legal pour éviter les collisions avec
   Astra, Elementor et le reader. Aucun reset global.
   Hero cognac signature, sommaire sticky desktop, card content
   blanche, typo Plus Jakarta Sans pour tout (--ew-font-title / --ew-font-body,
   definies dans style.css). Ni Source Serif 4 ni Inter ici.
   ============================================================ */

.exw-legal,
.exw-legal *,
.exw-legal *::before,
.exw-legal *::after {
	box-sizing: border-box;
}

.exw-legal {
	font-family: var(--ew-font-body);
	color: #2A2A2A;
}

/* ---- Hero --------------------------------------------------- */
.exw-legal__hero {
	background: linear-gradient(135deg, #9C6734 0%, #B88860 60%, #D9C5A8 100%);
	padding: 120px 60px 80px;
	/* Full-bleed : casse le container Astra parent, pattern aligné sur
	   .exw-fullwidth-hero utilisée sur /mon-compte. Overflow Chrome
	   neutralisé par overflow-x: hidden sur body / html (bas du fichier). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
}

.exw-legal__hero-inner {
	max-width: 1140px;
	margin: 0 auto;
}

.exw-legal__eyebrow {
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	margin-bottom: 14px;
}

.exw-legal__title {
	font-family: var(--ew-font-title);
	font-size: 48px;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 1.15;
	margin: 0;
}

/* ---- Container --------------------------------------------- */
.exw-legal__container {
	background: #FAFAFA;
	padding: 60px 40px 80px;
	/* Full-bleed : fond #FAFAFA en pleine largeur, contenu recentré
	   via .exw-legal__container-inner (max-width 1140px). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
}

.exw-legal__container-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 50px;
}

/* ---- Sommaire ---------------------------------------------- */
.exw-legal__toc {
	position: sticky;
	top: 100px;
	align-self: start;
}

.exw-legal__toc-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #888;
	font-weight: 500;
	margin-bottom: 18px;
}

.exw-legal__toc-nav {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.exw-legal__toc-nav a {
	font-size: 13px;
	color: #555;
	text-decoration: none;
	padding-left: 12px;
	margin-left: -14px;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-left-color 0.2s ease;
	line-height: 1.4;
}

.exw-legal__toc-nav a:hover {
	color: #1A1A1A;
}

.exw-legal__toc-nav a.exw-legal__toc-link--active {
	color: #9C6734;
	font-weight: 500;
	border-left-color: #9C6734;
}

/* ---- Card contenu ------------------------------------------ */
.exw-legal__content {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	border-radius: 14px;
	padding: 48px 52px;
	max-width: 720px;
}

/* Reset first/last child margin pour respect du padding card. */
.exw-legal__content > *:first-child {
	margin-top: 0;
}

.exw-legal__content > *:last-child {
	margin-bottom: 0;
}

/* ---- Typo contenu ------------------------------------------ */
.exw-legal__content h2 {
	font-family: var(--ew-font-title);
	font-size: 24px;
	font-weight: 500;
	color: #1A1A1A;
	line-height: 1.3;
	margin: 36px 0 14px;
	scroll-margin-top: 90px;
}

.exw-legal__content h2:first-child {
	margin-top: 0;
}

.exw-legal__content h3 {
	font-family: var(--ew-font-title);
	font-size: 17px;
	font-weight: 500;
	color: #1A1A1A;
	line-height: 1.4;
	margin: 24px 0 10px;
}

.exw-legal__content p,
.exw-legal__content li {
	font-family: var(--ew-font-body);
	font-size: 15.5px;
	line-height: 1.75;
	color: #2A2A2A;
}

.exw-legal__content p {
	margin: 0 0 18px;
}

.exw-legal__content ul,
.exw-legal__content ol {
	padding-left: 22px;
	margin: 0 0 18px;
}

.exw-legal__content li {
	margin-bottom: 4px;
}

.exw-legal__content a {
	color: #9C6734;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.exw-legal__content a:hover {
	color: #7E5128;
}

.exw-legal__content strong {
	font-weight: 500;
}

/* ---- Callout coordonnées légales --------------------------- */
.exw-legal__callout {
	background: #FAF5EE;
	border-left: 3px solid #9C6734;
	padding: 20px 24px;
	border-radius: 0 8px 8px 0;
	margin: 0 0 32px;
	font-size: 14.5px;
	line-height: 1.75;
}

.exw-legal__callout p,
.exw-legal__callout li {
	font-size: 14.5px;
	line-height: 1.75;
}

.exw-legal__callout > *:last-child {
	margin-bottom: 0;
}

/* ---- Reset wrappers Astra sur le template page-legal ------- */
/* Tue les paddings, margins et max-width des conteneurs parents
   Astra UNIQUEMENT dans le content area (`.site-content`, `#content`,
   `#primary`, `.entry-content`). Le `.ast-container` du header et du
   footer reste intact : sinon le padding-right de l'icône panier
   nav saute et le badge "0" se fait couper.
   Scopé strict via body.page-template-page-legal* (deux variantes
   pour couvrir les conventions de slug WP/Astra). Aucun impact hors
   pages légales. `!important` nécessaire pour neutraliser les règles
   Customizer injectées par Astra avec une spécificité élevée. */
body.page-template-page-legal-php,
body.page-template-page-legal {
	background: #FAFAFA;
}

/* Reset des wrappers content, JAMAIS du header ni du footer. */
body.page-template-page-legal-php .site-content,
body.page-template-page-legal-php #content,
body.page-template-page-legal-php #primary,
body.page-template-page-legal-php .entry-content,
body.page-template-page-legal .site-content,
body.page-template-page-legal #content,
body.page-template-page-legal #primary,
body.page-template-page-legal .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* `.ast-container` ciblé UNIQUEMENT à l'intérieur de `.site-content` :
   préserve les `.ast-container` du header (logo + menu + panier) et
   du footer. */
body.page-template-page-legal-php .site-content .ast-container,
body.page-template-page-legal .site-content .ast-container {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* ---- Fix overflow horizontal Chrome lié au hack 100vw ------ */
/* `.exw-legal__hero` et `.exw-legal__container` utilisent
   `width: 100vw` + `margin-left: calc(50% - 50vw)` pour casser
   le container Astra. Sur Chrome (scrollbar non-overlay), 100vw
   inclut la largeur de la scrollbar verticale, ce qui crée un
   overflow horizontal de quelques pixels et décale tout le
   layout. Safari (overlay scrollbar) n'a pas le problème.
   Fix : neutraliser l'overflow au niveau body + html, scopé
   strict au template page-legal pour zéro impact ailleurs.
   `html:has(...)` couvre le cas où le scroll vient de <html>. */
body.page-template-page-legal-php,
body.page-template-page-legal {
	overflow-x: hidden !important;
}

html:has(body.page-template-page-legal-php),
html:has(body.page-template-page-legal) {
	overflow-x: hidden !important;
}

/* ---- Override contraintes largeur Complianz --------------- */
/* Le shortcode `[cmplz-document type="..."]` (utilisé sur Politique
   de confidentialité et Politique de cookies) injecte ses propres
   wrappers (`.cmplz-document`, `.cmplz-document-wrap`, `#cmplz-document`)
   qui imposent un `max-width` interne. Résultat : sur Chrome, le
   hero et le content area de `.exw-legal__content` se retrouvent
   contraints visuellement par le rendu Complianz.
   Scope strict `.exw-legal__content` : zéro impact sur les autres
   pages utilisant Complianz ailleurs sur le site (bannière cookies,
   etc.). Sélecteur d'attribut `[class*="cmplz-"]` couvre toutes
   les variantes de classes que Complianz peut injecter. */
.exw-legal__content .cmplz-document,
.exw-legal__content [class*="cmplz-"],
.exw-legal__content .cmplz-document-wrap,
.exw-legal__content #cmplz-document {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Tables Complianz (overview cookies) doivent respecter le container
   parent et non déborder via leur largeur native. */
.exw-legal__content .cmplz-cookies-overview,
.exw-legal__content table {
	width: 100% !important;
	max-width: 100% !important;
}

/* ---- Force .ast-container du content area en full-width ---- */
/* Cause identifiée à l'inspection sur Pol conf / Pol cookies UE :
   le `.ast-container` parent direct de `.exw-legal` est contraint
   à `max-width: 1140px`. Le hack `width: 100vw + calc(50% - 50vw)`
   du hero calcule alors par rapport à ce parent contraint et non
   par rapport au viewport, ce qui donne un hero qui ne couvre
   que ~80 % de la largeur visible sur Chrome.

   Fix : forcer le `.ast-container` à 100 % UNIQUEMENT à l'intérieur
   du content area (`#content` ou `.site-content`), pour que le
   calc(50% - 50vw) du hero parte d'un parent qui occupe vraiment
   le viewport. Couvre les deux conventions DOM (`#content` ID,
   `.site-content` class) selon les variantes Astra.

   Le `.ast-container` du header (logo + menu + panier WooCommerce)
   reste intact car non descendant de `#content` / `.site-content`.

   Note : un override partiel existait déjà dans la section "Reset
   wrappers Astra" (patch 3) avec `max-width: none`. Cette règle
   ci-dessous est plus précise (`max-width: 100%`) et étend la
   couverture à `#content .ast-container`. Source order CSS = cette
   règle l'emporte sur la précédente pour les sélecteurs communs. */
body.page-template-page-legal-php #content .ast-container,
body.page-template-page-legal #content .ast-container,
body.page-template-page-legal-php .site-content .ast-container,
body.page-template-page-legal .site-content .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---- Force ultime .ast-container full-bleed (patch 9) ------ */
/* Constat empirique : à petit viewport (~700px), rendu correct.
   À grand viewport (>1140px), le hero ne couvre que ~80 % du
   viewport. Hypothèse confirmée par inspection : `.ast-container`
   reste contraint à `max-width: 1140px` malgré les overrides
   patches 3 / 8 (Astra ré-applique sa règle via Customizer avec
   spécificité ou ordre de chargement plus tardif), ET applique
   probablement un overflow qui clippe visuellement les enfants
   en débordement (le hero a la bonne géométrie calc, mais il est
   coupé par les bords du `.ast-container` parent).

   Fix : technique full-bleed classique appliquée directement sur
   le `.ast-container` direct enfant de `#content` / `.site-content`.
   `position: relative + left: 50% + margin-left: -50vw + width: 100vw`
   force visuellement le container à occuper exactement le viewport,
   quel que soit le parent et quelle que soit la spécificité des
   règles Astra concurrentes. Le combo position + transform est
   plus robuste que `width: 100%` car il agit sur le rendu visuel
   et pas sur le sizing calculé.

   Sélecteur enfant direct `>` : ne touche QUE le `.ast-container`
   direct de `#content` / `.site-content`. Le header garde son
   `.ast-container` intact (non descendant de `#content`).

   L'overflow-x: hidden sur body / html (patches 4 / 6) garantit
   qu'aucun scroll horizontal n'apparaît malgré les 100vw. */
body.page-template-page-legal-php #content > .ast-container,
body.page-template-page-legal #content > .ast-container,
body.page-template-page-legal-php .site-content > .ast-container,
body.page-template-page-legal .site-content > .ast-container {
	max-width: 100vw !important;
	width: 100vw !important;
	padding: 0 !important;
	margin: 0 !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

/* ---- Fix tables HTML qui débordent sur Chrome (patch 10) --- */
/* Pol conf contient une `<table>` HTML pure (Finalités et bases
   légales). Pol cookies UE en contient via le shortcode Complianz.
   ML et CGV n'en ont pas, c'est pourquoi le problème n'apparaît
   que sur ces deux pages.

   Hypothèse : sans `table-layout: fixed`, Chrome calcule la
   largeur de la table d'après le contenu de ses cellules (URLs
   longues, libellés non-cassables) et peut faire déborder la
   table de son parent, ce qui décale le layout du hero / container.

   Fix : forcer `table-layout: fixed` + `word-wrap: break-word`
   sur les cellules pour que le contenu reste dans la largeur du
   parent. Stylisation th / td homogène avec le ton EXPAWORLD
   (background cognac clair sur th, border #E5E5E5).

   Source order : cette règle écrase la déclaration partielle
   `.exw-legal__content table` du patch 7 sur les propriétés
   communes (`width`, `max-width`). */
.exw-legal__content table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	word-wrap: break-word !important;
	margin: 16px 0 !important;
}

.exw-legal__content table th,
.exw-legal__content table td {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	padding: 8px 12px !important;
	border: 1px solid #E5E5E5 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	vertical-align: top !important;
}

.exw-legal__content table th {
	background: #FAF5EE !important;
	font-weight: 500 !important;
	text-align: left !important;
}

.exw-legal__content table thead {
	background: #FAF5EE !important;
}

/* ---- Responsive (≤ 900px) ---------------------------------- */
@media (max-width: 900px) {
	.exw-legal__hero {
		padding: 100px 24px 60px;
	}

	.exw-legal__title {
		font-size: 34px;
	}

	.exw-legal__container {
		padding: 40px 20px 60px;
	}

	.exw-legal__container-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.exw-legal__toc {
		position: relative;
		top: auto;
		padding-bottom: 24px;
		border-bottom: 1px solid #E5E5E5;
	}

	.exw-legal__toc-nav a {
		font-size: 14px;
	}

	.exw-legal__content {
		max-width: none;
		padding: 32px 24px;
	}
}