/* ══════════════════════════════════════════════════════════════════════════
   PAGES INSTITUTIONNELLES — mentions légales, confidentialité, CGU, sources.
   ══════════════════════════════════════════════════════════════════════════

   ══ POURQUOI UNE FEUILLE AUTONOME ══
   Deux raisons, et la seconde est la vraie.

   1. Le §29 interdit « un mur de texte Word » : il faut un sommaire latéral,
      des sections, des cartes, des encadrés. Les utilitaires du site ne
      suffisent pas pour cela.

   2. Ces pages disent au visiteur ce que CamerounServices EST et N'EST PAS.
      Un lot précédent a établi que les utilitaires Tailwind viennent d'un CDN
      tiers, et qu'une page qui en dépend perd sa mise en forme quand ce CDN ne
      répond pas. Sur une page d'accompagnement, c'est disgracieux ; sur la page
      qui porte l'avertissement de non-affiliation, c'est inacceptable — un
      encadré d'avertissement qui perd son fond et son cadre redevient un
      paragraphe parmi d'autres. La transparence ne doit dépendre de personne.

   Palette : celle du site public (cs-green / cs-gold), pas une seconde identité.
   ══════════════════════════════════════════════════════════════════════════ */

.lg {
  --lg-green-900: #0b3d2e;
  --lg-green-700: #14624a;
  --lg-green-600: #1a7a5c;
  --lg-green-50:  #eef7f3;
  --lg-gold:      #e9b949;
  --lg-gold-dark: #8a6410;
  --lg-gold-bg:   #fdf7e7;
  --lg-sand:      #f7f4ec;

  --lg-ink:     #0f231c;
  --lg-body:    #37474180;
  --lg-text:    #374741;
  --lg-muted:   #6d7f78;
  --lg-faint:   #97a6a0;
  --lg-line:    #e0e8e4;
  --lg-line-2:  #eff3f1;
  --lg-surface: #ffffff;

  --lg-radius:    16px;
  --lg-radius-sm: 11px;

  color: var(--lg-text);
  background: var(--lg-surface);
  font-size: 16px;
  line-height: 1.7;
}

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

/* `hidden` doit vouloir dire caché, sans dépendre d'un CDN — même leçon que
   les tunnels publics : une règle d'auteur bat la règle de l'agent utilisateur,
   donc on la porte nous-mêmes. */
.lg [hidden] { display: none !important; }

.lg a:focus-visible, .lg button:focus-visible, .lg summary:focus-visible {
  outline: 3px solid var(--lg-green-600); outline-offset: 2px; border-radius: 8px;
}

/* Réservé aux lecteurs d'écran — jamais affiché, même sans CDN. Sert à annoncer
   l'ouverture d'un nouvel onglet, que le ↗ signale visuellement mais qu'une
   synthèse vocale ne lit pas. */
.lg .lg-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── En-tête de page ───────────────────────────────────────────────────── */
.lg-hero {
  background: linear-gradient(180deg, var(--lg-sand) 0%, #fff 100%);
  border-bottom: 1px solid var(--lg-line);
}
.lg-hero__in { max-width: 1120px; margin: 0 auto; padding: 40px 20px 30px; }
.lg-kicker {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--lg-green-700);
  background: var(--lg-green-50); border: 1px solid var(--lg-line);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.lg-hero h1 {
  font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em;
  color: var(--lg-ink); margin: 0 0 10px; text-wrap: balance;
}
.lg-hero p { font-size: 16.5px; color: var(--lg-muted); margin: 0; max-width: 62ch; }
.lg-updated {
  margin-top: 16px; font-size: 13px; color: var(--lg-muted);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.lg-updated b { color: var(--lg-ink); font-weight: 700; }

@media (min-width: 900px) {
  .lg-hero__in { padding: 56px 24px 40px; }
  .lg-hero h1 { font-size: 40px; }
}

/* ── Corps : sommaire + contenu ────────────────────────────────────────── */
.lg-body { max-width: 1120px; margin: 0 auto; padding: 0 20px 64px; }

@media (min-width: 900px) {
  .lg-body {
    display: grid;
    /* minmax(0,1fr) et non 1fr : une piste « auto » refuse de descendre sous la
       largeur de son contenu, et un tableau large ferait déborder la page. */
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 44px; padding: 0 24px 80px;
  }
}

/* ── Sommaire ──────────────────────────────────────────────────────────── */
/* Bureau : colonne collante. Téléphone : bloc dépliable compact (§30) — six
   entrées empilées avant le premier paragraphe repousseraient le contenu hors
   de l'écran. */
.lg-toc { margin: 22px 0 26px; }
.lg-toc__box {
  border: 1px solid var(--lg-line); border-radius: var(--lg-radius);
  background: var(--lg-surface); overflow: hidden;
}
.lg-toc summary {
  list-style: none; cursor: pointer; padding: 13px 15px;
  font-size: 14px; font-weight: 700; color: var(--lg-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px;
}
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc summary::after {
  content: "▾"; color: var(--lg-muted); font-size: 13px; transition: transform .15s ease;
}
.lg-toc[open] summary::after { transform: rotate(180deg); }
.lg-toc ol {
  list-style: none; margin: 0; padding: 4px 8px 12px;
  counter-reset: lgnum; border-top: 1px solid var(--lg-line-2);
}
.lg-toc li { counter-increment: lgnum; }
.lg-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 9px; border-radius: 9px;
  font-size: 14px; color: var(--lg-muted); text-decoration: none;
  min-height: 40px;
}
.lg-toc a::before {
  content: counter(lgnum); flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; color: var(--lg-faint);
  font-variant-numeric: tabular-nums; min-width: 15px;
}
.lg-toc a:hover { background: var(--lg-green-50); color: var(--lg-green-700); }

/* Deux sommaires coexistent dans le HTML (voir `_shell.php`) : un `details`
   repliable pour le téléphone, une liste ouverte pour le bureau. Chacun est
   masqué là où l'autre règne. Forcer l'ouverture d'un `details` en CSS ne
   fonctionne pas — mesuré au navigateur — et cette solution ne dépend
   d'aucun script. */
.lg-toc--desktop { display: none; }

@media (min-width: 900px) {
  .lg-toc--mobile  { display: none; }
  .lg-toc--desktop { display: block; }
  .lg-toc { position: sticky; top: 84px; align-self: start; margin: 40px 0 0; }
  .lg-toc__box { border: 0; }
  .lg-toc ol { border-top: 0; padding: 0; }
  .lg-toc a { padding: 7px 10px; border-left: 2px solid var(--lg-line); border-radius: 0 8px 8px 0; }
  .lg-toc a:hover { border-left-color: var(--lg-green-600); }
}

/* ── Contenu ───────────────────────────────────────────────────────────── */
.lg-main { padding-top: 6px; }
@media (min-width: 900px) { .lg-main { padding-top: 40px; } }

/* 68 caractères : la ligne de lecture confortable demandée au §29. */
.lg-sec { scroll-margin-top: 92px; margin-bottom: 40px; max-width: 68ch; }
.lg-sec > h2 {
  font-size: 20px; font-weight: 800; color: var(--lg-ink);
  margin: 0 0 12px; letter-spacing: -.01em; text-wrap: balance;
  padding-bottom: 9px; border-bottom: 2px solid var(--lg-green-50);
}
.lg-sec > h3 {
  font-size: 15.5px; font-weight: 800; color: var(--lg-green-700); margin: 22px 0 8px;
}
.lg-sec p { margin: 0 0 13px; }
.lg-sec ul, .lg-sec ol { margin: 0 0 14px; padding-left: 20px; }
.lg-sec li { margin-bottom: 6px; }
/* Une adresse électronique ou une clé de réglage n'a pas d'espace où se
   couper : mesuré à 320 px, `contact@camerounservices.com` en gras poussait le
   document à 330 px. `anywhere` autorise la coupure à l'intérieur du mot ;
   `break-word` seul ne suffit pas pour un mot plus large que sa colonne. */
.lg-sec strong, .lg-sec code, .lg-sec a { overflow-wrap: anywhere; }
.lg-sec strong { color: var(--lg-ink); font-weight: 700; }
.lg-sec a { color: var(--lg-green-700); text-decoration: underline; text-underline-offset: 2px; }
.lg-sec code {
  font-size: 12.5px; background: var(--lg-green-50); color: var(--lg-green-700);
  padding: 1px 6px; border-radius: 5px;
}

@media (min-width: 900px) {
  .lg-sec { margin-bottom: 52px; }
  .lg-sec > h2 { font-size: 23px; }
}

/* ── Encadrés ──────────────────────────────────────────────────────────── */
.lg-note {
  border: 1px solid var(--lg-line); border-left: 4px solid var(--lg-green-600);
  border-radius: var(--lg-radius-sm); background: var(--lg-green-50);
  padding: 15px 17px; margin: 0 0 18px;
}
.lg-note > b { display: block; color: var(--lg-ink); margin-bottom: 5px; font-size: 15px; }
.lg-note p:last-child { margin-bottom: 0; }
.lg-note--gold  { background: var(--lg-gold-bg); border-left-color: var(--lg-gold); }
.lg-note--plain { background: #fafbfa; border-left-color: var(--lg-line); }

/* ── L'encadré du §5 : la carte que le visiteur doit voir ──────────────── */
/* Le §5 la veut « clairement visible ». Elle est donc plus grande, plus
   contrastée et plus haute dans la page que tout le reste — sans crier :
   un bandeau rouge d'alerte ferait croire à un danger, alors qu'il s'agit
   d'une information utile et rassurante. */
.lg-card-indep {
  border: 1.5px solid var(--lg-green-700); border-radius: var(--lg-radius);
  background: linear-gradient(180deg, var(--lg-green-50) 0%, #fff 70%);
  padding: 20px; margin: 0 0 30px;
  box-shadow: 0 1px 2px rgba(15, 35, 28, .05), 0 14px 34px -26px rgba(11, 61, 46, .55);
}
.lg-card-indep h2 {
  font-size: 19px; font-weight: 800; color: var(--lg-green-900);
  margin: 0 0 10px; border: 0; padding: 0;
}
.lg-card-indep p { margin: 0 0 11px; color: var(--lg-text); }
.lg-card-indep p:last-of-type { margin-bottom: 15px; }
@media (min-width: 900px) {
  .lg-card-indep { padding: 26px 28px; }
  .lg-card-indep h2 { font-size: 22px; }
}

.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 11px 19px; border-radius: var(--lg-radius-sm);
  font-size: 15px; font-weight: 700; text-decoration: none;
  background: var(--lg-green-700); color: #fff; border: 1.5px solid var(--lg-green-700);
}
.lg-btn:hover { background: var(--lg-green-900); border-color: var(--lg-green-900); }
.lg-btn--ghost { background: #fff; color: var(--lg-green-700); }
.lg-btn--ghost:hover { background: var(--lg-green-50); }

/* ── Deux colonnes « nous sommes / nous ne sommes pas » (§11) ──────────── */
.lg-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 18px; }
@media (min-width: 760px) { .lg-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg-duo__col {
  border: 1px solid var(--lg-line); border-radius: var(--lg-radius);
  padding: 17px 18px; background: var(--lg-surface);
}
.lg-duo__col h3 {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  margin: 0 0 12px; color: var(--lg-muted);
}
.lg-duo__col ul { list-style: none; margin: 0; padding: 0; }
.lg-duo__col li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; font-size: 14.5px; line-height: 1.5;
}
.lg-duo__col li span:first-child { flex: 0 0 auto; font-weight: 800; line-height: 1.5; }
.lg-duo--yes { border-color: #cfe6da; background: #f6fbf8; }
.lg-duo--yes h3 { color: var(--lg-green-700); }
.lg-duo--yes li span:first-child { color: var(--lg-green-600); }
.lg-duo--no li span:first-child { color: var(--lg-faint); }

/* ── Cartes d'organismes (§6/§23) ──────────────────────────────────────── */
.lg-orgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 10px; }
@media (min-width: 700px) { .lg-orgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg-orgs > * { min-width: 0; }

.lg-org {
  border: 1px solid var(--lg-line); border-radius: var(--lg-radius);
  padding: 15px 16px; background: var(--lg-surface);
  display: flex; flex-direction: column; gap: 8px;
}
.lg-org__top { display: flex; align-items: flex-start; gap: 11px; }
/* §7 — pictogramme NEUTRE. Aucune armoirie, aucun sceau, aucun logo
   ministériel : un emblème d'État posé sur notre page suggérerait une
   affiliation que nous n'avons pas. Une initiale et une forme suffisent. */
.lg-org__mark {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  background: var(--lg-green-50); border: 1px solid var(--lg-line);
  color: var(--lg-green-700); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.lg-org__id { min-width: 0; flex: 1 1 auto; }
.lg-org__sigle { font-size: 15px; font-weight: 800; color: var(--lg-ink); line-height: 1.25; }
.lg-org__nom { font-size: 13px; color: var(--lg-muted); margin-top: 2px; overflow-wrap: anywhere; }
.lg-org__mission { font-size: 13.5px; color: var(--lg-text); margin: 0; }
.lg-org__foot { margin-top: auto; padding-top: 4px; }

.lg-org__link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--lg-green-700); background: var(--lg-green-50);
  border: 1px solid #cfe6da;
}
.lg-org__link:hover { background: #e3f2ea; }
.lg-org__link .ext { font-size: 12px; }

/* L'état « pas de lien vérifié » n'est pas une erreur : c'est une information
   honnête, et elle se présente comme telle — grise, calme, explicite. */
.lg-org__unverified {
  font-size: 12.5px; color: var(--lg-muted); line-height: 1.45;
  background: #fafbfa; border: 1px dashed var(--lg-line);
  border-radius: 9px; padding: 9px 11px;
}
.lg-org__checked { font-size: 11.5px; color: var(--lg-faint); margin-top: 6px; }

/* ── Tableau des cookies (§18) ─────────────────────────────────────────── */
/* Le §30 interdit une table qui déborde : elle défile dans SON conteneur, et
   la page ne bouge pas. */
.lg-tablewrap {
  overflow-x: auto; border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-sm); margin: 0 0 16px;
  -webkit-overflow-scrolling: touch;
}
.lg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.lg-table th, .lg-table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--lg-line-2);
}
.lg-table th {
  background: #fafbfa; font-weight: 800; color: var(--lg-ink);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table code {
  font-size: 12.5px; background: var(--lg-green-50); color: var(--lg-green-700);
  padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere;
}

/* ── Liste « à compléter » (§37 : un GAP se voit) ──────────────────────── */
.lg-gaps { list-style: none; margin: 10px 0 0; padding: 0; }
.lg-gaps li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dashed var(--lg-line);
  font-size: 14px;
}
.lg-gaps li:last-child { border-bottom: 0; }
.lg-gaps b { color: var(--lg-ink); font-weight: 700; }
.lg-gaps span { color: var(--lg-muted); font-size: 13px; }

/* ── Définitions (CGU §2) ──────────────────────────────────────────────── */
.lg-defs { margin: 0 0 16px; }
.lg-defs > div {
  padding: 11px 0; border-bottom: 1px solid var(--lg-line-2);
}
.lg-defs > div:last-child { border-bottom: 0; }
.lg-defs dt { font-weight: 800; color: var(--lg-ink); font-size: 14.5px; margin-bottom: 3px; }
.lg-defs dd { margin: 0; font-size: 14.5px; color: var(--lg-text); }

@media (prefers-reduced-motion: reduce) {
  .lg *, .lg *::before, .lg *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}