/* ════════════════════════════════════════════════════════════════════
   THE LEGAL PAGES — /mentions-legales.html and /confidentialite.html.

   A calm reading page printed on the site's paper. The two marker blocks
   below are copied VERBATIM from style.css (GENERATED + FONTS): if the
   brand or the fonts change there, copy them here again. Every other rule
   uses only those tokens. No JavaScript, no request outside odyste.com.
   ════════════════════════════════════════════════════════════════════ */

/* GENERATED (copied verbatim from style.css, which scripts/brand.py writes) */
/* P #f2ebe0 = oklch(0.9425 0.0165 79.4) parents surfaces · D #011255 = oklch(0.2316 0.1218 264.0) parents marks · chromatic */
:root{
  --paper:#f2ebe0;
  --paper-2:#e8e1d6;
  --ink:#010621;
  --ink-2:#000112;
  --accent:#1640ad;
  --accent-light:#76a2ff;
  --warm:#b95e00; /* orange 55 */
  --line:rgba(1,18,85,0.16);
  --line-dark:rgba(118,162,255,0.14);
  --ink-dim:rgba(1,6,33,0.55);
  --ink-faint:rgba(1,6,33,0.22);
  --paper-dim:rgba(242,235,224,0.85);
  --shadow:rgba(0,1,18,0.28);
  --shadow-deep:rgba(0,1,18,0.42);
  --row-tint:sepia(1) saturate(1.75) hue-rotate(182deg) brightness(0.42); /* paper text >= 4.61:1 worst case */
  --ink-filter:brightness(8.34) saturate(1.2) drop-shadow(0 0 22px rgba(118,162,255,0.32)); /* line #011255 -> #009bff = 7.04:1 on --ink-2 */
}
/* END GENERATED */
/* FONTS (copied verbatim from style.css) */
/* self-hosted (latin + latin-ext, from Google Fonts, SIL Open Font License): no visitor request leaves odyste.com */
@font-face{font-family:'Fauna One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/fauna-one-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fauna One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/fauna-one-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Raleway';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/raleway-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Raleway';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/raleway-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --font-display:'Fauna One',Georgia,serif;
  --font-label:'Outfit',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-em:'Raleway','Fauna One',Georgia,serif;
}
/* END FONTS */

/* layout + derived tokens (not brand). --ink-soft is ink thinned on paper:
   about 7.8:1 on --paper, so secondary text still clears 4.5:1 (--ink-dim does not, ~4.3:1) */
:root{
  --gut:clamp(16px,2.4vw,36px);
  --ink-soft:color-mix(in srgb,var(--ink) 72%,var(--paper));
  color-scheme:light;
}

/* ═══════════════════════════ BASE ═══════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--paper);color:var(--ink);font:400 17px/1.72 var(--font-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;overflow-wrap:break-word}
::selection{background:var(--accent);color:var(--paper)}
em{font-family:var(--font-em);font-style:italic;font-weight:500}
strong{font-weight:500}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-thickness .2s}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* long addresses and links never push the page sideways at 375 */
a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere}

/* the skip link: out of sight until a keyboard reaches it */
.skip{position:absolute;left:var(--gut);top:-80px;z-index:20;background:var(--ink);color:var(--paper);padding:12px 16px;text-decoration:none;
  font:600 11px/1 var(--font-label);letter-spacing:.2em;text-transform:uppercase}
.skip:focus{top:12px}

/* ═══════════════════════════ THE PAPER BAR ═══════════════════════════ */
.legal-head{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px var(--gut);color:var(--ink);background:var(--paper);background:color-mix(in srgb,var(--paper) 94%,transparent);
  border-bottom:1px solid var(--line)}
.legal-head .brand{font-family:var(--font-display);font-size:22px;letter-spacing:.02em;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.legal-head .back{font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.4;
  color:var(--accent);text-decoration:none;padding:10px 0;white-space:nowrap}
.legal-head .back:hover{text-decoration:underline}

/* ═══════════════════════════ THE PAGE ═══════════════════════════ */
.legal{width:min(100% - 2*var(--gut),70ch);margin:0 auto;padding:clamp(48px,10vh,112px) 0 clamp(64px,12vh,136px);counter-reset:sec}
.legal .kicker{display:block;margin-bottom:16px;font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1.5;color:var(--accent)}
.legal h1{font-family:var(--font-display);font-weight:400;font-size:clamp(38px,7vw,68px);line-height:1.05;letter-spacing:-.005em;margin-bottom:20px;overflow-wrap:break-word}
.legal h1 em{color:var(--accent)}
.legal .updated{font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.5;color:var(--ink-soft);margin-bottom:34px}
.legal .lede{font-size:19px;line-height:1.62;margin-bottom:28px}

/* section titles in the label voice, numbered like drawing sheets */
.legal h2{counter-increment:sec;margin:64px 0 18px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:84px;
  font-family:var(--font-label);font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--ink)}
.legal h2::before{content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero) / "";color:var(--accent);margin-right:14px}
.legal h3{font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.5;margin:30px 0 8px;color:var(--ink)}
.legal p,.legal ul,.legal ol,.legal address{margin-bottom:16px}
.legal address{font-style:normal}
.legal ul,.legal ol{padding-left:1.25em}
.legal li{margin-bottom:8px;padding-left:.2em}
.legal li::marker{color:var(--accent)}
.legal .note{font-size:15px;line-height:1.65;color:var(--ink-soft)}

/* "en bref": the short layer first, the details below it */
.summary{margin:8px 0 12px;padding:24px clamp(18px,4vw,30px);background:var(--paper-2);border:1px solid var(--line)}
.summary-title{display:block;margin-bottom:12px;font-family:var(--font-label);font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.5;color:var(--accent)}
.summary ul{list-style:none;padding:0;margin:0}
.summary li{position:relative;padding-left:1.4em;margin-bottom:10px}
.summary li:last-child{margin-bottom:0}
.summary li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* the table of contents */
.toc{margin:28px 0 0;font-size:15.5px;line-height:1.6}
.toc .summary-title{color:var(--ink-soft)}
.toc ol{list-style:decimal-leading-zero;padding-left:2.4em;margin:0}
.toc li{margin-bottom:4px}
.toc li::marker{font-family:var(--font-label);font-size:12px;letter-spacing:.06em}
.toc a{text-decoration-color:var(--line)}
.toc a:hover{text-decoration-color:currentColor}

/* fact sheets: a term on the left, its value on the right; stacked on phones */
.facts{margin:18px 0 22px;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(0,12.5em) minmax(0,1fr);gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{padding-top:.4em;font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;color:var(--ink-soft)}
.facts dd{min-width:0}
.facts dd address{margin:0}
.facts dd p{margin-bottom:8px}
.facts dd p:last-child{margin-bottom:0}
@media(max-width:560px){.facts>div{grid-template-columns:minmax(0,1fr)}}

/* one card per purpose (data · legal basis) */
.purpose{margin-top:30px}
.purpose h3{margin:0 0 4px}
.purpose .facts{margin-top:10px}

.legal .end{margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}

/* ═══════════════════════════ THE FOOT (same rules as footer.css) ═══════════════════════════ */
.site-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 32px;
  padding:22px var(--gut) 26px;background:var(--paper);color:var(--ink);border-top:1px solid var(--line);
  font-family:var(--font-label);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:1.5}
.site-foot p{margin:0;padding:12px 0}
.foot-nav{display:flex;flex-wrap:wrap;column-gap:26px}
.foot-nav a{display:inline-block;padding:12px 0;font-weight:600;color:var(--ink);text-decoration:none;transition:color .25s}
.foot-nav a:hover,.foot-nav a:focus-visible,.foot-nav a[aria-current="page"]{color:var(--accent)}
.foot-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:600px){.site-foot{flex-direction:column;align-items:flex-start}}

@media(prefers-reduced-motion:reduce){a,.foot-nav a{transition:none}}

/* ═══════════════════════════ PRINT ═══════════════════════════ */
@media print{
  .legal-head{position:static;border:0}
  .legal-head .back,.skip,.toc,.site-foot{display:none}
  .legal{width:auto;padding:0}
  .summary{background:none}
  a{color:inherit}
}