/*
Theme Name: Origen Verre
Theme URI: https://origenverre.fr
Description: Thème WordPress sur mesure pour Origen Verre — Fran Retamales, artisane verrière (verre fusionné / fusing) à Guipry-Messac. Site vitrine : galerie de créations (déco, art de la table, lampes, bijoux), actualité de l'atelier (billets et agenda) et formulaire de contact. Aucun plugin requis.
Author: Milla Communication
Author URI: https://milla-communication.com
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: origen-verre
Tags: custom-menu, custom-logo, featured-images, translation-ready, two-columns, right-sidebar, portfolio, blog
*/

/* ============================================================
   Origen Verre — charte graphique officielle (Milla Communication)
   Palette : sarcelle profond, turquoise, vert sauge, or — sur fond crème
   Typographies : Cinzel (titres et nom de marque) + Montserrat (texte courant)
   ============================================================ */

:root {
  /* ---- Palette officielle ---- */
  --teal: #0F5964;         /* bleu sarcelle profond — PRINCIPALE : textes, titres, fonds foncés */
  --turquoise: #17808D;    /* turquoise — SECONDAIRE : liens, accents, survols */
  --sauge: #7FAE93;        /* vert sauge — touche naturelle, éléments décoratifs */
  --or: #D8A23A;           /* or — accent premium : CTA, tagline, séparateurs, détails */

  /* ---- Couleurs de support (relevées sur les fichiers officiels du logo) ---- */
  --creme: #F9F4EE;        /* fond général du site */
  --creme-2: #F1EAE0;      /* fonds de section alternés (.fond-2) */
  --blanc: #ffffff;        /* fond des cartes */
  --encre: #0F5964;        /* texte principal — identique à --teal */
  --gris: #4A5A5C;         /* gris-ardoise — texte courant secondaire, lisible sur crème */

  /* ---- Déclinaisons de service (dérivées de la palette) ---- */
  --or-clair: #E5B45A;     /* survol des boutons or : s'éclaircit, le texte teal reste lisible */
  --sauge-pale: #E8F0EA;   /* fonds doux : étiquettes, pictos, encadrés */
  --sable: #F3E7CE;        /* bandeau d'information de la maquette */
  --creme-attenue: rgba(249, 244, 238, .78);  /* texte courant sur fond teal */
  --creme-voile: rgba(249, 244, 238, .12);    /* aplats discrets sur fond teal */
  --bordure: rgba(15, 89, 100, .16);
  --bordure-forte: rgba(15, 89, 100, .28);
  --ombre-1: rgba(74, 90, 92, .18);   /* ombres neutres et douces (plus de bleu) */
  --ombre-2: rgba(74, 90, 92, .24);
  --ombre-3: rgba(15, 89, 100, .26);

  /* ---- Typographies ---- */
  --serif: "Cinzel", "Times New Roman", Georgia, serif;     /* titres / nom de marque UNIQUEMENT */
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;  /* texte courant */

  --blob-1: 58% 42% 55% 45% / 52% 48% 52% 48%;
  --blob-2: 44% 56% 48% 52% / 55% 42% 58% 45%;
  --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--encre);
  background: var(--creme);
  line-height: 1.65;
  font-size: 1.0rem;
  font-weight: 400;
}
img { max-width: 100%; display: block; }
a { color: var(--turquoise); text-decoration: none; }
a:hover { color: var(--teal); }

/* Cinzel est une capitale romaine : réservée aux titres, graisse 400-500,
   léger interlettrage positif, jamais de text-transform par-dessus. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.25; letter-spacing: .015em; color: var(--teal); }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.25rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
section { padding: 4.5rem 0; }
.section-titre { margin-bottom: 2.2rem; }
.section-titre .surtitre {
  display: inline-block; font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; font-weight: 700;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 244, 238, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .8rem; padding-bottom: .8rem;
}
.logo { display: flex; align-items: center; gap: .6rem; color: var(--encre); }
/* Le logo officiel est une image carrée (symbole + nom + tagline) servie en 2x :
   fichier de 560 px affiché à 64 px de haut — la hauteur prévue par la charte pour un
   en-tête horizontal (« environ 64 px, 72 px max »). Les ~12 % de marge transparente
   incluses dans le fichier assurent la zone de respiration exigée : ne rien ajouter. */
.logo img { height: 88px; width: auto; display: block; }
/* Anciennes règles neutralisées : le logo SVG dessiné à la main n'est pas le logo de la marque
   et l'image contient déjà le nom — on ne le répète pas en texte à côté. */
.logo svg { display: none; }
.logo .logo-nom {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; padding: 0; position: absolute;
  white-space: nowrap; word-wrap: normal;
}
.nav { display: flex; gap: 1.6rem; align-items: center; }
.nav a { color: var(--encre); font-weight: 600; font-size: .95rem; position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--or); transition: width .25s; border-radius: 2px;
}
.nav a:hover::after, .nav a.actif::after { width: 100%; }
.nav a:hover { color: var(--turquoise); }
.nav a.actif { color: var(--turquoise); }
/* .nav a (spécificité 0,1,1) l'emportait sur .btn (0,1,0) et rabaissait le bouton
   de l'en-tête à 600 : la charte impose un texte teal GRAS sur l'or, on le restaure. */
.nav .btn { color: var(--teal); font-weight: 700; }
.nav .btn::after { display: none; }
.burger { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.burger span { display: block; width: 24px; height: 2px; background: var(--teal); margin: 5px 0; transition: .3s; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; background: var(--or); color: var(--teal);
  padding: .75rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  border: 2px solid var(--or); transition: .25s; cursor: pointer; font-family: var(--sans);
}
.btn:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--teal); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-ghost:hover { background: var(--teal); border-color: var(--teal); color: var(--creme); }

/* Focus visible sur tous les éléments interactifs */
a:focus-visible, .btn:focus-visible, .btn-ghost:focus-visible,
.filtres button:focus-visible, .burger:focus-visible, .sociaux a:focus-visible {
  outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 5.5rem 0 4.5rem; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero-texte .accroche { font-size: 1.15rem; color: var(--gris); margin: 1.2rem 0 1.8rem; max-width: 34em; }
.hero-visuel img {
  border-radius: var(--blob-1); aspect-ratio: 1 / 1; object-fit: cover;
  box-shadow: 0 24px 60px -24px var(--ombre-3);
}
.hero-blob {
  position: absolute; z-index: -1; opacity: .5; pointer-events: none;
}
.hero .cta-groupe { display: flex; gap: .9rem; flex-wrap: wrap; }

/* ---------- Cartes catégories ---------- */
.grille-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.carte-cat { background: var(--blanc); border-radius: 18px; overflow: hidden; color: var(--encre);
  box-shadow: 0 10px 30px -18px var(--ombre-1); transition: .25s; display: block; }
.carte-cat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px var(--ombre-3); color: var(--encre); }
.carte-cat img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.carte-cat .carte-body { padding: 1rem 1.2rem 1.2rem; }
.carte-cat h3 { margin-bottom: .2rem; }
.carte-cat p { font-size: .9rem; color: var(--gris); }
.carte-cat .faux-lien { color: var(--turquoise); font-weight: 700; font-size: .9rem; }

/* ---------- Galerie / fiches ---------- */
.filtres { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filtres button {
  background: var(--blanc); border: 1.5px solid var(--bordure); border-radius: 999px;
  padding: .5rem 1.2rem; font-family: var(--sans); font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: .2s; color: var(--encre);
}
.filtres button:hover { border-color: var(--turquoise); color: var(--turquoise); }
.filtres button.actif { background: var(--teal); border-color: var(--teal); color: var(--creme); }
.grille-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.piece { background: var(--blanc); border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px -18px var(--ombre-1); transition: .25s; }
.piece:hover { transform: translateY(-5px); }
.piece img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.piece .piece-body { padding: 1rem 1.2rem 1.3rem; }
.piece .collection { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.piece p { font-size: .92rem; color: var(--gris); margin-top: .3rem; }
.piece .dispo { display: inline-block; margin-top: .6rem; font-size: .8rem; font-weight: 700;
  background: var(--sauge-pale); color: var(--teal); border-radius: 999px; padding: .15rem .7rem; }

/* ---------- Bandeaux ---------- */
.bandeau { background: var(--teal); color: var(--creme); text-align: center; }
.bandeau h2 { color: var(--creme); margin-bottom: .6rem; }
.bandeau p { color: var(--creme-attenue); max-width: 40em; margin: 0 auto 1.6rem; }
.bandeau .surtitre { color: var(--or); }
.bandeau .btn { background: var(--or); color: var(--teal); border-color: var(--or); }
.bandeau .btn:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--teal); }
.fond-2 { background: var(--creme-2); }

/* ---------- Deux colonnes ---------- */
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.deux-col .visuel img { border-radius: var(--blob-2); aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Actualités ---------- */
.grille-actu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.actu { background: var(--blanc); border-radius: 18px; padding: 1.6rem; box-shadow: 0 10px 30px -18px var(--ombre-1); }
.actu .date { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.actu h3 { margin: .4rem 0 .5rem; }
.actu p { font-size: .93rem; color: var(--gris); }
.actu .etiquette { display: inline-block; margin-bottom: .7rem; font-size: .78rem; font-weight: 700;
  background: var(--sauge-pale); color: var(--teal); border-radius: 999px; padding: .18rem .8rem; }
.actu.agenda { border-left: 4px solid var(--or); }

/* ---------- Formulaire ---------- */
.formulaire { background: var(--blanc); border-radius: 22px; padding: 2.2rem;
  box-shadow: 0 14px 40px -20px var(--ombre-2); }
.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-family: var(--sans); font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--encre); }
.champ input, .champ textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--bordure);
  border-radius: 12px; font-family: var(--sans); font-size: 1rem; background: var(--creme);
  color: var(--encre);
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--turquoise); outline-offset: 1px; border-color: transparent; }
.champ textarea { min-height: 140px; resize: vertical; }
.rgpd { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--gris); margin-bottom: 1.4rem; }
.rgpd input { margin-top: .25rem; width: auto; }
.rgpd input:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

/* ---------- Infos contact ---------- */
.info-bloc { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.info-bloc .picto { flex: none; width: 44px; height: 44px; border-radius: var(--blob-1);
  background: var(--sauge-pale); color: var(--teal); display: grid; place-items: center; }
.info-bloc h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.info-bloc p { font-size: .95rem; color: var(--gris); }
.carte-map { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px var(--ombre-2); }
.carte-map iframe { display: block; width: 100%; height: 380px; border: 0; }

table.horaires { border-collapse: collapse; font-size: .95rem; }
table.horaires td { padding: .3rem 1.2rem .3rem 0; color: var(--gris); }
table.horaires td:first-child { font-weight: 600; color: var(--encre); }

/* ---------- Avis ---------- */
.grille-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.avis { background: var(--blanc); border-radius: 18px; padding: 1.5rem; box-shadow: 0 10px 30px -18px var(--ombre-1); }
.avis .etoiles { color: var(--or); letter-spacing: .1em; margin-bottom: .5rem; }
.avis p { font-size: .92rem; color: var(--gris); font-style: italic; }
.avis .auteur { margin-top: .8rem; font-weight: 700; font-size: .88rem; font-style: normal; color: var(--encre); }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal); color: var(--creme-attenue); padding: 3.5rem 0 2rem; margin-top: 0; }
.site-footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; }
.site-footer h4 { color: var(--creme); margin-bottom: .8rem; font-size: 1.1rem; }
.site-footer a { color: var(--creme-attenue); }
.site-footer a:hover { color: var(--creme); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .45rem; font-size: .93rem; }
/* Déclinaison dorée du logo officiel, sur le fond teal profond du pied de page */
.site-footer .footer-logo img { height: 96px; width: auto; display: block; }
.footer-logo { font-family: var(--serif); font-size: 1.4rem; letter-spacing: .015em; color: var(--creme); margin-bottom: .4rem; }
.footer-logo em { font-style: normal; color: var(--or); }
.footer-bas { max-width: var(--maxw); margin: 2.5rem auto 0; padding: 1.2rem 1.25rem 0;
  border-top: 1px solid var(--creme-voile); font-size: .82rem; display: flex;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sociaux { display: flex; gap: .8rem; margin-top: 1rem; }
.sociaux a { width: 38px; height: 38px; border-radius: 50%; background: var(--creme-voile);
  display: grid; place-items: center; transition: .2s; }
.sociaux a:hover { background: var(--or); color: var(--teal); }

/* ---------- Bandeau maquette ---------- */
.bandeau-maquette {
  background: var(--sable); color: var(--teal); font-size: .82rem; text-align: center;
  padding: .45rem 1rem; font-weight: 600;
}

/* ---------- Pages légales ---------- */
.page-legale { max-width: 760px; }
.page-legale h2 { margin: 2.2rem 0 .8rem; font-size: 1.35rem; }
.page-legale p, .page-legale li { color: var(--gris); font-size: .97rem; margin-bottom: .8rem; }
.page-legale ul { padding-left: 1.4rem; }
.a-completer { background: var(--sauge-pale); border-left: 4px solid var(--sauge);
  padding: .8rem 1.1rem; border-radius: 0 12px 12px 0; font-size: .9rem; color: var(--teal); }

/* ---------- En-tête de page interne ---------- */
.entete-page { background: var(--creme-2); padding: 3.5rem 0 2.8rem; }
.entete-page p { color: var(--gris); max-width: 42em; margin-top: .8rem; }

/* ---------- Actualité : image en tête de carte (marchés, affiches d'expo) ---------- */
.actu .actu-img { margin: -1.6rem -1.6rem 1.1rem; border-radius: 18px 18px 0 0; overflow: hidden; }
.actu .actu-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.actu .actu-img.affiche img { aspect-ratio: 4 / 5; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap, .deux-col { grid-template-columns: 1fr; }
  .grille-cat { grid-template-columns: repeat(2, 1fr); }
  .grille-galerie, .grille-actu, .grille-avis { grid-template-columns: repeat(2, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .hero-visuel { order: -1; max-width: 420px; }
}
@media (max-width: 640px) {
  /* La charte interdit de descendre sous la taille minimale d'affichage du logo
     « même en mobile » : on conserve donc les 64 px de l'en-tête, sans réduction.
     Hauteur de l'en-tête = .8rem + 64 px + .8rem + 1 px de bordure ≈ 91 px,
     d'où l'offset du menu déroulant ci-dessous. */
  .nav { position: fixed; inset: 0 0 auto 0; top: 115px; background: var(--creme);
    flex-direction: column; padding: 1.5rem; gap: 1.1rem; border-bottom: 1px solid var(--bordure);
    transform: translateY(-130%); transition: transform .3s; align-items: flex-start; }
  .nav.ouvert { transform: translateY(0); }
  .burger { display: block; }
  .grille-galerie, .grille-actu, .grille-avis, .grille-cat { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .site-footer .footer-logo img { height: 84px; }
  section { padding: 3rem 0; }
}

/* ============================================================
   WordPress — classes natives, barre d'admin, messages et pagination
   (ajouts propres à l'intégration ; ne modifient pas la maquette)
   ============================================================ */

/* ---------- Alignements natifs ---------- */
.alignleft {
  float: left; margin: .4rem 1.6rem 1.2rem 0; max-width: 50%;
}
.alignright {
  float: right; margin: .4rem 0 1.2rem 1.6rem; max-width: 50%;
}
.aligncenter {
  display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.2rem;
}
.alignnone { margin: .4rem 0 1.2rem; }
.alignwide, .alignfull { margin: 1.6rem 0; }
.alignleft img, .alignright img, .aligncenter img { border-radius: 14px; }
.clearfix::after, .entry-contenu::after { content: ""; display: table; clear: both; }

/* ---------- Légendes ---------- */
.wp-caption {
  max-width: 100%; margin-bottom: 1.4rem; background: var(--blanc);
  border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px -18px var(--ombre-1);
}
.wp-caption img, .wp-caption a img { width: 100%; height: auto; display: block; }
.wp-caption-text, .wp-caption p.wp-caption-text, figcaption, .wp-element-caption {
  font-size: .85rem; color: var(--gris); text-align: center;
  padding: .7rem 1rem; margin: 0; font-style: italic;
}
figure { margin: 0 0 1.4rem; }
figure img { border-radius: 16px; }

/* ---------- Accessibilité ---------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; padding: 0; position: absolute;
  white-space: nowrap; word-wrap: normal;
}
.screen-reader-text:focus {
  background: var(--blanc); border-radius: 999px; box-shadow: 0 0 2px 2px var(--bordure-forte);
  clip: auto !important; clip-path: none; color: var(--teal); display: block;
  font-size: .9rem; font-weight: 700; height: auto; left: 1rem; line-height: normal;
  padding: .7rem 1.4rem; text-decoration: none; top: 1rem; width: auto; z-index: 100000;
}
.skip-link { position: absolute; }

/* ---------- Article épinglé ---------- */
.sticky { position: relative; }
.sticky::before {
  content: "★"; position: absolute; top: .9rem; right: 1.1rem;
  color: var(--or); font-size: .9rem; line-height: 1;
}

/* ---------- Galeries natives ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.6rem 0 2rem; }
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-item { margin: 0; text-align: center; }
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px;
  box-shadow: 0 10px 30px -18px var(--ombre-1); transition: .25s;
}
.gallery-item img:hover { transform: translateY(-4px); }
.gallery-caption { font-size: .82rem; color: var(--gris); display: block; padding-top: .5rem; }
@media (max-width: 640px) {
  .gallery, .gallery-columns-4, .gallery-columns-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Titres cliquables des cartes (rendu identique à la maquette) ---------- */
.piece h3 a, .actu h3 a, .carte-cat h3 a { color: var(--encre); }
.piece h3 a:hover, .actu h3 a:hover, .carte-cat h3 a:hover { color: var(--turquoise); }
.actu .lieu { margin-top: .5rem; }

/* ---------- Décalage de la barre d'administration ---------- */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 640px) {
  /* 91 px d'en-tête + 46 px de barre d'administration mobile. */
  body.admin-bar .nav { top: 161px; }
}

/* ---------- Messages du formulaire de contact ---------- */
.message-envoi {
  border-radius: 12px; padding: .95rem 1.2rem; margin-bottom: 1.6rem;
  font-size: .92rem; font-weight: 600; border-left: 4px solid transparent;
}
.message-envoi.succes {
  background: #EAF2EC; color: #235741; border-left-color: var(--sauge);
}
.message-envoi.erreur {
  background: #FAEBE5; color: #8A3A22; border-left-color: #C4663F;
}

/* ---------- Pagination (boutons ronds façon .filtres) ---------- */
.pagination, .navigation.pagination, .post-navigation { margin-top: 2.6rem; }
.pagination .nav-links, .nav-links {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.pagination .page-numbers, .nav-links .page-numbers, .nav-links a {
  display: inline-block; background: var(--blanc); border: 1.5px solid var(--bordure);
  border-radius: 999px; padding: .5rem 1.2rem; font-family: var(--sans); font-weight: 600;
  font-size: .9rem; color: var(--encre); transition: .2s; line-height: 1.4;
}
.pagination .page-numbers:hover, .nav-links .page-numbers:hover, .nav-links a:hover {
  border-color: var(--turquoise); color: var(--turquoise);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current {
  background: var(--teal); border-color: var(--teal); color: var(--creme);
}
.pagination .page-numbers.dots, .nav-links .page-numbers.dots {
  background: transparent; border-color: transparent; color: var(--gris);
}
.pagination .page-numbers.dots:hover, .nav-links .page-numbers.dots:hover { color: var(--gris); }