/*
Theme Name: SmartMag Child - Nuit blanche
Theme URI: https://clio5.fr
Description: Direction artistique « Nuit blanche » pour clio5.fr : fond graphite, orange de signalisation, titres en Barlow Condensed. S'appuie sur le mode sombre natif de SmartMag plutot que de le contourner. Desactiver ce theme suffit a revenir a l'apparence precedente.
Author: NEWP
Template: smart-mag
Version: 1.0
*/

/* =====================================================================
   1. JETONS DE BASE
   SmartMag ecrit --c-main, --h-font, --title-font... sur :root depuis ses
   options. On double le selecteur (:root:root) pour passer devant sans
   avoir a semer des !important.
   ===================================================================== */
:root:root{
  --c-main:#F2683C;
  --c-main-rgb:242,104,60;

  --text-font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body-font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ui-font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --h-font:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --title-font:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;

  --c-post-meta:#8D97A3;
  --c-excerpts:#AEB7C2;

  /* Reperes de la direction, reutilises plus bas. */
  --a-ground:#14171B;
  --a-chrome:#0D1013;
  --a-card:#1D2127;
  --a-line:#2B3038;
  --a-ink:#F4F6F8;
  --a-muted:#8D97A3;
}

/* =====================================================================
   2. ECHELLE DE CONTRASTE
   Le mode sombre de SmartMag inverse --c-contrast-0 (fond) vers
   --c-contrast-900 (encre). On remplace ses gris neutres par une echelle
   legerement bleutee, coherente avec le graphite du fond.
   ===================================================================== */
.site-s-dark,
.site-s-dark .s-dark:not(i),
.s-dark:not(i){
  --c-contrast:#fff;
  --c-rgba:255,255,255;
  --c-contrast-0:#14171B;
  --c-contrast-10:#171A1F;
  --c-contrast-50:#1A1E24;
  --c-contrast-75:#1D2127;
  --c-contrast-100:#22262D;
  --c-contrast-125:#262B32;
  --c-contrast-150:#2B3038;
  --c-contrast-200:#343A43;
  --c-contrast-300:#4A515B;
  --c-contrast-400:#6E7885;
  --c-contrast-450:#7E8895;
  --c-contrast-500:#8D97A3;
  --c-contrast-600:#9BA5B1;
  --c-contrast-650:#AEB7C2;
  --c-contrast-700:#C2CAD3;
  --c-contrast-800:#DBE1E7;
  --c-contrast-850:#EAEEF2;
  --c-contrast-900:#F4F6F8;
  --c-separator:#262B32;
  --c-separator2:#2B3038;
}

/* Le fond de page lui-meme : sans ca on garde du blanc derriere le contenu. */
html.site-s-dark,
body.site-s-dark{
  background-color:var(--a-ground);
  color:var(--a-ink);
}

/* =====================================================================
   3. TYPOGRAPHIE
   Barlow Condensed est etroite : elle demande un cran de taille en plus
   et un interlignage plus serre que la Plus Jakarta Sans qu'elle remplace.
   ===================================================================== */
.site-s-dark h1,
.site-s-dark h2,
.site-s-dark h3,
.site-s-dark h4,
.site-s-dark .post-title,
.site-s-dark .entry-title{
  font-family:var(--h-font);
  letter-spacing:0;
  line-height:1.12;
  text-wrap:balance;
}
.site-s-dark .post-title{font-weight:700}
.site-s-dark .main-heading,
.site-s-dark .entry-title{font-weight:700}

/* Compensation de chasse.
   La Barlow Condensed occupe environ 15 % de largeur en moins que la Plus
   Jakarta Sans qu'elle remplace : a taille egale, les titres paraissent
   rapetisses. On remonte donc les corps, en valeurs ABSOLUES.
   ⚠️ Jamais d'unites relatives ici : SmartMag pose ses tailles en pixels sur
   .post-title, et une regle en `em` plus specifique recalculerait a partir du
   parent, ce qui ramenait le titre de une a 13px. */

/* La une, en pleine largeur sur la photo : c'est elle qui porte le registre. */
.site-s-dark .grid-overlay .post-title,
.site-s-dark .overlay-post .post-title{
  font-size:clamp(1.6rem,3vw,2.5rem);
  line-height:1.06;
  letter-spacing:-.005em;
}
/* Cartes principales de la grille. */
.site-s-dark .grid-card-post .post-title,
.site-s-dark .grid-base-post .post-title{font-size:1.35rem}
/* Cartes secondaires et listes laterales. */
.site-s-dark .grid-sm-post .post-title,
.site-s-dark .list-card-post .post-title{font-size:1.2rem}
.site-s-dark .small-post .post-title{font-size:1.08rem}
.site-s-dark .list-post .post-title{font-size:1.1rem}
/* Titre d'article et titres de section dans le contenu. */
.site-s-dark .single-post .entry-title,
.site-s-dark .post-title-alt{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.05}
.site-s-dark .post-content h2{font-size:1.75rem}
.site-s-dark .post-content h3{font-size:1.4rem}

/* Les intertitres de bloc (« A la une », « Entretien »...) : capitales
   resserrees, c'est la signature du registre presse auto. */
.site-s-dark .block-head .heading{
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}

/* Le texte courant reste en Plex Sans : la Condensed est illisible en labeur. */
.site-s-dark .post-content,
.site-s-dark .entry-content,
.site-s-dark p{font-family:var(--text-font)}

/* =====================================================================
   4. EN-TETE
   Le bandeau rouge plein disparait au profit du graphite le plus fonce du
   jeu, plus fonce que le corps de page pour poser une vraie assise.
   ===================================================================== */
.site-s-dark .smart-head-main,
.site-s-dark .smart-head-main .smart-head-row,
.site-s-dark .smart-head-mobile,
.site-s-dark .smart-head-mobile .smart-head-row{
  background-color:var(--a-chrome);
  --c-bg:var(--a-chrome);
}
.site-s-dark .smart-head-main .smart-head-top,
.site-s-dark .s-dark.smart-head-top{
  background-color:var(--a-chrome);
  border-bottom:1px solid var(--a-line);
}
.site-s-dark .smart-head{border-bottom:1px solid var(--a-line)}

/* Navigation : l'orange ne sert qu'a marquer l'element actif ou survole. */
.site-s-dark .navigation .menu > li > a{
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
  font-size:1.06em;
  color:var(--a-ink);
}
.site-s-dark .navigation .menu > li > a:hover,
.site-s-dark .navigation .menu > li.current-menu-item > a{color:var(--c-main)}
.site-s-dark .navigation .menu > li.current-menu-item > a{box-shadow:inset 0 -2px 0 var(--c-main)}

/* =====================================================================
   5. CARTES ET BLOCS
   Regle maison : une carte n'a jamais le fond de sa section. Ici le fond
   de page est #14171B, les cartes sont eclaircies a #1D2127 et bordees.
   ===================================================================== */
.site-s-dark .l-post.grid-post,
.site-s-dark .l-post.list-post,
.site-s-dark .content-box,
.site-s-dark .widget,
.site-s-dark .spc-newsletter{
  background-color:var(--a-card);
  border:1px solid var(--a-line);
  border-radius:6px;
  overflow:hidden;
}
.site-s-dark .l-post.grid-post .post-content,
.site-s-dark .l-post.list-post .post-content{padding:14px 16px 16px}
.site-s-dark .l-post.grid-post:hover,
.site-s-dark .l-post.list-post:hover{border-color:#3A424C}

/* Les vignettes en colonne laterale restent sans cadre : les encadrer
   toutes produirait une page en damier. */
.site-s-dark .l-post.small-post{background:transparent;border:0;border-radius:0}

/* =====================================================================
   6. ETIQUETTES DE RUBRIQUE
   Seul endroit ou l'orange est en aplat. On le garde rare pour qu'il
   continue de signaler quelque chose.
   ===================================================================== */
.site-s-dark .post-cat-labels a,
.site-s-dark .cat-labels a{
  background-color:var(--c-main);
  color:var(--a-chrome);
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  border-radius:3px;
}
.site-s-dark .post-cat-labels a:hover,
.site-s-dark .cat-labels a:hover{background-color:#FF7E52;color:var(--a-chrome)}

/* =====================================================================
   7. LIENS, BOUTONS, FORMULAIRES
   ===================================================================== */
.site-s-dark a{color:var(--a-ink)}
.site-s-dark a:hover{color:var(--c-main)}
.site-s-dark .post-content a:not(.wp-block-button__link){
  color:var(--c-main);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.site-s-dark .post-content a:not(.wp-block-button__link):hover{color:#FF8A63}

.site-s-dark .ts-button,
.site-s-dark .wp-block-button__link,
.site-s-dark input[type="submit"],
.site-s-dark button[type="submit"]{
  background-color:var(--c-main);
  color:var(--a-chrome);
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  border-radius:4px;
  border:0;
}
.site-s-dark .ts-button:hover,
.site-s-dark .wp-block-button__link:hover,
.site-s-dark input[type="submit"]:hover,
.site-s-dark button[type="submit"]:hover{background-color:#FF7E52;color:var(--a-chrome)}

.site-s-dark input[type="text"],
.site-s-dark input[type="email"],
.site-s-dark input[type="search"],
.site-s-dark textarea,
.site-s-dark select{
  background-color:var(--a-card);
  border:1px solid var(--a-line);
  color:var(--a-ink);
  border-radius:4px;
}
.site-s-dark ::placeholder{color:var(--a-muted);opacity:1}

/* Un focus visible : la navigation au clavier doit rester praticable. */
.site-s-dark a:focus-visible,
.site-s-dark button:focus-visible,
.site-s-dark input:focus-visible,
.site-s-dark textarea:focus-visible,
.site-s-dark select:focus-visible{
  outline:2px solid var(--c-main);
  outline-offset:2px;
}

/* =====================================================================
   8. PIED DE PAGE
   Regle maison : le pied de page prend la couleur secondaire foncee,
   pas le noir pur ni la couleur du corps.
   ===================================================================== */
.site-s-dark .main-footer,
.site-s-dark .footer-widgets,
.site-s-dark .lower-foot{
  background-color:var(--a-chrome);
  border-top:1px solid var(--a-line);
  color:var(--a-muted);
}
.site-s-dark .main-footer .widget{background:transparent;border:0}
.site-s-dark .main-footer a{color:var(--a-muted)}
.site-s-dark .main-footer a:hover{color:var(--c-main)}

/* =====================================================================
   9. RATTRAPAGES
   Elementor et quelques blocs posent des fonds clairs en dur, invisibles
   tant qu'on ne bascule pas le site en sombre.
   ===================================================================== */
.site-s-dark .elementor-section,
.site-s-dark .elementor-widget-wrap,
.site-s-dark .e-con{background-color:transparent}
.site-s-dark .main-wrap,
.site-s-dark .main,
.site-s-dark #main{background-color:transparent}

/* Les images heritees ne doivent pas se retrouver sur une bande blanche
   quand elles ne remplissent pas leur cadre. */
.site-s-dark .media,
.site-s-dark .post-thumb{background-color:var(--a-card)}

/* Tableaux de specifications : lisibles sur fond sombre. */
.site-s-dark .post-content table{border-color:var(--a-line)}
.site-s-dark .post-content th{
  background-color:var(--a-card);
  color:var(--a-ink);
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.site-s-dark .post-content td{border-color:var(--a-line)}
.site-s-dark .post-content blockquote{
  border-left:3px solid var(--c-main);
  background-color:var(--a-card);
  color:var(--a-ink);
}

/* Le contenu large ne doit jamais faire deborder la page lateralement. */
.site-s-dark .post-content table,
.site-s-dark .post-content pre{display:block;max-width:100%;overflow-x:auto}

/* Sommaire d'article (LuckyWP Table of Contents).
   Le plugin pose ses fonds clairs via `.lwptoc-light .lwptoc_i`, a specificite
   egale a la notre mais dans une feuille chargee APRES : a egalite, l'ordre
   decide et c'est lui qui gagne. On ajoute donc sa classe de skin dans le
   selecteur pour passer devant, plutot que d'empiler des !important.
   Les deux skins sont couverts : le reglage peut differer d'un article a l'autre. */
.site-s-dark .lwptoc.lwptoc-light .lwptoc_i,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_i{
  background-color:var(--a-card);
  border:1px solid var(--a-line);
  border-radius:6px;
  color:var(--a-ink);
}
.site-s-dark .lwptoc.lwptoc-light .lwptoc_header,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_header,
.site-s-dark .lwptoc.lwptoc-light .lwptoc_title,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_title{
  color:var(--a-ink);
  font-family:var(--h-font);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}
.site-s-dark .lwptoc.lwptoc-light .lwptoc_toggle,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_toggle,
.site-s-dark .lwptoc.lwptoc-light .lwptoc_toggle_label,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_toggle_label{color:var(--c-main)}
.site-s-dark .lwptoc.lwptoc-light .lwptoc_item a,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_item a{color:var(--a-ink);text-decoration:none}
.site-s-dark .lwptoc.lwptoc-light .lwptoc_item a:hover,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_item a:hover{color:var(--c-main);text-decoration:underline}
.site-s-dark .lwptoc.lwptoc-light .lwptoc_itemNumber,
.site-s-dark .lwptoc.lwptoc-dark .lwptoc_itemNumber{color:var(--a-muted)}

@media (prefers-reduced-motion:reduce){
  .site-s-dark *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}