/* EOCHE v2 : pages legales et page d'erreur 404 (doctrine sur mesure du 23/09/2026).
   Mentions legales, politique de confidentialite, 404.
   Complete eoche.v2.css sans jamais le modifier. Toutes les classes portent le prefixe leg-.
   Pages legales : lecture d'abord. Fond clair, cartes blanches en relief, texte de 18 px,
   aucun chiffre geant, aucune pastille, aucun pictogramme en carre, aucun canvas.
   Seule signature animee : le monogramme parcouru de lueurs (en-tete, appel final, 404). */

/* ══════════════════════════════════════════════════════════════════
   EN-TETE DES PAGES LEGALES : compact, sans animation d'entree
   ══════════════════════════════════════════════════════════════════ */
.leg-heros { padding-bottom: clamp(88px, 9vw, 124px); }
.leg-heros .page-heros__titre,
.leg-heros .page-heros__chapeau,
.leg-heros .heros__actions,
.leg-heros .page-heros__faits,
.leg-heros .page-heros__visuel { animation: none; }
/* Pages de lecture : pas de gros boutons de devis en tete. Le contact tient dans la ligne de faits,
   le devis reste dans la barre de navigation, la barre mobile et l'appel final. */
.leg-heros .heros__actions { display: none; }
.leg-heros .page-heros__titre { max-width: 14ch; }
/* Hierarchie : la phrase de la page en blanc casse, la ligne de faits en dessous, plus discrete */
.leg-heros .page-heros__chapeau { max-width: 48ch; color: #D4D4D8; }
.leg-heros .page-heros__faits { max-width: 56ch; font-size: 17px; line-height: 1.6; color: #A1A1AA; }
.leg-heros .page-heros__faits a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(253, 58, 37, 0.7);
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.leg-heros .page-heros__faits a:hover { color: #FF8C6E; }
.leg-heros .page-heros__marque { width: min(300px, 100%); }
/* Sur tablette et telephone, l'en-tete reste court : le texte legal arrive vite */
@media (max-width: 1023px) {
  .leg-heros .page-heros__visuel { display: none; }
  .leg-heros .page-heros__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .leg-heros { padding-bottom: 64px; }
  /* Telephone et e-mail tombent sur deux lignes voisines : plus d'interligne, zone de toucher agrandie */
  .leg-heros .page-heros__faits { line-height: 1.85; }
  .leg-heros .page-heros__faits a { padding-block: 5px; }
}

/* ══════════════════════════════════════════════════════════════════
   CORPS : sommaire a gauche, rubriques a droite
   ══════════════════════════════════════════════════════════════════ */
.leg-corps { padding-block: clamp(56px, 7vw, 104px) clamp(88px, 10vw, 144px); }
.leg-grille {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.leg-contenu { min-width: 0; max-width: 820px; }

/* Sommaire : une liste numerotee, sobre, qui suit la lecture */
.leg-sommaire { position: sticky; top: 108px; }
.leg-sommaire__titre { margin-bottom: 12px; font-size: 16px; font-weight: 600; color: var(--texte-clair); }
.leg-sommaire__liste { counter-reset: leg; margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(9, 9, 11, 0.12); }
.leg-sommaire__liste li { counter-increment: leg; }
.leg-sommaire__liste a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  margin-left: -1px;
  padding: 10px 0 10px 18px;
  border-left: 2px solid transparent;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #52525B;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.leg-sommaire__liste a::before { content: counter(leg); flex: none; min-width: 1ch; font-variant-numeric: tabular-nums; color: #A1A1AA; }
.leg-sommaire__liste a:hover { color: var(--texte-clair); border-left-color: var(--rouge); }

/* Rubrique atteinte depuis le sommaire : son entree reste marquee (CSS seul, :target et :has) */
.leg-grille:has(#editeur:target) a[href="#editeur"],
.leg-grille:has(#directeur:target) a[href="#directeur"],
.leg-grille:has(#hebergement:target) a[href="#hebergement"],
.leg-grille:has(#propriete:target) a[href="#propriete"],
.leg-grille:has(#donnees:target) a[href="#donnees"],
.leg-grille:has(#mediation:target) a[href="#mediation"],
.leg-grille:has(#responsable:target) a[href="#responsable"],
.leg-grille:has(#conservation:target) a[href="#conservation"],
.leg-grille:has(#destinataires:target) a[href="#destinataires"],
.leg-grille:has(#cookies:target) a[href="#cookies"],
.leg-grille:has(#droits:target) a[href="#droits"] { color: var(--texte-clair); border-left-color: var(--rouge); }

/* Une rubrique : un titre simple, puis le texte */
.leg-bloc { display: grid; gap: 20px; scroll-margin-top: 104px; }
.leg-bloc + .leg-bloc { margin-top: clamp(48px, 5vw, 64px); padding-top: clamp(48px, 5vw, 64px); border-top: 1px solid rgba(9, 9, 11, 0.09); }
/* Titres : les classes communes titre-2 (rubriques) et titre-3 (cartes) portent la taille, ici seulement la couleur */
.leg-bloc__titre { color: var(--texte-clair); }

/* Texte courant : 18 px, gris fonce */
.leg-texte { max-width: 66ch; font-size: 18px; line-height: 1.7; color: #3F3F46; }
.leg-texte a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.leg-texte--fort { font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--texte-clair); }

/* Carte blanche en relief, ombre douce : la matiere de la charte d'origine */
.leg-carte {
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.06);
  box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
}
.leg-carte:has(> .leg-lignes:only-child) { padding-block: 6px; }
.leg-carte__titre { margin-bottom: 4px; color: var(--texte-clair); }
.leg-cartes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.leg-cartes .leg-texte { margin-top: 10px; }

/* Lignes : libelle a gauche, valeur a droite, une colonne sur telephone */
.leg-lignes { margin: 0; }
.leg-lignes__ligne {
  display: grid;
  grid-template-columns: minmax(140px, 0.3fr) minmax(0, 1fr);
  gap: 4px 28px;
  align-items: baseline;
  padding: 17px 0;
  border-top: 1px solid rgba(9, 9, 11, 0.07);
}
.leg-lignes__ligne:first-child { border-top: 0; }
.leg-lignes dt { font-size: 16px; font-weight: 500; line-height: 1.5; color: #52525B; }
.leg-lignes dd { margin: 0; font-size: 17.5px; font-weight: 500; line-height: 1.6; color: var(--texte-clair); overflow-wrap: break-word; }
.leg-lignes dd a:not(.lien-fleche) { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Telephone ou e-mail seul dans sa ligne : zone de toucher de 44 px sans changer la mise en page */
.leg-lignes dd > a:only-child:not(.lien-fleche) { display: inline-block; padding-block: 12px; margin-block: -12px; }
.leg-valeur { display: block; font-weight: 650; }
.leg-carte--noms .leg-lignes__ligne { grid-template-columns: minmax(200px, 0.36fr) minmax(0, 1fr); }
.leg-carte--noms .leg-lignes dt { font-size: 17.5px; font-weight: 650; color: var(--texte-clair); }
.leg-carte--noms .leg-lignes dd { font-weight: 450; color: #3F3F46; }
.leg-detail { display: block; color: #3F3F46; }
.leg-lien-discret { min-height: 36px; font-size: 15.5px; color: var(--rouge-profond); }

/* Le directeur de la publication : une personne, un visage */
.leg-personne { display: flex; align-items: center; gap: 18px; max-width: 560px; padding: 16px 28px 16px 16px; }
.leg-personne img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.leg-personne__texte { display: grid; gap: 2px; }
.leg-personne__nom { font-size: clamp(20px, 1.7vw, 23px); font-weight: 600; letter-spacing: -0.02em; color: var(--texte-clair); }
.leg-personne__role { font-size: 16px; line-height: 1.45; color: #52525B; }

/* Carte lien vers une autre page : blanche, une fleche noire en relief */
.leg-lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  color: var(--texte-clair);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.leg-lien:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 22px 44px -24px rgba(9, 9, 11, 0.32); }
.leg-lien__texte { display: grid; gap: 6px; }
.leg-lien__phrase { max-width: 52ch; font-size: 17px; line-height: 1.55; color: #3F3F46; }
.leg-lien__fleche {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1B1B1F;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(9, 9, 11, 0.6);
  transition: background-color 0.3s ease;
}
.leg-lien__fleche .bouton__fleche { transition: transform 0.35s var(--ease); }
.leg-lien:hover .leg-lien__fleche { background: var(--rouge-profond); }
.leg-lien:hover .leg-lien__fleche .bouton__fleche { transform: translateX(3px); }

/* Vos droits : l'adresse en evidence, dans une carte blanche */
.leg-droits { display: grid; justify-items: start; gap: 10px; }
.leg-droits__intro { font-size: 17px; color: #52525B; }
.leg-droits__mail {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--texte-clair);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(253, 58, 37, 0.8);
  text-underline-offset: 7px;
  transition: color 0.2s ease;
}
.leg-droits__mail:hover { color: var(--rouge-profond); }
.leg-droits__note { max-width: 56ch; font-size: 17px; line-height: 1.6; color: #3F3F46; }
.leg-droits__lien { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Bandeau final sobre de la politique de confidentialite */
.leg-final .final__titre { max-width: 14ch; }
.leg-final .bouton svg:not(.bouton__fleche) { width: 18px; height: 18px; }
/* L'adresse sous les boutons : lisible et facile a toucher */
.leg-final .final__mail { font-size: 16px; }
.leg-final .final__mail a { display: inline-block; padding-block: 12px; margin-block: -12px; }

@media (max-width: 1023px) {
  .leg-grille { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .leg-contenu { max-width: none; }
  /* Le sommaire devient une carte blanche, une entree par ligne */
  .leg-sommaire {
    position: static;
    padding: 18px 22px 8px;
    border-radius: var(--r-l);
    background: #fff;
    border: 1px solid rgba(9, 9, 11, 0.06);
    box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -22px rgba(9, 9, 11, 0.28);
  }
  .leg-sommaire__titre { margin-bottom: 4px; }
  .leg-sommaire__liste { border-left: 0; }
  .leg-sommaire__liste li + li { border-top: 1px solid rgba(9, 9, 11, 0.07); }
  .leg-sommaire__liste a { min-height: 48px; margin: 0; padding: 12px 0; border-left: 0; font-size: 16.5px; }
  .leg-sommaire__liste a::after { content: "\2193"; margin-left: auto; color: #A1A1AA; font-weight: 500; }
  .leg-sommaire__liste a:hover { color: var(--texte-clair); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .leg-sommaire__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .leg-sommaire__liste li:nth-child(2) { border-top: 0; }
}
@media (max-width: 767px) {
  .leg-bloc { gap: 16px; }
  /* Rubriques courtes : un ecart plus serre sur telephone, le texte legal arrive plus vite */
  .leg-bloc + .leg-bloc { margin-top: 40px; padding-top: 40px; }
  .leg-texte { font-size: 17px; }
  .leg-texte--fort { font-size: 21px; }
  .leg-carte { padding: 20px; border-radius: 22px; }
  .leg-carte:has(> .leg-lignes:only-child) { padding-block: 4px; }
  .leg-lignes__ligne, .leg-carte--noms .leg-lignes__ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .leg-lignes dt { font-size: 15px; }
  .leg-lignes dd { font-size: 17px; }
  .leg-lien-discret { min-height: 44px; }
  .leg-personne { padding: 14px 18px 14px 14px; }
  .leg-personne img { width: 56px; height: 56px; }
  /* La fleche se range a cote du titre : la phrase prend toute la largeur de la carte */
  .leg-lien { position: relative; display: block; }
  .leg-lien__texte { gap: 12px; }
  .leg-lien__titre { display: block; padding-right: 56px; }
  .leg-lien__fleche { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; }
  .leg-droits__mail { font-size: clamp(20px, 6vw, 24px); }
  .leg-final .final__actions .bouton { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   PAGE 404 : le monogramme se dessine, les lueurs le parcourent
   ══════════════════════════════════════════════════════════════════ */
.leg-404 {
  display: grid;
  align-content: center;
  gap: clamp(48px, 6vh, 72px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(104px, 13vh, 140px) 0 clamp(48px, 7vh, 88px);
  background: var(--noir);
}
.leg-404__contenu { display: grid; justify-items: center; gap: clamp(18px, 2vw, 24px); text-align: center; }
.leg-404__contenu > :not(.leg-404__marque) { animation: eoche-fondu 0.9s var(--ease) both; }
.leg-404__titre { animation-delay: 0.5s !important; }
.leg-404__texte { animation-delay: 0.65s !important; }
.leg-404__actions { animation-delay: 0.8s !important; }

.leg-404__marque { display: block; width: clamp(160px, 15vw, 220px); margin-bottom: 4px; border-radius: 50%; }
.leg-404__mono { width: 100%; }

/* Le titre porte la classe commune des H1 interieurs (page-heros__titre) : il suit l'echelle des titres */
.leg-404__titre { color: #F4F4F5; }
.leg-404__texte { max-width: 42ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: #C4C4CC; }
.leg-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* Les chemins utiles : quatre liens en ligne, sans carte ni pictogramme */
.leg-404__nav { display: grid; gap: 14px; animation: eoche-fondu 0.9s var(--ease) 0.95s both; }
.leg-404__nav-titre { font-size: 16px; font-weight: 600; color: #A1A1AA; }
.leg-404__liens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ligne-sombre-2);
}
.leg-404__liens li + li { border-left: 1px solid var(--ligne-sombre-2); }
.leg-404__liens a {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 22px 24px 8px;
  transition: background-color 0.25s ease;
}
.leg-404__liens li:first-child a { padding-left: 0; }
.leg-404__liens b { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: #F4F4F5; }
.leg-404__liens b::after { content: "\2192"; color: var(--rouge); transition: transform 0.35s var(--ease); }
.leg-404__liens span { font-size: 16px; line-height: 1.5; color: #B4B4BC; }
.leg-404__liens a:hover b { color: #fff; }
.leg-404__liens a:hover b::after { transform: translateX(4px); }

@media (max-width: 1023px) {
  .leg-404__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leg-404__liens li:nth-child(3) { border-left: 0; }
  .leg-404__liens li:nth-child(n+3) { border-top: 1px solid var(--ligne-sombre-2); }
  .leg-404__liens li:nth-child(odd) a { padding-left: 0; }
  .leg-404__liens a { padding-bottom: 20px; }
}
@media (max-width: 767px) {
  .leg-404 { gap: 48px; padding: 96px 0 56px; }
  .leg-404__marque { width: min(170px, 46vw); }
  .leg-404__texte { font-size: 17px; }
  .leg-404__actions { width: 100%; }
  .leg-404__actions .bouton { flex: 1 1 100%; }
  /* Une entree par ligne, grande surface de toucher */
  .leg-404__liens { grid-template-columns: minmax(0, 1fr); }
  .leg-404__liens li + li { border-left: 0; border-top: 1px solid var(--ligne-sombre-2); }
  .leg-404__liens a { padding: 16px 0; }
  .leg-404__liens li:nth-child(odd) a, .leg-404__liens li:first-child a { padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MOUVEMENT REDUIT : rien ne bouge, tout reste visible
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .leg-404__contenu > *, .leg-404__nav { animation: none !important; opacity: 1 !important; transform: none !important; }
  .leg-lien, .leg-lien__fleche .bouton__fleche { transition: none; }
}

/* Numero de loi, SIREN : jamais coupes en fin de ligne */
.leg-insecable { white-space: nowrap; }