/* =========================================================================
   PEAU « repertoire-onglets » (bibliotheque du socle, 17/09/2026)
   Design porte depuis asac-lyon.com (direction 08 « Le Repertoire a Onglets »,
   squelette grille-annuaire, juge 20/20 le 16/09/2026). Prefixe : rpo-.
   Aucune ressource distante : piles de polices SYSTEME, aucun @font-face,
   aucune image de fond, aucun script. Le site est navigable sans JavaScript :
   les onglets sont des liens, le menu est une case a cocher.

   REGLE NEGATIVE 1 : une teinte de tranche (--rpo-tranche-1..6) ne sert JAMAIS
   de fond de bloc, de fond d etiquette ni de couleur de texte. Elle n existe
   que comme bord gauche de 4 px. Un fond teinte transforme le repertoire en
   grille coloree : c est exactement ce que cette peau refuse.
   REGLE NEGATIVE 2 : --rpo-fil ne devient jamais un aplat. Pas de bouton plein,
   pas de bandeau. Il est un fil : un trait, un soulignement, une pastille de 9 px.
   REGLE NEGATIVE 3 : l italique est reservee a la ligne de releve du cartel et
   a la note de pied. Aucune emphase ordinaire en italique.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS : ce qu un site regle, et rien d autre
   ------------------------------------------------------------------------- */
:root{
  /* --- palette, 8 jetons ------------------------------------------------ */
  --rpo-fond:#F8F5EF;          /* papier bristol : fond general, et lui seul */
  --rpo-surface:#FFFFFF;       /* toile apprêtee : fond des entrees, du rail, du pied */
  --rpo-creux:#EFE9DD;         /* toile ecrue : aplats secondaires, bande retournee */
  --rpo-encre:#241C16;         /* encre de brou : texte courant et titres */
  --rpo-encre-pale:#6C6155;    /* graphite estompe : texte secondaire, cotes, legendes */
  --rpo-liseret:#E2D8C7;       /* liseret de toile : tous les filets et reglures */
  --rpo-fil:#8A1F2B;           /* le fil tendu : liens, pastilles, numeros de jalon */
  --rpo-fil-cuit:#6A1620;      /* le fil recuit : survol et focus */

  /* --- roue des tranches : une teinte par rubrique, en bord gauche seulement */
  --rpo-tranche-1:#8A5A2B;
  --rpo-tranche-2:#2F5670;
  --rpo-tranche-3:#9A7B3F;
  --rpo-tranche-4:#5B6367;
  --rpo-tranche-5:#6E4A3A;
  --rpo-tranche-6:#3F6B58;

  /* --- polices : trois roles, trois piles systeme, aucune requete tierce -- */
  --rpo-police-titre:Georgia, "Times New Roman", "DejaVu Serif", "Liberation Serif", serif;
  --rpo-police-texte:"Helvetica Neue", Helvetica, Arial, "DejaVu Sans", sans-serif;
  --rpo-police-cote:"Courier New", Courier, ui-monospace, "DejaVu Sans Mono", monospace;

  /* --- mesures et densite ---------------------------------------------- */
  --rpo-travee:67.5rem;        /* la seule largeur de page */
  --rpo-mesure:68ch;           /* mesure de lecture du corps */
  --rpo-mesure-breve:58ch;     /* mesure des abreges et chapeaux */
  --rpo-mesure-etroite:62ch;   /* mesure du preambule */
  --rpo-pas-casier:18.5rem;      /* pas de la grille du casier */
  --rpo-rail:19rem;            /* largeur du rail lateral */
  --rpo-rythme:1.45rem;         /* densite verticale */
  --rpo-rayon:1px;             /* angles : ce repertoire est carre */
  --rpo-lettrine:3.1rem;      /* corps de la lettrine, trois lignes */

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

  /* --- derives : ne pas regler directement ------------------------------ */
  --rpo-filet:1px solid var(--rpo-liseret);
  --rpo-teinte:var(--rpo-encre);
  --rpo-trame:repeating-linear-gradient(90deg, var(--rpo-liseret) 0 1px, transparent 1px 10px);
}

[data-tranche="0"]{--rpo-teinte:var(--rpo-encre)}
[data-tranche="1"]{--rpo-teinte:var(--rpo-tranche-1)}
[data-tranche="2"]{--rpo-teinte:var(--rpo-tranche-2)}
[data-tranche="3"]{--rpo-teinte:var(--rpo-tranche-3)}
[data-tranche="4"]{--rpo-teinte:var(--rpo-tranche-4)}
[data-tranche="5"]{--rpo-teinte:var(--rpo-tranche-5)}
[data-tranche="6"]{--rpo-teinte:var(--rpo-tranche-6)}

/* -------------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--rpo-fond);color:var(--rpo-encre);
  font-family:var(--rpo-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(--rpo-police-titre);margin:0 0 .6em;letter-spacing:.005em}
h1{font-size:clamp(1.8rem, 1.3rem + 2.1vw, 2.7rem);font-weight:600;line-height:1.18}
h2{font-size:clamp(1.3rem, 1.1rem + .8vw, 1.6rem);font-weight:600;line-height:1.25}
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(--rpo-rythme)}
a{color:var(--rpo-fil);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover,a:focus{color:var(--rpo-fil-cuit)}
:focus-visible{outline:2px solid var(--rpo-fil);outline-offset:2px;border-radius:var(--rpo-rayon)}
strong{font-weight:600}
[hidden]{display:none !important}

.rpo-travee{width:min(100% - 2rem, var(--rpo-travee));margin-inline:auto}

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

/* SIGNE A : la tranche de châssis. Bord gauche de 4 px a la teinte de la rubrique,
   filet interieur qui rappelle la toile agrafee, reglure verticale de 1 px. */
.rpo-chassis{
  border-left:4px solid var(--rpo-teinte);
  box-shadow:inset 5px 0 0 var(--rpo-fond);
  padding-left:calc(var(--rpo-rythme) * .75);
  background-image:linear-gradient(90deg, var(--rpo-liseret) 0 1px, transparent 1px 100%);
  background-position:9px 0;background-repeat:repeat-y;background-size:10px 100%;
}

/* -------------------------------------------------------------------------
   3. FRONTON : barre de fil, enseigne, parcours a deux etats sans script
   ------------------------------------------------------------------------- */
.rpo-fronton{background:var(--rpo-surface);border-bottom:var(--rpo-filet)}
.rpo-fronton__barre{height:4px;background:var(--rpo-fil)}
.rpo-fronton__interieur{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding:1.1rem 0}
.rpo-enseigne{
  font-family:var(--rpo-police-titre);font-size:1.35rem;font-weight:600;
  color:var(--rpo-encre);text-decoration:none;
}
.rpo-enseigne:hover,.rpo-enseigne:focus{color:var(--rpo-fil-cuit)}
.rpo-devise{margin:0;color:var(--rpo-encre-pale);font-size:.85rem;border-left:var(--rpo-filet);padding-left:1rem}
.rpo-parcours{margin-left:auto}
.rpo-parcours ul{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:0;padding:0}
.rpo-parcours__lien{
  color:var(--rpo-encre-pale);text-decoration:none;
  font:.75rem/1.4 var(--rpo-police-cote);letter-spacing:.1em;text-transform:uppercase;
}
.rpo-parcours__lien:hover,.rpo-parcours__lien:focus{color:var(--rpo-fil-cuit)}
.rpo-parcours__lien[aria-current="page"]{color:var(--rpo-fil);box-shadow:inset 0 -2px 0 var(--rpo-fil)}
.rpo-bascule{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rpo-poignee{
  display:none;cursor:pointer;
  font:.75rem/1.4 var(--rpo-police-cote);letter-spacing:.1em;text-transform:uppercase;
  color:var(--rpo-encre);border:var(--rpo-filet);padding:.45rem .8rem;background:var(--rpo-fond);
}
.rpo-bascule:focus-visible + .rpo-poignee{outline:2px solid var(--rpo-fil);outline-offset:2px}
.rpo-poignee span{margin-left:.35rem;color:var(--rpo-fil)}

/* la planche de fronton : une bande, posee sous la barre de rubriques, accueil seulement */
.rpo-fronton__planche{margin:0;border-top:var(--rpo-filet);background:var(--rpo-creux)}
.rpo-fronton__planche img{width:100%;aspect-ratio:var(--rpo-ratio-cimaise);max-height:min(58vh, 36rem);object-fit:cover}
.rpo-fronton__planche .rpo-legende{padding:.5rem 0 .7rem;margin-inline:auto}

/* -------------------------------------------------------------------------
   4. PREAMBULE, LETTRINE, BILAN
   ------------------------------------------------------------------------- */
.rpo-preambule{padding:calc(var(--rpo-rythme) * 1.8) 0 var(--rpo-rythme)}
.rpo-preambule h1{max-width:24ch}
.rpo-preambule__texte{max-width:var(--rpo-mesure-etroite);margin-inline:auto}
.rpo-preambule__texte p{color:var(--rpo-encre-pale)}
/* lettrine de trois lignes, seul emploi de la police de titre en grand corps */
.rpo-lettrine::first-letter{
  float:left;font-family:var(--rpo-police-titre);font-weight:600;
  font-size:var(--rpo-lettrine);line-height:.82;color:var(--rpo-encre);
  padding:.06em .2rem 0 0;
}
.rpo-bilan{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;
  margin:calc(var(--rpo-rythme) * 1.2) 0 0;padding:0;
  border-top:var(--rpo-filet);border-bottom:var(--rpo-filet);background:var(--rpo-surface);
}
.rpo-bilan__poste{flex:1 1 9rem;padding:.85rem 1rem;border-right:var(--rpo-filet)}
.rpo-bilan__poste:last-child{border-right:0}
.rpo-bilan__chiffre{
  display:block;font-family:var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  font-size:1.5rem;line-height:1.2;color:var(--rpo-encre);
}
.rpo-bilan__libelle{
  display:block;font:.7rem/1.5 var(--rpo-police-cote);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rpo-encre-pale);
}

/* -------------------------------------------------------------------------
   5. ONGLETS DE TRANCHE : le geste qui nomme la peau
   ------------------------------------------------------------------------- */
.rpo-onglets{
  position:sticky;top:0;z-index:12;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:stretch;
  padding:.7rem 0;background:var(--rpo-fond);border-bottom:var(--rpo-filet);
}
.rpo-onglet{
  display:inline-flex;align-items:center;
  font:.72rem/1.4 var(--rpo-police-cote);letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem .8rem .45rem .7rem;text-decoration:none;
  color:var(--rpo-encre);background:var(--rpo-surface);
  border:var(--rpo-filet);border-left:4px solid var(--rpo-teinte);
}
.rpo-onglet:hover,.rpo-onglet:focus{color:var(--rpo-fil-cuit)}
.rpo-onglet[aria-current="page"]{color:var(--rpo-fil);box-shadow:inset 0 -2px 0 var(--rpo-fil)}
.rpo-onglet__long{display:inline}
.rpo-onglet__court{display:none}

/* -------------------------------------------------------------------------
   6. RAYON, CASIER, ENTREE, CARTEL COUSU
   ------------------------------------------------------------------------- */
.rpo-rayon{padding:calc(var(--rpo-rythme) * 1.4) 0}
.rpo-rayon__tete{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:var(--rpo-rythme);
  padding-bottom:.7rem;background-image:var(--rpo-trame);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%;
}
.rpo-rayon__tete h2{margin:0}
.rpo-rayon__decompte{
  font:.72rem/1.5 var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rpo-encre-pale);
}
.rpo-rayon__tete .rpo-renvoi{margin-left:auto}
.rpo-rayon__chapeau{max-width:var(--rpo-mesure);color:var(--rpo-encre-pale)}

.rpo-casier{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--rpo-pas-casier), 1fr));gap:1rem}
.rpo-entree{
  display:flex;flex-direction:column;
  background:var(--rpo-surface);border:var(--rpo-filet);
  padding:.95rem 1rem 1rem;
}
.rpo-entree__vignette{margin:0 0 .8rem;padding:0}
.rpo-entree__vignette img{width:100%;aspect-ratio:var(--rpo-ratio-medaillon);object-fit:cover}
.rpo-entree__cote{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .5rem}
.rpo-cote{
  font-family:var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rpo-encre-pale);
}
.rpo-mention{
  font:.68rem/1.5 var(--rpo-police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--rpo-encre-pale);border:var(--rpo-filet);padding:.1rem .4rem;text-decoration:none;
}
a.rpo-mention:hover,a.rpo-mention:focus{color:var(--rpo-fil-cuit);border-color:var(--rpo-fil)}
.rpo-entree__intitule{margin:0 0 .4rem;font-size:1.05rem}
.rpo-entree__intitule a{color:var(--rpo-encre);text-decoration:none}
.rpo-entree__intitule a:hover,.rpo-entree__intitule a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-entree__date{
  font:.72rem/1.5 var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.1em;color:var(--rpo-encre-pale);margin:0 0 .6rem;
}
.rpo-entree__abrege{font-size:.9rem;color:var(--rpo-encre-pale);margin:0 0 .75rem;max-width:var(--rpo-mesure-breve)}

/* SIGNE B : le cartel cousu. Qualification en mono capitales, puis la ligne de
   releve en italique, toujours au meme emplacement dans chaque entree. */
.rpo-cartel{margin:auto 0 0;padding:.5rem 0 0;border-top:var(--rpo-filet)}
.rpo-cartel__qualite{
  font:.72rem/1.5 var(--rpo-police-cote);letter-spacing:.14em;text-transform:uppercase;
  color:var(--rpo-encre-pale);margin:0;
}
.rpo-cartel__reserve{
  font-style:italic;font-size:.9rem;line-height:1.5;color:var(--rpo-encre-pale);
  border-top:1px solid var(--rpo-liseret);padding-top:.35rem;margin:.4rem 0 0;
}

.rpo-renvoi{font-size:.8125rem;font-weight:600;text-decoration:none;color:var(--rpo-fil)}
.rpo-renvoi:hover,.rpo-renvoi:focus{color:var(--rpo-fil-cuit);text-decoration:underline}

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

/* -------------------------------------------------------------------------
   8. LA CIMAISE : la seule zone retournee du site, une piece par tranche
   ------------------------------------------------------------------------- */
.rpo-cimaise{
  background:var(--rpo-creux);
  border-top:var(--rpo-filet);border-bottom:var(--rpo-filet);
  padding-block:4rem;
}
.rpo-cimaise__tete{max-width:var(--rpo-mesure);margin:0 0 calc(var(--rpo-rythme) * 1.4)}
.rpo-cimaise__tete h2{margin-bottom:.4rem}
.rpo-cimaise__tete p{color:var(--rpo-encre-pale);margin:0}
.rpo-cimaise__pieces{display:grid;gap:1.25rem;align-items:start;grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr))}
.rpo-cimaise__piece{
  display:flex;flex-direction:column;
  background:var(--rpo-surface);border:var(--rpo-filet);
  border-top:4px solid var(--rpo-teinte);padding:1rem;
}
.rpo-cimaise__piece img{width:100%;aspect-ratio:var(--rpo-ratio-cimaise);object-fit:cover}
.rpo-cimaise__piece h3{margin:.9rem 0 .35rem}
.rpo-cimaise__piece h3 a{color:var(--rpo-encre);text-decoration:none}
.rpo-cimaise__piece h3 a:hover,.rpo-cimaise__piece h3 a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-cimaise__intro{font-size:.9rem;color:var(--rpo-encre-pale);margin:0 0 .6rem}
.rpo-cimaise__piece .rpo-fil{margin-top:auto;border-top:0;padding-top:.9rem}

/* -------------------------------------------------------------------------
   9. ABECEDAIRE DES NOTIONS
   ------------------------------------------------------------------------- */
.rpo-abecedaire{
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;list-style:none;margin:0;padding:0;
  font:.74rem/1.9 var(--rpo-police-cote);letter-spacing:.06em;
}
.rpo-abecedaire li{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem}
.rpo-abecedaire li + li::before{content:"\00B7";color:var(--rpo-liseret);margin-right:.4rem}
.rpo-abecedaire__notion{
  color:var(--rpo-encre);text-transform:uppercase;letter-spacing:.12em;
  text-decoration:underline;text-decoration-color:var(--rpo-liseret);text-underline-offset:.24em;
}
.rpo-abecedaire__renvoi{color:var(--rpo-encre-pale);text-decoration:none;text-transform:none;letter-spacing:0}
.rpo-abecedaire__renvoi:hover,.rpo-abecedaire__renvoi:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-abecedaire__point{color:var(--rpo-liseret)}

/* -------------------------------------------------------------------------
   10. ENCART DE METHODE ET ENCADRE DE SOURCES
   ------------------------------------------------------------------------- */
.rpo-encart{background:var(--rpo-creux);border:var(--rpo-filet);padding:1.1rem 1.25rem;max-width:var(--rpo-mesure-breve)}
.rpo-encart h2{font-size:1.15rem}
.rpo-encart p{font-size:.95rem}
.rpo-encart p:last-child{margin-bottom:0}
.rpo-encart__sources{
  list-style:none;margin:0 0 .6rem;padding:0;
  font:.78rem/1.9 var(--rpo-police-cote);color:var(--rpo-encre-pale);
}
.rpo-encart__sources li{border-top:1px solid var(--rpo-liseret);padding-top:.15rem}
.rpo-encart__signature{
  font:600 .95rem/1.4 var(--rpo-police-titre);color:var(--rpo-encre);
  margin-top:.9rem;padding-top:.6rem;border-top:var(--rpo-filet);
}

/* -------------------------------------------------------------------------
   11. RENVOIS DE L EXTERIEUR (section reseau, rendue meme vide)
   ------------------------------------------------------------------------- */
.rpo-renvois{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr))}
.rpo-renvois__item{background:var(--rpo-surface);border:var(--rpo-filet);padding:.9rem 1rem}
.rpo-renvois__item p{margin:0 0 .4rem;font-size:.92rem}
.rpo-renvois__hote{
  font:.7rem/1.5 var(--rpo-police-cote) !important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rpo-encre-pale);margin:0 !important;
}

/* -------------------------------------------------------------------------
   12. REGISTRE DE TRANCHE : liste dense a filets
   ------------------------------------------------------------------------- */
.rpo-tranche__tete{
  background-image:var(--rpo-trame);
  background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%;
}
.rpo-tranche__compteur{
  font:.72rem/1.6 var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rpo-encre-pale);margin:0 0 .3rem;
}
.rpo-registre{list-style:none;margin:0 0 var(--rpo-rythme);padding:0;border-top:var(--rpo-filet)}
.rpo-ligne{
  display:grid;gap:.25rem 1rem;grid-template-columns:1fr;
  padding:1rem 0 1rem .85rem;border-bottom:var(--rpo-filet);
}
.rpo-ligne__vignette{margin:0 0 .6rem;padding:0;max-width:11rem}
.rpo-ligne__image img,.rpo-ligne__vignette img{width:100%;aspect-ratio:var(--rpo-ratio-medaillon);object-fit:cover}
.rpo-ligne__cote{
  font-family:var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rpo-encre-pale);
}
.rpo-ligne__intitule{margin:0 0 .3rem;font-size:1.05rem}
.rpo-ligne__intitule a{color:var(--rpo-encre);text-decoration:none}
.rpo-ligne__intitule a:hover,.rpo-ligne__intitule a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-ligne__abrege{margin:0 0 .5rem;font-size:.9rem;color:var(--rpo-encre-pale);max-width:var(--rpo-mesure-breve)}
.rpo-ligne__attributs{
  margin:.2rem 0 0;padding:0;list-style:none;
  font:.75rem/1.7 var(--rpo-police-cote);color:var(--rpo-encre-pale);
}
.rpo-ligne .rpo-cartel{margin-top:0}

/* -------------------------------------------------------------------------
   13. FICHE : remontee, entete, releve a trois entrees
   ------------------------------------------------------------------------- */
.rpo-remontee{padding:var(--rpo-rythme) 0 0;font:.75rem/1.5 var(--rpo-police-cote);letter-spacing:.06em}
.rpo-remontee ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:.1rem 0 .1rem .7rem}
.rpo-remontee li{color:var(--rpo-encre-pale)}
.rpo-remontee li::after{content:"/";margin-left:.35rem;color:var(--rpo-liseret)}
.rpo-remontee li:last-child::after{content:""}
.rpo-remontee a{color:var(--rpo-encre-pale);text-decoration:none}
.rpo-remontee a:hover,.rpo-remontee a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}

.rpo-entete-fiche{padding:var(--rpo-rythme) 0 calc(var(--rpo-rythme) / 2);border-bottom:var(--rpo-filet)}
.rpo-entete-fiche h1{margin-bottom:.4rem;max-width:26ch}
.rpo-chapeau{font-size:1.05rem;line-height:1.55;color:var(--rpo-encre-pale);max-width:var(--rpo-mesure-breve)}
.rpo-datation{
  font:.72rem/1.5 var(--rpo-police-cote);font-variant-numeric:tabular-nums;
  letter-spacing:.08em;color:var(--rpo-encre-pale);margin:0;
}
.rpo-releve{
  display:grid;gap:0;margin:calc(var(--rpo-rythme) * 1.2) 0 0;
  border-top:var(--rpo-filet);border-bottom:var(--rpo-filet);background:var(--rpo-creux);
}
.rpo-releve > div{padding:.85rem 1rem;border-bottom:var(--rpo-filet)}
.rpo-releve > div:last-child{border-bottom:0}
.rpo-releve dt{
  font:.7rem/1.5 var(--rpo-police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--rpo-encre-pale);margin-bottom:.25rem;
}
.rpo-releve dd{margin:0;font-size:.95rem}

/* -------------------------------------------------------------------------
   14. DUO TEXTE + RAIL, jalons numerotes en marge
   ------------------------------------------------------------------------- */
.rpo-duo{display:grid;gap:calc(var(--rpo-rythme) * 1.5);padding:calc(var(--rpo-rythme) * 1.5) 0}
.rpo-corps{counter-reset:rpo-jalon}
.rpo-corps > *{max-width:var(--rpo-mesure)}
.rpo-corps h2{margin-top:calc(var(--rpo-rythme) * 1.8);counter-increment:rpo-jalon;position:relative}
/* SIGNE C bis : le numero de jalon, pose en CSS, qui repond au sommaire du rail */
.rpo-corps h2::before{
  content:counter(rpo-jalon, decimal-leading-zero);
  display:block;font:.72rem/1 var(--rpo-police-cote);letter-spacing:.14em;
  color:var(--rpo-fil);margin-bottom:.3rem;
}
.rpo-corps h3{margin-top:var(--rpo-rythme)}
.rpo-corps ul,.rpo-corps ol{padding-left:1.2rem}
.rpo-corps li{margin-bottom:.35rem}
.rpo-corps > p:first-of-type::first-letter{
  float:left;font-family:var(--rpo-police-titre);font-weight:600;
  font-size:var(--rpo-lettrine);line-height:.82;color:var(--rpo-encre);padding:.06em .2rem 0 0;
}
.rpo-colonne{min-width:0}
.rpo-colonne > .rpo-planche{margin-top:0}

.rpo-rail{background:transparent}
.rpo-caracteristiques{background:var(--rpo-surface);border:var(--rpo-filet);padding:.35rem 1rem 1rem}
.rpo-caracteristiques h2{font-size:1rem;margin:.75rem 0 .5rem}
.rpo-caracteristiques table{width:100%;border-collapse:collapse;font-size:.875rem;margin:0}
.rpo-caracteristiques th,.rpo-caracteristiques td{text-align:left;padding:.45rem 0;border-bottom:var(--rpo-filet);vertical-align:top}
.rpo-caracteristiques tr:last-child th,.rpo-caracteristiques tr:last-child td{border-bottom:0}
.rpo-caracteristiques th{font-weight:400;color:var(--rpo-encre-pale);width:45%;padding-right:1rem}
.rpo-caracteristiques td{font-family:var(--rpo-police-cote);font-variant-numeric:tabular-nums;font-size:.8rem}
.rpo-caracteristiques__manque{font-style:italic;font-size:.9rem;color:var(--rpo-encre-pale);margin:.6rem 0 0}

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

.rpo-ailleurs{margin-top:var(--rpo-rythme)}
.rpo-ailleurs ul{list-style:none;margin:0;padding:0}
.rpo-ailleurs li{border-top:var(--rpo-filet)}
.rpo-ailleurs__lien{display:block;padding:.45rem 0;font-size:.875rem;text-decoration:none;color:var(--rpo-encre);overflow-wrap:anywhere}
.rpo-ailleurs__lien:hover,.rpo-ailleurs__lien:focus{color:var(--rpo-fil-cuit);text-decoration:underline}

/* -------------------------------------------------------------------------
   15. PLANCHES, PASSE-PARTOUT, LEGENDES
   ------------------------------------------------------------------------- */
.rpo-passe-partout{padding:8px;background:var(--rpo-surface);border:var(--rpo-filet);box-shadow:3px 3px 0 var(--rpo-creux)}
.rpo-planche{margin:var(--rpo-rythme) 0}
.rpo-planche img{width:100%;aspect-ratio:var(--rpo-ratio-chassis);object-fit:cover}
.rpo-planche--tranche img,.rpo-planche--fiche img{aspect-ratio:var(--rpo-ratio-cimaise)}
.rpo-legende{font-size:.82rem;line-height:1.5;color:var(--rpo-encre-pale);padding-top:.45rem;margin:0}
/* sous une vignette du casier, la legende tient en deux lignes : la scene entiere reste dans l alt */
.rpo-legende--breve{font-size:.76rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpo-legende__cote{
  font:.7rem/1.5 var(--rpo-police-cote);letter-spacing:.12em;text-transform:uppercase;
  color:var(--rpo-encre-pale);margin-right:.4rem;
}
.rpo-voisinage{border-top:var(--rpo-filet);padding:calc(var(--rpo-rythme) * 1.5) 0}
.rpo-voisinage .rpo-casier{--rpo-pas-casier:15rem}

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

/* -------------------------------------------------------------------------
   17. LES DEUX ETATS DU PARCOURS (case a cocher, sans script)
   ------------------------------------------------------------------------- */
@media (max-width:54rem){
  .rpo-poignee{display:inline-block}
  .rpo-parcours{margin-left:auto;order:3;flex-basis:100%}
  .rpo-parcours ul{display:none;margin-top:.6rem;gap:.5rem;flex-direction:column}
  .rpo-bascule:checked ~ ul{display:flex}
  .rpo-devise{border-left:0;padding-left:0}
}

/* -------------------------------------------------------------------------
   18. TELEPHONE : une colonne, les trois gestes restent lisibles a 360 px
   ------------------------------------------------------------------------- */
@media (max-width:48rem){
  .rpo-onglets{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:.25rem;
    padding-inline:0 1.4rem;scroll-snap-type:x proximity;scroll-padding-right:1.4rem;
    box-shadow:inset -18px 0 12px -12px rgba(38,18,20,.28);
  }
  .rpo-onglets::-webkit-scrollbar{display:none}
  .rpo-onglet{
    scroll-snap-align:start;flex:0 0 auto;
    font-size:.63rem;letter-spacing:.06em;padding:.4rem .42rem .4rem .34rem;
  }
  .rpo-onglet__long{display:none}
  .rpo-onglet__court{display:inline}
  .rpo-casier{grid-template-columns:1fr}
  .rpo-renvois{grid-template-columns:1fr}
  .rpo-cimaise{padding-block:2.2rem}
  .rpo-cimaise__pieces{grid-template-columns:1fr}
  .rpo-pied__colonnes{grid-template-columns:1fr}
  .rpo-lettrine::first-letter,.rpo-corps > p:first-of-type::first-letter{font-size:2.6rem}
  .rpo-bilan__poste{flex:1 1 7.5rem}
  /* le fil passe en colonne : les pastilles reliees par un trait vertical de 18 px */
  .rpo-fil{flex-direction:column;align-items:flex-start;gap:0}
  .rpo-fil__temps{position:relative;line-height:18px}
  .rpo-fil__temps + .rpo-fil__temps::after{
    content:"";position:absolute;left:4px;top:-5px;width:1px;height:9px;background:var(--rpo-fil);
  }
  /* le rail cesse d etre collant et remonte juste apres le releve */
  .rpo-duo{display:flex;flex-direction:column}
  .rpo-rail{position:static;order:-1}
}

@media (max-width:26rem){
  .rpo-travee{width:min(100% - 1.25rem, var(--rpo-travee))}
  .rpo-chassis{padding-left:.7rem}
  .rpo-entree{padding:.8rem .85rem .85rem}
  .rpo-abecedaire{font-size:.72rem}
}

/* -------------------------------------------------------------------------
   19. GRANDS ECRANS : le rail est colle, les jalons passent en marge
   ------------------------------------------------------------------------- */
@media (min-width:52rem){
  .rpo-ligne{grid-template-columns:7rem 9rem minmax(0, 1fr) 13rem;align-items:start}
  .rpo-ligne__vignette{grid-column:2;grid-row:1 / span 3;max-width:none;margin-bottom:0}
  .rpo-ligne__cote{grid-column:1;grid-row:1 / span 3;padding-top:.25rem}
  .rpo-ligne__texte{grid-column:3}
  .rpo-ligne__attributs{grid-column:4;grid-row:1 / span 3}
}

@media (min-width:60rem){
  .rpo-duo{grid-template-columns:minmax(0, 1fr) var(--rpo-rail);align-items:start}
  .rpo-duo--service{max-width:55rem;gap:var(--rpo-rythme)}
  .rpo-duo--service .rpo-corps > *{max-width:none}
  .rpo-entete-fiche--service{max-width:55rem}
  .rpo-rail{position:sticky;top:1rem}
  .rpo-corps h2::before{position:absolute;left:-3.6rem;top:.45rem;margin:0}
  .rpo-releve{grid-template-columns:repeat(3, 1fr)}
  .rpo-releve > div{border-bottom:0;border-right:var(--rpo-filet)}
  .rpo-releve > div:last-child{border-right:0}
}

/* Dans un registre, l italique de la ligne de releve porte la seule information
   qui dit d ou vient l entree ; elle ne sert a aucune emphase ordinaire. */