/* =========================================================================
   PAGES D'INFORMATION — maquette « Signature »
   (refonte-kinthia.com/page-signature.php?page=mentions-legales), intégrée le
   29/09/2026 (D-77)
   =========================================================================

   Feuille de zone : chargée sur les pages au modèle « Page d'information »
   (page-templates/information.php, kin_enqueue_zone_styles()). Les pages de
   contact et de questions fréquentes en reprennent le cadre (zone de contenu,
   fil d'Ariane) : elles chargent cette feuille, puis la leur, kin-contact.css
   (D-79) ou kin-faq.css (D-80). De même l'accès au compte d'un visiteur non
   connecté, mis en page par deux layouts Woodmart (kin-compte.css, D-81).
   Et la page 404 (404.php, kin-404.css), la liste de souhaits d'un visiteur
   (page-templates/souhaits.php, kin-souhaits.css).

   Fil d'Ariane, bandeau sauge (titre, extrait), puis deux colonnes : le
   sommaire des <h2>, collant, et le texte. Dès 900 px, une colonne, sommaire
   repliable au-dessus du texte.

   Mobile d'abord. Paliers de la maquette : 581, 901 et 1101 px. Gouttière
   mobile de 15 px et non les 20 de la maquette : celle de l'accueil, du blog
   et des pages boutique (demande du client, 28/09).

   Le texte vient tel quel de la page (un bloc HTML, des <h2>, des <p>) : pas
   de sections enveloppantes, les filets entre sections sont portés par les
   <h2>, avec les mêmes écarts (30 px au-dessus du filet, 20 en dessous).
   ========================================================================= */

/* ---- Zone de contenu : pleine largeur plafonnée (kin_information_pleine_largeur()) ---- */

:is(.page-template-page-templatesinformation-php, .page-template-page-templatescontact-php, .page-template-page-templatesfaq-php, .page-template-page-templatesapropos-php, .woocommerce-account, .kin-espace-client, .error404, .kin-souhaits-page) .wd-content-layout {
	--kin-info-encre: #48354f;
	--kin-info-prune: #64466e;
	--kin-info-texte: #5e5361;
	--kin-info-filet: #dfd9d0;

	color: #382b3e;

	/* `flow-root` : la marge haute du fil d'Ariane reste dans la zone (WD-57). */
	display: flow-root;
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 15px 40px;
}

.kin-info.kin-info {
	width: 100%;
	max-width: none;
	padding: 0;
}

@media (min-width: 581px) {
	:is(.page-template-page-templatesinformation-php, .page-template-page-templatescontact-php, .page-template-page-templatesfaq-php, .page-template-page-templatesapropos-php, .woocommerce-account, .kin-espace-client, .error404, .kin-souhaits-page) .wd-content-layout {
		padding: 0 26px 48px;
	}
}

@media (min-width: 901px) {
	:is(.page-template-page-templatesinformation-php, .page-template-page-templatescontact-php, .page-template-page-templatesfaq-php, .page-template-page-templatesapropos-php, .woocommerce-account, .kin-espace-client, .error404, .kin-souhaits-page) .wd-content-layout {
		padding: 0 48px 72px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.kin-info) {
		scroll-behavior: smooth;
	}
}

/* ---- Fil d'Ariane (Rank Math, kin_render_breadcrumbs()) ---- */

/* Le balisage de Rank Math : <nav> > <a>, <span class="separator"> / </span>,
   <span class="last">. En flex, les espaces du séparateur tombent : l'écart
   vient du `gap`. */
.kin-info .kin-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	font-size: 11px;
	line-height: 1.6;
	color: #776e79;
}

.kin-info .kin-breadcrumb a,
.kin-info .kin-breadcrumb .last {
	color: inherit;
}

.kin-info .kin-breadcrumb a:hover {
	color: var(--kin-info-prune);
}

.kin-info .kin-breadcrumb .separator {
	margin: 0;
}

@media (min-width: 581px) {
	.kin-info .kin-breadcrumb {
		margin-block: 24px;
	}
}

/* ---- Bandeau : titre et introduction (l'extrait de la page) ---- */

.kin-info .kin-info__bandeau {
	padding: 30px 25px;
	border-block-end: 1px solid #d4ddcf;
	background-color: #e9eee5;
}

/* Deux classes : `.title`, `h1` et les réglages de titres du thème. */
.kin-info .kin-info__titre.kin-info__titre {
	margin: 0 0 18px;
	font-size: 35px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: #3e4b39;
}

.kin-info .kin-info__intro p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: #606e5a; /* maquette #61705b, 4,48:1 sur le sauge */
}

.kin-info .kin-info__intro p + p {
	margin-block-start: 0.6em;
}

@media (min-width: 581px) {
	.kin-info .kin-info__bandeau {
		padding: 34px;
	}

	.kin-info .kin-info__titre.kin-info__titre {
		font-size: clamp(34px, 4vw, 52px);
	}

	.kin-info .kin-info__intro p {
		font-size: 14px;
	}
}

@media (min-width: 901px) {
	.kin-info .kin-info__bandeau {
		padding: 42px 48px 44px;
	}

	/* La maquette coupe son introduction en deux lignes par un <br> ; ici, une
	   mesure de ligne, qui vaut pour toutes les pages et ne soude aucun mot en
	   mobile (la maquette masquait le <br> et collait « Kinthia,à »). */
	.kin-info .kin-info__intro p {
		max-width: 26.2em;
	}
}

/* ---- Deux colonnes : sommaire et texte ---- */

.kin-info .kin-info__corps {
	margin-block-start: 28px;
}

.kin-info .kin-info__aside {
	margin-block-end: 32px;
}

@media (min-width: 901px) {
	.kin-info .kin-info__corps {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 38px;
		max-width: 1160px;
		margin: 48px auto 0;
	}

	/* Sans sommaire (moins de deux intertitres), le texte seul, centré. */
	.kin-info .kin-info__corps--seul {
		grid-template-columns: minmax(0, 740px);
		justify-content: center;
	}

	/* Un long sommaire (les 24 articles des conditions de vente) dépasse l'écran :
	   il défile alors dans sa colonne, sous l'en-tête collant. Ses liens restent
	   atteignables au clavier (le focus fait défiler la colonne). */
	.kin-info .kin-info__aside {
		position: sticky;
		inset-block-start: 115px;
		align-self: start;
		max-height: calc(100vh - 135px);
		margin: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

@media (min-width: 1101px) {
	.kin-info .kin-info__corps {
		grid-template-columns: 245px minmax(0, 740px);
		justify-content: space-between;
		gap: 64px;
	}
}

/* ---- Le sommaire ----
   Un <details> : fermé à l'impression (kin_information_sommaire()), ouvert par
   kin.js en desktop, où son titre n'est plus cliquable (maquette). Sur
   téléphone, repliable, un « + » qui tourne en « × ». */

.kin-info .kin-info__sommaire {
	border-block: 1px solid #cdbfd1;
}

.kin-info .kin-info__sommaire-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: #4c3855;
	list-style: none;
	cursor: pointer;
}

.kin-info .kin-info__sommaire-titre::-webkit-details-marker {
	display: none;
}

.kin-info .kin-info__sommaire-signe::before {
	content: "+";
	display: block;
	font-size: 23px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.kin-info .kin-info__sommaire[open] .kin-info__sommaire-signe::before {
	transform: rotate(45deg);
}

.kin-info .kin-info__sommaire-liste {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	padding: 0 0 16px;
	list-style: none;
}

.kin-info .kin-info__sommaire-liste li {
	margin: 0;
}

.kin-info .kin-info__sommaire-liste a {
	display: block;
	padding: 7px 12px;
	border-inline-start: 2px solid transparent;
	font-size: 12px;
	line-height: 1.5;
	color: #746778;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kin-info .kin-info__sommaire-liste a:hover,
.kin-info .kin-info__sommaire-liste a[aria-current] {
	border-inline-start-color: var(--kin-info-prune);
	background-color: #eee9f0;
	color: #51395c;
}

@media (min-width: 901px) {
	.kin-info .kin-info__sommaire {
		border-block-end: 0;
	}

	.kin-info .kin-info__sommaire-titre {
		pointer-events: none;
	}

	.kin-info .kin-info__sommaire-signe {
		display: none;
	}
}

/* ---- Le texte ---- */

/* Le retrait du bas est celui de la dernière section de la maquette. */
.kin-info .kin-info__texte {
	min-width: 0;
	margin: 0;
	padding-block-end: 25px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--kin-info-texte);
	overflow-wrap: anywhere;
}

/* Deux classes pour les enfants du texte : Woodmart leur pose ses propres
   marges, dans une feuille chargée après la nôtre (WD-47). */
.kin-info .kin-info__texte.kin-info__texte h2 {
	margin: 0 0 17px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--kin-info-encre);
	scroll-margin-block-start: 100px;
}

/* Le filet entre deux sections : 25 px sous le texte (marges fusionnées avec
   celles du paragraphe), le filet, 20 px au-dessus du titre suivant. */
.kin-info .kin-info__texte.kin-info__texte h2:not(:first-child) {
	margin-block-start: 25px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--kin-info-filet);
}

.kin-info .kin-info__texte.kin-info__texte h3 {
	margin: 23px 0 12px;
	font-family: var(--wd-text-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--kin-info-encre);
}

.kin-info .kin-info__texte.kin-info__texte p {
	margin: 0 0 17px;
}

.kin-info .kin-info__texte.kin-info__texte > :last-child {
	margin-block-end: 0;
}

/* Listes : l'écart des paragraphes, une puce discrète. */
.kin-info .kin-info__texte.kin-info__texte :is(ul, ol) {
	margin: 0 0 17px;
	padding-inline-start: 1.3em;
}

.kin-info .kin-info__texte.kin-info__texte li {
	margin: 0 0 6px;
}

.kin-info .kin-info__texte li::marker {
	color: #9c859e;
}

/* Tableaux (politique de confidentialité) : filets fins, en-têtes en texte
   courant et non en capitales. Dans une cellule, un mot ne se coupe qu'à
   défaut de place (`break-word`, et césure) : `anywhere`, hérité du texte,
   laissait le tableau réduire ses colonnes jusqu'à couper chaque mot. */
/* Le cadre défile quand le tableau dépasse (téléphone) : jamais de texte rogné. */
.kin-info .kin-info__tableau {
	margin: 0 0 20px;
	overflow-x: auto;
}

.kin-info .kin-info__tableau:focus-visible {
	outline: 2px solid var(--kin-info-prune);
	outline-offset: 4px;
}

.kin-info .kin-info__texte.kin-info__texte table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 12px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.kin-info .kin-info__texte.kin-info__texte :is(th, td) {
	padding: 10px 12px 10px 0;
	border: 0;
	border-block-end: 1px solid var(--kin-info-filet);
	background: none;
	text-align: start;
	vertical-align: top;
	hyphens: auto;
}

.kin-info .kin-info__texte.kin-info__texte th {
	border-block-end-color: #cdbfd1;
	font-family: var(--wd-text-font);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kin-info-encre);
}

.kin-info .kin-info__texte td > div + div {
	margin-block-start: 4px;
}

.kin-info .kin-info__texte :is(b, strong) {
	font-weight: 500;
	color: var(--kin-info-encre);
}

.kin-info .kin-info__texte a {
	color: var(--kin-info-prune);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kin-info :is(.kin-breadcrumb, .kin-info__sommaire, .kin-info__texte) a:focus-visible,
.kin-info .kin-info__sommaire-titre:focus-visible {
	outline: 2px solid var(--kin-info-prune);
	outline-offset: 4px;
}

@media (min-width: 581px) {
	.kin-info .kin-info__texte {
		padding-block-end: 30px;
		font-size: 14px;
		line-height: 1.95;
	}

	.kin-info .kin-info__texte.kin-info__texte h2 {
		margin-block-end: 20px;
		font-size: 27px;
		scroll-margin-block-start: 120px;
	}

	.kin-info .kin-info__texte.kin-info__texte h2:not(:first-child) {
		margin-block-start: 30px;
	}
}