/* =========================================================
   Arnaud Franchini - feuille de style du site public
   Palette : encre bleu-noir, papier chaud, accent marine, or en filet.
   ========================================================= */

/* =========================================================
   Jetons.

   COULEURS. Un seul accent dominant, le marine. Le dore est decoratif et
   RARE : mesure a 2,95 pour 1 sur le fond clair, il ne peut porter aucun
   texte, pas meme un grand titre. Il ne sert donc qu'a des filets et des
   bordures, jamais a un glyphe. Tous les autres couples ont ete mesures et
   depassent 4,5 pour 1.

   TYPOGRAPHIE. Tout en rem, rien en pixels figes : le texte suit le reglage
   du lecteur, qui est souvent la premiere aide dont il dispose. L'echelle
   passe du telephone au grand ecran par clamp(), donc sans rupture ni palier.
   ========================================================= */

:root{
  /* ---- palette claire ---- */
  --paper:#faf9f6;              /* blanc casse chaud, moins clinique que le blanc pur */
  --surface:#f2f0ea;
  --surface-alt:#ece9e1;
  --ink:#1a1d24;                /* encre profonde : le noir pur fatigue */
  --ink-soft:#4a4d55;
  --ink-faint:#5c5f66;          /* 6,07:1 : jamais de gris clair sur fond clair */
  --sous-entete:112px;   /* hauteur de l'en-tete fixe, plus une respiration */
  --rule:#ddd9cf;
  --rule-strong:#c9c4b6;
  --accent:#1f3a5f;             /* marine : 10,9:1 sur le fond */
  --accent-fort:#2c4f7c;        /* survol */
  --accent-soft:#e8ecf2;
  --or:#b08d4c;                 /* filets et bordures UNIQUEMENT : 2,95:1 */
  --succes:#3d7a4e;
  --erreur:#a94442;
  --focus:#1f3a5f;
  --on-accent:#ffffff;          /* 11,5:1 sur le marine */

  /* ---- mouvement ---- */
  --vite:120ms;
  --moyen:200ms;
  --courbe:cubic-bezier(.2,.65,.25,1);

  /* ---- familles ---- */
  --titre:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:var(--sans);          /* le corps est en sans : les anciens appels suivent */
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- echelle fluide, du telephone au grand ecran ---- */
  --t-micro:.875rem;                                  /* 14 px : plancher absolu */
  --t-meta:clamp(.875rem,.84rem + .16vw,.95rem);      /* 14 -> 15 px */
  --t-petit:clamp(.9375rem,.9rem + .2vw,1rem);        /* 15 -> 16 px */
  --t-corps:clamp(1rem,.94rem + .28vw,1.125rem);      /* 16 -> 18 px */
  --t-chapo:clamp(1.125rem,1.04rem + .38vw,1.3125rem);/* 18 -> 21 px */
  --t-h3:clamp(1.25rem,1.16rem + .4vw,1.375rem);      /* 20 -> 22 px */
  --t-h2:clamp(1.5rem,1.24rem + 1.15vw,2rem);         /* 24 -> 32 px */
  --t-h1:clamp(2.125rem,1.6rem + 2.3vw,3rem);         /* 34 -> 48 px */

  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ---- palette sombre ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101318;            /* jamais de noir pur */
    --surface:#171b22;
    --surface-alt:#1e232c;
    --ink:#d6d9de;              /* blanc casse : le blanc pur brille */
    --ink-soft:#a6abb4;
    --ink-faint:#8a8f98;        /* 5,73:1 */
    --rule:#2c323d;
    --rule-strong:#3b4250;
    --accent:#7fa3d1;           /* marine eclairci : le marine du jour serait illisible */
    --accent-fort:#9dbbe2;
    --accent-soft:#1c2531;
    --or:#c9a662;
    --succes:#6faf7e;
    --erreur:#d97573;
    --focus:#9dbbe2;
    --on-accent:#101318;        /* sur le marine clair, le texte est sombre : 7,1:1 */
  }
}
:root[data-theme="dark"]{
  --paper:#101318;
  --surface:#171b22;
  --surface-alt:#1e232c;
  --ink:#d6d9de;
  --ink-soft:#a6abb4;
  --ink-faint:#8a8f98;
  --rule:#2c323d;
  --rule-strong:#3b4250;
  --accent:#7fa3d1;
  --accent-fort:#9dbbe2;
  --accent-soft:#1c2531;
  --or:#c9a662;
  --succes:#6faf7e;
  --erreur:#d97573;
  --focus:#9dbbe2;
  --on-accent:#101318;
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* Une adresse Legifrance collee dans un article, une reference du type
     LEGIARTI000045678901234567890, un nom de fichier sans espace : un seul mot
     trop long faisait deborder toute la page sur telephone. Il se coupe
     desormais plutot que de pousser la mise en page. */
  overflow-wrap:break-word;
}
/* dans le corps d'un texte, la cesure francaise evite les coupures brutales */
.article .corps p,.article .corps li,.page p,.page li{hyphens:auto}
/* les adresses et references affichees telles quelles se coupent n'importe ou */
code,.num,.livraison-repere code{overflow-wrap:anywhere}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.wrap{max-width:72rem;margin:0 auto;padding-left:28px;padding-right:28px}

/* ---------------- en-tête ---------------- */
/* L'en-tete suit le lecteur.

   Il defilait avec la page : arrive au bas d'une etude de six mille mots, il
   fallait tout remonter pour atteindre le menu, la recherche ou une autre
   rubrique. Sur telephone, ou le menu est la seule navigation, c'etait
   particulierement couteux.

   Seul l'en-tete se fixe, pas la barre des rubriques : les deux ensemble
   prennent 146 px sur ordinateur et 125 px sur telephone, soit un sixieme de
   l'ecran confisque en permanence sur un site fait pour lire. L'en-tete seul
   en prend 96 et 79, et il porte deja tout ce qu'on peut vouloir atteindre -
   le menu sur telephone, la navigation complete et la recherche sur
   ordinateur.

   Le fond doit etre opaque : sans lui, le texte defilerait en transparence
   sous l'en-tete. Le rang de superposition reste sous le panneau de
   navigation (41) et son voile (40), qui doivent passer par-dessus. */
.masthead{
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:30;background:var(--paper);
}
.masthead-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:22px 18px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.outils{display:flex;align-items:center;gap:14px;flex:none}
.recherche{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--rule);border-radius:2px;padding:5px 10px;background:var(--surface);
}
.recherche:focus-within{border-color:var(--ink-faint)}
.recherche .loupe{color:var(--ink-faint);flex:none}
.recherche input{
  border:none;background:none;outline:none;color:var(--ink);
  font-family:var(--sans);font-size:var(--t-micro);width:8rem;padding:2px 0;
}
.recherche input::placeholder{color:var(--ink-faint)}
.outils .menu-bouton{display:none}
.menu-libelle{display:none}
.wordmark{display:block;text-decoration:none;line-height:0}
/* Le logo est pose en fond plutot qu'en <img> : un navigateur ne telecharge
   pas l'image de fond d'un element non affiche, donc une seule des deux
   versions part sur le reseau, au lieu des deux. */
.wordmark .logo{
  display:block;height:clamp(38px,6vw,54px);aspect-ratio:735/130;width:auto;
  background:url(/assets/logo-clair.png) left center/contain no-repeat;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wordmark .logo{background-image:url(/assets/logo-sombre.png)}
}
:root[data-theme="dark"] .wordmark .logo{background-image:url(/assets/logo-sombre.png)}
/* repli typographique si les images manquent */
.wordmark .name{
  font-family:var(--titre);font-weight:600;font-size:clamp(1.7rem,4vw,2.35rem);
  letter-spacing:-.015em;line-height:1.05;
}
nav.primary{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
nav.primary a{
  white-space:nowrap;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
nav.primary a:hover{color:var(--ink)}
nav.primary a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
/* rubrique visible du seul redacteur, tant que la boutique n'est pas complete */
nav.primary a.en-preparation{color:var(--accent)}
nav.primary a.en-preparation .puce{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:6px;vertical-align:middle;
}
.icon-btn{
  background:none;border:1px solid var(--rule);border-radius:2px;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);
}
.icon-btn:hover{border-color:var(--rule-strong);color:var(--ink)}

/* barre des rubriques */
.rubriques-bar{
  border-bottom:1px solid var(--rule-strong);background:var(--surface);
  position:relative;
}
/* La barre des rubriques tient sur UNE ligne, a toutes les largeurs.

   Le compte affiche ne peut pas etre fixe : les libelles vont de "Fiscalite"
   a "Recouvrement de creances", et cinq d'entre eux passaient deja sur deux
   rangees des 768 px. On separe donc la barre en deux parties. La liste, a
   gauche, est bornee a une ligne et rognee. Le lien "Toutes (n)" est en
   dehors de cette zone : il n'est jamais coupe, donc aucune rubrique ne
   devient inaccessible, quel que soit ce qui deborde.

   Le script rb_ajuster() masque ensuite proprement les liens qui depassent,
   pour qu'ils ne restent pas atteignables au clavier alors qu'on ne les voit
   pas. Sans script, le rognage suffit deja : la barre reste sur une ligne. */
.rubriques-bar .wrap{
  display:flex;gap:0;align-items:stretch;flex-wrap:nowrap;padding-block:0;
}
.rb-liste{
  display:flex;gap:0;align-items:center;flex-wrap:nowrap;
  flex:0 1 auto;min-width:0;overflow:hidden;
}
.rubriques-bar a.toutes{flex:none;margin-left:auto;padding-left:20px}
@media (max-width:760px){
  /* Sur telephone, rogner ne suffit pas : il ne resterait qu'une rubrique ou
     deux. La liste defile au doigt, avec un fondu au bord droit pour dire
     qu'il en reste - sans lui, la barre de defilement etant masquee, on croit
     tout voir. "Toutes" reste fixe a droite, hors du defilement. */
  .rb-liste{
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent 100%);
  }
  .rubriques-bar a.toutes{padding-left:14px;box-shadow:-1px 0 0 var(--rule)}
}
.rb-liste::-webkit-scrollbar{display:none}
.rubriques-bar a.toutes{color:var(--accent);font-weight:600}
.rubriques-bar a{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
  padding:12px 16px;border-bottom:2px solid transparent;white-space:nowrap;
}
.rb-liste a:first-child{padding-left:0}
.rubriques-bar a:hover{color:var(--ink)}
.rubriques-bar a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* bandeau de rédaction */
.editorbar{border-bottom:1px solid var(--rule);background:var(--accent-soft)}
.editorbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-block:9px}
.editorbar .label{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
/* sur le fond rose pale de la barre, l'encre discrete tombait a 4,4:1 */
.editorbar .mode{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-soft);margin-right:auto}
.editorbar a{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;color:var(--accent);
  text-underline-offset:3px;
}

/* ---------------- ossature ---------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:56px;padding-block:38px 64px}
.layout--full{grid-template-columns:minmax(0,1fr)}

.fil-ariane{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
}
.fil-ariane a{color:var(--ink-faint);text-decoration:none}
.fil-ariane a:hover{color:var(--accent)}
.fil-ariane .actuel{color:var(--ink-soft)}

/* accroche */
.lede-block{padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
.lede-block .statement{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.32;letter-spacing:-.012em;
  margin:0 0 12px;color:var(--ink);text-wrap:balance;max-width:44rem;
}
/* Deux h1 differents, parce que ce ne sont pas deux memes choses. Sur
   l'accueil, le h1 est une PHRASE - "Notes de droit, ecrites a partir de
   dossiers reels" - et il doit rester en dessous du titre de l'article mis
   en une : il garde le sans, en 20 a 25 px. Sur les pages de liste, le h1
   est un NOM - "Rubriques", "Recherche", le nom d'une matiere - et c'est un
   titre au sens plein : Fraunces, a l'echelle des autres h1. */
.lede-block .titre-page{
  font-family:var(--titre);font-weight:600;
  font-size:var(--t-h1);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 12px;color:var(--ink);text-wrap:balance;max-width:24ch;
}
.lede-block p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink-soft);max-width:40rem}
.lede-block p + p{margin-top:10px}
/* le decompte de textes d'une rubrique : une indication, pas une phrase
   de la presentation. Au meme corps, les deux se lisaient d'un bloc. */
/* ---- date de reprise, dans la ligne de metadonnees d'un article ---- */
.article-meta .maj{color:var(--ink-soft)}

/* ---- partager, en fin d'article ----
   Discret : ce n'est pas un appel a l'action, c'est un service rendu a qui
   veut transmettre le texte. Pas de pastilles de couleur, pas de logos. */
.partage{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0 0 34px;padding-top:6px;
}
.partage-k{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.partage a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--rule-strong);
}
.partage a:hover,.partage a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- memo de redaction, sous la zone de saisie d'un article ----
   Il se consulte du coin de l'oeil pendant qu'on ecrit : deux colonnes,
   la syntaxe a gauche, son effet a droite. Repliable, parce qu'un auteur
   qui la connait par coeur n'a pas a la traverser a chaque article. */
.memo{margin-top:10px}
.memo > summary{
  cursor:pointer;font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  min-height:44px;display:flex;align-items:center;
}
.memo > summary::marker{color:var(--ink-faint)}
.memo-table{border-collapse:collapse;width:100%;margin:4px 0 14px}
.memo-table th{
  text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule-strong);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.memo-table td{padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.memo-table td:first-child{white-space:nowrap;width:1%}
.memo-table code{white-space:nowrap}
.memo-regle{
  margin:0 0 12px;padding:12px 14px;border-left:3px solid var(--accent);
  background:var(--fond-doux,rgba(31,58,95,.05));border-radius:0 4px 4px 0;
}
.memo-detail{margin:0}

/* une case a cocher posee sous un champ, avec son libelle sur la meme ligne :
   la zone cliquable couvre le texte, et le pas de 44 px est tenu par la
   hauteur reelle de la ligne plutot que par un calque, qui mordrait sur le
   champ voisin. */
.case-inline{
  display:flex;align-items:center;gap:10px;min-height:44px;margin-top:10px;
  font-size:var(--t-micro);color:var(--ink-soft);cursor:pointer;
}
.case-inline input{width:18px;height:18px;flex:none;accent-color:var(--accent);cursor:pointer}

.lede-block .compte{margin-top:14px;font-family:var(--sans);font-size:var(--t-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}

/* titre de section */
.section-title{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.section-title::after{content:"";flex:1;height:1px;background:var(--rule-strong)}

/* la une */
.une{padding-bottom:34px;margin-bottom:34px;border-bottom:2px solid var(--ink)}
.une .eyebrow{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.une h2{
  font-family:var(--titre);font-weight:600;
  font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 16px;text-wrap:balance;max-width:30ch;
}
.une h2 a{text-decoration:none}
.une h2 a:hover{color:var(--accent)}
.une .chapo{font-size:var(--t-chapo);line-height:1.6;color:var(--ink-soft);margin:0 0 18px;max-width:46ch}
.une .ligne-meta{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);
}
.une .lire{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.04em;
  color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;
}

/* grille des autres textes */
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
.carte{padding-top:22px;border-top:1px solid var(--rule)}
.carte .rang{
  /* un numero d'ordre illisible ne sert a rien : il passe a la couleur du
     texte secondaire, discret mais dechiffrable */
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--ink-faint);
  display:block;margin-bottom:4px;
}
.carte .eyebrow{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;
}
/* Le titre d'une carte, que le gabarit l'ait ecrit en h2 ou en h3 : le niveau
   suit la hierarchie de la page, pas le dessin. */
.carte h2,.carte h3,.resultat h2,.resultat h3,
.page .carte h2,.page .carte h3,.page .resultat h2,.page .resultat h3{
  font-family:var(--titre);font-weight:600;font-size:1.22rem;line-height:1.28;
  letter-spacing:normal;text-transform:none;color:var(--ink);
  margin:0 0 8px;padding-bottom:0;border-bottom:none;text-wrap:balance;
}
.carte h2 a,.carte h3 a,.resultat h2 a,.resultat h3 a{text-decoration:none;color:inherit}
.carte h2 a:hover,.carte h3 a:hover,.resultat h2 a:hover,.resultat h3 a:hover{color:var(--accent)}
.carte p{margin:0 0 10px;font-size:.97rem;line-height:1.58;color:var(--ink-soft)}
.carte .ligne-meta{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint)}
.flag{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--rule);border-radius:2px;padding:2px 7px;display:inline-block;
}
.flag.draft{color:var(--accent);border-color:var(--accent)}
.flag.docs{border-style:dashed}
.empty{padding-block:50px;color:var(--ink-faint);font-style:italic}

.pagination{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:42px;padding-top:20px;border-top:2px solid var(--ink);
  font-family:var(--sans);font-size:var(--t-micro);
}
.pagination a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.pagination .compteur{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint)}

.grille-rubriques{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2px;background:var(--rule)}
.tuile-rubrique{
  display:flex;flex-direction:column;gap:5px;padding:20px 22px;
  background:var(--paper);text-decoration:none;border-top:2px solid transparent;
}
.tuile-rubrique:hover{background:var(--surface);border-top-color:var(--accent)}
.tuile-rubrique .nb{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--accent);letter-spacing:.06em;
}
.tuile-rubrique .nom{
  font-family:var(--titre);font-weight:600;font-size:1.18rem;line-height:1.25;color:var(--ink);
}
.tuile-rubrique .dernier{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);line-height:1.45}

/* ---------------- colonne latérale ---------------- */
.aside{display:flex;flex-direction:column;gap:32px;min-width:0}
.encart{border-top:2px solid var(--ink);padding-top:14px}
.encart h2{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;
}
.encart p{margin:0 0 12px;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.encart .lien{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;
}
.bio{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.bio img{width:70px;height:70px;object-fit:cover;border:1px solid var(--rule-strong);border-radius:2px;flex:none}
.bio .nom{font-family:var(--titre);font-weight:600;font-size:1.02rem;line-height:1.3}
.bio .qualite{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);line-height:1.45;margin-top:4px}
.liste-rubriques{list-style:none;margin:0;padding:0}
.liste-rubriques li{border-bottom:1px solid var(--rule)}
.liste-rubriques a{
  display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px;
  padding:8px 0;text-decoration:none;font-size:.95rem;color:var(--ink-soft);
}
.liste-rubriques a:hover{color:var(--accent)}
.liste-rubriques .nb{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint)}
.liste-rubriques a[aria-current="page"]{color:var(--accent);font-weight:500}
.parutions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.parutions li{font-size:.92rem;line-height:1.45}
.parutions .d{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);display:block;margin-bottom:2px}
.parutions a{color:var(--ink-soft);text-decoration:none}
.parutions a:hover{color:var(--accent)}

/* ---------------- article ---------------- */
/* La largeur du texte se mesure en signes, pas en pixels : c'est la longueur
   de ligne qui fatigue l'oeil, et elle depend de la police et du corps. A
   44 rem, le corps d'article atteignait 88 signes par ligne, au-dela de ce
   qui se lit sans effort sur un texte long. L'unite ch cale la colonne sur la
   typographie elle-meme : elle suit si la taille du texte change. */
.article{max-width:min(44rem,66ch);margin:0 auto}
.backlink{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;
  display:inline-block;margin-bottom:26px;
}
.backlink:hover{color:var(--accent)}
.article .eyebrow{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.article h1{
  font-family:var(--titre);font-weight:600;font-size:var(--t-h1);
  line-height:1.14;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;
}
.article .chapo{
  font-size:var(--t-chapo);line-height:1.58;color:var(--ink-soft);margin:0 0 22px;
  padding-left:18px;border-left:2px solid var(--accent);
}
.article-meta{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);
  padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:30px;
  display:flex;gap:14px;flex-wrap:wrap;
}
/* 68ch donnait 84 signes reels : l'unite ch vaut la largeur du zero, plus
   large que la moyenne des lettres d'un texte francais. Mesure faite sur le
   rendu, 55ch pose environ 68 signes par ligne, ce qui se lit sans que l'oeil
   ait a chercher le debut de la ligne suivante. */
/* Le corps : 16 px sur telephone, 18 px sur grand ecran, interligne 1,7.
   La colonne est mesuree en signes, pas en pixels. */
/* La longueur de ligne visee est de 60 a 75 signes. L'unite ch ne la donne
   pas : elle vaut la largeur du zero, et dans Inter le zero est a chasse
   fixe, donc plus large que la lettre moyenne. Regle a 64ch, la colonne
   rendait 78 signes par ligne - mesures sur la page, pas estimees. On cale
   donc sur la largeur reelle mesuree : 0,502 em par signe, soit 34 em pour
   73 signes, un cran en deca de la borne haute pour qu une variante de la
   police ne la fasse pas sauter. L'unite em suit la taille du texte, donc la colonne se
   reajuste si le lecteur grossit la police. */
/* La colonne de lecture est portee par les blocs de texte, non par leur
   conteneur : un tableau doit pouvoir s'etendre au-dela, et il se centre alors
   sur la colonne de l'article, pas sur celle du texte suivi. */
.article-body{font-size:var(--t-corps);line-height:1.7}
.article-body>p,.article-body>ul,.article-body>ol,.article-body>blockquote,
.article-body>h2,.article-body>h3,.article-body>.footnotes{max-width:34em}
.article-body>:first-child{margin-top:0}
.article-body>p:first-of-type::first-letter{
  float:left;font-family:var(--sans);font-weight:600;color:var(--accent);
  font-size:3.3em;line-height:.84;padding:.04em .09em 0 0;
}
.article-body p{margin:0 0 1.15em}
.article-body h2{font-family:var(--titre);font-weight:600;font-size:var(--t-h2);line-height:1.3;margin:2em 0 .6em;letter-spacing:-.008em}
/* Les intertitres de ce carnet sont des questions entieres, souvent longues.
   En capitales espacees, "Faut-il avoir saisi la commission de recours
   amiable ?" devient une bande grise illisible : la casse normale reste donc
   la regle, et la hierarchie se fait par la taille et la famille. */
.article-body h3{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(1.0625rem,1.01rem + .26vw,1.1875rem);
  line-height:1.4;color:var(--ink);margin:2.1em 0 .55em;
}
.article-body blockquote{margin:1.6em 0;padding-left:18px;border-left:2px solid var(--rule-strong);color:var(--ink-soft);font-style:italic}
.article-body ol,.article-body ul{margin:0 0 1.15em;padding-left:1.35em}
.article-body li{margin-bottom:.4em}
.article-body a{color:var(--accent);text-underline-offset:2px}
.article-body code{font-family:var(--mono);font-size:.9em;background:var(--accent-soft);padding:1px 4px;border-radius:2px}
/* Appel de note : 13 px de haut, c'est un timbre-poste au doigt. Le
   rembourrage d'un element en ligne agrandit la surface cliquable SANS
   changer la hauteur de ligne, donc la mise en page ne bouge pas et la cible
   passe le seuil de 24 px. On ne va pas jusqu'a 44 : le calque mordrait sur
   les lignes voisines et volerait leurs liens. */
.article-body sup a{
  font-family:var(--mono);font-size:.7em;color:var(--accent);
  text-decoration:none;padding:7px 5px;
}
/* ---- tableaux d'article ----------------------------------------------
   Un tableau de jurisprudence est large par nature. Sur les ecrans
   intermediaires il defile horizontalement ; un conteneur qui defile doit
   pouvoir recevoir le clavier, sinon son contenu est hors d'atteinte sans
   souris, d'ou role="region" et tabindex sur le conteneur.
   Sur telephone, le defilement lateral d'un tableau de prose est
   impraticable : chaque ligne devient alors une fiche, et l'intitule de
   colonne, repris en tete de cellule, remplace l'entete sorti de l'ecran. */
.tableau{margin:1.9em 0;overflow-x:auto}
.tableau:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* La colonne de lecture fait 34 em : un tableau de jurisprudence a quatre
   colonnes y devient une pile de mots coupes. A partir du grand format, il
   deborde donc symetriquement de la colonne, sans jamais sortir de la page :
   la demi-largeur est bornee par la demi-fenetre, moins la gouttiere et la
   place d'une barre de defilement. */
@media (min-width:900px){
  .tableau{
    width:max(100%,min(56rem,calc(100vw - 128px)));
    margin-inline:calc(50% - max(50%,min(28rem,calc(50vw - 64px))));
  }
}
.article-body table{border-collapse:collapse;width:100%;font-size:var(--t-petit);line-height:1.55}
.article-body th,.article-body td{padding:10px 14px;text-align:left;vertical-align:top}
.article-body thead th{
  font-family:var(--sans);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.03em;color:var(--on-accent);background:var(--accent);
  white-space:nowrap;
}
.article-body tbody td{border-bottom:1px solid var(--rule)}
.article-body tbody tr:last-child td{border-bottom:1px solid var(--rule-strong)}
.article-body tbody tr:nth-child(even) td{background:var(--surface)}

@media (max-width:640px){
  .tableau{overflow-x:visible}
  .article-body table,.article-body tbody,.article-body tr,.article-body td{display:block;width:100%}
  .article-body thead{display:none}
  .article-body tbody tr,.article-body tbody tr:nth-child(even) td{background:var(--surface)}
  .article-body tbody tr{
    border:1px solid var(--rule);border-left:3px solid var(--accent);
    margin:0 0 14px;padding:4px 0;
  }
  .article-body tbody td{border-bottom:none;padding:8px 14px}
  .article-body tbody td:empty{display:none}
  .article-body tbody td::before{
    content:attr(data-libelle);display:block;
    font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
    margin-bottom:3px;
  }
  .article-body tbody td:not([data-libelle])::before{display:none}
}

/* ---- illustrations ---------------------------------------------------
   L'image porte ses dimensions dans la page : le navigateur reserve la
   place avant de l'avoir chargee, et le texte ne saute pas sous le doigt du
   lecteur. La hauteur automatique conserve le rapport quand la largeur est
   contrainte. Comme un tableau, une figure deborde de la colonne de lecture
   sur grand ecran : un schema ramene a 34 em devient illisible. */
.figure{margin:2.1em 0;text-align:center}
.figure img{max-width:100%;height:auto;display:block;margin:0 auto}
/* Un schema vectoriel sur fond transparent disparait a moitie sur le papier
   creme : on lui pose un fond et un filet, comme a un encadre. */
.figure img[src$=".svg"],.figure img[src*=".svg?"]{
  background:var(--surface);border:1px solid var(--rule);padding:12px;
}
.figure figcaption{
  font-family:var(--sans);font-size:var(--t-petit);line-height:1.5;
  color:var(--ink-faint);margin-top:10px;text-align:left;
  border-top:1px solid var(--rule);padding-top:8px;
}
@media (min-width:900px){
  .figure{
    width:max(100%,min(56rem,calc(100vw - 128px)));
    margin-inline:calc(50% - max(50%,min(28rem,calc(50vw - 64px))));
  }
  /* La legende reste alignee sur la colonne de texte quand la figure en
     sort : une ligne de legende large de 56 em se lirait mal. */
  .figure figcaption{max-width:34em;margin-left:auto;margin-right:auto}
}

.endmark{margin-top:2px;text-align:right}
.endmark span{display:inline-block;width:9px;height:9px;background:var(--accent)}
.footnotes{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule)}
.footnotes h2{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.footnotes ol{margin:0;padding-left:1.4em;font-size:.93rem;color:var(--ink-soft);line-height:1.6}
.footnotes li{margin-bottom:.5em}
.footnotes a{color:var(--accent)}
.source-card{
  margin-top:38px;border:1px solid var(--rule-strong);border-left:3px solid var(--accent);
  padding:20px 22px;background:var(--surface);
}
.source-card .k{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.source-card a{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--accent);text-underline-offset:3px}

/* ---------------- boutique de modèles ---------------- */
.grille-modeles{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:26px 30px;margin-top:28px}
/* la carte est une colonne : le prix est pousse en bas, donc aligne d'une
   carte a l'autre quel que soit le nombre de lignes du resume */
.carte-modele{
  display:flex;flex-direction:column;
  border:1px solid var(--rule);padding:20px 20px 18px;background:var(--surface);
}
.carte-modele h3{margin-top:0}
.carte-modele .ligne-meta{margin-top:auto;padding-top:12px}
.carte-modele .prix{
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--accent);
  letter-spacing:0;text-transform:none;margin-right:4px;
}

/* repère de parcours */
.etapes{
  display:flex;list-style:none;margin:0 0 26px;padding:0;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.etape{
  display:flex;align-items:center;gap:9px;padding:11px 18px 11px 0;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
}
.etape+.etape{padding-left:18px;border-left:1px solid var(--rule)}
.etape .n{
  flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule-strong);font-size:var(--t-micro);font-weight:600;
}
.etape.active{color:var(--ink)}
.etape.active .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.etape.faite{color:var(--ink-soft)}
.etape.faite .n{border-color:var(--accent);color:var(--accent)}
@media (max-width:560px){
  .etapes{border:none;gap:2px}
  .etape{padding:6px 10px 6px 0;font-size:var(--t-micro)}
  .etape+.etape{padding-left:10px;border-left:none}
  .etape .l{display:none}
  .etape.active .l{display:inline}
}

.achat-message{
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.55;margin:0 0 16px;
  padding:11px 14px;border:1px solid var(--rule-strong);background:var(--paper);
  color:var(--ink-soft);border-radius:2px;
}
.achat-message.erreur{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.livraison-nom{
  font-family:var(--sans);font-size:1.05rem;color:var(--ink);margin:14px 0 0!important;
}
.livraison-repere{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.livraison-repere p{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin:0 0 12px;line-height:1.6}
.livraison-repere p:last-child{margin-bottom:0}
.livraison-repere strong{color:var(--ink)}
.livraison-repere a{color:var(--accent)}
.livraison-repere code{font-family:var(--mono);font-size:var(--t-micro);word-break:break-all;color:var(--ink-soft)}

.avert{
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.6;color:var(--ink-faint);
  border-left:2px solid var(--rule-strong);padding:10px 0 10px 14px;margin:22px 0;
}
.avert-fort{color:var(--accent);border-left-color:var(--accent)}

.modele-corps{margin-top:24px}
.modele-contenu{margin-top:30px}
.modele-contenu ul{list-style:none;margin:0;padding:0}
.modele-contenu li{
  padding:9px 0 9px 20px;border-bottom:1px solid var(--rule);position:relative;
  font-size:1rem;
}
.modele-contenu li::before{
  content:"•";position:absolute;left:0;color:var(--accent);
}

.achat{
  margin-top:34px;border:1px solid var(--rule-strong);border-top:3px solid var(--accent);
  background:var(--surface);padding:24px 24px 20px;
}
.achat-prix{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.achat-prix .montant{font-family:var(--titre);font-size:1.9rem;font-weight:600;letter-spacing:-.02em}
.achat-prix .detail{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint)}
.achat-fiche{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.achat-fiche span{border:1px solid var(--rule);border-radius:2px;padding:2px 8px}
.renonce{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.55;color:var(--ink-soft);
  border:1px solid var(--rule-strong);padding:13px 15px;margin-bottom:16px;background:var(--paper);
}
.renonce input{margin-top:1px;flex:none;accent-color:var(--accent);width:24px;height:24px}
.renonce:hover{border-color:var(--accent)}
/* le selecteur est double : dans une page de contenu, `.page a` porte la
   couleur d'accent et l'emporterait sur une classe seule, ce qui rendait le
   libelle du bouton invisible sur son propre fond. */
.btn-achat,
.page a.btn-achat,
a.btn-achat:visited{
  display:inline-block;font-family:var(--sans);font-size:.92rem;font-weight:600;
  letter-spacing:.02em;color:var(--on-accent);background:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:13px 26px;
  cursor:pointer;text-decoration:none;
}
.btn-achat:hover{filter:brightness(1.12)}
.achat-note{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin:14px 0 0;line-height:1.55}
.achat-note a{color:var(--accent)}

.livraison{
  margin-top:24px;border:1px solid var(--rule-strong);background:var(--surface);padding:24px;
}
.livraison p{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin:16px 0 0}
.livraison code{font-family:var(--mono);font-size:var(--t-micro);word-break:break-all;color:var(--ink-soft)}

/* documents joints */
.documents{margin-top:40px}
.documents ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.documents li{border-bottom:1px solid var(--rule)}
.documents a{
  display:flex;align-items:baseline;gap:14px;
  padding:13px 4px;text-decoration:none;color:inherit;
}
.documents a:hover{background:var(--surface)}
.documents .type{
  flex:none;min-width:5.6rem;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
}
.documents .texte{flex:1;min-width:0}
.documents .nom{
  display:block;font-family:var(--titre);font-size:1.02rem;line-height:1.4;
  border-bottom:1px solid transparent;
}
.documents a:hover .nom{border-bottom-color:var(--accent)}
.documents .note{
  display:block;font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
  margin-top:3px;line-height:1.5;
}
.documents .poids{
  flex:none;font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);
  white-space:nowrap;
}
@media (max-width:560px){
  .documents a{flex-wrap:wrap;gap:6px 12px}
  .documents .type{min-width:0;order:1}
  .documents .poids{order:2;margin-left:auto}
  .documents .texte{order:3;flex-basis:100%}
}

/* bloc auteur en fin d'article */
.signature{
  margin-top:44px;padding-top:22px;border-top:2px solid var(--ink);
  display:flex;gap:20px;align-items:flex-start;
}
.signature img{width:76px;height:76px;object-fit:cover;border:1px solid var(--rule-strong);border-radius:2px;flex:none}
.signature .nom{font-family:var(--titre);font-weight:600;font-size:1.1rem}
.signature p{margin:6px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.signature .lien{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}

.citer{margin-top:40px}
.citer .ref{
  font-family:var(--mono);font-size:var(--t-micro);line-height:1.7;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule-strong);
  padding:14px 16px;margin:0 0 10px;word-break:break-word;
}
.citer .brut{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin:0}
.citer .brut a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}

/* articles liés */
.lies{margin-top:44px}
.lies .grille{gap:24px 30px}

/* ---------------- pages fixes ---------------- */
.page{max-width:min(44rem,62ch);margin:0 auto}
.page h1{font-family:var(--titre);font-weight:600;font-size:var(--t-h1);line-height:1.18;letter-spacing:-.018em;margin:0 0 22px}
.page p{margin:0 0 1.15em;color:var(--ink-soft);line-height:1.75}
.page p strong{color:var(--ink);font-weight:600}
.page a{color:var(--accent)}
/* Les intertitres d'une page statique : CGV, mentions, accessibilite.

   Les cartes de modeles vivent dans .page sur la boutique et heritaient de ce
   style : le nom du produit s'affichait en 14 px capitales souligne, plus
   discret que sa propre description. La premiere correction les excluait par
   :not(.carte h2) - un selecteur complexe dans :not(), qui n'existe qu'a
   partir de Safari 16.4. Sur un iPhone reste en iOS 15, toute la regle etait
   ignoree et les intertitres des CGV perdaient leur mise en forme. On passe
   donc par la specificite : la regle des titres de carte plus bas porte aussi
   ses variantes prefixees .page, qui l'emportent ici. */
.page h2{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin:2.2em 0 .7em;
  padding-bottom:7px;border-bottom:1px solid var(--rule);
}
.page h3{font-family:var(--titre);font-weight:600;font-size:var(--t-h3);margin:1.6em 0 .4em}
.page ul{margin:0 0 1.15em;padding-left:1.35em;color:var(--ink-soft);line-height:1.7}
.page li{margin-bottom:.35em}
.about-head{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;margin-bottom:30px;padding-bottom:26px;border-bottom:2px solid var(--ink)}
.about-head img{width:150px;height:150px;object-fit:cover;border:1px solid var(--rule-strong);border-radius:2px;display:block}
.about-head h1{margin:0 0 10px}
.about-head .byline{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.deflist{margin:32px 0 0;border-top:1px solid var(--rule)}
.deflist div{display:grid;grid-template-columns:9rem 1fr;gap:18px;padding-block:13px;border-bottom:1px solid var(--rule)}
.deflist dt{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.deflist dd{margin:0;font-size:.98rem}
/* Apres la liste des contacts, la mention legale a besoin d'air : la bordure
   du dernier rang la touchait presque. */
.deflist + .notice{margin-top:36px}
.notice{margin-top:30px;font-size:.9rem;color:var(--ink-faint);line-height:1.6;border-left:2px solid var(--rule-strong);padding-left:16px}

/* ---------------- pied de page ---------------- */
footer{border-top:2px solid var(--ink);background:var(--surface-alt)}
/* Trois colonnes : un paragraphe a gauche, deux listes de meme largeur a
   droite. Les deux listes ont le meme nombre de lignes, ce qui evite la
   silhouette en escalier d'une colonne courte a cote d'une longue. */
footer .wrap{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px 40px;
  padding-block:38px 30px;align-items:start;
}
footer h2{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--rule-strong);
}
footer p{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:var(--ink-soft);max-width:32rem}
/* Chaque lien fait 44 px de haut, la regle de cible tactile : l'ecart entre
   les lignes est donc nul, sinon la liste s'etirerait sur deux fois sa
   hauteur utile pour rien. Le pas de 44 px suffit a les separer. */
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0}
footer a{color:var(--ink-soft);text-decoration:none;font-size:.92rem}
footer li a{display:flex;align-items:center;min-height:44px;line-height:1.3}
footer a:hover{color:var(--accent)}
/* Le lien vers le reste des rubriques se detache du reste de la liste : il ne
   mene pas a une rubrique, il mene ailleurs. */
.pied-rubriques li.pleine-largeur a{
  color:var(--accent);font-weight:500;
  margin-top:6px;border-top:1px solid var(--rule);
}

/* Sur telephone, les deux listes se mettent cote a cote plutot que l'une sous
   l'autre : sans cela le pied faisait 1 180 px de haut, soit une page et
   demie d'ecran a faire defiler pour atteindre la mention legale. */
@media (max-width:760px){
  footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
  footer .wrap>div:first-child{grid-column:1 / -1}
  footer a{font-size:.9rem}
}
@media (max-width:359px){
  footer .wrap{grid-template-columns:minmax(0,1fr)}
  footer .wrap>div:first-child{grid-column:auto}
}
footer .identite{display:flex;gap:14px;align-items:center;margin-bottom:16px}
footer .identite img{
  width:56px;height:56px;flex:none;object-fit:cover;border-radius:50%;
  border:1px solid var(--rule-strong);
}
footer .identite .role{
  font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.04em;
  color:var(--ink-faint);margin-top:2px;
}
footer .identite .nom{font-family:var(--titre);font-weight:600;font-size:1.08rem;color:var(--ink)}
.sous-pied{border-top:1px solid var(--rule-strong)}
.sous-pied .wrap{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:14px 22px;font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
}
.sous-pied a{font-size:var(--t-micro);color:var(--ink-faint)}
.sous-pied a:hover{color:var(--accent)}
.sous-pied .wrap>span:first-child{margin-right:auto;max-width:34rem}
/* ligne du vendeur, presente seulement quand la boutique est ouverte */
.sous-pied.vendeur{border-top:1px solid var(--rule)}
.sous-pied.vendeur .wrap{padding-block:12px 20px;font-size:var(--t-micro)}
.sous-pied.vendeur a{font-size:var(--t-micro);color:var(--accent)}

/* ---------------- menu sur téléphone ---------------- */
.menu-fond{
  position:fixed;inset:0;background:rgba(10,12,15,.45);z-index:40;
  animation:fondu .15s ease-out;
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.menu-mobile{
  position:fixed;top:0;right:0;bottom:0;width:min(88vw,21rem);z-index:41;
  background:var(--paper);border-left:2px solid var(--ink);
  padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;display:flex;flex-direction:column;gap:26px;
  /* l'animation d'entree est declaree avec celles de sortie, plus bas */
}
.menu-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:2px solid var(--ink);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.recherche-mobile{padding:0;border:none;background:none;display:flex;gap:8px}
.recherche-mobile input{
  flex:1 1 auto;width:auto;min-width:0;   /* sans min-width:0 le champ refuse de retrecir */
  border:1px solid var(--rule-strong);border-radius:2px;
  padding:9px 11px;background:var(--surface);font-size:.92rem;
}
.btn-chercher{
  flex:none;white-space:nowrap;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:500;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);
  border-radius:2px;padding:0 14px;
}
.menu-groupe{display:flex;flex-direction:column}
.menu-theme{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:1px solid var(--rule-strong);border-radius:2px;
  padding:12px 14px;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:.92rem;color:var(--ink-soft);
}
.menu-theme:hover{border-color:var(--accent);color:var(--accent)}
.menu-theme svg{flex:none}

.menu-groupe h2{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px;
}
.menu-groupe a{
  font-family:var(--sans);font-size:1.05rem;color:var(--ink);text-decoration:none;
  padding:10px 0;border-bottom:1px solid var(--rule);
}
.menu-groupe a:last-child{border-bottom:none}
.menu-groupe a[aria-current="page"]{color:var(--accent);font-weight:600}

/* ---------------- adaptation ---------------- */
/* Entre le telephone et le grand ecran, il y a l'iPad en paysage et les
   petits portables. A 1024 px le menu principal passait sur deux lignes :
   on resserre plutot que de tout replier dans le bouton, qui couterait la
   recherche et la navigation visible. */
@media (max-width:1200px){
  /* la barre des rubriques se resserre aussi, pour tenir sur une ligne */
  .rubriques-bar a{padding:11px 12px;letter-spacing:.07em}
  nav.primary{gap:15px;flex-wrap:nowrap}
  nav.primary a{font-size:var(--t-micro);letter-spacing:.06em}
  .recherche input{width:6.5rem}
  .masthead-inner{gap:14px}
  .wordmark .logo{height:clamp(34px,5vw,44px)}
}
@media (max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .aside{flex-direction:row;flex-wrap:wrap;gap:34px}
  .aside .encart{flex:1 1 15rem}
}
@media (max-width:900px){
  /* l'en-tete est plus bas sur telephone : 79 px mesures */
  :root{--sous-entete:94px}

  .masthead-inner nav.primary{display:none}
  .outils .recherche{display:none}
  /* Sur telephone, un seul bouton dans l'en-tete, et il dit ce qu'il est.
     Deux pastilles identiques cote a cote, l'une pour le theme et l'autre
     pour la navigation, ne se distinguaient pas d'un coup d'oeil : le
     reglage clair/sombre est descendu dans le panneau. */
  .outils #btn-theme{display:none}
  .outils .menu-bouton{
    display:flex;align-items:center;gap:8px;width:auto;height:auto;
    padding:8px 14px;border-color:var(--rule-strong);color:var(--ink);
    font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
  }
  .menu-libelle{display:inline}
}
@media (max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  .rubriques-bar .wrap{padding-right:0}
  .rubriques-bar a{padding:11px 14px}
  .grille-rubriques{grid-template-columns:minmax(0,1fr)}
  .grille{grid-template-columns:minmax(0,1fr);gap:0}
  .carte{padding-block:20px}
  .masthead-inner{padding-block:20px 16px}
  .about-head{grid-template-columns:1fr;gap:18px}
  .about-head img{width:120px;height:120px}
  .deflist div{grid-template-columns:1fr;gap:4px}
  .aside{flex-direction:column}
  body{font-size:16px}
}
/* Tres petits ecrans (iPhone SE et equivalents) : sans cela, le logo, le
   bouton de theme et le bouton de menu depassent la largeur de l'ecran et
   la page se met a defiler lateralement. */
@media (max-width:400px){
  .masthead-inner{gap:12px}
  .wordmark .logo{height:34px}
  .outils{gap:7px}
  .outils .menu-bouton{padding:8px 11px;gap:6px;font-size:var(--t-micro)}
  .rubriques-bar a{padding:10px 12px;font-size:var(--t-micro)}
}

/* Cibles tactiles : un lien isole doit faire au moins 24 px de haut pour
   etre touche sans viser. Les liens inclus dans un paragraphe echappent a la
   regle, on ne peut pas ecarter les mots d'une phrase. */
.fil-ariane a,.backlink,a.lien{padding-block:4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Regroupement de la boutique quand elle se remplit */
/* Le raccourci vers chaque rubrique de la boutique. Il n'apparait qu'a partir
   d'un certain nombre de modeles, ce qui l'avait fait passer entre les mailles
   du controle des cibles tactiles : ses liens faisaient 23 px. Ici on ne pose
   pas de calque, on donne aux liens leur hauteur reelle - sur une ligne qui
   passe a la ligne, deux calques de rangees voisines se recouvriraient. */
.sommaire-boutique{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;
  margin:26px 0 8px;padding-bottom:12px;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--t-micro);
}
.sommaire-boutique span{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.sommaire-boutique a{color:var(--ink-soft);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.sommaire-boutique a:hover{color:var(--accent)}
.lot-modeles{margin-top:30px;scroll-margin-top:20px}
.lot-modeles .grille-modeles{margin-top:16px}
.lies-modeles{margin-top:44px}
.lies-modeles .grille-modeles{margin-top:16px}

/* Fiche produit : ce qui repond aux objections avant le bouton */
.modele-maj{
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
  margin:-8px 0 14px;
}
/* Le prix, annonce des le haut de la fiche : sans lui, il faut derouler
   toute la description pour savoir combien ca coute. */
.modele-prix-haut{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-soft);
  margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--rule);
}
.modele-prix-haut .montant{
  font-family:var(--titre);font-size:1.3rem;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;
}
.modele-prix-haut .sep{color:var(--ink-faint)}
.modele-prix-haut .vers-achat{
  /* action, pas lien de lecture : meme hauteur de cible que les boutons */
  display:inline-flex;align-items:center;min-height:34px;
  margin-left:auto;font-weight:600;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;
}
.modele-prix-haut .vers-achat:hover{color:var(--ink)}
@media (max-width:480px){
  .modele-prix-haut .vers-achat{margin-left:0}
}
.garanties{
  list-style:none;margin:16px 0 0;padding:0;
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.55;color:var(--ink-soft);
}
.garanties li{position:relative;padding-left:20px;margin-bottom:7px}
.garanties li:last-child{margin-bottom:0}
.garanties li::before{
  content:"";position:absolute;left:3px;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.page.modele .signature{margin-top:38px}
/* l'encart qui mene a la boutique depuis toutes les pages de lecture */
.encart-boutique{border-left:2px solid var(--accent);padding-left:14px}

/* ---------------------------------------------------------------- panier --
   Le panier n'apparait que lorsqu'il sert : un repere dans l'en-tete quand il
   contient quelque chose, un bouton d'ajout sur chaque carte et en haut de
   chaque fiche, et une page de recapitulation avant le paiement. */

.panier-btn{position:relative;text-decoration:none}
.panier-n{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;line-height:1;
  color:var(--on-accent);background:var(--accent);border-radius:9px;
}

/* bouton d'ajout, partout le meme */
.form-panier{margin:0}
.btn-panier{
  display:inline-flex;align-items:center;min-height:34px;font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  padding:8px 14px;border-radius:6px;cursor:pointer;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  text-decoration:none;line-height:1.2;
}
.btn-panier:hover{filter:brightness(1.08)}
.btn-panier.au-panier{
  color:var(--accent);background:transparent;
}
.carte-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);
}
.carte-actions .lien-fiche{
  /* action secondaire de la carte : au doigt, 24 px de haut c'est le minimum
     de la regle et donc trop juste. On monte la zone sans changer le dessin. */
  display:inline-flex;align-items:center;min-height:34px;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
}
.carte-actions .lien-fiche:hover{color:var(--ink)}

.modele-prix-haut .pph-texte{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modele-prix-haut .pph-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
@media (max-width:560px){
  .modele-prix-haut .pph-actions{margin-left:0;width:100%}
}

/* la page du panier */
.panier-lignes{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--rule)}
.panier-lignes li{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.pl-titre{flex:1;min-width:12rem}
.pl-titre a{color:var(--ink);text-decoration:none;font-weight:600}
.pl-titre a:hover{color:var(--accent)}
.pl-detail{
  display:block;font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin-top:3px;
}
.pl-prix{font-family:var(--titre);font-size:1.05rem;font-weight:600;color:var(--ink)}
.pl-retrait{margin:0}
.pl-retrait button{
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
  background:none;border:0;border-bottom:1px solid var(--rule-strong);
  padding:0 0 1px;cursor:pointer;
}
.pl-retrait button:hover{color:var(--accent);border-color:currentColor}

.panier-total{margin:0 0 26px;max-width:22rem;margin-left:auto}
.pt-ligne{
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);padding:5px 0;
}
.pt-fort{
  font-family:var(--titre);font-size:1.2rem;font-weight:600;color:var(--ink);
  border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;
}
.pt-mention{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);margin:8px 0 0;text-align:right}

.panier-pied{
  /* 14 px entre les rangees : les deux commandes font 25 px de haut et leur
     calque 44 ; en dessous, si elles passent a la ligne, elles se recouvrent. */
  display:flex;justify-content:space-between;align-items:center;gap:19px 16px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--t-micro);
}
.panier-pied a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:1px}
.panier-pied a:hover{color:var(--ink)}
.panier-pied form{margin:0}
.panier-pied button{
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
  background:none;border:0;border-bottom:1px solid var(--rule-strong);padding:0 0 1px;cursor:pointer;
}
.panier-pied button:hover{color:var(--accent);border-color:currentColor}

/* plusieurs fichiers a telecharger apres paiement */
.livraison-liste{list-style:none;margin:0 0 18px;padding:0}
.livraison-liste li{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--rule);
}
.livraison-liste .btn-achat{margin:0;flex:0 0 auto}
.ll-titre{font-family:var(--titre);font-size:1rem;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.avis-panier{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink);
  background:var(--accent-soft);border-left:3px solid var(--accent);
  margin:0 0 24px;padding:12px 16px;border-radius:0 4px 4px 0;
}
.avis-panier a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.ll-detail{font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);line-height:1.45}
.btn-achat.epuise{
  background:var(--surface-alt);color:var(--ink-faint);border-color:var(--rule-strong);
  cursor:default;
}

/* ---- l'entree de la boutique dans le menu ----
   Elle ne doit pas se lire comme une rubrique de plus. Un cadre discret a
   l'accent du site, une fleche de telechargement, et le meme comportement
   que les autres liens pour le reste : rien ne clignote, rien ne crie. */
nav.primary a.lien-boutique{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent);font-weight:600;
  border:1px solid var(--accent);border-radius:3px;
  padding:6px 12px;margin-left:4px;
}
nav.primary a.lien-boutique .ico{flex:none}
nav.primary a.lien-boutique:hover{
  color:var(--on-accent);background:var(--accent);
}
nav.primary a.lien-boutique[aria-current="page"]{
  color:var(--on-accent);background:var(--accent);border-color:var(--accent);
}
@media (max-width:1200px){
  nav.primary a.lien-boutique{padding:5px 10px;gap:6px}
}
/* la meme entree dans le panneau du telephone : distincte, et suivie d'une
   ligne qui dit ce qu'on y trouve, puisqu'il y a la place */
.menu-mobile a.menu-boutique{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:var(--accent);font-weight:600;
}
.menu-mobile a.menu-boutique .menu-boutique-note{
  flex:1 0 100%;font-family:var(--sans);font-size:var(--t-micro);font-weight:400;
  color:var(--ink-faint);letter-spacing:0;text-transform:none;margin-top:2px;
}

/* ---- lien d'evitement ----
   Invisible a la souris, il apparait des la premiere tabulation et evite de
   traverser tout le menu pour atteindre le texte. */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  padding:12px 20px;text-decoration:none;border-radius:0 0 3px 0;
}
.evitement:focus{left:0}
main:focus{outline:none}

/* ---- impression ----
   Un texte de droit finit souvent imprime ou verse a un dossier. Tout ce qui
   sert a naviguer disparait, l'adresse de la page s'inscrit en pied, et les
   liens du corps montrent ou ils menent, puisque le papier ne clique pas. */
@media print{
  .masthead,.rubriques-bar,.menu-mobile,.menu-fond,.editorbar,
  .evitement,footer,.aside,.recherche,.etapes,.backlink,
  .lies,.lies-modeles,.citer,.encart-boutique,.achat,.avis-panier,
  .partage{display:none!important}
  .layout{display:block;padding:0}
  body{background:#fff;color:#000;font-size:11.5pt;line-height:1.5}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  /* l'adresse d'un lien exterieur, entre parentheses, apres son intitule */
  .article a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  p,blockquote,li,tr{page-break-inside:avoid;break-inside:avoid}
  blockquote{border-left:2px solid #999}
  .notes,.notes li{font-size:10pt}
  /* Le tableau reprend la pleine largeur de la page et n'a plus besoin de
     defiler ; son entete se repete si la suite passe au feuillet suivant. */
  .tableau{width:auto;margin-inline:0;overflow:visible}
  /* Une figure ne se coupe pas entre deux feuillets, et l'impression
     suppose du papier blanc : le fond de l'encadre ne sert plus a rien. */
  .figure{width:auto;margin-inline:0;break-inside:avoid;page-break-inside:avoid}
  .figure img{max-height:16cm;background:none!important;border-color:#bbb!important}
  .figure figcaption{color:#444;font-size:9.5pt}
  .article-body table{font-size:9.5pt}
  .article-body thead{display:table-header-group}
  .article-body thead th{background:#fff;color:#000;border-bottom:1.2pt solid #000}
  .article-body tbody td{border-bottom:.5pt solid #bbb}
  .article-body tbody tr:nth-child(even) td{background:#f4f4f4}
  @page{margin:18mm 16mm}
}

/* =========================================================
   Outils de lecture : sommaire, ancres, textes cités, notes.
   ========================================================= */

/* ---- sommaire d'un texte long ---- */
.sommaire-article{
  margin:0 0 34px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
}
.sommaire-article h2{
  margin:0 0 12px;font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.sommaire-article ol{margin:0;padding:0;list-style:none;counter-reset:som}
/* Liste verticale de liens : la hauteur reelle de la ligne porte le pas a
   44 px. Un calque ne conviendrait pas, deux entrees voisines se
   recouvriraient et celle du dessous deviendrait inatteignable. */
.sommaire-article li{
  counter-increment:som;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 10px;align-items:center;line-height:1.45;
}
.sommaire-article li::before{
  content:counter(som,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);
}
.sommaire-article a{
  display:flex;align-items:center;min-height:44px;
  color:var(--ink);text-decoration:none;
}
.sommaire-article a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sommaire-duree{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
}

/* ---- l'ancre d'un intertitre : discrète, visible à l'approche ---- */
/* Une ancre doit s'arreter SOUS l'en-tete fixe, pas derriere lui. Sans cette
   marge, cliquer une entree du sommaire ou un appel de note amenait le titre
   vise juste sous la barre, donc invisible : le lecteur croyait le lien casse.
   La valeur suit la hauteur reelle de l'en-tete, plus une respiration. */
.article-body h2,.article-body h3{scroll-margin-top:var(--sous-entete);position:relative}
#contenu,.notes li,.cites,[id]:target{scroll-margin-top:var(--sous-entete)}
.ancre{
  font-family:var(--mono);font-weight:400;color:var(--ink-faint);
  text-decoration:none;opacity:0;margin-left:8px;font-size:.72em;
  transition:opacity .15s;
}
h2:hover .ancre,h3:hover .ancre,.ancre:focus-visible{opacity:1}
.ancre:hover{color:var(--accent)}
@media (hover:none){.ancre{opacity:.45}}

/* ---- textes cités ---- */
.cites{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--rule)}
.cites-intro{
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.55;color:var(--ink-faint);
  margin:0 0 16px;max-width:38rem;
}
.cites-liste{list-style:none;margin:0;padding:0}
.cites-liste li{
  display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:8px 20px;
  padding:11px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.c-corpus{font-family:var(--sans);font-size:var(--t-micro);font-weight:600;color:var(--ink)}
/* 13 px d'ecart entre les rangees, pas 6 : la pastille fait 31 px de haut et
   son calque de cible en fait 44. A 6 px, deux rangees voisines se seraient
   recouvertes et la pastille du dessous serait devenue incliquable. */
.c-nums{display:flex;flex-wrap:wrap;gap:13px 6px}
.c-num{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-soft);
  background:var(--surface-alt);border:1px solid var(--rule);
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
@media (max-width:560px){
  .cites-liste li{grid-template-columns:minmax(0,1fr)}
}

/* ---- boutons de copie ---- */
.copier-cites{
  display:inline-flex;align-items:center;min-height:34px;
  margin-top:16px;padding:0 14px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
  color:var(--ink-soft);background:none;
  border:1px solid var(--rule-strong);border-radius:3px;
}
.copier-cites:hover{color:var(--accent);border-color:var(--accent)}
.copier-cites.fait{color:var(--accent);border-color:var(--accent)}
.citer-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 0;
  font-family:var(--sans);font-size:var(--t-micro);
}
.citer-actions .copier-cites{margin-top:0}
.citer-actions a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.citer-actions a:hover{color:var(--ink)}

/* ---- une note lue sur place ---- */
.note-ouverte{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
  margin:6px 0 18px;padding:13px 16px;
  background:var(--surface-alt);border-left:2px solid var(--accent);
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.6;color:var(--ink-soft);
}
.note-ouverte .n{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--accent);font-weight:600;
}
.note-ouverte a{color:var(--accent)}
sup a[aria-expanded="true"]{background:var(--accent);color:var(--on-accent);border-radius:2px;padding:0 3px}

@media print{
  .sommaire-article,.cites,.copier-cites,.ancre,.citer-actions{display:none!important}
  .footnotes{page-break-before:auto}
  .note-ouverte{display:none!important}
}
/* les numéros du relevé mènent à Légifrance */
a.c-num{text-decoration:none;color:var(--ink-soft)}
a.c-num:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
a.c-num::after{content:"↗";font-size:.8em;margin-left:5px;color:var(--ink-faint)}
a.c-num:hover::after{color:var(--accent)}
@media print{a.c-num::after{content:""}}

/* =========================================================
   Recherche
   ========================================================= */

.recherche-page{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;
}
.recherche-page input{
  flex:1 1 20rem;min-width:0;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:3px;
  padding:11px 14px;
}
.recherche-page input:focus{outline:none;border-color:var(--accent)}
.recherche-page input::placeholder{color:var(--ink-faint)}
.recherche-page button{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;cursor:pointer;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  border-radius:3px;padding:0 20px;min-height:44px;
}
.recherche-page button:hover{filter:brightness(1.1)}

/* onglets : où chercher */
.filtres-recherche{
  display:flex;gap:2px;flex-wrap:wrap;
  margin:0 0 16px;border-bottom:1px solid var(--rule-strong);
}
.filtres-recherche a{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.filtres-recherche a:hover{color:var(--ink)}
.filtres-recherche a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.filtres-recherche .n,.filtres-rubriques .n{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-faint);
}
.filtres-recherche a[aria-current] .n{color:var(--accent)}

/* filtre par rubrique */
.filtres-rubriques{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 24px;
  font-family:var(--sans);font-size:var(--t-micro);
}
.filtres-rubriques>span{color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-micro)}
.filtres-rubriques a{
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--rule);border-radius:14px;background:var(--surface);
}
.filtres-rubriques a:hover{border-color:var(--rule-strong);color:var(--ink)}
.filtres-rubriques a.actif{
  color:var(--on-accent);background:var(--accent);border-color:var(--accent);
}

/* la liste des résultats */
.resultats{list-style:none;margin:0;padding:0}
.resultat{padding:22px 0;border-bottom:1px solid var(--rule)}
.resultat:first-child{padding-top:4px}
.r-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.r-type{
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:2px;padding:2px 7px;
}
.resultat h2{
  font-family:var(--titre);font-size:1.22rem;line-height:1.3;font-weight:600;
  margin:0 0 8px;letter-spacing:-.01em;
}
.resultat h2 a{color:var(--ink);text-decoration:none}
.resultat h2 a:hover{color:var(--accent)}
.r-extrait{
  margin:0 0 10px;font-size:.96rem;line-height:1.6;color:var(--ink-soft);
  max-width:46rem;
}
.r-pied{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  font-family:var(--sans);font-size:var(--t-micro);color:var(--ink-faint);
}
.r-ou{margin-left:auto;font-style:italic}
@media (max-width:620px){.r-ou{margin-left:0}}

/* le terme trouvé */
mark{
  background:var(--accent-soft);color:var(--ink);
  padding:0 2px;border-radius:2px;box-decoration-break:clone;
}
/* Dans un titre, le terme trouve ne peut pas etre mis en couleur : le titre
   EST un lien, et un mot en bleu au milieu d'un lien se lit comme un second
   lien. On garde donc le meme fond leger que dans le texte, en un peu plus
   discret, et le soulignement du terme plutot que sa couleur. */
.resultat h2 mark,.resultat h3 mark{
  background:var(--accent-soft);color:inherit;padding:0 2px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--accent);
}

.rien-trouve{
  padding:22px 0;font-size:1rem;line-height:1.7;color:var(--ink-soft);max-width:40rem;
}
.rien-trouve a{color:var(--accent)}
.rien-trouve p{margin:0 0 10px}

/* =========================================================
   Micro-interactions.

   Principe : rien ne bouge pour le plaisir. Chaque transition repond a une
   question que se pose la main ou l'oeil : « est-ce cliquable ? », « ai-je
   bien cliqué ? », « d'où vient ce panneau ? ». Aucune n'excede 200 ms, et
   toutes disparaissent si le systeme demande moins de mouvement.
   ========================================================= */

/* --- ce qui reagit au survol : la couleur, jamais la position --- */
a,button,summary,input,select,textarea{
  transition:color var(--vite) var(--courbe),
             background-color var(--vite) var(--courbe),
             border-color var(--vite) var(--courbe),
             opacity var(--vite) var(--courbe);
}

/* --- le menu principal : le trait pousse depuis la gauche --- */
nav.primary a{position:relative;border-bottom-color:transparent}
nav.primary a:not(.lien-boutique)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--moyen) var(--courbe);
}
nav.primary a:not(.lien-boutique):hover::after{transform:scaleX(1)}
nav.primary a[aria-current="page"]::after{transform:scaleX(1)}

/* --- les boutons : un appui qui se sent --- */
.btn-achat,.btn-panier,.copier-cites,.recherche-page button,.btn-chercher,
.lien-boutique,.icon-btn,.menu-bouton{
  transition:color var(--vite) var(--courbe),
             background-color var(--vite) var(--courbe),
             border-color var(--vite) var(--courbe),
             filter var(--vite) var(--courbe),
             transform var(--vite) var(--courbe);
}
.btn-achat:active,.btn-panier:active,.copier-cites:active,
.recherche-page button:active,.btn-chercher:active,.lien-boutique:active{
  transform:translateY(1px);
}
.btn-achat:disabled{opacity:.55;transform:none;cursor:progress}

/* --- les cartes : le titre prend l'accent, le cadre se precise --- */
.carte,.carte-modele,.tuile-rubrique,.resultat{
  transition:border-color var(--vite) var(--courbe),
             background-color var(--vite) var(--courbe);
}
.carte-modele:hover,.tuile-rubrique:hover{border-color:var(--rule-strong)}
.carte-modele:hover h2 a,.carte-modele:hover h3 a,
.carte:hover h2 a,.carte:hover h3 a,.resultat:hover h2 a{color:var(--accent)}

/* --- les liens dans le texte : le soulignement s'epaissit --- */
.article-body a,.page a:not(.btn-achat):not(.btn-panier):not(.copier-cites),
.cites a,.sommaire-article a{
  text-underline-offset:3px;
  transition:color var(--vite) var(--courbe),
             text-decoration-color var(--vite) var(--courbe);
}

/* --- une note qui s'ouvre : elle se deploie, elle n'apparait pas --- */
.note-ouverte{animation:note-deplie var(--moyen) var(--courbe)}
@keyframes note-deplie{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* --- le panneau de navigation : il vient du bord, et le fond s'assombrit --- */
.menu-fond{transition:opacity var(--moyen) var(--courbe)}
.menu-mobile:not([hidden]){animation:panneau-entre var(--moyen) var(--courbe)}
@keyframes panneau-entre{
  from{transform:translateX(100%)}
  to{transform:none}
}
@keyframes fond-entre{from{opacity:0}to{opacity:1}}
.menu-fond:not([hidden]){animation:fond-entre var(--moyen) var(--courbe)}

/* --- la confirmation d'une copie --- */
.copier-cites.fait{animation:confirme var(--moyen) var(--courbe)}
@keyframes confirme{from{transform:scale(.97)}to{transform:none}}

/* --- le focus ne s'anime jamais : il doit etre la instantanement --- */
:focus-visible{transition:none}

/* --- si le systeme demande moins de mouvement, tout s'arrete --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}
/* le panneau repart par ou il est venu */
.menu-mobile.sort{animation:panneau-sort var(--moyen) var(--courbe) forwards}
.menu-fond.sort{animation:fond-sort var(--moyen) var(--courbe) forwards}
@keyframes panneau-sort{from{transform:none}to{transform:translateX(100%)}}
@keyframes fond-sort{from{opacity:1}to{opacity:0}}

/* ================================================== zones cliquables 44 px ==
   Regle demandee : au doigt, une cible doit mesurer 44 x 44 px au minimum.
   Le probleme est qu'un lien de navigation en petites capitales mesure 27 px
   de haut : lui donner 44 px de hauteur reelle decollerait son soulignement
   du texte et gonflerait l'en-tete de moitie.

   On separe donc le dessin de la cible. L'element garde sa taille visible ;
   un calque transparent, qui lui appartient, porte la surface cliquable
   jusqu'a 44 px. Rien ne bouge a l'ecran, le doigt touche une zone conforme,
   et le clic va bien au lien puisque le calque en fait partie.

   Le calcul : min(0px, (100% - 44px) / 2) en haut et en bas. Sur un element
   de 27 px cela vaut -8,5 px de chaque cote, donc 44 px en tout ; sur un
   element deja plus haut, cela vaut 0, et sa cible n'est jamais retrecie.
   Les pourcentages se calculent sur la boite de l'element, toujours definie -
   contrairement a max(100%, 44px), qui s'effondrait a 1 px faute de hauteur
   de reference.

   C'est ::before et non ::after : ::after porte deja le trait du menu
   principal, dont la hauteur de 1 px ecrasait celle du calque.

   La reserve, verifiee par un detecteur de chevauchement : deux cibles
   voisines ne doivent pas se recouvrir, sinon l'une vole les clics de
   l'autre. La ou l'espacement etait trop serre - le pied de page, le panneau
   mobile - c'est l'ecart qui a ete augmente, jamais la cible reduite.
   ========================================================================= */

.wordmark,
nav.primary a,
.lien-boutique,
.icon-btn,
.menu-bouton,
.fil-ariane a,
.backlink,
a.lien,
.une .lire,
.carte-actions .lien-fiche,
.modele-prix-haut .vers-achat,
.ancre,
.btn-panier,
.pl-retrait button,
.pagination a,
.deflist dd a,
footer a,
.rubriques-bar a,
.modele-contenu li a,
.aside li a,
.encart li a,
.carte h2 a,
.carte h3 a,
.resultat h2 a,
.resultat h3 a,
.source-card a,
.citer-actions a,
.copier-cites,
a.c-num,
.sommaire-boutique a,
.editorbar a,
.btn-chercher,
.pl-titre a,
.panier-pied a,
.panier-pied button,
.livraison-liste a,
.filtres-recherche a,
.filtres-rubriques a,
.footnotes .retour{
  position:relative;
}

.wordmark::before,
nav.primary a::before,
.lien-boutique::before,
.icon-btn::before,
.menu-bouton::before,
.fil-ariane a::before,
.backlink::before,
a.lien::before,
.une .lire::before,
.carte-actions .lien-fiche::before,
.modele-prix-haut .vers-achat::before,
.ancre::before,
.btn-panier::before,
.pl-retrait button::before,
.pagination a::before,
.deflist dd a::before,
footer a::before,
.rubriques-bar a::before,
.modele-contenu li a::before,
.aside li a::before,
.encart li a::before,
.carte h2 a::before,
.carte h3 a::before,
.resultat h2 a::before,
.resultat h3 a::before,
.source-card a::before,
.citer-actions a::before,
.copier-cites::before,
a.c-num::before,
.editorbar a::before,
.btn-chercher::before,
.pl-titre a::before,
.panier-pied a::before,
.panier-pied button::before,
.livraison-liste a::before,
.filtres-recherche a::before,
.filtres-rubriques a::before,
.footnotes .retour::before{
  content:"";position:absolute;z-index:1;
  left:0;right:0;
  top:min(0px,calc((100% - 44px) / 2));
  bottom:min(0px,calc((100% - 44px) / 2));
  /* purement une surface : ni fond, ni bordure, ni effet sur le texte */
}

/* Les cibles trop etroites, elargies aussi : le bouton a icone, l'ancre de
   titre, et le « Retirer » du panier, qui mesurait 43 px - un pixel sous la
   regle, qu'un calque etendu en hauteur seule ne rattrapait pas. */
.icon-btn::before,
.ancre::before,
.footnotes .retour::before,
.pl-retrait button::before{
  left:min(0px,calc((100% - 44px) / 2));
  right:min(0px,calc((100% - 44px) / 2));
}

/* Listes verticales : ici c'est la hauteur reelle des lignes qui porte le pas
   a 44 px. Un calque ne suffirait pas, deux lignes voisines se recouvriraient
   et celle du dessous deviendrait inatteignable. */
.menu-groupe a{min-height:44px;flex:none;display:flex;align-items:center}
.deflist dd a{display:inline-flex;align-items:center}

/* ======================================================== icones de rubrique
   Une icone par matiere, au trait, dans la grille des rubriques. Elle est
   decorative : le libelle est a cote, en toutes lettres, et l'icone porte
   aria-hidden. Elle n'est donc jamais la seule a dire de quoi il s'agit.
   Le trait suit la couleur du texte, donc le theme, sans regle en double. */
.tuile-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tuile-ico{color:var(--ink-faint);flex:none;transition:color var(--vite) var(--courbe)}
.tuile-rubrique:hover .tuile-ico{color:var(--accent)}

/* ============================================================== le filet d'or
   L'or ne peut pas porter de texte : mesure a 2,95:1 sur le fond clair, il
   echoue au seuil de 4,5:1 et serait illisible pour une partie des lecteurs.
   Il ne sert donc qu'a des filets, ou le contraste n'est pas une question de
   lecture. Deux endroits, pas un de plus : le trait court au-dessus des
   titres de page, et la ligne qui souligne la separation du pied. Au total
   bien moins d'un pour cent de la surface. */
.lede-block{position:relative}
.lede-block::before{
  content:"";display:block;width:36px;height:2px;
  background:var(--or);margin-bottom:16px;
}
footer{box-shadow:inset 0 2px 0 var(--or)}
@media print{.lede-block::before{display:none}}