/*
Theme Name: Nolir Site
Theme URI: https://nolir.fr
Author: Damien Laudic EI — Nolir
Description: Thème enfant de Kadence pour le site Nolir. Carnet d'atelier : aligné à gauche, une colonne de repères en typo machine, des filets pour marquer la structure. Ardoise et ocre.
Template: kadence
Version: 3.3.0
Requires at least: 6.5
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: nolir-site
*/

/* --------- Base : jetons, remise a zero, typographie --------- */

/* --------- NOLIR : carnet d'atelier. Tout est aligné à gauche, une colonne étroit --------- */
/* ── Polices ───────────────────────────────────────────────────────────
   Servies par le site, jamais par Google. Charger fonts.googleapis.com
   transmettrait l'adresse IP du visiteur à Google sans son consentement,
   ce qu'un site français n'a pas à faire — et un prestataire qui en vend
   encore moins. Fichiers séparés plutôt qu'embarqués : la feuille de style
   est mise en cache une fois pour tout le site.
   Les polices système faisaient « modèle gratuit ». Archivo est une
   grotesque à chasse variable (wdth 62 à 125), ce qui permet de resserrer
   les grands titres sans les déformer. JetBrains Mono sert aux chiffres,
   aux prix et aux étiquettes : chasse fixe, chiffres alignés.
   Tranche latine seule, qui couvre tout le français, ligature œ comprise.
   font-display:swap — le texte s'affiche tout de suite dans la police de
   secours, il ne disparaît jamais. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400 800;
  font-stretch:62% 125%; font-display:swap;
  src:url('assets/polices/archivo-400-800.woff2') format('woff2');
  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:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/polices/jetbrains-400.woff2') format('woff2');
  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:"JetBrains Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/polices/jetbrains-600.woff2') format('woff2');
  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;
}

:root{--papier:      #F3F1EC;
  --papier-2:    #FFFFFF;
  --nuit:        #2E3D48;   /* reglable : Personnaliser, panneaux sombres */
  --ardoise:     var(--nuit);
  --ardoise-2:   #22303A;
  --ardoise-3:   #4C6070;
  --encre:       #1B2229;
  --encre-2:     #5A6570;
  --encre-3:     #61676D;   /* gris discret, lisible sur tous les fonds clairs */
  --encre-4:     #B7C2CA;   /* son équivalent sur fond sombre. Mesuré : #9EA6AD
                               ne donnait que 4,53 sur --ardoise. Aligné sur la
                               page d'accueil, qui monte à 6,17. */
  --ocre:        #C9922E;   /* marque : aplats, filets, pastilles */
  --ocre-2:      #84601E;   /* ocre de texte sur fond clair, 4,5:1 minimum */
  --ocre-clair:  #E0B45C;   /* ocre de texte sur fond sombre. Mesuré : #CE9C42
                               ne donnait que 4,51 sur --nuit, soit un centième
                               au-dessus du seuil. Aligné sur la page d'accueil. */
  --craie:       #EDEBE4;
  --filet:       rgba(27,34,41,0.14);
  --filet-fort:  rgba(27,34,41,0.30);
  --filet-clair: rgba(237,235,228,0.20);
  --lien:        #1F5FC4;   /* reglable : Personnaliser, liens */

  --texte: "Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --machine: "JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --large: 1160px;
  --rail: 118px;          /* la colonne des repères */
  --gout: clamp(1.15rem, 4vw, 2.6rem);
  --ease: cubic-bezier(0.22,1,0.36,1);}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
:target{scroll-margin-top:130px;}
body{margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;}
img,svg{display:block; max-width:100%;}
/* Archivo a une chasse variable de 62 à 125 : on resserre les titres au
   lieu de les laisser à la chasse normale. C'est ce qui fait la différence
   entre « une police » et une typographie tenue — un grand titre resserré
   se lit comme un titre, pas comme du texte agrandi. Plus le titre est
   gros, plus on resserre. */
h1,h2,h3,h4{margin:0; font-weight:650; line-height:1.14; letter-spacing:-0.018em; text-wrap:balance;}
h1.nl-titre{font-weight:800; font-variation-settings:"wdth" 82; letter-spacing:-0.032em; line-height:1.02;}
h2.nl-titre{font-weight:700; font-variation-settings:"wdth" 88; letter-spacing:-0.026em; line-height:1.06;}
h3{font-variation-settings:"wdth" 96; letter-spacing:-0.014em;}
/* Les surtitres et étiquettes prennent l'autre bout de l'axe : élargis, ils
   tiennent la ligne sans avoir besoin d'être gros. */
.nl-sur,.nl-etiquette{font-variation-settings:"wdth" 118;}
p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
::selection{background:var(--ocre); color:var(--ardoise-2);}
:focus-visible{outline:2px solid var(--encre);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--craie);
  border-radius:2px;}
.nl-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

.nl-large{max-width:var(--large); margin-inline:auto; padding-inline:var(--gout);}

/* --------- Repère en typo machine, la signature du carnet --------- */
.nl-repere{font-family:var(--machine); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ocre-2); font-weight:500;}
.nl-sombre .nl-repere{color:var(--ocre-clair);}

/* ═══════════════════════════════════════════════════════════════
   EN-TÊTE — porté depuis la page d'accueil le 19 septembre 2026
   ═══════════════════════════════════════════════════════════════
   Le thème avait son propre bandeau : .nl-nav-in, .nl-nav-liens,
   .nl-nav-rdv, .nl-burger, un menu déroulant plein écran, un bouton
   « Prendre rendez-vous ». L'accueil, elle, a .nl-tete > .nl-dedans,
   des liens à plat, le téléphone et un bouton « Parlons de votre site ».
   Deux dessins différents pour la même barre : sur le carnet, ça se
   voyait au premier coup d'œil.

   Les règles ci-dessous sont celles de nolir/index.html, reprises sans
   retouche, le préfixe #nl retiré. Les variables gardent leur préfixe
   --nl- : elles ne peuvent donc pas écraser celles du thème, dont dix
   portent le même nom pour des valeurs qui n'ont pas été comparées.

   Corollaire : ce bandeau n'est plus collant. Celui de l'accueil ne
   l'est pas non plus, et c'était l'écart le plus visible après les
   couleurs. Les règles .nl-compact plus bas deviennent sans effet ;
   le JavaScript qui pose la classe est inoffensif.

   À CHANGER ICI ET LÀ-BAS EN MÊME TEMPS. Toute retouche à l'en-tête
   de index.html doit être reportée ici, sinon les deux repartent
   chacune de leur côté. */

:root{
  --nl-papier:#F3F1EC; --nl-papier-rgb:243,241,236;
  --nl-papier-2:#EAE7DF; --nl-papier-2-rgb:234,231,223;
  --nl-ardoise:#2E3D48; --nl-ardoise-rgb:46,61,72;
  --nl-encre:#1E2830;   --nl-encre-rgb:30,40,48;
  --nl-encre-2:#4A5A66; --nl-encre-3:#566573;   /* foncé après mesure : #64747F donnait 3,91 */
  --nl-ocre:#C9922E;    --nl-ocre-rgb:201,146,46;
  --nl-ocre-texte:#84601E; --nl-ocre-clair:#E0B45C;
  --nl-fonce:#26333D;   --nl-sur-fonce:#F3F1EC;
  --nl-sur-fonce-2:#B7C2CA; --nl-sur-fonce-3:#8E9DA8;  /* mesuré 4,47 sur --nl-fonce : sous le seuil de 4,5. Corrigé à 4,64. */
  --nl-fonce-trait:rgba(243,241,236,.20);
  --nl-trait:#DCD8CE;   --nl-trait-2:#C2BCAE;
  --nl-succes:#1F6B43;  --nl-focus:rgba(201,146,46,.55);

  --nl-e1:0 1px 2px rgba(var(--nl-ardoise-rgb),.06);
  --nl-e2:0 6px 18px rgba(var(--nl-ardoise-rgb),.10);
  --nl-e3:0 12px 32px rgba(var(--nl-ardoise-rgb),.12);
  --nl-e4:0 24px 56px rgba(var(--nl-ardoise-rgb),.16);

  --nl-titre:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --nl-texte:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --nl-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nl-large:1200px;
  /* La colonne de texte, à part. Les bandes teintées vont maintenant
     d'un bord à l'autre, mais le texte doit rester exactement là où il
     était : c'est cette valeur qui le garantit, au pixel près. */
  --nl-colonne:calc(var(--nl-large) - 2 * var(--nl-marge));
  --nl-marge:clamp(1.15rem,4vw,2.8rem);
}

.nl-dedans{ max-width:var(--nl-large); margin-inline:auto; padding-inline:var(--nl-marge); }
.nl-sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.nl-saut{ position:absolute; left:var(--nl-marge); top:0; z-index:400;
  background:var(--nl-ardoise); color:var(--nl-papier); padding:.6rem 1rem;
  transform:translateY(-140%); }
.nl-saut:focus{ transform:translateY(0); }
:where(a,button,summary):focus-visible{
  outline:2.5px solid var(--nl-encre); outline-offset:3px;
  box-shadow:0 0 0 5px var(--nl-focus); border-radius:4px; }
.nl-sur{ font-size:11.5px; font-weight:700; font-variation-settings:"wdth" 118;
  letter-spacing:.22em; text-transform:uppercase; color:var(--nl-ocre-texte); }
.nl-num{ font-family:var(--nl-mono); font-variant-numeric:tabular-nums; font-weight:600; }

/* ── En-tête ─────────────────────────────────────────────────── */
.nl-tete{ padding-block:1.1rem; border-bottom:1px solid var(--nl-trait); }
.nl-tete .nl-dedans{ display:flex; gap:1rem; align-items:center; justify-content:space-between; }
.nl-marque{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  min-height:44px; font-size:1.28rem; font-weight:800;
  font-variation-settings:"wdth" 88; letter-spacing:-.03em; }
.nl-marque svg{ width:26px; height:26px; flex:none; }
.nl-nav{ display:flex; gap:clamp(.9rem,2.2vw,1.8rem); }
.nl-nav a{ font-size:11.5px; font-weight:700; font-variation-settings:"wdth" 118;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--nl-encre-2);
  display:inline-flex; align-items:center; min-height:44px; }
.nl-nav a:hover{ color:var(--nl-encre); }
@media (max-width:900px){ .nl-nav{ display:none; } }
/* ── L'en-tête coupé en plein mot ──────────────────────────────────────
   Mesuré en ligne, pas en local : entre 901 et 1150 px de large, « Nolir »
   s'affichait « Noli / r », et « Exemples » « EXEMPLE / S ». Hors WordPress
   le défaut n'existe pas — c'est pour ça qu'il a passé la relecture.

   La cause est une règle du thème parent, relevée dans le CSSOM en ligne :
       .entry-content{ word-break:break-word }   (kadence/css/global.min.css)
   Le bloc de l'accueil est collé DANS .entry-content, donc il en hérite.
   Avec word-break:break-word, la largeur minimale d'un mot n'est plus le
   mot mais UN caractère. Les éléments flex de l'en-tête ont par défaut
   min-width:auto, c'est-à-dire « pas plus petit que mon contenu » : leur
   plancher tombe donc à un caractère, ils rétrécissent jusqu'à rien, et la
   typographie se casse au milieu des mots.

   On rend à la marque et aux liens leur largeur minimale réelle, et on
   empêche les deux blocs latéraux de rétrécir. Vérifié de 1140 à 920 px :
   une seule ligne partout, en-tête à 80 px, aucun débordement ; et jusqu'à
   320 px, où le menu est déjà masqué.

   L'en-tête du thème (pages juridiques, carnet) est rendu hors de
   .entry-content : il n'est pas concerné, et n'est pas touché ici. */
.nl-marque,.nl-nav a{ word-break:normal; overflow-wrap:normal; white-space:nowrap; }
.nl-marque,.nl-tete-actions{ flex:none; }
.nl-cta{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:44px; padding-inline:1.15rem; border-radius:100px;
  background:var(--nl-ardoise); color:var(--nl-papier);
  font-size:14.4px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1); }
.nl-cta::after{ content:"→"; font-weight:400; }
.nl-cta:hover{ background:var(--nl-encre); transform:translateY(-2px); }
.nl-cta:active{ transform:translateY(0); }
@media (hover:none){ .nl-cta:hover{ transform:none; } }
@media (max-width:520px){ .nl-tete .nl-cta{ display:none; } }
.nl-tete-actions{ display:flex; align-items:center; gap:.9rem; }
.nl-tel{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  font-family:var(--nl-mono); font-size:14.2px; font-weight:600;
  font-variant-numeric:tabular-nums; text-decoration:none; color:var(--nl-encre);
  white-space:nowrap; transition:color .2s ease; }
.nl-tel svg{ width:16px; height:16px; flex:none; color:var(--nl-ocre-texte); }
.nl-tel:hover{ color:var(--nl-ocre-texte); }
/* Sous 520 px le bouton disparaît : le téléphone devient la seule
   action de l'en-tête, ce qui est de toute façon le bon geste sur mobile. */
@media (max-width:400px){ .nl-tel{ font-size:13.2px; } }

/* ── Barre mobile ────────────────────────────────────────────── */
.nl-barre{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--nl-fonce); gap:.5rem; padding:.55rem var(--nl-marge);
  padding-bottom:calc(.55rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--nl-fonce-trait); box-shadow:var(--nl-e4); }
.nl-barre a{ flex:1; display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; border-radius:100px; font-size:15px; font-weight:700; text-decoration:none; }
.nl-barre .nl-b1{ background:var(--nl-ocre-clair); color:#26333D; }
.nl-barre .nl-b2{ border:1.5px solid var(--nl-fonce-trait); color:var(--nl-sur-fonce); }
@media (max-width:820px){ .nl-barre{ display:flex; } .nl-pied{ padding-bottom:5.4rem; } }

/* --------- Bloc --------- */
.nl-bloc{padding-block:clamp(3rem,6vw,5.2rem); border-bottom:1px solid var(--filet);}
.nl-bloc.nl-sombre{background:var(--ardoise); color:var(--craie); border-bottom-color:transparent;}
.nl-bloc.nl-sombre h2,.nl-bloc.nl-sombre h3{color:var(--craie);}
.nl-bloc.nl-clair{background:var(--papier-2);}
.nl-grille{display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0 clamp(1.4rem,3vw,3rem);
  align-items:start;}
.nl-grille > *{min-width:0;}
.nl-rail{padding-top:0.45rem;}
.nl-rail-num{font-family:var(--machine); font-size:26px; font-weight:400;
  color:var(--filet-fort); line-height:1; letter-spacing:-0.02em;}
.nl-sombre .nl-rail-num{color:rgba(237,235,228,0.28);}
@media (max-width:760px){
  /* minmax(0,1fr) et non 1fr : « 1fr » vaut « minmax(auto,1fr) », et le
     minimum « auto » interdit à la piste de descendre sous la largeur
     min-content de son contenu. Le tableau du barème des CGV porte
     min-width:420px — à 390 px de fenêtre, toute la grille s'est alignée
     sur lui et le texte se retrouvait coupé à droite. Mesuré : grille de
     420 px dans une fenêtre de 390, paragraphes débordant de 51 px.
     Avec minmax(0,…) la piste peut rétrécir, et c'est au conteneur
     .nl-tableau-long de faire défiler le tableau, ce qu'il sait faire. */
  .nl-grille{grid-template-columns:minmax(0,1fr); gap:0.9rem;}
  .nl-rail{padding-top:0; display:flex; align-items:baseline; gap:0.9rem;}
}
h1.nl-titre{font-size:clamp(2rem,4.4vw,3.4rem); margin-block:0.6rem 1rem;}
h2.nl-titre{font-size:clamp(1.6rem,3vw,2.4rem); margin-block:0.6rem 1rem;}
.nl-chapo{font-size:clamp(1.02rem,1.15vw,1.16rem);
  color:var(--encre-2); max-width:56ch;}
.nl-sombre .nl-chapo{color:#B3BDC6;}
.nl-chapo + .nl-chapo{margin-top:0.8rem;}

/* --------- Boutons --------- */
.nl-actions{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.7rem;}
.nl-bouton{display:inline-flex; align-items:center; gap:0.5em;
  padding:0.85em 1.5em; border-radius:3px;
  font-size:15px; font-weight:600;
  transition:background 0.2s ease, transform 0.22s var(--ease), border-color 0.2s ease;}
.nl-plein{background:var(--ardoise); color:var(--craie);}
.nl-plein:hover{background:var(--ardoise-2); transform:translateY(-1px);}
.nl-sombre .nl-plein{background:var(--ocre); color:var(--ardoise-2);}
.nl-sombre .nl-plein:hover{background:#DCA845;}
.nl-vide{border:1.5px solid var(--filet-fort); color:var(--encre);}
.nl-vide:hover{border-color:var(--ardoise); transform:translateY(-1px);}
.nl-sombre .nl-vide{border-color:var(--filet-clair); color:var(--craie);}
.nl-sombre .nl-vide:hover{border-color:var(--ocre-clair); color:var(--ocre-clair);}

/* --------- Schémas --------- */
.nl-schema{margin-top:clamp(1.8rem,3vw,2.6rem);
  background:var(--papier-2);
  border:1px solid var(--filet);
  border-radius:4px;
  padding:clamp(1.1rem,2.4vw,1.9rem);
  overflow-x:auto;}
.nl-sombre .nl-schema{background:var(--ardoise-2); border-color:var(--filet-clair);}
.nl-schema{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.nl-schema svg{width:100%; height:auto; min-width:780px;}
.nl-schema-glisser{display:none; font-size:12px; opacity:1; text-align:center; margin-top:0.5rem;}
@media(max-width:860px){
  .nl-schema-glisser{display:block;}
}
.nl-schema-legende{margin-top:0.9rem; font-family:var(--machine); font-size:11px;
  letter-spacing:0.08em; color:var(--encre-3);}
.nl-sombre .nl-schema-legende{color:var(--encre-4);}

/* --------- Offres --------- */
.nl-offres{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.9rem,1.6vw,1.3rem); margin-top:1.6rem;}
.nl-offre{background:var(--papier-2); border:1px solid var(--filet);
  border-radius:4px; padding:clamp(1.3rem,2.2vw,1.9rem);
  display:flex; flex-direction:column; gap:0.7rem;
  transition:border-color 0.25s ease, transform 0.25s var(--ease);}
.nl-offre:hover{border-color:var(--filet-fort); transform:translateY(-2px);}
.nl-offre.nl-phare{background:var(--ardoise); color:var(--craie); border-color:var(--ardoise);}
.nl-offre.nl-phare h3{color:var(--craie);}
.nl-offre h2, .nl-offre h3{font-size:1.16rem;}
.nl-prix{font-family:var(--machine); font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:500; letter-spacing:-0.02em; line-height:1; color:var(--ardoise);}
.nl-offre.nl-phare .nl-prix{color:var(--ocre-clair);}
.nl-prix-detail{font-size:13px; color:var(--encre-3);}
.nl-offre.nl-phare .nl-prix-detail{color:#9FAAB4;}
.nl-offre p{font-size:15px; color:var(--encre-2);}
.nl-offre.nl-phare p{color:#B3BDC6;}
.nl-offre ul{margin-top:auto; padding-top:0.9rem; border-top:1px solid var(--filet); display:grid; gap:0.45rem;}
.nl-offre.nl-phare ul{border-top-color:var(--filet-clair);}
.nl-offre li{font-size:14px; color:var(--encre-2); padding-left:1.1rem; position:relative;}
.nl-offre.nl-phare li{color:#B3BDC6;}
.nl-offre li::before{content:""; position:absolute; left:0; top:0.6em;
  width:6px; height:6px; background:var(--ocre); border-radius:50%;}
@media (max-width:760px){
  .nl-offres{grid-template-columns:1fr;}
}

/* --------- Repères chiffrés --------- */
.nl-mesures{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--filet); border:1px solid var(--filet); margin-top:1.6rem;}
.nl-mesure{background:var(--papier-2); padding:clamp(1rem,2vw,1.5rem);}
.nl-sombre .nl-mesure{background:var(--ardoise-2);}
.nl-mesure b{display:block; font-family:var(--machine); font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:500; color:var(--ocre-2); line-height:1; letter-spacing:-0.02em;}
.nl-sombre .nl-mesure b{color:var(--ocre-clair);}
.nl-mesure span{display:block; margin-top:0.5rem; font-size:13px; color:var(--encre-2); line-height:1.4;}
.nl-sombre .nl-mesure span{color:#9FAAB4;}
@media (max-width:700px){
  .nl-mesures{grid-template-columns:repeat(2,1fr);}
}

/* --------- Étapes --------- */
.nl-etapes{display:grid; gap:0; margin-top:1.4rem;}
.nl-etape{display:grid; grid-template-columns:56px minmax(0,1fr) auto;
  gap:1.2rem; align-items:baseline;
  padding-block:1.15rem; border-top:1px solid var(--filet);}
.nl-etape:last-child{border-bottom:1px solid var(--filet);}
.nl-etape .nl-e-num{font-family:var(--machine); font-size:13px; color:var(--ocre-2); font-weight:500;}
.nl-etape h3{font-size:1.05rem; margin-bottom:0.25rem;}
.nl-etape p{font-size:14.5px; color:var(--encre-2);}
.nl-etape .nl-e-duree{font-family:var(--machine); font-size:12px; color:var(--encre-3); white-space:nowrap;}
@media (max-width:640px){
  .nl-etape{grid-template-columns:44px minmax(0,1fr);}
  .nl-etape .nl-e-duree{grid-column:2; margin-top:0.35rem;}
}

/* --------- Questions --------- */
.nl-questions{margin-top:1.4rem; max-width:760px;}
.nl-q{border-top:1px solid var(--filet);}
.nl-q:last-child{border-bottom:1px solid var(--filet);}
.nl-q summary{cursor:pointer; list-style:none; padding-block:1.05rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  font-size:1.02rem; font-weight:600;}
.nl-q summary::-webkit-details-marker{display:none;}
.nl-q summary::after{content:"+"; flex:none; font-family:var(--machine); font-size:20px;
  font-weight:400; line-height:1; color:var(--ocre-2);
  transition:transform 0.3s var(--ease);}
.nl-q[open] summary::after{transform:rotate(45deg);}
.nl-q .nl-rep{padding-bottom:1.2rem; font-size:15.5px; color:var(--encre-2); max-width:62ch;}
.nl-q .nl-rep p + p{margin-top:0.7rem;}

/* --------- Texte long --------- */
.nl-long h2{font-size:1.28rem; margin-top:2.2rem; margin-bottom:0.6rem;}
.nl-long p{font-size:16px; color:var(--encre-2); margin-bottom:0.9rem; max-width:64ch;}
.nl-long a{color:var(--ocre-2); text-decoration:underline;}

/* ── Le menu déroulant du téléphone ──────────────────────────── */
.nl-plan{ display:none; position:relative; flex:none; }
@media (max-width:900px){ .nl-plan{ display:block; } }
.nl-plan > summary{ list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.3rem; min-height:44px;
  padding-inline:.85rem; border:1px solid var(--nl-trait-2); border-radius:100px;
  font-size:11.5px; font-weight:700; font-variation-settings:"wdth" 118;
  letter-spacing:.18em; text-transform:uppercase; color:var(--nl-encre-2);
  white-space:nowrap; }
.nl-plan > summary::-webkit-details-marker{ display:none; }
.nl-plan[open] > summary{ color:var(--nl-encre); border-color:var(--nl-encre); }
.nl-plan > ul{ position:absolute; z-index:300; top:calc(100% + .5rem); left:0;
  min-width:13rem; background:var(--nl-papier);
  border:1px solid var(--nl-trait); border-radius:12px; box-shadow:var(--nl-e3);
  padding:.35rem; }
/* Le panneau doit être caché quand le menu est fermé, et c'est une règle
   à écrire : mesuré le 21 septembre 2026, menu FERMÉ, le <ul> sortait
   quand même une boîte de 208 × 277 px, visible et opaque, par-dessus le
   texte d'accueil. position:absolute sort l'élément du flux et le
   masquage natif de <details> ne le rattrape pas. */
.nl-plan:not([open]) > ul{ display:none; }
.nl-plan a{ display:flex; align-items:center; min-height:44px;
  padding-inline:.8rem; border-radius:8px; text-decoration:none;
  font-size:15px; font-weight:600; color:var(--nl-encre); }
.nl-plan a:hover{ background:var(--nl-papier-2); }
/* Le bouton d'appel garde la priorité : sous 520 px le bouton « Parlons de
   votre site » s'efface déjà, le menu et le téléphone tiennent la ligne. */
.nl-plan-court{ display:none; }
/* Mesuré à 375 px : marque 77 + menu 120 + actions 133 + deux gouttières de
   16 + 37 de marge = 399 px pour 375 disponibles. Le numéro de téléphone
   sortait de l'écran, coupé à « 06 82 41 17 5 ». Le libellé long coûtait à
   lui seul 120 px ; « Menu » en coûte 67, et tout rentre. */
@media (max-width:520px){
  .nl-plan-long{ display:none; }
  .nl-plan-court{ display:inline; }
  .nl-tete .nl-dedans{ gap:.7rem; }
}
@media (max-width:360px){ .nl-plan > summary{ padding-inline:.6rem; letter-spacing:.1em; } }


/* ═══════════════════════════════════════════════════════════════
   PIED — porté depuis la page d'accueil le 19 septembre 2026
   ═══════════════════════════════════════════════════════════════
   Même histoire que l'en-tête : le thème avait un pied foncé sur
   --ardoise-2 avec des <h4>, l'accueil un pied clair sur --nl-papier-2
   avec des <h3>. Ce sont les règles de l'accueil qui restent.

   L'ancienne .nl-barre du thème vivait ici, APRÈS celle qui vient de
   l'accueil : c'est elle qui l'emportait. Elle est retirée. */

/* ── Pied ────────────────────────────────────────────────────── */
.nl-pied{ background:var(--nl-papier-2);
  padding-block:clamp(1.8rem,4vw,2.6rem); font-size:13.6px; color:var(--nl-encre-3); }
.nl-pied-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.3rem,3vw,2.4rem); padding-bottom:1.4rem; border-bottom:1px solid var(--nl-trait); }
/* Le lien du carnet portait sa propre classe et donc ses propres couleurs :
   pâle et souligné d'un trait, quand « Mentions légales » juste à côté était
   foncé et souligné normalement. Deux styles pour deux liens de pied, sans
   raison. Il prend la même liste nue que les autres colonnes. */
.nl-pied h3{ font-size:10.8px; font-weight:700; font-variation-settings:"wdth" 112;
  letter-spacing:.16em; text-transform:uppercase; color:var(--nl-encre-3); margin-bottom:.5rem; }
.nl-pied-cols p,.nl-pied-cols li{ font-size:14.6px; color:var(--nl-encre-2); }
.nl-pied a{ text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px; }
.nl-pied-bas{ padding-top:1.3rem; }
.nl-pied-bas p{ max-width:84ch; }
.nl-pied-bas p + p{ margin-top:.5rem; }

/* --------- Taille des cibles ── WCAG 2.2 demande 24 × 24 px pour un élément cliqu --------- */
:root{--sortie: cubic-bezier(0.22,1,0.36,1);      /* décélération franche */
  --doux:   cubic-bezier(0.4,0,0.2,1);        /* aller-retour discret */
  --ressort:cubic-bezier(0.34,1.56,0.64,1);   /* léger dépassement */}

/* --------- Apparition pilotée par le défilement, sans JavaScript ── Là où le navi --------- */
/* Ce système était inerte : le masquage est conditionné par html.js, or
   rien ne posait cette classe. Elle est désormais posée par nolir.js, en
   première ligne, de sorte que le masquage n'existe que si le script tourne.
   Et le masquage ne touche plus l'opacité : on ne décale que la position.
   Un texte à opacity:0 dont l'animation ne part pas devient invisible ; un
   texte décalé de 14 px reste lisible. La règle vaut pour tout le projet. */
.nl-cascade > *{--i:0;}
html.js .nl-cascade > *{transform:translate3d(0,14px,0);
  transition:transform .5s var(--sortie);
  transition-delay:calc(var(--i) * 70ms);}
html.js .nl-cascade.nl-la > *{transform:none;}

/* --------- Micro-interactions ── De petits retours visuels qui confirment que le  --------- */
.nl-compte{font-variant-numeric:tabular-nums;}

/* --------- Barre de progression de lecture, sur les articles --------- */
@supports (animation-timeline: scroll()){
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}

/* --------- En-tête qui se resserre quand on descend --------- */
/* Un seul <main> par page, sinon rien ne marche : Kadence en pose un, et la
   composition de l'accueil en posait un second à l'intérieur. Deux ennuis
   pour le prix d'un — un repère « principal » en double pour les lecteurs
   d'écran, et surtout deux éléments portant le même view-transition-name,
   ce qui annule purement et simplement la transition. La composition
   utilise désormais un <div class="nl-corps"> ; ne pas y remettre <main>. */
main{view-transition-name:page;}
.nl-tete{view-transition-name:tete;
  /* position + z-index indispensables, et pas par confort :
     view-transition-name crée un CONTEXTE D'EMPILEMENT. Sans les deux
     lignes ci-dessous, le z-index:300 du panneau du menu déroulant reste
     enfermé dans l'en-tête, et la première section de la page passait
     par-dessus — mesuré le 21 septembre 2026 sur /le-carnet/ :
     elementFromPoint au bas du panneau renvoyait le texte de la page,
     pas un lien du menu. Le panneau paraissait transparent. */
  position:relative; z-index:200;}

/* --------- Comparateur avant après --------- */

/* --------- Dernier recours : si quoi que ce soit reste caché, on force --------- */
html.tout-visible .nl-vient,
html.tout-visible .nl-cascade > *{opacity:1 !important; transform:none !important; animation:none !important;}

/* --------- Transition entre les pages de l'aperçu ── Le navigateur fabrique lui-m --------- */
@media (prefers-reduced-motion:reduce){
  html.js .nl-cascade > *{transform:none !important; transition:none !important;}
}

/* --------- Apparition ═══════════ Le préfixe html.js est essentiel : sans script, --------- */
.nl-galerie{display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2vw,1.6rem); margin-top:1.6rem;}
@media (max-width:820px){
  .nl-galerie{grid-template-columns:1fr;}
}
.nl-maquette{display:block; background:var(--papier-2);
  border:1px solid var(--filet); border-radius:5px;
  overflow:hidden; cursor:pointer;
  transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;}
.nl-maquette:hover{border-color:var(--ocre);}
.nl-maquette .nl-mq-metier::after{content:" ›"; color:var(--ocre); font-weight:400;}
.nl-maquette:hover{transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(27,34,41,0.4);}
.nl-mq-barre{display:flex; align-items:center; gap:5px;
  padding:8px 11px; background:#E7E5DF; border-bottom:1px solid var(--filet);}
.nl-mq-barre i{width:7px; height:7px; border-radius:50%; background:#C4C1B8;}
.nl-mq-barre span{margin-left:7px; font-family:var(--machine); font-size:10px;
  color:#5B574E;}  /* #6B665C ne donnait que 4,53 sur #E7E5DF : trop juste à 10 px */
.nl-mq-ecran{aspect-ratio:16/11; position:relative; overflow:hidden;}
.nl-mq-nav{display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; font-size:9px; font-weight:700;}
.nl-mq-nav em{font-style:normal; opacity:1; font-weight:500; letter-spacing:0.03em;}
.nl-mq-corps{padding:12px; display:flex; flex-direction:column; gap:7px;}
.nl-mq-titre{font-size:15px; font-weight:700; line-height:1.15; letter-spacing:-0.02em;}
.nl-mq-ligne{height:5px; border-radius:2px; opacity:0.28;}
.nl-mq-btn{height:17px; width:72px; border-radius:3px; margin-top:2px;}
.nl-mq-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:4px;}
.nl-mq-cases i{aspect-ratio:4/3; border-radius:2px; opacity:0.4;}
.nl-mq-pied{display:flex; justify-content:space-between; align-items:center;
  padding:9px 13px; border-top:1px solid var(--filet);
  font-size:12px;}
.nl-mq-metier{font-weight:600; color:var(--encre);}
.nl-mq-style{font-family:var(--machine); font-size:10px; letter-spacing:0.08em; color:var(--encre-3);}

/* --------- Histoire --------- */
.nl-histoire p{font-size:17px; color:var(--encre-2); max-width:62ch;}
.nl-histoire p + p{margin-top:1.05rem;}
.nl-histoire strong{color:var(--encre); font-weight:600;}
.nl-signature{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--filet);
  display:flex; align-items:center; gap:1rem;}
.nl-signature .nl-sig-rond{width:52px; height:52px; border-radius:50%; flex:none;
  background:var(--ardoise); color:var(--ocre);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--machine); font-size:19px; font-weight:500;}
.nl-signature div b{display:block; font-size:15px; color:var(--encre);}
.nl-signature div span{font-size:13.5px; color:var(--encre-3);}
.nl-citation{margin-top:1.8rem; margin-bottom:1.8rem;
  padding:1.3rem 1.5rem;
  border-left:3px solid var(--ocre); background:var(--papier-2);
  font-size:17.5px; line-height:1.5; color:var(--encre);
  max-width:62ch;   /* même colonne de lecture que les paragraphes */}

/* --------- Bande d'étapes illustrée (par offre) --------- */
.nl-bande{margin-top:1.5rem; overflow-x:auto;}
.nl-bande svg{width:100%; height:auto; min-width:520px;}

/* --------- Blog --------- */
.nl-articles{display:grid; gap:0; margin-top:1.4rem;}
.nl-article{display:grid; grid-template-columns:74px minmax(0,1fr);
  gap:1.4rem; padding-block:1.5rem;
  border-top:1px solid var(--filet);
  align-items:start;}
.nl-article:last-child{border-bottom:1px solid var(--filet);}
.nl-art-date{font-family:var(--machine); font-size:11px; color:var(--encre-3); line-height:1.5; padding-top:0.3rem;}
.nl-article h3{font-size:1.16rem; margin-bottom:0.4rem;}
.nl-article h3 a{transition:color 0.2s ease;}
.nl-article h3 a:hover{color:var(--ocre-2);}
.nl-art-resume{font-size:15px; color:var(--encre-2); max-width:62ch;}
.nl-art-meta{margin-top:0.6rem; font-family:var(--machine); font-size:11px; color:var(--encre-3); letter-spacing:0.06em;}
@media (max-width:640px){
  .nl-article{grid-template-columns:1fr; gap:0.5rem;}
  .nl-art-date{padding-top:0;}
}
.nl-corps-article h2{font-size:1.32rem; margin-top:2.2rem; margin-bottom:0.7rem;}
.nl-corps-article h3{font-size:1.08rem; margin-top:1.5rem; margin-bottom:0.4rem;}
.nl-corps-article p{font-size:16.5px; color:var(--encre-2); margin-bottom:1rem; max-width:64ch;}
.nl-corps-article ul{margin-bottom:1rem; max-width:64ch;}
.nl-corps-article li{font-size:16.5px; color:var(--encre-2); padding-left:1.2rem;
  position:relative; margin-bottom:0.45rem;}
.nl-corps-article li::before{content:""; position:absolute; left:0; top:0.62em;
  width:6px; height:6px; background:var(--ocre); border-radius:50%;}
.nl-corps-article a{color:var(--ocre-2); text-decoration:underline; text-underline-offset:2px;}
.nl-corps-article a:hover{color:var(--encre);}
.nl-encart{margin-block:1.6rem; padding:1.2rem 1.4rem;
  background:var(--papier-2); border:1px solid var(--filet); border-radius:4px;}
.nl-encart b{display:block; font-family:var(--machine); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ocre-2); margin-bottom:0.5rem;}
.nl-encart p{margin-bottom:0; font-size:15.5px;}
.nl-sources{margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--filet);}
.nl-sources b{display:block; font-family:var(--machine); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--encre-3); margin-bottom:0.7rem;}
.nl-sources li{font-size:14px; padding-left:1.2rem;}
.nl-sources li::before{background:var(--encre-3); width:5px; height:5px; top:0.62em;}

/* --------- SITES EXEMPLES Chacun a sa propre identité, confinée sous son identifi --------- */

/* --------- Défilé de maquettes sur l'accueil --------- */
.nl-defile{margin-top:1.8rem; max-width:100%;
  display:flex; gap:clamp(0.8rem,1.6vw,1.2rem);
  overflow-x:auto; padding-bottom:1rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;}
.nl-defile::-webkit-scrollbar{height:6px;}
.nl-defile::-webkit-scrollbar-track{background:var(--filet); border-radius:3px;}
.nl-defile::-webkit-scrollbar-thumb{background:var(--filet-fort); border-radius:3px;}
.nl-defile .nl-maquette{flex:0 0 clamp(230px,26vw,300px); scroll-snap-align:start;}
.nl-defile-note{margin-top:0.6rem; font-family:var(--machine); font-size:11px;
  letter-spacing:0.06em; color:var(--encre-3);}

/* --------- HUIT ARCHITECTURES DIFFÉRENTES Chaque site a sa propre structure : nav --------- */

/* --------- A. Vitrine centrée (boulangerie) --------- */

/* --------- B. Urgence, action d'abord (plomberie) --------- */

/* --------- C. Éditorial asymétrique (coiffure) --------- */

/* --------- D. Industriel, bandes pleines (garage) --------- */

/* --------- E. Galerie d'abord (fleuriste) --------- */

/* --------- F. Sommaire latéral (menuiserie) --------- */

/* --------- G. Carte de restaurant --------- */

/* --------- H. Technique, tableau (électricité) --------- */

/* --------- Bandeau click and collect, sur les commerces où c'est pertinent --------- */

/* --------- Éléments approfondis des sites exemples --------- */

/* --------- Page « Qui je suis » et extensions, site Nolir --------- */
.nl-frise{position:relative; margin-top:2rem; padding-left:2.6rem;}
.nl-frise::before{content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; background:var(--ocre); opacity:0.4;}
.nl-jalon{position:relative; padding-bottom:2.2rem;}
.nl-jalon:last-child{padding-bottom:0;}
.nl-jalon::before{content:""; position:absolute; left:-2.6rem; top:6px;
  width:22px; height:22px; border-radius:50%; background:var(--ocre);}
.nl-jalon .nl-j-an{font:11px/1 var(--machine); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ocre-clair); display:block; margin-bottom:0.45rem;}
.nl-jalon h3{font-size:1.16rem; margin-bottom:0.4rem;}
.nl-jalon p{font-size:15px; max-width:58ch;}
.nl-planches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(0.7rem,1.6vw,1.2rem); margin-top:2.2rem;}
@media(max-width:700px){
  .nl-planches{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.nl-planche{position:relative; border-radius:3px; overflow:hidden; margin:0;}
.nl-planche .im{aspect-ratio:4/3; display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.nl-planche:hover .im{transform:scale(1.06);}
.nl-planche figcaption{position:absolute; inset:auto 0 0 0; padding:0.9rem 0.85rem 0.7rem;
  font-size:12.5px; line-height:1.4; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,0.84), rgba(0,0,0,0.15));}
.nl-planche.nl-pl-large{grid-column:span 2;}
.nl-legende-planches{font-size:12.5px; opacity:1; margin-top:0.9rem; max-width:56ch; line-height:1.55;}
.nl-outil-grille{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(0.9rem,2vw,1.5rem); margin-top:1.8rem;}
@media(max-width:960px){
  .nl-outil-grille{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .nl-outil-grille{grid-template-columns:minmax(0,1fr);}
}
.nl-outil{background:var(--blanc); border:1px solid var(--filet);
  border-radius:4px; padding:1.25rem 1.35rem 1.35rem;
  display:flex; flex-direction:column;}
.nl-sombre .nl-outil{background:var(--ardoise-2); border-color:var(--filet-clair);}
.nl-outil .nl-o-cat{font:11px/1 var(--machine); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ocre-2); display:block; margin-bottom:0.6rem;}
.nl-outil h3{font-size:1.04rem; margin-bottom:0.5rem;}
.nl-outil p{font-size:14.5px; flex:1;}
.nl-outil .nl-o-note{margin-top:0.9rem; padding-top:0.7rem; border-top:1px solid var(--filet);
  font-size:12.5px; opacity:1;}
.nl-hors{margin-top:2rem; padding:1.5rem 1.7rem;
  border-left:3px solid var(--ocre); background:var(--blanc);}
.nl-hors h3{font-size:1.06rem; margin-bottom:0.6rem;}
.nl-hors p{font-size:15px; max-width:62ch;}
.nl-hors p + p{margin-top:0.8rem;}

/* --------- Briques communes aux sites exemples, deuxième passe. Tout est neutre e --------- */

/* --------- Schémas : lisibles sur téléphone ── Un SVG en width:100% réduit aussi  --------- */

/* --------- Réseaux sociaux --------- */

/* --------- Blog du site exemple --------- */

/* --------- Page histoire : frise et cadres photo --------- */

/* --------- Formulaire de rendez-vous --------- */

/* --------- Barre d'action fixe sur téléphone --------- */

/* --------- Encadré « ce qui fait tourner ce site » --------- */

/* --------- Confort de lecture sur téléphone, tous exemples --------- */
.nl-form{display:grid; gap:1rem; max-width:44rem; margin-top:1.6rem;}
.nl-form-duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;}
@media (max-width:620px){
  .nl-form-duo{grid-template-columns:minmax(0,1fr);}
}
.nl-form label{display:block; margin-bottom:0.4rem;
  font-family:var(--machine); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--encre-2);}
.nl-form input, .nl-form select, .nl-form textarea{width:100%; padding:0.75em 0.9em; font:inherit; font-size:15.5px;
  color:var(--encre); background:var(--papier-2);
  border:1px solid var(--filet-fort); border-radius:3px;
  transition:border-color .18s ease, box-shadow .18s ease;}
.nl-form input:focus, .nl-form select:focus, .nl-form textarea:focus{outline:none; border-color:var(--ocre);
  box-shadow:0 0 0 3px rgba(201,146,46,0.18);}
.nl-form textarea{min-height:112px; resize:vertical;}
.nl-form-pied{display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center; margin-top:0.3rem;}
.nl-form button{cursor:pointer; border:none;}
.nl-form-note{font-size:13px; color:var(--encre-3); line-height:1.55; max-width:52ch;}
.nl-form-reponse{padding:0.9rem 1.1rem; border-radius:3px; font-size:15px; line-height:1.55;
  background:var(--craie); border:1px solid var(--filet-fort); color:var(--encre);}
.nl-form-reponse[hidden]{display:none;}
.nl-form-reponse b{color:var(--ocre-2);}
.nl-copie{position:fixed; left:50%; bottom:24px; z-index:600;
  transform:translate(-50%,14px); opacity:0;
  background:var(--encre); color:var(--craie);
  font:15px/1.4 var(--texte); padding:0.75em 1.15em; border-radius:4px;
  box-shadow:0 8px 30px rgba(0,0,0,0.22);
  pointer-events:none; max-width:min(92vw,26rem); text-align:center;
  transition:opacity .22s ease, transform .22s var(--sortie);}
.nl-copie.nl-la{opacity:1; transform:translate(-50%,0);}
.nl-copie b{color:var(--ocre); font-weight:600; white-space:nowrap;}
@media (max-width:900px){
  .nl-copie{bottom:130px;}
}
@media (prefers-reduced-motion:reduce){
  .nl-copie{transition:none;}
}
.nl-apercu{position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--encre); color:var(--craie);
  font:13px/1.4 var(--texte); padding:9px 16px; text-align:center;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));}
.nl-apercu b{color:var(--ocre); font-weight:600;}
@media (max-width:900px){
  .nl-apercu{bottom:62px;}
}

/* ── WordPress enveloppe les enfants d'un groupe ───────────────────────
   Un bloc wp:group ne rend PAS ses enfants directement : il les met dans
   un <div class="wp-block-group__inner-container">. Une grille posée sur
   le groupe se retrouve donc avec un seul enfant — cet enveloppe — qui
   atterrit dans la première piste et écrase tout le reste dedans.
   Mesuré sur nolir.fr avant correction : grid-template-columns valait
   bien « 118px 920px », mais le h1 faisait 118 px, c'est-à-dire la
   largeur du rail. Le titre se lisait un mot par ligne.
   `display:contents` efface la boîte de l'enveloppe sans toucher à son
   contenu : les vrais enfants redeviennent les éléments de la grille.
   Vérifié en direct : le titre est passé de 118 à 920 px.
   Le sélecteur ne s'applique que là où WordPress a inséré l'enveloppe ;
   hors WordPress il ne correspond à rien et reste sans effet. */
:is(.nl-grille,.nl-offres,.nl-mesures,.nl-etapes,.nl-pied-cols,.nl-galerie,
    .nl-articles,.nl-planches,.nl-outil-grille,.nl-actions,.nl-nav-liens)
  > .wp-block-group__inner-container{ display:contents; }

/* ── Bandeau de confiance ──────────────────────────────────────────────
   Se place tout en haut, avant l'accroche. La preuve avant la promesse :
   un artisan qui arrive sur un site inconnu cherche d'abord à qui il a
   affaire, pas ce qu'on lui vend. */
.nl-bloc.nl-confiance{ padding-block:.75rem; border-bottom:0; }
.nl-confiance-ligne{ margin:0; max-width:var(--large); margin-inline:auto;
  padding-inline:var(--gout); display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  align-items:center; justify-content:center; text-align:center;
  font-size:13.4px; color:var(--encre-4); }
.nl-confiance-ligne b{ color:var(--craie); font-weight:650; }
.nl-confiance-ligne .nl-pt{ color:var(--ardoise-3); }

/* ── Ce que vous possédez ──────────────────────────────────────────────
   Deux colonnes qui se replient. Les filets marquent la séparation sans
   fabriquer de cartes : ce ne sont pas des offres, ce sont des faits. */
.nl-possede{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 clamp(1.4rem,3vw,2.6rem); margin-top:1.6rem; }
.nl-possede > div{ padding-block:1.15rem; border-top:1px solid var(--filet); }
.nl-possede h3{ font-size:1.06rem; font-variation-settings:"wdth" 96;
  margin-bottom:.35rem; }
.nl-possede p{ font-size:15px; color:var(--encre-2); margin:0; }
.nl-sombre .nl-possede > div{ border-top-color:var(--filet-clair); }
.nl-sombre .nl-possede p{ color:var(--encre-4); }

/* ── Comparatif : la ligne Nolir se distingue sans crier ───────────────
   Pas de couleur de marque sur toute la ligne, qui ferait publicité. Un
   fond très léger et le libellé en gras suffisent à la repérer. */
.nl-piste td.nl-n{ font-family:var(--machine); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.nl-piste tbody th{ background:transparent; font-family:var(--texte);
  font-size:14.5px; text-transform:none; letter-spacing:0;
  color:var(--encre); font-weight:600; }
.nl-piste tr.nl-nous th,.nl-piste tr.nl-nous td{ background:var(--craie);
  font-weight:650; }

/* ═══════════════════════════════════════════════════════════════
   COLLE WORDPRESS
   Ce qui suit n'existe pas dans l'aperçu : c'est ce qu'il faut
   pour que les compositions se comportent bien dans l'éditeur de
   blocs, et pour les éléments que le thème rend en PHP.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Blocs natifs ─────────── */

/* Un panneau est un groupe pleine largeur : il ne doit pas être
   contraint par la largeur de contenu de Kadence. */
.wp-block-group.nl-panneau{ max-width:none; width:auto; }
.entry-content > .alignfull{ margin-inline:0; max-width:none; }
.nl-panneau > .wp-block-group__inner-container{ max-width:none; }

/* Kadence pose ses propres marges sur le contenu : on les neutralise
   là où le dessin gère lui-même son espacement. */
.entry-content > *{ margin-block:0; }
.nl-panneau + .nl-panneau{ margin-top:0; }

/* Les colonnes natives servent de grille de secours */
.nl-panneau .wp-block-columns{ gap:clamp(0.9rem,2vw,1.6rem); margin-bottom:0; }
.nl-panneau .wp-block-column{ min-width:0; }

/* Le bloc « Détails » natif porte les questions fréquentes */
.nl-panneau .wp-block-details{ border-top:1px solid var(--filet); padding-block:0; }
.nl-panneau .wp-block-details:last-of-type{ border-bottom:1px solid var(--filet); }
.nl-panneau .wp-block-details summary{
  cursor:pointer; list-style:none; padding-block:1.05rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.4rem;
  font-size:1.02rem; font-weight:600; min-height:44px;
}
.nl-panneau .wp-block-details summary::-webkit-details-marker{ display:none; }
.nl-panneau .wp-block-details summary::after{
  content:"+"; flex:none; font-family:var(--machine); font-size:20px;
  font-weight:400; line-height:1; color:var(--ocre-2);
  transition:transform 0.3s var(--ease);
}
.nl-panneau .wp-block-details[open] summary::after{ transform:rotate(45deg); }
.nl-panneau .wp-block-details > *:not(summary){
  padding-bottom:1.2rem; font-size:15.5px; color:var(--encre-2); max-width:62ch;
}
.nl-sombre .wp-block-details summary::after{ color:var(--ocre-clair); }
.nl-sombre .wp-block-details > *:not(summary){ color:#B3BDC6; }

/* Le div d'ancrage inséré par WordPress ne doit rien occuper */
.nl-panneau > .wp-block-group__inner-container > p:empty{ display:none; }

/* ─────────── Dans l'éditeur ─────────── */
.editor-styles-wrapper .nl-panneau{ max-width:none !important; }
.editor-styles-wrapper .wp-block[data-align="full"]{ margin-inline:0; }

/* ─────────── Éléments rendus par le thème ─────────── */

/* Barre d'appel sur téléphone : le thème l'ajoute, l'aperçu ne l'a pas
   sous ce nom. Même dessin que la barre des sites exemples. */

.nl-appeler{ background:var(--ocre); color:var(--ardoise-2); }
.nl-rdv-mobile{ border:1.5px solid var(--filet-clair); color:var(--craie); }

/* Entrées du menu déroulant propres au thème */

/* Pastille générique */
.nl-pilule{
  display:inline-flex; align-items:center; min-height:24px;
  padding:0.3em 0.8em; border-radius:100px; font-size:13px;
  background:var(--papier-2); border:1px solid var(--filet-fort); color:var(--encre-2);
}

/* ─────────── Horaires ─────────── */
.nl-horaires{ list-style:none; margin:0; padding:0; }
.nl-h-jour{
  display:flex; justify-content:space-between; gap:1.2rem;
  padding-block:0.55rem; border-bottom:1px solid var(--filet);
  font-size:15px; font-variant-numeric:tabular-nums;
}
.nl-h-jour:last-child{ border-bottom:0; }
.nl-h-aujourdhui{ color:var(--ocre-2); font-weight:600; }
.nl-sombre .nl-h-jour{ border-bottom-color:var(--filet-clair); }
.nl-sombre .nl-h-aujourdhui{ color:var(--ocre-clair); }
.nl-h-note{ font-size:13px; color:var(--encre-3); margin-top:0.7rem; }
.nl-sombre .nl-h-note{ color:var(--encre-4); }
.nl-ouvert{ display:inline-flex; align-items:center; gap:0.45em; min-height:24px; font-weight:600; }
.nl-ouvert::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.nl-est-ouvert{ color:#1F6B49; }
.nl-est-ferme{ color:#8E3128; }
.nl-sombre .nl-est-ouvert{ color:#8FD9B4; }
.nl-sombre .nl-est-ferme{ color:#F2A9A2; }
/* Sans script, la pastille ne dit rien : mieux vaut rien qu'un état faux. */
.nl-ouvert:empty{ display:none; }

/* WCAG 2.2 : 24 px minimum pour une cible qui n'est pas un lien au fil
   du texte. Les titres d'articles sont des liens de bloc. */
.nl-article h3 a{ display:inline-flex; align-items:center; min-height:24px; }

/* Lien au fil d'une phrase. Souligné : sur fond papier, la couleur
   seule ne suffit pas à distinguer un lien pour tout le monde. */
.nl-lien{
  color:var(--ocre-2); text-decoration:underline; text-underline-offset:2px;
  display:inline-flex; align-items:center; min-height:24px;
}
.nl-lien:hover{ color:var(--encre); }

/* ─────────── Tableaux dans le texte suivi ─────────── */
.nl-piste{ overflow-x:auto; max-width:100%; margin:1.4rem 0; border:1px solid var(--filet); border-radius:4px; }
.nl-piste table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; }
.nl-piste th,.nl-piste td{ padding:.7rem .95rem; text-align:left; border-bottom:1px solid var(--filet); vertical-align:top; }
.nl-piste th{ background:var(--papier-2); font-family:var(--machine); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); font-weight:500; }
.nl-piste tbody tr:last-child td{ border-bottom:0; }
.nl-long h2{ font-size:1.28rem; margin-top:2.2rem; margin-bottom:.6rem; }
.nl-long h2:first-of-type{ margin-top:1.6rem; }
.nl-sombre .nl-lien{ color:var(--ocre-clair); }
.nl-sombre .nl-lien:hover{ color:var(--craie); }

/* ═══ LE CARNET ══════════════════════════════════════════════════════════
   La liste des billets réutilise .nl-articles / .nl-art-* déjà en place.
   Ce qui suit habille le titre d'un billet dans la liste, puis le billet
   lui-même — texte rédigé dans l'éditeur, donc on habille des balises, pas
   des classes. */

.nl-art-titre{ font-size:clamp(1.02rem,1.4vw,1.16rem);
  font-weight:700; font-variation-settings:"wdth" 92; letter-spacing:-0.018em; line-height:1.3; margin-bottom:0.4rem; }
/* WCAG 2.2 AA : 24 px minimum pour une cible qui n'est pas un lien au fil
   d'une phrase. Le titre d'un billet en faisait 20 — inline-block et deux
   pixels de remplissage suffisent, sans rien déplacer. */
.nl-art-titre a{ display:inline-block; padding-block:2px;
  color:var(--encre); text-decoration:none;
  background-image:linear-gradient(var(--ocre),var(--ocre));
  background-size:0 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size 0.28s cubic-bezier(0.22,1,0.36,1); }
.nl-art-titre a:hover{ background-size:100% 2px; }
@media (prefers-reduced-motion:reduce){ .nl-art-titre a{ transition:none; } }

/* ── Un billet ─────────────────────────────────────────────────────── */
.nl-billet-meta{ margin-top:0.9rem; font-family:var(--machine); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--encre-3); }
.nl-billet-meta a{ color:inherit; }

/* La mesure : un texte suivi ne se lit pas au-delà d'une soixantaine de
   signes par ligne. Le rail de gauche reste vide sur un billet — c'est lui
   qui donne au texte sa colonne, comme dans un livre. */
.nl-billet-texte{ max-width:66ch; }
.nl-billet-texte > * + *{ margin-top:1.05rem; }
.nl-billet-texte p{ font-size:clamp(1rem,1.1vw,1.06rem); line-height:1.72;
  color:var(--encre-2); }
.nl-billet-texte h2{ font-size:clamp(1.24rem,1.8vw,1.5rem);
  font-weight:700; font-variation-settings:"wdth" 90; letter-spacing:-0.024em; color:var(--encre);
  margin-top:2.2rem; }
.nl-billet-texte h3{ font-size:1.08rem; font-weight:700; font-variation-settings:"wdth" 96;
  color:var(--encre); margin-top:1.7rem; }
.nl-billet-texte ul,.nl-billet-texte ol{ padding-left:1.15rem; }
.nl-billet-texte li{ font-size:clamp(1rem,1.1vw,1.06rem); line-height:1.7;
  color:var(--encre-2); margin-top:0.4rem; }
.nl-billet-texte li::marker{ color:var(--ocre); }
.nl-billet-texte strong{ color:var(--encre); font-weight:700; }
.nl-billet-texte a{ color:var(--encre); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--ocre);
  text-decoration-thickness:1.5px; }
.nl-billet-texte blockquote{ margin-left:0; padding-left:1.1rem;
  border-left:3px solid var(--ocre); }
.nl-billet-texte blockquote p{ font-size:1.08rem; color:var(--encre); }
.nl-billet-texte figure,.nl-billet-texte img{ max-width:100%; height:auto; }
/* Une image dans un billet garde le même arrondi que le reste du site. */
.nl-billet-texte img{ border-radius:12px; }

/* ── D'un billet à l'autre ─────────────────────────────────────────── */
.nl-billet-nav{ display:grid; gap:0.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.nl-billet-lien{ display:block; padding:1rem 1.1rem; border:1px solid var(--filet);
  border-radius:12px; text-decoration:none; color:var(--encre);
  transition:border-color 0.24s ease, transform 0.24s cubic-bezier(0.22,1,0.36,1); }
.nl-billet-lien:hover{ border-color:var(--ocre); transform:translateY(-3px); }
@media (hover:none){ .nl-billet-lien:hover{ transform:none; } }
.nl-billet-lien .nl-repere{ display:block; margin-bottom:0.3rem; }
.nl-billet-lien b{ font-size:1rem; font-weight:700; font-variation-settings:"wdth" 94;
  letter-spacing:-0.01em; line-height:1.35; }

/* ── La fin d'un billet mène quelque part ──────────────────────────── */
.nl-billet-fin p{ font-size:1.02rem; color:var(--encre-2); max-width:58ch; }
/* .nl-actions du thème apporte déjà flex, gap et marge : on n'ajoute que
   l'alignement vertical, pour que le lien de retour se cale sur le bouton. */
.nl-billet-fin-liens{ align-items:center; gap:0.9rem 1.4rem; }
.nl-lien-retour{ font-family:var(--machine); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--encre-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--filet);
  min-height:24px; display:inline-flex; align-items:center; }

/* ── Pagination ────────────────────────────────────────────────────── */
.nl-pages{ margin-top:2rem; }
.nl-pages .nav-links{ display:flex; flex-wrap:wrap; gap:0.7rem 1.4rem;
  font-family:var(--machine); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; }
/* Un numéro de page fait 7 px de large : sans largeur minimale, la cible
   est intouchable au doigt. */
.nl-pages a,.nl-pages .current{ min-height:24px; min-width:24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--encre-2); text-decoration:none; }
.nl-pages a:hover{ color:var(--ocre-2); }
.nl-pages .current{ color:var(--ocre-2); font-weight:700; }

/* ── Textes longs : ce que .nl-long ne couvrait pas ────────────────────
   Les conditions de vente comptent 27 articles avec des sous-titres, des
   listes et des tableaux. Sans ces règles, un h3 sort à la taille d'un
   paragraphe et une liste perd ses puces : un document contractuel doit se
   parcourir du regard, sinon personne ne le lit — et c'est précisément ce
   qu'on lui reprochera le jour d'un litige. */
.nl-long h3{ font-size:1.04rem; font-weight:700; font-variation-settings:"wdth" 96;
  color:var(--encre); margin-top:1.5rem; margin-bottom:0.45rem; }
.nl-long ul,.nl-long ol{ margin:0 0 0.9rem; padding-left:1.15rem; max-width:64ch; }
.nl-long li{ font-size:16px; color:var(--encre-2); line-height:1.65; margin-bottom:0.35rem; }
.nl-long li::marker{ color:var(--ocre); }
.nl-long strong{ color:var(--encre); font-weight:700; }
.nl-long hr{ border:0; border-top:1px solid var(--filet); margin:2.4rem 0; max-width:64ch; }
.nl-long blockquote{ margin:0 0 0.9rem; padding-left:1.1rem;
  border-left:3px solid var(--ocre); max-width:64ch; }
.nl-long blockquote p{ margin-bottom:0.4rem; }
/* Un tableau de barème doit rester lisible sur un téléphone : il défile. */
.nl-long .nl-tableau-long{ overflow-x:auto; margin-bottom:1.2rem;
  min-width:0; max-width:100%; overscroll-behavior-x:contain; }
.nl-long table{ border-collapse:collapse; min-width:420px; font-size:15px; }
.nl-long th,.nl-long td{ text-align:left; padding:0.6rem 0.9rem;
  border-bottom:1px solid var(--filet); vertical-align:top; }
.nl-long th{ font-family:var(--machine); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--encre-3); font-weight:600; }
/* Le sommaire d'un document de 27 articles. */
.nl-sommaire{ margin:1.4rem 0 0; padding:1.1rem 1.3rem; border:1px solid var(--filet);
  border-radius:12px; max-width:64ch; }
.nl-sommaire p{ font-family:var(--machine); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ocre-2); margin-bottom:0.6rem; }
.nl-sommaire ol{ margin:0; padding-left:1.2rem; column-count:2; column-gap:1.8rem; }
.nl-sommaire li{ font-size:14px; margin-bottom:0.2rem; break-inside:avoid; }
/* WCAG 2.2 AA : 24 px minimum. Mesuré à 390 px, les 27 liens du sommaire
   faisaient 19 px de haut — impossibles à viser au doigt sur un téléphone,
   qui est précisément l'appareil sur lequel on consulte des CGV en vitesse. */
.nl-sommaire a{ display:inline-block; padding-block:3px; min-height:24px;
  color:var(--encre-2); text-decoration:none; }
.nl-sommaire a:hover{ color:var(--ocre-2); text-decoration:underline; }
@media (max-width:640px){ .nl-sommaire ol{ column-count:1; } }

/* ── Un seul titre par page ────────────────────────────────────────────
   Constaté en ligne sur /mentions-legales/ et /confidentialite/ : deux
   balises h1. Kadence affiche le titre de la page dans .entry-header, et la
   composition porte le sien. Deux h1 rendent la structure des titres
   ambiguë pour un lecteur d'écran, et le titre de Kadence tombe en plus
   hors de la grille, donc mal aligné avec le texte.
   On garde celui de la composition — il est dans la colonne, à la bonne
   échelle — et on retire l'autre, seulement sur les pages concernées. */
body:has(.nl-long h1.nl-titre) .entry-header.page-title{ display:none; }

/* ── Le menu, quoi qu'en dise le thème parent ──────────────────────────
   Ceinture et bretelles : l'ordre de chargement est corrigé dans
   functions.php, mais une règle de menu doit tenir même si une future
   version de Kadence arrive avec une spécificité supérieure. Un point de
   liste devant chaque entrée de navigation est le genre de détail qui fait
   « site pas fini » au premier coup d'œil. */

/* ── L'en-tête coupé en plein mot ──────────────────────────────────────
   Mesuré en ligne, pas en local : entre 901 et 1150 px de large, « Nolir »
   s'affichait « Noli / r », et « Exemples » « EXEMPLE / S ». Hors WordPress
   le défaut n'existe pas — c'est pour ça qu'il a passé la relecture.

   La cause est une règle du thème parent, relevée dans le CSSOM en ligne :
       .entry-content{ word-break:break-word }   (kadence/css/global.min.css)
   Le bloc de l'accueil est collé DANS .entry-content, donc il en hérite.
   Avec word-break:break-word, la largeur minimale d'un mot n'est plus le
   mot mais UN caractère. Les éléments flex de l'en-tête ont par défaut
   min-width:auto, c'est-à-dire « pas plus petit que mon contenu » : leur
   plancher tombe donc à un caractère, ils rétrécissent jusqu'à rien, et la
   typographie se casse au milieu des mots.

   On rend à la marque et aux liens leur largeur minimale réelle, et on
   empêche les deux blocs latéraux de rétrécir. Vérifié de 1140 à 920 px :
   une seule ligne partout, en-tête à 80 px, aucun débordement ; et jusqu'à
   320 px, où le menu est déjà masqué.

   L'en-tête du thème (pages juridiques, carnet) est rendu hors de
   .entry-content : il n'est pas concerné, et n'est pas touché ici. */
#nl .nl-marque,#nl .nl-nav a{ word-break:normal; overflow-wrap:normal; white-space:nowrap; }
#nl .nl-marque,#nl .nl-tete-actions{ flex:none; }