/* =========================================================================
   PEAU « repertoire-onglets » (bibliotheque du socle, 17/09/2026)
   Design porte depuis asac-lyon.com (direction 08 « Le Repertoire a Onglets »,
   archetype grille-annuaire, juge 20/20 le 16/09/2026), puis rhabille en FICHIER
   A INTERCALAIRES : onglets de tranche, index alphabetique collant, fiches a
   etiquette cousue. Prefixe : rpo-.
   Aucune ressource distante : piles de polices SYSTEME, aucun @font-face, aucune
   image de fond, aucun script. Navigable sans JavaScript : les onglets et l index
   sont des liens, le menu replie 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 (intercalaire, onglet, index) ou filet haut d une boite.
   REGLE NEGATIVE 2 : --rpo-fil ne devient jamais un aplat. Il est un fil : un trait,
   un soulignement, une pastille de 9 px, le filet rouge en tete d une etiquette.
   REGLE NEGATIVE 3 : la mono ne porte que des COTES ET DES CHIFFRES (cotes, dates,
   compteurs). Les libelles sont en petites capitales de la police de texte.
   REGLE NEGATIVE 4 : l italique est reservee aux lignes de reserve (etiquette,
   caracteristiques, casier vide) et a la note de pied.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS : ce qu un site regle, et rien d autre
   ------------------------------------------------------------------------- */
:root{
  /* --- palette, 8 jetons ------------------------------------------------ */
  --rpo-fond:#F4F1E9;          /* bristol de fiche : fond general, et lui seul */
  --rpo-surface:#FFFDF8;       /* fiche neuve : fond des fiches, du rail, du pied */
  --rpo-creux:#E9E3D6;         /* carton de boite : aplats secondaires, presentoir retourne */
  --rpo-encre:#23272A;         /* encre de registre : texte courant et titres */
  --rpo-encre-pale:#5E6468;    /* mine de plomb : texte secondaire, libelles, legendes */
  --rpo-liseret:#DCD5C6;       /* reglure de fiche : tous les filets */
  --rpo-fil:#A8561F;           /* le fil rouge : liens, pastilles, filet de tete d etiquette */
  --rpo-fil-cuit:#7D3D14;      /* le fil repasse : survol et focus */

  /* --- roue des tranches : une teinte par rubrique, en bord seulement ------ */
  --rpo-tranche-1:#A8561F;
  --rpo-tranche-2:#2F5670;
  --rpo-tranche-3:#3F6B4A;
  --rpo-tranche-4:#5B6367;
  --rpo-tranche-5:#8C6B3F;
  --rpo-tranche-6:#7A4A5E;

  /* --- polices : trois roles, trois piles systeme, aucune requete tierce -- */
  --rpo-police-titre:Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --rpo-police-texte:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rpo-police-cote:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* --- mesures et densite ---------------------------------------------- */
  --rpo-travee:72rem;          /* 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:17rem;    /* pas de la grille du casier */
  --rpo-index:2.6rem;          /* largeur de l index alphabetique collant */
  --rpo-rail:19rem;            /* largeur du rail lateral */
  --rpo-rythme:1.55rem;         /* densite verticale */
  --rpo-rayon:2px;             /* angles : ce fichier est carre */
  --rpo-lettrine:3.2rem;       /* corps de la lettrine a onglet, trois lignes */

  /* --- ratios d image nommes ------------------------------------------- */
  --rpo-ratio-planche:16 / 9;  /* fronton, planche de fiche, boites du presentoir */
  --rpo-ratio-medaillon:1 / 1; /* vignettes du casier et du registre */
  --rpo-ratio-fiche:4 / 5;     /* planche en tete de tranche */

  /* --- 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(16px, 15.4px + .2vw, 17.5px);line-height:1.6;
  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;font-weight:400}
h1{font-size:clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);line-height:1.12}
h2{font-size:clamp(1.35rem, 1.12rem + .85vw, 1.7rem);line-height:1.22}
h3{font-size:1.12rem;line-height:1.25}
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}
[id]{scroll-margin-top:4.5rem}

.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:.9rem;text-decoration:none;
}
.rpo-acces-direct:focus{left:.5rem;top:.5rem;color:var(--rpo-fond)}

/* Le troisieme role : la mono ne porte que des cotes et des chiffres. */
.rpo-cote,.rpo-date,.rpo-bilan__chiffre,.rpo-fil__temps{
  font-family:var(--rpo-police-cote);font-variant-numeric:tabular-nums;
}
.rpo-cote{font-size:.74rem;letter-spacing:.1em;color:var(--rpo-encre-pale)}
.rpo-date{font-size:.74rem;letter-spacing:.04em;color:var(--rpo-encre-pale)}

/* Les libelles : petites capitales de la police de texte, jamais la mono. */
.rpo-libelle,.rpo-parcours__lien,.rpo-onglet,.rpo-bilan__libelle,.rpo-etiquette dt,.rpo-releve dt,
.rpo-pied h2,.rpo-pied__bande dt,.rpo-jalons__titre,.rpo-mention,.rpo-legende__cote,.rpo-poignee,
.rpo-tranche__compteur,.rpo-presentoir__compteur,.rpo-rayon__decompte{
  font-family:var(--rpo-police-texte);font-variant-caps:all-small-caps;letter-spacing:.07em;
}

/* SIGNE A : l intercalaire. Bord gauche de 4 px a la teinte de la tranche, filet
   interieur de la fiche agrafee, reglure verticale de 1 px. */
.rpo-intercalaire{
  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.05rem 0}
.rpo-enseigne{font-family:var(--rpo-police-titre);font-size:1.45rem;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:.9rem;border-left:var(--rpo-filet);padding-left:1rem}
.rpo-parcours{margin-left:auto}
.rpo-parcours ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;margin:0;padding:0}
.rpo-parcours__lien{color:var(--rpo-encre-pale);text-decoration:none;font-size:1rem}
.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-size:1rem;
  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 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-planche);max-height:min(56vh, 34rem);object-fit:cover}
.rpo-fronton__planche .rpo-legende{padding:.5rem 0 .7rem;margin-inline:auto}

/* -------------------------------------------------------------------------
   4. PREAMBULE, LETTRINE A ONGLET, 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);font-size:1.06rem}
/* la lettrine a onglet : l initiale posee sur une petite fiche a bord de fil */
.rpo-lettrine::first-letter,.rpo-corps > p:first-of-type::first-letter{
  float:left;font-family:var(--rpo-police-titre);font-size:var(--rpo-lettrine);line-height:.8;
  color:var(--rpo-encre);background:var(--rpo-surface);
  border-left:4px solid var(--rpo-fil);box-shadow:inset 0 -1px 0 var(--rpo-liseret);
  padding:.1em .12em .04em .14em;margin:.08em .16em 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-size:1.45rem;line-height:1.2;color:var(--rpo-encre)}
.rpo-bilan__libelle{display:block;font-size:.95rem;color:var(--rpo-encre-pale)}

/* -------------------------------------------------------------------------
   5. ONGLETS DE TRANCHE (collants) ET INDEX ALPHABETIQUE (collant a gauche)
   ------------------------------------------------------------------------- */
.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-size:1rem;
  padding:.35rem .8rem .4rem .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;font-family:var(--rpo-police-cote);font-variant-caps:normal;font-size:.72rem;letter-spacing:.08em}

.rpo-repertoire{display:grid;grid-template-columns:1fr;gap:0 1.2rem}
.rpo-index ol{list-style:none;margin:0;padding:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem}
.rpo-index__lettre{
  display:block;min-width:1.9rem;text-align:center;padding:.1rem .2rem;
  font-family:var(--rpo-police-titre);font-size:1.02rem;line-height:1.35;text-decoration:none;
  color:var(--rpo-encre);border-left:2px solid var(--rpo-fil);background:var(--rpo-surface);
}
a.rpo-index__lettre:hover,a.rpo-index__lettre:focus{color:var(--rpo-fil-cuit);border-left-width:4px}
/* une lettre sans entree reste imprimee, barree, sans lien : l index dit aussi ce qui manque */
.rpo-index__lettre--vide{color:var(--rpo-encre-pale);border-left-color:var(--rpo-liseret);background:transparent;text-decoration:line-through;text-decoration-color:var(--rpo-liseret)}

/* -------------------------------------------------------------------------
   6. RAYON, CASIER, FICHE, ETIQUETTE COUSUE
   ------------------------------------------------------------------------- */
.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-size:.98rem;font-variant-numeric:tabular-nums;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-fiche{display:flex;flex-direction:column;background:var(--rpo-surface);border:var(--rpo-filet);padding:.95rem 1rem 1rem}
.rpo-fiche__vignette{margin:0 0 .7rem;padding:0}
.rpo-fiche__vignette img{width:100%;aspect-ratio:var(--rpo-ratio-medaillon);object-fit:cover}
.rpo-fiche__cote{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .6rem;margin:0 0 .5rem}
.rpo-fiche__cote .rpo-date{margin-left:auto}
.rpo-mention{font-size:.95rem;line-height:1.2;color:var(--rpo-encre-pale);border:var(--rpo-filet);padding:0 .4rem .1rem;text-decoration:none}
a.rpo-mention:hover,a.rpo-mention:focus{color:var(--rpo-fil-cuit);border-color:var(--rpo-fil)}
.rpo-fiche__intitule{margin:0 0 .35rem;font-size:1.15rem}
.rpo-fiche__intitule a{color:var(--rpo-encre);text-decoration:none}
.rpo-fiche__intitule a:hover,.rpo-fiche__intitule a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-fiche__abrege{font-size:.95rem;color:var(--rpo-encre-pale);margin:0;max-width:var(--rpo-mesure-breve)}

/* SIGNE B : l etiquette cousue. Un <dl> a trois champs imprimes comme sur une fiche
   bristol : filet rouge en tete, reglure pale entre les champs, libelles en petites
   capitales, reserve en italique toujours au meme emplacement. */
.rpo-etiquette{margin:auto 0 0;border-top:1px solid var(--rpo-fil);padding-top:.15rem}
.rpo-etiquette dt{font-size:.82rem;line-height:1.2;color:var(--rpo-encre-pale);margin:.45rem 0 .05rem}
.rpo-etiquette dd{margin:0;padding-bottom:.4rem;border-bottom:var(--rpo-filet)}
.rpo-etiquette dd:last-child{border-bottom:0;padding-bottom:0}
.rpo-etiquette__qualite{font-size:.9rem;color:var(--rpo-encre)}
.rpo-etiquette__reserve,.rpo-reserve-ligne,.rpo-caracteristiques .rpo-reserve-ligne{font-style:italic;font-size:.94rem;line-height:1.45;color:var(--rpo-encre-pale)}
.rpo-casier .rpo-fiche .rpo-etiquette{margin-top:.7rem}

.rpo-renvoi{font-size:.92rem;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-size:.76rem;line-height:1;letter-spacing:.08em;
}
.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. LE PRESENTOIR : la seule zone retournee, une boite par tranche
   ------------------------------------------------------------------------- */
.rpo-presentoir{background:var(--rpo-creux);border-top:var(--rpo-filet);border-bottom:var(--rpo-filet);padding-block:3.6rem}
.rpo-presentoir__tete{max-width:var(--rpo-mesure);margin:0 0 calc(var(--rpo-rythme) * 1.3)}
.rpo-presentoir__tete h2{margin-bottom:.4rem}
.rpo-presentoir__tete p{color:var(--rpo-encre-pale);margin:0}
.rpo-presentoir__boites{display:grid;gap:1.25rem;align-items:start;grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr))}
.rpo-presentoir__boite{
  display:flex;flex-direction:column;background:var(--rpo-surface);
  border:var(--rpo-filet);border-top:4px solid var(--rpo-teinte);padding:1rem;
}
.rpo-presentoir__boite img{width:100%;aspect-ratio:var(--rpo-ratio-planche);object-fit:cover}
.rpo-presentoir__compteur{margin:.8rem 0 .1rem;font-size:.95rem;color:var(--rpo-encre-pale)}
.rpo-presentoir__compteur .rpo-cote{font-variant-caps:normal;margin-right:.3rem}
.rpo-presentoir__boite h3{margin:0 0 .35rem;font-size:1.3rem}
.rpo-presentoir__boite h3 a{color:var(--rpo-encre);text-decoration:none}
.rpo-presentoir__boite h3 a:hover,.rpo-presentoir__boite h3 a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}
.rpo-presentoir__intro{font-size:.95rem;color:var(--rpo-encre-pale);margin:0 0 .4rem}
.rpo-presentoir__boite .rpo-fil{margin-top:auto;border-top:0;padding-top:.8rem}

/* -------------------------------------------------------------------------
   9. ABECEDAIRE : les lettres en marge, les entrees en regard
   ------------------------------------------------------------------------- */
.rpo-abecedaire{margin:0;display:grid;gap:.2rem 0}
.rpo-abecedaire__groupe{display:grid;grid-template-columns:3rem minmax(0, 1fr);gap:0 1rem;border-top:var(--rpo-filet);padding:.55rem 0}
.rpo-abecedaire dt{font-family:var(--rpo-police-titre);font-size:1.9rem;line-height:1;color:var(--rpo-encre);border-left:4px solid var(--rpo-fil);padding-left:.45rem}
.rpo-abecedaire dd{margin:0}
.rpo-abecedaire ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.rpo-abecedaire li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.rpo-abecedaire li a{color:var(--rpo-encre);text-decoration:none;font-size:1rem}
.rpo-abecedaire li a:hover,.rpo-abecedaire li a:focus{color:var(--rpo-fil-cuit);text-decoration:underline}

/* -------------------------------------------------------------------------
   10. ENCART DE METHODE ET SOURCES CITEES
   ------------------------------------------------------------------------- */
.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.3rem}
.rpo-encart p{font-size:1rem}
.rpo-encart__sources{list-style:none;margin:0 0 .6rem;padding:0;color:var(--rpo-encre-pale)}
.rpo-encart__sources li{border-top:1px solid var(--rpo-liseret);padding:.2rem 0;font-size:.95rem}
.rpo-encart__signature{font-style:italic;font-size:.95rem;color:var(--rpo-encre-pale);margin:.9rem 0 0;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:1rem}
.rpo-renvois .rpo-renvois__hote{margin:0;font-size:.9rem;font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--rpo-encre-pale)}

/* -------------------------------------------------------------------------
   12. TRANCHE (tete de rubrique) ET REGISTRE DENSE
   ------------------------------------------------------------------------- */
.rpo-tranche{display:grid;grid-template-columns:1fr;gap:0 2rem;padding:calc(var(--rpo-rythme) * 1.3) 0 var(--rpo-rythme);background-image:var(--rpo-trame);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%}
.rpo-tranche__compteur{font-size:.98rem;color:var(--rpo-encre-pale);margin:0 0 .3rem}
.rpo-tranche__compteur .rpo-cote{font-variant-caps:normal;margin-right:.3rem}
.rpo-tranche h1{border-left:4px solid var(--rpo-teinte);padding-left:.7rem}
.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__vignette img{width:100%;aspect-ratio:var(--rpo-ratio-medaillon);object-fit:cover}
.rpo-ligne__intitule{margin:0 0 .3rem;font-size:1.15rem}
.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 .4rem;font-size:.95rem;color:var(--rpo-encre-pale);max-width:var(--rpo-mesure-breve)}
.rpo-ligne__attributs{margin:.2rem 0 0}
.rpo-ligne .rpo-etiquette{max-width:var(--rpo-mesure-breve)}

/* -------------------------------------------------------------------------
   13. FICHE LUE : remontee, entete, releve a trois champs
   ------------------------------------------------------------------------- */
.rpo-remontee{padding:var(--rpo-rythme) 0 0;font-size:.95rem}
.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{padding:var(--rpo-rythme) 0 calc(var(--rpo-rythme) / 2);border-bottom:var(--rpo-filet)}
.rpo-entete h1{margin-bottom:.4rem;max-width:26ch}
.rpo-chapeau{font-size:1.1rem;line-height:1.55;color:var(--rpo-encre-pale);max-width:var(--rpo-mesure-breve)}
.rpo-datation{font-size:.98rem;color:var(--rpo-encre-pale);margin:0}
.rpo-releve{display:grid;gap:0;margin:calc(var(--rpo-rythme) * 1.2) 0 0;border-top:1px solid var(--rpo-fil);border-bottom:var(--rpo-filet);background:var(--rpo-creux)}
.rpo-releve > div{padding:.8rem 1rem;border-bottom:var(--rpo-filet)}
.rpo-releve > div:last-child{border-bottom:0}
.rpo-releve dt{font-size:.9rem;color:var(--rpo-encre-pale);margin-bottom:.2rem}
.rpo-releve dd{margin:0;font-size:1rem}

/* -------------------------------------------------------------------------
   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-colonne{min-width:0}
.rpo-colonne > .rpo-planche{margin-top:0}
.rpo-corps{counter-reset:rpo-jalon;font-size:1.06rem;line-height:1.66}
.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-family:var(--rpo-police-cote);font-size:.74rem;line-height:1;letter-spacing:.12em;
  color:var(--rpo-fil);margin-bottom:.35rem;
}
.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-rail{background:transparent}
.rpo-caracteristiques{background:var(--rpo-surface);border:var(--rpo-filet);border-top:1px solid var(--rpo-fil);padding:.35rem 1rem 1rem}
.rpo-caracteristiques h2{font-size:1.15rem;margin:.75rem 0 .5rem}
.rpo-caracteristiques table{width:100%;border-collapse:collapse;font-size:.95rem;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{overflow-wrap:anywhere}
.rpo-caracteristiques .rpo-reserve-ligne{margin:.6rem 0 0}

.rpo-jalons{margin-top:var(--rpo-rythme);counter-reset:rpo-liste}
.rpo-jalons__titre{font-size:.95rem;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:.95rem;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-size:.74rem;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:.95rem;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, CARTON, LEGENDES
   ------------------------------------------------------------------------- */
/* le carton : une photo montee sur fiche, marge blanche et ombre dure de 3 px */
.rpo-carton{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%;object-fit:cover}
.rpo-planche--large img{aspect-ratio:var(--rpo-ratio-planche)}
.rpo-planche--portrait img{aspect-ratio:var(--rpo-ratio-fiche)}
.rpo-legende{font-size:.88rem;line-height:1.45;color:var(--rpo-encre-pale);padding-top:.45rem;margin:0}
/* sous une vignette, la legende tient en deux lignes : la scene entiere reste dans l alt */
.rpo-legende--breve{font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpo-legende__cote{font-size:.92rem;color:var(--rpo-encre-pale);margin-right:.35rem}
.rpo-voisinage{border-top:var(--rpo-filet);padding:calc(var(--rpo-rythme) * 1.5) 0}

/* -------------------------------------------------------------------------
   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-size:1rem;color:var(--rpo-encre-pale);margin:0 0 .5rem}
.rpo-pied p{font-size:.95rem;line-height:1.55;margin:0 0 .7rem}
.rpo-pied ul{list-style:none;margin:0;padding:0;font-size:.98rem}
.rpo-pied li{margin-bottom:.3rem}
.rpo-pied__marque{font-family:var(--rpo-police-titre);font-size:1.2rem;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;display:grid;gap:.1rem 1.5rem;grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr))}
.rpo-pied__bande dt{font-size:.95rem;color:var(--rpo-encre-pale);margin-top:.5rem}
.rpo-pied__bande dd{margin:.1rem 0 0;font-size:.95rem}
.rpo-pied__note{font-style:italic;font-size:.95rem;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 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;padding:.35rem .5rem .35rem .4rem}
  .rpo-onglet__long{display:none}
  .rpo-onglet__court{display:inline}
  .rpo-casier,.rpo-renvois,.rpo-presentoir__boites,.rpo-pied__colonnes{grid-template-columns:1fr}
  .rpo-presentoir{padding-block:2.2rem}
  .rpo-bilan__poste{flex:1 1 7.5rem}
  :root{--rpo-lettrine:2.6rem}
  .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)}
  .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-intercalaire{padding-left:.7rem}
  .rpo-fiche{padding:.8rem .85rem .85rem}
  .rpo-index__lettre{min-width:1.6rem;font-size:.95rem}
}

/* -------------------------------------------------------------------------
   19. GRANDS ECRANS : index collant a gauche, rail colle, jalons en marge
   ------------------------------------------------------------------------- */
@media (min-width:52rem){
  .rpo-ligne{grid-template-columns:6rem 9rem minmax(0, 1fr) 7rem;align-items:start}
  .rpo-ligne__cote{grid-column:1;grid-row:1 / span 3;padding-top:.3rem}
  .rpo-ligne__vignette{grid-column:2;grid-row:1 / span 3;max-width:none;margin-bottom:0}
  .rpo-ligne__texte{grid-column:3}
  .rpo-ligne__attributs{grid-column:4;grid-row:1 / span 3;text-align:right}
}
@media (min-width:60rem){
  .rpo-repertoire{grid-template-columns:var(--rpo-index) minmax(0, 1fr)}
  .rpo-index{align-self:start;position:sticky;top:4.2rem;padding-top:calc(var(--rpo-rythme) * 1.4)}
  .rpo-index ol{flex-direction:column;flex-wrap:nowrap;padding:0;gap:.12rem}
  .rpo-tranche{grid-template-columns:minmax(0, 1fr) 20rem;align-items:end}
  .rpo-tranche .rpo-planche{margin:0}
  .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--service{max-width:55rem}
  .rpo-rail{position:sticky;top:4.2rem}
  .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}
}