/* ══════════════════════════════════════════════════════════════════════════
   DOJI — Pages légales
   Feuille partagée par mentions-legales.html, cgv.html et confidentialite.html.
   Un fichier plutôt que trois blocs <style> recopiés : ce sont les seules pages
   du site où le même habillage sert trois fois, et une règle corrigée à un seul
   endroit vaut mieux que trois pages qui divergent lentement.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --noir:#050507; --noir2:#0A0A11; --noir3:#12101A;
  --violet:#7C3AED; --violet-hi:#A78BFA;
  --blanc:#F5F3FF; --gris:#8B849E; --gris2:#5C5670;
  --attention:#F59E0B;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--noir);color:var(--blanc);font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.72;font-weight:300;
  padding:0 20px calc(80px + env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased}

/* Halo unique en haut de page : le même geste que la boutique, en plus sobre.
   Aucune animation ici — on vient lire, pas regarder. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 900px 500px at 50% -8%,rgba(124,58,237,.16),transparent 70%)}

.enveloppe{max-width:760px;margin:0 auto}

/* ══ En-tête ══ */
header{padding:calc(38px + env(safe-area-inset-top,0px)) 0 30px;text-align:center}
header .marque{display:inline-block;margin-bottom:26px}
header svg{width:118px;height:auto;fill:var(--blanc);display:block}
h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(27px,6vw,38px);font-weight:600;
  line-height:1.12;letter-spacing:-.02em;margin-bottom:12px}
.chapo{color:var(--gris);font-size:14px;max-width:56ch;margin:0 auto}
.maj{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--violet-hi);margin-bottom:16px}

/* ══ Navigation entre les trois pages ══ */
nav.pages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0 8px}
nav.pages a{padding:9px 15px;border-radius:999px;border:1px solid rgba(167,139,250,.2);
  color:var(--gris);text-decoration:none;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;transition:border-color .3s,color .3s}
nav.pages a:hover{border-color:var(--violet-hi);color:var(--blanc)}
nav.pages a[aria-current=page]{background:rgba(124,58,237,.16);border-color:rgba(167,139,250,.42);color:var(--blanc)}

/* ══ Sommaire ══ */
.sommaire{background:var(--noir2);border:1px solid rgba(167,139,250,.14);border-radius:18px;
  padding:24px 26px;margin:34px 0 46px}
.sommaire h2{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--violet-hi);margin-bottom:14px;font-weight:400}
.sommaire ol{list-style:none;counter-reset:s;columns:2;column-gap:26px}
.sommaire li{counter-increment:s;margin-bottom:7px;break-inside:avoid}
.sommaire a{color:var(--gris);text-decoration:none;font-size:13.5px;transition:color .25s}
.sommaire a::before{content:counter(s,decimal-leading-zero) ' ';
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gris2);margin-right:7px}
.sommaire a:hover{color:var(--blanc)}
@media(max-width:600px){.sommaire ol{columns:1}}

/* ══ Corps ══ */
section{margin-bottom:44px;scroll-margin-top:22px}
h2.titre{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;
  margin-bottom:16px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.09);
  display:flex;gap:12px;align-items:baseline}
h2.titre .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--violet-hi);flex:none}
h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:24px 0 9px;color:var(--blanc)}
p{margin-bottom:13px;color:var(--gris)}
p strong,li strong{color:var(--blanc);font-weight:500}
ul,ol.liste{margin:0 0 14px 20px;color:var(--gris)}
li{margin-bottom:7px}
a{color:var(--violet-hi);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(167,139,250,.42)}
a:hover{text-decoration-color:var(--violet-hi)}

/* ══ Tableaux (durées de conservation, sous-traitants) ══ */
.tab{width:100%;overflow-x:auto;margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet-hi);text-align:left;padding:10px 14px 10px 0;vertical-align:bottom;
  border-bottom:1px solid rgba(167,139,250,.22);font-weight:400}
td{padding:11px 14px 11px 0;border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--gris);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
td:first-child{color:var(--blanc);font-weight:400}

/* ══ Encadré ══
   Sert à l'encadré légal des garanties (obligatoire, art. D. 211-2 du code de la
   consommation) et au formulaire type de rétractation. Bordure pleine et non
   pointillée : la loi impose un encadré, pas une décoration. */
.encadre{border:1px solid rgba(167,139,250,.4);border-radius:14px;padding:22px 24px;
  margin:18px 0;background:rgba(124,58,237,.05)}
.encadre h3{margin-top:0}
.encadre p:last-child,.encadre ul:last-child{margin-bottom:0}

/* ══ Avertissement — ce qui reste à renseigner ══
   Volontairement voyant. Le script de déploiement REFUSE de publier une page qui
   porte encore la marque de complétion : ce bloc n'est donc jamais vu par un
   client, il n'existe que pendant la rédaction. La marque elle-même n'est pas
   recopiée ici, sinon la feuille de style déclencherait le garde-fou. */
.acompleter{border:1px solid var(--attention);border-radius:14px;padding:20px 22px;margin:18px 0;
  background:rgba(245,158,11,.07)}
.acompleter h3{margin-top:0;color:var(--attention)}
.acompleter p{color:#E9D5A1}

/* ══ Pied ══ */
footer{margin-top:60px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris2)}
footer a{color:var(--gris2);text-decoration:none;transition:color .25s}
footer a:hover{color:var(--blanc)}

/* Retour à la boutique, posé en haut à gauche sur grand écran, dans le flux sinon. */
.retour{display:inline-flex;align-items:center;gap:8px;color:var(--gris);text-decoration:none;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;transition:color .25s}
.retour:hover{color:var(--blanc)}

@media print{
  body{background:#fff;color:#000;padding:0}
  body::before,nav.pages,.retour{display:none}
  a{color:#000}
  .encadre{border-color:#000}
}