/*
Theme Name: LBADT
Theme URI: https://labonneaffairedutireur.fr/
Author: Benjamin Liegeois
Description: Theme du site La Bonne Affaire du Tireur. Bons plans, petites
  annonces et carte des stands de tir. Systeme de design repris de la maquette
  magazine, contenus propres au site.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: lbadt
*/

/* ------------------------------------------------------------------
   Systeme de design.
   Repris tel quel de la maquette validee : jetons de couleur, echelle
   typographique, en-tete de bureau, en-tete mobile et son tiroir, cartes,
   grilles, pied de page. Les selecteurs sont conserves a l identique pour
   que les gabarits PHP produisent le meme balisage.
   ------------------------------------------------------------------ */


:root {
  --accent: #c8102e;          /* rouge magazine, identite retenue */
  --accent-txt: #a10d25;
  --encre: #0f172a;
  --gris: #475569;
  --gris-clair: #94a3b8;
  --trait: #e2e8f0;
  --fond: #ffffff;
  --fond-alt: #f8fafc;
  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --texte: 'Inter', -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--fond); color:var(--encre); font-family:var(--texte); }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding:0 22px; }

/* ---------- bascule A/B (outil de maquette, absent du site final) ---------- */

/* ---------- chrome ---------- */
.topbar { border-bottom:1px solid var(--trait); font-size:11.5px; color:var(--gris-clair);
  letter-spacing:.6px; text-transform:uppercase; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; height:34px; }
.topbar b { color:var(--accent-txt); font-weight:600; }

header .wrap { display:flex; align-items:center; gap:26px; padding-top:16px; padding-bottom:16px; }
.logo { display:flex; align-items:center; text-decoration:none; }
/* Ce logo porte deux niveaux de texte et un monogramme detaille :
   sous 56 px de haut, la ligne EXPERT et ses filets deviennent illisibles. */
.logo img { height:58px; width:auto; display:block; }
@media (max-width:760px) { .logo img { height:46px; } }
.logo span { font-family:var(--display); font-weight:600; font-size:25px; letter-spacing:.4px;
  text-transform:uppercase; line-height:1; display:block; }
.logo b { font-weight:700; }
.logo em { display:block; font-family:var(--texte); font-style:normal; font-weight:500;
  font-size:9.5px; letter-spacing:1.5px; color:var(--accent-txt); margin-top:4px; }
header nav { margin-left:auto; display:flex; gap:26px; }
header nav a { font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.6px;
  text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; }
header nav a:hover, header nav a.actif { border-color:var(--accent); color:var(--accent-txt); }
.cta-tete { font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.5px;
  text-transform:uppercase; background:var(--accent); color:#fff; padding:11px 18px; border-radius:3px; }
.barre-nav { border-top:1px solid var(--trait); border-bottom:2px solid var(--encre); }

/* ---------- en-tete mobile ----------
   Une seule barre, deux etats. Au repos elle tient sur deux lignes, la
   recherche occupant la seconde. Repliee, la recherche revient dans la ligne
   et le logo cede la place a sa marque. Le basculement se joue sur l ordre
   et la base flex, donc aucun element n est duplique ni remonte dans le DOM. */
.tm { display:none; }
.tiroir, .ti-fond { display:none; }
@media (max-width:900px) {
  header, .barre-nav { display:none; }
  .tm { display:block; position:sticky; top:0; z-index:60; background:#fff;
    border-bottom:1px solid var(--trait); box-shadow:0 1px 0 rgba(15,23,42,.04); }
  .tm-barre { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding:9px 14px 10px; }
  /* cible tactile de 44 px minimum, y compris quand l icone est plus petite */
  .tm-burger { flex:0 0 auto; width:44px; height:44px; margin-left:-10px; border:0;
    background:none; padding:11px 10px; display:flex; flex-direction:column;
    justify-content:space-between; cursor:pointer; }
  .tm-burger span { display:block; height:2.5px; background:var(--encre); border-radius:2px;
    transition:transform .22s, opacity .18s; transform-origin:center; }
  .tm-burger span:nth-child(1) { width:22px; }
  .tm-burger span:nth-child(2) { width:16px; }
  .tm-burger span:nth-child(3) { width:22px; }
  .tm-logo { flex:1 1 auto; display:flex; align-items:center; min-width:0; }
  .tm-plein { height:40px; width:auto; }
  .tm-marque { display:none; height:32px; width:auto; }
  .tm-promo { flex:0 0 auto; font-family:var(--display); font-size:12.5px; font-weight:600;
    letter-spacing:.07em; text-transform:uppercase; background:var(--accent); color:#fff;
    padding:9px 15px; border-radius:999px; }
  .tm-rech { flex:0 0 100%; order:5; display:flex; align-items:center; gap:8px;
    background:#F1F3F6; border:1px solid #E2E7EC; border-radius:999px; padding:0 6px 0 16px; }
  .tm-rech input { flex:1; min-width:0; border:0; background:none; padding:11px 0;
    font-family:var(--texte); font-size:15px; color:var(--encre); }
  .tm-rech input:focus { outline:none; }
  .tm-rech:focus-within { border-color:var(--accent); background:#fff; }
  .tm-rech button { flex:0 0 auto; width:34px; height:34px; border:0; border-radius:50%;
    background:var(--accent); color:#fff; display:flex; align-items:center;
    justify-content:center; cursor:pointer; }
  .tm-rech button svg { width:17px; height:17px; }

  /* etat replie */
  .tm.replie .tm-barre { padding-top:7px; padding-bottom:7px; }
  .tm.replie .tm-plein { display:none; }
  .tm.replie .tm-marque { display:block; }
  .tm.replie .tm-logo { flex:0 0 auto; }
  .tm.replie .tm-promo { display:none; }
  /* flex-basis a 0, et non auto : dans un conteneur a retour a la ligne,
     un element dont la base vaut sa largeur de contenu passe a la ligne
     suivante avant d avoir la moindre chance de retrecir. Avec une base
     nulle il tient toujours dans la ligne puis occupe la place restante.
     min-width:0 reste necessaire pour l input qu il contient. */
  .tm.replie .tm-rech { flex:1 1 0; order:3; min-width:0; }
  .tm.replie .tm-rech input { padding:8px 0; font-size:14px; }
  .tm.replie .tm-rech button { width:30px; height:30px; }

  /* burger en croix quand le tiroir est ouvert */
  body.tiroir-ouvert .tm-burger span:nth-child(1) { transform:translateY(7.5px) rotate(45deg);
    width:22px; }
  body.tiroir-ouvert .tm-burger span:nth-child(2) { opacity:0; }
  body.tiroir-ouvert .tm-burger span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg);
    width:22px; }

  /* ---------- tiroir ---------- */
  /* Le voile est toujours dans la page ; c est pointer-events qui decide s il
     capte les clics. Ne pas le piloter par l attribut hidden : la regle
     display:block ci-dessous l emporterait sur la feuille du navigateur et
     laisserait un calque transparent en travers de tout l ecran, qui avalerait
     le clic sur le hamburger. */
  .ti-fond { display:block; position:fixed; inset:0; z-index:70; background:rgba(15,23,42,.5);
    opacity:0; pointer-events:none; transition:opacity .26s; }
  .ti-fond.vu { opacity:1; pointer-events:auto; }
  .tiroir { display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
    z-index:80; width:min(86vw,360px); background:#fff; transform:translateX(-100%);
    visibility:hidden; overflow-y:auto; overscroll-behavior:contain;
    transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s; }
  .tiroir.ouvert { transform:none; visibility:visible; }
  .ti-tete { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--trait); position:sticky; top:0;
    background:#fff; z-index:2; }
  .ti-logo { height:36px; width:auto; }
  .ti-fermer { width:40px; height:40px; margin-right:-8px; border:0; background:none;
    color:var(--encre); cursor:pointer; display:flex; align-items:center;
    justify-content:center; }
  .ti-fermer svg { width:21px; height:21px; }
  .ti-nav { display:block; padding:8px 0 4px; }
  .ti-chef, .ti-simple { display:flex; align-items:center; gap:13px; width:100%;
    padding:13px 16px; border:0; background:none; text-align:left; cursor:pointer;
    font-family:var(--display); font-size:16px; font-weight:600; color:var(--encre);
    text-decoration:none; }
  .ti-ic { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#EFF1F4;
    display:flex; align-items:center; justify-content:center; color:var(--encre); }
  .ti-ic svg { width:19px; height:19px; }
  .ti-lib { flex:1; min-width:0; }
  .ti-lib em { display:block; font-family:var(--texte); font-style:normal; font-size:12px;
    font-weight:400; color:var(--gris-clair); margin-top:2px; }
  .ti-n { font-family:var(--texte); font-size:12px; font-weight:500; color:var(--gris-clair); }
  .ti-chev { width:17px; height:17px; color:var(--gris-clair); transition:transform .2s; }
  .ti-chef[aria-expanded="true"] .ti-chev { transform:rotate(90deg); }
  .ti-chef[aria-expanded="true"] { color:var(--accent-txt); }
  .ti-chef[aria-expanded="true"] .ti-ic { background:var(--accent); color:#fff; }
  /* replis animes : la hauteur cible est posee par le script, jamais devinee */
  .ti-enfants { overflow:hidden; max-height:0; transition:max-height .26s ease; }
  .ti-enfants a { display:flex; justify-content:space-between; gap:12px;
    padding:11px 16px 11px 63px; font-size:14.5px; color:var(--gris);
    text-decoration:none; }
  .ti-enfants a:active { background:#F4F6F8; }
  .ti-sep { margin:14px 0 2px; padding:0 16px; font-family:var(--texte); font-size:11.5px;
    font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gris-clair); }
  .ti-pied { margin-top:auto; padding:18px 16px 24px; border-top:1px solid var(--trait);
    background:#F7F9FA; }
  .ti-cta { display:block; text-align:center; background:var(--accent); color:#fff;
    font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.07em;
    text-transform:uppercase; padding:13px; border-radius:999px; text-decoration:none; }
  .ti-liens { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
    margin-top:15px; }
  .ti-liens a { font-size:13px; color:var(--gris); text-decoration:none; }
  body.tiroir-ouvert { overflow:hidden; }
}
@media (prefers-reduced-motion:reduce) {
  .tiroir, .ti-fond, .ti-enfants, .ti-chev, .tm-burger span { transition:none; }
}

/* ---------- rubrique ---------- */
.rub { font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--accent-txt); }
.dt { font-size:11.5px; color:var(--gris-clair); letter-spacing:.3px; }
.dt::before { content:"/"; margin:0 7px; color:var(--trait); }
.meta { display:flex; align-items:center; margin:11px 0 7px; }

/* --- annuaire en page d accueil --- */
.annuaire-home { background:var(--encre); color:#fff; padding:52px 0 54px; margin:0; }
.an-tete { display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:24px; }
.an-tete h2 { font-family:var(--display); font-size:29px; font-weight:600; margin:0 0 5px;
  letter-spacing:-.01em; }
.an-tete p { margin:0; color:#b6bfcb; font-size:14.5px; }
.an-cta { background:var(--accent); color:#fff; font-family:var(--texte); font-size:13px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:12px 22px;
  border-radius:3px; text-decoration:none; white-space:nowrap; }
/* --- banniere d actualite --- */
.actu-carrousel { margin:0; }
/* la scene prend la hauteur de la premiere diapositive ; les suivantes se
   superposent en absolu, ce qui evite tout saut de mise en page */
/* la scene porte le rapport des bandeaux (862 x 291) : sa hauteur est donc
   connue avant meme que les images arrivent, et elle ne bouge jamais */
.cb-scene { position:relative; aspect-ratio:862/291; border-radius:5px; overflow:hidden;
  border:1px solid var(--trait); line-height:0; }
.cb-diapo { position:absolute; inset:0; display:block; opacity:0; pointer-events:none;
  transition:opacity .5s ease; }
.cb-diapo.on { opacity:1; pointer-events:auto; }
.cb-diapo img { width:100%; height:100%; object-fit:cover; display:block; }
.cb-puces { display:flex; gap:7px; justify-content:center; margin-top:10px; }
.cb-puce { width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--trait); transition:background .18s, width .18s; }
.cb-puce:hover { background:var(--gris-clair); }
.cb-puce.on { background:var(--accent); width:20px; border-radius:999px; }
.cb-puce:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .cb-diapo { transition:none; } }
/* le libelle est pose au-dessus du visuel, jamais dessus : sinon il recouvre
   le message du bandeau, qui porte deja son propre texte */
.ab-eti { display:inline-block; background:var(--accent); color:#fff;
  font-family:var(--texte); font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:4px 11px; border-radius:3px; margin-bottom:8px;
  line-height:1.4; }
.actu-banniere:hover img { opacity:.93; }
/* --- grille a onglets --- */
.grille-onglets { padding:52px 0; }
/* overflow-y explicite : contraindre le seul axe X fait passer l axe Y de
   visible a auto, et la barre se met a happer les glissements verticaux au
   lieu de laisser la page defiler. */
.go-barre { display:flex; gap:4px; overflow-x:auto; overflow-y:hidden;
  border-bottom:1px solid var(--trait); margin-bottom:26px; scrollbar-width:none; }
.go-barre::-webkit-scrollbar { display:none; }
.go-onglet { flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  font-family:var(--texte); font-size:14px; font-weight:600; color:var(--gris);
  padding:12px 18px; border-bottom:3px solid transparent; margin-bottom:-1px;
  white-space:nowrap; }
.go-onglet:hover { color:var(--encre); }
.go-onglet.on { color:var(--accent-txt); border-bottom-color:var(--accent); }
.go-onglet:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.go-grille { display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; }
.go-carte { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
  height:100%; }
/* fond neutre sous l image : les visuels produits sur fond blanc ne creusent
   plus un trou au milieu des photos pleines */
.go-img { display:block; aspect-ratio:16/10; overflow:hidden; background:#F0F2F5;
  border-radius:3px; }
.go-img img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease; }
.go-carte:hover .go-img img { transform:scale(1.045); }
.go-cat { font-family:var(--texte); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-txt); margin-top:2px; }
.go-titre { font-family:var(--display); font-size:16.5px; font-weight:600; line-height:1.24;
  letter-spacing:-.004em; text-wrap:balance; }
.go-carte:hover .go-titre { color:var(--accent-txt); }
/* la date est repoussee en pied de carte : les dates d une meme rangee
   s alignent alors, quel que soit le nombre de lignes du titre */
.go-date { font-family:var(--texte); font-size:12px; color:var(--gris-clair);
  margin-top:auto; padding-top:4px; }
.go-grille { align-items:stretch; }
.go-tous { display:block; width:max-content; margin:32px auto 0; border:1.5px solid var(--accent);
  color:var(--accent-txt); font-family:var(--texte); font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:12px 28px; border-radius:999px;
  text-decoration:none; }
.go-tous:hover { background:var(--accent); color:#fff; }
@media (max-width:1000px) { .go-grille { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .go-grille { grid-template-columns:1fr; } }
/* --- nouveautes du partenaire --- */
.nouveautes { padding:8px 0 4px; margin:52px 0; }
.nv-tete { display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:18px; }
.nv-oeil { font-family:var(--texte); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-txt); margin:0 0 4px; }
.nv-tete h2 { font-family:var(--display); font-size:29px; font-weight:600; margin:0;
  letter-spacing:-.01em; }
.nv-cta { border:1.5px solid var(--accent); color:var(--accent-txt); font-family:var(--texte);
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 20px; border-radius:999px; text-decoration:none; white-space:nowrap; }
.nv-cta:hover { background:var(--accent); color:#fff; }
/* carrousel : simple piste defilante, sans bibliotheque */
.nv-piste { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; padding-bottom:10px; margin-bottom:24px; }
.nv-diapo { flex:0 0 auto; scroll-snap-align:start; border-radius:5px; overflow:hidden;
  border:1px solid var(--trait); background:#fff; }
.nv-diapo img { display:block; height:150px; width:auto; }
.nv-grille { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.nv-carte { display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit;
  border:1px solid var(--trait); border-radius:5px; padding:12px; background:#fff;
  transition:box-shadow .16s, transform .16s; }
.nv-carte:hover { box-shadow:0 8px 20px rgba(18,22,29,.12); transform:translateY(-2px); }
.nv-img { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.nv-img img { max-width:100%; max-height:100%; object-fit:contain; }
.nv-nom { font-family:var(--texte); font-size:12.5px; font-weight:600; line-height:1.3;
  flex:1; }
.nv-prix { font-family:var(--display); font-size:16px; font-weight:600; color:var(--accent-txt); }
@media (max-width:1000px) { .nv-grille { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px) {
  .nv-grille { grid-template-columns:1fr 1fr; }
  .nv-diapo img { height:110px; }
}
/* --- videos partenaire --- */
.videos { background:#EEF1F4; padding:52px 0 54px; margin:0; }
.vd-tete { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.vd-tete h2 { font-family:var(--display); font-size:29px; font-weight:600; margin:0;
  letter-spacing:-.01em; }
.vd-abo { background:var(--accent); color:#fff; font-family:var(--texte); font-size:12px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:8px 15px;
  border-radius:3px; text-decoration:none; }
.vd-abo:hover { background:var(--accent-txt); }
.vd-grille { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start; }
.vd-cadre { display:block; position:relative; background:#000; border-radius:5px;
  overflow:hidden; aspect-ratio:16/9; }
.vd-cadre img { width:100%; height:100%; object-fit:cover; display:block; }
.vd-principale h3 { font-family:var(--display); font-size:22px; font-weight:600;
  margin:14px 0 4px; line-height:1.22; }
.vd-date { margin:0; font-family:var(--texte); font-size:13px; color:var(--gris); }
.vd-liste { display:flex; flex-direction:column; gap:14px; }
.vd-item { display:flex; gap:13px; text-decoration:none; color:inherit; align-items:flex-start; }
.vd-mini { position:relative; flex:0 0 116px; aspect-ratio:16/9; border-radius:4px;
  overflow:hidden; background:#000; }
.vd-mini img { width:100%; height:100%; object-fit:cover; display:block; }
.vd-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vd-titre { font-family:var(--texte); font-size:14px; font-weight:600; line-height:1.32; }
.vd-item:hover .vd-titre { color:var(--accent-txt); }
/* bouton de lecture, dessine en CSS pour eviter une image de plus */
.vd-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:rgba(200,16,46,.92);
  display:flex; align-items:center; justify-content:center; }
.vd-play::after { content:""; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff; margin-left:3px; }
.vd-play-gd { width:64px; height:64px; }
.vd-play-gd::after { border-width:12px 0 12px 20px; margin-left:5px; }
.vd-item:hover .vd-play, .vd-cadre:hover .vd-play { background:var(--accent); }
.vd-toutes { display:block; width:max-content; margin:26px auto 0; border:1.5px solid var(--accent);
  color:var(--accent-txt); font-family:var(--texte); font-size:13px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:11px 26px; border-radius:999px;
  text-decoration:none; }
.vd-toutes:hover { background:var(--accent); color:#fff; }
/* vignette video dans le rail de la une */
.pl-video { background:#fff; border:1px solid var(--trait); padding:14px; }
.vd-rail { flex-direction:column; gap:10px; }
.vd-rail .vd-mini { flex:none; width:100%; }
@media (max-width:900px) {
  .vd-grille { grid-template-columns:1fr; }
}
.an-corps { display:grid; grid-template-columns:1.35fr 1fr; gap:22px; align-items:stretch; }
/* z-index sur le cadre de la carte : Leaflet empile ses couches jusqu a 1000.
   Sans contexte d empilement ici, ces valeurs remontent dans le contexte
   racine et la carte passe par-dessus l en-tete colle en haut. */
.an-carte { position:relative; z-index:0; height:380px; border-radius:5px;
  overflow:hidden; background:#1b2330; border:1px solid rgba(255,255,255,.14); }
/* Leaflet pose ses propres fonds clairs : on les remet au ton du bloc */
.an-carte .leaflet-container { background:#1b2330; font-family:var(--texte); }
.an-carte .leaflet-popup-content-wrapper { border-radius:4px; }
.an-carte .leaflet-popup-content { margin:10px 13px; font-size:13.5px; line-height:1.4; }
.an-carte .leaflet-popup-content b { display:block; font-family:var(--display);
  font-size:14.5px; margin-bottom:2px; }
.an-carte .leaflet-popup-content a { color:var(--accent-txt); font-weight:600;
  text-decoration:none; font-size:12.5px; }
.an-marqueur { background:var(--accent); border:2px solid #fff; border-radius:50%;
  width:11px; height:11px; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.an-grappe { background:var(--accent); color:#fff; border:2px solid #fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--display);
  font-weight:600; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.45); }
.an-villes { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
.an-ville { display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  padding:11px 14px; border-radius:4px; text-decoration:none;
  transition:background .16s, border-color .16s; }
.an-ville:hover { background:var(--accent); border-color:var(--accent); }
.an-nom { font-family:var(--texte); font-size:14px; font-weight:600; color:#fff; }
.an-nb { font-family:var(--display); font-size:13px; color:#9aa5b3; font-variant-numeric:tabular-nums; }
.an-ville:hover .an-nb { color:#fff; }

/* --- bandeau de confiance --- */
/* Meme vocabulaire que « Bons plans du moment » : fond gris, cartes blanches
   a filet fin et coins arrondis, bouton pilule. La section se lit comme une
   soeur de celle des bons plans et non comme un bloc etranger. */
.confiance { background:#EEF1F4; padding:52px 0 54px; margin:0; }
.cf-tete { text-align:center; margin-bottom:26px; }
.cf-tete h2 { font-family:var(--display); font-size:30px; font-weight:600; margin:0 0 4px;
  letter-spacing:-.01em; }
.cf-tete p { margin:0; color:var(--gris); font-size:14.5px; }
.cf-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.cf-carte { display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid #DDE2E8; border-radius:6px; padding:28px 24px 24px;
  text-decoration:none; color:inherit; transition:box-shadow .18s, transform .18s; }
.cf-carte:hover { box-shadow:0 10px 26px rgba(18,22,29,.14); transform:translateY(-3px); }
.cf-icone { display:flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:50%; background:#EFF1F4; color:var(--encre); margin:0 0 16px; }
.cf-icone svg { width:32px; height:32px; }
.cf-carte h3 { font-family:var(--display); font-size:19px; font-weight:600; margin:0 0 8px; }
/* mesure de ligne bornee : sans cela un texte centre sur toute la colonne
   produit trois paves de largeurs inegales, et le centrage se voit mal. */
.cf-carte p { margin:0 0 18px; font-size:14.5px; color:var(--gris); line-height:1.55;
  max-width:31ch; flex:1; }
/* bouton pleine largeur comme chez les bons plans : trois libelles de
   longueurs differentes donneraient sinon trois pilules inegales. */
.cf-btn { display:block; align-self:stretch; text-align:center;
  border:1.5px solid var(--accent); color:var(--accent-txt);
  font-family:var(--display); font-size:12.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:9px 22px; border-radius:999px; }
.cf-carte:hover .cf-btn { background:var(--accent); color:#fff; }

/* --- capture d audience ---
   Dernier appel a l action de la page : il lui faut le contraste le plus fort,
   d ou le rouge de marque. Ni gris pale (il s effacait entre deux blocs plus
   forts que lui), ni encre (il aurait fusionne avec le pied de page). */
.capture { background:var(--accent); color:#fff; padding:56px 0 60px; margin:0; text-align:center; }
.capture h2 { font-family:var(--display); font-size:36px; font-weight:600; margin:0 0 8px;
  letter-spacing:-.015em; color:#fff; }
.cp-sous { margin:0 0 5px; font-size:16px; color:#fff; }
.cp-note { margin:0 0 24px; font-size:13.5px; color:#ffd7dd; font-style:italic; }
.cp-form { display:flex; justify-content:center; gap:0; max-width:520px; margin:0 auto; }
.cp-form input { flex:1; min-width:0; border:0; border-right:0;
  border-radius:999px 0 0 999px; padding:15px 22px; font-family:var(--texte); font-size:15px;
  background:#fff; color:var(--encre); }
.cp-form input:focus { outline:2px solid var(--encre); outline-offset:-2px; }
.cp-form button { border:0; border-radius:0 999px 999px 0; background:var(--encre); color:#fff;
  font-family:var(--texte); font-size:13.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:15px 28px; cursor:pointer; white-space:nowrap; }
.cp-form button:hover { background:#000; }
@media (max-width:900px) {
  .an-corps { grid-template-columns:1fr; }
  .an-carte { height:320px; }
  .an-villes { grid-template-columns:repeat(3,1fr); }
  .cf-grille { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:560px) {
  .an-villes { grid-template-columns:1fr 1fr; }
  .capture h2 { font-size:27px; }
  .cp-form { flex-direction:column; gap:10px; }
  .cp-form input { border-right:1px solid var(--trait); border-radius:999px; }
  .cp-form button { border-radius:999px; }
}
.bons-plans { background:#EEF1F4; padding:52px 0 50px; margin:0; }
.bp-tete { text-align:center; margin-bottom:26px; }
.bp-tete h2 { font-family:var(--display); font-size:30px; font-weight:600; margin:0 0 4px;
  letter-spacing:-.01em; }
.bp-tete p { margin:0; color:var(--gris); font-size:14.5px; }
.bp-grille { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.bp-carte { display:flex; flex-direction:column; background:#fff; border:1px solid #DDE2E8;
  border-radius:6px; overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .18s, transform .18s; }
.bp-carte:hover { box-shadow:0 10px 26px rgba(18,22,29,.14); transform:translateY(-3px); }
.bp-img { background:#fff; aspect-ratio:1/1; display:flex; align-items:center;
  justify-content:center; padding:14px; border-bottom:1px solid #EDF0F3; }
.bp-img img { max-width:100%; max-height:100%; object-fit:contain; }
.bp-corps { padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1; }
.bp-corps h3 { font-family:var(--display); font-size:15px; font-weight:600; margin:0;
  line-height:1.3; }
.bp-chez { margin:0; color:var(--accent-txt); font-size:13px; font-weight:500; }
.bp-prix { margin:0; display:flex; align-items:center; gap:9px; flex-wrap:wrap; flex:1; }
.bp-actuel { background:var(--accent); color:#fff; font-family:var(--display); font-size:16px;
  font-weight:600; padding:4px 10px; border-radius:3px; }
.bp-ancien { color:var(--faible); text-decoration:line-through; font-size:14px; }
.bp-eco { color:#1B7F4B; font-size:13px; font-weight:600; flex-basis:100%; }
.bp-btn { display:block; text-align:center; border:1.5px solid var(--accent);
  color:var(--accent-txt); font-family:var(--display); font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; padding:9px; border-radius:999px; }
.bp-carte:hover .bp-btn { background:var(--accent); color:#fff; }
.bp-mention { text-align:center; color:var(--faible); font-size:12px; margin:18px 0 0; }
.bp-tous { display:flex; align-items:center; justify-content:center; gap:12px;
  text-decoration:none; color:var(--accent-txt); font-family:var(--display); font-size:14px;
  font-weight:600; margin-top:14px; }
.bp-fleche { width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px; }
@media (max-width:1000px) { .bp-grille { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .bp-grille { grid-template-columns:1fr; } }
.barre-promo { display:block; background:var(--accent); color:#fff; text-decoration:none;
  text-align:center; padding:11px 18px; font-family:var(--texte); font-size:14.5px;
  font-weight:600; letter-spacing:.2px; transition:background .16s; }
.barre-promo:hover { background:var(--accent-txt); }
.barre-promo .chev { letter-spacing:2px; margin-left:5px; opacity:.85; }
@media (max-width:600px) { .barre-promo { font-size:13px; padding:10px 14px; } }
.rubriques-icones { border-bottom:1px solid var(--trait); background:#fff; }
.ri-piste { display:flex; gap:6px; padding:18px 0 16px; overflow-x:auto;
  overflow-y:hidden; scrollbar-width:none; }
.ri-piste::-webkit-scrollbar { display:none; }
.ri-item { flex:1 0 auto; min-width:86px; display:flex; flex-direction:column;
  align-items:center; gap:9px; text-decoration:none; color:var(--encre); padding:4px 6px; }
.ri-pastille { width:56px; height:56px; border-radius:50%; background:#EFF1F4;
  display:flex; align-items:center; justify-content:center; color:var(--encre);
  transition:background .16s, color .16s; }
.ri-pastille svg { width:30px; height:30px; }
.ri-item:hover .ri-pastille { background:var(--accent); color:#fff; }
.ri-lib { font-family:var(--texte); font-size:12.5px; font-weight:500; text-align:center;
  line-height:1.3; color:var(--gris); }
.ri-item:hover .ri-lib { color:var(--accent-txt); }
@media (max-width:760px) {
  .ri-piste { padding:14px 0 12px; }
  .ri-item { min-width:74px; }
  .ri-pastille { width:48px; height:48px; }
  .ri-pastille svg { width:26px; height:26px; }
  .ri-lib { font-size:11.5px; }
}
.ruban { display:flex; align-items:center; gap:0; margin:52px 0 22px; }
.ruban span { font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:1.4px;
  text-transform:uppercase; color:#fff; background:var(--accent); padding:8px 20px 8px 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.ruban::after { content:""; flex:1; height:2px; background:var(--encre); }

/* ---------- cartes ---------- */
h2,h3,h4 { font-family:var(--display); font-weight:600; margin:0; line-height:1.14; }

.une-bloc { display:grid; grid-template-columns:1.62fr 1fr; gap:32px;
  margin:26px 0 52px; align-items:start; }
.une-visuel { display:block; }
.une-visuel img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.une-rub { font-family:var(--texte); font-size:12.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-txt); margin:14px 0 5px; }
.une-titre { font-family:var(--display); font-size:40px; font-weight:600; line-height:1.08;
  letter-spacing:-.018em; margin:0 0 10px; text-wrap:balance; }
.une-titre a { color:var(--encre); text-decoration:none; }
.une-titre a:hover { color:var(--accent-txt); }
.une-sign { font-family:var(--texte); font-size:13px; color:var(--gris); margin:0 0 12px;
  padding-bottom:13px; border-bottom:1px solid var(--trait); }
.une-sign b { color:var(--encre); font-weight:600; }
.une-chapo { font-family:var(--texte); font-size:16px; line-height:1.6; color:var(--gris);
  margin:0; }

.une-rail { display:flex; flex-direction:column; gap:20px; }
.pl-tete { font-family:var(--display); font-size:21px; font-weight:600; margin:0;
  text-align:center; padding:16px 0 4px; }
.une-rail > .pl-tete { background:#F1F3F6; margin:0; padding:18px 0 2px; }
.pl-liste { background:#F1F3F6; padding:6px 20px 20px; margin-top:-18px; padding-top:18px;
  display:flex; flex-direction:column; gap:14px; }
.pl-item { display:flex; gap:14px; align-items:flex-start; text-decoration:none; }
.pl-rang { font-family:var(--display); font-size:27px; font-weight:600; color:var(--accent);
  line-height:1; min-width:22px; font-variant-numeric:tabular-nums; }
.pl-titre { font-family:var(--texte); font-size:14.5px; font-weight:600; line-height:1.35;
  color:var(--encre); }
.pl-item:hover .pl-titre { color:var(--accent-txt); }
.pl-cta { display:flex; flex-direction:column; gap:7px; background:var(--encre); color:#fff;
  padding:20px; text-decoration:none; }
.pl-cta-eyebrow { font-family:var(--texte); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#fff; opacity:.62; }
.pl-cta-titre { font-family:var(--display); font-size:19px; font-weight:600; line-height:1.2; }
.pl-cta-btn { align-self:flex-start; margin-top:6px; background:var(--accent); color:#fff;
  font-family:var(--texte); font-size:12.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:8px 16px; border-radius:3px; }
@media (max-width:900px) {
  .une-bloc { grid-template-columns:1fr; gap:24px; }
  .une-titre { font-size:29px; }
}
.une-grille { display:grid; grid-template-columns:1.55fr 1fr; gap:26px; margin-top:26px; }
.c-une { position:relative; display:block; overflow:hidden; }
.c-une img { width:100%; height:430px; object-fit:cover; }
.c-une::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,0) 42%,rgba(15,23,42,.86) 100%); }
.c-une-txt { position:absolute; z-index:2; left:0; bottom:0; padding:26px; color:#fff; }
.c-une-txt .rub { color:#fff; background:var(--accent); padding:4px 9px; }
.c-une-txt .dt { color:#cbd5e1; }
.c-une h2 { font-size:34px; margin-top:12px; text-wrap:balance; }

.col-sec { display:flex; flex-direction:column; gap:20px; }
.c-moy h3 { font-size:19px; }
.c-moy-img { overflow:hidden; }
.c-moy-img img { width:100%; height:158px; object-fit:cover; transition:transform .35s; }
.c-moy:hover img { transform:scale(1.045); }
.c-moy:hover h3 { color:var(--accent-txt); }

.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:38px; }

.c-liste { display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--trait); }
.c-liste img { width:104px; height:72px; object-fit:cover; }
.c-liste h4 { font-size:15.5px; line-height:1.22; }
.c-liste .meta { margin:0 0 5px; }
.c-liste:hover h4 { color:var(--accent-txt); }

/* ---------- bande UGC ---------- */
.ugc { margin:56px 0; background:var(--fond-alt); border:1px solid var(--trait);
  border-left:5px solid var(--accent); padding:30px 34px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.ugc h3 { font-size:26px; }
.ugc p { margin:8px 0 0; color:var(--gris); font-size:14.5px; max-width:620px; }
.ugc a { margin-left:auto; font-family:var(--display); font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; background:var(--encre); color:#fff; padding:14px 24px; border-radius:3px; }

footer { margin-top:0; background:var(--encre); color:#cbd5e1; padding:52px 0 32px; }
footer .wrap { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
footer h5 { font-family:var(--display); text-transform:uppercase; letter-spacing:.9px;
  font-size:13px; color:#fff; margin:0 0 12px; }
footer a { display:block; font-size:13.5px; padding:4px 0; color:#94a3b8; }
footer a:hover { color:#fff; }
.legal { border-top:1px solid #1e293b; margin-top:30px; padding-top:18px; font-size:12px; color:#64748b; }

.note { background:#fffbeb; border:1px solid #fde68a; border-left:5px solid #f59e0b;
  padding:15px 20px; margin:26px 0; font-size:13.5px; color:#78350f; border-radius:3px; }
.note b { color:#451a03; }

@media (max-width:900px) {
  .une-grille, .duo { grid-template-columns:1fr; }
  .g3, .g4 { grid-template-columns:1fr 1fr; }
  .c-une img { height:300px; }
  .c-une h2 { font-size:24px; }
  header nav { display:none; }
  footer .wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .g3, .g4 { grid-template-columns:1fr; }
  .ugc a { margin-left:0; }
}

/* etat vide de la colonne des lieux, tant que rien n est reference */
.an-vide { color:#94a3b8; font-size:14px; line-height:1.6; margin:0; }
.tm-nom { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.4px; text-transform:uppercase; }
.ti-nom { font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.4px; text-transform:uppercase; }

/* ------------------------------------------------------------------
   Reprises propres au theme WordPress, absentes de la maquette statique.
   ------------------------------------------------------------------ */

/* Le logo televerse sort via .custom-logo, que la maquette ne connaissait
   pas : sans contrainte de hauteur il occupe sa taille native. */
.custom-logo-link { display:flex; align-items:center; text-decoration:none; }
.custom-logo { height:52px; width:auto; display:block; }
@media (max-width:900px) { .tm-logo .custom-logo { height:38px; } }
.tm.replie .tm-logo .custom-logo { height:30px; }

/* Leaflet applique sa classe au conteneur lui-meme, pas a un enfant : le
   selecteur descendant de la maquette ne pouvait donc pas matcher. Sa
   feuille est en plus chargee apres la notre, d ou la specificite renforcee. */
.an-corps .an-carte.leaflet-container { background:#1b2330; font-family:var(--texte); }