/* =========================================================================
   Mr CBD, "Le Comptoir du Nord"

   Feuille unique, ecrite a la main, servie telle quelle : aucune etape de
   build, aucune ressource tierce, aucune fonction de melange de couleurs.
   Toute couleur est une valeur litterale ou un var().
   Source qui fait autorite : docs/design-comptoir-du-nord.md, sections 4 et 5.

   SOMMAIRE
     0.   Police Bitter, trois sous-ensembles auto-heberges
     1.   Jetons (:root) et papier du cahier professionnel
     5.0  Socle, focus et gabarit
     5.1  En-tete, bandeau de preuve, navigation, frise
     5.2  Pied de page
     5.3  Boutons
     5.4  Cartes
     5.5  Carte-ville et plaque emaillee
     5.6  Fiches annuaire
     5.7  Cartes-offres
     5.8  Badges
     5.9  Formulaires
     5.10 Alertes
     5.11 Accordeon FAQ
     5.12 Fil d'Ariane et pagination
     5.13 Prose des articles importes
     5.14 Tableaux
     5.15 Hero et registre professionnel
     5.16 Calculateur de dosage
     5.17 Utilitaires, impression, contraste force
   ========================================================================= */

/* =========================================================================
   0. POLICE : Bitter variable, auto-hebergee dans public/fonts/bitter/.
      Un fichier par plage, graisses 400 a 700 dans le meme fichier.
      format("woff2") et non "woff2-variations" : ce hint n'a jamais ete
      standardise et empechait le chargement sous Chromium.
      font-display:swap, repli Georgia declare dans --titre.
   ========================================================================= */
@font-face{
  font-family:"Bitter";
  src:url("/fonts/bitter/bitter-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bitter";
  src:url("/fonts/bitter/bitter-latin-ext.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Bitter";
  src:url("/fonts/bitter/bitter-cyrillic.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* =========================================================================
   1. JETONS : palette, echelle typographique, gabarit
      Bloc :root complet de la section 4. Aucune valeur n'est deduite,
      tous les contrastes sont verifies dans la specification.
   ========================================================================= */
:root{
  color-scheme:light;

  /* papiers et surfaces */
  --craie:#F5EFE4;--chaux:#FFFCF6;--lin:#E6DBC9;
  --dossier:#EDF1F4;--dossier-lin:#DDE7ED;

  /* encres */
  --encre:#231A14;--suie:#5A4C40;--brume:#655849;

  /* brique : action */
  --brique-050:#FBEDE6;--brique-600:#B03D16;--brique-700:#8A2F10;--brique-800:#6E250D;

  /* ardoise : lieu et registre professionnel */
  --ardoise-050:#E9EFF3;--ardoise-200:#B8CEDA;--ardoise-600:#243F52;--ardoise-800:#1B3040;

  /* etats de service */
  --houblon-050:#EDF2E3;--houblon-700:#3D5726;
  --rouille-050:#FBEAE6;--rouille-800:#7E2115;

  /* laiton : payant */
  --laiton-100:#F5E7C8;--laiton-300:#E8C877;--laiton-900:#6B4610;

  /* filets */
  --trait:#DCCFB9;--trait-fort:#94805F;

  /* decor */
  --ciel:#EFF3F5;--mortier:#EDE4D5;--brq:#DEBBA3;

  /* gabarit */
  --laize:min(100% - 2rem,68rem);
  --laize-texte:min(100% - 2rem,42rem);
  --r-s:4px;--r-m:8px;--r-l:14px;
  --ombre-1:0 1px 0 rgba(35,26,20,.04),0 2px 6px -3px rgba(35,26,20,.18);
  --ombre-2:0 2px 0 rgba(35,26,20,.05),0 14px 28px -18px rgba(35,26,20,.42);
  --anneau:var(--ardoise-800);

  /* typographie */
  --titre:"Bitter",Georgia,"Times New Roman",serif;
  --texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --chiffre:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",Menlo,monospace;
  --t-surtitre:.75rem;--t-mention:.8125rem;--t-petit:.875rem;--t-champ:1rem;--t-base:1.0625rem;
  --t-h3:clamp(1.15rem,1.05rem + .45vw,1.35rem);
  --t-h2:clamp(1.45rem,1.2rem + 1.15vw,2.05rem);
  --t-h1:clamp(1.9rem,1.42rem + 2.2vw,2.95rem);
  --t-geant:clamp(2.4rem,1.7rem + 3.2vw,3.6rem);

  /* appareil a joints croises, tuile 60x26, une seule declaration pour tout le site */
  --mur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26' viewBox='0 0 60 26'%3E%3Crect width='60' height='26' fill='%23EDE4D5'/%3E%3Cg fill='%23DEBBA3'%3E%3Crect width='28' height='11'/%3E%3Crect x='30' width='28' height='11'/%3E%3Crect x='-15' y='13' width='28' height='11'/%3E%3Crect x='15' y='13' width='28' height='11'/%3E%3Crect x='45' y='13' width='28' height='11'/%3E%3C/g%3E%3C/svg%3E");
}

/* Cahier professionnel : /tarifs et /commander/*. Quatre jetons changent,
   tout le reste de la feuille suit sans une ligne de plus. */
body.cahier-pro{
  --craie:var(--dossier);
  --chaux:#FFFFFF;
  --lin:var(--dossier-lin);
  --trait:#C6D3DA;
  --trait-fort:#6E7C86;
}

/* =========================================================================
   5.0  SOCLE, FOCUS ET GABARIT
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--craie);color:var(--suie);
  font:var(--t-base)/1.65 var(--texte);font-synthesis-weight:none}
img,svg,video,iframe{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--titre);color:var(--encre);font-weight:700;
  letter-spacing:-.012em;text-wrap:balance;margin:0 0 .5em}
h1{font-size:var(--t-h1);line-height:1.08;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:1.18}
h3{font-size:var(--t-h3);line-height:1.3}
h4{font-size:var(--t-base);line-height:1.35}
p,ul,ol,dl{margin:0 0 1em}
p{text-wrap:pretty}
a{color:var(--brique-700);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--brique-800)}
strong,b{color:var(--encre)}
::selection{background:var(--laiton-100);color:var(--encre)}

/* Un seul point de verite pour le focus. L'anneau est decale de 2px : il se
   detache donc sur le fond de page, jamais sur la couleur du bouton. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--anneau);outline-offset:2px}
.bandeau-pro,.pied,.plaque{--anneau:var(--chaux)}

.surtitre{display:block;font:600 var(--t-surtitre)/1.4 var(--texte);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ardoise-600)}
.surtitre--vente{color:var(--laiton-900)}
.mention{font-size:var(--t-mention);color:var(--brume)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:.5rem;top:.5rem;z-index:99;background:var(--chaux);
  color:var(--encre);padding:.6rem 1rem;border-radius:var(--r-m)}
.invisible-sauf-lecteur{position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

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

/* --- GABARIT --- */
.section{width:var(--laize);margin-inline:auto;
  padding-block:clamp(2.2rem,1.6rem + 2.4vw,3.6rem)}
.section--serre{padding-block:clamp(1.4rem,1rem + 1.6vw,2.2rem)}
.section+.section{border-top:1px solid var(--trait)}
.section__tete{margin-bottom:1.5rem;max-width:44rem}
.section__tete>p{color:var(--brume);margin-bottom:0}
.pile{display:grid;gap:1rem}
.pile--large{gap:1.6rem}
.grille{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grille--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.texte{max-width:var(--laize-texte)}

/* =========================================================================
   5.1  EN-TETE, BANDEAU DE PREUVE, NAVIGATION, FRISE
   ========================================================================= */
.preuve{background:var(--chaux);border-bottom:1px solid var(--trait);
  font:600 var(--t-surtitre)/1 var(--texte);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brume)}
.preuve__bande{width:var(--laize);margin-inline:auto;display:flex;
  justify-content:space-between;gap:1rem;padding-block:.45rem;
  white-space:nowrap;overflow:hidden}
.preuve b{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:40rem){.preuve__bande>:first-child{display:none}
  .preuve__bande{justify-content:center}}

.entete{position:sticky;top:0;z-index:30;background:var(--chaux)}
.entete__barre{position:relative;width:var(--laize);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4.25rem}
.marque{display:inline-flex;flex-direction:column;gap:.15rem;
  text-decoration:none;line-height:1}
.marque__nom{font:700 1.45rem/1 var(--titre);color:var(--encre);letter-spacing:-.02em}
.marque__nom b{color:var(--brique-700);font-weight:inherit}
.marque__lieu{font:600 .625rem/1 var(--texte);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brume)}

.nav{display:flex;align-items:center;gap:.15rem}
.nav[hidden]{display:none}          /* indispensable : display:flex ecrase [hidden] */
.nav a{padding:.55rem .7rem;border-radius:var(--r-m);color:var(--suie);
  font:600 var(--t-petit)/1 var(--texte);text-decoration:none}
.nav a:hover{background:var(--lin);color:var(--encre)}
.nav a[aria-current=page]{color:var(--brique-800);
  box-shadow:inset 0 -3px 0 var(--brique-700)}
.nav__vente{color:var(--laiton-900)}

.burger{display:none}
@media (max-width:52rem){
  .entete__barre{min-height:3.6rem}
  .burger{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;
    padding:.55rem .75rem;border:1px solid var(--trait-fort);background:var(--chaux);
    color:var(--encre);border-radius:var(--r-m);cursor:pointer;
    font:600 var(--t-petit)/1 var(--texte)}
  .nav{position:absolute;inset:100% 0 auto;z-index:5;flex-direction:column;
    align-items:stretch;gap:0;background:var(--chaux);padding:.4rem;
    border-bottom:2px solid var(--trait);box-shadow:var(--ombre-2)}
  .nav a{padding:.9rem .8rem;border-radius:var(--r-s)}
  .nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--brique-700)}
}

/* --- FRISE DE BRIQUE : rendue par la tuile SVG, pas par des gradients.
   La demi-brique de bord gauche est portee par le SVG lui-meme. --- */
.frise{height:26px;background:var(--mur) repeat-x;background-size:60px 26px}
.frise--fine{height:18px;background-size:42px 18px}

/* =========================================================================
   5.2  PIED DE PAGE
   ========================================================================= */
.pied{background:var(--ardoise-600);color:var(--ardoise-200);font-size:var(--t-petit)}
.pied a,.pied strong,.pied b{color:#fff}
.pied h2{color:#fff;font-family:var(--texte);font-size:var(--t-surtitre);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.8rem}
.pied__grille{width:var(--laize);margin-inline:auto;padding-block:2.4rem 1.6rem;
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pied a{text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied__legal{border-top:1px solid rgba(255,255,255,.16)}
.pied__legal>div{width:var(--laize);margin-inline:auto;padding-block:1rem 1.6rem;
  font-size:var(--t-surtitre);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:.6rem}

/* =========================================================================
   5.3  BOUTONS : trois variantes, pas quatre
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.875rem;padding:.7rem 1.15rem;border:1px solid transparent;
  border-radius:var(--r-m);cursor:pointer;text-decoration:none;
  font:600 var(--t-petit)/1.2 var(--texte);
  transition:background-color .15s,border-color .15s,transform .06s}
.btn--brique{background:var(--brique-700);color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.btn--brique:hover{background:var(--brique-800);color:#fff}
.btn--brique:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.22)}
.btn--fantome{background:var(--chaux);color:var(--brique-800);border-color:var(--trait-fort)}
.btn--fantome:hover{background:var(--lin);border-color:var(--brique-600)}
.btn--discret{background:none;color:var(--suie);padding-inline:.55rem;text-decoration:underline}
.btn--discret:hover{color:var(--brique-800)}
.btn--large{width:100%}
@media (min-width:40rem){.btn--large{width:auto}}
.btn[disabled],.btn[aria-disabled=true]{background:var(--lin);color:var(--brume);
  border-color:var(--trait);box-shadow:none;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* =========================================================================
   5.4  CARTES
   ========================================================================= */
.carte{position:relative;display:flex;flex-direction:column;
  background:var(--chaux);border:1px solid var(--trait);border-radius:var(--r-l);
  padding:clamp(1.1rem,.85rem + 1vw,1.6rem);box-shadow:var(--ombre-1)}
.carte h2,.carte h3{margin-bottom:.35rem}
.carte>p:last-child{margin-bottom:0}
.carte__meta{margin:auto 0 0;padding-top:.7rem;font-size:var(--t-petit);
  color:var(--brume);font-variant-numeric:tabular-nums}

/* Carte entierement cliquable : UN seul lien, donc un seul arret de tabulation.
   INTERDIT sur toute carte contenant un second lien (telephone, site web). */
.carte--lien{transition:border-color .15s,box-shadow .15s,transform .15s}
.carte--lien a{text-decoration:none;color:inherit}
.carte--lien a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.carte--lien:hover{border-color:var(--brique-600);box-shadow:var(--ombre-2);
  transform:translateY(-2px)}
.carte--lien:has(a:focus-visible){outline:3px solid var(--anneau);outline-offset:2px}
.carte--lien a:focus-visible{outline:0}

/* Mise en avant payante : filet laiton + coiffe pleine. La coiffe survit a
   forced-colors et au daltonisme, la couleur seule ne porte jamais le sens. */
.carte--avant{border-color:var(--laiton-300);
  box-shadow:inset 0 3px 0 0 var(--laiton-900),var(--ombre-1)}
.carte--sobre{background:none;border-style:dashed;box-shadow:none}
.carte__coiffe{position:absolute;top:-.7rem;left:1.2rem}

/* =========================================================================
   5.5  CARTE-VILLE ET PLAQUE EMAILLEE : la signature
   ========================================================================= */
/* Une plaque designe un LIEU. Jamais un commerce, jamais une offre payante. */
.plaque{
  --vis:radial-gradient(circle,#D3DCE3 0 38%,#63757F 44% 78%,transparent 80%);
  position:relative;display:block;text-decoration:none;color:#fff;
  padding:clamp(.95rem,.6rem + 1.2vw,1.5rem) clamp(1.3rem,.9rem + 2vw,2.2rem);
  border-radius:5px;
  background:radial-gradient(130% 170% at 20% 6%,rgba(255,255,255,.17),transparent 60%),
    var(--ardoise-600);
  box-shadow:
    inset 0 0 0 3px var(--ardoise-600),        /* marge exterieure */
    inset 0 0 0 4px rgba(255,255,255,.9),      /* filet blanc grave */
    inset 0 0 0 7px var(--ardoise-600),
    inset 0 -2px 6px rgba(0,0,0,.28),          /* creux du bas */
    0 2px 0 rgba(0,0,0,.2),                    /* epaisseur de la tole */
    0 16px 26px -20px rgba(27,48,64,.85)}      /* ombre au mur */
.plaque::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background-image:var(--vis),var(--vis),var(--vis),var(--vis);
  background-size:7px 7px;background-repeat:no-repeat;
  background-position:11px 11px,calc(100% - 11px) 11px,
    11px calc(100% - 11px),calc(100% - 11px) calc(100% - 11px)}
.plaque h1,.plaque__titre{font-family:var(--titre);font-weight:700;color:#fff;
  margin:0;font-size:var(--t-h1);line-height:1.05;letter-spacing:-.015em}
.plaque__sous{display:block;margin-top:.45rem;font:600 var(--t-surtitre)/1.4 var(--texte);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ardoise-200)}
.plaque:is(:hover,:focus-visible){color:#fff}   /* neutralise a:hover du socle */

.plaques{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none}
.plaque--mini{padding:.5rem .9rem;border-radius:4px;min-height:2.25rem;
  display:inline-flex;align-items:center;
  font:600 var(--t-petit)/1.25 var(--texte);
  box-shadow:
    inset 0 0 0 2px var(--ardoise-600),
    inset 0 0 0 3px rgba(255,255,255,.85),
    inset 0 0 0 5px var(--ardoise-600),
    0 1px 0 rgba(0,0,0,.2)}
.plaque--mini::after{background-size:4px 4px;
  background-position:6px 6px,calc(100% - 6px) 6px,
    6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px)}
.plaque--mini:hover{background:radial-gradient(130% 170% at 20% 6%,
  rgba(255,255,255,.24),transparent 60%),var(--ardoise-800)}
.plaque--mini .km{color:var(--ardoise-200);font-weight:400;margin-left:.4rem;
  font-variant-numeric:tabular-nums}

/* =========================================================================
   5.6  FICHES ANNUAIRE : le composant qui rapporte
   ========================================================================= */
.fiches{list-style:none;margin:0;padding:0;border-top:2px solid var(--encre)}
.fiche{position:relative;display:grid;grid-template-columns:1fr auto;
  gap:.2rem 1.25rem;align-items:start;padding:1.15rem 0;
  border-bottom:1px solid var(--trait)}
.fiche__nom{grid-column:1;margin:0 0 .1rem;font-size:var(--t-h3)}
.fiche__nom a{color:var(--encre);text-decoration:none}
.fiche__nom a:hover{color:var(--brique-800);text-decoration:underline}
.fiche__nom a::after{content:"";position:absolute;inset:0}
.fiche__adr{grid-column:1;margin:0;color:var(--suie);font-size:var(--t-petit)}
/* Le telephone passe AU-DESSUS du calque de la fiche : c'est la conversion. */
.fiche__tel{grid-column:2;grid-row:1 / span 2;align-self:center;
  position:relative;z-index:1;display:inline-flex;align-items:center;
  min-height:2.75rem;padding:0 .2rem;white-space:nowrap;
  font-family:var(--chiffre);font-size:var(--t-petit);font-variant-numeric:tabular-nums;
  color:var(--brique-700);text-decoration:none}
.fiche__tel:hover{color:var(--brique-800);text-decoration:underline}
.fiche__badges{grid-column:1;margin-bottom:.35rem;display:flex;flex-wrap:wrap;gap:.4rem}
.fiche--premium{padding-left:1rem;
  box-shadow:inset 3px 0 0 var(--laiton-900);
  background:linear-gradient(90deg,var(--laiton-100),transparent 65%)}
@media (max-width:34rem){
  .fiche{grid-template-columns:1fr}
  .fiche__tel{grid-column:1;grid-row:auto;margin-top:.4rem}
}

/* =========================================================================
   5.7  CARTES-OFFRES : prix, avantages, etapes, recapitulatif
   ========================================================================= */
.prix{margin:.9rem 0 .2rem;font:700 clamp(1.8rem,1.5rem + 1.2vw,2.4rem)/1 var(--titre);
  color:var(--encre);font-variant-numeric:tabular-nums lining-nums}
.prix small{font:400 var(--t-petit)/1 var(--texte);color:var(--brume)}
.prix--gratuit{font-size:1.35rem;color:var(--suie)}
.avantages{list-style:none;margin:1.1rem 0;padding:0;flex:1;
  display:grid;gap:.55rem;font-size:var(--t-petit);color:var(--suie)}
.avantages li{display:grid;grid-template-columns:1.1rem 1fr;gap:.6rem}
.avantages li::before{content:"";width:.55rem;height:.3rem;margin-top:.42rem;
  border-inline-start:2px solid var(--brique-700);
  border-block-end:2px solid var(--brique-700);transform:rotate(-45deg)}
.avantages--eteint li::before{border-color:var(--brume)}

.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.etapes>li{counter-increment:e;border-top:2px solid var(--encre);padding-top:.8rem}
.etapes>li::before{content:counter(e,decimal-leading-zero);display:block;
  margin-bottom:.3rem;line-height:1;
  font:700 1.9rem/1 var(--titre);color:var(--brique-700);
  font-variant-numeric:tabular-nums lining-nums}
.etapes h3{margin-bottom:.25rem}
.etapes p{margin:0;font-size:var(--t-petit);color:var(--brume)}

.recap{margin:0;font-size:var(--t-petit)}
.recap>div{display:flex;justify-content:space-between;gap:1rem;
  padding-block:.5rem;border-bottom:1px solid var(--trait)}
.recap>div:last-child{border-bottom:0}
.recap dt{color:var(--brume)}
.recap dd{margin:0;text-align:right;color:var(--encre);font-weight:600}
.recap .ref{font-family:var(--chiffre);font-variant-numeric:tabular-nums}

/* =========================================================================
   5.8  BADGES : quatre sens, aucun recouvrement
   ========================================================================= */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;
  border-radius:999px;border:1px solid transparent;
  font:700 var(--t-surtitre)/1.5 var(--texte);letter-spacing:.05em;
  text-transform:uppercase}
.badge--premium{background:var(--laiton-100);color:var(--laiton-900);
  border-color:var(--laiton-900)}
.badge--exclusif{background:var(--ardoise-600);color:#fff;border-color:var(--ardoise-600)}
.badge--gratuit{background:var(--houblon-050);color:var(--houblon-700);
  border-color:var(--houblon-700)}
/* Mention legale : carree, tiretee, terne. Jamais valorisante. */
.badge--sponsorise{background:var(--lin);color:var(--encre);
  border:1px dashed var(--trait-fort);border-radius:var(--r-s);letter-spacing:.08em}

/* =========================================================================
   5.9  FORMULAIRES : champs, cartes de choix, segments
   ========================================================================= */
.form{display:grid;gap:1.05rem}
.form--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.champ{display:grid;gap:.3rem}
.champ--large{grid-column:1/-1}
.champ>label{font:600 var(--t-petit)/1.35 var(--texte);color:var(--encre)}
.champ:has(:required)>label::after{content:" *";color:var(--brique-700)}
.champ__aide{margin:0;font-size:var(--t-mention);color:var(--brume)}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:2.875rem;padding:.65rem .8rem;
  font:400 var(--t-champ)/1.4 var(--texte);color:var(--encre);
  background:var(--chaux);border:1px solid var(--trait-fort);border-radius:var(--r-m);
  transition:border-color .15s,background-color .15s}
.champ textarea{min-height:7rem;resize:vertical}
.champ ::placeholder{color:var(--brume);opacity:1}
.champ :is(input,select,textarea):hover{border-color:var(--brique-600)}
.champ:has([aria-invalid=true]) :is(input,select,textarea){
  border-color:var(--rouille-800);border-width:2px;background:var(--rouille-050)}
.champ__erreur{margin:0;font:600 var(--t-petit)/1.4 var(--texte);color:var(--rouille-800)}
fieldset{border:0;padding:0;margin:0 0 1.2rem;min-inline-size:0}
legend{padding:0;margin-bottom:.6rem;font:600 var(--t-petit)/1.3 var(--texte);
  color:var(--encre)}

/* Cartes de choix : formules, moyens de paiement. Le liseré interne de 3px
   est l'indicateur NON COLORE de selection : il ne doit jamais etre ecrase. */
.choix{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  padding:.85rem 1rem;background:var(--chaux);border:1px solid var(--trait);
  border-radius:var(--r-m);transition:border-color .15s,background-color .15s}
.choix:hover{border-color:var(--brique-600)}
.choix input{accent-color:var(--brique-700);margin-top:.2rem;flex:none;
  width:1.1rem;height:1.1rem}
.choix:has(:checked){border-color:var(--brique-700);background:var(--brique-050);
  box-shadow:inset 3px 0 0 var(--brique-700)}
.choix__nom{display:block;font-weight:600;color:var(--encre)}
.choix__prix{display:block;font-size:var(--t-petit);color:var(--brume);
  font-variant-numeric:tabular-nums}
.consentement{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-petit)}
.consentement input{accent-color:var(--brique-700);margin-top:.25rem;
  width:1.1rem;height:1.1rem;flex:none}
.honeypot{position:absolute!important;left:-9999px}

/* Segments : trois etats exclusifs. Le radio garde le focus clavier :
   opacity, jamais display:none ni hidden. */
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.segments label{display:block;position:relative}
.segments input{position:absolute;opacity:0;pointer-events:none}
.segments span{display:block;text-align:center;padding:.7rem .5rem;
  min-height:2.875rem;font-size:var(--t-petit);color:var(--encre);
  background:var(--chaux);border:1px solid var(--trait-fort);
  border-radius:var(--r-m);cursor:pointer}
.segments input:checked+span{background:var(--brique-700);border-color:var(--brique-700);
  color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.segments input:focus-visible+span{outline:3px solid var(--anneau);outline-offset:2px}
input[type=range]{width:100%;height:2.25rem;accent-color:var(--brique-700)}

/* =========================================================================
   5.10 ALERTES
   ========================================================================= */
.avis{border-radius:var(--r-m);padding:.9rem 1.1rem;border-inline-start:4px solid;
  font-size:var(--t-petit)}
.avis>:last-child{margin-bottom:0}
.avis--ok{background:var(--houblon-050);border-color:var(--houblon-700);color:var(--houblon-700)}
.avis--err{background:var(--rouille-050);border-color:var(--rouille-800);color:var(--rouille-800)}
.avis--info{background:var(--ardoise-050);border-color:var(--ardoise-600);color:var(--ardoise-600)}
.avis--garde{background:var(--laiton-100);border-color:var(--laiton-900);color:var(--laiton-900)}
.avis strong{color:inherit}
.avis ul{margin:.4rem 0 0;padding-inline-start:1.1rem}

/* =========================================================================
   5.11 ACCORDEON FAQ
   ========================================================================= */
.accordeon{background:var(--chaux);border:1px solid var(--trait);border-radius:var(--r-l)}
.accordeon+.accordeon{margin-top:.7rem}
.accordeon>summary{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none;
  font:700 1rem/1.4 var(--titre);color:var(--encre)}
.accordeon>summary::-webkit-details-marker{display:none}
.accordeon>summary::after{content:"";flex:none;width:.6rem;height:.6rem;
  border-right:2px solid var(--brique-700);border-bottom:2px solid var(--brique-700);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.accordeon[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.accordeon>:not(summary){margin:0;padding:0 1.2rem 1.2rem;font-size:var(--t-petit)}

/* =========================================================================
   5.12 FIL D'ARIANE ET PAGINATION
   ========================================================================= */
.ariane{margin:0 0 1.2rem;padding:0;list-style:none;font-size:var(--t-petit);
  color:var(--brume)}
.ariane li{display:inline}
.ariane li+li::before{content:" \203A ";color:var(--trait-fort)}
.ariane a{color:var(--brume);text-decoration:none}
.ariane a:hover{color:var(--brique-800);text-decoration:underline}

.pagination{display:flex;flex-wrap:wrap;gap:.35rem;margin:2rem 0 0;padding:0;
  list-style:none;font-variant-numeric:tabular-nums}
.pagination a,.pagination span{display:inline-flex;align-items:center;
  justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:0 .6rem;
  border:1px solid var(--trait-fort);border-radius:var(--r-m);
  background:var(--chaux);color:var(--suie);text-decoration:none;
  font-size:var(--t-petit)}
.pagination a:hover{border-color:var(--brique-600);color:var(--brique-800)}
.pagination [aria-current]{background:var(--brique-700);border-color:var(--brique-700);
  color:#fff;font-weight:700}
.pagination .desactive{color:var(--brume);border-color:var(--trait);
  background:none;cursor:default}

/* =========================================================================
   5.13 PROSE DES ARTICLES IMPORTES
   ========================================================================= */
.prose{max-width:var(--laize-texte);font-size:var(--t-base);line-height:1.72;
  color:var(--suie)}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2em;padding-top:.7em;border-top:1px solid var(--trait)}
.prose h3{margin-top:1.7em}
.prose>:first-child{margin-top:0}
.prose a{color:var(--brique-700)}
.prose a:visited{color:#5E3350}
.prose ul,.prose ol{padding-inline-start:1.3rem;margin-block:1.1em}
.prose li+li{margin-top:.35em}
.prose li::marker{color:var(--brique-700)}
.prose blockquote{margin:1.8em 0;padding:.2rem 0 .2rem 1.2rem;
  border-inline-start:3px solid var(--brique-700);font-family:var(--titre);
  font-size:1.1rem;color:var(--encre)}
.prose img{border-radius:var(--r-m)}
.prose figure{margin:1.8em 0}
.prose figcaption,.prose .wp-caption-text{margin:.5rem 0 0;font-size:var(--t-mention);
  color:var(--brume)}
.prose code{background:var(--lin);color:var(--encre);padding:.1em .35em;
  border-radius:var(--r-s);font-family:var(--chiffre);font-size:.9em}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r-m)}
.prose .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.prose .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.prose .aligncenter{margin-inline:auto;display:block}
@media (max-width:34rem){.prose .alignleft,.prose .alignright{float:none;
  margin-inline:0;max-width:100%}}

/* =========================================================================
   5.14 TABLEAUX
   ========================================================================= */
.defile-x{overflow-x:auto;overscroll-behavior-x:contain;margin-bottom:1.5em}
.defile-x:focus-visible{outline:3px solid var(--anneau);outline-offset:2px}
table{width:100%;border-collapse:collapse;font-size:var(--t-petit)}
th{text-align:start;background:var(--lin);color:var(--encre);font-weight:600}
th,td{padding:.6rem .7rem;border:1px solid var(--trait)}
caption{caption-side:bottom;padding-top:.5rem;font-size:var(--t-mention);
  color:var(--brume);text-align:start}

/* =========================================================================
   5.15 HERO D'ACCUEIL ET REGISTRE PROFESSIONNEL
   ========================================================================= */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ciel) 0,var(--craie) 58%)}
.hero__mur{position:absolute;inset:0;background-image:var(--mur);opacity:.5;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%)}
.hero .section{position:relative;padding-block:clamp(2.4rem,1.8rem + 4vw,4.4rem)}
.hero h1{max-width:18ch}
.hero__accroche{max-width:46ch;color:var(--suie);
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem)}
.hero__actions{margin-block:1.6rem}
.hero__note{margin:0;font-size:var(--t-petit);color:var(--brume)}

.chiffres{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0;padding:0}
.chiffres dt{font:600 var(--t-surtitre)/1.4 var(--texte);letter-spacing:.1em;
  text-transform:uppercase;color:var(--brume)}
.chiffres dd{margin:0;font:700 1.6rem/1.1 var(--titre);color:var(--encre);
  font-variant-numeric:tabular-nums}

/* --- REGISTRE PROFESSIONNEL : meme charte, registre inverse --- */
.bandeau-pro{background:var(--ardoise-600);color:var(--ardoise-200);
  border-block:3px solid var(--ardoise-800)}
.bandeau-pro h2,.bandeau-pro h3,.bandeau-pro strong{color:#fff}
.bandeau-pro .surtitre{color:var(--laiton-300)}
.bandeau-pro .btn--fantome{background:transparent;color:#fff;border-color:var(--ardoise-200)}
.bandeau-pro .btn--fantome:hover{background:rgba(255,255,255,.12)}

/* Onglet d'intercalaire du cahier professionnel. */
body.cahier-pro .entete{border-bottom:3px solid var(--laiton-900)}
body.cahier-pro .entete__barre::after{content:"Cahier annonceurs";
  position:absolute;right:0;bottom:-1.55rem;z-index:1;padding:.3rem .7rem .35rem;
  background:var(--laiton-900);color:#fff;
  font:700 .625rem/1.4 var(--texte);letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,.6rem 100%)}
@media (max-width:30rem){body.cahier-pro .entete__barre::after{content:"Annonceurs"}}
body.cahier-pro .frise{display:none}

/* =========================================================================
   5.16 CALCULATEUR DE DOSAGE
   ========================================================================= */
.calc{display:grid;gap:1.2rem}
.calc__valeur{margin:0;text-align:center;font-family:var(--titre);font-weight:700;
  font-variant-numeric:tabular-nums lining-nums;font-size:var(--t-geant);
  line-height:1;color:var(--brique-700);letter-spacing:-.02em}
.calc__valeur small{display:block;margin-top:.7em;font-size:.28em;
  font-family:var(--texte);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brume)}
.calc__detail{display:grid;grid-template-columns:1fr 1px 1fr;gap:1rem;
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--trait);
  text-align:center;font-size:var(--t-petit)}
.calc__detail i{background:var(--trait)}
.calc__detail b{display:block;font-family:var(--chiffre);font-size:1.25rem;
  font-variant-numeric:tabular-nums;color:var(--encre)}

/* =========================================================================
   5.17 UTILITAIRES, IMPRESSION, CONTRASTE FORCE
   ========================================================================= */
.centre{text-align:center}
.nombre{font-variant-numeric:tabular-nums lining-nums}
.sans-marge{margin:0}

@media print{
  .entete,.preuve,.frise,.nav,.burger,.bandeau-pro,.hero__mur,form,.pagination{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .carte,.accordeon,.fiche{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .plaque{color:#000;background:none;box-shadow:none;border:2px solid #000}
  .plaque__sous,.plaque h1{color:#000}
  .plaque::after{display:none}
  .prose a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

@media (forced-colors:active){
  .carte,.choix,.plaque,.plaque--mini,.badge,.segments span,.accordeon,
  .pagination a,.pagination span{border:1px solid CanvasText}
  .btn{border:1px solid ButtonText}
  .fiche--premium{border-left:4px solid CanvasText;background:none}
  .carte--avant{border:3px solid CanvasText;box-shadow:none}
  .segments input:checked+span{border:3px solid Highlight}
  .choix:has(:checked){border:3px solid Highlight}
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
    outline:3px solid Highlight;outline-offset:2px}
  .frise,.hero__mur,.plaque::after{display:none}
}

/* =========================================================================
   AJOUT AGENT ANNUAIRE : encres du registre professionnel

   Le bandeau pro pose un fond ardoise-600 et n'inverse que h2, h3, strong,
   .surtitre et .btn--fantome. La section 8.7 y place pourtant un lien
   ("fiche Premium") et un formulaire a libelles visibles, or :
     a{color:var(--brique-700)} sur --ardoise-600  =  1,31:1
     .champ>label{color:var(--encre)} sur --ardoise-600  =  1,55:1
   Les deux sont illisibles. Ces cinq regles remettent les encres claires
   deja validees par la charte, sans introduire aucune valeur nouvelle :
     --laiton-300 sur --ardoise-600  =  6,79:1  (teinte deja portee par
                                                 .bandeau-pro .surtitre)
     #fff        sur --ardoise-600   = 11,01:1  (section 6)
     --ardoise-200 sur --ardoise-600 =  6,75:1  (section 6)
   Le :not(.btn) protege .btn--fantome et .btn--brique, qui posent
   deja leur propre couleur.
   ========================================================================= */
.bandeau-pro a:not(.btn){color:var(--laiton-300)}
.bandeau-pro a:not(.btn):hover{color:#fff}
.bandeau-pro .champ>label{color:#fff}
.bandeau-pro .champ:has(:required)>label::after{color:var(--laiton-300)}
.bandeau-pro .champ__aide,.bandeau-pro .mention{color:var(--ardoise-200)}

/* =========================================================================
   AJOUT AGENT PAGES EDITORIALES : accueil, article, categorie

   Aucune valeur nouvelle : uniquement des jetons existants et des gardes de
   debordement pour du HTML WordPress importe que personne ne maitrise.
   Releve sur les 89 articles publies : 79 sont en blocs Gutenberg, 35
   contiennent une figure, 22 un tableau, 17 une largeur en ligne, 3 un
   iframe, 1 un bloc pre, 1 un h1 dans le corps du texte.
   ========================================================================= */

/* Le hero enchaine actions, plaques puis mention legale, et .plaques comme
   .hero__note ont une marge nulle : sans cette ligne la rangee de plaques
   colle a la mention. Meme pas que .hero__actions, le rythme du hero reste
   sur une seule valeur. */
.hero .plaques{margin-bottom:1.6rem}

/* URL nues et mots longs des articles importes : la mesure de 42 rem tombe
   a 311 px sur un telephone, aucun mot ne doit sortir de la colonne. */
.prose{overflow-wrap:break-word}

/* Referme les flottants .alignleft et .alignright quand l'article se termine
   avant que le texte n'ait rattrape l'image. */
.prose::after{content:"";display:table;clear:both}

/* Garde de largeur pour les conteneurs que WordPress dimensionne en ligne :
   max-width l'emporte sur un width en attribut ou en style, sans !important.
   Les images sont deja couvertes par la regle img du socle. */
.prose :is(figure,.wp-caption){max-width:100%}

/* Un bloc preformate se replie plutot que de defiler : une region defilante
   sans tabindex serait un echec WCAG 2.1.1, et le balisage importe n'en a pas. */
.prose pre{white-space:pre-wrap;overflow-wrap:break-word}

/* Un article importe porte un h1 dans son corps. Il prend le calibre d'un h2
   pour ne pas rivaliser avec le titre de la page, sans toucher au balisage. */
.prose h1{font-size:var(--t-h2);line-height:1.18}

/* =========================================================================
   AJOUT AGENT COMMANDE ET CALCULATEUR
   Vues concernees : site/commander/merci, site/commander/annulee,
   site/tools/dosage.

   Cinq regles, aucune valeur nouvelle : uniquement des jetons deja declares
   et des corrections de rythme. Rien ici ne cree de couleur, de rayon ni
   d'ombre qui ne soit deja dans la section 4.
   ========================================================================= */

/* La section 5.7 ne stylait .ref que sous .recap. Or les sections 8.14 et
   8.15 posent la reference hors d'un recapitulatif : dans une phrase du bloc
   virement, et seule sur la page de paiement abandonne. La regle est promue
   au meme niveau que .nombre, avec les memes declarations : .recap .ref
   devient redondante, jamais contradictoire. */
.ref{font-family:var(--chiffre);font-variant-numeric:tabular-nums}

/* Le recapitulatif de commande affiche une URL saisie par le client
   ("URL a promouvoir"). Dans une ligne en flex, un mot sans espace pousse la
   colonne au-dela de la carte et fait defiler la page en largeur. */
.recap dd{min-width:0;overflow-wrap:anywhere}

/* Page de paiement abandonne : la section 8.15 demande .texte.centre. Sans
   marge automatique, un bloc de 42 rem centre en interne reste colle a
   gauche des 68 rem de la .section, ce qui se lit comme un defaut de mise en
   page. Ne s'applique qu'aux deux classes reunies. */
.texte.centre{margin-inline:auto}

/* .actions est une rangee flex : text-align n'a aucune prise dessus. Dans un
   bloc explicitement centre, les boutons doivent suivre le texte. */
.centre .actions{justify-content:center}

/* Section 5.16 : le fieldset des segments est un enfant de la grille .calc,
   dont le gap vaut deja 1,2 rem. La marge basse du fieldset s'y ajouterait
   et doublerait l'espace sous les trois boutons d'intensite. */
.calc fieldset{margin-bottom:0}

/* Kit de lien des boutiques referencees. Le bloc est pose aussi bien sur fond
   clair (/annuaire/kit-de-lien) que dans le .bandeau-pro sombre d'une fiche :
   le fond et la couleur sont donc ecrits, sans quoi le code hériterait du
   bleu ardoise du bandeau et deviendrait illisible.
   white-space:pre-wrap et non pre, sinon l'URL absolue d'une fiche fait
   defiler la page en largeur sur mobile. */
.kit{display:grid;gap:.9rem}
.kit__bloc{background:var(--chaux);border:1px solid var(--trait);
  border-radius:var(--r-m);padding:.85rem 1rem;box-shadow:var(--ombre-1)}
.kit__tete{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;margin-bottom:.5rem}
.kit__nom{font:700 .95rem/1.2 var(--titre);color:var(--encre)}
.kit__code{margin:0;padding:.6rem .75rem;background:var(--lin);color:var(--encre);
  border-radius:var(--r-s);font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.kit__apercu img{display:block}