/* =========================================================================
   Alma — feuille de style unique
   Charte officielle Studio LPC (22/07/2026). Aucun build : CSS écrit à la main.

   ⚠️ RÈGLE DE CONTRASTE NON NÉGOCIABLE
   ARGENT (#8C9093) sur IVOIRE (#F4F5EF) = 2,9:1 → échoue WCAG AA, même en gros.
   ARGENT et BRUME sont des couleurs de SURFACE et de FILET, jamais de texte.
   Tout texte secondaire utilise --texte-2 (#5C6064, 5,8:1).
   Cible 37-55 ans : la lisibilité passe avant l'effet.
   ========================================================================= */

/* ---- Ubuntu auto-hébergée (charte : corps de texte) --------------------- */
@font-face{font-family:Ubuntu;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/ubuntu-300-latin.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ubuntu-400-latin.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/ubuntu-500-latin.woff2) format('woff2')}

:root{
  /* Couleurs de référence de la charte */
  --charbon:#202024;
  --argent:#8C9093;
  --brume:#BBBBBB;
  --ivoire:#F4F5EF;

  /* Dérivés (hors charte, imposés par l'accessibilité) */
  --texte-2:#5C6064;      /* texte secondaire lisible sur ivoire */
  --filet:#DDDDD8;        /* filet discret, plus doux que BRUME sur ivoire */
  --surface:#FFFFFF;

  /* Ubuntu par défaut (charte). Les variables --gh-font-* sont injectées par Ghost
     si un jour une police est choisie dans Réglages → Design → Typographie : le thème
     la respecte alors sans redéploiement. C'est aussi le point d'entrée le jour où
     Studio LPC fournira « Times Sans Serif » avec une licence webfont. */
  --font-body:var(--gh-font-body,Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  --font-heading:var(--gh-font-heading,var(--font-body));
  --font:var(--font-body);

  --wrap:72rem;
  --wrap-narrow:42rem;
  --pad:1.5rem;

  --step:clamp(3rem,7vw,5.5rem);   /* rythme vertical des sections */
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--charbon);
  font-family:var(--font);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--charbon);color:var(--ivoire);
  padding:.75rem 1rem;z-index:100}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--charbon);outline-offset:3px}

/* ---- Gabarit ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

/* Colonne de lecture. Elle occupe la même gouttière que .wrap et contraint ses
   enfants : le texte s'aligne donc à GAUCHE sur le logo et sur les têtes de page,
   au lieu de flotter au centre. Une image en pleine largeur reste possible en
   utilisant .wrap — les deux partent du même bord. */
.wrap-narrow{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow > *{max-width:var(--wrap-narrow)}
.section{padding-block:var(--step)}
.section-alt{background:var(--surface);border-block:1px solid var(--filet)}

/* ---- Typographie -------------------------------------------------------- */
.eyebrow{
  margin:0 0 1rem;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.28em;      /* signature typographique de la charte */
  text-transform:uppercase;
  color:var(--texte-2);
}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;line-height:1.15;margin:0;
  text-wrap:balance}

.hero-title{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);letter-spacing:-.015em}
.page-title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);letter-spacing:-.012em}
.section-title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);letter-spacing:-.01em}
.article-title{font-size:clamp(1.8rem,1.3rem + 2.4vw,2.8rem);letter-spacing:-.012em}

.hero-text,.page-lead,.section-lead,.article-lead{
  margin:1.25rem 0 0;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.65;
  color:var(--texte-2);
  text-wrap:pretty;
}
.article-lead{color:var(--texte-2)}

.empty{color:var(--texte-2);font-style:italic}

/* ---- Boutons ------------------------------------------------------------ */
.btn{
  display:inline-block;
  padding:.8rem 1.5rem;
  border:1px solid var(--charbon);
  border-radius:var(--radius);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn-solid{background:var(--charbon);color:var(--ivoire)}
.btn-solid:hover{background:#000}
.btn-quiet{background:transparent;color:var(--charbon)}
.btn-quiet:hover{background:var(--charbon);color:var(--ivoire)}
.btn-invert{background:var(--ivoire);color:var(--charbon);border-color:var(--ivoire)}
.btn-invert:hover{background:#fff}

.link-arrow{color:var(--charbon);text-decoration:none;border-bottom:1px solid var(--brume);
  padding-bottom:2px;font-size:.9375rem}
.link-arrow:hover{border-bottom-color:var(--charbon)}
.link-arrow::after{content:" →"}

/* ---- En-tête ------------------------------------------------------------ */
.site-header{border-bottom:1px solid var(--filet);background:var(--ivoire);
  position:sticky;top:0;z-index:50}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:4.5rem}

.logotype{display:inline-flex;align-items:center;text-decoration:none}
.logotype img{width:auto;height:2.25rem}
.logotype-text{font-size:1.5rem;letter-spacing:.02em}

.site-nav{display:flex;align-items:center;gap:2rem}
.nav-list{display:flex;align-items:center;gap:1.75rem;list-style:none;margin:0;padding:0}
.nav-item a{font-size:.9375rem;text-decoration:none;color:var(--charbon);
  padding-bottom:2px;border-bottom:1px solid transparent}
.nav-item a:hover,.nav-item.is-current a{border-bottom-color:var(--charbon)}
.nav-account{display:flex;align-items:center;gap:.75rem}
.nav-account .btn{padding:.55rem 1.1rem;font-size:.8125rem}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle-bar{display:block;width:22px;height:1px;background:var(--charbon);position:relative}
.nav-toggle-bar::before,.nav-toggle-bar::after{content:"";position:absolute;left:0;width:22px;
  height:1px;background:var(--charbon)}
.nav-toggle-bar::before{top:-7px}
.nav-toggle-bar::after{top:7px}

@media (max-width:60rem){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:1.25rem;
    background:var(--ivoire);border-bottom:1px solid var(--filet);
    padding:1.5rem var(--pad) 2rem;
    display:none;
  }
  .site-nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:1rem}
  .nav-account{flex-direction:column;align-items:stretch}
  .nav-account .btn{text-align:center}
}

/* ---- Hero --------------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem);border-bottom:1px solid var(--filet)}
/* pas de margin auto ici : le hero s'aligne à gauche sur le logo de l'en-tête */
.hero-inner{max-width:46rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}

/* ---- Têtes de page ------------------------------------------------------ */
.page-head{padding-block:clamp(3rem,7vw,5rem) 0}
.page-head .page-lead{max-width:42rem}
/* Gabarit « pilier » : le corps suit directement la tête de page. Sans respiration,
   le chapô et le premier paragraphe se lisent comme un seul bloc. */
.page-head + .article-body{padding-top:clamp(1.75rem,4vw,2.5rem)}
/* Idem quand une image mise en avant s'intercale entre les deux : sans cette
   seconde règle, le sélecteur adjacent ci-dessus ne s'applique plus. */
.page-media + .article-body{padding-top:clamp(1.75rem,4vw,2.5rem)}

/* ---- Sections ----------------------------------------------------------- */
.section-head{max-width:42rem;margin-bottom:2.75rem}
.section-more{margin-top:2.5rem}

/* ---- Les 5 piliers ------------------------------------------------------ */
.piliers{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--filet);
  border:1px solid var(--filet);border-radius:var(--radius);overflow:hidden}
@media (min-width:48rem){.piliers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.piliers{grid-template-columns:repeat(5,1fr)}}
.pilier{background:var(--ivoire)}
.pilier a{display:block;height:100%;padding:1.75rem 1.5rem 2rem;text-decoration:none;
  transition:background .18s ease}
.pilier a:hover{background:var(--surface)}
.pilier-num{display:block;font-size:.6875rem;letter-spacing:.24em;color:var(--texte-2);
  margin-bottom:1rem}
.pilier-title{font-size:1.1875rem;margin-bottom:.5rem}
.pilier-text{margin:0;font-size:.875rem;line-height:1.6;color:var(--texte-2)}

/* ---- Grilles et cartes -------------------------------------------------- */
.grid{display:grid;gap:2rem}
@media (min-width:40rem){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{border:1px solid var(--filet);border-radius:var(--radius);background:var(--ivoire);
  overflow:hidden;transition:border-color .18s ease}
.card:hover{border-color:var(--charbon)}
.card-link{display:block;text-decoration:none;height:100%}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1.5rem}
.card-kicker{margin:0 0 .75rem;font-size:.6875rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-2)}
.card-title{font-size:1.1875rem;margin-bottom:.625rem}
.card-excerpt{margin:0;font-size:.9375rem;line-height:1.6;color:var(--texte-2)}
.card-meta{margin:1.25rem 0 0;font-size:.75rem;color:var(--texte-2)}
.card-dot{margin-inline:.4rem}

/* ---- Bandeau d'appel ---------------------------------------------------- */
.section-cta{padding-block:0}
.cta-band{background:var(--charbon);color:var(--ivoire);border-radius:var(--radius);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,4rem);text-align:center;
  margin-block:var(--step)}
.cta-title{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.cta-text{margin:1rem auto 2rem;max-width:34rem;color:#D9DAD4;line-height:1.65}

/* ---- Article ------------------------------------------------------------ */
.article{padding-block:clamp(3rem,7vw,5rem) 0}
.article-head{margin-bottom:2.5rem}
.article-meta{margin:1.5rem 0 0;font-size:.8125rem;color:var(--texte-2)}
/* Images mises en avant (pages, piliers, formations).
   Le cadrage est imposé ICI, pas laissé au fichier fourni : une photo prise au
   téléphone est verticale (3:4) et occupait sinon plus d'un écran de haut avant
   le premier mot. Ratio panoramique + object-fit:cover → on garde le sujet, on
   perd le vide. Pour recadrer autrement, c'est l'image qu'on change, pas le CSS. */
.article-media,.page-media{margin:0 auto 3rem}
.article-media img,.page-media img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
  max-height:32rem;border-radius:var(--radius);background:var(--brume);
}
.article-media figcaption,.page-media figcaption{margin-top:.75rem;font-size:.8125rem;
  color:var(--texte-2);text-align:center}
/* Sous la tête de page, l'image a besoin d'air au-dessus. */
.page-head + .page-media{margin-top:clamp(2rem,5vw,3rem)}
@media (max-width:40rem){
  .article-media img,.page-media img{aspect-ratio:4/3;max-height:20rem}
}
.article-body{padding-bottom:var(--step)}

/* ---- Contenu produit par l'éditeur Ghost -------------------------------- */
.post-content{font-size:1.0625rem;line-height:1.8}
/* Rythme entre blocs. À 1,5rem pour une interligne de 1,8, la coupure entre deux
   paragraphes se voyait mal et le texte se lisait comme un bloc — c'est ce
   qu'Anaïs a signalé le 12/08. 1,75rem sépare franchement sans aérer à l'excès. */
.post-content > * + *{margin-top:1.75rem}
.post-content h2{font-size:clamp(1.375rem,1.2rem + 1vw,1.75rem);margin-top:3rem}
.post-content h3{font-size:1.1875rem;margin-top:2.25rem}
.post-content p{margin-block:0}
.post-content a{color:var(--charbon);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--brume)}
.post-content a:hover{text-decoration-color:var(--charbon)}
.post-content ul,.post-content ol{padding-left:1.25rem}
.post-content li + li{margin-top:.5rem}
.post-content blockquote{margin:2rem 0;padding-left:1.5rem;border-left:2px solid var(--brume);
  color:var(--texte-2);font-style:italic}
.post-content hr{border:0;border-top:1px solid var(--filet);margin-block:3rem}
.post-content img{border-radius:var(--radius)}
.post-content figcaption{margin-top:.75rem;font-size:.8125rem;color:var(--texte-2);
  text-align:center}
.post-content code{background:var(--surface);border:1px solid var(--filet);
  border-radius:var(--radius);padding:.1em .35em;font-size:.9em}
.post-content .kg-card{margin-block:2.5rem}
.post-content .kg-width-wide{max-width:56rem;margin-inline:auto}
.post-content .kg-width-full{max-width:none}

/* ---- Paywall membres (partials/content-cta.hbs) -------------------------
   Le bloc sort de la colonne de lecture (calée à gauche) pour se centrer dans
   la page : c'est une rupture assumée, pas un défaut d'alignement.
   `margin-inline:auto` a besoin d'un max-width explicite pour opérer. */
.alma-gate{
  max-width:34rem;
  margin:clamp(2.5rem,6vw,3.5rem) auto 0;
  padding:clamp(2rem,5vw,2.75rem) clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--filet);
  border-radius:var(--radius);
  background:var(--surface);
  text-align:center;
}
.alma-gate-title{font-size:clamp(1.375rem,1.2rem + .8vw,1.625rem);margin-bottom:.875rem}
.alma-gate-text{
  margin:0 auto 1.75rem;
  max-width:30rem;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--texte-2);
  text-wrap:pretty;
}
.alma-gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:0}

.alma-gate-form{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin:0}

/* Leurre anti-robot : invisible et hors flux, mais volontairement PAS en
   `display:none` — les robots un peu sérieux ignorent les champs masqués ainsi.
   Sorti de l'écran, il reste « remplissable » par un script qui lit le DOM. */
.alma-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.alma-gate-input{
  flex:1 1 16rem;
  min-width:0;                     /* sans ça, un flex item refuse de rétrécir sur mobile */
  padding:.8rem 1rem;
  border:1px solid var(--brume);
  border-radius:var(--radius);
  background:var(--ivoire);
  color:var(--charbon);
  font-family:inherit;
  font-size:1rem;                  /* < 16px déclenche un zoom automatique sur iOS */
}
.alma-gate-input::placeholder{color:var(--texte-2);opacity:1}
.alma-gate-input:focus-visible{border-color:var(--charbon);outline-offset:1px}
.alma-gate-submit{flex:0 0 auto;cursor:pointer}

/* États posés par Ghost sur le <form> : tout se joue en CSS, sans JavaScript. */
.alma-gate-error{
  flex:1 0 100%;
  margin:.5rem 0 0;
  font-size:.875rem;
  color:#8A2B2B;                   /* 6,4:1 sur --surface : lisible, pas décoratif */
}
.alma-gate-form.loading .alma-gate-submit{opacity:.6;pointer-events:none}

/* Succès : le champ et le bouton cèdent la place au message de confirmation. */
.alma-gate-sent{
  display:none;
  flex:1 0 100%;
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--charbon);
}
.alma-gate-form.success .alma-gate-input,
.alma-gate-form.success .alma-gate-submit{display:none}
.alma-gate-form.success .alma-gate-sent{display:block}

.alma-gate-note{
  margin:1.25rem auto 0;
  max-width:28rem;
  font-size:.75rem;
  line-height:1.55;
  color:var(--texte-2);
  text-wrap:pretty;
}

/* ---- Formation : lecteur, achat, accès ---------------------------------- */
.formation{margin-block:1rem}
.formation-loading{color:var(--texte-2);font-style:italic;margin:0}

.player{position:relative;width:100%;aspect-ratio:16/9;background:var(--charbon);
  border-radius:var(--radius);overflow:hidden}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.buy-box,.gate,.account-box{
  border:1px solid var(--filet);border-radius:var(--radius);background:var(--surface);
  padding:clamp(1.75rem,4vw,2.5rem);
}
.buy-title,.gate-title,.account-title{font-size:1.375rem;margin-bottom:.75rem}
.buy-text,.gate-text{margin:0 0 1.75rem;color:var(--texte-2);line-height:1.65}
.buy-price{display:block;font-size:2rem;font-weight:400;margin-bottom:.25rem}
.buy-price-note{font-size:.8125rem;color:var(--texte-2);margin:0 0 1.75rem}
.buy-actions,.gate-actions,.account-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.buy-error{color:#8A2B2B;font-size:.9375rem;margin-top:1rem}

.account-box{margin-top:2.5rem}
.account-email{color:var(--texte-2);margin:0 0 1.5rem}

/* ---- Catalogue des formations (gabarit custom-formations) --------------- */
.formation-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.formation-card{border:1px solid var(--filet);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;display:grid}
.formation-card-media{display:block}
.formation-card-media img{display:block;width:100%;height:100%;aspect-ratio:16/9;
  object-fit:cover;background:var(--brume)}
.formation-card-body{padding:clamp(1.5rem,3vw,2rem)}
.formation-card-title{font-size:1.375rem;margin:0 0 .6rem}
.formation-card-title a{color:inherit;text-decoration:none}
.formation-card-title a:hover{text-decoration:underline}
.formation-card-text{margin:0 0 1.25rem;color:var(--texte-2);line-height:1.65}
.formation-card-price{margin:0 0 1.5rem;font-size:1.25rem}
.formation-card-note{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--texte-2)}
.formation-card-actions{margin:0}
@media (min-width:48rem){
  /* L'affiche à gauche, le texte à droite — plus lisible qu'une carte empilée
     quand le résumé fait trois lignes. */
  .formation-card:has(.formation-card-media){grid-template-columns:minmax(0,18rem) 1fr}
}

/* ---- Mes formations ----------------------------------------------------- */
.mes-formations{margin-bottom:1rem}
.mine-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.mine-item{border:1px solid var(--filet);border-radius:var(--radius);background:var(--surface);
  padding:1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem}
.mine-title{font-size:1.125rem;margin:0}
.mine-meta{margin:.35rem 0 0;font-size:.8125rem;color:var(--texte-2)}

/* ---- Contact (gabarit custom-contact) ----------------------------------- */
.contact-form{margin-top:clamp(2rem,5vw,3rem)}
.contact-form iframe{display:block;width:100%;border:0}
.contact-fallback{margin:0}
/* Filet de sécurité : hauteur imposée quand embed.js n'a pas redimensionné l'iframe
   (cas constaté en production, cf. le commentaire de custom-contact.hbs).
   ⚠️ Calée sur le formulaire ACTUEL (5 champs), par mesure JS le 30/07/2026 :
   bas du bouton à 657 px au repos, et 747 px (desktop) / 801 px (300 px de large)
   quand les 6 messages de validation s'affichent — c'est ce PIRE CAS qui dimensionne.
   À réajuster si on ajoute ou retire un champ dans Tally : sinon bouton coupé en bas,
   ou grand vide sous le formulaire. */
.contact-form iframe.secours{height:800px}
@media (max-width:30rem){.contact-form iframe.secours{height:860px}}

/* ---- Pied de page ------------------------------------------------------- */
.site-footer{border-top:1px solid var(--filet);background:var(--surface);
  padding-block:clamp(2.5rem,6vw,4rem)}
.footer-top{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--filet)}
@media (min-width:48rem){.footer-top{grid-template-columns:1fr auto;align-items:start;gap:4rem}}
.footer-baseline{margin:0;font-size:1.125rem;max-width:22rem;line-height:1.5}
.footer-signature{margin:1rem 0 0;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-2)}
.footer-signature strong{font-weight:500;color:var(--charbon)}
.footer-heading{margin:0 0 .5rem;font-size:.6875rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--texte-2)}
.footer-note{margin:0 0 1.25rem;font-size:.9375rem;color:var(--texte-2);max-width:22rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:1.75rem 0 0;
  font-size:.8125rem;color:var(--texte-2)}
.footer-legal a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:1px}
.footer-legal a:hover{border-bottom-color:var(--charbon)}
@media (max-width:30rem){.footer-legal{flex-direction:column;gap:.75rem}}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-top:1.25rem;font-size:.8125rem;color:var(--texte-2)}
.footer-copy{margin:0}
.footer-social{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.footer-social a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:1px}
.footer-social a:hover{border-bottom-color:var(--charbon)}

/* ---- Pagination --------------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--filet);font-size:.875rem}
.pagination a{text-decoration:none;border-bottom:1px solid var(--brume);padding-bottom:2px}
.pagination a:hover{border-bottom-color:var(--charbon)}
.page-number{color:var(--texte-2)}