/* Pages légales de cinq.studio
   Mêmes jetons, même police, même en-tête et même pied de page que l’accueil. */
:root{
  --bleu:#21418F;
  --bleu-fonce:#183473;
  --nuit:#132A5E;
  --bleu-lave:#8FA4D6;
  --bleu-pale:#C9D4EF;
  --lin:#F5F7FB;
  --encre:#0E1A33;
  --encre-2:#4A5672;
  --filet:#DCE2EC;
  --bleu-texte:#2447A0;
  --ligne-claire:rgba(245,247,251,.18);
  --police:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --marge:clamp(20px, 5vw, 72px);
  --largeur:1296px;
  --entete:72px;
  --gouttiere:24px;
  --courbe:cubic-bezier(.65, 0, .35, 1);
  --matiere:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E");
}

*, *::before, *::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete) + 24px);
}
body{
  margin:0;
  background:#fff;
  color:var(--encre);
  font-family:var(--police);
  font-size:18px;
  line-height:1.6;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1, h2, h3, p, ol, ul, dl, dd, figure{margin:0;padding:0;}
ol, ul{list-style:none;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
strong{font-weight:600;}
::selection{background:var(--bleu);color:var(--lin);}
:focus-visible{outline:2px solid var(--bleu-texte);outline-offset:3px;}
.sur-bleu :focus-visible{outline-color:var(--lin);}

.sr{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.evitement{
  position:absolute;left:var(--marge);top:-100px;z-index:50;
  background:var(--lin);color:var(--bleu);padding:10px 16px;font-weight:500;
}
.evitement:focus{top:12px;}

.conteneur{
  width:100%;
  max-width:calc(var(--largeur) + 2 * var(--marge));
  margin-inline:auto;
  padding-inline:var(--marge);
}
.grille{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--gouttiere);
}
.sur-bleu{background-color:var(--bleu);background-image:var(--matiere);color:var(--lin);}

/* Boutons : le fond se balaie de gauche à droite. */
.bouton{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:stretch;
  min-height:42px;padding:0;
  font:inherit;font-size:15px;font-weight:500;line-height:1.2;
  text-decoration:none;text-align:center;
  border:0;
  background-color:var(--fond-repos);
}
.bouton::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--fond-survol);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--courbe);
}
.libelle{
  display:flex;align-items:center;justify-content:center;flex:1;
  padding:0 18px;
  background-image:linear-gradient(to right, var(--texte-survol) 50%, var(--texte-repos) 50%);
  background-size:200% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:background-position .55s var(--courbe);
}
.bouton:hover::before, .bouton:focus-visible::before{transform:scaleX(1);}
.bouton:hover .libelle, .bouton:focus-visible .libelle{background-position:0 0;}
.bouton--plein{--fond-repos:var(--lin);--fond-survol:var(--bleu-fonce);--texte-repos:var(--bleu);--texte-survol:var(--lin);}
@media (forced-colors: active){
  .libelle{background:none;color:inherit;-webkit-text-fill-color:currentColor;}
}

/* En-tête */
.entete{
  position:sticky;top:0;z-index:20;
  background-color:var(--bleu);background-image:var(--matiere);color:var(--lin);
}
.entete :focus-visible{outline-color:var(--lin);}
.entete-barre{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--entete);}
.marque{font-size:27px;font-weight:600;letter-spacing:-.025em;line-height:1;text-decoration:none;}
.marque span{color:var(--bleu-lave);}
.nav{display:flex;align-items:center;gap:32px;font-size:16px;}
.nav a{text-decoration:none;white-space:nowrap;}
.nav-retour{
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom:3px;transition:background-size .45s var(--courbe);
}
.nav-retour:hover, .nav-retour:focus-visible{background-size:100% 1px;}

/* Document */
.doc{padding-top:clamp(48px, 8vw, 104px);padding-bottom:clamp(72px, 10vw, 128px);}
.doc-tete{max-width:62rem;}
.doc-ref{
  display:flex;flex-wrap:wrap;gap:4px 24px;
  font-size:15px;color:var(--encre-2);
  margin-bottom:24px;
}
.doc h1{
  font-size:clamp(40px, 6vw, 76px);font-weight:600;
  line-height:1.02;letter-spacing:-.035em;
  max-width:18ch;
}
.doc .intro, .doc .lead{
  margin-top:28px;max-width:60ch;
  font-size:clamp(19px, 1.6vw, 22px);line-height:1.55;color:var(--encre-2);
}
.doc .intro a, .doc .lead a{color:var(--bleu-texte);}

.doc-corps{margin-top:clamp(48px, 7vw, 96px);row-gap:40px;}

.toc{grid-column:1 / span 4;align-self:start;}
/* Le sommaire ne reste collé que si la fenêtre est assez haute pour l’afficher en entier. */
@media (min-width:1100px) and (min-height:880px){
  .toc{position:sticky;top:calc(var(--entete) + 32px);}
}
.toc-head{font-size:15px;color:var(--encre-2);padding-bottom:12px;border-bottom:1px solid var(--filet);}
.toc a{
  display:flex;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--filet);
  font-size:16px;line-height:1.4;text-decoration:none;
  transition:color .3s ease;
}
.toc a:hover, .toc a:focus-visible{color:var(--bleu-texte);}
.toc .num{flex-shrink:0;min-width:2ch;color:var(--bleu-texte);font-variant-numeric:tabular-nums;}

.articles{grid-column:6 / span 7;}
.articles section{padding:40px 0;border-top:1px solid var(--filet);}
.articles section:first-child{padding-top:0;border-top:0;}
.article-num{display:block;margin-bottom:6px;font-size:15px;color:var(--bleu-texte);font-variant-numeric:tabular-nums;}
.articles h2{
  font-size:clamp(24px, 2.4vw, 30px);font-weight:600;
  line-height:1.2;letter-spacing:-.02em;
  margin-bottom:18px;
}
.articles h3{font-size:19px;font-weight:600;margin:24px 0 8px;}
.articles p, .articles li, .articles dd{color:var(--encre-2);}
.articles strong{color:var(--encre);}
.articles a{color:var(--bleu-texte);}
.articles p + p, .articles p + ul, .articles ul + p, .articles p + dl, .articles dl + p, .articles p + ol, .articles ol + p{margin-top:14px;}
.articles ul{list-style:disc;padding-left:1.2em;}
.articles ol{list-style:decimal;padding-left:1.4em;}
.articles li::marker{color:var(--encre-2);}
.articles li + li{margin-top:10px;}
.articles dl{display:grid;grid-template-columns:200px 1fr;gap:12px 24px;}
.articles dt{color:var(--encre);font-weight:500;}

/* Pied de page, identique à l’accueil */
.pied{overflow:hidden;padding-top:44px;font-size:15px;color:var(--bleu-pale);}
.pied-haut{border-top:1px solid var(--ligne-claire);padding-top:40px;}
.pied-grille{row-gap:28px;}
.pied-marque{grid-column:1 / span 4;}
.pied-marque p{max-width:30ch;}
.pied-liens{grid-column:6 / span 3;}
.pied-liens li + li{margin-top:6px;}
.pied-liens a{
  text-decoration:none;
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .45s var(--courbe), color .3s ease;
}
.pied-liens a:hover, .pied-liens a:focus-visible, .pied-liens a[aria-current]{color:var(--lin);background-size:100% 1px;}
.pied-mentions{grid-column:10 / span 3;}
.pied-mentions p + p{margin-top:6px;}
.signature{
  margin-top:clamp(40px, 6vw, 88px);
  font-size:min(calc((100vw - 2 * var(--marge)) * .452), calc(var(--largeur) * .452));
  font-weight:600;line-height:.82;letter-spacing:-.06em;
  margin-left:-.045em;padding-bottom:.1em;
  color:var(--lin);white-space:nowrap;user-select:none;pointer-events:none;
}
.signature-point{color:var(--bleu-lave);}

/* Tablette */
@media (max-width:1099px){
  .toc{grid-column:1 / -1;position:static;}
  .articles{grid-column:1 / -1;}
  .pied-marque{grid-column:1 / span 6;}
  .pied-liens{grid-column:7 / span 6;}
  .pied-mentions{grid-column:1 / -1;}
}

/* Mobile */
@media (max-width:759px){
  :root{--entete:60px;--gouttiere:16px;}
  body{font-size:17px;}
  .nav{gap:18px;}
  .marque{font-size:24px;}
  .nav-retour{display:none;}
  .bouton{min-height:38px;}
  .libelle{padding:0 14px;}
  .articles dl{grid-template-columns:1fr;gap:4px;}
  .articles dt{margin-top:12px;}
  .articles dt:first-child{margin-top:0;}
  .pied-marque, .pied-liens, .pied-mentions{grid-column:1 / -1;}
}
@media (max-width:380px){
  .bouton{font-size:14px;}
  .libelle{padding:0 12px;}
}

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