/* ==========================================================================
   WHEREAT · Pages légales
   --------------------------------------------------------------------------
   Les mentions, les CGU et la confidentialité. Elles partagent la direction
   artistique de la vitrine (index.php) et de l'app : même papier crème,
   même rouge de marque, même Inter, mêmes rayons.

   Elles étaient restées sur un thème sombre en Archivo/Roboto, hérité de
   l'ancienne version B2B du site — un produit visuellement différent de
   celui vers lequel elles renvoient.

   Un document juridique se lit longtemps et se consulte par recherche :
   la mise en page vise la lecture suivie, pas l'effet. Une seule colonne
   de 760 px, des articles séparés par un filet plutôt que par des cartes
   empilées, et une numérotation qui reste visible quand on parcourt.
   ========================================================================== */

:root {
  /* Neutres chauds — repris de app/assets/css/whereat.css § 01 */
  --n-0: #FFFFFF;  --n-50: #F7F6F4;  --n-100: #F0EEEB; --n-150: #E7E4DF;
  --n-200: #DCD8D2; --n-300: #C6C1B9; --n-400: #A29C93; --n-500: #7C766C;
  --n-600: #5C574F; --n-700: #423E38; --n-900: #1A1815;

  /* Marque */
  --brand: #DC3C24;  --brand-hover: #C4331F;  --brand-text: #B62E17;
  --brand-soft: #FDF0ED;  --brand-line: #F5C9BF;

  /* Surfaces : le même papier que l'app */
  --bg: #F7F4EF;  --surface: #FFFFFF;  --surface-2: #F7F4EF;
  --surface-3: #EDE8DF;  --ink-block: #1A1815;

  /* Texte */
  --t-1: #1A1815;  --t-2: #5C574F;  --t-3: #6E685E;
  --t-on-dark: #FFFFFF;  --t-on-dark-2: rgba(255,255,255,.68);

  /* Filets */
  --line: #EBE6DD;  --line-2: #E1DBD1;  --line-3: #CDC6BA;

  /* Ombres, neutres et jamais teintées */
  --sh-1: 0 1px 2px rgba(26,24,21,.05);
  --sh-2: 0 2px 4px rgba(26,24,21,.04), 0 4px 12px rgba(26,24,21,.06);
  --sh-3: 0 4px 8px rgba(26,24,21,.05), 0 12px 28px rgba(26,24,21,.09);

  /* Typographie */
  --disp: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --round: 'Baloo 2', 'Inter Tight', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rayons */
  --r-xs: 6px; --r-sm: 9px; --r: 12px; --r-md: 14px;
  --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Rythme */
  --pad: clamp(18px, 5vw, 32px);
  --col: 760px;
  --col-wide: 1120px;
  --nav-h: 58px;

  --ease: cubic-bezier(.32,.72,0,1);
  --t-fast: 130ms cubic-bezier(.32,.72,0,1);
  --t-med: 220ms cubic-bezier(.32,.72,0,1);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Une ancre visée depuis le sommaire ne doit pas se cacher sous la barre. */
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
html, body { background: var(--bg); }
body {
  font-family: var(--body);
  font-size: 16px; line-height: 1.68;
  color: var(--t-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand-text); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-xs); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 18px; background: var(--ink-block); color: #fff;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ══ La barre du haut ══
   Comme dans l'app : pas de fond à elle, le papier la traverse. */
.lg-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
}
.lg-nav__in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 14px;
  max-width: var(--col-wide); margin: 0 auto;
  padding: 0 var(--pad);
}
.lg-nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.lg-nav__logo img { height: 28px; width: auto; transition: opacity var(--t-fast); }
@media (hover: hover) { .lg-nav__logo:hover img { opacity: .7; } }
.lg-nav__back {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px 0 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  color: var(--t-1); font-size: .87rem; font-weight: 600;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lg-nav__back:hover { text-decoration: none; background: var(--surface-3); }
.lg-nav__back i { font-size: 1rem; color: var(--t-3); }

/* ══ L'en-tête du document ══ */
.lg-wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); }
.lg-head { padding: clamp(34px, 6vw, 60px) 0 clamp(24px, 4vw, 36px); }

/* L'étiquette en pastille, comme les sur-titres de la vitrine. */
.lg-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 13px 0 11px; margin-bottom: 16px;
  border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-text);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.lg-kicker i { font-size: .95rem; }

/* Le titre prend la ronde du logo : c'est un grand titre, il porte la
   voix de la marque comme les h1 de la vitrine. */
.lg-head h1 {
  font-family: var(--round);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: var(--t-1); text-wrap: balance;
}
.lg-head h1 em { font-style: normal; color: var(--brand); }
.lg-head p {
  margin-top: 14px; max-width: 58ch;
  font-size: 1.02rem; color: var(--t-2); line-height: 1.65;
}

/* La date de version : un fait, pas un ornement. */
.lg-version {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px; padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2);
  font-size: .8rem; font-weight: 600; color: var(--t-2);
}
.lg-version i { font-size: .95rem; color: var(--t-3); }

/* ══ Les onglets (CGU) ══
   Deux publics, deux contrats. Les onglets reprennent les filtres de
   l'app : une pilule d'encre pour celui qui est actif. */
.lg-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(26px, 4vw, 38px);
}
.lg-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--t-2); font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.lg-tab i { font-size: 1.05rem; }
.lg-tab:active { transform: scale(.97); }
@media (hover: hover) { .lg-tab:hover { border-color: var(--line-3); color: var(--t-1); } }
.lg-tab.active { background: var(--ink-block); border-color: var(--ink-block); color: #fff; }

.lg-panel { display: none; }
.lg-panel.active { display: block; }

/* ══ Le sommaire ══
   Un document de vingt articles ne se lit pas d'affilée : on y cherche
   un point précis. Le sommaire est donc un vrai outil, pas un ornement. */
.lg-toc {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1);
  padding: 18px 20px; margin-bottom: clamp(28px, 5vw, 44px);
}
.lg-toc h2 {
  font-family: var(--body);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-3); margin-bottom: 12px;
}
.lg-toc ol { list-style: none; display: grid; gap: 2px; }
@media (min-width: 620px) { .lg-toc ol { grid-template-columns: 1fr 1fr; gap: 2px 22px; } }
.lg-toc a {
  display: flex; gap: 9px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-sm);
  color: var(--t-2); font-size: .89rem; line-height: 1.45;
  transition: background var(--t-fast), color var(--t-fast);
}
.lg-toc a:hover { text-decoration: none; background: var(--surface-3); color: var(--t-1); }
.lg-toc a b {
  flex-shrink: 0; min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--brand-text);
}

/* ══ Les articles ══
   Séparés par un filet plutôt qu'enfermés chacun dans une carte : sur
   vingt-cinq articles, autant de cartes empilées fatiguent et hachent
   la lecture. Le filet suffit à marquer la coupure. */
.lg-art {
  padding: clamp(24px, 4vw, 34px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.lg-art:first-of-type { border-top: 0; padding-top: 0; }

/* Le numéro au-dessus du titre : on sait toujours où l'on est. */
.lg-art__n {
  display: block; margin-bottom: 7px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-text);
}
.lg-art h2 {
  font-family: var(--disp);
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  font-weight: 700; letter-spacing: -.028em; line-height: 1.22;
  color: var(--t-1); margin-bottom: 14px;
}
.lg-art h3 {
  font-family: var(--disp);
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--t-1); margin: 22px 0 9px;
}
.lg-art p { margin-bottom: 14px; color: var(--t-2); }
.lg-art p:last-child { margin-bottom: 0; }
.lg-art strong { color: var(--t-1); font-weight: 600; }

.lg-art ul, .lg-art ol { margin: 0 0 14px; padding-left: 20px; }
.lg-art li { margin-bottom: 8px; color: var(--t-2); }
.lg-art li:last-child { margin-bottom: 0; }
.lg-art li::marker { color: var(--brand); }
.lg-art ul ul, .lg-art ol ol { margin-top: 8px; margin-bottom: 0; }

/* Le préambule : ce qui se lit avant d'entrer dans le détail. */
.lg-art--intro {
  padding: clamp(20px, 3.4vw, 26px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1);
  margin-bottom: clamp(10px, 2vw, 18px);
}
.lg-art--intro h2 { font-family: var(--round); font-weight: 800; letter-spacing: -.025em; }

/* Ce qui reste à renseigner. Volontairement visible : une mention légale
   incomplète est une non-conformité, pas un détail de rédaction. */
.todo {
  display: inline-block;
  padding: 1px 8px; border-radius: var(--r-xs);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-text); font-size: .88em; font-weight: 600;
}

/* Un renvoi mis en avant (« voir l'article 7 ») */
.lg-callout {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; margin: 4px 0 16px;
  border-radius: var(--r); background: var(--surface-3);
  font-size: .92rem; color: var(--t-2); line-height: 1.6;
}
.lg-callout i { font-size: 1.15rem; color: var(--brand); flex-shrink: 0; margin-top: 2px; }

.lg-end {
  padding: clamp(26px, 4vw, 38px) 0 0;
  border-top: 1px solid var(--line);
  text-align: center; font-size: .85rem; color: var(--t-3);
}

/* ══ Le pied ══ */
.lg-foot {
  margin-top: clamp(48px, 8vw, 84px);
  border-top: 1px solid var(--line);
  padding: clamp(34px, 5vw, 50px) 0 calc(28px + var(--safe-b));
}
.lg-foot__in {
  max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--pad);
}
.lg-foot__top {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.lg-foot__b { max-width: 320px; }
.lg-foot__b img { height: 30px; width: auto; margin-bottom: 11px; }
.lg-foot__b p { font-size: .88rem; color: var(--t-2); line-height: 1.6; }
.lg-foot__nav { display: flex; flex-wrap: wrap; gap: 22px 32px; }
.lg-foot__col { display: grid; gap: 9px; align-content: start; }
.lg-foot__col b {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--t-3); margin-bottom: 3px;
}
.lg-foot__col a { font-size: .9rem; color: var(--t-2); transition: color var(--t-fast); }
.lg-foot__col a:hover { color: var(--brand-text); text-decoration: none; }
.lg-foot__end {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  padding-top: 20px; font-size: .84rem; color: var(--t-3);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* À l'impression, on ne garde que le document. */
@media print {
  .lg-nav, .lg-foot, .lg-tabs, .lg-toc { display: none; }
  html, body { background: #fff; }
  .lg-panel { display: block !important; }
  .lg-art { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}