/* Les documents de la plateforme (/conditions/) et les pages de _pages.js,
   chargés après /socle.css et /hub.css : une colonne de lecture, un sommaire,
   des tableaux simples. Direction « Au marché » (l'accueil) : grand titre
   Fraunces en taille d'affiche, sections séparées de filets, sommaire numéroté.
   Aucune couleur ici : uniquement les jetons du socle. */

.doc{display:grid;gap:var(--e10);padding:clamp(40px,7vw,96px) 0 clamp(64px,9vw,128px)}
.doc__tete{display:grid;gap:var(--e4);max-width:72ch;min-width:0}
/* La taille optique d'affiche (opsz 144) au seul grand titre : plus bas, ses déliés disparaissent. */
.doc__tete h1{font-weight:600;font-variation-settings:"opsz" 144;font-size:clamp(2.5rem,1.3rem + 4.4vw,4.75rem);line-height:.95;letter-spacing:-.034em;max-width:16ch;text-wrap:balance}
.doc__version{color:var(--encre-sourde);font-size:var(--t14);font-variant-numeric:tabular-nums}
.doc__reference{white-space:nowrap}
.doc__chapeau{max-width:60ch;color:var(--encre-douce);font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.55}
.doc__corps{max-width:72ch;min-width:0}
.doc__corps>section{scroll-margin-top:88px}
.doc__corps>section+section{margin-top:var(--e10);padding-top:var(--e10);border-top:1px solid var(--filet-fort)}
.doc__corps h2{margin-bottom:var(--e4);font-weight:600;font-size:clamp(1.55rem,1.3rem + 1vw,2.1rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.doc__corps h3{margin:var(--e6) 0 var(--e2)}
.doc__corps p,.doc__corps li{color:var(--encre-douce)}
.doc__corps p+p,.doc__corps p+ul,.doc__corps ul+p,.doc__corps p+ol,.doc__corps ol+p,.doc__corps p+.tableau,.doc__corps .tableau+p{margin-top:var(--e3)}
.doc__corps ul,.doc__corps ol{display:grid;gap:var(--e2);margin:var(--e3) 0 0;padding-left:1.25em}
.doc__corps li::marker{color:var(--braise)}
.doc__corps .bandeau+*{margin-top:var(--e4)}
.doc__corps strong{color:var(--encre)}
.doc__annexe{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e2);color:var(--braise);font-size:var(--t12);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.doc__annexe::before{content:"";flex:none;width:28px;height:2px;background:currentColor}

/* Le sommaire : des lignes numérotées sur des filets, en deux colonnes sur ordinateur. */
.sommaire{border-top:2px solid var(--encre)}
.sommaire__titre{padding:var(--e4) 0 var(--e2);color:var(--braise);font:700 var(--t12)/1.3 var(--police);letter-spacing:.22em;text-transform:uppercase}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:sommaire;columns:1;column-gap:var(--e8)}
.sommaire li{break-inside:avoid;counter-increment:sommaire;border-bottom:1px solid var(--filet)}
/* Même respiration autour de chaque entrée, qu'elle tienne sur une ligne ou deux ;
   le numéro reste en face de la première ligne. */
.sommaire a{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:baseline;padding-block:var(--e2);line-height:1.35;color:var(--encre);font-weight:500;text-decoration:none;transition:color var(--anim)}
.sommaire a::before{content:counter(sommaire,decimal-leading-zero);color:var(--braise);font-size:var(--t12);font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sommaire a:hover{color:var(--braise-fonce)}
@media (min-width:760px){.sommaire ol{columns:2}}
/* Sur un grand écran, le sommaire passe en colonne à droite et suit la lecture. */
@media (min-width:1100px){
  .doc{grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--e16);align-items:start}
  .doc__tete,.doc__corps{grid-column:1}
  .sommaire{position:sticky;top:96px;grid-column:2;grid-row:1 / span 2;max-height:calc(100vh - 120px);overflow-y:auto}
  .sommaire ol{columns:1}
}

/* Les autres documents : des pastilles, la page ouverte sur l'encre. */
.documents{display:flex;flex-wrap:wrap;gap:var(--e2)}
.documents a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e4);border:2px solid var(--filet-fort);border-radius:var(--rp);background:var(--blanc);color:var(--encre);font-size:var(--t14);font-weight:600;text-decoration:none;transition:border-color var(--anim)}
.documents a:hover{border-color:var(--encre)}
.documents a[aria-current]{border-color:var(--encre);background:var(--encre);color:var(--papier)}

/* Tableaux (sous-traitants, durées de conservation). Sur téléphone, chaque ligne
   devient une fiche : l'en-tête de ligne en titre, chaque cellule précédée de son
   libellé (data-libelle, repris de l'en-tête de colonne). */
.tableau{overflow-x:auto;border-top:2px solid var(--encre);border-bottom:1px solid var(--filet-fort)}
.tableau table{width:100%;border-collapse:collapse;font-size:var(--t14)}
.tableau th,.tableau td{padding:var(--e3) var(--e4) var(--e3) 0;border-bottom:1px solid var(--filet);text-align:left;vertical-align:top}
.tableau tr:last-child>*{border-bottom:0}
.tableau th{color:var(--encre);font-weight:600}
.tableau thead th{color:var(--encre-sourde);font-size:var(--t12);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.tableau td{color:var(--encre-douce)}
@media (max-width:599px){
  .tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tableau :is(table,tbody,tr,th,td){display:block}
  .tableau tr{padding:var(--e4) 0;border-bottom:1px solid var(--filet)}
  .tableau tr:last-child{border-bottom:0}
  .tableau :is(th,td){padding:0;border:0}
  .tableau td{margin-top:var(--e2)}
  .tableau td[data-libelle]::before{content:attr(data-libelle);display:block;color:var(--encre-sourde);font-size:var(--t12);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
}

/* Une fiche (les mentions légales) : le libellé, puis la valeur, sur des filets. */
.fiche{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--e6);margin:var(--e3) 0 0;border-top:2px solid var(--encre)}
.fiche dt{padding-top:var(--e3);color:var(--encre);font-weight:600}
.fiche dd{padding:var(--e1) 0 var(--e3);border-bottom:1px solid var(--filet);color:var(--encre-douce)}
.doc__corps .fiche+p{margin-top:var(--e5)}
@media (min-width:600px){
  .fiche{grid-template-columns:200px minmax(0,1fr)}
  .fiche dt{padding-block:var(--e3);border-bottom:1px solid var(--filet)}
  .fiche dd{padding-block:var(--e3)}
}

/* Le mouvement : la tête monte une fois (rien sous « mouvement réduit »). */
@media (prefers-reduced-motion:no-preference){
  .doc__tete>*{animation:doc-monte .7s var(--lent) backwards}
  .doc__tete>:nth-child(2){animation-delay:.05s}
  .doc__tete>:nth-child(n+3){animation-delay:.1s}
}
@keyframes doc-monte{from{opacity:0;transform:translateY(12px)}}