/* ==========================================================================
   Pages de contenu (méthode, mentions légales, CGU, confidentialité).
   Registre « documentation » : colonne de lecture, titres serrés, sommaire.
   ========================================================================== */

/* --- Double colonne : le texte, et un sommaire qui reste fixe ------------
   Réservé aux pages de contenu. Le relevé des prix, lui, occupe toute la
   largeur.
   ------------------------------------------------------------------------ */

.docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

.docs > * { min-width: 0; }

/* Ordre de lecture sur une colonne : on doit savoir sur quelle page on est
   avant de se voir proposer un sommaire. */
.docs__header { order: 1; }
.docs__nav { order: 2; }
.prose { order: 3; }

@media (min-width: 62em) {
  .docs {
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: var(--sp-12);
    row-gap: 0;
    align-items: start;
  }

  /* Placement explicite : le titre occupe toute la largeur, le texte la
     colonne de gauche, le sommaire celle de droite. */
  .docs__header { grid-column: 1 / -1; grid-row: 1; }
  .prose { grid-column: 1; grid-row: 2; }

  .docs__nav {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
    max-height: calc(100dvh - var(--header-h) - var(--sp-10));
    overflow-y: auto;
    scrollbar-width: thin;
    padding-inline-start: var(--sp-5);
    border-inline-start: 1px solid var(--border);
  }
}

.docs__navTitle {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

.docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
  counter-reset: docs;
}

.docs__list li {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.docs__list a {
  display: block;
  padding: var(--sp-2) 0;
  color: var(--fg-muted);
  border-inline-start: 2px solid transparent;
  padding-inline-start: var(--sp-3);
  margin-inline-start: calc(-1 * var(--sp-5) - 1px);
  transition: color 0.18s, border-color 0.18s;
}

.docs__list a:hover { color: var(--fg); border-inline-start-color: var(--border-strong); }

.docs__list a:target,
.docs__list a.is-active {
  color: var(--accent);
  border-inline-start-color: var(--accent);
}

/* Sur petit écran, le sommaire devient un encadré placé sous le titre. */
@media (max-width: 61.99em) {
  .docs__nav {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-subtle);
  }

  .docs__list a {
    margin-inline-start: 0;
    padding-inline-start: var(--sp-2);
    border-inline-start-width: 2px;
  }
}

.prose { max-width: var(--measure); font-size: var(--fs-md); line-height: 1.7; }

@media (min-width: 62em) {
  /* En double colonne, la colonne de texte impose déjà sa largeur. */
  .prose { max-width: none; }
  .prose p,
  .prose ul,
  .prose ol { max-width: var(--measure); }
}

.prose__header {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
  position: relative;
}

.prose__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
  border-radius: var(--r-full);
}

.prose__kicker {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.prose__title {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  line-height: 1.1;
}

.prose__updated {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.prose h2 {
  font-size: var(--fs-xl);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
  padding-inline-start: var(--sp-4);
  border-inline-start: 3px solid var(--accent-border);
  transition: border-color 0.2s;
}

.prose h2:hover {
  border-inline-start-color: var(--accent);
}

.prose h3 {
  font-size: var(--fs-lg);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

/* Respiration généreuse : ces pages sont longues et se lisent en continu. */
.prose p,
.prose ul,
.prose ol,
.prose dl { margin-bottom: var(--sp-5); color: var(--fg-secondary); }

.prose p + p { margin-top: calc(-1 * var(--sp-1)); }

.prose ul,
.prose ol { padding-inline-start: var(--sp-5); }

.prose li { margin-bottom: var(--sp-3); padding-inline-start: var(--sp-1); }

.prose li:last-child { margin-bottom: 0; }

.prose li::marker { color: var(--fg-muted); }

.prose strong { color: var(--fg); font-weight: 600; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.prose a:hover { color: var(--accent-hover); }

.prose code {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-muted);
  color: var(--fg);
  font-size: 0.85em;
}

/* --- Chapeau ------------------------------------------------------------- */

.prose__standfirst {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background: var(--accent-subtle);
  margin-bottom: var(--sp-8);
}

.prose__standfirst::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  border-radius: var(--r-full);
  background: var(--accent);
  align-self: stretch;
}

.prose__standfirst p { margin: 0; color: var(--fg); font-size: var(--fs-base); line-height: 1.65; }
.prose__standfirst p + p { margin-top: var(--sp-2); }

/* --- Sommaire ------------------------------------------------------------ */

.toc {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  margin-bottom: var(--sp-8);
}

.toc h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--fg-muted);
  margin: 0 0 var(--sp-3);
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: var(--sp-1);
}

/* Une grille, et non une largeur fixe : sinon « 10. » chevauche le libellé. */
.toc li {
  margin: 0;
  counter-increment: toc;
  font-size: var(--fs-base);
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: var(--sp-2);
  align-items: baseline;
}

.toc li::before {
  content: counter(toc) ".";
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.toc a { color: var(--fg-secondary); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* --- Carte d'identité de l'éditeur ----------------------------------------
   Placée là où MyMvWeb est nommé en tant qu'entité. Volontairement sobre :
   c'est une mention légale, pas une bannière.
   ------------------------------------------------------------------------ */

.publisher {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
}

@media (min-width: 34em) {
  .publisher { grid-template-columns: auto 1fr auto; }
}

/* Le monogramme hérite de la couleur du texte : il suit le thème. */
/* Proportions calées sur la viewBox (900 × 770). */
.publisher__mark {
  width: 37px;
  height: 32px;
  color: var(--fg);
}

.publisher__id { min-width: 0; }

.publisher__name {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--fg);
}

.publisher__role {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.publisher__contact {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 34em) {
  .publisher__contact { grid-column: auto; }
}

.publisher__contact:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --- Tableau d'informations --------------------------------------------- */

.deflist {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-5);
}

.deflist > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
}

@media (min-width: 34em) {
  .deflist > div {
    grid-template-columns: 11rem 1fr;
    gap: var(--sp-4);
    align-items: baseline;
  }
}

.deflist > div + div { border-top: 1px solid var(--border); }

.deflist dt { color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500; }
.deflist dd { margin: 0; color: var(--fg-secondary); }
.deflist dd code { font-size: 0.9em; }

.deflist > div:nth-child(even) { background: var(--bg-subtle); }

/* --- Navigation croisée entre pages légales -------------------------------- */

.legal-related {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}

.legal-related__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}

.legal-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-3);
}

.legal-related__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
}

.legal-related__card:hover {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.legal-related__card[aria-current="page"] {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  cursor: default;
  pointer-events: none;
}

.legal-related__card-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

.legal-related__card[aria-current="page"] .legal-related__card-label {
  color: var(--fg-muted);
}

.legal-related__card-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: var(--ls-heading);
}

.legal-related__card[aria-current="page"] .legal-related__card-title {
  color: var(--fg-muted);
}

.legal-related__card-desc {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.4;
}