/* =========================================================================
   ODISHA INVESTMENT NOTES (teamorissa.org)
   Systeme de design « le registre industriel », prefixe oin-.

   Metaphore : le registre d'un bureau d'etudes. Une feuille de releve, des
   filets fins, une colonne de cote a gauche, des chiffres en chasse fixe.
   Vocabulaire : registre (conteneur), entete (en-tete du site), sceau (bloc
   de marque), index (navigation), bandeau (heros), cote (numero de rang),
   cartouche (bloc de titre de page), piste (fil d'Ariane), releve (section),
   poste (une rubrique dans le hub), feuillet (carte d'article), vue (cadre
   d'image), fiche (chiffre cle), bouton, encart, corps (texte d'article),
   planche (figure), galerie, renvoi (a lire ensuite), pied (pied de page),
   saut (lien d'evitement), invisible (lecteurs d'ecran).

   Palette : papier de releve gris acier, encre graphite, safran de tampon,
   sarcelle profonde. Titres en chasse etroite. Angles vifs partout, aucune
   ombre, aucun degrade decoratif.
   Aucune police distante, aucun script tiers, aucune requete sortante.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 1. COULEURS ------------------------------------------------------ */
  --oin-papier:        #f1f0ea;  /* fond general, papier de releve         */
  --oin-papier-vif:    #ffffff;  /* panneaux poses dessus                  */
  --oin-papier-creux:  #e4e3da;  /* bandes en creux                        */
  --oin-encre:         #1b2127;  /* graphite, texte courant                */
  --oin-encre-douce:   #525b64;  /* notes, legendes, meta                  */
  --oin-filet:         #c6c5bb;  /* filets, 1 px, jamais un texte          */
  --oin-filet-fort:    #9d9c91;

  --oin-safran:        #d08a12;  /* aplats, filets d'accent                */
  --oin-safran-encre:  #8a5405;  /* la meme idee, lisible en texte         */
  --oin-sarcelle:      #0f5b58;  /* contrepoint, liens, focus              */
  --oin-sarcelle-vif:  #67bdb4;  /* le contrepoint sur fond sombre         */

  --oin-acier:         #222a31;  /* bandes sombres : entete, pied          */
  --oin-acier-creux:   #191f25;
  --oin-acier-filet:   #3a444d;
  --oin-encre-inverse: #ecedee;
  --oin-encre-inverse-douce: #a9b2ba;
  --oin-sur-aplat:     #17202a;  /* texte pose sur un aplat safran         */

  /* Les trois teintes de rubrique. Lisibles sur --oin-papier ET sur
     --oin-papier-vif (au dessus de 6 pour 1 sur les deux). */
  --oin-voie-policy:  #0f5b58;
  --oin-voie-sites:   #2b4a60;
  --oin-voie-sectors: #8a5405;
  --oin-teinte: var(--oin-sarcelle);         /* surchargee par page        */
  --oin-teinte-claire: var(--oin-sarcelle-vif);

  /* ---- 2. CARACTERES · piles systeme uniquement ------------------------- */
  --oin-titre-police: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow",
                      "Nimbus Sans Narrow", "Roboto Condensed", "Franklin Gothic Medium",
                      Arial, sans-serif;
  --oin-texte-police: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Noto Serif",
                      Georgia, "Times New Roman", serif;
  --oin-chiffre-police: "IBM Plex Mono", Menlo, "Cascadia Mono", Consolas,
                      "DejaVu Sans Mono", monospace;

  --oin-corps:      clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --oin-interligne: 1.68;
  --oin-h1:         clamp(2.3rem, 1.4rem + 3.4vw, 4.25rem);
  --oin-h2:         clamp(1.55rem, 1.2rem + 1.5vw, 2.5rem);
  --oin-h3:         clamp(1.12rem, 1.03rem + 0.42vw, 1.4rem);
  --oin-capitale:   0.15em;

  /* ---- 3. RYTHME -------------------------------------------------------- */
  --oin-mesure:     67ch;
  --oin-largeur:    1320px;
  --oin-marge:      clamp(1rem, 3.4vw, 3.2rem);
  --oin-gouttiere:  clamp(0.9rem, 1.9vw, 1.8rem);
  --oin-avance:     clamp(2.2rem, 4.6vw, 4.4rem);
  --oin-rail:       4.6rem;
  --oin-transition: 130ms ease;
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--oin-papier);
  color: var(--oin-encre);
  font-family: var(--oin-texte-police);
  font-size: var(--oin-corps);
  line-height: var(--oin-interligne);
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--oin-titre-police);
  font-stretch: condensed;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--oin-h1); }
h2 { font-size: var(--oin-h2); }
h3 { font-size: var(--oin-h3); line-height: 1.16; }

a { color: var(--oin-sarcelle); text-decoration: underline; text-underline-offset: 0.18em;
    text-decoration-thickness: 1px; transition: color var(--oin-transition); }
a:hover { color: var(--oin-safran-encre); text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--oin-safran); outline-offset: 2px; }

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

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

.oin-saut {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--oin-safran); color: var(--oin-sur-aplat);
  padding: 0.7rem 1.2rem; font-family: var(--oin-chiffre-police);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: var(--oin-capitale);
  text-decoration: none;
}
.oin-saut:focus { left: 0.6rem; top: 0.6rem; }

.oin-registre { width: min(100% - 2 * var(--oin-marge), var(--oin-largeur)); margin-inline: auto; }
.oin-registre--lecture { width: min(100% - 2 * var(--oin-marge), 74ch); margin-inline: auto; }

/* =========================================================================
   ENTETE
   ========================================================================= */
/* L'en-tete et le pied gardent la pleine laize, meme sur une page interieure
   dont le registre est resserre pour la lecture. */
.oin-entete, .oin-pied { --oin-largeur: 1320px; }

.oin-entete {
  background: var(--oin-acier);
  color: var(--oin-encre-inverse);
  border-bottom: 3px solid var(--oin-safran);
}
.oin-entete__corps {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.8rem 1.6rem; padding-block: 0.95rem;
}
.oin-sceau { display: block; text-decoration: none; color: inherit; }
.oin-sceau__nom {
  display: block; font-family: var(--oin-titre-police); font-stretch: condensed;
  font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase;
}
.oin-sceau__nom em { font-style: normal; color: var(--oin-safran); }
.oin-sceau__mention {
  display: block; margin-top: 0.28rem; font-family: var(--oin-chiffre-police);
  font-size: 0.66rem; letter-spacing: var(--oin-capitale); text-transform: uppercase;
  color: var(--oin-encre-inverse-douce);
}
.oin-sceau:hover .oin-sceau__nom { color: var(--oin-safran); }

.oin-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1.35rem; }
.oin-index a {
  color: var(--oin-encre-inverse); text-decoration: none;
  font-family: var(--oin-chiffre-police); font-size: 0.73rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0; display: inline-block; border-bottom: 2px solid transparent;
}
.oin-index a:hover { color: var(--oin-safran); border-bottom-color: var(--oin-safran); }
.oin-index a[aria-current="page"] { color: var(--oin-safran); border-bottom-color: var(--oin-safran); }

/* Menu mobile sans script : <details> porte le seul bouton, la navigation est sa
   VOISINE. Un <details> ferme masque ses propres enfants (content-visibility, non
   surchargeable) ; en sortir la navigation garde le clavier natif de <summary>. */
.oin-tiroir { display: none; }

@media (max-width: 60rem) {
  .oin-entete__corps { flex-wrap: nowrap; position: relative; }
  .oin-tiroir { display: block; }
  .oin-tiroir > summary {
    display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
    list-style: none; border: 1px solid var(--oin-acier-filet);
    padding: 0.5rem 0.85rem; font-family: var(--oin-chiffre-police);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--oin-encre-inverse);
  }
  .oin-tiroir > summary::-webkit-details-marker { display: none; }
  .oin-tiroir > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
  .oin-tiroir[open] > summary::after { content: "\2212"; }
  .oin-index { display: none; }
  .oin-tiroir[open] ~ .oin-index {
    display: block;
    position: absolute; right: 0; top: calc(100% + 0.2rem); z-index: 40;
    min-width: 15rem; background: var(--oin-acier-creux);
    border: 1px solid var(--oin-acier-filet); border-top: 3px solid var(--oin-safran);
    padding: 0.5rem 1rem 0.9rem;
  }
  .oin-index ul { flex-direction: column; gap: 0; }
  .oin-index li + li { border-top: 1px solid var(--oin-acier-filet); }
  .oin-index a { display: block; padding: 0.65rem 0; border-bottom: 0; }
}

/* =========================================================================
   BANDEAU (heros de l'accueil)
   ========================================================================= */
.oin-bandeau { background: var(--oin-papier-vif); border-bottom: 1px solid var(--oin-filet); }
.oin-bandeau__corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem); align-items: center;
  padding-block: clamp(2rem, 4.6vw, 4rem);
}
.oin-bandeau__mot { max-width: 38rem; }
.oin-bandeau__surtitre {
  margin: 0 0 1rem; font-family: var(--oin-chiffre-police); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--oin-capitale);
  color: var(--oin-safran-encre);
  display: flex; align-items: center; gap: 0.7rem;
}
.oin-bandeau__surtitre::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--oin-filet-fort);
}
.oin-bandeau h1 { letter-spacing: -0.02em; }
.oin-bandeau__amorce {
  margin: 1.15rem 0 0; font-size: clamp(1.06rem, 1rem + 0.35vw, 1.24rem);
  color: var(--oin-encre-douce); line-height: 1.55; max-width: 46ch;
}
.oin-bandeau__vue { position: relative; }
.oin-bandeau__vue img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--oin-filet);
}
.oin-bandeau__vue::after {
  content: ""; position: absolute; inset: auto 0 -10px -10px; width: 42%; height: 6px;
  background: var(--oin-safran);
}
@media (max-width: 58rem) {
  .oin-bandeau__corps { grid-template-columns: minmax(0, 1fr); }
  .oin-bandeau__vue { order: -1; }
  .oin-bandeau__vue::after { display: none; }
}

/* Les fiches chiffrees sous le heros */
.oin-fiches {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--oin-filet);
}
.oin-fiche { padding: 0.95rem 1rem 0.2rem 0; border-right: 1px solid var(--oin-filet); }
.oin-fiche:last-child { border-right: 0; }
.oin-fiche__valeur {
  display: block; font-family: var(--oin-titre-police); font-stretch: condensed;
  font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1;
  color: var(--oin-encre);
}
.oin-fiche__mention {
  display: block; margin-top: 0.4rem; font-family: var(--oin-chiffre-police);
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--oin-encre-douce);
}
@media (max-width: 30rem) { .oin-fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.oin-bouton {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--oin-chiffre-police); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.11em; text-decoration: none;
  padding: 0.72rem 1.15rem; border: 1px solid var(--oin-teinte); color: var(--oin-teinte);
  background: transparent;
}
.oin-bouton::after { content: "\2192"; font-size: 0.95em; }
.oin-bouton:hover { background: var(--oin-teinte); color: var(--oin-papier-vif); }
.oin-bouton--plein {
  margin-top: 1.8rem; background: var(--oin-safran); border-color: var(--oin-safran);
  color: var(--oin-sur-aplat); font-size: 0.8rem; padding: 0.95rem 1.6rem;
}
.oin-bouton--plein:hover { background: var(--oin-safran-encre); border-color: var(--oin-safran-encre); color: #fff; }

/* =========================================================================
   RELEVE (une section de page)
   ========================================================================= */
.oin-releve { padding-block: var(--oin-avance); }
.oin-releve--creux { background: var(--oin-papier-creux); border-block: 1px solid var(--oin-filet); }
.oin-releve--sombre { background: var(--oin-acier); color: var(--oin-encre-inverse); }
.oin-releve--sombre h2, .oin-releve--sombre h3 { color: var(--oin-encre-inverse); }
.oin-releve--sombre a { color: var(--oin-sarcelle-vif); }
.oin-releve--sombre a:hover { color: var(--oin-safran); }
.oin-releve--sombre .oin-releve__note { color: var(--oin-encre-inverse-douce); }
.oin-releve--sombre .oin-releve__tete { border-bottom-color: var(--oin-acier-filet); }

.oin-releve__tete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.4rem 1.6rem; border-bottom: 2px solid var(--oin-encre);
  padding-bottom: 0.75rem; margin-bottom: clamp(1.4rem, 2.6vw, 2.3rem);
}
.oin-releve__tete h2 { flex: 1 1 20rem; }
.oin-releve__note {
  margin: 0; font-family: var(--oin-chiffre-police); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--oin-encre-douce);
}
.oin-releve__cote {
  display: block; font-family: var(--oin-chiffre-police); font-size: 0.7rem;
  letter-spacing: 0.14em; color: var(--oin-safran-encre); margin-bottom: 0.45rem;
}

/* =========================================================================
   POSTES : les trois rubriques du portail, en rangees a cote
   ========================================================================= */
.oin-postes { list-style: none; margin: 0; padding: 0; }
.oin-poste {
  display: grid; grid-template-columns: var(--oin-rail) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem); align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 1px solid var(--oin-filet);
}
.oin-poste:last-child { border-bottom: 1px solid var(--oin-filet); }
.oin-poste--policy  { --oin-teinte: var(--oin-voie-policy); }
.oin-poste--sites   { --oin-teinte: var(--oin-voie-sites); }
.oin-poste--sectors { --oin-teinte: var(--oin-voie-sectors); }

.oin-poste__reperage { padding-top: 0.4rem; }
.oin-poste__indice {
  display: block; font-family: var(--oin-titre-police); font-stretch: condensed;
  font-weight: 700; font-size: 2.4rem; line-height: 0.9; color: var(--oin-teinte);
}
.oin-poste__barre { display: block; width: 100%; height: 4px; background: var(--oin-teinte); margin-top: 0.6rem; }
.oin-poste__intitule { margin-bottom: 0.7rem; }
.oin-poste__intitule a { color: var(--oin-encre); text-decoration: none; }
.oin-poste__intitule a:hover { color: var(--oin-teinte); text-decoration: underline; }
.oin-poste__apercu { margin: 0 0 1.1rem; color: var(--oin-encre-douce); }
.oin-poste__liste { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.oin-poste__liste li { border-top: 1px dotted var(--oin-filet-fort); }
.oin-poste__liste li:last-child { border-bottom: 1px dotted var(--oin-filet-fort); }
.oin-poste__liste a {
  display: block; padding: 0.5rem 0; color: var(--oin-encre); text-decoration: none;
  font-family: var(--oin-titre-police); font-stretch: condensed; font-size: 1.05rem;
}
.oin-poste__liste a::before { content: "\203A\00a0"; color: var(--oin-teinte); }
.oin-poste__liste a:hover { color: var(--oin-teinte); text-decoration: underline; }
.oin-poste__vue { border: 1px solid var(--oin-filet); }
.oin-poste__vue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 62rem) {
  .oin-poste { grid-template-columns: var(--oin-rail) minmax(0, 1fr); }
  .oin-poste__vue { grid-column: 2; order: -1; }
  .oin-poste__vue img { aspect-ratio: 16 / 9; }
}
@media (max-width: 34rem) {
  .oin-poste { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .oin-poste__vue { grid-column: 1; }
  .oin-poste__reperage { display: flex; align-items: center; gap: 0.8rem; padding-top: 0; }
  .oin-poste__indice { font-size: 1.7rem; }
  .oin-poste__barre { width: 3rem; margin-top: 0; }
}

/* =========================================================================
   FEUILLETS : les cartes d'article, toujours avec leur vue
   ========================================================================= */
.oin-liasse {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--oin-gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.oin-liasse--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.oin-feuillet {
  display: flex; flex-direction: column;
  background: var(--oin-papier-vif); border: 1px solid var(--oin-filet);
  border-top: 3px solid var(--oin-teinte);
}
.oin-feuillet--policy  { --oin-teinte: var(--oin-voie-policy); }
.oin-feuillet--sites   { --oin-teinte: var(--oin-voie-sites); }
.oin-feuillet--sectors { --oin-teinte: var(--oin-voie-sectors); }
.oin-feuillet__vue { display: block; overflow: hidden; border-bottom: 1px solid var(--oin-filet); }
.oin-feuillet__vue img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform var(--oin-transition);
}
.oin-feuillet:hover .oin-feuillet__vue img { transform: scale(1.02); }
.oin-feuillet__mot { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.oin-feuillet__cote {
  font-family: var(--oin-chiffre-police); font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--oin-teinte); margin-bottom: 0.5rem;
  display: flex; gap: 0.6rem; align-items: baseline;
}
.oin-feuillet__adresse { color: var(--oin-encre-douce); text-transform: none; letter-spacing: 0.02em; }
.oin-feuillet__intitule { margin-bottom: 0.55rem; }
.oin-feuillet__intitule a { color: var(--oin-encre); text-decoration: none; }
.oin-feuillet__intitule a:hover { color: var(--oin-teinte); text-decoration: underline; }
.oin-feuillet__apercu {
  margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--oin-encre-douce);
}

/* Les adresses restaurees : meme feuillet, cote safran et adresse en clair */
.oin-feuillet--archive { --oin-teinte: var(--oin-safran-encre); }

/* =========================================================================
   GALERIE (bande de vues, sans texte invente)
   ========================================================================= */
.oin-galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.oin-galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* =========================================================================
   CARTOUCHE (bloc de titre des pages interieures)
   ========================================================================= */
.oin-piste {
  font-family: var(--oin-chiffre-police); font-size: 0.7rem; letter-spacing: 0.06em;
  padding-block: 1rem 0; color: var(--oin-encre-douce);
}
.oin-piste ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.oin-piste li + li::before { content: "/\00a0"; color: var(--oin-filet-fort); }
.oin-piste a { color: var(--oin-encre-douce); }
.oin-piste [aria-current="page"] { color: var(--oin-encre); }

.oin-cartouche { padding-block: clamp(1.5rem, 3vw, 2.8rem) 0; border-bottom: 1px solid var(--oin-filet); }
.oin-cartouche__corps {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem); align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.6rem);
}
.oin-cartouche__etiquette {
  display: inline-block; margin-bottom: 1rem; padding: 0.35rem 0.7rem;
  background: var(--oin-teinte); color: #fff; text-decoration: none;
  font-family: var(--oin-chiffre-police); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.oin-cartouche__etiquette:hover { background: var(--oin-encre); color: #fff; }
.oin-cartouche h1 { font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3.35rem); }
.oin-cartouche__chapo {
  margin: 1.1rem 0 0; font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  color: var(--oin-encre-douce); line-height: 1.58;
}
.oin-cartouche__mention {
  margin: 1.1rem 0 0; font-family: var(--oin-chiffre-police); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--oin-encre-douce);
}
.oin-cartouche__corps--seul { grid-template-columns: minmax(0, 74ch); }
.oin-cartouche__vue { border: 1px solid var(--oin-filet); border-top: 4px solid var(--oin-teinte); }
.oin-cartouche__vue img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 58rem) {
  .oin-cartouche__corps { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   CORPS D'ARTICLE
   ========================================================================= */
.oin-page { display: grid; grid-template-columns: minmax(0, 1fr); }
.oin-plan { display: block; }
.oin-plan ol { margin: 0; padding-left: 1.25rem; }
.oin-plan li { margin-bottom: 0.45rem; font-size: 0.92rem; line-height: 1.35; }
.oin-plan a { color: var(--oin-encre); text-decoration: none; }
.oin-plan a:hover { color: var(--oin-teinte); text-decoration: underline; }
.oin-plan ol li::marker { color: var(--oin-safran-encre); font-family: var(--oin-chiffre-police); font-size: 0.75rem; }

.oin-corps { max-width: var(--oin-mesure); margin-block: clamp(1.8rem, 3.4vw, 2.8rem); }
.oin-corps > p { margin: 0 0 1.25rem; }
.oin-corps > p:first-of-type::first-letter {
  float: left; font-family: var(--oin-titre-police); font-stretch: condensed;
  font-size: 3.6rem; line-height: 0.82; padding: 0.06em 0.12em 0 0;
  color: var(--oin-teinte);
}
.oin-corps h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.95rem);
  margin: clamp(2.1rem, 3.6vw, 3rem) 0 0.9rem;
  padding-top: 0.9rem; border-top: 2px solid var(--oin-encre);
}
.oin-corps h3 { margin: 1.9rem 0 0.7rem; color: var(--oin-teinte); }
.oin-corps ul, .oin-corps ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.oin-corps li { margin-bottom: 0.5rem; }
.oin-corps ul { list-style: none; padding-left: 0; }
.oin-corps ul > li { position: relative; padding-left: 1.4rem; }
.oin-corps ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.6rem; height: 2px; background: var(--oin-teinte);
}
.oin-corps blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 4px solid var(--oin-safran);
  font-family: var(--oin-titre-police); font-stretch: condensed;
  font-size: 1.35rem; line-height: 1.28; color: var(--oin-encre);
}
.oin-corps strong { font-weight: 700; }
.oin-corps a { color: var(--oin-sarcelle); }

.oin-defile { overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--oin-filet); }
.oin-defile table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.oin-defile th, .oin-defile td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--oin-filet); text-align: left; }
.oin-defile thead th {
  background: var(--oin-papier-creux); font-family: var(--oin-chiffre-police);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
}

.oin-encart {
  background: var(--oin-papier-vif); border: 1px solid var(--oin-filet);
  border-left: 5px solid var(--oin-teinte); padding: 1.3rem 1.5rem;
}
.oin-encart h2 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.oin-encart ul { list-style: none; margin: 0; padding: 0; }
.oin-encart li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; }
.oin-encart li:last-child { margin-bottom: 0; }
.oin-encart li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.7rem; height: 2px; background: var(--oin-safran);
}

/* =========================================================================
   RENVOIS ET PAGINATION DE RUBRIQUE
   ========================================================================= */
.oin-renvoi { padding-block: var(--oin-avance); background: var(--oin-papier-creux); border-top: 1px solid var(--oin-filet); }
.oin-retour { margin-block: 2rem 0; }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.oin-pied {
  background: var(--oin-acier-creux); color: var(--oin-encre-inverse);
  border-top: 3px solid var(--oin-safran); padding-block: clamp(2.2rem, 4vw, 3.4rem) 1.6rem;
  margin-top: 0;
}
.oin-pied__grille {
  display: grid; gap: clamp(1.6rem, 3vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.oin-pied__colonne h2 {
  font-size: 0.72rem; font-family: var(--oin-chiffre-police); font-stretch: normal;
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--oin-safran); margin-bottom: 0.9rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--oin-acier-filet);
}
.oin-pied__colonne ul { list-style: none; margin: 0; padding: 0; }
.oin-pied__colonne li { margin-bottom: 0.5rem; }
.oin-pied__colonne a { color: var(--oin-encre-inverse); text-decoration: none; font-size: 0.94rem; }
.oin-pied__colonne a:hover { color: var(--oin-safran); text-decoration: underline; }
.oin-pied__colonne p { margin: 0 0 0.8rem; font-size: 0.92rem; color: var(--oin-encre-inverse-douce); line-height: 1.6; }
.oin-pied__bas {
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--oin-acier-filet);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: space-between;
  font-family: var(--oin-chiffre-police); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--oin-encre-inverse-douce);
}
.oin-pied__bas a { color: var(--oin-encre-inverse-douce); }
.oin-pied__bas a:hover { color: var(--oin-safran); }

/* =========================================================================
   PAGE 404
   ========================================================================= */
.oin-erreur { padding-block: clamp(3rem, 8vw, 6rem); text-align: left; }
.oin-erreur__code {
  font-family: var(--oin-titre-police); font-stretch: condensed; font-weight: 700;
  font-size: clamp(4rem, 12vw, 9rem); line-height: 0.85; color: var(--oin-safran);
  display: block; margin-bottom: 1rem;
}

/* =========================================================================
   IMPRESSION
   ========================================================================= */
@media print {
  .oin-entete, .oin-pied, .oin-saut, .oin-renvoi, .oin-galerie { display: none; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   TEINTE COURANTE PAR PAGE (posee sur <body>)
   ========================================================================= */
.oin-page { --oin-teinte: var(--oin-sarcelle); }
.oin-page--policy  { --oin-teinte: var(--oin-voie-policy); }
.oin-page--sites   { --oin-teinte: var(--oin-voie-sites); }
.oin-page--sectors { --oin-teinte: var(--oin-voie-sectors); }
/* Les pages interieures se lisent : le registre se resserre pour que la colonne
   de texte reste entre 65 et 72 signes a cote du rail. */
.oin-page--interieur { --oin-largeur: 1080px; }

.oin-poste__corps { min-width: 0; }
.oin-mot-final { max-width: 62ch; margin: 1.7rem 0 0; }
.oin-encart--espace { margin-top: 2rem; }

/* =========================================================================
   MARBRE : la table de montage des pages interieures.
   Colonne de lecture a gauche, rail colle a droite. Sous 64rem le rail
   repasse AU DESSUS du texte : le sommaire n'a aucune valeur en bas de page.
   ========================================================================= */
.oin-marbre {
  display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: clamp(1.6rem, 3.4vw, 3.4rem); align-items: start;
}
.oin-marbre__texte { min-width: 0; }
.oin-marbre__texte .oin-corps { max-width: none; }
.oin-rail { position: sticky; top: 1.4rem; padding-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.oin-rail__titre {
  font-family: var(--oin-chiffre-police); font-stretch: normal; font-weight: 400;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--oin-safran-encre); margin: 1.6rem 0 0.7rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--oin-filet-fort);
}
.oin-rail > .oin-rail__titre:first-child, .oin-rail > .oin-plan:first-child .oin-rail__titre { margin-top: 0; }
.oin-rail__liste { list-style: none; margin: 0; padding: 0; }
.oin-rail__liste li { border-bottom: 1px dotted var(--oin-filet); }
.oin-rail__liste a {
  display: block; padding: 0.55rem 0; font-family: var(--oin-titre-police);
  font-stretch: condensed; font-size: 1rem; line-height: 1.2;
  color: var(--oin-encre); text-decoration: none;
}
.oin-rail__liste a::before { content: "\203A\00a0"; color: var(--oin-teinte); }
.oin-rail__liste a:hover { color: var(--oin-teinte); text-decoration: underline; }

@media (max-width: 64rem) {
  .oin-marbre { grid-template-columns: minmax(0, 1fr); }
  .oin-rail { position: static; order: -1; padding-top: clamp(1.4rem, 3vw, 2rem); }
  .oin-rail__liste { columns: 2; column-gap: 1.6rem; }
}
@media (max-width: 34rem) { .oin-rail__liste { columns: 1; } }