/* ============================================================
   KOATCHER — FEUILLE COMMUNE
   ------------------------------------------------------------
   Une seule source pour le thème du site : fond blanc, texte
   noir, filets gris. Elle unifie les différents systèmes de
   variables qui coexistaient (--ks-*, --c-*, --f*, --cds-*,
   et les variables locales des pages), pour que toutes les
   pages partagent la même palette sans réécrire leur CSS.

   À charger APRÈS les feuilles de thème existantes.
   ============================================================ */

:root{
  /* ---- palette de référence ---- */
  --k-fond:      #FFFFFF;   /* fond de page            */
  --k-surface:   #FFFFFF;   /* cartes, panneaux        */
  --k-encre:     #111111;   /* texte principal         */
  --k-doux:      #4a4a4f;   /* texte secondaire        */
  --k-muet:      #6b6b70;   /* texte tertiaire         */
  --k-filet:     rgba(17,17,17,.10);  /* bordures      */
  --k-filet-fort:rgba(17,17,17,.18);
  --k-gris:      #EDEDF0;   /* fonds de boutons doux   */

  /* ---- systèmes existants, alignés sur la palette ---- */
  /* thème principal du site */
  --ks-fond: var(--k-fond);      --ks-surface: var(--k-surface);
  --ks-carte: var(--k-surface);  --ks-encre: var(--k-encre);
  --ks-trait: var(--k-filet);    --ks-bord: var(--k-filet-fort);
  --ks-bouton: var(--k-encre);

  /* page de connexion */
  --c-fond: var(--k-fond);       --c-panneau: var(--k-surface);
  --c-carte: var(--k-surface);   --c-encre: var(--k-encre);
  --c-trait: var(--k-filet);     --c-bord: var(--k-filet-fort);
  --c-encre-3: var(--k-muet);

  /* variables locales des pages (tarifs, faq, landings…) */
  --bg: var(--k-fond);           --card: var(--k-surface);
  --soft: var(--k-surface);      --softer: var(--k-surface);
  --ink: var(--k-encre);         --inkSoft: var(--k-doux);
  --inkMuted: var(--k-muet);     --line: var(--k-filet);
  --lineStrong: var(--k-filet-fort);
  --fond: var(--k-fond);         --surface: var(--k-surface);
  --encre: var(--k-encre);       --muted: var(--k-muet);
  --white: var(--k-fond);

  /* Carbon (pages au style rankersquare) */
  --cds-background: var(--k-fond);
  --cds-layer: var(--k-surface);
  --cds-text-primary: var(--k-encre);
  --cds-border-subtle: var(--k-filet);
}

/* Le pied de page a ses propres tokens. */
.bpFooter{
  --fInk: var(--k-fond);
  --fInk-soft: var(--k-surface);
  --fOnInk: var(--k-encre);
  --fMuted: rgba(17,17,17,.60);
  --fLine: var(--k-filet);
}

/* Fond et texte de base, quelle que soit la classe de body héritée
   de l'ancien thème sombre. */
html, body,
body.page-noire, body.is-dark-bg{
  background: var(--k-fond) !important;
  color: var(--k-encre) !important;
}

/* ============================================================
   BANDEAU COOKIES en version claire
   ------------------------------------------------------------
   Il était entièrement pensé pour un fond noir (texte blanc,
   boutons sombres). Sur un site blanc, il détonnait.
   ============================================================ */
.ck,
.ck-modale__boite,
.ck-cat{
  background: #FFFFFF !important;
  color: var(--k-encre) !important;
  border: 1px solid var(--k-filet) !important;
}
.ck__titre{ color: var(--k-encre) !important; }
.ck__texte{ color: var(--k-doux) !important; }
.ck__texte a{ color: var(--k-encre) !important; }
.ck-cat__desc p,
.ck-cat__fleche{ color: var(--k-muet) !important; }
.ck-cat__nom{ color: var(--k-encre) !important; }

/* Boutons : le principal en noir plein, le secondaire en gris clair. */
.ck__b--plein{ background: var(--k-encre) !important; color: #FFFFFF !important; }
.ck__b--plein:hover{ background: #000000 !important; }
.ck__b--gris{ background: var(--k-gris) !important; color: var(--k-encre) !important; border:1px solid var(--k-filet) !important; }
.ck__b--gris:hover{ background: #E2E2E6 !important; }

/* Le voile derrière la fenêtre de préférences : un voile clair. */
.ck-modale__voile{ background: rgba(17,17,17,.35) !important; }
.ck-modale__x{ color: var(--k-encre) !important; }
.ck-modale__x:hover{ background: rgba(17,17,17,.06) !important; color: var(--k-encre) !important; }

/* Interrupteurs : actif = noir, inactif = gris clair. */
.ck-bascule{ background: #D8D8DC !important; }
.ck-bascule i{ background: #FFFFFF !important; }
.ck-bascule:has(input:checked),
.ck-bascule.is-on{ background: var(--k-encre) !important; }
.ck-bascule:has(input:checked) i,
.ck-bascule.is-on i{ background: #FFFFFF !important; }
.ck-bascule--fige{ background: #E6E6E9 !important; }
.ck-bascule--fige i{ background: #A9A9AE !important; }

/* ============================================================
   HEADER COMMUN en clair (toutes pages)
   ------------------------------------------------------------
   La barre de navigation vient du thème sombre d'origine : sur
   un site blanc, elle doit être claire elle aussi.
   ============================================================ */
/* Le wordmark. Sa taille était définie dans un <style> inline du <head>
   de header.php : les pages qui ont leur propre <head> ne l'avaient donc
   pas, et leur logo s'affichait en 16px au lieu de 18px. Il vit ici pour
   être identique partout. */
.hdr__logo-mot{
  font-family: var(--f-titre, inherit);
  font-size: 1.125rem !important;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
}

.hdr, .hdr--epure, .promo{
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--k-filet) !important;
  color: var(--k-encre) !important;
}
.hdr a, .hdr__lien, .hdr__declencheur, .hdr__logo-mot,
.promo, .promo__txt{ color: var(--k-encre) !important; }
.promo__lien{ color:#c2410c !important; }
/* Le bouton d'action : pastille grise pleine, sans contour. Le filet qui
   l'entourait doublait la limite déjà donnée par le fond. */
.hdr__cta{
  background: var(--k-gris) !important;
  color: var(--k-encre) !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.hdr__cta:hover{ background:#E2E2E6 !important; }

/* ---- Le choix de langue ---- */
.hdr__langue{ position: relative; display: flex; align-items: center; }
.hdr__langue-bouton{
  display: inline-flex; align-items: center; gap: .35rem;
  height: 2rem; padding: 0 .5rem;
  background: none; border: 0; border-radius: 999px;
  font: inherit; font-size: .8125rem; font-weight: 500;
  color: var(--k-encre) !important;
  cursor: pointer;
  transition: background .11s ease;
}
.hdr__langue-bouton:hover{ background: rgba(17,17,17,.06); }
.hdr__langue-bouton svg{ flex: 0 0 auto; opacity: .75; }
.hdr__langue-code{ letter-spacing: .04em; }

.hdr__langue-menu{
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
  min-width: 11rem; padding: .35rem;
  background: #FFFFFF !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(17,17,17,.10);
}
.hdr__langue-menu[hidden]{ display: none; }
.hdr__langue-item{
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: .375rem;
  font-size: .875rem; text-decoration: none;
  color: var(--k-encre) !important;
}
.hdr__langue-item:hover{ background: rgba(17,17,17,.06); }
.hdr__langue-item.est-actif{ font-weight: 600; }
.hdr__langue-item-code{
  flex: 0 0 auto; width: 1.75rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  color: var(--k-muet) !important;
}
.hdr__langue-item.est-actif .hdr__langue-item-code{ color: var(--k-encre) !important; }

/* Sur téléphone, le bouton se réduit au pictogramme : le code de langue
   prendrait la place du logo sur les écrans les plus étroits. */
@media (max-width: 30rem){
  .hdr__langue-code{ display: none; }
}

/* ---- La suggestion de langue ----
   Posée en haut à droite, sous le sélecteur qu'elle commente, et non au
   milieu de l'écran : c'est une proposition, pas une interruption. */
.sug{
  position: fixed; top: 4.75rem; right: 1rem; z-index: 70;
  max-width: calc(100vw - 2rem);
}
.sug[hidden]{ display: none; }
.sug__boite{
  width: 19rem; max-width: 100%;
  padding: 1rem;
  background: #FFFFFF !important;
  color: var(--k-encre) !important;
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(17,17,17,.12);
}
.sug__texte{
  margin: 0 0 .75rem;
  font-size: .9375rem; line-height: 1.45;
  color: var(--k-encre) !important;
}
.sug__actions{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sug__oui{
  display: inline-flex; align-items: center; height: 2rem; padding: 0 .9rem;
  background: var(--k-encre) !important; color: #FFFFFF !important;
  border-radius: 999px; font-size: .875rem; font-weight: 500;
  text-decoration: none;
}
.sug__oui:hover{ background: #000000 !important; }
.sug__non{
  height: 2rem; padding: 0 .75rem;
  background: none; border: 0; border-radius: 999px;
  font: inherit; font-size: .875rem;
  color: var(--k-muet) !important; cursor: pointer;
}
.sug__non:hover{ background: rgba(17,17,17,.06); color: var(--k-encre) !important; }

@media (max-width: 30rem){
  /* Sur téléphone, elle s'ancre en bas : le haut de l'écran est déjà pris
     par le bandeau d'offre et la barre de navigation. */
  .sug{ top: auto; bottom: 1rem; left: 1rem; right: 1rem; }
  .sug__boite{ width: 100%; }
}
.hdr__burger, .hdr__burger svg{ color: var(--k-encre) !important; }
/* le méga-menu déroulant */
.mega{ background:#FFFFFF !important; border-color: var(--k-filet) !important; }
.mega a strong{ color: var(--k-encre) !important; }
.mega a span, .mega__titre{ color: var(--k-muet) !important; }
/* le panneau mobile */
.hdr__panel, .hdr__panel-cadre, .hdr__panel-liste{ background:#FFFFFF !important; color: var(--k-encre) !important; }
.hdr__panel a, .hdr__panel-login{ color: var(--k-encre) !important; }
.hdr__panel-cta{ background: var(--k-encre) !important; color:#FFFFFF !important; }

/* ============================================================
   BLOG : liste et article en clair
   ============================================================ */
body.page-blog,
body.page-blog .section,
body.page-blog .section--blog,
body.page-blog .shero,
body.page-blog .agrid,
body.page-blog .agrid__c{
  background: #FFFFFF !important;
  color: var(--k-encre) !important;
}
body.page-blog .shero__h1,
body.page-blog .agrid__titre,
body.page-blog .agrid__titre a{ color: var(--k-encre) !important; }
body.page-blog .shero__p,
body.page-blog .agrid__extrait{ color: var(--k-doux) !important; }
body.page-blog .agrid__cat{ color: var(--k-muet) !important; }
body.page-blog .agrid__lire{ color: var(--k-encre) !important; }
/* ------------------------------------------------------------
   LES FILETS DE LA GRILLE
   ------------------------------------------------------------
   La grille ne dessine qu'un cadre extérieur et des filets ENTRE
   les cartes : une bordure sur chaque carte les doublerait. Le
   principe, repris de RankerSquare : chaque carte porte un filet
   à droite sauf en fin de rangée, et un filet en haut à partir
   de la deuxième rangée.

   Il faut redéclarer ces filets par palier, et non seulement leur
   couleur : les règles d'origine sont posées sur des sélecteurs
   plus précis (`:not(:nth-child(3n))`) qui l'emportaient sur une
   simple `.agrid__c`, et gardaient le gris sombre #232323.
   ------------------------------------------------------------ */
body.page-blog .agrid{
  border: 1px solid var(--k-filet) !important;
  background: #FFFFFF !important;
}
body.page-blog .agrid__c{
  border: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
}

/* Une colonne : un filet entre deux cartes successives. */
@media (max-width: 45.99rem){
  body.page-blog .agrid__c + .agrid__c{
    border-top: 1px solid var(--k-filet) !important;
  }
}

/* Deux colonnes. */
@media (min-width: 46rem) and (max-width: 65.99rem){
  body.page-blog .agrid__c:not(:nth-child(2n)){
    border-right: 1px solid var(--k-filet) !important;
  }
  body.page-blog .agrid__c:nth-child(n + 3){
    border-top: 1px solid var(--k-filet) !important;
  }
}

/* Trois colonnes. */
@media (min-width: 66rem){
  body.page-blog .agrid .agrid__c:not(:nth-child(3n)){
    border-right: 1px solid var(--k-filet) !important;
  }
  body.page-blog .agrid .agrid__c:nth-child(n + 4){
    border-top: 1px solid var(--k-filet) !important;
  }
}

/* Les titres de rubrique de /services, et leur compteur. */
body.page-services .svc__famille{
  margin: 0 0 1.25rem;
  color: var(--k-encre) !important;
  scroll-margin-top: 5rem;
}
body.page-services .svc__compte{
  margin-left: .5rem;
  font-size: .8125rem; font-weight: 400;
  color: var(--k-muet) !important;
  vertical-align: .35em;
}

/* ============================================================
   PAGE ARTICLE — barre latérale + colonne de lecture, en clair
   ------------------------------------------------------------
   Même structure que le blog RankerSquare : le sommaire tient
   une colonne à gauche, l'article occupe la droite. Sous 66rem,
   la colonne s'efface et le sommaire devient une barre repliable
   collée sous l'en-tête.
   ============================================================ */
body.page-article{ background:#FFFFFF !important; }

.lecture{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  background: #FFFFFF !important;
  min-height: calc(100vh - 3rem);
}
@media (min-width: 66rem){
  .lecture{ grid-template-columns: 22rem minmax(0, 1fr); }
  .lecture--sans-cote{ grid-template-columns: minmax(0, 1fr); }
}
.lecture--sans-cote .lecture__corps{ max-width: 76rem; margin: 0 auto; width: 100%; }

/* ---- la colonne de gauche ---- */
/* Le filet est écrit en dur : `--k-filet` est redéfini en blanc par une
   feuille du thème sombre chargée plus tard, et la séparation disparaissait. */
.lecture__cote{
  background: #FFFFFF !important;
  border-right: 1px solid rgba(17,17,17,.10) !important;
}
.lecture__cote .fil--clair{ padding: 2.5rem 1.5rem 0 1.5rem; margin-bottom: 0; }
.lecture__cote .sommaire{
  position: static;
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
  background: none; border: none; margin: 0; max-height: none;
}
@media (min-width: 66rem){
  .lecture__cote .sommaire{
    position: sticky;
    top: 4.5rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .lecture__cote .sommaire::-webkit-scrollbar{ display:none; }
}

/* ---- le sommaire lui-même ---- */
.sommaire__titre{
  font-size:.75rem; font-weight:500; letter-spacing:1.8px;
  text-transform:uppercase; color: var(--k-muet) !important; margin-bottom:1rem;
}
.sommaire__lien{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0; font-size:.9375rem; font-weight:500; line-height:1.3;
  color: var(--k-doux) !important; text-decoration:none;
  transition: color .11s cubic-bezier(.2,0,.38,.9);
}
.sommaire__lien:hover{ color: var(--k-encre) !important; }
/* une seule ligne : le titre est tronqué s'il dépasse */
.sommaire__lien span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sommaire__lien svg{ flex:0 0 auto; color: var(--k-muet); transition: transform .11s cubic-bezier(.2,0,.38,.9); }
.sommaire__lien:hover svg{ transform: translateX(2px); color: var(--k-encre); }
.sommaire__lien + .sommaire__lien{ border-top: 1px solid rgba(17,17,17,.10) !important; }
.sommaire__lien.is-active{ color: var(--k-encre) !important; }
.sommaire__lien.is-active svg{ color: var(--k-encre); }

/* ---- téléphone et tablette : barre repliable ---- */
@media (max-width: 65.99rem){
  .lecture{ grid-template-columns: minmax(0, 1fr); }
  /* l'aside s'efface : ses enfants rejoignent la grille de .lecture */
  .lecture__cote{ display: contents; border-right:none; }
  .lecture__cote .fil--clair{ padding: 1.5rem 1.25rem .75rem; }
  .lecture__cote .sommaire__titre{ display:none; }
  .lecture__cote .sommaire{
    position: sticky; top: 3.5rem; z-index: 25;
    padding: 0; background:#FFFFFF !important;
    border-bottom: 1px solid var(--k-filet);
    max-height:none; overflow:visible;
  }
  .sommaire__bascule{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; gap:1rem; padding:.75rem 1.25rem;
    background:none; border:none; font-family:inherit;
    font-size:.9375rem; font-weight:500; color: var(--k-encre);
    text-align:left; cursor:pointer;
  }
  .sommaire__bascule-texte{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sommaire__bascule svg{ flex:0 0 auto; color: var(--k-muet); transition: transform .11s cubic-bezier(.2,0,.38,.9); }
  .sommaire__bascule[aria-expanded="true"] svg{ transform: rotate(180deg); }

  /* la liste se superpose au contenu, sans le décaler */
  .lecture__cote .sommaire__liste{
    position:absolute; top:100%; left:0; right:0; z-index:25;
    display:block; max-height: calc(100vh - 6.5rem); overflow-y:auto;
    padding: 0 1.25rem .75rem; background:#FFFFFF;
    border-bottom: 1px solid var(--k-filet);
    transform: translateY(-8px); opacity:0; visibility:hidden;
    transition: opacity .11s ease, transform .11s ease, visibility 0s linear .11s;
  }
  .lecture__cote .sommaire__liste.is-open{
    transform: translateY(0); opacity:1; visibility:visible;
    transition: opacity .11s ease, transform .11s ease, visibility 0s;
  }
}
@media (min-width: 66rem){
  .sommaire__bascule{ display:none; }
}

/* ---- la colonne de droite ---- */
.lecture__corps{
  padding: 2.5rem 1.25rem 5rem;
  max-width: 100%;
  background: #FFFFFF !important;
}
@media (min-width: 42rem){ .lecture__corps{ padding-left:3rem; padding-right:3rem; } }
@media (min-width: 66rem){ .lecture__corps{ padding: 4rem 4rem 6rem; } }
.lecture__zone{ display:block; max-width: 46rem; }

.fil--clair{ margin-bottom:1.5rem; font-size:.8125rem; }
.fil--clair a{ color: var(--k-muet) !important; text-decoration:none; }
.fil--clair a:hover{ color: var(--k-encre) !important; }
.fil--clair span[aria-hidden]{ color: var(--k-muet); margin:0 .4rem; }

.lecture__entete{ max-width:46rem; margin-bottom:2.5rem; }
.lecture__titre{ color: var(--k-encre) !important; margin-bottom: 1rem; }
.lecture__chapeau{ color: var(--k-doux) !important; font-size:1.125rem; line-height:1.6; margin-bottom: .75rem; }
.lecture__meta{ color: var(--k-muet) !important; font-size:.875rem; margin-bottom:1.5rem; }
.lecture__image{ width:100%; height:auto; border-radius:.75rem; margin: 1rem 0 2rem; }

/* Le corps de l'article : typographie de lecture confortable. */
.lecture__corps{ color: var(--k-encre) !important; font-size:1.0625rem; line-height:1.72; }
.lecture__corps h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; margin:2.25rem 0 .75rem; color: var(--k-encre) !important; }
.lecture__corps h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.015em; margin:1.75rem 0 .5rem; color: var(--k-encre) !important; }
.lecture__corps p{ margin:0 0 1.1rem; color: var(--k-encre) !important; }
.lecture__corps ul, .lecture__corps ol{ margin:0 0 1.1rem 1.25rem; }
.lecture__corps li{ margin:.35rem 0; }
.lecture__corps a{ color:#1f5fd0 !important; text-decoration:underline; text-underline-offset:2px; }
.lecture__corps strong{ color: var(--k-encre) !important; }
.lecture__corps img{ max-width:100%; height:auto; border-radius:.5rem; }
.lecture__corps table{ width:100%; border-collapse:collapse; margin:0 0 1.25rem; }
.lecture__corps th, .lecture__corps td{ border:1px solid var(--k-filet); padding:.6rem .75rem; text-align:left; }
.lecture__corps blockquote{ margin:1.25rem 0; padding:.75rem 1rem; border-left:3px solid var(--k-filet); color: var(--k-doux) !important; }

/* Articles liés */
.lecture__lies{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--k-filet); }
.lecture__liesListe{ list-style:none; padding:0; margin:1rem 0 0; }
.lecture__liesListe li{ margin:.5rem 0; }
.lecture__liesListe a{ color: var(--k-encre) !important; text-decoration:none; }
.lecture__liesListe a:hover{ text-decoration:underline; }

/* Le corps de l'article porte désormais la classe `.texte` : on reprend
   pour elle la typographie de lecture définie plus haut. */
.lecture__texte{ color: var(--k-encre) !important; font-size:1.0625rem; line-height:1.72; }
.lecture__texte h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; margin:2.75rem 0 .75rem; color: var(--k-encre) !important; scroll-margin-top: 5rem; }
.lecture__texte h2:first-child{ margin-top:0; }
.lecture__texte h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.015em; margin:1.75rem 0 .5rem; color: var(--k-encre) !important; scroll-margin-top: 5rem; }
.lecture__texte p{ margin:0 0 1.1rem; color: var(--k-encre) !important; }
.lecture__texte ul, .lecture__texte ol{ margin:0 0 1.1rem 1.25rem; }
.lecture__texte li{ margin:.35rem 0; }
.lecture__texte a{ color:#1f5fd0 !important; text-decoration:underline; text-underline-offset:2px; }
.lecture__texte strong{ color: var(--k-encre) !important; }
.lecture__texte img{ max-width:100%; height:auto; border-radius:.5rem; }
.lecture__texte table{ width:100%; border-collapse:collapse; margin:0 0 1.25rem; }
.lecture__texte th, .lecture__texte td{ border:1px solid var(--k-filet); padding:.6rem .75rem; text-align:left; }
.lecture__texte blockquote{ margin:1.25rem 0; padding:.75rem 1rem; border-left:3px solid var(--k-filet); color: var(--k-doux) !important; }