/* ===========================================================
   LES PAGES D'INFORMATION : mentions legales, confidentialite,
   CGU/CGV, page introuvable. Les memes polices, les memes couleurs que
   l'application : on doit sentir qu'on n'a pas quitte la plateforme.
   Une feuille blanche, une colonne de lecture (68 signes environ), et
   une seule action en bas : revenir a la plateforme.
   =========================================================== */
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(polices/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url(polices/figtree-600.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url(polices/figtree-700.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-weight:700;font-style:normal;font-display:swap;src:url(polices/unbounded-700.woff2) format("woff2")}

:root{
  --nuit:#F7F3FB; --velours:#FFFFFF; --velours-clair:#F2EDF9; --bord:#E5DDF1;
  --or:#E9B44C; --or-fonce:#8F6000; --or-ombre:#C38A24;
  --encre:#1E1631; --brume:#6B6185;
  --rouge-texte:#B23A2F;
  --f-titre:"Unbounded","Figtree",system-ui,sans-serif;
  --f-texte:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* une ligne de tableau masquee (data-si) le reste, meme quand le
   tableau passe en cartes sur telephone */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--nuit);color:var(--encre);font-family:var(--f-texte);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
@media (min-width:720px){body{font-size:17px}}

a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--or-ombre);
  text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--or-fonce)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px;border-radius:4px}

/* l'en-tete : la marque, et rien d'autre a cliquer que le retour */
.pg-tete{max-width:808px;margin:0 auto;padding:20px 16px 14px}
.pg-marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);
  font-family:var(--f-titre);font-weight:700;font-size:18px;letter-spacing:-.02em;padding:6px 0}
.pg-marque svg{width:32px;height:32px;flex:0 0 auto}
.pg-marque:hover{color:var(--encre)}

/* la feuille */
.pg-feuille{max-width:776px;margin:0 auto;background:var(--velours);border:1px solid var(--bord);
  border-radius:24px;padding:30px 20px 34px}
@media (min-width:720px){.pg-feuille{padding:48px 56px 52px}}
@media (max-width:808px){.pg-feuille{margin:0 16px}}
.pg-feuille > *{max-width:66ch}

h1{font-family:var(--f-titre);font-weight:700;font-size:27px;line-height:1.15;letter-spacing:-.025em;margin:0 0 10px}
@media (min-width:720px){h1{font-size:34px}}
.pg-date{color:var(--brume);font-size:14.5px;margin:0 0 26px}
.pg-chapo{font-size:1.08em;line-height:1.6;margin:0 0 26px}

/* un article des CGU est un h3 (sous sa partie, h2), mais se lit comme
   un titre de section ordinaire */
h2,.pg-art{font-family:var(--f-titre);font-weight:700;font-size:18.5px;line-height:1.3;letter-spacing:-.015em;
  margin:44px 0 12px;scroll-margin-top:16px}
@media (min-width:720px){h2,.pg-art{font-size:20px}}
h3{font-size:1em;font-weight:700;margin:24px 0 6px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:1.3em}
li{margin:0 0 7px}
li::marker{color:var(--or-ombre)}
strong{font-weight:700}

/* une partie (CGU, puis CGV) : un vrai changement de chapitre */
.pg-partie{font-family:var(--f-titre);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.02em;
  margin:58px 0 6px;padding-top:30px;border-top:2px solid var(--bord);max-width:none;scroll-margin-top:16px}
@media (min-width:720px){.pg-partie{font-size:26px}}
.pg-partie + p{color:var(--brume)}

/* le sommaire : les pages longues se parcourent avant de se lire */
.pg-sommaire{background:var(--velours-clair);border-radius:16px;padding:16px 20px 8px;margin:0 0 8px}
.pg-sommaire b{display:block;font-size:14.5px;margin-bottom:6px}
.pg-sommaire ol{margin:0 0 10px;padding-left:1.4em;font-size:15.5px}
.pg-sommaire li{margin:0 0 4px}
.pg-sommaire li::marker{color:var(--brume)}
.pg-sommaire .sous{margin-top:6px}

/* les fiches d'identite (editeur, hebergeur) : etiquette a gauche */
.pg-fiche{margin:0 0 16px;display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:6px 16px}
.pg-fiche dt{color:var(--brume);font-size:.94em}
.pg-fiche dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.pg-fiche{grid-template-columns:1fr;gap:0}.pg-fiche dd{margin-bottom:10px}}

/* un tableau qui devient une pile de cartes sur telephone */
.pg-tableau{width:100%;max-width:none;border-collapse:collapse;margin:6px 0 20px;font-size:.95em}
.pg-tableau th{text-align:left;font-weight:700;font-size:.9em;color:var(--brume);padding:8px 12px 8px 0;
  border-bottom:2px solid var(--bord);vertical-align:bottom}
.pg-tableau td{padding:12px 12px 12px 0;border-bottom:1px solid var(--bord);vertical-align:top}
.pg-tableau td:first-child{font-weight:700}
@media (max-width:640px){
  .pg-tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg-tableau tr{display:block;padding:12px 0;border-bottom:1px solid var(--bord)}
  .pg-tableau td{display:block;border:0;padding:3px 0}
  .pg-tableau td::before{content:attr(data-titre);display:block;color:var(--brume);font-size:.86em;font-weight:600}
  .pg-tableau td:first-child::before{display:none}
}

/* ce qui reste a remplir dans config.js : voyant, a dessein */
.a-completer{color:var(--rouge-texte);background:#FCEDEA;border-radius:6px;padding:1px 6px;font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* l'encadre d'une regle qui compte (retractation, pieces) */
.pg-cadre{border-left:4px solid var(--or);background:#FDF6E6;border-radius:0 14px 14px 0;padding:14px 18px;margin:0 0 18px}
.pg-cadre p:last-child{margin-bottom:0}

/* le formulaire de retractation, a recopier */
.pg-formulaire{border:1.5px dashed var(--bord);border-radius:14px;padding:16px 18px;margin:0 0 16px;font-size:.95em}
.pg-formulaire p{margin:0 0 8px}

/* le pied : UNE action, la meme sur toutes les pages */
.pg-pied{max-width:808px;margin:0 auto;padding:30px 16px 40px;text-align:center}
.pg-retour{display:inline-block;min-width:260px;max-width:100%;padding:15px 26px;border-radius:16px;text-decoration:none;
  font-weight:700;font-size:16px;color:#2A1C06;background:linear-gradient(180deg,#F3C865,var(--or));
  border:1.5px solid var(--or-ombre);box-shadow:0 3px 0 var(--or-ombre);transition:transform .08s,box-shadow .08s}
.pg-retour:hover{color:#2A1C06}
.pg-retour:active{transform:translateY(2px);box-shadow:0 1px 0 var(--or-ombre)}
.pg-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin-top:16px;font-size:14px}
.pg-legal a{display:inline-block;color:var(--brume);text-decoration-color:var(--bord);padding:12px 4px;line-height:20px}
.pg-legal a[aria-current="page"]{color:var(--encre);font-weight:700;text-decoration:none}

/* la page introuvable : une piece frappee "404" */
.pg-perdu{max-width:520px;margin:0 auto;padding:40px 16px 24px;text-align:center}
.pg-perdu .jeton{width:150px;height:150px;margin:8px auto 26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:700;font-size:40px;
  letter-spacing:-.02em;color:#5A3C05;background:radial-gradient(circle at 34% 30%,#FFF3C4,#F0C044 58%,#C98B14);
  border:6px solid #A8710B;box-shadow:inset 0 -10px 18px rgba(144,95,8,.45),0 14px 28px rgba(60,40,10,.14);
  transform:rotate(-8deg)}
.pg-perdu h1{margin-bottom:12px}
.pg-perdu p{color:var(--brume);margin:0 auto 28px;max-width:34ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  body{background:#FFFFFF;font-size:11pt}
  .pg-tete,.pg-pied,.pg-sommaire{display:none}
  .pg-feuille{border:0;padding:0;margin:0;max-width:none}
  a{text-decoration:none}
}