/* Pages legales (mentions, confidentialite, CGV) et pied de page du site.
   Reprend les jetons de main.css : navy, or, Playfair pour les titres,
   Inter pour le texte. Rien d'autre n'est invente. (2026-10-05) */

/* Sur une page legale, aucune section empilee ne pose nav-scrolled :
   la nav prend directement son fond de verre, sinon le texte qui
   remonte passe lisible sous elle. */
body.page-legale .nav { background: rgba(250, 250, 252, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="dark"] body.page-legale .nav { background: rgba(11, 5, 47, 0.86); }

.legal {
  padding-top: calc(2.75rem + 2 * var(--space-sm) + var(--space-lg));
  padding-bottom: var(--space-lg);
}
.legal__inner { max-width: 46rem; min-width: 0; }

.legal__onglets {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 var(--space-lg);
  padding: 0; list-style: none;
}
.legal__onglets a {
  display: inline-block;
  font-size: var(--fs-small); font-weight: 600;
  padding: 0.45rem 1rem;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-full);
  color: var(--ink-soft);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.legal__onglets a[aria-current="page"] {
  background: var(--navy); color: var(--gold-1); border-color: var(--navy);
}
html[data-theme="dark"] .legal__onglets a[aria-current="page"] {
  background: transparent; border-color: var(--gold-2); color: var(--gold-1);
}
@media (hover: hover) and (pointer: fine) {
  .legal__onglets a:not([aria-current]):hover { border-color: var(--ink); color: var(--ink); }
}

.legal h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.legal__version { margin: 0 0 var(--space-lg); color: var(--ink-soft); font-size: var(--fs-small); }

.legal h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  line-height: 1.25;
  margin: var(--space-lg) 0 0.75rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-faint);
}
.legal h3 { font-size: 1.05rem; font-weight: 700; margin: var(--space-md) 0 0.4rem; }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal p { margin: 0 0 0.9rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal strong { font-weight: 700; }
.legal a:not(.legal__onglets a) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--gold-2); }

.legal__fiche { margin: 0 0 0.9rem; display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.35rem 1.25rem; }
.legal__fiche dt { color: var(--ink-soft); font-size: var(--fs-small); padding-top: 0.15rem; }
.legal__fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .legal__fiche { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .legal__fiche dd { margin-bottom: 0.6rem; }
}

.legal__tableau { width: 100%; overflow-x: auto; margin: 0 0 0.9rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--ink-faint); }
.legal th { font-weight: 700; color: var(--ink-soft); }
.legal td:nth-child(2) { min-width: 6.5rem; }
@media (max-width: 600px) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { padding: 0.6rem 0; border-bottom: 1px solid var(--ink-faint); }
  .legal td { border: 0; padding: 0.15rem 0; }
}

/* Pied de page, REFAIT le 07/10 (Anthony : « sublimer le footer, souvent néglige mais très important,
   prendre plus d’espace »). Trois étages : la devise en grand à gauche et La lettre Beajify à droite,
   puis les quatre colonnes de liens, puis la ligne légale. Plus large que le reste du site.
   La section .rise de la home est sticky jusqu en bas de page (z-index 1) : sans son propre plan,
   le pied passait DESSOUS et paraissait vide. */
.pied {
  position: relative; z-index: 8;
  background: var(--navy);
  color: var(--text-on-dark);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) 0 var(--space-md);
  border-top: 1px solid rgba(196, 184, 118, 0.25);
}
/* Proportionnel entre 1196 et 1478 px de fenetre : fige a 1360px, le pied
   des pages legales et de /contact ne laissait que 3 px de marge sur un
   portable 1366 (2026-10-11). Au-dela et en deca, rien ne change. */
.pied > .container { max-width: min(1360px, max(1100px, 92vw)); }

.pied__une {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: start;
  padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  border-bottom: 1px solid rgba(196, 184, 118, 0.22);
}
.pied__logo img { height: 2.75rem; width: auto; max-width: 100%; }
.pied__devise {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.28; letter-spacing: -0.005em;
  margin: clamp(1.25rem, 1rem + 1vw, 2rem) 0 0; max-width: 30rem;
  color: var(--text-on-dark);   /* blanc et non or : trop d or dans le pied (05/10) */
}

.pied__haut {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md); padding-top: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
}
.pied__titre { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 0.9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; font-size: var(--fs-small); }
.pied a { color: rgba(252, 252, 252, 0.82); transition: color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: var(--gold-1); } }
.pied__bas {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: var(--space-sm);
  border-top: 1px solid rgba(252, 252, 252, 0.12);
  font-size: var(--fs-small); color: rgba(252, 252, 252, 0.6);
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; justify-content: space-between;
}
.pied__bas p { margin: 0; }
/* Tablette : la devise et la lettre l une sous l autre ; téléphone : deux colonnes de liens. */
@media (max-width: 900px) { .pied__une { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); } }

/* Petits telephones (360 a 480 px) : onglets et fiche plus serres. */
@media (max-width: 480px) {
  .legal__onglets a { padding: 0.4rem 0.75rem; }
  .legal h2 { margin-top: var(--space-md); }
  .pied__bas { flex-direction: column; }
}

/* La lettre Beajify (07/10) : à droite du premier étage du pied, sur toutes les pages, et le même formulaire
   sur la page contact (variante claire). Courriel seul. Le bouton est un LIEN souligné avec sa flèche,
   comme les liens de fin de section du site (.force__lien) : pas de bouton plein. */
.pied__lettre-titre {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.3;
  margin: 0 0 0.75rem; color: var(--text-on-dark);
}
.pied__lettre-texte { font-size: 0.95rem; line-height: 1.6; color: rgba(252, 252, 252, 0.78); margin: 0 0 1.5rem; max-width: 34rem; }

.lettre { margin: 0; min-width: 0; max-width: 34rem; }
.lettre__label { display: block; font-size: var(--fs-small); font-weight: 600; margin: 0 0 0.4rem; }
.lettre__label--cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lettre__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; min-width: 0; }
.lettre__champ {
  flex: 1 1 13rem; min-width: 0;
  font: inherit; font-size: 1rem;   /* 16 px au moins : sinon Safari iPhone agrandit la page au toucher */
  padding: 0.6rem 0;
  border: 0; border-bottom: 1px solid rgba(252, 252, 252, 0.35); border-radius: 0;
  background: transparent; color: var(--text-on-dark);
  transition: border-color 0.3s ease;
}
.lettre__champ::placeholder { color: rgba(252, 252, 252, 0.45); }
.lettre__champ:focus { outline: none; border-bottom-color: var(--gold-1); }
.lettre__champ:focus-visible { outline: none; border-bottom: 2px solid var(--gold-1); }
.lettre__envoyer {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0; border: 0; background: none; cursor: pointer;
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 600;
  color: var(--text-on-dark);
}
.lettre__envoyer span {
  text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px;
  text-decoration-color: rgba(252, 252, 252, 0.35); transition: text-decoration-color 0.3s ease;
}
.lettre__fleche { color: var(--gold-2); transition: transform 0.35s var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .lettre__envoyer:hover span { text-decoration-color: var(--gold-2); }
  .lettre__envoyer:hover .lettre__fleche { transform: translateX(0.3rem); }
}
.lettre__envoyer:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; border-radius: 2px; }
.lettre__envoyer[disabled] { opacity: 0.6; cursor: wait; }
.lettre__etat { margin: 0.75rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(252, 252, 252, 0.82); }
.lettre__etat:empty { display: none; }
.lettre__etat[data-ton="ok"] { color: var(--gold-1); }
.lettre__etat[data-ton="erreur"] { color: #FFB4A8; }
.lettre__mention { margin: 1rem 0 0; font-size: 0.8rem; line-height: 1.55; color: rgba(252, 252, 252, 0.6); }
.pied .lettre__mention a { color: rgba(252, 252, 252, 0.75); text-decoration: underline; text-underline-offset: 0.18em; }
.lettre__mention strong { font-weight: 600; color: rgba(252, 252, 252, 0.85); }

/* Variante claire (page contact) : jamais d or sur blanc, sauf la flèche comme partout sur le site. */
.lettre--clair .lettre__champ { border-bottom-color: rgba(11, 5, 47, 0.3); color: var(--ink); }
.lettre--clair .lettre__champ::placeholder { color: var(--ink-soft); }
.lettre--clair .lettre__champ:focus, .lettre--clair .lettre__champ:focus-visible { border-bottom-color: var(--navy); }
.lettre--clair .lettre__envoyer { color: var(--ink); }
.lettre--clair .lettre__envoyer span { text-decoration-color: var(--ink-faint); text-decoration-color: rgba(11, 5, 47, 0.25); }
.lettre--clair .lettre__envoyer:focus-visible { outline-color: var(--navy); }
.lettre--clair .lettre__etat { color: var(--ink-soft); }
.lettre--clair .lettre__etat[data-ton="ok"] { color: var(--ink); font-weight: 600; }
.lettre--clair .lettre__etat[data-ton="erreur"] { color: #B3261E; }
.lettre--clair .lettre__mention { color: var(--ink-soft); }
.lettre--clair .lettre__mention strong { color: var(--ink); }
html[data-theme="dark"] .lettre--clair .lettre__champ { border-bottom-color: rgba(252, 252, 252, 0.35); }
html[data-theme="dark"] .lettre--clair .lettre__champ:focus, html[data-theme="dark"] .lettre--clair .lettre__champ:focus-visible { border-bottom-color: var(--gold-1); }
html[data-theme="dark"] .lettre--clair .lettre__envoyer span { text-decoration-color: rgba(252, 252, 252, 0.35); }
html[data-theme="dark"] .lettre--clair .lettre__etat[data-ton="ok"] { color: var(--gold-1); }
html[data-theme="dark"] .lettre--clair .lettre__etat[data-ton="erreur"] { color: #FFB4A8; }