/* =====================================================================
   CNB EXPERTISE — feuille de style unique.
   Palette : Bordeaux & grège (pal5). Vingt tons dérivés de cinq ancres, tous vérifiés
   au contraste : texte courant 14:1, texte secondaire et accents 4,5:1 au
   minimum. Régénérée par palettes.py ; ne pas retoucher les valeurs à la main.

   Matière graphique : guilloché — rosace et ruban calculés en hypotrochoïdes,
   posés une seule fois dans <defs> et réutilisés par <use>. Aucune image.
   ===================================================================== */

:root{
  --fond:#f8f5f0;
  --fond2:#e6e2de;
  --surface:#fcfaf8;
  --filet:#d1cdc9;
  --filet-fort:#afaaa7;
  --sombre:#261a1d;
  --sombre2:#3a2f31;
  --sur-sombre:#faf8f5;
  --sur-sombre-doux:#a8a2a0;
  --filet-sombre:#544a4b;
  --texte:#201819;
  --doux:#676160;
  --tenu:#726d6c;
  --accent:#6d2733;
  --accent-fonce:#551e28;
  --accent-clair:#e7dcd9;
  --accent-sur-sombre:#a47981;
  --chaud:#8a6a25;
  --chaud-texte:#8a6a25;
  --chaud-sur-sombre:#9d8248;
  --largeur:70rem;
  --gouttiere:clamp(1.25rem,4vw,2rem);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:6rem;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.12;}
h1{font-size:clamp(2.3rem,4.8vw,3.6rem);}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.2rem;font-weight:500;}
p{margin:0;}
a{color:inherit;}
em.plume{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent);}
.sombre em.plume{color:var(--chaud-sur-sombre);}
.plomb{color:var(--doux);}
.mesure{max-width:44rem;}
.centre{text-align:center;}
.centre.mesure{margin-left:auto;margin-right:auto;}

.eti{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:1rem;}
.eti::before,.eti::after{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.5;}
.eti--gauche::before{display:none;}
.sombre .eti{color:var(--chaud-sur-sombre);}

.enveloppe{max-width:var(--largeur);margin:0 auto;position:relative;z-index:2;
  padding-left:var(--gouttiere);padding-right:var(--gouttiere);}
.section{padding-block:clamp(3.5rem,7vw,5.5rem);}

/* ---- Guilloché ------------------------------------------------------ */
.defs{position:absolute;width:0;height:0;overflow:hidden;}
.gravure{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.gravure svg{position:absolute;color:var(--accent);}
.rosace{width:min(46rem,120vw);height:min(46rem,120vw);opacity:.11;}
.ouverture .rosace{animation:tourne 240s linear infinite;left:50%;top:48%;margin:-23rem 0 0 -23rem;}
@keyframes tourne{to{transform:rotate(360deg);}}
.frise{width:100%;height:100%;opacity:.16;}
.separateur{position:relative;height:3.2rem;border-top:3px double var(--filet);
  border-bottom:1px solid var(--filet);overflow:hidden;}
.separateur svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.22;}

/* ---- En-tête -------------------------------------------------------- */
.entete{position:sticky;top:0;z-index:40;background:var(--fond);border-bottom:3px double var(--filet);}
.entete__barre{max-width:var(--largeur);margin:0 auto;min-height:4.9rem;gap:1.5rem;
  padding-left:var(--gouttiere);padding-right:var(--gouttiere);
  display:flex;align-items:center;justify-content:space-between;}
/* Le logotype du cabinet. Rapport 1510 / 430, soit 3,51 : une hauteur de
   3,6rem donne 202px de large.
   POURQUOI 3,6 ET PAS DAVANTAGE. La barre fait 4,9rem, soit 78px. À 3,6rem le
   logotype en occupe 58 et laisse 10px d'air de chaque côté ; à 4rem il n'en
   resterait que 7, et la barre paraîtrait pleine à ras bord. Agrandir encore
   suppose donc de monter `min-height` d'abord — sans quoi le gain de présence
   se paie en étouffement. */
.marque{display:flex;align-items:center;text-decoration:none;flex:none;}
.marque__logo{display:block;height:3.6rem;width:auto;}
.nav{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;align-items:center;}
.nav a{text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:1px solid transparent;}
.nav a:hover,.nav a:focus-visible{color:var(--accent);border-bottom-color:var(--accent);}
.nav a[aria-current="page"]{border-bottom-color:var(--texte);}

/* ---- Sous-menus ------------------------------------------------------- */
/* Au survol ET au focus clavier, sans une ligne de JavaScript.
   `:focus-within` fait tout le travail : tabuler jusqu'à l'onglet parent
   ouvre le sous-menu, la tabulation suivante entre dedans. Un menu qui ne
   s'ouvrirait qu'à la souris serait inaccessible au clavier, et c'est le
   défaut le plus répandu de ce composant.
   Le survol seul ne suffit jamais : sur un écran tactile il n'existe pas.
   Voir la règle @media(hover:none) plus bas, qui déplie tout. */
.nav__item{position:relative;}
.nav__item--deroule > a::after{content:"";display:inline-block;width:.34em;height:.34em;
  margin-left:.42em;vertical-align:.14em;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.5;}
.sous-menu{position:absolute;top:100%;left:-1rem;min-width:16rem;list-style:none;
  margin:0;padding:.45rem 0;background:var(--surface);border:1px solid var(--filet-fort);
  box-shadow:0 6px 22px rgba(0,0,0,.09);opacity:0;visibility:hidden;
  transform:translateY(-.3rem);transition:opacity .16s,transform .16s;z-index:60;}
/* Le pont. Sans lui, les quelques pixels entre l'onglet et le panneau
   referment le menu dès que la souris les traverse. */
.sous-menu::before{content:"";position:absolute;top:-.7rem;left:0;right:0;height:.7rem;}
.nav__item:hover > .sous-menu,
.nav__item:focus-within > .sous-menu{opacity:1;visibility:visible;transform:none;}
.sous-menu li{margin:0;}
.sous-menu a{display:block;padding:.5rem 1.1rem;font-size:.88rem;line-height:1.35;
  border-bottom:0;white-space:nowrap;}
.sous-menu a:hover,.sous-menu a:focus-visible{background:var(--fond2);color:var(--accent);
  border-bottom:0;}
/* Les deux appels vivent hors de la navigation : ils doivent rester visibles
   quand celle-ci se replie derrière le burger.
   LEURS LIBELLÉS SONT PARALLÈLES, ET C'EST VOULU. « Rendez-vous » et « Devis »
   sont deux substantifs de même rang ; « Prendre rendez-vous » et « Demander
   un devis » pesaient 368px à eux deux, un tiers de la barre, et deux tournures
   verbales côte à côte se lisent comme une hésitation plutôt que comme un
   choix. Le devis est en bouton plein, le rendez-vous en creux : la hiérarchie
   se dit par la matière, pas par la longueur du texte. */
.entete__actions{display:flex;align-items:center;gap:.75rem;flex:none;}
.rdv__mini{display:none;}
.burger{display:none;background:none;border:1px solid var(--filet-fort);border-radius:.2rem;
  padding:.5rem;cursor:pointer;color:inherit;}

/* ---- Boutons -------------------------------------------------------- */
.bouton{display:inline-block;text-decoration:none;font-size:.93rem;font-weight:600;
  padding:.85rem 1.7rem;background:var(--accent);color:var(--fond);border:1px solid var(--accent);
  transition:background .2s,border-color .2s,color .2s;}
.bouton:hover,.bouton:focus-visible{background:var(--accent-fonce);border-color:var(--accent-fonce);}
.bouton--creux{background:transparent;color:var(--texte);border-color:var(--texte);}
.bouton--creux:hover,.bouton--creux:focus-visible{background:var(--texte);color:var(--fond);}
.sombre .bouton{background:var(--sur-sombre);color:var(--sombre);border-color:var(--sur-sombre);}
.sombre .bouton:hover,.sombre .bouton:focus-visible{background:var(--chaud-sur-sombre);
  border-color:var(--chaud-sur-sombre);color:var(--sombre);}
.boutons{display:flex;gap:1rem;flex-wrap:wrap;}
.boutons.centre{justify-content:center;}
/* Un bloc d'actions vide ne doit pas laisser sa marge derrière lui : depuis le
   retrait des appels au rendez-vous, certaines pages n'ont plus rien à y mettre. */
.boutons:empty{display:none;}
.lien-suite{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;
  font-size:.89rem;color:var(--accent);border-bottom:1px solid var(--filet);padding-bottom:.2rem;
  transition:gap .2s,border-color .2s;}
.lien-suite:hover,.lien-suite:focus-visible{gap:.8rem;border-bottom-color:var(--accent);}

/* ---- Ouverture ------------------------------------------------------ */
.ouverture{position:relative;background:var(--fond2);overflow:hidden;text-align:center;
  padding-block:clamp(4rem,9vw,6.5rem);}
.ouverture--page{padding-block:clamp(3.5rem,7vw,5rem);text-align:left;}
.ouverture .chapo{font-size:1.1rem;color:var(--doux);margin-top:1.5rem;}

/* ---- Ouverture en deux colonnes : le propos, et le compteur ---------- */
.ouverture__duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;text-align:left;}
/* La colonne est plus étroite qu'une pleine largeur : le titre se cale dessus. */
.ouverture__duo h1{font-size:clamp(2rem,3.5vw,3rem);}

/* Médaillon : le décompte gravé au centre de la rosace. C'est la première
   chose qu'un visiteur voit, et c'est une information qui le concerne. */
.medaillon{position:relative;aspect-ratio:1;width:100%;max-width:26rem;margin:0 auto;
  display:flex;align-items:center;justify-content:center;}
.medaillon svg{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);opacity:.28;
  animation:tourne 300s linear infinite;}
.medaillon{text-decoration:none;color:inherit;}
.medaillon svg{transition:opacity .3s;}
.medaillon:hover svg,.medaillon:focus-visible svg{opacity:.42;}
.medaillon__coeur{position:relative;z-index:1;text-align:center;padding:1rem;display:block;}
.medaillon__chiffre{display:block;font-family:var(--serif);font-size:clamp(3.2rem,7vw,4.6rem);
  line-height:.95;color:var(--chaud-texte);letter-spacing:-.02em;}
.medaillon__libelle{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-top:.8rem;line-height:1.7;}
.medaillon__lien{display:block;font-size:.78rem;font-weight:600;color:var(--accent);
  margin-top:1rem;border-bottom:1px solid var(--filet);padding-bottom:.15rem;
  width:fit-content;margin-left:auto;margin-right:auto;transition:border-color .2s;}
.medaillon:hover .medaillon__lien{border-bottom-color:var(--accent);}
.medaillon__note{font-size:.8rem;color:var(--tenu);margin-top:.7rem;max-width:15rem;
  margin-left:auto;margin-right:auto;line-height:1.5;}

/* Entrée à l'ouverture — CSS seul, aucun script, neutralisée si demandé */
.monte{animation:monte .9s cubic-bezier(.2,.7,.2,1) both;}
.monte--2{animation-delay:.12s;}
.monte--3{animation-delay:.24s;}
.monte--4{animation-delay:.36s;}
@keyframes monte{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ---- Plaque gravée -------------------------------------------------- */
.plaque{position:relative;overflow:hidden;color:var(--sur-sombre);
  background:linear-gradient(160deg,var(--sombre),var(--sombre2));}
.plaque .frise{color:var(--sur-sombre);opacity:.13;}
.plaque h2{color:var(--sur-sombre);}
.plaque__cadre{position:relative;border:1px solid var(--filet-sombre);padding:2rem 1.5rem;margin-top:1.8rem;}
.plaque__cadre::before{content:"";position:absolute;inset:5px;border:1px solid var(--filet-sombre);
  opacity:.55;pointer-events:none;}
.obligations{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
.obligation{text-align:center;}
.obligation + .obligation{border-left:1px solid var(--filet-sombre);}
.obligation b{display:block;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,1.75rem);
  color:var(--chaud-sur-sombre);line-height:1.05;}
.obligation em{display:block;font-style:normal;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sur-sombre-doux);margin:.3rem 0 .9rem;}
.obligation em:last-of-type{margin-bottom:0;}
.obligation strong{display:block;font-size:.95rem;margin-bottom:.7rem;}
.obligation span{display:block;font-size:.83rem;color:var(--sur-sombre-doux);margin-top:.8rem;
  padding:0 .5rem;}

/* ---- Étapes --------------------------------------------------------- */
.etapes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.4rem;}
.etape{position:relative;border:1px solid var(--filet);background:var(--surface);padding:1.7rem 1.6rem;}
.etape__n{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--chaud-texte);}
.etape h3{margin:.4rem 0 .6rem;}
.etape p{font-size:.94rem;color:var(--doux);}

/* ---- Cartes de mission ---------------------------------------------- */
.cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.6rem;}
.carte{position:relative;overflow:hidden;border:1px solid var(--filet);background:var(--surface);
  padding:1.9rem 1.6rem;display:flex;flex-direction:column;transition:transform .3s,border-color .3s;}
.carte::before{content:"";position:absolute;inset:5px;border:1px solid var(--filet-fort);
  opacity:0;transition:opacity .3s;pointer-events:none;}
.carte:hover{transform:translateY(-3px);border-color:var(--accent);}
.carte:hover::before{opacity:.5;}
.carte .num{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--chaud-texte);
  margin-bottom:.5rem;}
.carte ul{margin:1rem 0 0;padding:0;list-style:none;font-size:.9rem;color:var(--doux);}
.carte li{padding-left:1rem;position:relative;margin-bottom:.35rem;}
.carte li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--accent);}
.carte .lien-suite{margin-top:auto;padding-top:1.3rem;align-self:flex-start;}

/* ---- Instrument d'échéances ----------------------------------------- */
.instrument{position:relative;overflow:hidden;background:var(--fond2);}
.instrument > .gravure .rosace{right:-14rem;top:-10rem;opacity:.09;}
.boite{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--accent);
  padding:clamp(1.5rem,3vw,2.4rem);margin-top:1.8rem;}
.boite::before{content:"";position:absolute;inset:6px;border:1px solid var(--accent);
  opacity:.3;pointer-events:none;z-index:2;}
.boite .gravure svg{right:-9rem;bottom:-13rem;width:34rem;height:34rem;opacity:.07;}
.boite__grille{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;}
.champ{margin-bottom:1.6rem;}
.champ:last-child{margin-bottom:0;}
.champ fieldset{border:0;padding:0;margin:0;}
.champ legend{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  font-weight:600;padding:0;margin-bottom:.8rem;line-height:1.6;}
.choix{display:grid;gap:.5rem;}
.choix label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;background:var(--fond);
  border:1px solid var(--filet);padding:.78rem .95rem;font-size:.93rem;transition:border-color .2s,background .2s;}
.choix label:hover{border-color:var(--accent);}
.choix label:has(input:checked){border-color:var(--accent);background:var(--accent-clair);}
.choix input{margin:.42rem 0 0;accent-color:var(--accent);flex:none;}
.choix small{display:block;color:var(--tenu);font-size:.79rem;line-height:1.5;margin-top:.15rem;}
.ech{border-bottom:1px solid var(--filet);padding:1rem 0;}
.ech:first-child{padding-top:0;}
.ech:last-child{border-bottom:0;padding-bottom:0;}
.ech__titre{display:block;font-size:.96rem;font-weight:600;}
.ech__detail{display:block;color:var(--tenu);font-size:.81rem;line-height:1.5;margin-top:.1rem;font-weight:400;}
.ech__valeur{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-top:.55rem;}
.ech__date{font-size:.92rem;color:var(--doux);}
.ech__compte{font-family:var(--serif);font-size:1.6rem;color:var(--chaud);line-height:1;}
.ech__compte--neutre{font-family:var(--sans);font-size:.9rem;color:var(--tenu);}
.mention{font-size:.8rem;color:var(--tenu);margin-top:1.5rem;position:relative;z-index:1;}

/* ---- Cartouche ------------------------------------------------------- */
/* N'existe qu'à l'impression : il n'a aucun sens à l'écran, où la page dit
   déjà d'où elle vient. Il est déclaré ici, avec les composants, plutôt que
   dans le bloc @media print, pour qu'on le trouve en cherchant « cartouche ». */
.cartouche{display:none;}
/* Contenu qui n'existe qu'à l'impression, en dehors du cartouche : sert au
   désaveu de dernière page sur les feuilles qui en font plusieurs. */
.hors-ecran{display:none;}

/* ---- Méthode -------------------------------------------------------- */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,3.2rem);align-items:center;}
.cadre-photo{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--fond2);
  border:1px solid var(--accent);display:flex;align-items:flex-end;}
.cadre-photo::before{content:"";position:absolute;inset:6px;border:1px solid var(--accent);
  opacity:.3;z-index:2;pointer-events:none;}
.cadre-photo .gravure svg{left:50%;top:50%;width:130%;height:130%;transform:translate(-50%,-50%);opacity:.2;}
.cadre-photo p{position:relative;z-index:3;padding:1.2rem;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenu);}
.lettrine::first-letter{font-family:var(--serif);font-weight:600;font-size:3.4rem;line-height:.82;
  float:left;margin:.1em .14em 0 0;color:var(--accent);}

/* ---- Suggestion d'entreprise (devis) --------------------------------- */
/* Ces règles ne servent qu'à devis.html, et elles vivent quand même ici :
   tout le CSS du site tient dans cette chaîne, il n'y a de <style> par page
   nulle part. Le coût est d'environ un kilo-octet servi à toutes les pages —
   le même marché que les règles .mois, qui ne servent qu'à deux d'entre
   elles. Une feuille unique se relit ; deux feuilles divergent. */
.suggest{list-style:none;margin:.35rem 0 0;padding:0;border:1px solid var(--filet-fort);
  background:var(--surface);max-height:17rem;overflow-y:auto;position:relative;z-index:5;}
.suggest li{padding:.55rem .7rem;cursor:pointer;border-bottom:1px solid var(--filet);
  font-size:.92rem;line-height:1.35;}
.suggest li:last-child{border-bottom:0;}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--fond2);}
.suggest__nom{display:block;font-weight:600;}
.suggest__det{display:block;font-size:.8rem;color:var(--tenu);margin-top:.1rem;}
.suggest__etat{font-size:.82rem;color:var(--tenu);margin:.4rem 0 0;}
.dirigeants{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem;}
.dirigeant{font:inherit;font-size:.88rem;text-align:left;cursor:pointer;line-height:1.3;
  padding:.5rem .75rem;border:1px solid var(--filet-fort);background:var(--surface);
  color:var(--texte);}
.dirigeant:hover{background:var(--fond2);}
.dirigeant[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent);}
.dirigeant__q{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tenu);margin-bottom:.1rem;}
.dirigeant[aria-pressed="true"] .dirigeant__q{color:rgba(255,255,255,.82);}

/* ---- Carte au clic --------------------------------------------------- */
/* Rien n'est chargé tant que le visiteur n'a pas cliqué. Une iframe posée
   d'emblée appellerait Google au chargement de la page, lui transmettrait
   l'adresse IP de TOUT visiteur et déposerait ses cookies — ce qui rendrait
   fausse la première phrase de donnees-personnelles.html. Le déclencheur dit
   ce qui va se produire avant que ça se produise. */
.carte__declencheur{position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer;
  color:inherit;font:inherit;text-align:left;padding:1.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;}
.carte__lieu{font-family:var(--serif);font-size:1.3rem;line-height:1.15;}
.carte__ville{font-size:.92rem;color:var(--doux);}
.carte__action{align-self:flex-start;margin-top:.8rem;border:1px solid var(--accent);
  color:var(--accent);font-size:.82rem;font-weight:600;padding:.5rem 1rem;
  transition:background .2s,color .2s;}
.carte__declencheur:hover .carte__action,
.carte__declencheur:focus-visible .carte__action{background:var(--accent);color:var(--fond);}
.carte__garde{font-size:.72rem;color:var(--tenu);line-height:1.5;margin-top:.7rem;max-width:26rem;}
.cadre-photo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;}

/* ---- Missions détaillées -------------------------------------------- */
.mission{position:relative;overflow:hidden;padding-block:clamp(2.8rem,5vw,4rem);
  border-top:1px solid var(--filet);}
.mission__grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);}
.mission__numero{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:.8rem;}
.sombre .mission__numero{color:var(--chaud-sur-sombre);}
.liste-prestations{margin:1.3rem 0 0;padding:0;list-style:none;}
.liste-prestations li{position:relative;padding-left:1.8rem;margin-bottom:.9rem;line-height:1.6;}
.liste-prestations li::before{content:"";position:absolute;left:0;top:.68em;width:1rem;height:1px;
  background:var(--accent);}
.sombre .liste-prestations li::before{background:var(--chaud-sur-sombre);}
.gain{margin-top:1.6rem;border-left:2px solid var(--accent);padding:.35rem 0 .35rem 1.1rem;
  font-size:.95rem;color:var(--doux);}
.gain strong{color:var(--texte);}
.sommaire{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:2rem 0 0;padding:0;}
.sommaire a{display:inline-block;text-decoration:none;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;border:1px solid var(--filet-fort);padding:.5rem 1rem;
  transition:background .2s,color .2s,border-color .2s;}
.sommaire a:hover,.sommaire a:focus-visible{background:var(--accent);color:var(--fond);border-color:var(--accent);}

/* ---- Ressources : cartes d'article ---------------------------------- */
.ressources{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem;}
.carte-ressource{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--filet);background:var(--surface);padding:1.8rem 1.6rem;
  text-decoration:none;transition:transform .3s,border-color .3s;}
.carte-ressource::before{content:"";position:absolute;inset:5px;border:1px solid var(--filet-fort);
  opacity:0;transition:opacity .3s;pointer-events:none;}
.carte-ressource:hover{transform:translateY(-3px);border-color:var(--accent);}
.carte-ressource:hover::before{opacity:.5;}
.carte-ressource .kicker{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--chaud-texte);}
.carte-ressource h3{margin:.6rem 0 .5rem;font-size:1.15rem;font-weight:600;}
.carte-ressource p{font-size:.92rem;color:var(--doux);}
.carte-ressource .meta{margin-top:auto;padding-top:1.3rem;font-size:.8rem;color:var(--tenu);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;}
.carte-ressource .meta span:last-child{color:var(--accent);font-weight:600;}

/* ---- Saisie chiffrée (planificateur de décaissements) ---------------- */
.saisie{display:grid;gap:.3rem;margin-bottom:1rem;}
.saisie > label{font-size:.88rem;font-weight:600;}
.saisie small{font-size:.77rem;color:var(--tenu);line-height:1.5;}
.saisie input,.saisie select,.saisie textarea{font:inherit;font-size:.95rem;padding:.6rem .7rem;
  width:100%;border:1px solid var(--filet);background:var(--fond);color:var(--texte);
  border-radius:0;}
.saisie textarea{min-height:6rem;resize:vertical;line-height:1.6;}
.saisie select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .75rem) 55%;
  background-size:.35rem .35rem,.35rem .35rem;background-repeat:no-repeat;}
.saisie input:focus,.saisie select:focus,.saisie textarea:focus{border-color:var(--accent);
  outline:2px solid var(--accent);outline-offset:1px;}
/* Le piège à robots : invisible à l'écran, mais pas display:none — un lecteur
   d'écran doit pouvoir l'annoncer, et un robot doit pouvoir le remplir. */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.requis{color:var(--accent);font-weight:600;}
.saisie--duo{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:end;}
.bloc-saisie{border-top:1px solid var(--filet);padding-top:1.3rem;margin-top:1.3rem;}
.bloc-saisie:first-child{border-top:0;padding-top:0;margin-top:0;}
.bloc-saisie > p.l{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:.9rem;}

/* ---- Détail par échéance : un montant peut différer d'une fois à l'autre.
   Un échéancier URSSAF n'est jamais linéaire — l'outil doit le permettre. --- */
.bascule{display:inline-flex;gap:.5rem;align-items:center;cursor:pointer;font-size:.8rem;
  color:var(--accent);font-weight:600;margin-top:.15rem;}
.bascule input{accent-color:var(--accent);margin:0;}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.85rem;
  padding:.9rem;background:var(--fond2);border:1px solid var(--filet);}
.detail:empty{display:none;padding:0;border:0;margin:0;}
.detail label{display:grid;gap:.15rem;font-size:.68rem;color:var(--tenu);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.detail input{font:inherit;font-size:.9rem;padding:.45rem .55rem;width:100%;
  border:1px solid var(--filet);background:var(--fond);color:var(--texte);border-radius:0;}
.detail input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px;}

/* ---- Restitution mois par mois --------------------------------------- */
.mois{border-bottom:1px solid var(--filet);padding:.85rem .8rem;margin-inline:-.8rem;}
.mois:last-child{border-bottom:0;}
.mois__tete{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;}
.mois__nom{font-weight:600;font-size:.95rem;}
.mois__chiffres{display:flex;gap:1.2rem;align-items:baseline;}
.mois__val{font-family:var(--serif);font-size:1.3rem;line-height:1;color:var(--texte);}
.mois__val--dir{color:var(--chaud-texte);}
.mois__val i{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenu);margin-top:.3rem;}
.mois__detail{font-size:.8rem;color:var(--tenu);margin-top:.45rem;line-height:1.55;}
.mois--pic{background:var(--accent-clair);}
.mois--pic .mois__val{color:var(--accent);}
.bilan{border-top:3px double var(--filet);margin-top:1.2rem;padding-top:1.2rem;font-size:.9rem;}
.bilan strong{color:var(--accent);}

/* ---- Points de vigilance -------------------------------------------- */
.points{margin-top:2.6rem;border-top:1px solid var(--filet);}
.point{display:grid;grid-template-columns:5rem 1fr;gap:1.5rem;padding-block:1.8rem;
  border-bottom:1px solid var(--filet);align-items:start;}
.point__n{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--chaud-texte);}
/* Le commandement est le titre : forme frappée, sujet en sous-titre sobre. */
.point__loi{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.25;color:var(--accent);}
.point__sujet{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--tenu);margin:.5rem 0 .9rem;}
.point__reflexe,.point__risque{font-size:.94rem;color:var(--doux);max-width:52rem;}
.point__risque{margin-top:.6rem;}
.point__reflexe strong{color:var(--accent);}
.point__risque strong{color:var(--texte);}

/* ---- Article -------------------------------------------------------- */
.dateline{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenu);margin-top:1.6rem;}
.dateline span{display:inline-flex;align-items:center;gap:.5rem;}
.dateline span::before{content:"";width:.4rem;height:.4rem;background:var(--accent);flex:none;}
.article{max-width:44rem;}
.article > * + *{margin-top:1.2rem;}
.article h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:2.8rem;}
.article h3{font-size:1.12rem;font-weight:600;margin-top:2rem;}
.article ul,.article ol{margin-left:0;padding-left:1.3rem;}
.article li{margin-bottom:.6rem;line-height:1.65;}
.article li::marker{color:var(--accent);}
.article strong{font-weight:600;}
.article a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--filet);}
.article a:hover{border-bottom-color:var(--accent);}
.a-retenir{position:relative;border:1px solid var(--accent);background:var(--accent-clair);
  padding:1.5rem 1.6rem;margin-top:2.4rem;}
.a-retenir::before{content:"";position:absolute;inset:5px;border:1px solid var(--accent);
  opacity:.28;pointer-events:none;}
.a-retenir p.t{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--accent);margin-bottom:.8rem;}
.a-retenir ul{margin:0;padding-left:1.2rem;font-size:.94rem;}
.avertissement{border-left:2px solid var(--filet-fort);padding:.4rem 0 .4rem 1.1rem;
  font-size:.85rem;color:var(--tenu);margin-top:2.6rem;}
.nav-article{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid var(--filet);margin-top:3rem;padding-top:1.6rem;}

/* ---- FAQ ------------------------------------------------------------ */
.faq details{border-bottom:1px solid var(--filet);padding-block:1.2rem;}
.faq details:first-of-type{border-top:1px solid var(--filet);}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;
  gap:1.5rem;align-items:baseline;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--serif);color:var(--accent);flex:none;font-size:1.2rem;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin-top:.9rem;color:var(--doux);max-width:52rem;}

/* ---- Appel et pied de page ------------------------------------------ */
.appel{position:relative;overflow:hidden;text-align:center;color:var(--sur-sombre);
  background:linear-gradient(150deg,var(--sombre),var(--sombre2));}
.appel .rosace{left:50%;top:50%;margin:-23rem 0 0 -23rem;color:var(--sur-sombre);opacity:.09;}
.appel h2{color:var(--sur-sombre);}
.appel p{color:var(--sur-sombre-doux);}
.pied{position:relative;overflow:hidden;background:var(--sombre);color:var(--sur-sombre);}
.pied .frise{color:var(--sur-sombre);opacity:.1;}
.pied__signature{font-family:var(--serif);font-size:clamp(3rem,10vw,7rem);line-height:.9;
  letter-spacing:-.02em;padding-top:clamp(2.5rem,5vw,4rem);}
.pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;margin-top:2.2rem;
  padding-block:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--filet-sombre);}
.pied p{color:var(--sur-sombre-doux);font-size:.9rem;}
.pied a{display:block;text-decoration:none;color:var(--sur-sombre-doux);font-size:.92rem;
  padding:.28rem 0;transition:color .2s,padding-left .2s;}
.pied a:hover,.pied a:focus-visible{color:var(--sur-sombre);padding-left:.3rem;}
.pied__titre{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sur-sombre-doux);font-weight:600;margin-bottom:.9rem;}
.pied__bas{border-top:1px solid var(--filet-sombre);padding-block:1.4rem;font-size:.82rem;
  color:var(--sur-sombre-doux);display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;}

/* ---- Accessibilité --------------------------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.sombre :focus-visible,.plaque :focus-visible,.appel :focus-visible,.pied :focus-visible{
  outline-color:var(--chaud-sur-sombre);}
.saut{position:absolute;left:-9999px;}
.saut:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--sombre);
  color:var(--sur-sombre);padding:.8rem 1.3rem;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    animation-iteration-count:1!important;}
  .monte{opacity:1;transform:none;}
}

/* ---- Adaptations ----------------------------------------------------- */
@media(max-width:1000px){
  .cartes{grid-template-columns:repeat(2,1fr);}
  .boite__grille,.duo,.mission__grille{grid-template-columns:1fr;gap:2rem;}
}
@media(max-width:1000px){
  .ressources{grid-template-columns:1fr;}
  .ouverture__duo{grid-template-columns:1fr;text-align:center;}
  .ouverture__duo .eti,.ouverture__duo .boutons{justify-content:center;}
  .ouverture__duo .chapo{margin-left:auto;margin-right:auto;}
  .medaillon{max-width:20rem;order:-1;}
}
@media(max-width:820px){
  .obligations{grid-template-columns:1fr;}
  .obligation + .obligation{border-left:0;border-top:1px solid var(--filet-sombre);padding-top:1.5rem;}
  .etapes{grid-template-columns:1fr;}
  .pied__grille{grid-template-columns:1fr 1fr;}
}
/* Le seuil de repli de la navigation. IL SE MESURE, IL NE SE DEVINE PAS, et il
   a déjà bougé quatre fois : 700 px à l'origine, 1060 quand le rendez-vous est
   sorti de la navigation, 1180 quand le devis l'a rejoint, 1040 quand
   « Accueil » et « Les 10 commandements » ont quitté la barre — et 1120 depuis
   qu'« Vos outils » y est entré, le 15 août 2026.
   LA MESURE, prise au navigateur sur l'accueil : logotype 202 px, navigation
   437 (65 + 83 + 61 + 77 + 71 pour les cinq onglets, plus quatre gouttières de
   20), deux appels 241, deux gouttières de barre de 24. Le contenu réclame
   928 px là où quatre onglets en réclamaient 801.
   REMESURE DU 18 AOÛT 2026, après le renommage des deux onglets d'outils
   (« Vos outils » → « Vos logiciels », « Instruments » → « Outils ») :
   logotype 202, navigation 472, appels 240, deux gouttières de 24. Le contenu
   réclame 962 px. Aucun onglet n'est entré ni sorti — seuls les libellés ont
   changé — mais un libellé a une largeur, et les chiffres ci-dessus étaient
   devenus faux. On ne laisse pas une mesure périmée dans un commentaire qui
   sert à décider.
   POURQUOI 1120 ET PAS 1060. La barre déborde strictement à 1042 px de fenêtre
   (962 de contenu, 64 de marge intérieure, 16 d'ascenseur) — c'était 1007
   avant le renommage. S'y coller ne laisserait rien : le premier onglet
   ajouté, ou un libellé rallongé d'un mot, ferait déborder la barre sans
   prévenir. 1120 laisse encore 78 px de jeu — c'était 113 — et tombe juste
   sous 1152 px, largeur d'ordinateur portable courante où les cinq onglets
   tiennent encore au large. LA MARGE A DONC FONDU D'UN TIERS : le prochain
   rallongement de libellé se remesure avant d'être écrit, il ne s'estime plus.
   Recalculer à chaque fois qu'on ajoute, retire OU RENOMME quelque chose dans
   la barre — ce seuil ne se devine pas. */
@media(max-width:1120px){
  .burger{display:block;}
  .nav{display:none;position:absolute;top:100%;left:0;width:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--fond);border-bottom:1px solid var(--filet);
    padding:.25rem var(--gouttiere) 1.25rem;}
  .nav.ouvert{display:flex;}
  .nav li{border-bottom:1px solid var(--filet);}
  .nav li:last-child{border-bottom:0;}
  .nav a{display:block;padding:.95rem 0;font-size:1rem;}
  /* Sous le burger, plus rien ne flotte : les sous-menus se déplient en
     liste indentée. Un panneau superposé dans un menu déjà déroulé se
     recouvrirait lui-même, et le survol n'existe pas sur un téléphone. */
  .nav__item--deroule > a::after{display:none;}
  .sous-menu{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;border:0;box-shadow:none;background:none;padding:0 0 .7rem;}
  .sous-menu::before{display:none;}
  .sous-menu li{border-bottom:0;}
  .sous-menu a{padding:.45rem 0 .45rem 1rem;font-size:.9rem;white-space:normal;
    border-left:1px solid var(--filet-fort);}
  .sous-menu a:hover,.sous-menu a:focus-visible{background:none;}
}
/* Écrans tactiles au-dessus du seuil du burger : le survol n'existe pas, mais
   la barre est encore horizontale. Un panneau qui ne s'ouvrirait qu'au survol
   y serait purement inatteignable — on le déplie donc au focus seul, et le
   chevron disparaît puisqu'il ne promet plus rien. */
@media(hover:none){
  .nav__item--deroule > a::after{display:none;}
  .sous-menu{transition:none;}
}
@media(prefers-reduced-motion:reduce){
  .sous-menu{transition:none;}
}
@media(max-width:700px){
  body{font-size:16px;}
  /* Les deux appels restent dans la barre, à côté du burger. Leurs libellés
     tiennent déjà en un mot depuis qu'ils ont été abrégés : rien à escamoter
     ici, seulement à resserrer. */
  .entete__barre{gap:.7rem;}
  .marque__logo{height:2.6rem;}
  .entete__actions{gap:.5rem;}
  .bouton--rdv{padding:.6rem .8rem;font-size:.82rem;}
  .cartes{grid-template-columns:1fr;}
  .pied__grille{grid-template-columns:1fr;gap:1.8rem;}
  .point{grid-template-columns:1fr;gap:.6rem;}
  .point__n{font-size:1.5rem;}
  .saisie--duo{grid-template-columns:1fr;}
  .mois__chiffres{gap:1rem;}
}
/* Sous 380 px — iPhone SE de première génération, Galaxy Fold replié — le
   logotype agrandi, deux appels et le burger ne tiennent plus sur 320 px.
   Plutôt que d'escamoter un appel, on abrège : « Rendez-vous » devient
   « RDV », le logotype redescend à 2,1rem. Les deux actions restent visibles.
   RIEN NE DISPARAÎT JAMAIS DERRIÈRE LE BURGER SAUF LA NAVIGATION. */
@media(max-width:380px){
  .marque__logo{height:2.1rem;}
  .entete__barre{gap:.45rem;}
  .entete__actions{gap:.35rem;}
  .rdv__long{display:none;}
  .rdv__mini{display:inline;}
  .bouton--rdv{padding:.55rem .7rem;font-size:.8rem;}
  .burger{padding:.4rem;}
}
/* ---- Impression, règle générale -------------------------------------- */
/* Le guilloché est décoratif à l'écran. Sur une page de texte imprimée il ne
   sert à rien et coûte de l'encre : il reste masqué. Il n'est réautorisé que
   sur les feuilles d'instrument, bloc suivant. */
@media print{
  .entete,.appel,.boutons,.gravure,.separateur,.saut,.hors-feuille{display:none;}
  .pied .frise,.pied__signature,.pied__grille{display:none;}
  .pied{background:none;color:inherit;}
  .pied__bas{border-top:1pt solid #999;padding-block:.7rem;}
  .pied__bas span{color:inherit;}
}

/* ---- La feuille gravée ----------------------------------------------- */
/* Sur une page qui porte un instrument, imprimer ne rend pas la page : cela
   rend le RÉSULTAT. Le pourquoi, les questions fréquentes et les champs qu'on
   vient de remplir n'ont aucune raison de partir à l'imprimante.
   Le guilloché, lui, y retrouve sa fonction. C'est le tracé des titres et des
   documents ; il n'avait jamais servi qu'à décorer un écran.

   RÈGLE, sans exception : aucune information ne dépend d'un aplat de couleur.
   Les navigateurs suppriment les fonds à l'impression. Tout ce qui compte est
   donc porté par du texte ou par un filet — le mois le plus lourd est nommé
   en toutes lettres dans le bilan, le liseré ne fait que le redire. */
@media print{
  .feuille main > section:not(.instrument){display:none;}
  .feuille .instrument{background:none;}
  .feuille .instrument > .enveloppe{padding-block:0;}
  .feuille .instrument > .enveloppe > :not(.boite):not(.mention){display:none;}
  /* Le pied est retiré : le cartouche dit déjà d'où vient la feuille, et le
     répéter en bas coûte la ligne dont on a besoin pour tenir sur une page. */
  .feuille .pied{display:none;}
  /* La mention de fin est au contraire conservée : si la feuille déborde
     malgré tout, elle est ce que porte la dernière page. */
  .feuille .mention{font-size:.62rem;line-height:1.4;margin-top:.5rem;}
  .feuille .hors-ecran{display:inline;}
  /* overflow devient visible : un cadre qui traverse un saut de page et qui
     détoure son contenu, c'est du contenu perdu chez certains moteurs. Le
     guilloché n'a donc plus le droit de déborder — il est replacé À L'INTÉRIEUR
     du cadre, centré, en filigrane. Ce qui vaut mieux : un motif d'angle se
     lirait comme un sceau, et une feuille de cabinet n'a rien à sceller. */
  .feuille .boite{margin-top:0;padding:1.1rem 1.3rem;border-color:#000;overflow:visible;}
  .feuille .boite::before{border-color:#000;}
  .feuille .boite > .gravure{display:block;}
  .feuille .boite .gravure svg{right:auto;bottom:auto;left:50%;top:34%;
    width:19rem;height:19rem;margin-left:-9.5rem;opacity:.09;}
  .feuille .boite__grille{grid-template-columns:1fr;gap:0;}

  .feuille .cartouche{display:block;border-bottom:1.5pt solid #000;
    padding-bottom:.7rem;margin-bottom:.9rem;}
  .feuille .cartouche__source{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;
    text-transform:uppercase;font-weight:600;}
  .feuille .cartouche__objet{font-family:var(--serif);font-size:1.25rem;line-height:1.15;
    margin-top:.3rem;}
  .feuille .cartouche__desaveu{font-size:.66rem;line-height:1.45;margin-top:.5rem;max-width:42rem;}
  .feuille .cartouche__date{font-size:.66rem;margin-top:.3rem;}
  .feuille .cartouche__date:empty{display:none;}

  .feuille .avertissement{border-left-color:#000;font-size:.68rem;line-height:1.45;
    padding-block:.15rem;margin-bottom:.6rem;}

  /* Douze mois doivent tenir sous le cartouche sur une seule feuille. Le
     resserrement porte sur les blancs, jamais sur ce qui est écrit. */
  .feuille .mois{padding:.22rem .5rem;break-inside:avoid;}
  .feuille .mois--pic{background:none;border-left:2.5pt solid currentColor;padding-left:.42rem;}
  .feuille .mois__nom{font-size:.82rem;}
  .feuille .mois__chiffres{gap:.9rem;}
  .feuille .mois__val,.feuille .mois__val--dir{color:inherit;font-size:.95rem;}
  .feuille .mois__val i{font-size:.52rem;}
  .feuille .mois__detail{font-size:.66rem;line-height:1.3;margin-top:.1rem;}
  .feuille .bilan{break-inside:avoid;font-size:.78rem;margin-top:.7rem;padding-top:.7rem;}
}


/* =====================================================================
   PARURE GRAVÉE — bloc additif, supprimable d'un seul tenant.
   Aucune couleur n'est redéfinie ici. Sous @media screen : l'impression
   obéit à la feuille gravée, qui a ses propres règles.
   Repasser PARURE à "sobre" dans gen_site.py fait disparaître ce bloc.
   ===================================================================== */
@media screen{
  .ouverture .rosace{
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 74%);
    mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 74%);}

  .medaillon svg.medaillon__contre{inset:9%;width:82%;height:82%;opacity:.13;
    animation:contre 470s linear infinite;}
  @keyframes contre{to{transform:rotate(-360deg);}}
  .medaillon:hover svg.medaillon__contre,
  .medaillon:focus-visible svg.medaillon__contre{opacity:.2;}

  .separateur::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(to bottom,
      transparent 0 .55rem, currentColor .55rem calc(.55rem + 1px));
    color:var(--filet);opacity:.9;}

  .boite::after{content:"";position:absolute;inset:12px;pointer-events:none;z-index:2;
    border:1px solid var(--accent);opacity:.14;}
  .boite__grille{z-index:3;}

  .point__n{position:relative;display:flex;align-items:center;justify-content:center;
    width:3.4rem;height:3.4rem;}
  .point__n::before{content:"";position:absolute;inset:0;border-radius:50%;
    border:1px solid var(--accent);opacity:.3;}
  .point__n::after{content:"";position:absolute;inset:4px;border-radius:50%;
    border:1px solid var(--accent);opacity:.15;}

  .plaque .frise{opacity:.2;}
  .plaque{border-top:1px solid var(--filet-sombre);}
  .pied .frise{opacity:.15;}

  .mois{position:relative;}
  .mois--pic{box-shadow:inset 3px 0 0 var(--accent);}
  .mois--pic .mois__nom::after{content:"";display:inline-block;width:1.4rem;height:1px;
    margin-left:.6rem;vertical-align:middle;background:var(--accent);}
}