/* =========================================================================
   LA PALETTE DES QUAIS : asac-lyon.com : fr-FR
   Squelette « grille-annuaire » rhabille.
   Direction 08. Le Repertoire a Onglets ; matiere fil-rouge ; prefixe qp-
   (quais + palette : repli impose par le brief, rp- etant occupe par sitenoir.com).
   Aucune requete distante : polices systeme uniquement, aucun @font-face,
   aucun fichier de police, aucun script. Le site est entierement navigable
   sans JavaScript ; les onglets sont des liens, le menu est une case a cocher.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS DE MATIERE (12 jetons, tous nommes par une matiere d'atelier)
   ------------------------------------------------------------------------- */
:root{
  /* papiers et toiles */
  --bristol:#FAF6F6;          /* papier bristol du cartel : fond general, et lui seul */
  --toile-apprete:#FFFFFF;    /* toile apprêtee du châssis : fond des entrees et du rail */
  --toile-creuse:#F2EBEB;     /* toile ecrue non tendue : aplats secondaires, tete de tranche */
  /* encres */
  --encre-noyau:#261214;      /* encre de noyau de brou : texte courant et titres */
  --graphite-pale:#6E5F61;    /* mine de graphite estompee : texte secondaire, legendes, cotes */
  --liseret-toile:#E8D9DB;    /* liseré de toile agrafee : tous les filets et reglures */
  /* fils rouges */
  --rouge-fil:#D8002E;        /* fil rouge tendu dans l'atelier : liens, pastille courante */
  --rouge-cuit:#A00022;       /* rouge cuit au four : survol et focus des liens */
  /* teintes de tranche : bord gauche de 4 px, et rien d'autre, jamais */
  --terre-toits:#B4623C;      /* terre cuite des toits lyonnais */
  --saone-bleu:#2F5670;       /* bleu de Saone au matin */
  --pierre-doree:#9A7B3F;     /* pierre doree des facades */
  --ardoise-cour:#5B6367;     /* ardoise de cour d'immeuble */

  /* REGLE NEGATIVE 1 : une teinte de tranche (--terre-toits, --saone-bleu,
     --pierre-doree, --ardoise-cour) ne sert JAMAIS de fond de bloc, de fond
     d'etiquette ni de couleur de texte. Elle n'existe que comme border-left
     de 4 px. Un fond teinte transforme le repertoire en grille de cartes
     colorees : c'est exactement ce que ce site refuse.
     REGLE NEGATIVE 2 : --rouge-fil ne devient jamais un aplat. Pas de bouton
     plein rouge, pas de bandeau rouge. Il est un fil : un trait, un
     soulignement, une pastille de 9 px. */

  /* trois piles systeme, trois roles, aucune requete tierce */
  --police-titre:Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia, serif;
  --police-texte:Tahoma, Geneva, Verdana, "DejaVu Sans", sans-serif;
  --police-cote:"Andale Mono", Consolas, "DejaVu Sans Mono", "Courier New", monospace;

  /* rythme et mesures */
  --travee:67.5rem;
  --mesure:66ch;
  --mesure-entree:58ch;
  --mesure-etroite:62ch;
  --pas-casier:19rem;
  --rythme:1.5rem;
  --arrondi:1px;
  --filet:1px solid var(--liseret-toile);
  --teinte-tranche:var(--ardoise-cour);

  /* trois ratios d'image nommes */
  --ratio-cimaise:16 / 9;
  --ratio-medaillon:1 / 1;
  --ratio-chassis:4 / 5;

  /* la reglure de toile : trame verticale de 1 px tous les 10 px */
  --trame-toile:repeating-linear-gradient(90deg, var(--liseret-toile) 0 1px, transparent 1px 10px);
}

/* teinte de tranche par section : quatre teintes pour quatre sections */
[data-tranche="peinture-plein-air"]{--teinte-tranche:var(--terre-toits)}
[data-tranche="salon-arts-plastiques"]{--teinte-tranche:var(--pierre-doree)}
[data-tranche="ecriture-joutes"]{--teinte-tranche:var(--saone-bleu)}
[data-tranche="vie-associative"]{--teinte-tranche:var(--ardoise-cour)}

/* -------------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bristol);
  color:var(--encre-noyau);
  font-family:var(--police-texte);
  font-size:clamp(15.5px, 15px + .18vw, 16.5px);
  line-height:1.62;
  overflow-wrap:break-word;
}

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

h1,h2,h3,h4{font-family:var(--police-titre);margin:0 0 .6em;letter-spacing:0}
h1{font-size:clamp(1.85rem, 1.3rem + 2.2vw, 2.7rem);font-weight:600;line-height:1.18;letter-spacing:.005em}
h2{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.6rem);font-weight:600;line-height:1.25;letter-spacing:.005em}
h3{font-size:1.05rem;font-weight:500;line-height:1.25}
h4{font-size:.95rem;font-weight:600;line-height:1.3}

p,ul,ol,dl,table,figure{margin:0 0 var(--rythme)}

a{color:var(--rouge-fil);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover,a:focus{color:var(--rouge-cuit)}

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

strong{font-weight:600}

/* seul conteneur de largeur du site */
.qp-travee{width:min(100% - 2rem, var(--travee));margin-inline:auto}

.qp-acces-direct{
  position:absolute;left:-9999px;top:0;z-index:30;
  background:var(--encre-noyau);color:var(--bristol);
  padding:.6rem 1rem;font-size:.85rem;text-decoration:none;
}
.qp-acces-direct:focus{left:.5rem;top:.5rem;color:var(--bristol)}

.qp-hors-ecran{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

[hidden]{display:none !important}

/* -------------------------------------------------------------------------
   3. FRONTON ET NAVIGATION (les deux etats, sans script)
   ------------------------------------------------------------------------- */
.qp-fronton{background:var(--toile-apprete);border-bottom:var(--filet)}
.qp-fronton__barre{height:4px;background:var(--rouge-fil)}
.qp-fronton__interieur{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem 1.5rem;padding:1.1rem 0;
}
.qp-enseigne{
  font-family:var(--police-titre);font-size:1.35rem;font-weight:600;
  color:var(--encre-noyau);text-decoration:none;letter-spacing:.005em;
}
.qp-enseigne:hover,.qp-enseigne:focus{color:var(--rouge-cuit)}
.qp-devise{
  margin:0;color:var(--graphite-pale);font-size:.85rem;
  border-left:var(--filet);padding-left:1rem;
}

.qp-parcours{margin-left:auto}
.qp-parcours ul{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:0;padding:0}
.qp-parcours__lien{
  color:var(--graphite-pale);text-decoration:none;
  font:.75rem/1.4 var(--police-cote);letter-spacing:.1em;text-transform:uppercase;
}
.qp-parcours__lien:hover,.qp-parcours__lien:focus{color:var(--rouge-cuit)}
.qp-parcours__lien[aria-current="page"]{color:var(--rouge-fil);box-shadow:inset 0 -2px 0 var(--rouge-fil)}

.qp-bascule{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.qp-poignee{
  display:none;cursor:pointer;
  font:.75rem/1.4 var(--police-cote);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-noyau);border:var(--filet);padding:.45rem .8rem;background:var(--bristol);
}
.qp-poignee span{margin-left:.35rem;color:var(--rouge-fil)}

/* la vue large du fronton : une seule bande, posee sous la barre de rubriques */
.qp-fronton__vue{margin:0;border-top:var(--filet);background:var(--toile-creuse)}
.qp-fronton__vue img{width:100%;aspect-ratio:var(--ratio-cimaise);object-fit:cover}
.qp-fronton__vue .qp-legende{
  width:min(100% - 2rem, var(--travee));margin:0 auto;padding:.5rem 0 .7rem;
}

/* -------------------------------------------------------------------------
   4. PREAMBULE, LETTRINE, BILAN
   ------------------------------------------------------------------------- */
.qp-preambule{padding:calc(var(--rythme) * 1.8) 0 var(--rythme)}
.qp-preambule h1{max-width:24ch}

/* le preambule est la section la plus etroite de l'accueil */
.qp-preambule__texte{max-width:var(--mesure-etroite);margin-inline:auto}
.qp-preambule__texte p{color:var(--graphite-pale)}

/* lettrine : trois lignes de Palatino, seul emploi sur l'accueil */
.qp-lettrine::first-letter{
  float:left;font-family:var(--police-titre);font-weight:600;
  font-size:3.35rem;line-height:.82;color:var(--encre-noyau);
  padding:.06em .2rem 0 0;
}

.qp-bilan{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;
  margin:calc(var(--rythme) * 1.2) 0 0;padding:0;
  border-top:var(--filet);border-bottom:var(--filet);background:var(--toile-apprete);
}
.qp-bilan__poste{flex:1 1 9rem;padding:.85rem 1rem;border-right:var(--filet)}
.qp-bilan__poste:last-child{border-right:0}
.qp-bilan__chiffre{
  display:block;font-family:var(--police-cote);font-variant-numeric:tabular-nums;
  font-size:1.6rem;line-height:1.2;color:var(--encre-noyau);
}
.qp-bilan__libelle{
  display:block;font:.7rem/1.5 var(--police-cote);letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite-pale);
}

/* -------------------------------------------------------------------------
   5. ONGLETS DE TRANCHE : quatre tranches, plus « tout »
   ------------------------------------------------------------------------- */
.qp-onglets{
  position:sticky;top:0;z-index:12;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:stretch;
  padding:.7rem 0;background:var(--bristol);
  border-bottom:var(--filet);
}
.qp-onglet{
  display:inline-flex;align-items:center;
  font:.72rem/1.4 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem .8rem .45rem .7rem;text-decoration:none;
  color:var(--encre-noyau);background:var(--toile-apprete);
  border:var(--filet);border-left:4px solid var(--teinte-tranche);
}
.qp-onglet:hover,.qp-onglet:focus{color:var(--rouge-cuit);border-color:var(--liseret-toile)}
.qp-onglet[aria-current="page"]{color:var(--rouge-fil);box-shadow:inset 0 -2px 0 var(--rouge-fil)}
.qp-onglet[data-tranche="tout"]{border-left-color:var(--encre-noyau)}

/* -------------------------------------------------------------------------
   6. TRANCHE : tete de section, registre, entree, cartel cousu
   ------------------------------------------------------------------------- */
.qp-rayon{padding:calc(var(--rythme) * 1.4) 0}
.qp-rayon__tete{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  margin-bottom:var(--rythme);
}
.qp-rayon__tete h2{margin:0}
.qp-rayon__decompte{
  font:.72rem/1.5 var(--police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;text-transform:uppercase;color:var(--graphite-pale);
}
.qp-rayon__tete .qp-renvoi{margin-left:auto}
.qp-rayon__chapeau{max-width:var(--mesure);color:var(--graphite-pale)}

/* la trame de toile posee derriere la tete de tranche, et la seulement */
.qp-tranche__tete{
  background-image:var(--trame-toile);
  background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%;
}

/* le compteur d'index en tete de chaque tranche */
.qp-tranche__compteur{
  font:.72rem/1.6 var(--police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.12em;text-transform:uppercase;color:var(--graphite-pale);
  margin:0 0 .2rem;
}

/* SIGNE A : la tranche de châssis : bord gauche de 4 px + filet interieur + trame de toile */
.qp-chassis{
  border-left:4px solid var(--teinte-tranche);
  box-shadow:inset 5px 0 0 var(--bristol);
  padding-left:calc(var(--rythme) * .75);
  background-image:linear-gradient(90deg, var(--liseret-toile) 0 1px, transparent 1px 100%);
  background-position:9px 0;
  background-repeat:repeat-y;
  background-size:10px 100%;
}

/* le casier : grille auto-remplie de rendez-vous */
.qp-casier{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--pas-casier), 1fr));
  gap:1rem;
}

.qp-entree{
  display:flex;flex-direction:column;
  background:var(--toile-apprete);
  border:var(--filet);
  padding:.95rem 1rem 1rem;
}
.qp-entree__cote{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:0 0 .5rem;
}
.qp-cote{
  font-family:var(--police-cote);font-variant-numeric:tabular-nums;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-pale);
}
.qp-mention{
  font:.68rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);border:var(--filet);padding:.1rem .4rem;
}
.qp-entree__intitule{margin:0 0 .4rem;font-size:1.05rem}
.qp-entree__intitule a{color:var(--encre-noyau);text-decoration:none}
.qp-entree__intitule a:hover,.qp-entree__intitule a:focus{color:var(--rouge-cuit);text-decoration:underline}
.qp-entree__abrege{font-size:.9rem;color:var(--graphite-pale);margin:0 0 .75rem;max-width:var(--mesure-entree)}
.qp-entree__date{
  font:.72rem/1.5 var(--police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;color:var(--graphite-pale);margin:0 0 .6rem;
}
.qp-entree__vignette{margin:0 0 .8rem;padding:0}
.qp-entree__vignette img{width:100%;aspect-ratio:var(--ratio-medaillon);object-fit:cover}
.qp-entree__attributs{
  margin:0 0 .8rem;padding:.55rem 0 0;border-top:var(--filet);font-size:.8125rem;
}
.qp-attribut{display:flex;gap:.5rem;justify-content:space-between;padding:.12rem 0}
.qp-attribut dt{color:var(--graphite-pale)}
.qp-attribut dd{
  margin:0;font-family:var(--police-cote);font-variant-numeric:tabular-nums;
  font-size:.78rem;text-align:right;
}
.qp-entree__renvoi{margin:auto 0 0}
.qp-renvoi{font-size:.8125rem;font-weight:600;text-decoration:none;color:var(--rouge-fil)}
.qp-renvoi:hover,.qp-renvoi:focus{color:var(--rouge-cuit);text-decoration:underline}

/* SIGNE B : le cartel cousu : nom en serif, qualification en mono capitales, reserve en italique */
.qp-cartel{margin:.5rem 0 0;padding:.5rem 0 0;border-top:var(--filet)}
.qp-cartel__nom{font:600 1.1rem/1.3 var(--police-titre);letter-spacing:.005em;margin:0 0 .25rem}
.qp-cartel__nom a{color:var(--encre-noyau);text-decoration:none}
.qp-cartel__nom a:hover,.qp-cartel__nom a:focus{color:var(--rouge-cuit);text-decoration:underline}
.qp-cartel__qualite{
  font:.72rem/1.5 var(--police-cote);letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite-pale);margin:0;
}
/* l'italique est reservee a cette seule ligne, sur tout le site */
.qp-cartel__reserve{
  font-style:italic;font-size:.9rem;line-height:1.5;color:var(--graphite-pale);
  border-top:1px solid var(--liseret-toile);padding-top:.35rem;margin:.4rem 0 0;
}

/* -------------------------------------------------------------------------
   7. SIGNE C : le fil rouge a trois temps (Reglement, Bulletin, Accrochage)
   ------------------------------------------------------------------------- */
.qp-fil{
  display:flex;align-items:center;gap:.9rem;
  border-top:1px solid var(--liseret-toile);padding-top:.6rem;
  font:.74rem/1 var(--police-cote);letter-spacing:.1em;text-transform:uppercase;
  margin:0;
}
.qp-fil__temps{color:var(--graphite-pale);text-decoration:none}
.qp-fil__temps::before{
  content:"";display:inline-block;width:9px;height:9px;margin-right:.45rem;
  border:1px solid var(--rouge-fil);border-radius:50%;vertical-align:-1px;
}
.qp-fil__temps[aria-current="step"]::before{background:var(--rouge-fil)}
.qp-fil__temps[aria-current="step"]{color:var(--encre-noyau)}
.qp-fil__temps:hover,.qp-fil__temps:focus{color:var(--rouge-cuit)}

/* -------------------------------------------------------------------------
   8. LA CIMAISE DES TROIS TEMPS : la section retournee en fond plein
   ------------------------------------------------------------------------- */
.qp-cimaise{
  background:var(--toile-creuse);
  border-top:var(--filet);border-bottom:var(--filet);
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50% + 1rem);
  padding-block:4rem;
}
.qp-cimaise__tete{max-width:var(--mesure);margin:0 0 calc(var(--rythme) * 1.4)}
.qp-cimaise__tete h2{margin-bottom:.4rem}
.qp-cimaise__tete p{color:var(--graphite-pale);margin:0}
.qp-cimaise__pieces{
  display:grid;gap:1.25rem;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
}
.qp-cimaise__piece{
  display:flex;flex-direction:column;
  background:var(--toile-apprete);
  border:var(--filet);
  padding:1rem;
}
.qp-cimaise__piece img{
  width:100%;aspect-ratio:var(--ratio-cimaise);object-fit:cover;
  border:var(--filet);
}
.qp-cimaise__piece h3{margin:.9rem 0 .35rem}
.qp-cimaise__piece h3 a{color:var(--encre-noyau);text-decoration:none}
.qp-cimaise__piece h3 a:hover,.qp-cimaise__piece h3 a:focus{color:var(--rouge-cuit);text-decoration:underline}
.qp-cimaise__piece .qp-fil{margin-top:auto;border-top:0;padding-top:.9rem}

/* -------------------------------------------------------------------------
   9. ABECEDAIRE DES NOTIONS
   ------------------------------------------------------------------------- */
.qp-abecedaire{
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;
  list-style:none;margin:0;padding:0;
  font:.74rem/1.9 var(--police-cote);letter-spacing:.06em;
}
.qp-abecedaire__notion{
  color:var(--encre-noyau);
  text-decoration:underline;text-decoration-color:var(--liseret-toile);text-underline-offset:.24em;
  text-transform:uppercase;letter-spacing:.12em;
}
/* une etiquette de tranche porte sa tranche de chassis, comme l'index lateral et le fil d'Ariane */
.qp-abecedaire__notion--tranche{
  border-left:4px solid var(--teinte-tranche);padding-left:.6rem;
  text-decoration:none;
}
.qp-abecedaire__notion:hover,.qp-abecedaire__notion:focus{color:var(--rouge-cuit)}
.qp-abecedaire__renvoi{color:var(--graphite-pale);text-decoration:none;text-transform:none;letter-spacing:0}
.qp-abecedaire__renvoi:hover,.qp-abecedaire__renvoi:focus{color:var(--rouge-cuit);text-decoration:underline}
.qp-abecedaire__point{color:var(--liseret-toile)}

/* -------------------------------------------------------------------------
   10. ENCART DE METHODE
   ------------------------------------------------------------------------- */
.qp-encart{
  background:var(--toile-creuse);border:var(--filet);
  padding:1.1rem 1.25rem;max-width:var(--mesure-entree);
}
.qp-encart h2{font-size:1.15rem}
.qp-encart p{font-size:.95rem;color:var(--encre-noyau)}
.qp-encart p:last-child,.qp-encart ul:last-child{margin-bottom:0}
.qp-encart__signature{
  font:600 .95rem/1.4 var(--police-titre);color:var(--encre-noyau);
  margin-top:.9rem;padding-top:.6rem;border-top:var(--filet);
}
.qp-encart__calage{margin-top:-2rem}

/* -------------------------------------------------------------------------
   11. REGISTRE DE RUBRIQUE : liste dense a filets
   ------------------------------------------------------------------------- */
.qp-registre{list-style:none;margin:0 0 var(--rythme);padding:0;border-top:var(--filet)}
.qp-ligne{
  display:grid;gap:.25rem 1rem;grid-template-columns:1fr;
  padding:1rem 0 1rem .85rem;border-bottom:var(--filet);
}
.qp-ligne__cote{
  font-family:var(--police-cote);font-variant-numeric:tabular-nums;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite-pale);
}
.qp-ligne__intitule{margin:0;font-size:1.05rem}
.qp-ligne__intitule a{color:var(--encre-noyau);text-decoration:none}
.qp-ligne__intitule a:hover,.qp-ligne__intitule a:focus{color:var(--rouge-cuit);text-decoration:underline}
.qp-ligne__abrege{margin:0;font-size:.9rem;color:var(--graphite-pale);max-width:var(--mesure-entree)}
.qp-ligne__attributs{
  margin:.2rem 0 0;padding:0;list-style:none;font-size:.8125rem;
}
.qp-ligne__attributs li{color:var(--graphite-pale)}

.qp-feuilletage{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  list-style:none;margin:0;padding:0;
  font:.8125rem/1.4 var(--police-cote);font-variant-numeric:tabular-nums;
}
.qp-feuilletage span,.qp-feuilletage a{
  display:inline-block;padding:.35rem .7rem;border:var(--filet);
  background:var(--toile-apprete);text-decoration:none;color:var(--encre-noyau);
}
.qp-feuilletage [aria-current="page"]{border-color:var(--rouge-fil);color:var(--rouge-fil)}

/* -------------------------------------------------------------------------
   12. PAGE DE FICHE : remontee, entete, releve a trois entrees, avant/apres
   ------------------------------------------------------------------------- */
.qp-remontee{padding:var(--rythme) 0 0;font:.75rem/1.5 var(--police-cote);letter-spacing:.06em}
.qp-remontee ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.qp-remontee li{color:var(--graphite-pale)}
.qp-remontee li::after{content:"/";margin-left:.35rem;color:var(--liseret-toile)}
.qp-remontee li:last-child::after{content:""}
.qp-remontee a{color:var(--graphite-pale);text-decoration:none}
.qp-remontee a:hover,.qp-remontee a:focus{color:var(--rouge-cuit);text-decoration:underline}

.qp-entete-fiche{
  padding:var(--rythme) 0 calc(var(--rythme) / 2);
  border-bottom:var(--filet);
}
.qp-entete-fiche h1{margin-bottom:.4rem;max-width:26ch}
.qp-chapeau{font-size:1.05rem;line-height:1.55;color:var(--graphite-pale);max-width:var(--mesure-entree)}
.qp-datation{
  font:.72rem/1.5 var(--police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.08em;color:var(--graphite-pale);margin:0;
}

/* le <dl> a trois entrees : ce que le reglement impose, ce qu'il faut confirmer,
   ce que la page consultee ne dit pas */
.qp-releve{
  display:grid;gap:0;margin:calc(var(--rythme) * 1.2) 0 0;
  border-top:var(--filet);border-bottom:var(--filet);
  background:var(--toile-creuse);
}
.qp-releve > div{
  padding:.85rem 1rem;border-bottom:var(--filet);
}
.qp-releve > div:last-child{border-bottom:0}
.qp-releve dt{
  font:.7rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);margin-bottom:.25rem;
}
.qp-releve dd{margin:0;font-size:.95rem}

/* encadre Avant / Apres des pages de reglement */
.qp-avant-apres{
  display:grid;gap:0;grid-template-columns:1fr;
  margin:calc(var(--rythme) * 1.2) 0 0;border:var(--filet);background:var(--toile-apprete);
}
.qp-avant-apres > div{padding:.9rem 1rem}
.qp-avant-apres h3{
  font:.72rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);margin:0 0 .4rem;font-weight:400;
}
.qp-avant-apres ul{margin:0;padding-left:1.1rem;font-size:.9rem}
.qp-avant-apres li{margin-bottom:.3rem}

/* -------------------------------------------------------------------------
   13. DUO TEXTE + RAIL (deux colonnes asymetriques)
   ------------------------------------------------------------------------- */
.qp-duo{display:grid;gap:calc(var(--rythme) * 1.5);padding:calc(var(--rythme) * 1.5) 0}

.qp-corps > *{max-width:var(--mesure)}
.qp-corps{position:relative;counter-reset:jalon}
.qp-corps h2{margin-top:calc(var(--rythme) * 1.8);counter-increment:jalon}
.qp-corps h3{margin-top:var(--rythme)}
.qp-corps ul,.qp-corps ol{padding-left:1.2rem}
.qp-corps li{margin-bottom:.35rem}

/* la lettrine du premier paragraphe de corps, comme sur le preambule d'accueil */
.qp-corps > p:first-of-type::first-letter{
  float:left;font-family:var(--police-titre);font-weight:600;
  font-size:3.35rem;line-height:.82;color:var(--encre-noyau);
  padding:.06em .2rem 0 0;
}

/* SIGNE C bis : le numero de jalon dans la marge gauche, qui repond au sommaire du rail */
.qp-jalon{
  display:block;
  font:.72rem/1 var(--police-cote);letter-spacing:.14em;
  color:var(--rouge-fil);margin-bottom:.3rem;
}

.qp-rail{background:transparent}

/* tableau de caracteristiques : memes lignes d'une fiche a l'autre */
.qp-caracteristiques{
  background:var(--toile-apprete);border:var(--filet);
  padding:.35rem 1rem 1rem;
}
.qp-caracteristiques h2{font-size:1rem;margin:.75rem 0 .5rem}
.qp-caracteristiques table{width:100%;border-collapse:collapse;font-size:.875rem;margin:0}
.qp-caracteristiques th,.qp-caracteristiques td{
  text-align:left;padding:.45rem 0;border-bottom:var(--filet);vertical-align:top;
}
.qp-caracteristiques tr:last-child th,.qp-caracteristiques tr:last-child td{border-bottom:0}
.qp-caracteristiques th{font-weight:400;color:var(--graphite-pale);width:45%}
.qp-caracteristiques td{
  font-family:var(--police-cote);font-variant-numeric:tabular-nums;font-size:.8rem;
}
.qp-caracteristiques__manque{font-style:italic;font-size:.9rem;color:var(--graphite-pale);margin:.6rem 0 0}

/* sommaire numerote de la fiche */
.qp-jalons{margin-top:var(--rythme)}
.qp-jalons__titre{
  font:.7rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);margin:0 0 .3rem;
}
.qp-jalons ol{list-style:none;margin:0;padding:0;counter-reset:jalon-liste}
.qp-jalons li{counter-increment:jalon-liste;border-top:var(--filet)}
.qp-jalons__lien{display:block;padding:.45rem 0;font-size:.875rem;text-decoration:none;color:var(--encre-noyau)}
.qp-jalons__lien::before{
  content:counter(jalon-liste, decimal-leading-zero) " ";
  font-family:var(--police-cote);font-variant-numeric:tabular-nums;
  font-size:.72rem;color:var(--rouge-fil);
}
.qp-jalons__lien:hover,.qp-jalons__lien:focus{color:var(--rouge-cuit)}

/* tableau large : defilement propre, jamais de debordement de page */
.qp-tableau-defilant{
  overflow-x:auto;border:var(--filet);background:var(--toile-apprete);max-width:100%;
}
.qp-tableau-defilant table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.875rem;margin:0}
.qp-tableau-defilant caption{text-align:left;padding:.7rem 1rem;font-size:.8125rem;color:var(--graphite-pale)}
.qp-tableau-defilant th,.qp-tableau-defilant td{padding:.55rem 1rem;border-bottom:var(--filet);text-align:left}
.qp-tableau-defilant thead th{
  background:var(--toile-creuse);
  font:.7rem/1.5 var(--police-cote);letter-spacing:.1em;text-transform:uppercase;
}
.qp-tableau-defilant tbody tr:nth-child(even) th,.qp-tableau-defilant tbody tr:nth-child(even) td{
  background:var(--toile-creuse);
}
.qp-tableau-defilant tbody tr:last-child th,.qp-tableau-defilant tbody tr:last-child td{border-bottom:0}
.qp-tableau-defilant td{font-family:var(--police-cote);font-variant-numeric:tabular-nums;font-size:.8rem}
.qp-tableau-defilant:focus-visible{outline:2px solid var(--rouge-fil)}

/* -------------------------------------------------------------------------
   14. IMAGES : le passe-partout, la legende, le voisinage
   ------------------------------------------------------------------------- */
.qp-passe-partout{
  padding:8px;background:var(--toile-apprete);border:var(--filet);
  box-shadow:3px 3px 0 var(--toile-creuse);
}
.qp-chassis-image{margin:var(--rythme) 0}
.qp-chassis-image img{
  width:100%;aspect-ratio:var(--ratio-chassis);object-fit:cover;
}
.qp-chassis-image--cimaise img{aspect-ratio:var(--ratio-cimaise)}
.qp-legende{
  font-size:.82rem;line-height:1.5;color:var(--graphite-pale);
  padding-top:.45rem;
}

.qp-voisinage{border-top:var(--filet);padding:calc(var(--rythme) * 1.5) 0}
.qp-voisinage .qp-casier{--pas-casier:13rem}

/* -------------------------------------------------------------------------
   15. PIED QUI PROUVE : trois colonnes puis une bande basse
   ------------------------------------------------------------------------- */
.qp-pied{
  background:var(--toile-apprete);border-top:var(--filet);
  padding:calc(var(--rythme) * 1.5) 0 var(--rythme);
  margin-top:var(--rythme);
}
.qp-pied__colonnes{
  display:grid;gap:var(--rythme);align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
}
.qp-pied h2{
  font:.7rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);margin:0 0 .5rem;
}
.qp-pied p{font-size:.85rem;line-height:1.6;margin:0 0 .7rem}
.qp-pied ul{list-style:none;margin:0;padding:0;font-size:.85rem}
.qp-pied li{margin-bottom:.3rem}
.qp-pied__marque{font:600 1.05rem/1.3 var(--police-titre);color:var(--encre-noyau);display:block;margin-bottom:.5rem}
.qp-pied__colophon{margin:0}
.qp-pied__bande{
  margin-top:calc(var(--rythme) * 1.2);padding-top:.9rem;border-top:var(--filet);
}
.qp-pied__bande dl{margin:0;font-size:.82rem}
.qp-pied__bande dt{
  font:.7rem/1.5 var(--police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite-pale);margin-top:.7rem;
}
.qp-pied__bande dd{margin:.15rem 0 0}
.qp-pied__note{font-style:italic;font-size:.85rem;color:var(--graphite-pale)}

/* -------------------------------------------------------------------------
   16. NAVIGATION : LES DEUX ETATS (basculer sur une case a cocher, sans script)
   Au-dessus de 54rem : declencheur cache, liste en barre horizontale.
   En dessous : declencheur visible, liste repliee.
   ------------------------------------------------------------------------- */
@media (max-width:54rem){
  .qp-poignee{display:inline-block}
  .qp-parcours{margin-left:auto;order:3;flex-basis:100%}
  .qp-parcours ul{display:none;margin-top:.6rem;gap:.5rem;flex-direction:column}
  .qp-bascule:checked ~ ul{display:flex}
  .qp-devise{border-left:0;padding-left:0}
}

/* -------------------------------------------------------------------------
   17. MOBILE : tout se replie en une colonne ; les trois gestes restent
   ------------------------------------------------------------------------- */
@media (max-width:48rem){
  .qp-travee{width:min(100% - 2rem, var(--travee))}
  .qp-onglets{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-inline:0;
  }
  .qp-onglets::-webkit-scrollbar{display:none}
  .qp-casier{grid-template-columns:1fr}
  .qp-entree__vignette{display:none}
  .qp-corps > p:first-of-type::first-letter{font-size:2.6rem}
  .qp-lettrine::first-letter{font-size:2.6rem}
  .qp-cimaise{padding-block:2.2rem}
  .qp-cimaise__pieces{grid-template-columns:1fr}
  .qp-aveugle-mobile{display:none}
  .qp-pied__colonnes{grid-template-columns:1fr}

  /* le fil passe en colonne : les trois pastilles reliees par un trait vertical de 18 px */
  .qp-fil{
    flex-direction:column;align-items:flex-start;gap:0;
    border-top:1px solid var(--liseret-toile);
  }
  .qp-fil__temps{position:relative;padding-left:0;line-height:18px}
  .qp-fil__temps::before{margin-right:.5rem}
  .qp-fil__temps + .qp-fil__temps{margin-top:0}
  .qp-fil__temps + .qp-fil__temps::after{
    content:"";position:absolute;left:4px;top:-18px;width:1px;height:18px;background:var(--rouge-fil);
  }

  /* le rail cesse d'etre collant et remonte juste apres le <dl> de releve */
  .qp-duo{display:flex;flex-direction:column}
  .qp-rail{position:static;order:-1}
}

/* -------------------------------------------------------------------------
   18. GRANDS ECRANS : le rail est collant, l'encart se cale a droite
   ------------------------------------------------------------------------- */
@media (min-width:60rem){
  .qp-duo{grid-template-columns:minmax(0, 1fr) 20rem;align-items:start}
  .qp-rail{position:sticky;top:1rem}
  /* le numero de jalon passe dans la marge gauche du corps de texte */
  .qp-corps h2{position:relative}
  .qp-jalon{position:absolute;left:-3.6rem;top:.4rem;margin:0}
  .qp-releve{grid-template-columns:repeat(3, 1fr)}
  .qp-releve > div{border-bottom:0;border-right:var(--filet)}
  .qp-releve > div:last-child{border-right:0}
  .qp-avant-apres{grid-template-columns:1fr 1fr}
  .qp-avant-apres > div + div{border-left:var(--filet)}
  .qp-encart__calage{margin-left:auto;margin-top:-2rem}
}

@media (min-width:52rem){
  .qp-ligne{grid-template-columns:7rem minmax(0, 1fr) 15rem;align-items:start}
  .qp-ligne__cote{grid-row:1 / span 3;padding-top:.25rem}
  .qp-ligne__attributs{grid-column:3;grid-row:1 / span 3}
}

/* -------------------------------------------------------------------------
   19. VERSION LONGUE DU FIL EN TETE DE TRANCHE : le numero d'etape reste lisible
   ------------------------------------------------------------------------- */
.qp-fil--tranche{margin-top:1rem}

/* Dans un registre, l'italique de reserve porte la seule information que la
   source ne publie pas ; elle ne sert a aucune emphase ordinaire. */