/* =============================================================================
   PAGES DU SITE LEOPAR AU STYLE V3 (21/10/2026, François : « fais un tour complet »).
   Chargée par modules/theme.php juste après les couleurs communes, donc dans TOUTES les pages visiteur
   (tarifs, comment ça marche, questions, contact, compte, factures, support, articles, mentions, CGV…).
   1. Couleurs : celles de la V3 (v3/index.html), clair ou sombre selon l'appareil ou le réglage du compte.
   2. Le reste en !important : la feuille de chaque page vient APRÈS ce fichier et dessine encore l'ancien style
      « pixel » (police machine à écrire, ombres décalées, bordures épaisses, majuscules espacées).
   Les pages d'administration ne la chargent pas (liste dans modules/theme.php).
   ============================================================================= */
:root,:root[data-ui="clair"]{
  color-scheme:light;
  --bg:#f1f1f1;--panel:#ffffff;--panel-2:#f6f6f6;--panel-hover:#f0f0f0;--edge:#dcdcdc;--field:#ffffff;--line:#dcdcdc;
  --ink:#141414;--ink-soft:#6b6872;--on-acc:#141414;--on-acc-2:#141414;
  --acc-ink:#141414;--acc-deep-ink:#141414;--brand-ink:#141414;--bubble:#141414;
  --shadow:transparent;--shadow-soft:transparent;--shadow-hard:transparent;--hl:#f4f4f4
}
:root[data-ui="sombre"]{
  color-scheme:dark;
  --bg:#141517;--panel:#1e1f23;--panel-2:#232428;--panel-hover:#2a2b30;--edge:#34353a;--field:#1e1f23;--line:#34353a;
  --ink:#f2f1ec;--ink-soft:#9b98a3;--acc-ink:#f2f1ec;--acc-deep-ink:#f2f1ec;--brand-ink:#f2f1ec;--bubble:#f2f1ec;
  --shadow:transparent;--shadow-soft:transparent;--shadow-hard:transparent;--hl:#2a2b30
}
html,body{background:var(--bg)!important;color:var(--ink)}
body,body :not(.material-symbols-outlined):not(code):not(pre):not(kbd):not(svg):not(svg *){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important}
h1,h2,h3,h4{letter-spacing:-.01em!important;text-transform:none!important}
h1{font-weight:700!important}

/* EN-TÊTE COMMUN (modules/header.php) et en-têtes propres (.top) : les 4 ronds + « leopar.io » */
.lhdr{background:var(--bg)!important;border-bottom:1px solid var(--line)}
/* logo en 2 × 2 (François 21/10 : « le logo deux par deux dans le header des pages classiques — gain de place ») : 3 jaunes + le noir en bas à droite */
.lhdr .blogo::before,.top .dot{content:'';display:block;flex:none;width:26px;height:26px;box-shadow:none!important;
  background:radial-gradient(circle,#eec33a 5.5px,transparent 6px) 0 0/13px 13px no-repeat,radial-gradient(circle,#eec33a 5.5px,transparent 6px) 13px 0/13px 13px no-repeat,
  radial-gradient(circle,#eec33a 5.5px,transparent 6px) 0 13px/13px 13px no-repeat,radial-gradient(circle,var(--ink) 5.5px,transparent 6px) 13px 13px/13px 13px no-repeat!important}
.lhdr .ltxt,.top h1{font-size:18px!important;font-weight:700!important;letter-spacing:0!important;text-transform:lowercase!important}
.lhdr .lnav{gap:6px!important}
.lhdr .lnav a{letter-spacing:0!important;font-weight:500;padding:8px 12px;border-radius:999px;white-space:nowrap}
.lhdr .lnav a:hover{background:var(--panel);color:var(--ink)!important}
.lmenu{background:var(--panel)!important;border-left:1px solid var(--line)!important;box-shadow:none!important}
.lmenu a,.lmenu .mghd{letter-spacing:0!important}
.lmenu-ov{background:transparent!important}
.top{background:var(--bg)!important}
.top a,.top a.home{border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:none!important;background:var(--panel)!important;letter-spacing:0!important}

/* CARTES : blanches, bordure fine, coins arrondis, sans ombre décalée */
.plan,.step,.specs,.card,.fac,.none,.locked,.seo_box,.box,.gbox,.faq details,.faq-item,.q,.qa,details.f{
  background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:none!important}
.specs-grid span{border-radius:999px!important;box-shadow:none!important;border:1px solid var(--line)!important}

/* BOUTONS : capsules noires (comme la V3), sans majuscules espacées */
.cta,.btn,a.btn,.manage,.seo_cta a,.esub,button.send,.send-btn,input[type=submit],button[type=submit]{
  background:var(--ink)!important;color:var(--bg)!important;border:0!important;border-radius:999px!important;box-shadow:none!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:700!important}
.fac a.dl,.del,.sec,.btn2{border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
.del{color:#b3261e!important}

/* CHAMPS */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],select,textarea{
  border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important;background:var(--field)!important;color:var(--ink)!important}

/* PETITS TITRES EN MAJUSCULES : gardés, mais discrets */
.specs-t,.card h3,.seo_kicker,.seo_box__title,.lire-aussi h2,.plan-or,.plan .note{letter-spacing:.06em!important}

/* BANDEAU DES COOKIES (modules/cookiebar.php) : comme la V3, une carte en bas, sans flou */
#leo-notice{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;place-items:end center!important;pointer-events:none}
#leo-notice .ln-box{pointer-events:auto;background:var(--panel)!important;border:1px solid var(--line);border-radius:18px!important;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)!important;text-align:left!important;padding:14px 14px 12px!important;max-width:520px!important}
#leo-notice p{color:var(--ink-soft)!important;margin:0 0 10px!important}
#leo-notice a{color:var(--ink)!important}
#leo-notice button{text-transform:none!important;letter-spacing:0!important;border-radius:999px!important;font-size:14px!important;height:42px;padding:0 16px!important;border:1px solid var(--line)!important}
#leo-notice .ln-ok{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important;flex:1 1 0!important}
#leo-notice .ln-ko{background:var(--panel)!important;color:var(--ink)!important}

/* LIENS dans le texte */
main a:not([class]),article a:not([class]),.seo_section a:not([class]){color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* restes de l'ancien Léo (pixel / peluche) : les 4 ronds suffisent */
canvas#leo,canvas#sleo,canvas.leo-c{display:none!important}

/* EN-TÊTE ÉPURÉ (21/10/2026, François : « style épuré actuel, moderne à fond ») */
.lhdr{border-bottom:0!important;background:color-mix(in srgb,var(--bg) 88%,transparent)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lhdr .in{max-width:1080px!important;padding:14px 24px!important;gap:14px!important}
.lhdr .lshare{display:none!important}
.lhdr .lnav{margin-inline-start:auto!important;gap:2px!important}
.lhdr .lnav a{color:var(--ink-soft)!important;font-size:14.5px!important}
.lhdr .lnav a:hover{color:var(--ink)!important;background:var(--panel)}
.lhdr .lcta{flex:none;margin-inline-start:auto;background:var(--ink);color:var(--bg)!important;text-decoration:none;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;white-space:nowrap}
@media (min-width:900px){.lhdr .lcta{margin-inline-start:10px}}
.lhdr .burger{margin-inline-start:8px!important;width:42px!important;height:42px!important;border-radius:50%;border:1px solid var(--line)!important;background:var(--panel)!important}
.lhdr .burger span,.lhdr .burger span::before,.lhdr .burger span::after{width:16px!important;height:1.6px!important}
.lhdr .burger span::before{top:-5px!important}.lhdr .burger span::after{top:5px!important}
.lhdr .burger.open span::before,.lhdr .burger.open span::after{top:0!important}
/* contenu : colonne de lecture aérée, titres comme la V3 */
main h1,.wrap h1{font-size:clamp(30px,5vw,44px)!important;line-height:1.1!important;margin-bottom:10px!important}
main .sub,.wrap .sub{font-size:16px!important;color:var(--ink-soft)!important}
/* questions : liste aérée, chevron discret */
details.faq{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important;margin-bottom:10px!important}
details.faq summary{font-weight:600!important;font-size:16px!important}
details.faq .plus{opacity:.55}
/* téléphone : l'en-tête tient dans la largeur (le menu ne déborde plus) */
@media (max-width:520px){
  .lhdr .in{padding:12px 14px!important;gap:8px!important}
  .lhdr .ltxt{font-size:16px!important}
  .lhdr .lcta{padding:9px 14px;font-size:13.5px}
  .lhdr .burger{margin-inline-start:4px!important;width:40px!important;height:40px!important;flex:none}
}
/* menu : les groupes d'administration (Assets, Jeu, Marketing, Analyse) en casse normale, comme les autres entrées */
.lmenu .mghd{text-transform:none!important;letter-spacing:0!important;font-size:15px!important}
.lmenu .mgbd{background:var(--panel-2)!important}
.lmenu .mgbd a::before{color:var(--ink-soft)!important}

/* =============================================================================
   ORDINATEUR (21/10/2026, François : « pourquoi un style aussi étroit alors qu'on a tellement de place ? la gestion des espaces
   est importante pour un outil fluide »). UNE colonne de 1080 px pour toutes les pages, alignée sur l'en-tête (.lhdr .in : 1080 / 24),
   et les listes passent en grilles de 2 à 4 colonnes. Les pages « outil » (compte, factures, support, contact, mes sites, légal)
   sont alignées à gauche ; les pages « vitrine » (tarifs, comment, questions) restent centrées, en plus large.
   ============================================================================= */
@media (min-width:900px){
  .wrap,.ms-page,.seo_layout{max-width:1080px!important;padding:36px 24px 72px!important;box-sizing:border-box}
  main h1,.wrap h1,.ms-page h1{margin:0 0 8px!important}
  .wrap>.sub,.ms-page>.sub{margin:0 0 30px!important}
  /* lisibilité : les textes longs d'une page de gauche (légal, factures) ne s'étirent pas au-delà d'une ligne lisible */
  .wrap>p,.wrap>ul,.wrap>ol,.wrap>h2,.wrap>h3,.wrap>.sub{max-width:76ch}
  /* pages vitrine (centrées) : le sous-titre reste centré */
  .wrap:has(.plans)>.sub,.wrap:has(.step)>.sub,.wrap:has(.faq)>.sub{margin-inline:auto!important}
  .wrap:has(.faq){max-width:920px!important}

  /* MON COMPTE : Informations et Langue côte à côte, la zone sensible en dessous */
  .wrap:has(.card.danger){display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .wrap:has(.card.danger)>h2,.wrap:has(.card.danger)>.sub,.wrap:has(.card.danger)>.card.danger,.wrap:has(.card.danger)>.links,.wrap:has(.card.danger)>#reglages{grid-column:1/-1}
  .wrap:has(.card.danger)>.card{margin:0!important;height:100%;box-sizing:border-box}
  .wrap:has(.card.danger)>.sub{margin-bottom:8px!important}

  /* TARIFS : les deux formules de même hauteur, puis ce qui est inclus en deux colonnes */
  .plans{flex-direction:row!important;align-items:stretch!important;justify-content:center;gap:28px!important;margin:8px 0 36px!important}
  .plan{flex:0 1 400px!important;display:flex;flex-direction:column;justify-content:center;padding:34px 36px!important}
  .plan .price{font-size:34px!important;line-height:1.1}
  .feats{max-width:900px!important;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;row-gap:0}
  .feats li{font-size:15.5px!important}
  .specs{max-width:900px!important;padding:22px 26px!important}

  /* COMMENT ÇA MARCHE : les quatre étapes sur une ligne */
  .wrap:has(.step){display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}
  .wrap:has(.step)>h1,.wrap:has(.step)>.sub,.wrap:has(.step)>.cta{grid-column:1/-1}
  .step{padding:26px 24px!important;margin:0!important}

  /* FACTURES / SUPPORT / CONTACT / LÉGAL : formulaires et listes à largeur de lecture, alignés à gauche */
  .fac{padding:18px 22px!important}
  form.sform,.wrap>form,.wrap>.card:not(.danger):only-of-type{max-width:720px}
  .wrap>form textarea,.wrap>form .efield{max-width:720px}

  /* GUIDES : trois colonnes d'articles */
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
}
@media (min-width:1280px){
  .wrap,.ms-page,.seo_layout{max-width:1160px!important}
  .lhdr .in{max-width:1160px!important}
}
/* pages de texte seul (CGV, mentions, confidentialité, attribution) : colonne de lecture centrée plutôt qu'un bloc collé à gauche */
@media (min-width:900px){
  .wrap:not(:has(.card,.fac,form,.plans,.step,.faq,.cards,.ms-grid)){max-width:860px!important}
  .wrap:not(:has(.card,.fac,form,.plans,.step,.faq,.cards,.ms-grid))>p,.wrap:not(:has(.card,.fac,form,.plans,.step,.faq,.cards,.ms-grid))>ul,.wrap:not(:has(.card,.fac,form,.plans,.step,.faq,.cards,.ms-grid))>ol{max-width:none}
}