/* ============================================================
   CUISINOVORES : les pages de texte long.
   Mentions légales, confidentialité, cookies, conditions de
   dépôt. Quatre mille mots à rendre lisibles, rien d'autre.
   ============================================================ */

/* La longueur de ligne est le seul réglage qui compte sur une page de texte.
   La colonne partagée plafonne à 38 rem, ce qui donne un peu plus de
   soixante-dix signes : au-delà, l'œil perd la ligne suivante. */
.cuisi-legal__texte{color:var(--ink-2);font-size:var(--t-md);line-height:1.65}

.cuisi-legal__texte h2{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--t-xl);
  color:var(--ink);line-height:1.2}
.cuisi-legal__texte h3{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--t-lg);
  color:var(--ink);line-height:1.25}
.cuisi-legal__texte h4{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--t-base);
  color:var(--ink);font-weight:800}
.cuisi-legal__texte > :first-child{margin-top:0}

.cuisi-legal__texte p{margin:0 0 var(--sp-4)}
.cuisi-legal__texte strong,.cuisi-legal__texte b{color:var(--ink);font-weight:800}
.cuisi-legal__texte a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px}
/* Une adresse longue ne doit pas pousser la colonne hors de l'écran, mais
   « break-word » et non « anywhere » : le premier ne coupe que si le mot ne
   tient nulle part, le second coupait dès qu'il restait peu de place et
   scindait « cuisinovores-local.local » en plein milieu alors que l'adresse
   tenait sur la ligne suivante. */
.cuisi-legal__texte a{overflow-wrap:break-word}

.cuisi-legal__texte ul,.cuisi-legal__texte ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
.cuisi-legal__texte li{margin-bottom:var(--sp-2)}
.cuisi-legal__texte ul{list-style:disc}
.cuisi-legal__texte ol{list-style:decimal}

/* ---------- Un tableau large ----------
   Le tableau des traitements de données a quatre colonnes de texte. Enfermé
   dans la colonne de lecture, il en sortait par la droite. Il défile
   maintenant dans son propre cadre, avec une ombre au bord droit qui dit
   qu'il y a une suite. Le cadre est atteignable au clavier, sinon on ne
   pourrait pas le faire défiler sans souris. */
.cuisi-tableau{overflow-x:auto;margin:0 0 var(--sp-5);
  background:linear-gradient(to right,var(--bg) 30%,rgba(250,249,246,0)),
    linear-gradient(to right,rgba(250,249,246,0),var(--bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(8,11,18,.14),transparent),
    radial-gradient(farthest-side at 100% 50%,rgba(8,11,18,.14),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.cuisi-tableau:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Quatre colonnes de texte ont besoin d'air : à six cents pixels, chaque
   cellule se brisait tous les deux mots. La largeur minimale les force à
   respirer, quitte à faire défiler le cadre sur un petit écran. */
.cuisi-tableau table{min-width:52rem;width:100%;border-collapse:collapse;
  margin:0;font-size:var(--t-s);line-height:1.5}
.cuisi-tableau th,.cuisi-tableau td{padding:var(--sp-3);text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.cuisi-tableau th{color:var(--ink);font-weight:800;background:var(--card)}
/* La première colonne porte l'intitulé : elle sert de repère quand on
   parcourt le tableau, elle ne doit pas être la plus étroite. */
.cuisi-tableau td:first-child,.cuisi-tableau th:first-child{width:20%}

/* ---------- La politique de cookies ----------
   Complianz habille son document avec sa propre feuille, calée sur quatorze
   pixels. La politique de cookies se lisait donc trois points plus petit que
   les trois autres pages légales, et la différence sautait aux yeux en
   passant de l'une à l'autre. On lui rend la taille du site.

   Ses règles portent un identifiant : il faut passer par
   « .cuisi-legal__texte #cmplz-document » pour avoir le dernier mot. C'est
   plus long à écrire qu'un « !important », mais cela laisse la feuille de
   Complianz reprendre la main le jour où elle changera.

   Son tableau de services, lui, garde une taille de tableau, celle que le
   site emploie déjà pour ceux de la page confidentialité. C'est une grille
   dont les colonnes se taillent au contenu : sans « min-width:0 », une
   cellule refuse de se rétrécir et la grille sort de la page. */
.cuisi-legal__texte #cmplz-document{font-size:var(--t-md);line-height:1.65;
  max-width:100%;overflow-wrap:break-word}
.cuisi-legal__texte #cmplz-document p,
.cuisi-legal__texte #cmplz-document li,
.cuisi-legal__texte #cmplz-document td{font-size:var(--t-md);line-height:1.65}
.cuisi-legal__texte #cmplz-document *{max-width:100%;box-sizing:border-box;min-width:0}
.cuisi-legal__texte #cmplz-document a{overflow-wrap:break-word}

/* Le détail technique de chaque service : une taille de tableau, comme
   « .cuisi-tableau table » plus haut. */
.cuisi-legal__texte #cmplz-document .cmplz-dropdown p,
.cuisi-legal__texte #cmplz-document .cmplz-dropdown li,
.cuisi-legal__texte #cmplz-document .cmplz-dropdown div,
.cuisi-legal__texte #cmplz-document .cmplz-dropdown h5,
.cuisi-legal__texte #cmplz-document .cmplz-dropdown a{font-size:var(--t-s)}
/* Le chevron d'un service ne doit pas se poser sur son libellé. */
.cuisi-legal__texte .cmplz-dropdown summary{gap:var(--sp-3)}
.cuisi-legal--large .cuisi-col > *{max-width:none}
.cuisi-legal--large .cuisi-legal__texte > p,
.cuisi-legal--large .cuisi-legal__texte > h2,
.cuisi-legal--large .cuisi-legal__texte > h3,
.cuisi-legal--large .cuisi-legal__texte > ul,
.cuisi-legal--large .cuisi-legal__texte > ol{max-width:38rem}
.cuisi-legal--large .cuisi-legal__soeurs{max-width:38rem}

/* ---------- Les trois autres pages du même genre ---------- */
.cuisi-legal__soeurs{margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--line)}
.cuisi-legal__soeurs h2{margin:0 0 var(--sp-4);font-size:var(--t-lg)}
.cuisi-legal__soeurs ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cuisi-legal__soeurs a{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);min-height:var(--tap);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-s);font-size:var(--t-s);font-weight:700;color:var(--ink);
  transition:background var(--dur-1) var(--ease)}
.cuisi-legal__soeurs a:hover,.cuisi-legal__soeurs a:focus-visible{background:var(--accent-soft);
  color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .cuisi-legal__soeurs a:hover .cuisi-arw{transform:translateX(4px)}
}