/* ═══════════════════════════════════════════════════════════════════════════
   Maquettes Knowdg — feuille commune aux cinq pages.

   PALETTE RELEVÉE DANS LE LOGO, pixel par pixel, pas estimée à l'œil :
     marine        #202040   la plaque et le mot KNOWDG
     bleu ciel     #2ba0e5   le K et le O
     bleu profond  #0a6ac9   l'ombre du K

   Écart à connaître : style.css du site utilise #4285f4, qui n'est PAS le bleu
   du logo. Le logo fait foi ici — c'est lui que les gens reconnaissent.

   Police Nunito, reprise de assets/css/fonts-nunito.css.
   Gris repris de style.css : #f4f5f9 #edf0f5 #e6e6e6 #737373 #999999.

   Volontairement en clair seulement : le site de production n'a pas de thème
   sombre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --marine:#202040;
  --marine-clair:#2e2e5c;
  --bleu:#2ba0e5;
  --bleu-fonce:#0a6ac9;
  --degrade:linear-gradient(135deg,#0a6ac9 0%,#2ba0e5 100%);
  --encre:#202040;
  --encre-douce:#5c6270;
  --encre-tres-douce:#8d94a3;
  --fond:#ffffff;
  --fond-doux:#f4f5f9;
  --fond-bleute:#edf0f5;
  --trait:#e2e6ee;
  --bleu-voile:#e8f4fd;
  --alerte:#b4530f;
  --alerte-voile:#fdf2e9;
  --alerte-trait:#f2ddc4;
  --ombre:0 1px 2px rgba(32,32,64,.04), 0 12px 32px -18px rgba(32,32,64,.35);
  --rayon:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--fond);color:var(--encre);
  font-family:Nunito,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:balance;line-height:1.16;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.3vw,3.15rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.14rem;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--bleu-fonce);outline-offset:3px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:1140px;margin:0 auto;padding-inline:22px}
.sur-titre{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu-fonce)}
.plomb{color:var(--encre-douce);font-size:1.05rem}
.filigrane{background:#fff9e3;border-bottom:1px solid #efdfa8;color:#6f5300;font-size:.82rem;
  text-align:center;padding:7px 16px;font-weight:700}

/* ── Bandeau des trois produits ──────────────────────────────────────────── */
.bandeau{background:var(--marine);color:#fff}
.bandeau .wrap{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap}
.prod{display:flex;flex-direction:column;padding:8px 15px;border-bottom:3px solid transparent;
  color:rgba(255,255,255,.58);min-width:0}
.prod:hover{color:#fff;background:rgba(255,255,255,.07)}
.prod strong{font-size:.87rem;font-weight:700}
.prod span{font-size:.72rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod.actif{color:#fff;background:rgba(255,255,255,.1);border-bottom-color:var(--bleu)}
.bandeau .droite{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:.81rem}
.bandeau .droite a{color:rgba(255,255,255,.72)}
.bandeau .droite a:hover{color:#fff;text-decoration:underline}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait)}
.nav .wrap{display:flex;align-items:center;gap:26px;padding-block:12px}
.marque{display:flex;align-items:center;gap:10px;flex:none}
.marque img{height:38px;width:auto}
.marque em{font-style:normal;font-weight:700;font-size:.95rem;color:var(--encre-tres-douce);
  border-left:1px solid var(--trait);padding-left:10px}
.nav nav{display:flex;gap:23px;flex:1;margin-left:4px}
.nav nav a{font-size:.93rem;font-weight:600;color:var(--encre-douce)}
.nav nav a:hover{color:var(--bleu-fonce)}
@media (max-width:900px){.nav nav{display:none}.marque em{display:none}}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-weight:700;font-size:.94rem;padding:12px 20px;border-radius:var(--rayon);
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--bleu-fonce);color:#fff;box-shadow:0 8px 18px -10px rgba(10,106,201,.9)}
.btn-1:hover{background:#0857a6}
.btn-2{border-color:var(--trait);color:var(--encre);background:#fff}
.btn-2:hover{border-color:var(--bleu);color:var(--bleu-fonce)}
.btn-3{color:var(--encre-douce);padding-inline:6px}
.btn-3:hover{color:var(--encre)}
.btn-blanc{background:#fff;color:var(--bleu-fonce)}
.btn-blanc:hover{background:var(--bleu-voile)}
.btn-large{width:100%;padding-block:14px;font-size:1rem}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{padding-block:clamp(44px,6.5vw,74px)}
.gris{background:var(--fond-doux)}
.marine{background:var(--marine);color:#fff}
.marine .sur-titre{color:var(--bleu)}
.marine .plomb{color:rgba(255,255,255,.78)}
.tete{max-width:46rem;display:flex;flex-direction:column;gap:13px;margin-bottom:34px}
.hero{padding-block:clamp(38px,6vw,66px) clamp(32px,5vw,56px);
  background:radial-gradient(1050px 380px at 12% -10%, var(--bleu-voile) 0%, transparent 62%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,4.5vw,56px);align-items:start}
/* minmax(0,1fr) et pas 1fr : une piste 1fr ne descend pas sous la largeur de
   son contenu, et le registre (table, min-width 580px) elargissait alors TOUTE
   la page sur telephone au lieu de defiler dans son cadre (.defil). */
@media (max-width:980px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero-col{display:flex;flex-direction:column;gap:20px;max-width:35rem}
.souligne{background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mention{font-size:.85rem;color:var(--encre-tres-douce)}
.rassure{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--encre-douce);
  padding-top:12px;border-top:1px solid var(--trait)}
.rassure b{color:var(--encre);font-weight:700}

/* ── Grilles réutilisées ─────────────────────────────────────────────────── */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:900px){.trois{grid-template-columns:1fr}}
@media (max-width:820px){.deux{grid-template-columns:1fr}}

.carte{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:14px;
  border:1px solid var(--trait);background:#fff}
.carte p{color:var(--encre-douce);font-size:.95rem}
.carte .pour{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu-fonce)}
.carte .fleche{font-weight:800;color:var(--bleu-fonce);font-size:.93rem;margin-top:auto}
a.carte:hover{border-color:var(--bleu);box-shadow:var(--ombre)}
.carte.vedette{border-color:var(--bleu);box-shadow:var(--ombre);position:relative}
.ruban{position:absolute;top:-11px;left:24px;background:var(--degrade);color:#fff;font-size:.68rem;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:99px}

/* Étapes numérotées : une vraie séquence, sinon on ne numérote pas. */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:e}
@media (max-width:820px){.etapes{grid-template-columns:1fr}}
.etape{display:flex;flex-direction:column;gap:9px;counter-increment:e;padding-top:16px;
  border-top:3px solid var(--trait)}
.etape::before{content:counter(e,decimal-leading-zero);font-weight:800;font-size:.8rem;
  color:var(--bleu-fonce);letter-spacing:.08em}
.etape p{color:var(--encre-douce);font-size:.95rem}

/* Panneaux avant / après */
.pan{border-radius:14px;padding:26px;border:1px solid var(--trait);background:#fff}
.pan.rouge{background:var(--alerte-voile);border-color:var(--alerte-trait)}
.pan.bleu{background:var(--bleu-voile);border-color:#c9e6fa}
.pan h3{margin-bottom:14px}
.pan.rouge h3{color:var(--alerte)}
.pan.bleu h3{color:var(--bleu-fonce)}
.pan li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin-bottom:11px}
.pan li:last-child{margin-bottom:0}
.pan li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;margin-top:.58em;
  background:currentColor;opacity:.45}
.pan.rouge li{color:#7d3d0c}
.pan.bleu li{color:#0d4f85}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.cadre{background:#fff;border:1px solid var(--trait);border-radius:14px;overflow:hidden;
  box-shadow:var(--ombre)}
.cadre-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;background:var(--fond-doux);border-bottom:1px solid var(--trait)}
.cadre-tete p{font-size:.8rem;font-weight:700;color:var(--encre-douce)}
.cadre-tete b{color:var(--bleu-fonce)}
.defil{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:580px;font-size:.86rem}
th{text-align:left;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-tres-douce);padding:11px 15px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:12px 15px;border-bottom:1px solid var(--fond-bleute);vertical-align:baseline}
tbody tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
td .qui{font-weight:700}
tr.vedette{background:var(--bleu-voile)}
tr.vedette td:first-child{box-shadow:inset 3px 0 0 var(--bleu-fonce)}
.jeton{display:inline-block;font-size:.74rem;font-weight:800;padding:2px 9px;border-radius:99px;
  background:var(--bleu-fonce);color:#fff}
.cadre-pied{display:flex;gap:11px;padding:13px 16px;background:var(--fond-doux);
  border-top:1px solid var(--trait);font-size:.83rem;color:var(--encre-douce)}
.cadre-pied .i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--bleu-fonce);
  color:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:2px}
.legende-ex{font-size:.75rem;color:var(--encre-tres-douce);text-align:right;margin-top:9px}
.seg{display:flex;border:1px solid var(--trait);border-radius:8px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;font:inherit;font-size:.78rem;font-weight:700;padding:7px 12px;
  cursor:pointer;color:var(--encre-douce)}
.seg button[aria-pressed="true"]{background:var(--bleu-fonce);color:#fff}

.avertis{margin-top:20px;padding:15px 18px;border-radius:var(--rayon);border:1px dashed var(--trait);
  background:#fff;font-size:.87rem;color:var(--encre-douce)}
.avertis b{color:var(--encre)}

/* ── Tarifs ──────────────────────────────────────────────────────────────── */
.tarif{border:1px solid var(--trait);border-radius:14px;padding:28px;background:#fff;
  display:flex;flex-direction:column;gap:15px}
.tarif.central{border-color:var(--bleu);box-shadow:var(--ombre)}
.tarif .prix{font-size:2.05rem;font-weight:800;letter-spacing:-.03em}
.tarif .prix small{font-size:.88rem;font-weight:600;color:var(--encre-douce);letter-spacing:0}
.tarif li{display:flex;gap:9px;font-size:.92rem;color:var(--encre-douce);margin-bottom:9px}
.tarif li::before{content:"✓";color:var(--bleu-fonce);font-weight:800;flex:none}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{max-width:52rem;display:flex;flex-direction:column;gap:2px}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;font-weight:700;padding:16px 4px;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bleu-fonce);font-weight:800;font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 4px 18px;color:var(--encre-douce);font-size:.95rem;max-width:44rem}

/* ── Appel final ─────────────────────────────────────────────────────────── */
.final{background:var(--degrade);color:#fff}
.final .wrap{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.final h2{max-width:26rem}
.final p{max-width:34rem;opacity:.94}
.final .sur-titre{color:rgba(255,255,255,.85)}
.btn-contour-blanc{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-contour-blanc:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ── Pied ────────────────────────────────────────────────────────────────── */
footer{background:var(--marine);color:rgba(255,255,255,.68);padding-block:44px 26px;font-size:.9rem}
.colonnes{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px;margin-bottom:32px}
@media (max-width:820px){.colonnes{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:13px;font-weight:800}
footer li{margin-bottom:8px}
footer a:hover{color:#fff;text-decoration:underline}
footer img{height:34px;width:auto;margin-bottom:12px}
footer .bas{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;color:rgba(255,255,255,.48)}

/* ═══ Pages connexion / inscription ══════════════════════════════════════ */
.ecran{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media (max-width:900px){.ecran{grid-template-columns:1fr}}
.volet{background:var(--marine);color:#fff;padding:clamp(30px,4vw,54px);
  display:flex;flex-direction:column;justify-content:space-between;gap:34px}
.volet img{height:40px;width:auto}
.volet h2{color:#fff;max-width:20rem}
.volet .argument{display:flex;flex-direction:column;gap:18px}
.volet .preuve{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:rgba(255,255,255,.78)}
.volet .preuve b{color:#fff;display:block;font-weight:700}
.volet .preuve .pic{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);
  display:grid;place-items:center;font-weight:800;color:var(--bleu);font-size:.85rem}
.volet .pied{font-size:.82rem;color:rgba(255,255,255,.45)}
@media (max-width:900px){.volet .argument,.volet .pied{display:none}.volet{padding-block:22px}}

.panneau{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,54px)}
.formulaire{width:100%;max-width:27rem;display:flex;flex-direction:column;gap:20px}
.formulaire h1{font-size:clamp(1.6rem,3vw,2.05rem)}
.champ{display:flex;flex-direction:column;gap:6px}
.champ label{font-size:.83rem;font-weight:700}
.champ input,.champ select{
  font:inherit;font-size:.96rem;padding:12px 14px;border:1px solid var(--trait);
  border-radius:var(--rayon);background:#fff;color:var(--encre);width:100%}
.champ input:focus,.champ select:focus{border-color:var(--bleu);outline:none;
  box-shadow:0 0 0 3px rgba(43,160,229,.18)}
.champ .aide{font-size:.79rem;color:var(--encre-tres-douce)}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){.duo-champ{grid-template-columns:1fr}}
.case{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--encre-douce)}
.case input{margin-top:4px;flex:none;width:16px;height:16px;accent-color:var(--bleu-fonce)}
.case a{color:var(--bleu-fonce);font-weight:700;text-decoration:underline}
.entre{display:flex;align-items:center;gap:14px;color:var(--encre-tres-douce);font-size:.8rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.entre::before,.entre::after{content:"";flex:1;height:1px;background:var(--trait)}
.bas-form{font-size:.9rem;color:var(--encre-douce);text-align:center}
.bas-form a{color:var(--bleu-fonce);font-weight:700}
.retour{font-size:.87rem;color:var(--encre-douce);font-weight:600}
.retour:hover{color:var(--bleu-fonce)}
.note-maquette{font-size:.8rem;color:var(--encre-tres-douce);border-top:1px solid var(--trait);
  padding-top:14px}

/* Réseaux sociaux du pied de page. `rel="me"` en plus de noopener : il déclare
   que ces comptes sont bien les nôtres, ce que certains agrégateurs lisent. */
.social{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.social a{font-size:.85rem;opacity:.8;text-decoration:none}
.social a:hover{opacity:1;text-decoration:underline}

/* ── Bouton « revenir en haut » ────────────────────────────────────────────
   Position fixe, calée en bas à droite. Le décalage vertical est posé par le
   script, pas ici : le bandeau de consentement occupe le bas de l'écran tant
   qu'on n'y a pas répondu, et sa hauteur dépend de la largeur du texte.
   z-index sous le bandeau (99999) : il ne doit jamais le recouvrir. */
.haut{position:fixed;right:24px;bottom:24px;z-index:9000;
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:var(--marine);color:#fff;font-size:1.15rem;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.28);transition:background .18s,transform .18s}
.haut:hover{background:var(--bleu-fonce);transform:translateY(-2px)}
.haut:focus-visible{outline:3px solid var(--bleu-fonce);outline-offset:3px}
.haut[hidden]{display:none}
@media (max-width:640px){.haut{right:16px;width:42px;height:42px}}

/* Rupture thématique dans un article. Discrète : elle sépare, elle ne découpe
   pas. Marge généreuse — c'est le blanc qui fait la séparation, pas le trait. */
.article hr{border:0;border-top:1px solid #e6e6e6;margin:34px 0;height:0}

/* ═══ Connexion / inscription : ce que la maquette ne montrait pas ════════
   La maquette ne soumettait rien : elle n'avait ni message d'erreur, ni pot de
   miel, ni champ conditionnel. Ils existent dans les vraies vues. */
.message{padding:12px 15px;border-radius:var(--rayon);font-size:.9rem;border:1px solid}
.message-erreur{background:var(--alerte-voile);border-color:var(--alerte-trait);color:var(--alerte)}
.message-ok{background:var(--bleu-voile);border-color:#cfe6f8;color:var(--encre)}
.message a{color:var(--bleu-fonce);font-weight:700;text-decoration:underline}
/* Pot de miel d'AntiSpam : hors écran, pas display:none — certains robots
   sautent les champs masqués, c'est précisément ceux-là qu'on veut prendre. */
.pot-de-miel{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
fieldset.champ{border:0;margin:0;padding:0;min-width:0}
fieldset.champ legend{font-size:.83rem;font-weight:700;padding:0;margin-bottom:6px}
.champ[hidden]{display:none}
/* Le profil se choisit en trois cartes, pas dans une liste déroulante. */
.profils{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.profils{grid-template-columns:1fr}}
.profil{display:block;position:relative;cursor:pointer}
.profil input{position:absolute;opacity:0;width:0;height:0}
.profil span{display:flex;flex-direction:column;gap:3px;border:2px solid var(--trait);
  border-radius:var(--rayon);padding:12px 13px;font-size:.84rem;color:var(--encre-douce);
  transition:border-color .12s ease,background .12s ease;height:100%}
.profil b{font-size:.9rem;color:var(--encre);font-weight:700}
.profil input:checked + span{border-color:var(--bleu);background:var(--bleu-voile)}
.profil input:focus-visible + span{outline:3px solid var(--bleu);outline-offset:2px}

/* ═══ Pages légales (mentions, CGU, confidentialité) ══════════════════════
   Du texte long, lu de près, parfois imprimé. Le reset de cette feuille retire
   marges et puces (p, ul) : on les rend ici, et SEULEMENT ici, pour ne rien
   bouger sur les pages de la vitrine. */
.legal-onglets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.legal-onglets a{font-size:.86rem;font-weight:700;padding:7px 14px;border-radius:99px;
  border:1px solid var(--trait);color:var(--encre-douce)}
.legal-onglets a:hover{border-color:var(--bleu);color:var(--bleu-fonce)}
.legal-onglets a[aria-current="page"]{background:var(--marine);border-color:var(--marine);color:#fff}
.maj{font-size:.86rem;color:var(--encre-tres-douce)}

.juridique{color:var(--encre-douce);font-size:.98rem;line-height:1.75}
.juridique h2{font-size:1.28rem;color:var(--encre);margin:42px 0 12px;scroll-margin-top:90px}
.juridique h3{font-size:1.02rem;color:var(--encre);margin:26px 0 8px;scroll-margin-top:90px}
.juridique p{margin:0 0 14px}
.juridique ul,.juridique ol{margin:0 0 16px;padding-left:1.3em}
.juridique ul{list-style:disc}
.juridique ol{list-style:decimal}
.juridique li{margin-bottom:6px}
.juridique li::marker{color:var(--bleu)}
.juridique strong{color:var(--encre)}
.juridique a{color:var(--bleu-fonce);text-decoration:underline;text-underline-offset:2px}
.juridique > :first-child{margin-top:0}

/* Sommaire : en tête des CGU et de la politique de confidentialité. */
.juridique .toc{background:var(--fond-doux);border-radius:var(--rayon);padding:18px 22px;
  margin-bottom:10px;display:flex;flex-direction:column;gap:2px}
.juridique .toc strong{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bleu-fonce);margin-bottom:6px}
.juridique .toc a{font-size:.9rem;text-decoration:none;color:var(--encre-douce);line-height:1.9}
.juridique .toc a:hover{color:var(--bleu-fonce);text-decoration:underline}

/* Tableaux de données : défilent seuls sur mobile, la page ne déborde pas. */
.juridique .data-table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;
  font-size:.88rem;margin:6px 0 22px}
.juridique .data-table th{background:var(--fond-bleute);color:var(--encre);text-align:left;
  padding:10px 12px;font-weight:700}
.juridique .data-table td{border-top:1px solid var(--trait);padding:10px 12px;vertical-align:top}

.juridique .cookie-category{background:var(--fond-doux);border-radius:var(--rayon);
  padding:14px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:3px}
.juridique .cookie-category strong{display:block}
.juridique .btn{text-decoration:none}

@media print{
  .bandeau,.nav,footer,.legal-onglets,.haut,.juridique .btn{display:none!important}
  .juridique{color:#000}
}

/* ═══ Téléphone (≤ 640 px) — ajouté le 2026-09-19 ═════════════════════════
   Constaté sur téléphone par Aziz : la barre des trois produits s'empilait sur
   quatre lignes (un tiers de l'écran avant le premier mot utile), et sur
   l'accueil les deux boutons de la navigation, insécables, élargissaient toute
   la page au-delà de l'écran. Les six vues partagent ce balisage : la
   correction est ici, pas dans six copies. */
@media (max-width:640px){
  .bandeau .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-inline:0}
  .prod{padding:9px 6px;text-align:center;justify-content:center}
  .prod strong{font-size:.78rem;line-height:1.25}
  .prod span{display:none}
  .bandeau .droite{grid-column:1/-1;margin:0;justify-content:center;gap:18px;
    padding:6px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}

  .nav .wrap{gap:12px}
  .marque img{height:30px}
  .nav .btn-3{display:none}
  .nav .btn{margin-left:auto;padding:9px 14px;font-size:.86rem}

  /* Tableaux légaux : une fiche par ligne. Les intitulés de colonne sont
     recopiés en data-label par _legal_foot.php, quel que soit le tableau. */
  .juridique .data-table,.juridique .data-table tbody,
  .juridique .data-table tr,.juridique .data-table td{display:block;width:100%}
  /* min-width:0 : la regle generale table{min-width:580px} vise les registres
     de demonstration, qui defilent dans leur cadre ; ici la fiche doit tenir. */
  .juridique .data-table{overflow:visible;min-width:0}
  .juridique .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .juridique .data-table tr{border-top:1px solid var(--trait);padding:12px 0}
  .juridique .data-table td{border:0;padding:2px 0}
  .juridique .data-table td:first-child{color:var(--encre);font-weight:700;font-size:.95rem}
  .juridique .data-table td[data-label]:not(:first-child)::before{content:attr(data-label) " : ";
    font-weight:700;color:var(--encre)}
}