/*
Theme Name: LogicielComptable v4
Theme URI: https://logicielcomptable.net
Author: Agence SW
Author URI: https://agence-sw.fr
Description: Theme du media independant LogicielComptable.net. Accueil pilote par le contenu de la page d accueil, options exposees en REST, harmonisation des mu-plugins du referentiel.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lc
Tags: blog, news, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. JETONS
   Deux jeux de noms cohabitent volontairement.
   - Les noms courts (--brand, --line, --surface) sont ceux du theme.
   - Les noms --lc-* sont le contrat historique consomme par les mu-plugins
     du referentiel et de la couche B2B. Ils sont mappes sur les premiers.
     Ne jamais les supprimer : leurs valeurs de repli codees en dur dans les
     mu-plugins sont l ancien bleu #0066CC, qui ressortirait sans rien casser.
   ========================================================================== */
:root{
  /* Marque : un seul accent, franc. Pas de seconde couleur decorative. */
  --brand:#0d766e;
  --brand-dark:#075e57;
  --brand-soft:#e4f0ee;
  --brand-contrast:#ffffff;

  /* Encres */
  --ink:#0e1a19;
  --text:#1b2726;
  --muted:#5a6a68;
  --muted-2:#6f7d7b;

  /* Fonds */
  --surface:#ffffff;
  --bg:#f6f8f7;
  --bg-alt:#eef2f1;

  /* Filets. La hierarchie passe par le trait, pas par l ombre. */
  --line:#dde5e3;
  --line-strong:#c3cfcd;

  /* Etats */
  --ok:#0f6b52;
  --warn:#a8620d;
  --err:#b4231d;

  /* Rayons : echelle courte et sobre, volontairement loin du look pilule. */
  --r-sm:3px;
  --r:6px;
  --r-lg:10px;

  /* Ombres : quasi absentes. Une seule surface est elevee, le selecteur. */
  --sh-sm:0 1px 1px rgba(14,26,25,.04);
  --sh:0 1px 2px rgba(14,26,25,.06);
  --sh-md:0 2px 6px rgba(14,26,25,.07);
  --sh-lg:0 12px 34px rgba(14,26,25,.10);

  --speed:160ms ease;
  --header-h:68px;
  --wrap:1180px;
  --measure:800px;

  /* Typographie */
  --font:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* ---- Contrat historique : mu-plugins referentiel + B2B ---- */
  --lc-primary:var(--brand);
  --lc-primary-dark:var(--brand-dark);
  --lc-primary-light:var(--brand-soft);
  --lc-secondary:var(--ink);
  --lc-text:var(--text);
  --lc-text-muted:var(--muted);
  --lc-text-light:var(--muted-2);
  --lc-bg:var(--surface);
  --lc-bg-alt:var(--bg-alt);
  --lc-border:var(--line);
  --lc-success:var(--ok);
  --lc-warning:var(--warn);
  --lc-error:var(--err);
  --lc-radius:var(--r);
  --lc-radius-lg:var(--r-lg);
  --lc-shadow-sm:var(--sh-sm);
  --lc-shadow:var(--sh);
  --lc-shadow-md:var(--sh-md);
  --lc-shadow-lg:var(--sh-lg);
  --lc-transition:var(--speed);
  --lc-header-height:var(--header-h);
  --lc-container:var(--wrap);
}

/* ==========================================================================
   2. RESET ET BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  color:var(--text);
  background:var(--surface);
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--brand);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em;transition:color var(--speed)}
a:hover{color:var(--brand-dark)}

button,input,select,textarea{font:inherit;color:inherit}

hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}

::selection{background:var(--brand-soft);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   3. TYPOGRAPHIE
   Contraste marque entre les titres, serres et lourds, et un corps de texte
   normal. La hierarchie doit tenir en niveaux de gris : elle repose sur la
   taille, la graisse et le filet, jamais sur la couleur seule.
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-weight:650;
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:balance;
}

h1{font-size:clamp(2rem,1.18rem + 3.3vw,3.25rem);letter-spacing:-.032em;line-height:1.05}
h2{font-size:clamp(1.55rem,1.18rem + 1.5vw,2.1rem);letter-spacing:-.026em}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem)}
h4{font-size:1.02rem}
h5,h6{font-size:.9rem;letter-spacing:0}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

strong,b{font-weight:620;color:var(--ink)}
small{font-size:.8125rem}

blockquote{
  margin:2rem 0;
  padding:0 0 0 1.25rem;
  border-left:2px solid var(--brand);
  color:var(--ink);
  font-size:1.06rem;
}

code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9em}
code{background:var(--bg-alt);padding:.1em .35em;border-radius:var(--r-sm)}
pre{background:var(--ink);color:#e6edec;padding:1.1rem 1.25rem;border-radius:var(--r);overflow-x:auto}
pre code{background:none;padding:0;color:inherit}

/* Chiffres tabulaires partout ou des nombres s alignent : prix, scores,
   compteurs. Sans cela les colonnes de tarifs dansent. */
.tnum,.lc-figure,table td,table th{font-variant-numeric:tabular-nums}

/* ==========================================================================
   4. GABARIT
   ========================================================================== */
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.container{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}

.site-content{display:block}

.section{padding:4.5rem 0}
.section--tight{padding:3rem 0}
.section--alt{background:var(--bg)}
.section--ink{background:var(--ink);color:#c9d5d3}
.section--ink h2,.section--ink h3{color:#fff}

/* Un seul exergue par page, deux au maximum. Au-dela c est un tic. */
.eyebrow{
  display:inline-block;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 .6rem;
}
.section--ink .eyebrow{color:#7fc9bf}

.lede{font-size:1.0625rem;color:var(--muted);max-width:60ch}

.section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.5rem 2.5rem;
  align-items:end;
  margin-bottom:2.25rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.section-head h2{margin:0}
.section-head .lede{margin:.6rem 0 0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:var(--r);
  text-decoration:none;transition:top var(--speed);
}
.skip-link:focus{top:1rem;color:#fff}

/* ==========================================================================
   5. BANDEAU D ANNONCE ET EN-TETE
   ========================================================================== */
.announce{
  background:var(--ink);
  color:#cbd8d6;
  font-size:.8125rem;
  line-height:1.4;
  padding:.5rem 0;
}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.announce .wrap{display:flex;gap:.5rem;justify-content:center;align-items:baseline;flex-wrap:wrap;text-align:center}

.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.header-inner{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:1.75rem;
}

.site-branding{flex:none;display:flex;flex-direction:column;justify-content:center;line-height:1}
.site-branding a{text-decoration:none;color:var(--ink)}
.site-title{
  margin:0;font-size:1.28rem;font-weight:700;letter-spacing:-.038em;white-space:nowrap;
}
.site-title .tld{color:var(--muted);font-weight:500}
.site-title .mark{color:var(--brand)}
/* Premiere des deux occurrences autorisees de la signature d anciennete.
   La seconde est dans le colophon du pied de page. Nulle part ailleurs. */
.site-since{
  font-size:.625rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-top:.2rem;
}

.main-navigation{flex:1 1 auto;min-width:0}
.nav-menu{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:1.15rem;flex-wrap:nowrap;
}
.nav-menu li{position:relative}
.nav-menu a{
  display:block;padding:.4rem 0;
  font-size:.875rem;font-weight:550;color:var(--text);
  text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav-menu a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a{color:var(--ink);border-bottom-color:var(--ink)}

.nav-menu .sub-menu{
  position:absolute;top:100%;left:-.9rem;min-width:230px;
  list-style:none;margin:0;padding:.4rem 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(-2px);
  transition:opacity var(--speed),visibility var(--speed),transform var(--speed);
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav-menu .sub-menu a{padding:.5rem .9rem;border-bottom:0;white-space:normal}
.nav-menu .sub-menu a:hover{background:var(--bg-alt);color:var(--brand)}

.header-actions{flex:none;display:flex;align-items:center;gap:.6rem}

.menu-toggle{
  display:none;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;min-width:44px;padding:0 .7rem;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-size:.8125rem;font-weight:600;cursor:pointer;
}
.menu-toggle:hover{border-color:var(--line-strong)}

.mobile-navigation{display:none;border-top:1px solid var(--line);padding:.5rem 0 1rem}
.mobile-navigation.is-open{display:block}
.mobile-navigation .nav-menu{flex-direction:column;align-items:stretch;gap:0}
.mobile-navigation .nav-menu li{border-bottom:1px solid var(--line)}
.mobile-navigation .nav-menu li:last-child{border-bottom:0}
.mobile-navigation .nav-menu a{
  padding:.85rem .1rem;font-size:.95rem;border-bottom:0;min-height:44px;
  display:flex;align-items:center;
}
.mobile-navigation .sub-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  border:0;box-shadow:none;padding:0 0 .4rem .9rem;min-width:0;
}
.mobile-actions{display:flex;flex-direction:column;gap:.5rem;padding-top:.9rem}

/* ==========================================================================
   6. BOUTONS
   Deux niveaux seulement, plus un niveau discret. Pas de troisieme style
   decoratif : la page doit dire ou cliquer, pas proposer un nuancier.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:.6rem 1.15rem;
  font-size:.875rem;font-weight:600;line-height:1.2;
  text-align:center;text-decoration:none;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  cursor:pointer;transition:background var(--speed),border-color var(--speed),color var(--speed);
}
.btn:hover{background:var(--bg-alt);border-color:var(--ink);color:var(--ink)}

.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-contrast)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}

.btn-ghost{background:none;border-color:transparent;color:var(--brand);padding-inline:.35rem}
.btn-ghost:hover{background:none;border-color:transparent;color:var(--brand-dark);text-decoration:underline}

.btn-white{background:#fff;border-color:#fff;color:var(--ink)}
.btn-white:hover{background:var(--bg-alt);border-color:var(--bg-alt);color:var(--ink)}

.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Lien flechee : la fleche est un pseudo-element, elle ne fait pas partie
   du libelle et n est donc pas lue deux fois par les lecteurs d ecran. */
.arrow-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.875rem;font-weight:600;color:var(--brand);text-decoration:none;
}
.arrow-link::after{content:"\2192";transition:transform var(--speed)}
.arrow-link:hover::after{transform:translateX(3px)}

/* ==========================================================================
   7. HERO ET SELECTEUR
   Pas de degrade, pas de halo radial : un aplat et un filet. Le seul relief
   de la page est le panneau du selecteur, qui deborde volontairement sur la
   section suivante. C est la rupture de grille assumee du gabarit.
   ========================================================================== */
.hero{
  background:var(--surface);
  padding:3.5rem 0 0;
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:3.5rem;
  align-items:start;
}
.hero h1{margin:0 0 1rem;max-width:16ch}
.hero-lede{font-size:1.125rem;color:var(--muted);max-width:54ch;margin:0 0 1.6rem}
.hero-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:2rem}

/* Un seul chiffre, dans le fil du texte. Pas de rangee de statistiques :
   quatre nombres alignes sous un titre est la signature la plus reconnaissable
   des accueils generes. */
.hero-proof{
  border-top:1px solid var(--line);
  padding-top:1.1rem;
  margin-bottom:3.5rem;
  font-size:.9375rem;
  color:var(--muted);
  max-width:52ch;
}
.hero-proof .lc-figure{
  font-size:1.6rem;font-weight:700;color:var(--ink);
  letter-spacing:-.03em;line-height:1;
  margin-right:.15rem;
}

.finder{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:1.6rem 1.5rem;
  margin-bottom:-3.25rem;
  position:relative;
  z-index:2;
}
.finder-head{margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.finder-head .eyebrow{margin-bottom:.35rem}
.finder h2{font-size:1.2rem;margin:0;letter-spacing:-.024em}
.finder-note{font-size:.8125rem;color:var(--muted);margin:.45rem 0 0}

.field{margin-bottom:.9rem}
.field label,.field .label{
  display:block;font-size:.75rem;font-weight:650;color:var(--ink);
  margin-bottom:.35rem;letter-spacing:.01em;
}
.field select,.field input[type="text"],.field input[type="email"]{
  width:100%;min-height:44px;
  padding:.55rem .7rem;
  background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);
  font-size:.9375rem;color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235a6a68' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  padding-right:2.1rem;
}
.field input[type="text"],.field input[type="email"]{background-image:none;padding-right:.7rem}
.field select:focus,.field input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

/* ==========================================================================
   8. ACCUEIL : ACCES EDITORIAL
   Quatre entrees, deliberement inegales et sans icone. Des filets, pas des
   boites. L alternance large / etroite casse la symetrie des quatre cartes
   identiques.
   ========================================================================== */
.decide{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.decide-item{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.6rem 1.5rem 1.4rem;
  display:flex;flex-direction:column;
  background:var(--surface);
}
.decide-item:nth-child(1),
.decide-item:nth-child(4){grid-column:span 2}
.decide-item h3{margin:0 0 .5rem;letter-spacing:-.022em}
.decide-item:nth-child(1) h3,
.decide-item:nth-child(4) h3{font-size:1.45rem;max-width:20ch}
.decide-item p{font-size:.9375rem;color:var(--muted);margin:0 0 1.1rem;max-width:52ch}
.decide-item .arrow-link{margin-top:auto}

/* ==========================================================================
   9. ACCUEIL : PRINCIPES EDITORIAUX
   Quatre entrees en liste dense, pas trois cartes a icone.
   ========================================================================== */
.principles{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--bg);
  padding:1.5rem 1.6rem;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 2.5rem;
  margin:0;
}
.principles div{margin:0}
.principles dt{font-size:.9375rem;font-weight:650;color:var(--ink);margin-bottom:.15rem}
.principles dd{margin:0;font-size:.875rem;color:var(--muted);line-height:1.55}

/* ==========================================================================
   10. ACCUEIL : TABLEAU COMPARATIF
   ========================================================================== */
.table-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.trow{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) .8fr .9fr .9fr;
  align-items:center;gap:1rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line);
  font-size:.875rem;
}
.trow:last-child{border-bottom:0}
.trow.is-head{
  background:var(--bg);
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700;
}
.software{display:flex;align-items:center;gap:.7rem;font-weight:600;min-width:0}
.software a{color:var(--ink);text-decoration:none}
.software a:hover{color:var(--brand);text-decoration:underline}
.software-mark{
  flex:none;width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-size:.6875rem;font-weight:700;letter-spacing:.03em;
}
.status{
  display:inline-block;padding:.15rem .45rem;border-radius:var(--r-sm);
  background:var(--brand-soft);color:var(--brand-dark);
  font-size:.6875rem;font-weight:700;
}
.status.is-off{background:var(--bg-alt);color:var(--muted)}
.tprice{font-weight:600;color:var(--ink)}
.tprice .unit{font-weight:400;color:var(--muted);font-size:.8125rem}
.tnone{color:var(--muted-2)}

/* ==========================================================================
   11. ARTICLES
   Les vignettes sont de vraies images a la une. Aucun visuel decoratif
   genere en degrade : quand l image manque, c est le titre qui porte.
   ========================================================================== */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:2rem 1.75rem;
}
/* Sur l accueil, la premiere breve occupe deux colonnes et deux rangees :
   la grille cesse d etre un damier regulier. */
.articles-grid--featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.articles-grid--featured > .article-card:first-child{grid-column:span 2;grid-row:span 2}
.articles-grid--featured > .article-card:first-child .article-thumb{aspect-ratio:16/9}
.articles-grid--featured > .article-card:first-child h3{font-size:1.5rem;letter-spacing:-.028em}

.article-card{display:flex;flex-direction:column;min-width:0}
.article-thumb{
  display:block;margin:0 0 .85rem;
  aspect-ratio:16/10;overflow:hidden;
  background:var(--bg-alt);border-radius:var(--r);
  border:1px solid var(--line);
}
.article-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity var(--speed)}
.article-card:hover .article-thumb img{opacity:.88}
.article-card h3{font-size:1.0625rem;line-height:1.3;margin:0 0 .4rem;letter-spacing:-.018em}
.article-card h3 a{color:var(--ink);text-decoration:none}
.article-card h3 a:hover{color:var(--brand);text-decoration:underline}
.article-excerpt{font-size:.875rem;color:var(--muted);margin:0 0 .6rem}
.articles-grid--featured .article-card:not(:first-child) .article-excerpt{display:none}
.article-kicker{
  display:block;margin-bottom:.4rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);
}
.article-kicker a{color:inherit;text-decoration:none}
.article-kicker a:hover{text-decoration:underline}
.article-meta{
  margin-top:auto;padding-top:.35rem;
  font-size:.75rem;color:var(--muted);
}

/* Liste compacte d articles, sans vignette : archives longues et colonnes. */
.article-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.article-list li{border-bottom:1px solid var(--line);padding:.85rem 0}
.article-list a{color:var(--ink);text-decoration:none;font-weight:550;font-size:.9375rem}
.article-list a:hover{color:var(--brand);text-decoration:underline}
.article-list time{display:block;font-size:.75rem;color:var(--muted);margin-top:.15rem}

/* ==========================================================================
   12. BANDE PROFESSIONNELS
   Bloc a fort contraste, sans cercle decoratif ni grille de mini-chiffres.
   ========================================================================== */
.pro-band{background:var(--ink);color:#c9d5d3;padding:3.25rem 0}
.pro-band h2{color:#fff;margin:0 0 .6rem;max-width:22ch}
.pro-band p{color:#a9b8b5;max-width:58ch;margin:0 0 1.5rem}
.pro-band .eyebrow{color:#7fc9bf}
.pro-inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.5rem;align-items:end}
.pro-actions{display:flex;gap:.65rem;flex-wrap:wrap}
.pro-band .btn{background:transparent;border-color:#3a4b49;color:#fff}
.pro-band .btn:hover{background:#1b2b29;border-color:#5d716e;color:#fff}
.pro-band .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.pro-band .btn-primary:hover{background:#0a8479;border-color:#0a8479}

.separation-note{
  margin-top:2rem;padding-top:1.2rem;
  border-top:1px solid #253331;
  font-size:.8125rem;color:#8fa09d;max-width:75ch;
}
.separation-note b{color:#e2ebe9;font-weight:650}

/* ==========================================================================
   13. CONTENU EDITORIAL
   La largeur utile est de 752px, identique au theme precedent. La grille
   tarifaire de /annoncer/ est calee en auto-fit sur cette largeur : la
   modifier changerait son nombre de colonnes.
   ========================================================================== */
.entry-header{padding:2.75rem 0 0}
.entry-header .container{max-width:var(--measure)}
.entry-title{margin:0 0 .6rem}
.entry-meta{font-size:.8125rem;color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.entry-meta time{font-variant-numeric:tabular-nums}

.entry-thumbnail{max-width:1000px;margin:2rem auto 0;padding:0 1rem}
.entry-thumbnail img{border-radius:var(--r);border:1px solid var(--line);width:100%}

.entry-content{max-width:var(--measure);margin-inline:auto;padding:2rem 1rem;font-size:1.0625rem;line-height:1.72}
.entry-content > *:first-child{margin-top:0}
.entry-content h2{margin:2.4rem 0 .8rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.entry-content h3{margin:1.9rem 0 .6rem}
.entry-content h4{margin:1.5rem 0 .5rem}
.entry-content ul,.entry-content ol{margin:0 0 1.15em;padding-left:1.35rem}
.entry-content li{margin:.35rem 0}
.entry-content li::marker{color:var(--brand)}
.entry-content img{border-radius:var(--r);margin:1.75rem auto}
.entry-content figure{margin:1.75rem 0}
.entry-content figcaption{font-size:.8125rem;color:var(--muted);margin-top:.5rem;text-align:center}

.entry-content table{
  width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.9375rem;
  display:block;overflow-x:auto;
}
.entry-content th,.entry-content td{
  padding:.65rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
}
.entry-content th{background:var(--bg);font-weight:650;color:var(--ink);font-size:.8125rem}
.entry-content tbody tr:hover{background:var(--bg)}

/* Les blocs alignes larges echappent a la mesure de lecture. */
.entry-content .alignwide{width:min(1000px,92vw);margin-inline:calc(50% - min(500px,46vw))}
.entry-content .alignfull{width:100vw;margin-inline:calc(50% - 50vw);max-width:none}

.entry-footer{max-width:var(--measure);margin:0 auto 2.5rem;padding:0 1rem}
.entry-tags{display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;font-size:.8125rem}
.entry-tags a{
  display:inline-block;padding:.2rem .6rem;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--muted);text-decoration:none;
}
.entry-tags a:hover{border-color:var(--brand);color:var(--brand)}

.related{background:var(--bg);border-top:1px solid var(--line);padding:3rem 0}

/* ==========================================================================
   14. ARCHIVES, RECHERCHE, 404
   ========================================================================== */
.archive-header{padding:2.75rem 0 1.5rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem}
.archive-header h1{margin:0 0 .5rem}
.archive-header p{margin:0;color:var(--muted);max-width:62ch}
.archive-count{font-size:.8125rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

.searchform{display:flex;gap:.5rem;max-width:440px}
.searchform input[type="search"]{
  flex:1;min-height:44px;padding:.55rem .75rem;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);font-size:.9375rem;
}
.searchform input[type="search"]:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

.pagination{margin:3rem 0 1rem}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .7rem;
  border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);text-decoration:none;font-size:.875rem;font-variant-numeric:tabular-nums;
}
.pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:650}
.pagination .dots{border-color:transparent;min-width:auto;padding:0 .3rem}

.error-404{padding:5rem 0;text-align:center}
.error-404 .code{
  font-size:clamp(3.5rem,2rem + 6vw,6rem);font-weight:700;line-height:1;
  letter-spacing:-.05em;color:var(--line-strong);margin:0 0 .5rem;
}
.error-404 .searchform{margin:2rem auto 0}

/* ==========================================================================
   15. PIED DE PAGE
   Une colonne de marque large et trois colonnes de liens etroites, puis un
   colophon dense. La grille n est pas reguliere : ce n est pas un footer de
   gabarit en quatre parts egales.
   ========================================================================== */
.site-footer{background:var(--ink);color:#a9b8b5;padding:3.5rem 0 1.75rem;margin-top:4rem}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:2.5rem 2rem;
}
.footer-brand .site-title{color:#fff;font-size:1.2rem}
.footer-brand .site-title a{color:#fff}
.footer-brand .site-title .tld{color:#7f918e}
.footer-brand .site-title .mark{color:#4fb3a7}
/* Seconde et derniere occurrence autorisee de la signature d anciennete. */
.footer-brand .site-since{color:#7f918e;margin-bottom:.9rem}
.footer-brand p{font-size:.8125rem;color:#93a3a0;max-width:38ch;margin:0}

.footer-col h2{
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin:0 0 .8rem;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 .45rem}
.footer-col a{font-size:.8125rem;color:#a9b8b5;text-decoration:none;display:inline-block;padding:.15rem 0}
.footer-col a:hover{color:#fff;text-decoration:underline}

.footer-bottom{
  border-top:1px solid #253331;margin-top:2.5rem;padding-top:1.1rem;
  display:flex;gap:1rem 1.75rem;flex-wrap:wrap;align-items:baseline;
  font-size:.75rem;color:#7f918e;
}
.footer-bottom p{margin:0}
.footer-bottom a{color:#a9b8b5;text-decoration:none}
.footer-bottom a:hover{color:#fff;text-decoration:underline}

/* ==========================================================================
   16. COLONNE LATERALE ET WIDGETS
   Les quatre zones etaient declarees mais jamais rendues dans le theme v3.
   Elles sont desormais reellement affichees.
   ========================================================================== */
.has-sidebar{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:3rem;align-items:start;
}
.sidebar{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.widget{margin:0 0 2rem;font-size:.875rem}
.widget:last-child{margin-bottom:0}
.widget-title{
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.widget li:last-child{border-bottom:0}
.widget a{color:var(--text);text-decoration:none}
.widget a:hover{color:var(--brand);text-decoration:underline}
.site-footer .widget-title{color:#fff;border-bottom-color:#253331}
.site-footer .widget a{color:#a9b8b5}
.site-footer .widget a:hover{color:#fff}
.site-footer .widget li{border-bottom-color:#253331}

/* ==========================================================================
   17. UTILITAIRES
   ========================================================================== */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.section-footer{margin-top:2.5rem}
.stack-sm > * + *{margin-top:.75rem}
.rule-top{border-top:1px solid var(--line);padding-top:1.5rem}

/* ==========================================================================
   18. ADAPTATION
   Trois paliers seulement : 1024, 860 et 600. Verifie a 375, 768 et 1280.
   ========================================================================== */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .finder{margin-bottom:0;box-shadow:var(--sh-md)}
  .hero{padding-bottom:3rem}
  .hero-proof{margin-bottom:0}
  .articles-grid--featured{grid-template-columns:repeat(2,minmax(0,1fr))}
  .articles-grid--featured > .article-card:first-child{grid-column:span 2;grid-row:auto}
  .articles-grid--featured .article-card:not(:first-child) .article-excerpt{display:block}
  .pro-inner{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .has-sidebar{grid-template-columns:1fr;gap:2.5rem}
  .sidebar{position:static}
}

/* Le palier de bascule au burger est defini plus bas, en section 20, avec les
   autres seuils d en-tete. Il n a rien a faire ici : le garder a deux endroits
   garantissait qu on en modifie un seul le jour ou les libelles changent. */

@media (max-width:860px){
  .decide{grid-template-columns:1fr;border-left:0;border-right:0}
  .decide-item{border-right:0;padding-inline:0}
  .decide-item:nth-child(1),
  .decide-item:nth-child(4){grid-column:auto}
  .decide-item:nth-child(1) h3,
  .decide-item:nth-child(4) h3{font-size:1.25rem}
  .principles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:span 2}
  .section-head{grid-template-columns:1fr;align-items:start}
}

@media (max-width:600px){
  .wrap,.container{width:min(var(--wrap),100% - 1.75rem)}
  .section{padding:3rem 0}
  .hero{padding-top:2.25rem}
  .articles-grid--featured{grid-template-columns:1fr}
  .articles-grid--featured > .article-card:first-child{grid-column:auto}
  .articles-grid{gap:1.75rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .entry-content{font-size:1rem;padding:1.5rem 1rem}
  /* Le tableau comparatif abandonne les deux dernieres colonnes plutot que
     de defiler : sur mobile on garde le nom et le prix, qui decident. */
  .trow{grid-template-columns:minmax(0,1.5fr) auto}
  .trow > :nth-child(3),.trow > :nth-child(4){display:none}
  .hero-actions .btn{flex:1 1 100%}
}

/* ==========================================================================
   19. IMPRESSION
   ========================================================================== */
@media print{
  .site-header,.site-footer,.announce,.pro-band,.related,.pagination,.finder{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  .entry-content{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* Liste des mentions legales, en ligne dans le colophon. */
.footer-legal{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0}
.footer-legal li{margin:0}
.footer-legal a{font-size:.75rem}

/* Article avec colonne laterale : la mesure de lecture est portee par la
   colonne principale, pas par .entry-content, qui cesse de se centrer. */
.has-sidebar__main{min-width:0}
.has-sidebar .entry-content,
.has-sidebar .entry-footer{max-width:none;margin-inline:0;padding-inline:0}

/* L accueil laisse chaque section gerer sa largeur. */
.home-flow > *:last-child{margin-bottom:0}

/* Repli metrique de Geist. Sans cela la substitution de police provoque un
   saut de mise en page au chargement, que le report du JS de WP Rocket rend
   d autant plus visible. */
@font-face{
  font-family:"Geist Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");
  size-adjust:99%;
  ascent-override:95%;
  descent-override:24%;
  line-gap-override:0%;
}

/* Bloc de marque : le monogramme et le nom forment un seul lien. Le signe est
   un carre a forte marge interne, il est donc pose un peu plus grand que la
   hauteur du texte pour que le dessin lui-meme reste lisible. */
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--brand)}
.brand .custom-logo{height:34px;width:auto;max-height:34px;flex:none;margin:-1px 0}
.brand-nom{white-space:nowrap}
.site-footer .brand{color:#fff}
.site-footer .brand:hover{color:#7fc9bf}

/* ==========================================================================
   20. PALIERS DE L EN-TETE
   Le v3 devait forcer le burger sous 1280 px par du CSS additionnel : ses
   libelles de menu reclamaient environ 970 px a eux seuls et l en-tete, de
   hauteur fixe, debordait. Les libelles sont desormais courts, mais la marge
   reste mince entre la marque, le menu et les deux boutons. Deux paliers
   intermediaires evitent le retour du probleme.
   ========================================================================== */

/* Le bouton secondaire a quitte l en-tete. Avec six entrees de menu, dont
   « Facturation électronique » qui pese a lui seul 165 px, il ne restait plus
   de place a aucune largeur : le conteneur plafonne a 1180 px. Un en-tete a un
   seul appel se lit de toute facon mieux. Le bouton reste accessible dans le
   menu mobile, dans le pied de page et dans le bloc professionnels. */

/* Sous 1150 px, le menu horizontal n a plus la place de tenir sur une ligne.
   On bascule sur le burger avant qu il ne se replie, pas apres. */
@media (max-width:1150px){
  .main-navigation,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
  .header-inner{justify-content:space-between;gap:1rem}
  .header-actions{margin-left:auto}
}

/* ==========================================================================
   21. TRAITEMENT SIGNATURE DES DONNEES
   C est ici que se gagne la reconnaissance visuelle du site. Un comparateur
   ressemble a tous les comparateurs ; un observatoire qui montre ses relevés,
   ses dates et ses trous ne ressemble qu a lui-meme.

   Le vocabulaire est celui de /annoncer/, remonte et generalise : filets de
   1 px plutot que cartes, chiffres alignes en colonne, tampons de date, et la
   mention explicite de ce qui n a pas ete verifie. Rien n est arrondi, rien
   n est ombre, aucune donnee ne flotte.
   ========================================================================== */

/* --- Registre : une colonne de chiffres, des libelles dans le fil, un filet
       entre chaque ligne. Ce n est pas une rangee de statistiques : les
       nombres sont empiles et alignes a droite sur leur chasse, comme dans un
       relevé, et un seul est mis en avant. --- */
.ledger{
  border:1px solid var(--line-strong);
  background:var(--surface);
  padding:1.35rem 1.5rem 1.1rem;
}
.ledger-row{
  display:grid;
  grid-template-columns:5.5ch minmax(0,1fr);
  gap:1rem;
  align-items:baseline;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
}
.ledger-row:first-child{padding-top:0}
.ledger-fig{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:1.25rem;
  color:var(--ink);
  text-align:right;
  letter-spacing:-.02em;
}
.ledger-row.is-lead{padding-bottom:1rem}
.ledger-row.is-lead .ledger-fig{font-size:2.4rem;font-weight:650;letter-spacing:-.04em;line-height:1}
.ledger-row.is-lead .ledger-lab{font-size:1rem;color:var(--text)}
.ledger-lab{font-size:.9375rem;color:var(--muted);line-height:1.4}

/* --- Tampon de date. Le site releve des tarifs et des statuts : chaque
       chiffre doit dire quand il a ete lu. C est le geste editorial qui le
       separe des comparateurs d affiliation. --- */
.stamp{
  margin:.9rem 0 0;
  padding-top:.75rem;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}
.stamp::before{
  content:"";
  display:inline-block;
  width:14px;height:1px;
  background:var(--line-strong);
  vertical-align:middle;
  margin-right:.5rem;
}

/* --- Bloc observatoire : texte a gauche, registre a droite. Le registre ne
       depasse pas, il n a pas d ombre, il tient par son filet. --- */
.obs{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:3rem;
  align-items:start;
}
.obs-texte h2{margin:0 0 .7rem;max-width:18ch}
.obs-liens{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:1.4rem 0 0}

/* --- Donnee absente. Un observatoire credible affiche ses trous : « non
       publie » se lit, un tiret ne se lit pas. --- */
.tnone,.is-unknown{
  color:var(--muted-2);
  font-size:.8125rem;
}

/* --- Le referentiel adopte le meme traitement : chiffres tabulaires, filets,
       et une ligne de tampon sous le tableau. --- */
.table-card{border-color:var(--line-strong);border-radius:0}
.trow.is-head{letter-spacing:.08em}
.tprice{font-variant-numeric:tabular-nums}
.status{border-radius:0;letter-spacing:.02em}

/* --- Rappel : les cartes de la home gardent leurs rayons, mais tout ce qui
       porte de la donnee relevee passe a l angle vif. La distinction est
       volontaire et se lit : ce qui est arrondi est editorial, ce qui est vif
       est mesure. --- */
.ledger,.table-card,.status{border-radius:0}

@media (max-width:860px){
  .obs{grid-template-columns:1fr;gap:1.75rem}
  .ledger-row.is-lead .ledger-fig{font-size:2rem}
}
@media (max-width:600px){
  .ledger{padding:1.1rem 1.15rem .9rem}
  .ledger-row{grid-template-columns:4.5ch minmax(0,1fr);gap:.8rem}
}

/* Variante compacte des parcours. Les donnees remontent au-dessus, ces quatre
   entrees deviennent une barre d acces basse et non plus une section. Elles
   perdent l alternance large / etroite, qui n a plus lieu d etre a cette
   hauteur de page, mais gardent l absence d icone et de numerotation. */
.decide--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.decide--compact .decide-item{padding:1.2rem 1.15rem 1.1rem}
.decide--compact .decide-item:nth-child(1),
.decide--compact .decide-item:nth-child(4){grid-column:auto}
.decide--compact .decide-item h3{font-size:1.02rem;margin-bottom:.35rem}
.decide--compact .decide-item:nth-child(1) h3,
.decide--compact .decide-item:nth-child(4) h3{font-size:1.02rem;max-width:none}
.decide--compact .decide-item p{font-size:.875rem;margin-bottom:.8rem}

@media (max-width:960px){
  .decide--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .decide--compact{grid-template-columns:1fr}
}

/* Le monogramme est desormais detoure et monochrome. Sur l encre du pied de
   page il serait invisible : on l inverse plutot que de maintenir deux
   fichiers, qui divergeraient tot ou tard. */
.site-footer .brand .custom-logo{filter:brightness(0) invert(1)}
.site-footer .brand:hover .custom-logo{opacity:.85}