/* ============================================================
   PAUSITY — PAGES LÉGALES
   Mentions légales / CGU et politique de confidentialité.

   Ces pages se lisent, elles ne se parcourent pas. Tout est donc réglé
   pour la lecture suivie : une mesure courte, un interligne large, et
   une hiérarchie qui laisse repérer un article sans le chercher.

   Elles utilisent le bandeau de tête de page.css (.page-hero,
   .page-titre) : rien n'est redéfini ici de ce qui existe déjà.
   ============================================================ */

.legal {
  padding: 4rem 2rem 5rem;
}

/* Mesurée dans le navigateur : 74 caractères par ligne, l'étendue où
   l'œil retrouve sans effort le début de la ligne suivante. Le texte
   s'étalait auparavant sur 1230px, soit près de 200 caractères. */
.legal__inner {
  max-width: 660px;
  margin: 0 auto;
}

/* Date de mise à jour, sous le titre */
.legal-maj {
  margin: 1.4rem 0 0;
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 24, 26, 0.5);
}

/* Chapô : le paragraphe d'ouverture, sans titre d'article. Légèrement
   plus grand, il annonce le document. */
.legal__chapo {
  margin: 0 0 3.2rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid var(--page-hairline);
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--page-text);
}


/* ===================== */
/*       ARTICLES        */
/* ===================== */

.legal-article {
  border-top: 1px solid var(--page-hairline);
}

.legal-article:last-of-type {
  border-bottom: 1px solid var(--page-hairline);
}

/* Le numéro d'article devient une étiquette à part, en petites capitales
   vertes : on le repère du coin de l'œil en faisant défiler, sans qu'il
   alourdisse le titre. Le titre, lui, reste en Playfair comme partout. */
.legal-article__num {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pausity-green, #007c34);
}

.legal-article h2 {
  margin: 0 0 1.1rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--page-ink);
  text-wrap: balance;
}

.legal-article p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--page-text);
}

.legal-article p + p {
  margin-top: 1.1rem;
}

/* Les retours à la ligne du texte d'origine sont nombreux et collent les
   lignes entre elles. Un peu d'air derrière chacun rend la lecture
   possible sans toucher au texte lui-même. */
.legal-article br {
  content: "";
  display: block;
  margin-bottom: 0.5rem;
}

.legal-article ul {
  margin: 1.1rem 0 0;
  padding-left: 1.2rem;
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--page-text);
}

.legal-article li::marker {
  color: var(--pausity-green, #007c34);
}

.legal a {
  color: var(--pausity-green-deep, #04512a);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 124, 52, 0.4);
  transition: border-color 0.2s ease;
}

.legal a:hover,
.legal a:focus-visible {
  border-bottom-color: var(--pausity-green, #007c34);
}

.legal a:focus-visible {
  outline: 1px solid var(--pausity-green, #007c34);
  outline-offset: 3px;
}

/* Bloc d'identité (éditeur, hébergeur) : une fiche, pas un paragraphe. */
.legal-fiche {
  margin: 1.4rem 0 0;
  padding: 1.4rem 1.6rem;
  background: var(--page-cream);
  border-left: 2px solid var(--pausity-green, #007c34);
}

.legal-fiche + .legal-fiche {
  margin-top: 1rem;
}

.legal-fiche b {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pausity-green, #007c34);
}

.legal-fiche p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}


/* ===================== */
/*      RESPONSIVE       */
/* ===================== */

@media (max-width: 680px) {
  .legal {
    padding: 2.8rem 1.2rem 3.5rem;
  }

  .legal__chapo {
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    font-size: 1.15rem;
  }

  .legal-article + .legal-article {
    margin-top: 2.2rem;
    padding-top: 2.2rem;
  }

  .legal-article h2 {
    font-size: 1.3rem;
  }

  /* 21,6px dans une colonne de 366px ne laissaient qu'une trentaine de
     caractères par ligne : le texte se hachait. */
  .legal-article p,
  .legal-article ul {
    font-size: 1.08rem;
  }

  .legal-fiche {
    padding: 1.1rem 1.2rem;
  }

  .legal-fiche p {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal a {
    transition: none;
  }
}

/* ============================================================ */
/*   ARTICLES REPLIABLES                                        */
/* ============================================================ */

/* Dix articles dépliés font une page interminable que personne ne lit.
   Repliés, la liste tient sous les yeux et l'on ouvre celui qu'on
   cherche.

   Le défaut de ce parti pris est réel : le texte replié échappe à la
   recherche du navigateur. Trois garde-fous le compensent — un bouton
   « tout déplier », l'ouverture automatique quand on arrive par une
   ancre, et le dépliage complet à l'impression (voir plus bas). */

/* Le <h2> enveloppe le bouton : c'est le motif d'accordéon recommandé.
   Un <button> ne peut pas contenir de titre, l'inverse est valide et
   garde le plan du document intact pour les moteurs de recherche. */
.legal-tete-h {
  margin: 0;
}

.legal-tete {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.legal-tete:focus-visible {
  outline: 1px solid var(--pausity-green, #007c34);
  outline-offset: -3px;
  border-radius: 2px;
}

/* Le numéro garde sa colonne : les titres s'alignent tous verticalement,
   quelle que soit la longueur du numéro. */
.legal-tete .legal-article__num {
  flex: none;
  min-width: 82px;
  margin: 0;
}

.legal-tete__titre {
  flex: 1;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--page-ink);
  transition: color 0.2s ease;
}

.legal-tete:hover .legal-tete__titre {
  color: var(--pausity-green-deep, #04512a);
}

.legal-tete svg {
  flex: none;
  width: 18px;
  height: 18px;
  align-self: center;
  color: var(--pausity-green, #007c34);
  transition: transform 0.25s ease;
}

.legal-article.est-ouvert .legal-tete svg {
  transform: rotate(180deg);
}

/* La hauteur est animée en pixels, posée par app.js puis libérée.
   NE PAS revenir à une transition sur grid-template-rows (0fr -> 1fr) :
   elle ne se déclenchait dans aucun navigateur testé — la classe
   passait, le panneau restait à zéro, et un lecteur d'écran annonçait
   « déplié » devant un panneau vide. Aucune hauteur en dur non plus :
   le panneau le plus haut fait 1215 px sur un écran de 375 px, et un
   téléphone plus étroit irait au-delà. */
.legal-panneau {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}

/* Replié, le contenu sort de l'ordre de tabulation et de la lecture
   d'écran ; le délai laisse l'animation se terminer. */
/* Le texte deplie s indente sous le titre, a l aplomb de celui-ci, et
   garde une marge a droite : la ligne tombe a 70 caracteres environ
   alors que l en-tete, lui, occupe toute la largeur du bloc. Resserrer
   le bloc entier aurait retreci aussi la liste des titres. */
.legal-panneau > div {
  overflow: hidden;
  visibility: hidden;
  padding: 0 62px 0 100px;
  transition: visibility 0s linear 0.32s;
}

.legal-article.est-ouvert .legal-panneau > div {
  visibility: visible;
  transition-delay: 0s;
}

.legal-panneau p:first-child,
.legal-panneau .legal-fiche:first-child {
  margin-top: 0;
}

.legal-panneau > div > *:last-child {
  margin-bottom: 26px;
}

/* --- Commande « tout déplier » --- */
.legal-outils {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.legal-tout {
  padding: 9px 16px;
  border: 1px solid var(--page-hairline);
  border-radius: 2px;
  background: none;
  color: var(--page-text);
  font-family: var(--font-ui, "Inter", "Helvetica Neue", Arial, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.legal-tout:hover,
.legal-tout:focus-visible {
  border-color: var(--pausity-green, #007c34);
  color: var(--pausity-green-deep, #04512a);
}

@media (max-width: 680px) {
  .legal-tete {
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 18px 2px;
  }

  .legal-tete .legal-article__num {
    min-width: 0;
    flex-basis: 100%;
  }

  .legal-tete__titre {
    font-size: 1.15rem;
  }

  /* Pas d indentation sur telephone : la largeur y est deja rare. */
  .legal-panneau > div {
    padding: 0 2px;
  }
}

/* À L'IMPRESSION, TOUT EST DÉPLIÉ.
   Une page légale imprimée amputée de neuf articles sur dix n'aurait
   aucune valeur. */
@media print {
  .legal-panneau {
    max-height: none !important;
  }

  .legal-panneau > div {
    visibility: visible !important;
    overflow: visible !important;
  }

  .legal-tete svg,
  .legal-outils {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-panneau,
  .legal-panneau > div,
  .legal-tete svg,
  .legal-tete__titre {
    transition: none;
  }
}