/*
 * Sillage — "Informations & services" (template-information.php).
 * Reprend telle quelle la maquette validée (Sillage_Informations_Services_Legal_V1).
 *
 * Scopé sous #sillage-information, avec sa propre redéclaration locale de
 * la palette — même discipline que cart.css/checkout.css/auth.css/
 * contact.css.
 */

#sillage-information {
	--paper: #eee7dc;
	--soft: #f8f3eb;
	--stone: #ddd2c2;
	--ink: #171411;
	--muted: #766b60;
	--line: #cbbdac;
	--dark2: #211b17;
	--tobacco: #3d5348;
	--bronze: #6f9483;
	--ivory: #f7f2e9;
	background: var(--paper);
	color: var(--ink);
	line-height: 1.7;
}
#sillage-information section { padding: 0; }
#sillage-information h2, #sillage-information h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; }
#sillage-information h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: -.04em; }
#sillage-information h3 { font-size: 1.35rem; }
#sillage-information p { margin: 0; color: var(--muted); }
#sillage-information .eyebrow { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
#sillage-information .btn {
	display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; border: 1px solid currentColor;
	text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; background: transparent; min-height: 44px; cursor: pointer;
}

/* Le hero de cette page est désormais le composant partagé Sillage Page
   Header (assets/css/page-header.css), rendu hors de #sillage-information. */

/* ---------- Layout ---------- */
#sillage-information .legal-layout { display: grid; grid-template-columns: 280px 1fr; gap: 54px; padding: clamp(70px, 8vw, 130px) 0; align-items: start; }

/* ---------- Sidebar TOC ---------- */
#sillage-information .side { position: sticky; top: 24px; background: var(--dark2); color: #fff; padding: 28px; }
#sillage-information .side .eyebrow { color: #a8c4b8; }
#sillage-information .side h3 { margin: 8px 0 18px; color: #fff; }
#sillage-information .side nav { display: grid; }
#sillage-information .side nav a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #c8bbae; font-size: .8rem; }
#sillage-information .side nav a:last-child { border-bottom: 0; }
#sillage-information .side nav a.active, #sillage-information .side nav a:hover { color: #fff; }
#sillage-information .side nav a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
#sillage-information .side .contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
#sillage-information .side .contact p { color: #a99b8e; font-size: .82rem; }
#sillage-information .side .btn { margin-top: 16px; color: #fff; width: 100%; }
#sillage-information .side-toggle { display: none; }

/* ---------- Content ---------- */
#sillage-information .content { min-width: 0; }
#sillage-information .intro { background: var(--soft); border: 1px solid var(--line); padding: 34px; margin-bottom: 20px; }
#sillage-information .intro h2 { font-size: clamp(2.2rem, 3vw, 3rem); margin: 10px 0 18px; }
#sillage-information .intro p { font-size: 1.02rem; }

#sillage-information .section-before { margin-bottom: 20px; }
#sillage-information .section {
	background: var(--soft); border: 1px solid var(--line); padding: 36px; margin-top: 20px; scroll-margin-top: 100px;
}
#sillage-information .section > .eyebrow { color: #4d6a5a; }
#sillage-information .section p, #sillage-information .section li { max-width: 680px; }
#sillage-information .section h2 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); margin: 10px 0 24px; }
#sillage-information .section h3 { margin: 28px 0 10px; }
#sillage-information .section p + p { margin-top: 14px; }
#sillage-information .section ul, #sillage-information .section ol { color: var(--muted); padding-left: 20px; margin: 14px 0; }
#sillage-information .section li + li { margin-top: 8px; }
#sillage-information .section a { color: var(--tobacco); text-decoration: underline; }
#sillage-information .section blockquote { margin: 20px 0; padding-left: 22px; border-left: 3px solid var(--bronze); font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
#sillage-information .section table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
#sillage-information .section table th, #sillage-information .section table td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
#sillage-information .section table th { background: var(--stone); }

/* Callouts + info cards: no native Gutenberg block matches these exactly,
   so any core block wrapped in a paragraph starting with the visual cue
   below isn't targeted — editors instead reach these via a "Group" block
   given the "callout" or "info-grid"/"info-card" custom CSS class(es) in
   the block's Advanced panel (documented for the client separately). */
#sillage-information .callout { margin: 26px 0; background: var(--stone); border-left: 4px solid var(--bronze); padding: 22px 24px; }
#sillage-information .callout strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; display: block; color: var(--ink); }
#sillage-information .callout p { margin-top: 12px; }

#sillage-information .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
#sillage-information .info-card { background: #f3ede4; border: 1px solid var(--line); padding: 22px; }
#sillage-information .info-card strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; display: block; color: var(--ink); }
#sillage-information .info-card p { margin-top: 10px; font-size: .88rem; }

/* Accordion: native <details>/<summary> — no JS required at all. Ouverture
   confiée au navigateur (pas de hauteur animée), mais le contenu révélé
   s'anime en fondu/glissement et le repère +/× tourne, pour que l'ouverture
   ne soit jamais un simple "saut" instantané. */
#sillage-information .accordion { margin-top: 20px; border-top: 1px solid var(--line); }
#sillage-information .accordion details { border-bottom: 1px solid var(--line); padding: 16px 0; }
#sillage-information .accordion summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#sillage-information .accordion summary::-webkit-details-marker { display: none; }
#sillage-information .accordion summary:after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.3rem; color: var(--bronze); transition: transform .3s ease; }
#sillage-information .accordion details[open] summary:after { transform: rotate(45deg); }
#sillage-information .accordion summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
#sillage-information .accordion details p { margin-top: 12px; }
@keyframes sillageAccordionReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
#sillage-information .accordion details[open] p { animation: sillageAccordionReveal .3s ease; }

#sillage-information .updated { margin-top: 26px; font-size: .78rem; color: #8c7e71; }
#sillage-information .updated strong { color: var(--ink); }

/* ---------- Service links band ---------- */
#sillage-information .service-links { background: var(--tobacco); color: #fff; padding: clamp(70px, 8vw, 120px) 0; }
#sillage-information .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#sillage-information .service-card { border: 1px solid rgba(255, 255, 255, .2); padding: 26px; }
#sillage-information .service-card .eyebrow { color: #d7b68e; }
#sillage-information .service-card h3 { margin: 10px 0; color: #fff; }
#sillage-information .service-card p { color: #d9cabc; }
#sillage-information .service-card a { display: inline-block; margin-top: 18px; font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	#sillage-information .legal-layout { grid-template-columns: 1fr; }
	#sillage-information .side { position: static; }
	#sillage-information .side nav { grid-template-columns: 1fr 1fr; gap: 0 20px; }
	#sillage-information .service-grid { grid-template-columns: 1fr 1fr; }

	/* Sommaire repliable sur mobile: collapsed by default via a details/
	   summary-like toggle button that JS wires up (information.js). */
	#sillage-information .side-toggle {
		display: flex; width: 100%; justify-content: space-between; align-items: center; background: transparent; border: 0;
		color: #fff; font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; padding: 0; cursor: pointer;
	}
	#sillage-information .side-toggle .chevron { transition: transform .2s; }
	#sillage-information .side.is-collapsed .side-toggle .chevron { transform: rotate(-90deg); }
	#sillage-information .side.is-collapsed nav,
	#sillage-information .side.is-collapsed .contact { display: none; }
	#sillage-information .side h3 { display: none; }
}
@media (max-width: 640px) {
	#sillage-information .info-grid, #sillage-information .service-grid { grid-template-columns: 1fr; }
	#sillage-information .side nav { grid-template-columns: 1fr; }
}