/* ═══════════════════════════════════════════════════════════════
   PANIBAG — PAGES LÉGALES
   Mentions légales, CGV, CGU, politique de confidentialité, 404.

   Ces cinq pages étaient en Roboto servi par Google, sur un fond
   gris taupe, avec des boutons à coins ronds et un orange de survol
   qui n'existe nulle part ailleurs. Une page de mentions légales
   est lue par quelqu'un qui doute : elle doit avoir exactement la
   même voix que la page qui l'a amené là.

   Même système que la page de vente : Cabinet aux titres, Switzer
   au corps, toutes deux auto-hébergées, crème kraft, charbon, un
   seul orange, aucun arrondi, aucune ombre. Le contenu n'est pas
   touché : seule la forme change.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:Switzer;src:url(fonts/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cabinet;src:url(fonts/cabinet-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cabinet;src:url(fonts/cabinet-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --creme:#F2EADC;
  --creme-clair:#F8F3E9;
  --charbon:#241C14;
  --txt:#241C14;
  --gris:#776756;
  --txt-inv:#EFE7DA;
  --txt-inv-attenue:#B6A692;
  --orange:#EA6020;
  --filet:#D9CDB8;
  --filet-inv:rgba(239,231,218,.2);
  --d2:clamp(34px,4.4vw,54px);
  --d3:clamp(26px,3vw,38px);
  --d4:clamp(20px,2vw,26px);
  --t1:18px;
  --t2:15px;
  --t3:12.5px;
  --ft:"Cabinet","Helvetica Neue",Arial,sans-serif;
  --fc:"Switzer","Helvetica Neue",Arial,sans-serif;
  --w:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fc);color:var(--txt);background:var(--creme);
  font-size:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ft);font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.w{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* ── L'en-tête, comme sur la page de vente ───────────────────── */
header{background:var(--creme);padding:26px 0 22px}
.brand{display:flex;justify-content:center}
/* Le logo a la même taille sur toutes les pages du site. Il était
   à 62 px ici et à 76 sur l'accueil : d'une page à l'autre la
   marque changeait de corps, ce qui se voit immédiatement en
   passant de l'une à l'autre. Mêmes paliers que la page de vente. */
.brand img{height:76px;width:auto}
@media(max-width:900px){.brand img{height:56px}}
@media(max-width:560px){.brand img{height:44px}}

/* ── La tête de page : le titre porte, la date se range ──────── */
.tete{background:var(--creme-clair);padding:clamp(56px,7vw,100px) 0 clamp(48px,6vw,84px);
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.tete h1{font-size:var(--d2);line-height:1.02;max-width:20ch}
.tete .w,main .w,.final .w{max-width:var(--w)}
.tete .date{font-family:var(--fc);font-size:var(--t3);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-top:22px}

/* ── Le corps : une mesure de lecture, des filets, pas de boîte ─ */
/* ── Le corps tient la grille de la page de vente ──────────────
   Ces pages étaient sur un conteneur de 1 000 px et leur texte
   s'arrêtait à 72 caractères : le contenu commençait 120 px plus
   loin que sur toutes les autres pages, et laissait 230 px de vide
   à droite. Rien dans le site n'est monté comme ça.

   Même conteneur que le reste, 1 280 px, et chaque article se
   range en deux colonnes : son titre à gauche, son texte à droite.
   La largeur est remplie par de la structure, la mesure de lecture
   est tenue par la colonne. C'est la grammaire de la FAQ. */
main{padding:clamp(56px,7vw,96px) 0 clamp(70px,8vw,120px)}
/* Le chapeau d'ouverture est une phrase, pas un paragraphe : à 60
   caractères elle cassait en trois lignes et laissait la définition
   du terme défini seule sur la dernière. Il prend la largeur qu'il
   faut pour tenir en deux lignes, et il est le seul de la page à
   l'avoir. */
main .intro{max-width:none;margin-bottom:clamp(40px,5vw,72px)}
/* Le chapeau tient en deux lignes. La taille est réglée sur la
   plus longue des cinq phrases d'ouverture, celle de la politique
   de confidentialité, qui fait 215 signes : au pas des mots-clés
   elle en prenait quatre. À 20 px en Cabinet, chaque moitié tient
   sur sa ligne dans la colonne. */
main .intro p{font-size:clamp(17px,1.5vw,20px);line-height:1.45;letter-spacing:-.008em;
  font-family:var(--ft);font-weight:700;max-width:none}
main .intro p+p{font-size:var(--t1);font-family:var(--fc);font-weight:400;
  line-height:1.7;color:var(--gris);margin-top:14px;letter-spacing:0}
.art{display:grid;grid-template-columns:minmax(0,.31fr) minmax(0,.69fr);
  gap:clamp(28px,4vw,72px);align-items:start;
  padding-block:clamp(30px,3.4vw,48px);border-top:1px solid var(--filet)}
.art:first-of-type{border-top:0;padding-top:0}
.art-c>*:last-child{margin-bottom:0}
main h2{font-size:var(--d4);line-height:1.15;letter-spacing:-.02em;margin:0;
  position:sticky;top:24px}
@media(max-width:880px){
  .art{grid-template-columns:minmax(0,1fr);gap:14px}
  main h2{position:static}
}
main h3{font-family:var(--ft);font-weight:800;font-size:var(--t1);margin:28px 0 10px}
/* La colonne porte la mesure : un max-width sur le paragraphe
   laissait 110 px inutilisés au bout de sa propre colonne. */
main p{font-size:var(--t1);line-height:1.7;color:var(--txt);margin:0 0 16px}
main a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
main a:hover{color:var(--charbon)}
main strong,main b{font-weight:700}

/* Les listes deviennent des lignes de tableau : une information
   par ligne, un filet entre chacune. Aucune puce, comme partout. */
main ul,main ol{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--filet)}
main li{border-bottom:1px solid var(--filet);padding:14px 0;
  font-size:var(--t2);line-height:1.6;color:var(--gris)}
main li strong{color:var(--txt)}

/* L'encadré d'information passe sur le fond alterné, sans arrondi.
   Le filet orange à gauche le signale : c'est le seul accent de
   ces pages. */
main .bloc{background:var(--creme-clair);border-radius:0;
  padding:clamp(22px,2.6vw,32px);margin:0 0 20px}
main .bloc p{margin:0 0 6px;font-size:var(--t2)}
main .bloc p:last-child{margin:0}
main .cite{border-left:2px solid var(--orange);padding:4px 0 4px 20px;margin:0 0 16px;
  font-size:var(--t2);line-height:1.7;color:var(--gris)}

/* ── Le pied : charbon, comme la clôture de la page de vente ──── */
.final{background:var(--charbon);color:var(--txt-inv);
  padding:clamp(56px,6.5vw,90px) 0 32px;text-align:left}
.final .w{max-width:var(--w)}
.final .t1{font-family:var(--ft);font-weight:800;font-size:var(--d3);
  line-height:1.08;letter-spacing:-.025em;max-width:16ch;margin-bottom:18px}
.final .t2{font-size:var(--t2);line-height:1.6;max-width:52ch;
  margin:0 0 28px;color:var(--txt-inv-attenue)}
.final .btn{display:inline-block;background:var(--orange);color:var(--charbon);
  font-family:var(--fc);font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;padding:16px 32px;border-radius:0;text-decoration:none;
  transition:background .18s,color .18s}
.final .btn:hover{background:var(--txt-inv);color:var(--charbon)}
.final .foot{margin-top:clamp(52px,6vw,88px);opacity:1;
  border-top:1px solid var(--filet-inv);padding-top:26px}
.final .legal{font-size:var(--t3);color:var(--txt-inv-attenue);line-height:2}
.final .legal a{text-decoration:underline;text-underline-offset:3px}
.final .legal a:hover{color:var(--txt-inv)}

/* ── La 404 : une page entière, pas un message d'erreur ───────── */
body.p404{min-height:100svh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;padding:clamp(32px,6vw,96px)}
body.p404 h1{font-size:var(--d2);line-height:1.02;max-width:16ch;margin-bottom:18px}
body.p404 p{font-size:var(--t1);color:var(--gris);max-width:46ch;margin-bottom:32px}
body.p404 a.btn{display:inline-block;background:var(--orange);color:var(--charbon);
  font-family:var(--fc);font-weight:700;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;padding:16px 32px;border-radius:0;text-decoration:none}
body.p404 a.btn:hover{background:var(--charbon);color:var(--creme)}

@media(max-width:700px){
  .w{padding:0 20px}
  main .w>*{max-width:none}
}

/* La 404 porte le logo dans le flux, pas en fond : il faisait
   340 px de large et passait sous le titre. */
body.p404 img{height:76px;width:auto;margin-bottom:clamp(28px,4vw,52px)}
@media(max-width:900px){body.p404 img{height:56px}}
@media(max-width:560px){body.p404 img{height:44px}}
body.p404 h1{margin-bottom:16px}

/* La 404 prend la même gouttière que les autres pages : elle était
   à 86 px du bord quand tout le reste commence à 124. */
body.p404{padding:0}
body.p404 .b{max-width:var(--w);width:100%;margin:0 auto;
  padding-inline:clamp(20px,4vw,44px);padding-block:clamp(48px,8vw,120px)}

/* ── La relance du pied se lit ───────────────────────────────────
   Elle était au corps secondaire, en gris atténué, et « 48 h »
   se coupait entre le nombre et son unité. Elle passe au pas d4 :
   c'est la seule invitation à écrire de ces pages, elle doit se
   voir depuis le bas de l'écran. L'unité est collée au nombre par
   une espace insécable, elle ne se coupera plus. */
.final .t2{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.25;letter-spacing:-.02em;color:var(--txt-inv);max-width:24ch;
  margin-bottom:clamp(26px,3vw,38px)}

/* ── La fiche d'identité ─────────────────────────────────────────
   L'identification de l'éditeur tenait dans une phrase de six
   informations enchaînées : la raison sociale, le capital, le RCS,
   le siège, le directeur de publication et l'hébergeur. Personne
   ne lit ça, on y cherche une ligne précise.

   Chaque information tient sa ligne, avec son intitulé à gauche.
   Aucun mot n'a changé, ils sont rangés. */
.fiche{margin:0 0 20px;padding:0;border-top:1px solid var(--filet)}
.fiche>div{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(14px,2vw,28px);padding:14px 0;border-bottom:1px solid var(--filet);
  align-items:baseline}
.fiche dt{font-family:var(--fc);font-size:var(--t3);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.fiche dd{margin:0;font-size:var(--t1);line-height:1.5;color:var(--txt)}
@media(max-width:700px){
  .fiche>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
}

/* Un fait qui tient en une phrase et qui répond à la question du
   lecteur passe devant le paragraphe qui l'explique. « Aucun
   cookie » est ce qu'on vient vérifier sur cette page. */
.fait{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.3;letter-spacing:-.018em;color:var(--txt);margin-bottom:16px;max-width:28ch}
main .intro p br{display:block;content:""}


/* ── Le bouton de remontée, comme sur la page de vente ───────────
   Les CGV font quatorze articles : sans lui on remonte à la molette
   sur trois écrans. Il n'apparaît qu'après 600 px de défilement,
   pour ne pas flotter sur une page courte. */
.haut{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);
  width:48px;height:48px;display:grid;place-items:center;z-index:40;
  background:var(--orange);color:var(--charbon);border:0;border-radius:0;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s,background .18s}
.haut.on{opacity:1;visibility:visible;transform:none}
.haut:hover{background:#F5A06A}
.haut:focus-visible{outline:2px solid var(--charbon);outline-offset:2px}
.haut svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.haut{transition:none}}