/* Ranknify — « chrome » commun du site : en-tête, navigation, pied de page.
 *
 * Chargé sur TOUTES les pages, y compris la page d'accueil, pour qu'il n'existe
 * qu'une seule définition de la barre de navigation. Tout est préfixé `rnk-`
 * afin de ne jamais entrer en collision avec les classes du thème.
 *
 * Le corps des articles reste clair — on lit mal un long texte sur fond sombre.
 * Ce qui est unifié, c'est l'encadrement : mêmes polices, même palette, même
 * menu, même pastille de dureté.
 */

@font-face{
  font-family:'Bricolage';
  src:url(fonts/bricolage.woff2) format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url(fonts/archivo.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
}

:root{
  --fond:#08191F;
  --fond-2:#0C2229;
  --surface:#123039;
  --ligne:rgba(232,226,212,.13);
  --matiere:#E8E2D4;
  --accent:#E3A33C;
  --vif:#5BC8D8;
  --alerte:#C9502F;
  --texte:#F2F5F3;
  --mute:#8CA5AC;
  --rnk-wrap:1180px;
  --dsp:'Bricolage','Archivo',system-ui,sans-serif;
  --txt:'Archivo',system-ui,-apple-system,sans-serif;
}

.rnk-wrap{
  max-width:var(--rnk-wrap);margin-inline:auto;
  padding-inline:clamp(18px,4vw,44px);
}

/* ─────────────── en-tête ─────────────── */

.rnk-nav{
  position:sticky;top:0;z-index:120;
  background:rgba(var(--fond-rgb,8,25,31),.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
  font-family:var(--txt);
  color:var(--texte);
}
.admin-bar .rnk-nav{top:32px}
@media(max-width:782px){.admin-bar .rnk-nav{top:46px}}

.rnk-nav *,.rnk-nav *::before,.rnk-nav *::after{box-sizing:border-box}
.rnk-nav a{color:inherit;text-decoration:none}
.rnk-nav ul{margin:0;padding:0;list-style:none}

.rnk-nav__in{display:flex;align-items:center;gap:clamp(12px,3vw,34px);min-height:64px}

.rnk-brand{
  display:flex;align-items:center;gap:11px;flex:none;
  font-family:var(--dsp);font-weight:800;font-stretch:82%;
  letter-spacing:-.01em;font-size:1.06rem;color:var(--texte);
}
/* le rond en dégradé n'était qu'un substitut : le symbole est maintenant un
   fichier, dont la taille est portée par les attributs width/height de l'image
   pour qu'aucun décalage n'apparaisse pendant le chargement */
.rnk-brand__mark{flex:none;display:block}
/* le lock-up complet porte déjà le nom : on le cale sur la hauteur, la largeur
   suit le rapport du fichier */
.rnk-brand__full{display:block;height:26px;width:auto;max-width:min(58vw,260px)}
@media(min-width:700px){.rnk-brand__full{height:30px}}

/* ─────────────── menu ─────────────── */

.rnk-menu{margin-left:auto}
.rnk-menu > ul{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.rnk-menu li{position:relative}

.rnk-menu__lien{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:.86rem;font-weight:500;
  padding:20px 0;border:0;background:none;color:var(--mute);cursor:pointer;
  transition:color .18s;
}
.rnk-menu__lien:hover,.rnk-menu__lien:focus-visible,
.rnk-menu li:hover > .rnk-menu__lien{color:var(--texte)}
.rnk-menu__lien[aria-current="page"]{color:var(--texte)}
.rnk-menu__lien:focus-visible{outline:2px solid var(--vif);outline-offset:3px}

.rnk-menu__fleche{
  width:8px;height:8px;flex:none;margin-top:-2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.rnk-menu__lien[aria-expanded="true"] .rnk-menu__fleche{transform:rotate(-135deg);margin-top:2px}

.rnk-sous{
  position:absolute;top:100%;left:-16px;min-width:248px;
  background:var(--fond-2);border:1px solid var(--ligne);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
  box-shadow:0 18px 40px rgba(0,0,0,var(--ombre-force,.45));
}
.rnk-menu li:hover > .rnk-sous,
.rnk-menu li:focus-within > .rnk-sous,
.rnk-sous.rnk-ouvert{opacity:1;visibility:visible;transform:none}

.rnk-sous a{
  display:block;padding:9px 14px;font-size:.85rem;color:var(--txt-1,#B9CCD1);
  transition:background .16s,color .16s;
}
.rnk-sous a:hover,.rnk-sous a:focus-visible{background:rgba(var(--voile-rgb,232,226,212),.07);color:var(--texte)}
.rnk-sous a:focus-visible{outline:2px solid var(--vif);outline-offset:-2px}

/* ─────────────── pastille de dureté ─────────────── */

.rnk-chip{
  flex:none;display:inline-flex;align-items:baseline;gap:5px;
  font-family:var(--dsp);font-weight:800;font-size:.95rem;
  padding:6px 13px;border-radius:999px;
  border:1px solid rgba(227,163,60,.4);color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:opacity .3s,transform .3s,background .18s;
}
.rnk-chip:hover{background:rgba(227,163,60,.12)}
.rnk-chip i{font-style:normal;font-size:.66rem;letter-spacing:.06em;opacity:.75}
.rnk-chip--vide{color:var(--mute);border-color:var(--ligne);font-family:var(--txt);
  font-weight:500;font-size:.82rem}

/* sur l'accueil, la pastille n'apparaît qu'une fois le grand chiffre dépassé */
.rnk-chip--accueil{opacity:0;transform:translateY(-6px);pointer-events:none}
.rnk-chip--accueil.rnk-chip--on{opacity:1;transform:none;pointer-events:auto}

/* ─────────────── mobile ─────────────── */

.rnk-burger{
  display:none;flex:none;margin-left:auto;
  width:42px;height:42px;padding:0;border:1px solid var(--ligne);
  background:none;color:var(--texte);cursor:pointer;border-radius:3px;
}
.rnk-burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:4px auto;
  transition:transform .2s,opacity .2s}
.rnk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.rnk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.rnk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:960px){
  .rnk-burger{display:block}
  .rnk-menu{
    position:absolute;top:100%;left:0;right:0;margin:0;
    background:var(--fond);border-bottom:1px solid var(--ligne);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .rnk-menu.rnk-ouvert{max-height:80vh;overflow-y:auto}
  .rnk-menu > ul{display:block;padding:8px clamp(18px,4vw,44px) 20px}
  .rnk-menu__lien{width:100%;justify-content:space-between;padding:13px 0;font-size:.95rem;
    border-bottom:1px solid var(--ligne)}
  .rnk-sous{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;background:none;padding:0 0 6px 14px;display:none;
  }
  .rnk-sous.rnk-ouvert{display:block}
  .rnk-menu li:hover > .rnk-sous{display:none}
  .rnk-menu li:hover > .rnk-sous.rnk-ouvert{display:block}
  .rnk-chip{order:-1;margin-left:auto;margin-right:8px}
  .rnk-chip--accueil{opacity:1;transform:none;pointer-events:auto}
}

/* ─────────────── pied de page ─────────────── */

.rnk-foot{
  background:var(--fond-2);border-top:1px solid var(--ligne);
  color:var(--texte);font-family:var(--txt);font-size:17px;line-height:1.62;
}
.rnk-foot *,.rnk-foot *::before,.rnk-foot *::after{box-sizing:border-box}
.rnk-foot a{color:inherit;text-decoration:none}
.rnk-foot ul{margin:0;padding:0;list-style:none}
.rnk-foot__in{padding-block:clamp(38px,5vw,58px);display:grid;gap:30px}
/* marque + trois colonnes de menu + « Le site » = cinq blocs : à quatre
   colonnes, le dernier retombait seul sur une deuxième ligne */
@media(min-width:760px){.rnk-foot__in{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.rnk-foot__in{grid-template-columns:1.5fr repeat(4,1fr);gap:24px}}
.rnk-foot h2,.rnk-foot h3,.rnk-foot h4{
  font-family:var(--txt);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:0 0 14px;
}
.rnk-foot li{margin-bottom:9px;font-size:.87rem;color:var(--txt-1,#B9CCD1)}
.rnk-foot li a:hover{color:var(--texte)}
.rnk-foot__brand p{font-size:.87rem;color:var(--mute);margin:14px 0 0;max-width:34ch}
.rnk-foot__note{font-size:.76rem;color:var(--txt-3,#5F7C85);margin-top:10px;max-width:60ch}
.rnk-foot__note a{border-bottom:1px solid rgba(var(--txt-3-rgb,95,124,133),.5)}
.rnk-foot__legal{
  border-top:1px solid var(--ligne);padding-block:20px;font-size:.76rem;color:var(--txt-3,#5F7C85);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
}

/* ─────────────── harmonisation du contenu des pages internes ───────────────
   Le corps reste clair : on ne change que les familles typographiques, pour que
   passer de l'accueil à un article ne donne pas l'impression de changer de site. */

body:not(.rnk-home-body){
  --global-heading-font-family:'Bricolage','Archivo',system-ui,sans-serif;
  --global-body-font-family:'Archivo',system-ui,-apple-system,sans-serif;
}
body:not(.rnk-home-body) :is(h1,h2,h3,h4,h5,h6){
  font-family:'Bricolage','Archivo',system-ui,sans-serif;
  font-stretch:86%;letter-spacing:-.015em;
}
body:not(.rnk-home-body){font-family:'Archivo',system-ui,-apple-system,sans-serif}

@media (prefers-reduced-motion:reduce){
  .rnk-nav *,.rnk-foot *{transition-duration:.01ms!important}
}

/* ─────────────── bandeau de titre des pages internes ───────────────
   Kadence lui donne un fond sombre mais laisse le titre sombre : 1,3:1 de
   contraste sur /comparatif/ et sur les archives, donc un titre illisible.
   Le défaut est antérieur à cette refonte ; on le corrige ici puisqu'on
   reprend l'encadrement du site, et le bandeau prolonge alors la barre. */
.entry-hero-container-inner{background:var(--fond-2)}
.entry-hero-container-inner :is(h1,h2,h3,.entry-title){color:var(--texte)}
.entry-hero-container-inner :is(p,span,time,li,.entry-meta,.taxonomy-description,
  .archive-description,.entry-taxonomies){color:var(--txt-1,#B9CCD1)}
.entry-hero-container-inner a{color:var(--txt-1,#B9CCD1)}
.entry-hero-container-inner a:hover,.entry-hero-container-inner a:focus-visible{color:var(--texte)}