/* ============================================================================
   GO LYON — BLOG ET WIDGETS D'ARTICLE
   ----------------------------------------------------------------------------
   Deux choses dans ce fichier, et elles vont ensemble.

   1. LE BLOG : la page d'archive, la carte d'article, le gabarit d'article.
      Ces classes sont employees par archive.php et single.php.

   2. LES WIDGETS `rk-*` DE LA BATCAVE. Point 5 du standard site compatible
      Batcave, et c'est le point BLOQUANT : pas de production d'articles sans
      lui. Rankit emet un balisage FIGE ET SANS STYLE ; le site fournit toute
      la presentation. Si le site ne l'habille pas, personne ne le fait.

      La methode imposee par le standard : pour chaque widget, reprendre le
      composant equivalent DEJA present sur le site et reporter ses regles.
      L'objectif n'est pas que les widgets soient acceptables, c'est qu'ils
      soient indiscernables de ce qui existe. C'est ce qui est fait ici :
      la FAQ reprend l'accordeon de `.questions`, le bouton reprend `.cta-or`,
      le comparateur reprend `.tableau`, les compteurs reprennent `.reperes`.

      On cible la PRESENCE de l'attribut, `[data-rk]`, jamais sa valeur : cela
      exclut les anciens articles sans obliger a dupliquer la feuille au
      premier passage en version 2.
   ========================================================================== */


/* ============================ 1. LE BLOG ============================ */

/* ---- la section de contenu du blog ----
   Elle garde le rythme vertical des autres sections du site. Un
   `padding-top:0` avait ete pose ici du temps ou la section etait sombre comme
   la tete qui la precede : les deux fonds se confondaient et seule la double
   marge se voyait. Maintenant que la section est claire, conformement au
   design system, la coupure est franche et le contenu se collait au bloc
   sombre. C'est la tete qui allege sa marge basse, pas la section. */
.tete-doc + .section-blog{padding-top:clamp(38px,6vw,64px)}

/*  L'EN-TETE ILLUSTRE. Quand l'article porte une image a la une, elle devient
    le fond de l'en-tete, par le composant `decor` du site. Deux ajustements,
    et deux seulement : il faut de la hauteur pour que la photo existe, et il
    faut remonter le voile, parce que le titre d'un article est plus long que
    celui d'une page et descend plus bas sur l'image.
    Sans image, rien ne change : la regle ne s'applique pas.  */
.tete-illustree{padding-bottom:clamp(56px,8vw,92px);min-height:clamp(440px,54vw,620px);
 display:flex;align-items:flex-end}
/*  LE HEROS RESPIRE. La premiere version tenait dans 440 px au plus et gardait
    les espacements de la `tete-doc`, qui est un en-tete de page legale sans
    image : les quatre elements se touchaient et la photo n'avait pas la place
    d'exister. Mounir : « on a l'impression que tout est compacte ».
    Les espacements ne valent QUE pour l'en-tete illustre : sans image, la
    `tete-doc` reste serree, ce qui est juste pour les mentions legales.  */
.tete-illustree .fil{margin-bottom:clamp(22px,3vw,34px)}
.tete-illustree .macaron{margin-bottom:clamp(14px,2vw,20px)}
.tete-illustree h1{margin:0 0 clamp(18px,2.6vw,26px)}
.tete-illustree .meta-art{margin-bottom:0}
/*  LE REGLAGE EST CELUI DU HEROS DES PAGES, et pour la meme raison : une photo
    a 50 % d'opacite sous un voile plein disparait, surtout quand elle est deja
    sombre. Les pages du site montent donc la photo a 0,9 et font porter la
    lisibilite au VOILE, qui est fort la ou vit le texte et s'efface ailleurs.
    Premier essai du 02/10 : image noyee, on ne devinait plus les vehicules.  */
.tete-illustree .decor img{opacity:.9;object-position:60% 54%}
.tete-illustree .decor::after{background:
 linear-gradient(90deg,rgba(6,5,5,.93) 12%,rgba(6,5,5,.72) 46%,rgba(6,5,5,.42) 82%),
 linear-gradient(180deg,rgba(6,5,5,.78) 4%,rgba(6,5,5,.30) 44%,rgba(6,5,5,.72))}
/*  Sous 900 px il n'y a plus de colonne libre : le texte passe SUR la photo.
    On baisse la photo et on renforce le voile, sinon le titre devient
    illisible. Meme arbitrage que `.heros`.  */
@media(max-width:899px){
  .tete-illustree{min-height:clamp(260px,56vw,340px)}
  .tete-illustree .decor img{opacity:.45;object-position:50% 50%}
  .tete-illustree .decor::after{background:
   linear-gradient(180deg,rgba(6,5,5,.88) 8%,rgba(6,5,5,.68) 48%,rgba(6,5,5,.84))}
}

/* ---- la mesure de lecture ----
   Une seule variable pour toute la colonne d'article. La couverture est la
   seule a s'en affranchir, d'un cran, pour donner de l'air au premier ecran. */
:root{--lecture:74ch;--lecture-large:96ch}

/* ---- fil d'Ariane ---- */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;
 color:var(--gris);margin-bottom:22px}
.fil a{color:var(--gris);text-decoration:none;border-bottom:1px solid transparent;
 transition:color .4s var(--ressort),border-color .4s var(--ressort)}
.fil a:hover{color:var(--or);border-bottom-color:var(--fil-or)}
.fil span[aria-hidden]{color:var(--fil-or)}

/* ---- en-tete d'article ---- */
.meta-art{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
 font-size:.88rem;color:var(--gris);margin-top:14px}
.meta-art > span + span::before{content:"·";color:var(--fil-or);
 margin-right:10px}

.couv-art{max-width:var(--lecture-large);margin:0 auto 38px;border:1px solid var(--fil-or);border-radius:var(--r-xl);
 overflow:hidden;padding:6px;background:rgba(var(--or-rgb),.05)}
.couv-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;
 object-fit:cover;border-radius:calc(var(--r-xl) - 6px)}

/* ---- corps de l'article ----
   Le contenu vient de la Batcave : H2, H3, paragraphes, listes, widgets.
   La largeur de ligne est bornee ici et non sur `p`, pour que les widgets
   pleine largeur puissent s'en affranchir. */
.prose{max-width:var(--lecture);margin-inline:auto}
.prose > h2{font-family:'Clash Display';font-size:clamp(1.65rem,5vw,2.3rem);
 line-height:1.16;margin:52px 0 16px;letter-spacing:-.01em;scroll-margin-top:120px}
.prose > h3{font-family:'Clash Display';font-size:clamp(1.2rem,3.6vw,1.5rem);
 margin:34px 0 12px}
.prose > p{font-size:1.06rem;line-height:1.72;margin-bottom:18px;max-width:none}
.prose > ul,.prose > ol{margin:0 0 20px 0;padding-left:22px}
.prose > ul li,.prose > ol li{font-size:1.04rem;line-height:1.68;color:var(--gris);
 margin-bottom:9px}
.prose > ul li::marker{color:var(--or)}
.prose > blockquote{margin:26px 0;padding:2px 0 2px 22px;
 border-left:2px solid var(--fil-or);font-size:1.1rem;color:var(--texte)}
.prose a{color:var(--or);text-decoration:none;border-bottom:1px solid var(--fil-or)}
.prose a:hover{border-bottom-color:var(--or)}
.prose img{max-width:100%;height:auto;border-radius:var(--r-l);display:block;
 margin:26px 0}

/* ---- sommaire ----
   Construit en JS depuis les H2 reellement presents ; masque s'il n'y en a pas.
   Un sommaire vide vaut moins que pas de sommaire. */
.somm-art{max-width:var(--lecture);margin:0 auto 40px;padding:20px 24px;border:1px solid var(--fil);
 border-radius:var(--r-l);background:rgba(var(--or-rgb),.04)}
.somm-art[hidden]{display:none}
.somm-art strong{display:block;font-size:11.5px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--or-terne);margin-bottom:12px}
.somm-art ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.somm-art a{color:var(--gris);text-decoration:none;font-size:.98rem;
 border-bottom:1px solid transparent}
.somm-art a:hover{color:var(--or);border-bottom-color:var(--fil-or)}

/* ---- bloc auteur ----
   Point 4 du standard : affiche par le SITE, jamais ecrit dans l'article. */
.bloc-auteur{max-width:var(--lecture);margin:52px auto 0;padding:26px 28px;border:1px solid var(--fil-or);
 border-radius:var(--r-xl);background:rgba(var(--or-rgb),.05);
 display:flex;gap:22px;align-items:flex-start}
/*  LE PORTRAIT, ajoute le 02/10/2026. Une photo vraie du dirigeant vaut mieux
    qu'un bloc de texte signe : c'est ce que les moteurs lisent comme un signal
    d'auteur, et ce qu'un lecteur regarde en premier. Elle est servie en 480 px
    et affichee en 96, pour tenir sur les ecrans a forte densite.  */
.bloc-auteur .ba-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;
 flex:0 0 auto;border:1px solid var(--fil-or)}
@media(max-width:640px){
  .bloc-auteur{gap:16px;padding:22px}
  .bloc-auteur .ba-photo{width:72px;height:72px}
}
.bloc-auteur .ba-cle{display:block;font-size:11.5px;letter-spacing:.2em;
 text-transform:uppercase;color:var(--or-terne);font-weight:600;margin-bottom:8px}
.bloc-auteur h3{font-family:'Clash Display';font-size:1.32rem;margin-bottom:8px}
.bloc-auteur p{font-size:.98rem;line-height:1.62;margin-bottom:0}
/* Deux liens depuis le 07/10/2026, « Nous contacter » et le profil LinkedIn :
   il faut un ecart entre eux, et qu'ils passent a la ligne plutot que de
   deborder sur un telephone etroit. */
.bloc-auteur .ba-lien{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px}
.bloc-auteur .ba-lien a{color:var(--or);text-decoration:none;font-weight:600;
 font-size:.94rem;border-bottom:1px solid var(--fil-or)}

/* ---- liste d'articles ---- */
.grille-articles{display:grid;gap:20px}
@media(min-width:760px){.grille-articles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.grille-articles{grid-template-columns:repeat(3,1fr)}}

.carte-art{border:1px solid var(--fil);border-radius:var(--r-xl);overflow:hidden;
 background:linear-gradient(168deg,var(--coeur),var(--nuit));
 transition:transform .7s var(--ressort),border-color .7s var(--ressort)}
.carte-art:hover{transform:translateY(-6px);border-color:var(--fil-or)}
.carte-art > a{display:flex;flex-direction:column;height:100%;text-decoration:none;
 color:inherit}
.ca-img{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--coeur)}
.ca-img img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform 1.1s var(--ressort)}
.carte-art:hover .ca-img img{transform:scale(1.04)}
.ca-corps{display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;flex:1}
.ca-cle{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--or-terne);font-weight:600}
.ca-corps h2{font-family:'Clash Display';font-size:1.22rem;line-height:1.24;
 margin:0;color:var(--texte)}
.ca-ext{font-size:.94rem;line-height:1.6;color:var(--gris);flex:1}
.ca-date{font-size:.82rem;color:var(--gris)}

/* ---- pastilles de categorie ---- */
.chips-cat{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.chips-cat .chip{display:inline-flex;align-items:center;min-height:38px;
 padding:0 16px;border-radius:999px;border:1px solid var(--fil);
 font-size:.9rem;color:var(--gris);text-decoration:none;
 transition:color .45s var(--ressort),border-color .45s var(--ressort),
            background .45s var(--ressort)}
.chips-cat .chip:hover{color:var(--or);border-color:var(--fil-or)}
.chips-cat .chip.actif{color:var(--or);border-color:var(--fil-or);
 background:rgba(var(--or-rgb),.09)}

/* ---- pagination ---- */
.pagination-art{margin-top:42px}
.pagination-art .nav-links{display:flex;flex-wrap:wrap;gap:8px;
 align-items:center;justify-content:center}
.pagination-art .page-numbers{display:inline-flex;align-items:center;
 justify-content:center;min-width:42px;min-height:42px;padding:0 12px;
 border-radius:999px;border:1px solid var(--fil);color:var(--gris);
 text-decoration:none;font-size:.94rem}
.pagination-art .page-numbers:hover{color:var(--or);border-color:var(--fil-or)}
.pagination-art .page-numbers.current{color:var(--sur-or);background:var(--or);
 border-color:var(--or);font-weight:600}
/*  LA PAGE COURANTE SUR FOND CLAIR. Troisieme fois que ce motif se presente
    sur ce chantier : `--or` vaut un or FONCE dans les sections claires, fait
    pour etre lu comme texte, et il donne un fond brun. La feuille du site a
    une variante `section.clair` pour chacun de ses boutons ; on fait pareil.
    La liste du blog etant une section claire, la pastille de la page courante
    sortait brune. Vu par Mounir le 02/10.  */
section.clair .pagination-art .page-numbers.current{
 background:rgb(var(--or-rgb));border-color:rgb(var(--or-rgb))}