/*
Theme Name: Boutique d'Alexis
Theme URI: https://laboutiquedalexis.com
Author: La Boutique dAlexis
Description: Comparateur indépendant de caisse enregistreuse et de matériel d'encaissement — refonte du 22/09/2026.
Version: 2.0
Text Domain: boutique-d-alexis
*/

/* ============================================================================
   1. POLICE — REFONTE C1 (26/09/2026) : copie du rendu Square (RELEVE-MODELE.md),
   UNE seule famille, Inter (Google Fonts, enqueue functions.php `lba-inter`), plus
   d'Unbounded/Work Sans/Sixtyfour. Les anciens noms de font-family du fichier sont
   basculés vers 'Inter' par remplacement global (voir historique de sauvegarde) —
   ce qui compte : un seul rendu de police sur tout le site, comme le modèle.
   ========================================================================== */

/* ============================================================================
   2. JETONS — REFONTE C1 (26/09/2026), copie du relevé Square (RELEVE-MODELE.md §5).
   Fond blanc partout, fond alterné gris clair, encre unique, UN accent bleu. Les
   anciens noms de jetons (--kraft, --carton, --reglisse, --tampon, --etiquette,
   --vitre, --vfd…) sont conservés en ALIAS vers les nouveaux, pour que tout le CSS
   existant (style.css + pages.css + correctifs-8b.css, ~1500 lignes) hérite de la
   nouvelle palette sans devoir réécrire chaque règle — seules les quelques bandes
   qui doivent rester délibérément sombres (CTA final, pied de page) sont surchargées
   plus bas, explicitement, sur leur propre sélecteur.
   ========================================================================== */
:root{color-scheme:light;
  /* --- nouveaux jetons Square --- */
  --fond:#FFFFFF; --fond-alt:#F2F2F2; --fond-alt-doux:#F7F7F7;
  --encre:#1A1A1A; --gris-texte:#737373; --bordure:#D9D9D9;
  --accent:#006AFF; --accent-hover:#0055CC; --accent-vert:#0BB634;
  --rayon-base:3px; --rayon-bouton:5px; --rayon-carte:10px;
  --ombre-carte:0 2px 10px rgba(0,0,0,.16); --ombre-header:0 4px 20px rgba(0,0,0,.16);
  --conteneur:1160px; --conteneur-large:1480px; --rythme:96px; --rythme-mobile:56px;
  /* --- alias de compatibilité (ancien nom -> nouveau jeton) --- */
  --kraft:var(--fond); --carton:var(--fond); --reglisse:var(--encre); --reglisse-doux:var(--gris-texte);
  --tampon:var(--accent); --tampon-texte:#FFFFFF; --etiquette:var(--accent);
  --vitre:var(--fond-alt); --vfd:var(--accent); --vfd-doux:var(--gris-texte);
  --conforme:var(--accent-vert); --alerte:#A2360F; --filet:var(--bordure); --ombre-touche:var(--bordure);
}


/* ============================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
body{
  margin:0; background:var(--kraft); color:var(--reglisse);
  font-family:'Inter', Helvetica, Arial, sans-serif; font-size:17px; line-height:1.7;
  overflow-x:hidden; position:relative;
}
@media (min-width:640px){ body{ font-size:18px; } }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:var(--tampon); }
h1,h2,h3,h4{ font-family:'Inter', Arial, sans-serif; font-weight:700; line-height:1.15; margin:0 0 .5em; color:var(--reglisse); }
p{ margin:0 0 1em; }
table{ border-collapse:collapse; width:100%; }
button{ font-family:inherit; }
/* 🪤 /peaufiner LOT 8a (26/09/2026), point 2 (R-1181/R-1187) : aucun reset de <fieldset>
   n'existait — la bordure/le padding par défaut du navigateur traversait le titre
   "Quel est votre métier ?" (la <legend> se plaçait à cheval sur ce filet natif). */
fieldset{ border:0; margin:0; padding:0; min-width:0; }
legend{ padding:0; width:100%; }

.lba-enveloppe{ max-width:var(--conteneur); margin:0 auto; padding:0 16px; }
@media (min-width:1280px){ .lba-enveloppe{ padding:0 24px; } }

.lba-oeil{ position:absolute; left:-999px; top:0; background:var(--tampon); color:var(--tampon-texte); padding:10px 16px; z-index:200; }
.lba-oeil:focus{ left:16px; top:16px; }
.lba-oeil-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* REFONTE C1 (26/09/2026) : grain kraft retiré — fond blanc uni, copie Square (R-1181 : "fond
   de page kraft colore" cite explicitement comme incoherent). body::before neutralise. */
body::before{ content:none; }


/* ============================================================================
   4. TYPOGRAPHIE
   ========================================================================== */
h1{ font-weight:800; font-size:clamp(30px,4.4vw,58px); letter-spacing:-.02em; text-wrap:balance; }
/* 🪤 /peaufiner LOT 8a (26/09/2026), point 2 (R-1181/R-1187) : à 58px sur une colonne de
   ~560px (grille hero à 2 colonnes dès 960px), le titre complet ("Caisse enregistreuse :
   comparez les offres adaptées à votre commerce") cassait sur 6 lignes. Ramené à un clamp
   plus bas pour tenir sur 2-3 lignes et laisser le hero rentrer dans l'écran (≤900px à 1440). */
.lba-hero-titre{ font-weight:800; font-size:clamp(26px,2.6vw,38px); line-height:1.15; letter-spacing:-.01em; }
.lba-titre-section{ font-size:clamp(24px,2.8vw,36px); }
.lba-titre-section--clair{ color:var(--kraft); }
.lba-pastille{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.lba-hero-chapo{ font-size:20px; font-weight:500; line-height:1.5; }

/* ============================================================================
   5. ÉTIQUETTE PRIX — procédé signature n°1
   ========================================================================== */
/* REFONTE C1 (26/09/2026) : étiquette jaune à texte collé à gauche (R-1181, clip-path +
   pastille ronde décorative) retirée — badge simple, texte CENTRÉ, façon "eyebrow" Square
   (RELEVE-MODELE.md §5 : jamais en étiquette collée). */
.lba-pastille--etiquette, .lba-pastille--surimpression{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 16px;
  background:var(--fond); color:var(--gris-texte); position:relative; border-radius:999px;
  border:1px solid var(--bordure); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
}
.lba-pastille--surimpression{ position:absolute; left:12px; bottom:12px; font-size:11px; background:var(--fond); }

/* ============================================================================
   6. BOUTONS (composant partagé)
   ========================================================================== */
.lba-bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:14px;
  min-height:44px; padding:0 22px; border-radius:var(--rayon-bouton); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease;
}
.lba-bouton--plein{ background:var(--tampon); color:var(--tampon-texte); }
.lba-bouton--plein:hover{ transform:translateY(-2px); }
.lba-bouton--filaire, .lba-bouton--contour{ background:transparent; border-color:var(--tampon); color:var(--tampon); }
.lba-bouton--etiquette{ background:var(--accent); color:#FFFFFF; border-radius:var(--rayon-bouton); width:52px; height:52px; padding:0; }
.lba-bouton--pleine-largeur{ width:100%; }

/* ============================================================================
   7. TAMPON DATÉ — procédé signature n°5
   ========================================================================== */
/* REFONTE C1 (26/09/2026) : effet "tampon encreur" (double bordure + rotation -4deg) retiré —
   badge plat centré, même famille que .lba-pastille--etiquette (un seul langage de badge). */
.lba-tampon{
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; padding:5px 12px; border:1px solid var(--bordure);
  border-radius:999px; color:var(--gris-texte); background:var(--fond);
}
.lba-tampon--vitre{ border-color:var(--bordure); color:var(--gris-texte); }
.lba-tampon--conforme{ border-color:var(--conforme); color:var(--conforme); }
.lba-tampon--neutre{ border-color:var(--bordure); color:var(--gris-texte); }
.lba-tampon--interrogation{ border-color:var(--alerte); color:var(--alerte); font-size:12px; }

/* ============================================================================
   8. CARTES + TICKET DÉCHIRÉ (procédé n°4)
   ========================================================================== */
/* REFONTE C1 (26/09/2026) : carte copiée du relevé Square (RELEVE-MODELE.md §5) — fond blanc,
   rayon 10px, ombre légère par défaut (pas de bordure dure). L'effet "ticket déchiré" (bord en
   dents de scie ::after) est retiré : une carte Square est un rectangle net. */
.lba-carte{ background:var(--fond); border-radius:var(--rayon-carte); box-shadow:var(--ombre-carte); overflow:hidden; position:relative; }
.lba-carte-ticket{ margin-bottom:0; }
.lba-carte-ticket::after{ content:none; }

.lba-carte-img{ display:block; aspect-ratio:4/3; overflow:hidden; position:relative; }
.lba-carte-img img{ width:100%; height:100%; object-fit:cover; }
.lba-carte-corps{ padding:16px; }
.lba-carte h3{ font-size:18px; margin:0 0 6px; }
.lba-carte h3 a, .lba-carte-metier strong{ color:var(--reglisse); text-decoration:none; }
.lba-carte-chapo{ font-size:15px; color:var(--reglisse-doux); margin:0; }
.lba-carte-souligne{ display:block; font-size:13px; color:var(--reglisse-doux); }

.lba-carte-metier{ display:flex; flex-direction:column; text-decoration:none; }
.lba-carte-article--grande{ grid-column:span 8; }
.lba-carte-article--grande .lba-carte-img{ aspect-ratio:16/9; }

.lba-carte-rubrique .lba-carte-img{ aspect-ratio:16/9; }
.lba-carte-rubrique-liste{ list-style:none; margin:0; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.lba-carte-rubrique-liste a{ color:var(--reglisse); text-decoration:none; font-size:14px; }
.lba-carte-rubrique-liste a:hover{ text-decoration:underline; }

.lba-carte-auteur{ display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; gap:6px; }
.lba-carte-auteur-photo, .lba-carte-auteur img{ width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--etiquette); }
/* REFONTE C1 (26/09/2026) : la bande "Qui écrit ces guides" n'est plus sombre (voir §13 plus
   bas, .lba-bande--reglisse) — ces couleurs de texte "claires" (pensées pour un fond sombre)
   seraient invisibles sur le nouveau fond clair ; passées en encre/gris-texte. */
.lba-carte-auteur strong{ font-size:16px; color:var(--encre); }
.lba-carte-auteur-role{ font-size:13px; color:var(--gris-texte); }
.lba-carte-auteur-bio{ font-size:14px; color:var(--gris-texte); max-width:26ch; }

/* ============================================================================
   9. AFFICHEUR — procédé signature n°2
   ========================================================================== */
.lba-bande--vitre{ background:var(--vitre); color:var(--vfd-doux); }
/* 🪤 /peaufiner LOT 8a (26/09/2026), point 3 (R-1181/R-1187) : en grille à 4 colonnes,
   chaque tuile à 1440px ne fait plus que ~290px de large — "200 → 7 000 €" y cassait sur
   2 lignes et "15 → 150 €/mois" débordait sur la tuile voisine. Grille à 2 colonnes fixe
   (2 rangées de 2) : chaque tuile garde ~600px, largement assez pour tenir sur une ligne
   au clamp réduit ci-dessous — plus besoin de monter à 4 colonnes. */
/* /peaufiner LOT 8c (26/09) : .lba-bande porte déjà le rythme vertical (96px desktop /
   64px mobile) — .lba-afficheur ajoutait le même padding en plus, doublant le vide en
   haut de bande (192px mesuré) ; supprimé ici, le rythme ne vient plus que de .lba-bande.
   Grille remise à 4 colonnes à 1440 (2×2 en mobile) sur demande de Mathias — le clamp du
   chiffre est resserré ci-dessous pour que "200 → 7 000 €" tienne sur une ligne dans une
   colonne de ~286px. */
.lba-afficheur{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 32px; min-width:0; }
@media (min-width:900px){ .lba-afficheur{ grid-template-columns:repeat(4,1fr); } }
.lba-tuile-afficheur{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; justify-content:flex-start; }
/* /peaufiner LOT 3 (25/09) : VRAI responsable du débordement à 320px (355 vs 320, signalé par
   LOT 2) — pas les cartes-métier (diagnostic écarté par isolation live), mais CE chiffre : "15 →
   150 €/mois" en police Sixtyfour à clamp(28-48px) mesurait 183px de scrollWidth dans une tuile de
   132px (grille 2 colonnes à 320px), et débordait visuellement du document faute de point de
   rupture (les espaces autour de "150€/mois" sont en &nbsp; pour la typographie DA). Revérifié en
   direct (Playwright, 320px) après ce correctif : scrollWidth=320=innerWidth sur toute la page. */
.lba-chiffre-afficheur{ font-family:'Inter', monospace; font-size:clamp(20px,1.9vw,30px); color:var(--vfd); margin:0; overflow-wrap:anywhere; max-width:100%; white-space:nowrap; }
@media (max-width:480px){ .lba-chiffre-afficheur{ white-space:normal; } }
.lba-libelle-afficheur{ font-size:13px; color:var(--vfd-doux); margin:0; }
.lba-chiffre-sixtyfour{ font-family:'Inter', monospace; font-size:22px; color:var(--vfd); margin-right:8px; }

/* ============================================================================
   10. TOUCHES DE CAISSE — procédé signature n°3
   ========================================================================== */
.lba-touches{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 16px; }
.lba-touches--3col{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .lba-touches--3col{ grid-template-columns:repeat(3,1fr); } }
/* REFONTE C1 (26/09/2026) : carte de choix à picto façon Square (R-0519) — ombre 3D "touche de
   caisse" (box-shadow:0 3px 0) retirée, bordure fine, radius base, accent au survol/sélection. */
.lba-touche{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:64px; padding:10px 8px; background:var(--fond); border:1px solid var(--bordure); border-radius:var(--rayon-base);
  cursor:pointer; text-align:center; text-decoration:none; color:var(--encre);
  font-size:13px; font-weight:600; transition:border-color .12s ease, background .12s ease;
}
.lba-touche input{ position:absolute; opacity:0; width:1px; height:1px; }
/* /peaufiner LOT 8c (26/09) : lba_picto_metier() ne posait ni fill ni stroke sur son <svg> —
   rendu par défaut du navigateur (aplat noir) au lieu d'un pictogramme au trait. Corrigé ici
   (partagé par l'étape 1 du hero ET la reprise finale, DA §3 : pictos au trait 2px réglisse). */
.lba-touche svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lba-touche:hover{ border-color:var(--accent); }
.lba-touche:has(input:checked), .lba-touche.is-choisie{
  background:var(--accent); color:#FFFFFF; border-color:var(--accent);
}
.lba-touche:has(input:checked)::after{ content:"✓"; position:absolute; top:4px; right:6px; font-size:12px; }
.lba-touche:has(input:focus-visible), .lba-touche--lien:focus-visible{ outline:3px solid var(--etiquette); outline-offset:2px; }
.lba-touche--desactivee{ min-height:32px; width:32px; padding:0; font-family:'Inter',Arial,sans-serif; }
.lba-touches--reprise .lba-touche--lien{ background:var(--carton); }
/* /peaufiner LOT 8c (26/09) : la reprise finale a 7 métiers dans une grille à 3 colonnes
   (héritée de .lba-touches--3col, PARTAGÉE avec les étapes du formulaire — jamais touchée
   ici) → "Autre commerce" se retrouvait seul sur une 3e ligne. Grille dédiée à 6 colonnes
   (chaque touche span 2 = 3/rangée, identique visuellement) qui centre la 7e touche sur sa
   propre ligne uniquement quand il y a exactement 7 touches. */
@media (min-width:640px){
  .lba-touches--reprise{ grid-template-columns:repeat(6,1fr); }
  .lba-touches--reprise .lba-touche--lien{ grid-column:span 2; }
  .lba-touches--reprise .lba-touche--lien:nth-child(7):nth-last-child(1){ grid-column:3 / span 2; }
}

/* ============================================================================
   11. FORMULAIRE MULTI-ÉTAPES
   ========================================================================== */
.lba-formulaire{ max-width:560px; padding:28px; margin-left:auto; }
@media (max-width:640px){ .lba-formulaire{ padding:20px; margin-left:0; } }
.lba-formulaire-tete{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.lba-formulaire-etape-texte{ font-size:13px; font-weight:600; color:var(--reglisse-doux); margin:0; }
.lba-progression{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.lba-progression span{ height:6px; border-radius:3px; background:var(--filet); }
.lba-progression span.is-faite{ background:var(--tampon); }
.lba-progression span.is-en-cours{ background:var(--etiquette); }
.lba-question{ font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:22px; margin-bottom:14px; padding:0; }
.lba-sous-question{ font-size:14px; font-weight:600; color:var(--reglisse-doux); margin:12px 0 8px; }
.lba-formulaire-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.lba-lien-retour{ background:none; border:none; color:var(--reglisse-doux); font-weight:500; cursor:pointer; padding:8px 0; }
.lba-champ{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:15px; font-weight:600; }
.lba-champ input, .lba-champ textarea{
  min-height:52px; border:2px solid var(--filet); border-radius:8px; padding:0 14px; font-size:16px;
  font-family:'Inter', sans-serif; background:var(--carton); color:var(--reglisse);
}
.lba-champ textarea{ padding:12px 14px; min-height:88px; }
.lba-champ input:focus, .lba-champ textarea:focus{ outline:none; border-color:var(--tampon); }
.lba-consentement{ display:flex; align-items:flex-start; gap:10px; font-size:14px; margin:14px 0; }
.lba-consentement input{ width:24px; height:24px; flex:none; margin-top:2px; }
.lba-rgpd{ font-size:13px; color:var(--reglisse-doux); }
.lba-rgpd--clair{ color:var(--kraft); opacity:.85; }
.lba-message{ min-height:1.4em; font-size:14px; font-weight:600; }
.lba-message:not(:empty){ padding:10px 14px; border-radius:8px; background:var(--carton); border:2px solid var(--alerte); color:var(--alerte); }
.lba-piege{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.lba-ticket-recap:not(:empty){ border-top:1px dashed var(--filet); margin:14px 0; padding-top:14px; font-family:'Inter',sans-serif; }

/* ============================================================================
   12. BANDES / RYTHME (AC-022, AC-028)
   ========================================================================== */
.lba-bande{ padding:var(--rythme-mobile) 0; }
@media (min-width:900px){ .lba-bande{ padding:var(--rythme) 0; } }
.lba-bande--courte{ padding:calc(var(--rythme-mobile) * .6) 0; }
.lba-bande--carton{ background:var(--fond-alt); }
/* REFONTE C1 (26/09/2026) — copie du relevé Square (RELEVE-MODELE.md §4/§5), une bande claire
   par section, plus de fond jaune/vert/noir mélangés (R-1181, "plusieurs sites mélangés") :
   - .lba-bande--etiquette (test de conformité) et .lba-bande--vitre (repères chiffrés, méthode)
     deviennent des bandes grises claires, comme la section "Fonctionnalités" du modèle ;
   - .lba-bande--reglisse (auteurs) n'est plus sombre : plus aucune section n'est sombre à part
     le CTA final et le pied de page (seul bloc sombre du site, comme Square) ;
   - .lba-bande--tampon (CTA final "Votre caisse en 2 minutes") devient LA bande sombre unique
     de l'accueil hors pied de page — fond encre, texte blanc, un seul bouton accent. */
.lba-bande--etiquette{ background:var(--fond-alt); color:var(--encre); }
.lba-bande--vitre{ background:var(--fond-alt); color:var(--gris-texte); }
.lba-bande--vitre .lba-titre-section{ color:var(--encre); }
.lba-bande--reglisse{ background:var(--fond-alt); color:var(--encre); border-top:1px solid var(--bordure); }
.lba-bande--reglisse .lba-titre-section{ color:var(--encre); }
.lba-bande--tampon{ background:var(--encre); color:#FFFFFF; }
.lba-bande--tampon .lba-titre-section{ color:#FFFFFF; }
.lba-bande--tampon .lba-rgpd{ color:rgba(255,255,255,.75); }

/* ============================================================================
   13. HEADER
   ========================================================================== */
/* REFONTE C1 (26/09/2026) : header sobre, blanc, copié sur Square (RELEVE-MODELE.md §3 : fond
   blanc, pas d'ombre dure, liseré bas fin) — flou retiré, fond opaque. */
.lba-entete{ position:sticky; top:0; z-index:100; background:var(--fond); border-bottom:1px solid var(--bordure); }
.lba-entete-in{ display:flex; align-items:center; gap:20px; height:76px; transition:height .15s ease; }
body.lba-scrolled .lba-entete-in{ height:60px; }
.lba-logo{ flex:none; display:block; }
.lba-logo-svg{ width:190px; height:auto; }
@media (max-width:640px){ .lba-logo-svg{ width:150px; } }
.lba-menu{ display:none; flex:1; align-items:center; gap:18px; min-width:0; }
@media (min-width:1000px){ .lba-menu{ display:flex; } }
@media (min-width:1280px){ .lba-menu{ gap:24px; } }
/* /peaufiner LOT 8c (26/09) : chaque entrée sur UNE ligne (R-0503), vérifié à 1280/1440/1920 */
.lba-menu a{ font-weight:600; font-size:15px; color:var(--reglisse); text-decoration:none; padding:6px 0; border-bottom:3px solid transparent; white-space:nowrap; flex:0 0 auto; }
.lba-menu a:hover, .lba-menu a[aria-current]{ border-color:var(--tampon); }
.lba-entete-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.lba-loupe-bouton{ background:none; border:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--reglisse); cursor:pointer; border-radius:8px; }
.lba-loupe-bouton:hover{ background:var(--kraft); }
/* 🪤 Correction /peaufiner LOT 2 (25/09), B-HDR-18 homepage-CONSTAT.md : il y avait
   DEUX CTA "Comparer des caisses" / "Comparer" vers le même lien, superposés et
   tronqués sous 1000px. Un seul CTA reste dans le HTML (header.php) : on le rend
   lisible de 320 à 1920px au lieu de masquer/dédoubler. La loupe passe dans le
   panneau plein écran sous 1000px pour laisser la place au CTA + au burger. */
.lba-cta-entete{ white-space:nowrap; }
@media (max-width:1000px){ .lba-loupe-bouton{ display:none; } }
@media (max-width:460px){
  .lba-entete-in{ gap:10px; }
  .lba-entete-actions{ gap:6px; flex-shrink:0; }
  .lba-logo-svg{ width:100px; flex-shrink:0; }
  /* width fixe + flex-shrink:0 (pas max-width) : en inline-flex + white-space:normal,
     le rétrécissement flex par défaut (flex-shrink:1) comprimait le bouton EN DESSOUS
     de sa largeur déclarée même quand la place disponible suffisait, et le mot
     "Comparer" débordait du bouton à 320px — constaté à la capture. flex-shrink:0
     sur le CTA et le burger fait respecter leur taille ; testé 320/375/390 sans
     débordement ni troncature (captures internes). */
  /* 🪤 Sélecteur `.lba-bouton.lba-cta-entete` (spécificité 0,2,0), pas juste
     `.lba-cta-entete` : assets/css/pages.css redéclare `.lba-bouton{padding:0
     1.3rem}` (bouton générique du corps d'article) et, chargé APRÈS style.css
     (dépendance `lba-pages` → `lba-theme`), gagnait le padding à égalité de
     spécificité (0,1,0 vs 0,1,0) malgré cette règle plus tardive dans CE
     fichier — constaté en comparant le padding réellement calculé au padding
     déclaré. */
  .lba-bouton.lba-cta-entete{ white-space:normal; text-align:center; line-height:1.2; font-size:12px; padding:6px 8px; width:108px; height:auto; min-height:44px; flex-shrink:0; }
  .lba-burger{ flex-shrink:0; }
}
.lba-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; }
@media (min-width:1000px){ .lba-burger{ display:none; } }
.lba-burger span{ display:block; height:2px; background:var(--reglisse); border-radius:1px; }
.lba-recherche-barre{ border-top:1px solid var(--filet); background:var(--carton); }
.lba-recherche-barre[hidden]{ display:none; }
.lba-recherche-form{ display:flex; gap:10px; padding:14px 16px; max-width:var(--conteneur); margin:0 auto; }
.lba-recherche-form input{ flex:1; min-height:52px; border:2px solid var(--filet); border-radius:8px; padding:0 14px; font-size:16px; background:var(--kraft); color:var(--reglisse); }
.lba-recherche-form input:focus{ outline:none; border-color:var(--tampon); }
.lba-recherche-form--mobile{ padding:0; max-width:none; margin:0 0 4px; }

.lba-menu-mobile{ position:fixed; inset:0; z-index:150; background:var(--kraft); padding:90px 24px 24px; display:flex; flex-direction:column; gap:24px; overflow-y:auto; }
.lba-menu-mobile[hidden]{ display:none; }
/* 🪤 Correction /peaufiner LOT 2 (25/09) : le panneau plein écran n'avait AUCUN moyen
   tactile de le refermer (seule la touche Échap, inutilisable au doigt) — trouvé en
   testant le parcours réel (capture interne). Même contrat data-menu-toggle : cliquer
   la croix bascule l'état comme le burger, aucun JS supplémentaire nécessaire. */
.lba-menu-mobile-fermer{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:var(--reglisse); color:var(--kraft); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lba-menu-mobile-liste{ display:flex; flex-direction:column; gap:18px; }
.lba-menu-mobile-liste a{ font-family:'Inter', Arial, sans-serif; font-weight:600; font-size:22px; color:var(--reglisse); text-decoration:none; }
.lba-menu-mobile-cta{ margin-top:auto; }

/* 🪤 Correction /peaufiner LOT 2 (25/09), B-MO-05 poids ×9 (homepage+rubrique CONSTAT) :
   aucune barre de navigation fixe en bas nulle part sur le site, menu principal
   inaccessible à 390. Remplace l'ancienne .lba-barre-mobile (52px, réservée à
   page-argent.php, un seul CTA promo) par UNE barre façon app à 5 entrées, sur
   TOUTES les pages — jamais deux barres fixes empilées (ui-ux-pro-max, "don't stack
   multiple fixed elements"). Cibles ≥44px (poids tactile), ≤5 entrées (repère
   bottom-nav), "Comparer" reprend le rôle de l'ancienne bande promo. */
.lba-nav-app{ position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; background:var(--carton); border-top:1px solid var(--filet); padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -2px 10px rgba(0,0,0,.06); }
@media (min-width:1000px){ .lba-nav-app{ display:none; } }
.lba-nav-app-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; min-width:44px; padding:4px 2px; font-family:'Inter', Arial, sans-serif; font-weight:600; font-size:11px; line-height:1.1; color:var(--reglisse-doux); text-decoration:none; background:none; border:none; cursor:pointer; border-radius:8px; }
.lba-nav-app-item svg{ width:22px; height:22px; flex:none; }
.lba-nav-app-item[aria-current], .lba-nav-app-item:hover{ color:var(--tampon); }
.lba-nav-app-item--cta{ color:var(--tampon); }

@media (max-width:999px){
  /* Le contenu (et le pied de page) ne doivent jamais se cacher sous la barre basse
     fixe : padding-bottom du body, jamais une marge, pour que le fond des dernières
     sections aille bien jusqu'au bord au-dessus de la barre. */
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   14. HERO
   ========================================================================== */
.lba-hero{ background:var(--kraft); padding:var(--rythme-mobile) 0; }
@media (min-width:900px){ .lba-hero{ padding:var(--rythme) 0; } }
.lba-hero-in{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
@media (min-width:960px){ .lba-hero-in{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:40px; } }
.lba-hero-texte{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.lba-preuves{ list-style:none; margin:8px 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.lba-preuves li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; }
.lba-hero-photo{ margin:8px 0 0; position:relative; }
.lba-hero-photo img{ border-radius:var(--rayon-carte); aspect-ratio:4/3; object-fit:cover; width:100%; }
.lba-hero-photo figcaption{ position:absolute; left:14px; bottom:14px; }
.lba-hero-formulaire{ position:relative; min-width:0; }
.lba-hero-alexis{ position:absolute; left:-30px; top:-30px; z-index:2; }
@media (max-width:960px){ .lba-hero-alexis{ width:72px; height:auto; left:auto; right:16px; top:-36px; } }

/* ============================================================================
   15. GRILLES ÉDITORIALES / SECTIONS ACCUEIL
   ========================================================================== */
.lba-grille-metiers{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px; }
/* /peaufiner LOT 8c (26/09) : grille à 8 colonnes (chaque carte span 2 = 4/rangée) pour
   pouvoir CENTRER une 2e rangée incomplète (7 cartes = 4+3) au lieu de la laisser collée à
   gauche avec un trou à droite. Le trio nth-child/nth-last-child ne s'active QUE quand il y
   a exactement 7 cartes (vérifié par la combinaison des deux compteurs) ; avec un autre
   total, la grille reste un 4/rangée classique sans centrage forcé. */
@media (min-width:900px){
  .lba-grille-metiers{ grid-template-columns:repeat(8,1fr); }
  .lba-grille-metiers .lba-carte-metier{ grid-column:span 2; }
  .lba-grille-metiers .lba-carte-metier:nth-child(5):nth-last-child(3){ grid-column:2 / span 2; }
  .lba-grille-metiers .lba-carte-metier:nth-child(6):nth-last-child(2){ grid-column:4 / span 2; }
  .lba-grille-metiers .lba-carte-metier:nth-child(7):nth-last-child(1){ grid-column:6 / span 2; }
}
@media (max-width:640px){
  /* /peaufiner LOT 3 (25/09) : à 320px seulement, scrollWidth du document mesurait 355 contre
     320 (signalé par LOT 2). Diagnostic par mesure live (getComputedStyle, Playwright) : avec
     "display:grid; grid-auto-flow:column; grid-auto-columns:78%" dans un conteneur overflow-x:auto,
     le calcul du "78%" et la largeur propre du conteneur ("width:100%") restaient indéterminés —
     essayé avec ET sans "grid-template-columns:none", le conteneur se stabilisait quand même à
     256px au lieu de 288px (largeur réelle de .lba-enveloppe à 320px), laissant les cartes
     déborder de 35px du document. C'est un flou connu de CSS Grid (grid-auto-columns en % dans un
     contexte overflow:auto à largeur non définitive) : remplacé par FLEXBOX, dont la résolution de
     largeur est prévisible dans ce même contexte. Revérifié en direct : scrollWidth=320=innerWidth. */
  .lba-grille-metiers{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; width:100%; max-width:100%; }
  .lba-grille-metiers .lba-carte-metier{ flex:0 0 78%; scroll-snap-align:start; min-width:0; }
  .lba-grille-metiers .lba-carte-corps{ min-width:0; }
  .lba-grille-metiers .lba-carte-souligne{ overflow-wrap:anywhere; } }
.lba-lien-discret{ text-align:center; margin-top:20px; }
.lba-lien-discret a{ color:var(--reglisse-doux); font-size:14px; }

/* 🪤 /peaufiner LOT 8a (26/09/2026), point 4 (R-1181/R-1187) : refonte complète — mascotte
   retirée, 2 colonnes seulement (corps / CTA, la mascotte occupait l'ex-1re colonne), 5
   étapes alignées avec de vraies pastilles rondes plutôt que .lba-touche (pensée pour des
   boutons de formulaire : min-height 64px, box-shadow porté, d'où les "hautes cases
   blanches étirées" constatées). */
/* /peaufiner LOT 8e (26/09/2026), point 1 (R-0837) : la grille 1.6fr/1fr (corps à gauche,
   CTA à droite) laissait un grand vide au milieu dès que la frise repassait en colonne
   verticale collée à gauche (LOT 8c). Refonte : en dessous de 900px, une seule colonne
   empilée (comme avant, frise verticale, aucune régression mobile) ; à partir de 900px,
   la bande reste en 1 seule colonne PLEINE LARGEUR (plus de grille 2 colonnes) — le titre
   et la frise HORIZONTALE des 5 étapes occupent toute la largeur, le CTA vient ensuite,
   centré dans l'axe, sans vide mort. */
.lba-test-bande{ display:flex; flex-direction:column; gap:28px; align-items:stretch; }
.lba-test-corps{ display:flex; flex-direction:column; gap:20px; min-width:0; }
/* /peaufiner LOT 8c (26/09) : les 5 pastilles en ligne avec flex-wrap laissaient l'étape 5
   seule sur une 2e ligne dès que la colonne texte descendait sous ~830px (R-0552) — frise
   VERTICALE par défaut (une étape par ligne, reliées par un filet), valable jusqu'à 900px
   (couvre le mobile, 390px inclus), ne dépend d'aucune largeur de colonne, ne peut plus
   créer d'orpheline. */
.lba-test-etapes{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.lba-test-etapes li{ display:flex; align-items:center; gap:12px; position:relative; }
.lba-test-etapes li:not(:last-child)::after{
  content:""; position:absolute; left:17px; top:36px; width:2px; height:14px; background:var(--filet);
}
.lba-test-etape-num{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--reglisse); color:var(--etiquette);
  font-family:'Inter', Arial, sans-serif; font-weight:700; font-size:14px;
}
.lba-test-etape-texte{ font-size:14px; font-weight:600; color:var(--reglisse); }
/* /peaufiner LOT 8e, point 1 : à partir de 900px, frise HORIZONTALE — pastille au-dessus,
   libellé centré dessous, reliées par un filet passant au niveau du centre des pastilles
   (dessiné par ::after, d'un bord de pastille au bord de la suivante, jamais par-dessus le
   texte). 5 étapes égales (flex:1) réparties sur toute la largeur du conteneur. */
@media (min-width:900px){
  .lba-test-etapes{ flex-direction:row; align-items:flex-start; gap:8px; }
  .lba-test-etapes li{ flex:1 1 0; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .lba-test-etapes li:not(:last-child)::after{
    left:calc(50% + 18px); top:17px; width:calc(100% - 36px); height:2px;
  }
  .lba-test-etape-texte{ font-size:13px; }
}
.lba-test-cta{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--carton); border:1px solid var(--filet); border-radius:var(--rayon-carte);
  padding:24px; width:100%;
}
/* Point 1 (suite) : le CTA « dans l'axe » — centré sous la frise plutôt que collé à droite. */
@media (min-width:900px){
  .lba-test-cta{ max-width:340px; margin:0 auto; align-items:center; text-align:center; }
}

/* 🪤 /peaufiner LOT 8a (26/09/2026), point 5 (R-1181/R-1187, P-542) : le <table> brut
   (en-têtes sur une bande noire, 4 lignes de corps) est remplacé par 3 cartes — voir
   .lba-comparo-*. Règles .lba-tableau conservées pour d'éventuels tableaux WordPress natifs
   ailleurs (the_content), mais plus utilisées par cette section. */
.lba-tableau-boite{ padding:20px; overflow-x:auto; }
.lba-tableau{ min-width:640px; }
.lba-tableau th, .lba-tableau td{ padding:12px 14px; border-bottom:1px solid var(--filet); text-align:left; vertical-align:top; font-size:14px; font-variant-numeric:tabular-nums; }
.lba-tableau thead th{ background:var(--reglisse); color:var(--kraft); }
.lba-comparo-grille{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:28px; }
@media (min-width:800px){ .lba-comparo-grille{ grid-template-columns:repeat(3,1fr); } }
.lba-comparo-carte{ padding:22px; display:flex; flex-direction:column; gap:18px; }
.lba-comparo-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.lba-comparo-liste li{ border-bottom:1px solid var(--filet); padding-bottom:12px; }
.lba-comparo-liste li:last-child{ border-bottom:0; padding-bottom:0; }
.lba-comparo-label{ display:block; font-family:'Inter', Arial, sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--reglisse-doux); font-weight:700; margin-bottom:4px; }
.lba-comparo-valeur{ display:block; font-size:15px; font-weight:600; line-height:1.4; }
.lba-source-note{ font-size:12px; color:var(--reglisse-doux); margin:14px 0 0; text-align:center; }
.lba-cta-fin{ text-align:center; margin-top:24px; }
.sbs_tableau{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sbs_tableau table{ min-width:560px; }

/* /peaufiner LOT 8c (26/09) : align-items:start — sans ça, la carte span-3 posée à côté de
   la grande carte (16/9, très haute) était étirée par CSS Grid à la même hauteur que sa
   voisine, avec l'image 4/3 + le titre qui ne remplissaient qu'une fraction de la carte :
   grand vide sous le titre (R-0837). Chaque carte garde désormais SA hauteur de contenu. */
.lba-grille-editoriale{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; margin-top:24px; align-items:start; }
.lba-grille-editoriale .lba-carte-article{ grid-column:span 12; }
@media (min-width:800px){ .lba-grille-editoriale .lba-carte-article{ grid-column:span 6; } .lba-grille-editoriale .lba-carte-article--grande{ grid-column:span 12; } }
@media (min-width:1100px){ .lba-grille-editoriale .lba-carte-article{ grid-column:span 3; } .lba-grille-editoriale .lba-carte-article--grande{ grid-column:span 8; } }

.lba-methode{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .lba-methode{ grid-template-columns:1.4fr 1fr; align-items:start; } }
.lba-methode-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.lba-methode-liste li{ display:flex; align-items:center; color:var(--vfd-doux); font-size:15px; }
.lba-encart{ padding:20px; border-radius:var(--rayon-carte); }
.lba-encart--attention{ background:var(--fond-alt-doux); color:var(--encre); border-left:4px solid var(--alerte); }
.lba-encart-titre{ font-weight:700; font-family:'Inter',Arial,sans-serif; margin-bottom:6px; }

.lba-grille-rubriques{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:24px; }
@media (min-width:700px){ .lba-grille-rubriques{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .lba-grille-rubriques{ grid-template-columns:repeat(3,1fr); } }

.lba-actu-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
/* /peaufiner LOT 8c (26/09) : la grande carte reste seule en tête, les 3 petites passent
   SOUS elle en grille (au lieu d'une colonne étroite à côté) — colonne unique, plus de
   media query 1.3fr/1fr. */
.lba-actu-grille{ display:flex; flex-direction:column; gap:24px; margin-top:20px; }
/* 🪤 /peaufiner LOT 8a (26/09/2026), point 6 (R-1181/R-1187) : l'image à la une plafonnée
   explicitement à 45% de la hauteur d'écran, quel que soit son ratio naturel. */
.lba-actu-grille .lba-carte-article--grande .lba-carte-img{ max-height:45vh; }
/* Cartes « autres actus » (ex-liste de liens bruts, R- du 26/09) : vignette 16/9 + date +
   titre, mêmes codes visuels que les autres cartes du site (.lba-carte h3 a → pas de bleu
   souligné, cf. règle générale ligne ~160). 1 colonne en mobile, 3 à partir de 700px. */
.lba-actu-lignes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:700px){ .lba-actu-lignes{ grid-template-columns:repeat(3,1fr); } }
.lba-carte-actu .lba-carte-img{ aspect-ratio:16/9; }
.lba-carte-actu .lba-carte-corps{ padding:12px 14px; }
.lba-carte-actu h3{ font-size:15px; margin:4px 0 0; }
.lba-carte-actu .lba-date-tampon{ font-size:12px; }
.lba-date-tampon{ display:block; font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--tampon); margin-bottom:2px; }
.lba-bande--vitre .lba-date-tampon{ color:var(--vfd-doux); }

/* /peaufiner LOT 8c (26/09) : le site a 3 auteurs réels (pas 4) — une grille figée à 4
   colonnes collait les 3 cartes à gauche avec un trou à droite. auto-fit + justify-content:
   center s'adapte au nombre réel d'auteurs (3 aujourd'hui, jusqu'à 4) sans jamais laisser de
   trou, quel que soit le compte. */
.lba-grille-auteurs{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:28px; }
@media (min-width:800px){ .lba-grille-auteurs{ grid-template-columns:repeat(auto-fit,minmax(160px,200px)); justify-content:center; } }

.lba-reprise{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.lba-touches--reprise{ max-width:760px; width:100%; }

/* ============================================================================
   16. POP-UP DE SORTIE (rendue par inc/lba-partials.php, designer B) et COOKIES
   — classes exactes de leur markup : lba-popup-fond, lba-popup-carte, lba-popup-croix,
   lba-popup-illu, lba-popup-corps, lba-popup-titre, lba-popup-benefices,
   lba-popup-actions, lba-popup-retour, lba-cookies, lba-cookies-actions.
   ========================================================================== */
.lba-popup-fond{ position:fixed; inset:0; background:rgba(35,26,18,.68); z-index:300; }
.lba-popup-fond[hidden]{ display:none; }
/* C7 (26/09/2026) : bord "ticket déchiré" (clip-path zigzag) retiré — carte Square nette,
   même règle que le reste du site (un rectangle à coins arrondis, jamais un bord découpé). */
.lba-popup-carte{
  position:fixed; z-index:301; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(620px, 92vw); max-height:90vh; overflow-y:auto; background:var(--carton); border-radius:16px;
}
.lba-popup-carte[hidden]{ display:none; }
.lba-popup-croix{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; background:var(--reglisse); color:var(--kraft); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.lba-popup-illu{ margin:0; aspect-ratio:16/9; background:var(--etiquette); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lba-popup-illu img{ height:100%; width:auto; object-fit:contain; }
.lba-popup-corps{ padding:24px; display:flex; flex-direction:column; gap:12px; }
.lba-popup-titre{ font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:26px; margin:0; }
.lba-popup-benefices{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:15px; }
.lba-popup-benefices li::before{ content:"✓ "; color:var(--conforme); font-weight:700; }
.lba-popup-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:6px; }
.lba-popup-retour{ background:none; border:none; color:var(--reglisse-doux); text-decoration:underline; cursor:pointer; padding:6px 0; }
@media (max-width:640px){ .lba-popup-carte{ width:92vw; } .lba-popup-illu{ max-height:120px; } }

.lba-cookies{ position:fixed; left:16px; bottom:16px; z-index:200; width:min(560px, calc(100vw - 32px)); background:var(--carton); border:1px solid var(--filet); border-radius:var(--rayon-carte); padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.15); }
.lba-cookies[hidden]{ display:none; }
.lba-cookies-texte, .lba-cookies p{ font-size:14px; margin:0 0 12px; }
.lba-cookies-actions{ display:flex; gap:10px; }
.lba-cookies-actions .lba-bouton{ flex:1; }
/* 🪤 /peaufiner LOT 4 (26/09/2026), point 21 : `bottom:68px` avait été écrit avant que le
 * markup du bandeau n'existe (LOT 2, 25/09) — une fois le vrai bandeau posé, mesuré en direct
 * (Playwright) : ses boutons Accepter/Refuser chevauchaient la barre de nav basse (LOT 2,
 * 65px de haut) de ~30px, qui interceptait le clic (élément "not stable"/"intercepts pointer
 * events"). Même valeur que le padding-bottom du <body> sous la barre basse (LOT 2, déjà
 * mesurée avec un vrai espace). */
@media (max-width:1000px){ .lba-cookies{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* ============================================================================
   17. FAQ / SOMMAIRE (générés par functions.php the_content)
   ========================================================================== */
.lba-sommaire{ background:var(--carton); border:1px solid var(--filet); border-radius:var(--rayon-carte); padding:18px 20px; margin:0 0 28px; }
.lba-sommaire-titre{ font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px; }
.lba-sommaire ol{ margin:0; padding-left:18px; }
.lba-faq{ border-bottom:1px solid var(--filet); padding:14px 0; }
.lba-faq summary{ cursor:pointer; font-weight:600; font-family:'Inter',Arial,sans-serif; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.lba-faq summary::-webkit-details-marker{ display:none; }
.lba-faq summary::after{ content:"+"; font-size:20px; }
.lba-faq[open] summary::after{ content:"–"; }
.lba-faq div{ padding-top:10px; color:var(--reglisse-doux); }

/* ============================================================================
   18. SIGNATURE AUTEUR (composant partagé, single.php)
   ========================================================================== */
.lba-signature{ display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--carton); border-radius:var(--rayon-carte); border:1px solid var(--filet); }
.lba-signature-photo, .lba-signature img{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none; }
.lba-signature-nom{ font-family:'Inter',Arial,sans-serif; font-weight:700; margin:0 0 2px; }
.lba-signature-role{ font-size:13px; color:var(--reglisse-doux); margin:0 0 8px; }
.lba-signature-bio{ font-size:14px; color:var(--reglisse-doux); margin:0 0 6px; }
.lba-signature--compacte{ padding:12px; gap:10px; }
.lba-signature--compacte .lba-signature-photo{ width:48px; height:48px; }

/* ============================================================================
   19bis. PIED DE PAGE — /peaufiner LOT 8a (26/09/2026), point 7 (R-1181/R-1187)
   footer.php n'a JAMAIS eu de CSS depuis sa création (0 règle .lba-pied* trouvée dans
   tout le thème, confirmé par grep avant cette session) : il se rendait en listes à
   puces brutes. Classes exactes du markup (footer.php) : lba-pied, lba-pied-grille,
   lba-pied-col, lba-pied-col--marque, lba-pied-liste, lba-pied-titre, lba-pied-logo,
   lba-pied-mission, lba-pied-legal, lba-pied-recherche.
   ========================================================================== */
/* REFONTE C1 (26/09/2026) : pied de page = seul bloc sombre du site avec le CTA final, fond
   #030303 exact du relevé Square (RELEVE-MODELE.md §3), pas l'encre générale #1A1A1A. */
.lba-pied{ background:#030303; color:#FFFFFF; padding-top:var(--rythme-mobile); }
@media (min-width:900px){ .lba-pied{ padding-top:var(--rythme); } }
.lba-pied a{ color:var(--kraft); text-decoration:none; }
.lba-pied a:hover, .lba-pied a:focus-visible{ text-decoration:underline; }
.lba-pied-grille{ display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.18); }
@media (min-width:640px){ .lba-pied-grille{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .lba-pied-grille{ grid-template-columns:1.5fr repeat(4,1fr); gap:28px; } }
.lba-pied-col--marque{ display:flex; flex-direction:column; gap:14px; grid-column:1 / -1; }
@media (min-width:1100px){ .lba-pied-col--marque{ grid-column:auto; } }
.lba-pied-logo{ margin:0; }
.lba-pied-logo svg{ width:150px; height:auto; }
.lba-pied-mission{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.75); max-width:34ch; margin:0; }
/* /peaufiner LOT 8c (26/09) : "CAISSE ENREGISTREUSE" (majuscules via text-transform) passait
   sur 2 lignes dans la colonne du milieu (~205px à 1440, grille 1.5fr+4×1fr) — taille et
   crénage resserrés pour tenir sur une ligne, nowrap en filet de sécurité. Interlignage des
   liens resserré (gap 11px → 8px, poids ×11 = trop aéré pour une colonne de pied de page). */
.lba-pied-titre{ font-family:'Inter', Arial, sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.02em; color:var(--etiquette); margin:0 0 14px; white-space:nowrap; }
.lba-pied-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.lba-pied-liste a{ font-size:14px; line-height:1.3; }
/* Recherche du footer volontairement DIFFÉRENTE de celle du header (R-0565) : pilule
   sombre discrète dans le corps du pied, pas la barre pleine largeur du header/burger. */
.lba-pied-recherche{ padding:28px 16px; border-bottom:1px solid rgba(255,255,255,.18); }
.lba-recherche-form--pied{
  display:flex; align-items:center; gap:6px; max-width:380px; margin:0; padding:4px 4px 4px 18px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:999px;
}
.lba-recherche-form--pied input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--kraft); min-height:40px;
  font-size:14px; padding:0;
}
.lba-recherche-form--pied input::placeholder{ color:rgba(255,255,255,.55); }
.lba-recherche-form--pied input:focus{ outline:none; }
.lba-recherche-form--pied .lba-bouton--etiquette{ width:38px; height:38px; flex:none; }
.lba-pied-legal{ display:block; padding:18px 16px; font-size:12px; color:rgba(255,255,255,.6); text-align:center; }
@media (max-width:999px){ .lba-pied{ padding-bottom:0; } }

/* ============================================================================
   20. EN-TÊTE DE PAGE — composant partagé (REFONTE C1, 26/09/2026)
   Remplace .lba-page-bandeau / .lba-rubrique-bandeau / .lba-contact-bandeau (fond sombre
   var(--reglisse) + photo assombrie, "bandeau blanc collé à gauche" R-1181) : fil d'Ariane +
   H1 + chapô dans le conteneur, fond clair, style Square (RELEVE-MODELE.md §4, page rubrique/
   annexe = colonne éditoriale). Branché sur page.php, archive.php, page Contact.
   Rendu par lba_entete_page() — inc/lba-partials.php.
   ========================================================================== */
.lba-entete-page{ background:var(--fond-alt); padding:40px 0; border-bottom:1px solid var(--bordure); }
.lba-entete-page .lba-enveloppe{ max-width:820px; }
.lba-entete-page .lba-fil-ariane{ font-size:13px; color:var(--gris-texte); margin-bottom:14px; }
.lba-entete-page .lba-fil-ariane a{ color:var(--gris-texte); text-decoration:underline; }
.lba-entete-page-titre{ font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 10px; color:var(--encre); }
.lba-entete-page-chapo{ font-size:17px; color:var(--gris-texte); max-width:65ch; margin:0; }
.lba-entete-page-extra{ margin-top:10px; font-size:14px; color:var(--gris-texte); }
@media (max-width:640px){ .lba-entete-page{ padding:28px 0; } }
/* /peaufiner C6 (26/09/2026), CO-007 : sur /contact/ seulement (body class du template),
 * bannière resserrée pour que le formulaire tienne à l'écran sans scroll — la bannière des
 * AUTRES pages (article/catégorie/à-propos/…) n'est PAS touchée, même règle, même DA. */
.page-template-page-contact-php .lba-entete-page{ padding:8px 0; }
.page-template-page-contact-php .lba-entete-page .lba-fil-ariane{ margin-bottom:3px; }
.page-template-page-contact-php .lba-entete-page-titre{ margin:0 0 2px; }
@media (max-width:640px){
  .page-template-page-contact-php .lba-entete-page-chapo{ font-size:14.5px; }
}

/* ============================================================================
   19. RÉDUCTION DE MOUVEMENT / IMPRESSION
   ========================================================================== */
@media print{ .lba-entete, .lba-menu-mobile, .lba-popup-fond, .lba-popup-carte, .lba-cookies, .lba-nav-app{ display:none !important; } }