/* ══════════════════════════════════════════════════════════════════════
   EIDION — Centre juridique
   ----------------------------------------------------------------------
   Ce fichier reprend tel quel le système de design de la vitrine
   (index.html) : tokens, typographie, boutons, nav, footer, cartes.
   Il ajoute ensuite les styles propres à la documentation juridique
   (sommaire, tableaux, séparateurs, navigation entre documents).
   Rien n'est chargé depuis un framework : uniquement ce fichier.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --film:      #0F0F0F;
  --film-2:    #2A2A2A;
  --papier:    #F2F2F2;
  --papier-2:  #FAFAFA;
  --trait:     #E1E1E1;
  --trait-2:   #ECECEC;
  --encre:     #0F0F0F;
  --gris:      #5C5C5C;
  --gris-2:    #9B9B9B;
  --sol:       #EAEAEA;

  --jaune:     #F2B200;
  --jaune-pale:#FBE9B8;

  --r:   14px;
  --r-s: 8px;

  --om-1: 0 1px 2px rgba(15,15,15,.05);
  --om-2: 0 4px 16px -6px rgba(15,15,15,.14), 0 1px 3px rgba(15,15,15,.05);
  --om-3: 0 18px 44px -18px rgba(15,15,15,.28), 0 3px 10px rgba(15,15,15,.06);

  --pas: 260ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:96px}
body{
  background:var(--papier);color:var(--encre);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

.enveloppe{max-width:1140px;margin:0 auto;padding:0 24px}

/* ── Typographie (identique à la vitrine) ─────────────────────────────── */
h1,h2,h3{font-family:Inter,sans-serif;letter-spacing:-.028em;line-height:1.08}
h1{font-weight:900;font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-weight:800;font-size:clamp(1.75rem,3.4vw,2.65rem);line-height:1.14}
h3{font-weight:700;font-size:1.09rem;letter-spacing:-.012em;line-height:1.3}

.mono{font-family:Inter,sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

.sourcil{display:inline-flex;align-items:center;gap:9px;color:var(--encre);font-weight:600;margin-bottom:18px}
.sourcil::before{content:'';width:20px;height:2px;background:var(--jaune);opacity:1}

.chapo{font-size:1.14rem;color:var(--gris);max-width:60ch;line-height:1.68}

/* ── Boutons (identiques à la vitrine) ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-s);border:1px solid transparent;
  font-family:Inter,sans-serif;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;
  transition:transform var(--pas),box-shadow var(--pas),background var(--pas),color var(--pas),border-color var(--pas);
}
.btn-jaune{background:var(--jaune);color:var(--encre);box-shadow:var(--om-2)}
.btn-jaune:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(242,178,0,.5)}
.btn-jaune:active{transform:translateY(0)}

.btn-trait{background:transparent;color:var(--encre);border-color:var(--trait)}
.btn-trait:hover{border-color:var(--encre);color:var(--encre);background:var(--papier-2);transform:translateY(-2px);box-shadow:var(--om-2)}

.btn .fl{transition:transform var(--pas)}
.btn:hover .fl{transform:translateX(3px)}

:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:4px}

/* ── Navigation (identique à la vitrine) ───────────────────────────────── */
/* Important : ciblé par #nav (et non le tag nav) pour ne PAS s'appliquer
   au fil d'Ariane ni à la nav précédent/suivant, qui utilisent aussi la
   balise <nav> pour l'accessibilité mais ne doivent pas être fixes. */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(244,246,247,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--pas),box-shadow var(--pas);
}
#nav.pose{border-bottom-color:var(--trait);box-shadow:var(--om-1)}
.nav-in{max-width:1140px;margin:0 auto;padding:15px 24px;display:flex;align-items:center;gap:30px}

.marque{display:inline-flex;align-items:baseline;text-decoration:none;color:var(--encre);
  font-family:Inter,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.03em;line-height:1}
.marque .pt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--jaune);
  margin-left:3px;margin-bottom:2px;align-self:flex-end;transition:transform var(--pas),box-shadow var(--pas)}
.marque:hover .pt{transform:scale(1.5);box-shadow:0 0 7px 2px rgba(242,178,0,.55),0 0 14px 6px rgba(242,178,0,.28)}

.nav-liens{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-liens a:not(.btn){
  position:relative;text-decoration:none;color:var(--gris);font-size:14.5px;font-weight:500;
  padding:4px 0;transition:color var(--pas);
}
.nav-liens a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--jaune);transition:right var(--pas);
}
.nav-liens a:not(.btn):hover{color:var(--encre)}
.nav-liens a:not(.btn):hover::after{right:0}
.nav-liens .btn{padding:10px 18px;font-size:14px}

.nav-connexion{color:var(--gris-2)!important}
.nav-connexion:hover{color:var(--encre)!important}
.nav-connexion::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:var(--trait);
}
.nav-actuel{color:var(--encre)!important}
.nav-actuel::after{right:0!important}

@media(max-width:820px){
  .nav-liens{gap:16px}
  .nav-liens a:not(.btn):not(.nav-connexion){display:none}
  .nav-connexion::before{display:none}
}

/* ── Cartes (identiques à la vitrine) ──────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grille{grid-template-columns:1fr}}

.carte{
  position:relative;background:var(--papier-2);border:1px solid var(--trait);
  border-radius:var(--r);padding:26px 24px;transition:transform var(--pas),box-shadow var(--pas),border-color var(--pas);
}
.carte::after{
  content:'';position:absolute;top:-1px;left:0;right:100%;height:2px;
  background:var(--jaune);transition:right var(--pas);
}
.carte:hover{transform:translateY(-4px);box-shadow:var(--om-3);border-color:var(--jaune-pale)}
.carte:hover::after{right:0}
.carte-ico{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:var(--trait-2);color:var(--encre);margin-bottom:16px;
  transition:transform var(--pas),background var(--pas);
}
.carte:hover .carte-ico{transform:scale(1.08) rotate(-3deg);background:var(--jaune-pale)}
.carte h3{margin-bottom:8px}
.carte p{color:var(--gris);font-size:14.6px;line-height:1.62}

/* ── Footer (complété par la rubrique Confiance ; fond distinct du
   contenu pour marquer la transition) ──────────────────────────────── */
footer{background:var(--sol);border-top:1px solid var(--trait);padding:56px 0 40px;margin-top:64px}
.pied{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pied-marque{display:flex;flex-direction:column;gap:9px}
.pied-etym{color:var(--gris-2);font-size:12.5px;font-style:italic;max-width:34ch;line-height:1.5}
.pied-etym i{font-style:italic}
.pied-cols{display:flex;gap:48px;flex-wrap:wrap;padding-top:2px}
.pied-col{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-col h4{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2);margin:0 0 1px}
.pied-col a{color:var(--gris);text-decoration:none;font-size:14px;transition:color var(--pas)}
.pied-col a:hover{color:var(--encre)}
.pied-confiance{display:flex;gap:28px;flex-wrap:wrap}
.pied-sub{display:flex;flex-direction:column;gap:11px;min-width:112px}
.pied-bas{margin-top:26px;color:var(--gris-2);font-size:13px}

/* ── Retour en haut (identique à la vitrine) ───────────────────────────── */
#haut{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--trait);
  background:var(--papier-2);color:var(--encre);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--om-2);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity var(--pas),transform var(--pas),box-shadow var(--pas),background var(--pas),color var(--pas);
}
#haut.vu{opacity:1;transform:none;pointer-events:auto}
#haut:hover{background:var(--jaune);color:var(--encre);box-shadow:var(--om-3);transform:translateY(-3px)}
@media(max-width:520px){#haut{right:16px;bottom:16px}}

.monte{opacity:0;transform:translateY(20px);transition:opacity 620ms ease,transform 620ms cubic-bezier(.22,.61,.36,1)}
.monte.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .monte{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   DOCUMENTATION — styles propres au Centre juridique
   ══════════════════════════════════════════════════════════════════════ */

.doc-page{padding:132px 0 96px}

/* ── Fil d'Ariane ───────────────────────────────────────────────────── */
.doc-crumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  color:var(--gris);font-size:13.5px;margin-bottom:36px;
}
.doc-crumb a{color:var(--gris);text-decoration:none;transition:color var(--pas)}
.doc-crumb a:hover{color:var(--encre)}
.doc-crumb .sep{color:var(--gris-2)}
.doc-crumb .ici{color:var(--encre);font-weight:600}

/* ── En-tête de document ───────────────────────────────────────────── */
.doc-head{max-width:760px;margin:0 0 52px}
.doc-head h1{font-size:clamp(2rem,4.2vw,2.9rem)}
.doc-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;
  color:var(--gris-2);font-size:13.5px;
}
.doc-meta .pt{width:3px;height:3px;border-radius:50%;background:var(--gris-2)}

/* ── Mise en page : contenu + sommaire ─────────────────────────────── */
.doc-layout{
  display:grid;grid-template-columns:minmax(0,700px) 232px;
  gap:64px;align-items:start;
}
@media(max-width:1080px){
  .doc-layout{grid-template-columns:minmax(0,720px)}
}

.doc-toc{position:sticky;top:112px;padding-left:28px;border-left:1px solid var(--trait-2)}
.doc-toc-label{margin-bottom:14px;color:var(--gris-2)}
.doc-toc ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.doc-toc a{
  display:block;padding:6px 0 6px 13px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--gris);text-decoration:none;
  font-size:13.5px;line-height:1.4;transition:color var(--pas),border-color var(--pas);
}
.doc-toc a:hover{color:var(--encre)}
.doc-toc a.actif{color:var(--encre);border-left-color:var(--jaune);font-weight:600}
@media(max-width:1080px){.doc-toc{display:none}}

/* ── Corps du document : la lecture ─────────────────────────────────── */
.doc-content{max-width:700px}
.doc-content h2{
  font-size:1.5rem;font-weight:800;margin:52px 0 18px;letter-spacing:-.018em;
  scroll-margin-top:112px;
}
.doc-content > h2:first-child{margin-top:0}
.doc-content h3{
  font-size:1.09rem;font-weight:700;margin:30px 0 12px;scroll-margin-top:112px;
}
.doc-content p{margin:0 0 18px;color:var(--film-2);line-height:1.72}
.doc-content ul{margin:0 0 20px;padding-left:22px;color:var(--film-2)}
.doc-content li{margin-bottom:9px;line-height:1.62;padding-left:2px}
.doc-content li::marker{color:var(--jaune)}
.doc-content strong{font-weight:700;color:var(--encre)}
.doc-content em{font-style:italic}
.doc-content a{
  color:var(--encre);text-decoration-line:underline;text-decoration-color:var(--jaune-pale);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color var(--pas);
}
.doc-content a:hover{text-decoration-color:var(--jaune)}
.doc-content .doc-mail-link{font-weight:600}

.doc-content blockquote{
  margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--jaune);color:var(--gris);
}
.doc-content blockquote p{margin:0;color:var(--gris)}

hr.doc-hr{border:none;border-top:1px solid var(--trait-2);margin:44px 0}
.doc-content > hr.doc-hr:first-child{display:none}

/* ── Tableaux élégants, scrollables sur petit écran ─────────────────── */
.doc-table-wrap{overflow-x:auto;margin:8px 0 28px;border:1px solid var(--trait-2);border-radius:var(--r-s)}
.doc-table-wrap table{width:100%;border-collapse:collapse;font-size:14.3px;min-width:420px}
.doc-table-wrap thead th{
  text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris-2);padding:12px 18px;background:var(--papier-2);
  border-bottom:1px solid var(--trait);white-space:nowrap;
}
.doc-table-wrap td{padding:13px 18px;border-bottom:1px solid var(--trait-2);color:var(--film-2);vertical-align:top}
.doc-table-wrap tbody tr:last-child td{border-bottom:none}
.doc-table-wrap tbody tr{transition:background var(--pas)}
.doc-table-wrap tbody tr:hover{background:var(--papier-2)}

/* ── Documents associés : grille de cartes discrètes ────────────────── */
.doc-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 8px}
@media(max-width:640px){.doc-related-grid{grid-template-columns:1fr}}
.doc-related-card{
  display:flex;align-items:center;gap:12px;padding:14px 17px;
  border:1px solid var(--trait);border-radius:var(--r-s);text-decoration:none!important;
  color:var(--encre);transition:transform var(--pas),box-shadow var(--pas),border-color var(--pas);
}
.doc-related-card:hover{transform:translateY(-2px);box-shadow:var(--om-2);border-color:var(--jaune-pale)}
.doc-related-card svg{flex-shrink:0;color:var(--gris-2);transition:color var(--pas)}
.doc-related-card:hover svg{color:var(--encre)}
.doc-related-card span{font-size:14px;font-weight:600;text-decoration:none;line-height:1.3}

/* ── Retour au Centre juridique + navigation précédent/suivant ─────── */
.doc-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  color:var(--gris);text-decoration:none;font-size:14px;transition:color var(--pas),gap var(--pas);
}
.doc-back:hover{color:var(--encre);gap:11px}
.doc-back svg{transition:transform var(--pas)}
.doc-back:hover svg{transform:translateX(-3px)}

.doc-foot-nav{
  position:sticky;bottom:20px;
  max-width:700px;margin:40px 0 0;
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(250,250,250,.92);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border:1px solid var(--trait);border-radius:var(--r);
  box-shadow:var(--om-3);overflow:hidden;z-index:45;
}
.doc-foot-nav a{
  display:flex;flex-direction:column;gap:5px;padding:14px 20px;
  text-decoration:none!important;color:var(--encre);
  transition:background var(--pas);
}
.doc-foot-nav a:first-child{border-right:1px solid var(--trait)}
.doc-foot-nav a:hover{background:rgba(242,178,0,.1)}
.doc-foot-nav .lbl{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-2);
  display:flex;align-items:center;gap:6px;
}
.doc-foot-next{text-align:right}
.doc-foot-next .lbl{justify-content:flex-end}
.doc-foot-nav .titre{font-size:14px;font-weight:700;line-height:1.32}
@media(max-width:1080px){.doc-foot-nav{max-width:100%}}
@media(max-width:640px){
  .doc-foot-nav{bottom:12px;margin-top:32px}
  .doc-foot-nav .titre{font-size:12.5px}
  .doc-foot-nav a{padding:11px 14px}
}
@media(prefers-reduced-motion:reduce){.doc-foot-nav{position:static}}

/* ══════════════════════════════════════════════════════════════════════
   Hub — /legal
   ══════════════════════════════════════════════════════════════════════ */
.legal-hero{padding:132px 0 12px}
.legal-hero .doc-crumb{margin-bottom:28px}
.legal-hero h1{font-size:clamp(2.3rem,5vw,3.5rem);margin-bottom:18px}

#legal-grille{padding:56px 0 20px}
h2.legal-section-label{
  font-family:Inter,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:22px;
}
.legal-carte{display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:var(--encre)}
.legal-carte .fl-go{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;
  color:var(--gris);font-size:13.5px;font-weight:600;transition:color var(--pas),gap var(--pas);
}
.legal-carte:hover .fl-go{color:var(--encre);gap:9px}

#legal-suite{padding:44px 0 100px}
#legal-suite .doc-content{max-width:760px}