/* Pages d'informations légales : mentions légales, confidentialité,
   conditions d'utilisation. Une page de lecture, à la charte du site
   (panneaux à équerres, petites capitales, nuit de la rade), lisible du
   téléphone au grand écran. Les informations encore à compléter par
   l'éditeur sont marquées ⟦…⟧ et ressortent en rouge. */

.legal-tete {
  position: relative; overflow: hidden;
  padding: clamp(34px, 6vw, 70px) 0 clamp(22px, 3.4vw, 34px);
  border-bottom: 1px solid rgba(232, 180, 92, .12);
  background: radial-gradient(120% 140% at 85% 0%, rgba(18, 63, 87, .55), transparent 60%), var(--nuit);
}
.legal-tete::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url(img/plan-brest-filigrane.svg) right -120px center / 760px auto no-repeat;
}
.legal-tete .conteneur { position: relative; }
.legal-tete h1 { margin: 14px 0 16px; }
.legal-tete .chapeau { max-width: 720px; margin: 0; }
.legal-date { margin-top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--texte-doux); }

/* les trois pages, en onglets */
.legal-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.legal-onglets a {
  font: 600 13px/1.2 var(--sans); text-decoration: none; color: var(--texte-2);
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(243, 236, 224, .2); background: rgba(255, 255, 255, .03);
}
.legal-onglets a:hover { border-color: var(--or); color: var(--texte); }
.legal-onglets a[aria-current="page"] { background: var(--or); border-color: var(--or); color: #1b160d; }

/* sommaire à gauche, texte à droite ; sommaire replié sur téléphone */
.legal-corps { padding: clamp(28px, 4.4vw, 56px) 0 clamp(48px, 7vw, 90px); }
.legal-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 980px) { .legal-grille { grid-template-columns: 232px minmax(0, 1fr); gap: 52px; } }
.legal-sommaire { align-self: start; }
@media (min-width: 980px) { .legal-sommaire { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; } }
.legal-sommaire details { border: 1px solid var(--bord); border-radius: 12px; background: rgba(20, 19, 16, .5); }
.legal-sommaire summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  font: 600 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--or);
}
.legal-sommaire summary::-webkit-details-marker { display: none; }
.legal-sommaire summary::after { content: '▾'; float: right; color: var(--texte-doux); letter-spacing: 0; }
.legal-sommaire details[open] summary::after { content: '▴'; }
.legal-sommaire ol { margin: 0; padding: 0 10px 12px 16px; list-style: none; counter-reset: s; }
.legal-sommaire li { counter-increment: s; }
.legal-sommaire a {
  display: flex; gap: 9px; padding: 5px 6px; border-radius: 6px;
  font-size: 13.5px; line-height: 1.35; color: var(--texte-2); text-decoration: none;
}
.legal-sommaire a::before { content: counter(s, decimal-leading-zero); flex: none; font: 600 10.5px/1.9 var(--mono); color: var(--texte-doux); }
.legal-sommaire a:hover { color: var(--texte); background: rgba(255, 255, 255, .05); }
.legal-sommaire a.actif { color: var(--or-clair); }
.legal-sommaire a.actif::before { color: var(--or); }

/* le texte */
.legal-texte { max-width: 780px; min-width: 0; counter-reset: h; }
.legal-texte > section { scroll-margin-top: 76px; padding-top: 6px; margin-bottom: clamp(30px, 4vw, 44px); }
.legal-texte h2 {
  counter-increment: h; display: flex; gap: 12px; align-items: baseline;
  font-size: clamp(21px, 2.5vw, 26px); font-weight: 680; letter-spacing: -.01em; margin: 0 0 14px;
}
.legal-texte h2::before { content: counter(h, decimal-leading-zero); flex: none; font: 600 12px var(--mono); color: var(--or); letter-spacing: .08em; }
.legal-texte h3 { font-size: 16.5px; font-weight: 650; margin: 22px 0 8px; color: var(--creme); }
.legal-texte p, .legal-texte li { color: var(--texte-2); }
.legal-texte ul, .legal-texte ol { margin: 0 0 1em; padding-left: 1.25em; }
.legal-texte li { margin: 0 0 .45em; }
.legal-texte li::marker { color: var(--or); }
.legal-texte a { overflow-wrap: anywhere; }
.legal-texte .note { font-size: 14px; color: var(--texte-doux); }

/* en bref : l'essentiel en quelques cases */
.en-bref { padding: clamp(18px, 2.6vw, 26px) clamp(18px, 2.8vw, 30px); margin-bottom: clamp(30px, 4vw, 44px); }
.en-bref h2 { counter-increment: none; margin-bottom: 12px; }
.en-bref h2::before { content: none; }
.en-bref ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .en-bref ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.en-bref li { position: relative; margin: 0; padding-left: 21px; font-size: 15px; line-height: 1.5; }
.en-bref li::before { content: '◆'; position: absolute; left: 0; top: 0; color: var(--or); font-size: 11px; line-height: 2.1; }

/* fiche d'identité : intitulé, valeur */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 22px; margin: 0 0 1.1em; padding: 14px 18px; }
@media (min-width: 640px) { .fiche { grid-template-columns: 200px minmax(0, 1fr); } }
.fiche dt { font: 600 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--or); padding-top: 9px; }
.fiche dd { margin: 0; padding: 4px 0 8px; color: var(--texte); border-bottom: 1px dashed rgba(243, 236, 224, .1); overflow-wrap: anywhere; }
@media (min-width: 640px) { .fiche dt, .fiche dd { padding-top: 9px; padding-bottom: 9px; } .fiche dt { border-bottom: 1px dashed rgba(243, 236, 224, .1); } }
.fiche dd:last-of-type, .fiche dt:last-of-type { border-bottom: 0; }

/* tableaux : lignes empilées en cartes sur téléphone */
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 1.2em; font-size: 14.5px; line-height: 1.5; }
.legal-table th { text-align: left; font: 600 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--or); padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.legal-table td { vertical-align: top; padding: 11px 12px; border-bottom: 1px dashed rgba(243, 236, 224, .12); color: var(--texte-2); }
.legal-table td:first-child { color: var(--texte); font-weight: 550; }
.legal-table td .note { font-weight: 400; font-size: 13px; }
.legal-table code { font-size: .86em; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--bord); border-radius: 12px; background: rgba(20, 19, 16, .5); }
  .legal-table td { padding: 5px 0; border: 0; }
  .legal-table td::before { content: attr(data-th); display: block; font: 600 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
}

/* encadré d'avertissement (sécurité en extérieur) */
.encadre { padding: 16px 20px 16px 22px; margin: 0 0 1.2em; }
.encadre--alerte { border-color: rgba(224, 49, 63, .4); }
.encadre--alerte.panneau--barre::before { background: var(--rouge); }
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }

/* ⟦à compléter⟧ : ce que l'éditeur doit encore renseigner */
.a-completer {
  background: rgba(224, 49, 63, .14); color: var(--corail);
  border: 1px dashed rgba(240, 122, 104, .7); border-radius: 5px; padding: 0 .3em;
  font: 500 .9em/1.5 var(--mono); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* crédits des photos, repliés */
.credits-photos { margin: 8px 0 1.2em; border: 1px solid var(--bord); border-radius: 12px; background: rgba(20, 19, 16, .45); }
.credits-photos summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--texte); }
.credits-photos summary:hover { color: var(--or-clair); }
.credits-photos > div { padding: 0 18px 14px; }
.credits-photos h4 { font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 10px 0 8px; }
.credits-photos ul { margin: 0 0 12px; padding-left: 1.1em; font-size: 13.5px; line-height: 1.5; }
.credits-photos li { margin: 0 0 4px; color: var(--texte-doux); }

/* ce que ce navigateur garde : la mémoire locale, montrée et effaçable */
.memoire-locale { padding: 18px 20px; margin: 0 0 1.2em; }
.memoire-locale h3 { margin-top: 0; }
.memoire-locale [hidden] { display: none !important; }
.memoire-locale .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.memoire-locale ul { list-style: none; padding: 0; margin: 12px 0 0; }
.memoire-locale li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 7px 0; border-bottom: 1px dashed rgba(243, 236, 224, .12); font-size: 14px; }
.memoire-locale li:last-child { border-bottom: 0; }
.memoire-locale li span { color: var(--texte-doux); font: 500 12px/1.6 var(--mono); }
.memoire-locale [data-memoire-etat] { margin: 10px 0 0; font-size: 14px; color: var(--texte-doux); }

/* bouton de compte (site/compte.js, styles dans site/compte.css) : garde-fou
   sans poids (:where) pour que son pictogramme reste petit si sa feuille
   tarde ou manque ; la vraie feuille l'emporte toujours */
:where(.barre [data-compte]) svg { width: 20px; height: 20px; vertical-align: middle; }
:where(.barre [data-compte]) a { display: inline-flex; align-items: center; gap: 6px; }

/* pied de page : ajouts propres aux pages légales */
.pied .legal-courant { color: var(--or-clair); }

@media (max-width: 760px) {
  .legal-tete::before { background-position: right -260px top -40px; background-size: 620px auto; opacity: .35; }
  .legal-texte h2 { gap: 10px; }
}
@media print {
  .barre, .legal-sommaire, .legal-onglets, .pied, .memoire-locale .actions { display: none !important; }
  body { background: #fff; color: #000; }
  .legal-texte p, .legal-texte li, .legal-table td { color: #000; }
}

/* au doigt : des cibles d'au moins 40 px de haut */
@media (pointer: coarse) {
  .legal-onglets a { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; }
  .legal-sommaire summary { min-height: 44px; box-sizing: border-box; }
  .legal-sommaire a { min-height: 40px; box-sizing: border-box; align-items: center; }
  /* les crédits des photos sont des listes de liens (titre, licence) : chacun une cible de 40 px */
  .credits-photos li a { display: inline-block; padding: 11px 0; }
}