/* Erzählstimme Magazin · peau « oh- » · Banc d'écoute
   Poste d'écoute domestique : papier crème, laiton pour repères, canard pour signal.
   Règle négative : le laiton marque un repère ou un numéro, jamais un fond entier.
   Polices auto-hébergées : Vollkorn 700 (titres), Core Sans A 400 (texte), Raleway 700 (régie). */

@font-face{font-family:'Vollkorn';src:url('/vollkorn-v13-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Core Sans A';src:url('/core-sans-a-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/raleway-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --papier:#F2EEE6;
  --papier-creux:#E6E0D4;
  --papier-vif:#FBF8F1;
  --encre:#1E1B18;
  --encre-douce:#4E463C;
  --filet:#C9C0B2;
  --laiton:#8A5A12;
  --laiton-clair:#B07D2A;
  --canard:#1F5653;
  --argile:#7A3628;
  --indigo:#26374F;
  --ombre-douce:0 6px 22px rgba(30,27,24,.10);
  --ombre-carte:0 10px 28px rgba(30,27,24,.14);
  --ombre-forte:0 16px 42px rgba(30,27,24,.20);
  --ombre-creux:inset 0 2px 6px rgba(30,27,24,.08);
  --ombre-accent:0 8px 24px rgba(138,90,18,.22);
  --titre:'Vollkorn','Iowan Old Style',Georgia,serif;
  --texte:'Core Sans A','Segoe UI',Verdana,sans-serif;
  --regie:'Raleway',Consolas,'DejaVu Sans Mono',monospace;
  --large:76rem;
  --mesure:68ch;
  --r-l:18px;
  --r-m:14px;
  --r-s:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--papier);
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(201,192,178,.5) 27px 28px);
  color:var(--encre);
  font-family:var(--texte);
  font-size:clamp(1rem,.95rem+.25vw,1.1rem);
  line-height:1.65;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--laiton)}
a:hover{color:var(--argile)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--canard);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 0 rgba(0,0,0,.08);min-width:0}
h1{font-size:clamp(1.9rem,1.3rem+2.4vw,3rem);margin:.4rem 0 1rem}
h2{font-size:clamp(1.35rem,1.1rem+1vw,1.9rem);margin:0 0 .6rem}
h3{font-size:clamp(1.1rem,1rem+.4vw,1.3rem);margin:0}
p{margin:0 0 .9rem;max-width:var(--mesure)}
time{font-family:var(--regie);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
hr{border:0;border-top:1px solid var(--filet);margin:2rem 0}
table{width:100%;border-collapse:collapse}
th,td{padding:.5rem .7rem;border-bottom:1px solid var(--filet);text-align:left}
th{font-family:var(--regie);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.oh-tableau-defile{overflow-x:auto;max-width:100%;border-radius:var(--r-m);box-shadow:var(--ombre-creux)}

/* -------- Grille & conteneurs -------- */
.oh-large{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem);min-width:0}
.oh-large > *{min-width:0}

/* -------- Bandeau supérieur -------- */
.oh-bandeau-haut{height:6px;background:linear-gradient(90deg,var(--canard) 0 34%,var(--laiton-clair) 34% 67%,var(--argile) 67% 100%)}

/* -------- Fronton -------- */
.oh-fronton{background:var(--papier-vif);border-bottom:1px solid var(--filet);box-shadow:var(--ombre-douce);position:relative;z-index:5}
.oh-fronton__interieur{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-block:1.1rem}
.oh-marque{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--encre);font-family:var(--titre);font-size:1.35rem;font-weight:700}
.oh-marque__dessin{width:44px;height:44px;color:var(--laiton-clair);flex:none}
.oh-marque__nom{white-space:normal}
.oh-devise{margin:0;font-family:var(--regie);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);max-width:none}
.oh-parcours ul{display:flex;flex-wrap:wrap;gap:.4rem .5rem;list-style:none;margin:0;padding:0}
.oh-parcours__lien{display:inline-block;padding:.4rem .9rem;border-radius:999px;background:var(--papier-creux);color:var(--encre);text-decoration:none;font-family:var(--regie);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--filet)}
.oh-parcours__lien:hover{background:var(--canard);color:#fff;border-color:var(--canard)}
.oh-parcours__lien[aria-current]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* -------- Lien d'évitement -------- */
.oh-raccourci{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--papier);padding:.7rem 1rem;border-radius:0 0 var(--r-m) 0;z-index:99}
.oh-raccourci:focus{left:0}

/* -------- Marqueurs signature -------- */
.oh-debit{position:relative;height:2px;background:var(--filet);margin:.55rem 0 .9rem;max-width:var(--mesure)}
.oh-debit::before,.oh-debit::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--encre-douce)}
.oh-debit::before{left:0}
.oh-debit::after{right:0}
.oh-debit__curseur{position:absolute;top:-6px;left:38%;width:10px;height:14px;background:var(--laiton-clair);border-radius:3px;box-shadow:var(--ombre-accent)}

.oh-repere{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:0;border:2px solid var(--laiton-clair);border-radius:var(--r-m);font-family:var(--regie);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--encre);overflow:hidden;max-width:var(--mesure);box-shadow:var(--ombre-douce);margin:.6rem 0}
.oh-repere__cellule{display:flex;flex-direction:column;padding:.35rem .65rem;border-right:1px solid var(--laiton-clair);background:var(--papier-vif)}
.oh-repere__cellule:last-child{border-right:0}
.oh-repere__etiquette{font-size:.6rem;color:var(--encre-douce);letter-spacing:.1em}
.oh-repere__cellule--geprueft{background:var(--canard);color:#fff}
.oh-repere__cellule--geprueft .oh-repere__etiquette{color:rgba(255,255,255,.85)}
.oh-repere__cellule--vide{background:repeating-linear-gradient(135deg,var(--laiton-clair) 0 2px,transparent 2px 7px);color:var(--encre)}

.oh-note,.oh-etiquette{font-family:var(--regie);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.oh-note{color:var(--laiton);border-bottom:2px solid var(--laiton);padding-bottom:1px;text-decoration:none}
.oh-etiquette{display:inline-block;padding:.25rem .7rem;border-radius:999px;background:var(--canard);color:#fff;text-decoration:none;border:1px solid var(--canard)}
.oh-etiquette:hover{background:var(--argile);border-color:var(--argile);color:#fff}
.oh-cote{display:inline-block;font-family:var(--regie);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin-right:.5rem;font-weight:700}
.oh-sep{color:var(--filet);padding:0 .4rem}

/* -------- Accueil : ouverture -------- */
.oh-ouverture{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:clamp(1.6rem,4vw,3rem) clamp(1.2rem,3vw,2rem);min-width:0}
.oh-ouverture__texte{padding:clamp(1.2rem,3vw,2rem);border-radius:var(--r-l);background:var(--papier-vif);box-shadow:var(--ombre-carte);min-width:0}
.oh-ouverture__amorce{font-size:clamp(1.05rem,1rem+.4vw,1.25rem);color:var(--encre-douce)}
.oh-ouverture__dateline{font-family:var(--regie);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);margin:0}
.oh-surtitre{font-family:var(--regie);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin:0}

.oh-ouverture__vedette{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;border-radius:var(--r-l);overflow:hidden;background:var(--encre);color:var(--papier);box-shadow:var(--ombre-forte);min-width:0}
.oh-vedette__image{position:relative;margin:0;min-width:0}
.oh-vedette__image img{width:100%;height:100%;min-height:18rem;object-fit:cover;aspect-ratio:4/3}
.oh-vedette__legende{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .8rem;background:linear-gradient(180deg,rgba(20,16,10,0) 0%,rgba(20,16,10,.82) 100%);color:#F6F1E7;font-family:var(--regie);font-size:.72rem;letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.6);margin:0}
.oh-vedette__corps{padding:clamp(1.2rem,3vw,2rem);display:flex;flex-direction:column;justify-content:center;background:var(--indigo);color:#F4F0E8;min-width:0}
.oh-vedette__corps .oh-cote{color:#EECB84}
.oh-vedette__corps .oh-etiquette{background:var(--laiton-clair);border-color:var(--laiton-clair);color:#1E1B18}
.oh-vedette__corps .oh-etiquette:hover{background:var(--papier-vif);border-color:var(--papier-vif);color:var(--indigo)}
.oh-vedette__titre{font-size:clamp(1.5rem,1.2rem+1.4vw,2.35rem);margin:.5rem 0 .8rem;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.oh-vedette__titre a{color:#FFF7E8;text-decoration:none}
.oh-vedette__titre a:hover{color:#F7DDB0;text-decoration:underline}
.oh-vedette__usage{color:#DDD6C7;margin-bottom:1rem}
.oh-vedette__lien{margin:1rem 0 0}
.oh-bouton{display:inline-block;padding:.7rem 1.3rem;border-radius:999px;background:var(--laiton-clair);color:#1E1B18;text-decoration:none;font-family:var(--regie);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--ombre-accent);font-weight:700}
.oh-bouton:hover{background:var(--papier-vif);color:var(--indigo)}

/* -------- Étages -------- */
.oh-etage{padding-block:clamp(1.6rem,4vw,2.6rem);min-width:0}
.oh-etage--creux{background:var(--papier-creux);border-radius:var(--r-l);margin-block:1rem;box-shadow:var(--ombre-creux)}
.oh-etage--creux.oh-large{padding-inline:clamp(1rem,4vw,2.5rem)}
.oh-etage__tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;justify-content:space-between;margin-bottom:1.2rem}
.oh-etage__phrase{margin:0;color:var(--encre-douce);max-width:var(--mesure)}
.oh-etage__decompte{font-family:var(--regie);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton)}

/* -------- Rangée de vignettes -------- */
.oh-rangee{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2vw,1.5rem);min-width:0}
.oh-entree{display:grid;gap:.7rem;background:var(--papier-vif);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre-carte);transition:transform .18s ease}
.oh-entree:hover{transform:translateY(-3px)}
.oh-entree--tuile{grid-template-rows:auto 1fr}
.oh-entree--ligne{grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);align-items:start}
.oh-entree--ligne .oh-entree__vignette img{aspect-ratio:4/3}
.oh-entree__vignette{margin:0;min-width:0}
.oh-entree__vignette img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.08)}
.oh-entree--ligne .oh-entree__vignette{margin:.9rem 0 .9rem .9rem}
.oh-entree__texte{padding:.9rem 1.1rem 1.2rem;min-width:0}
.oh-entree--ligne .oh-entree__texte{padding:1rem 1.2rem 1.2rem .4rem}
.oh-entree__intitule a{color:var(--encre);text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.05)}
.oh-entree__intitule a:hover{color:var(--laiton);text-decoration:underline}
.oh-entree__cote{margin:0 0 .4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.oh-entree__abrege{color:var(--encre-douce);margin:0;max-width:var(--mesure)}
.oh-entree__bas{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem;margin:.8rem 0 0;font-family:var(--regie);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}

/* -------- Stations (rubriques) -------- */
.oh-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2vw,1.6rem);min-width:0}
.oh-station{position:relative;padding:1.6rem 1.2rem 1.3rem;border-radius:var(--r-l);background:var(--papier-vif);box-shadow:var(--ombre-carte);min-width:0}
.oh-station--1{border-top:5px solid var(--canard)}
.oh-station--2{border-top:5px solid var(--laiton-clair)}
.oh-station--3{border-top:5px solid var(--argile)}
.oh-station__numero{position:absolute;top:-.9rem;right:1rem;margin:0;padding:.15rem .6rem;border-radius:var(--r-s);background:var(--laiton-clair);color:#1E1B18;font-family:var(--regie);font-size:.72rem;letter-spacing:.16em;box-shadow:var(--ombre-accent)}
.oh-station__titre a{color:var(--encre);text-decoration:none}
.oh-station__titre a:hover{color:var(--laiton);text-decoration:underline}
.oh-station__intro{color:var(--encre-douce);margin:.4rem 0 .9rem}
.oh-station__liste{list-style:none;margin:0 0 1rem;padding:0;font-size:.95rem}
.oh-station__liste li{padding:.35rem 0;border-bottom:1px solid var(--filet);display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}
.oh-station__liste a{color:var(--encre);text-decoration:none}
.oh-station__liste a:hover{color:var(--laiton);text-decoration:underline}
.oh-station__renvoi{margin:0}

/* -------- Liste dense -------- */
.oh-liste{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;min-width:0}
.oh-liste__item{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1rem;align-items:center;padding:.7rem;border-radius:var(--r-m);background:var(--papier-vif);box-shadow:var(--ombre-douce);min-width:0}
.oh-liste__item:hover{box-shadow:var(--ombre-carte)}
.oh-liste__vignette{margin:0;min-width:0}
.oh-liste__vignette img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-s);filter:sepia(.08)}
.oh-liste__texte{min-width:0}
.oh-liste__date{margin:0;font-family:var(--regie);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton)}
.oh-liste__titre{margin:.2rem 0 .3rem}
.oh-liste__titre a{color:var(--encre);text-decoration:none}
.oh-liste__titre a:hover{color:var(--laiton);text-decoration:underline}
.oh-liste__abrege{margin:0;color:var(--encre-douce);font-size:.92rem}

/* -------- Réseau -------- */
.oh-reseau{padding-block:2rem;min-width:0}
.oh-reseau__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.oh-reseau__item{padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--papier-creux);border-left:4px solid var(--canard);box-shadow:var(--ombre-douce);margin:0}
.oh-reseau__item a{color:var(--encre);text-decoration:underline}
.oh-reseau__item a:hover{color:var(--laiton)}

/* -------- Rubrique -------- */
.oh-jalons{margin-top:1.4rem}
.oh-jalons ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .7rem;font-family:var(--regie);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce)}
.oh-jalons li+li::before{content:"›";margin-right:.5rem;color:var(--filet)}
.oh-jalons a{color:var(--encre-douce);text-decoration:none}
.oh-jalons a:hover{color:var(--laiton);text-decoration:underline}
.oh-ouverture--rubrique{padding-block:1.4rem 1rem}
.oh-onglets{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 0 1rem;margin-top:.5rem}
.oh-onglet{padding:.45rem 1rem;border-radius:999px;background:var(--papier-creux);color:var(--encre);text-decoration:none;font-family:var(--regie);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--filet);box-shadow:var(--ombre-douce)}
.oh-onglet:hover{background:var(--canard);color:#fff;border-color:var(--canard)}
.oh-onglet--courant{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.oh-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:clamp(1rem,2vw,1.4rem);min-width:0}

/* -------- Fiche article -------- */
.oh-fiche{padding-block:1.5rem 2.5rem;min-width:0}
.oh-entete{padding-block:1rem}
.oh-entete h1{max-width:22ch;text-shadow:0 2px 4px rgba(0,0,0,.08)}
.oh-chapeau{font-size:clamp(1.05rem,1rem+.4vw,1.25rem);color:var(--encre-douce);max-width:var(--mesure)}
.oh-entete__bas{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;justify-content:space-between;margin:.6rem 0}
.oh-datation{margin:0;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;font-family:var(--regie);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce)}
.oh-planche{margin:1.4rem auto;border-radius:var(--r-l);overflow:hidden;background:var(--papier-vif);box-shadow:var(--ombre-forte)}
.oh-planche img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:sepia(.08)}
.oh-planche figcaption{padding:.8rem 1.1rem;font-family:var(--regie);font-size:.74rem;letter-spacing:.05em;color:var(--encre-douce);background:var(--papier-creux);margin:0}
.oh-duo{display:grid;grid-template-columns:minmax(0,var(--mesure)) minmax(0,20rem);gap:clamp(1.2rem,3vw,2.5rem);align-items:start;min-width:0}
.oh-corps{max-width:var(--mesure);min-width:0}
.oh-corps h2{margin-top:2rem}
.oh-corps h3{margin-top:1.6rem}
.oh-corps img{border-radius:var(--r-m);box-shadow:var(--ombre-carte);margin:1.2rem 0}
.oh-corps blockquote{margin:1.6rem 0;padding:1rem 1.2rem;border-left:4px solid var(--laiton-clair);background:var(--papier-vif);border-radius:0 var(--r-m) var(--r-m) 0;font-family:var(--titre);font-size:1.15rem;box-shadow:var(--ombre-douce)}
.oh-corps ul,.oh-corps ol{padding-left:1.2rem}
.oh-corps code{font-family:var(--regie);font-size:.9em;background:var(--papier-creux);padding:.1rem .35rem;border-radius:6px}
.oh-marge{padding:1.1rem;border-radius:var(--r-m);background:var(--papier-creux);box-shadow:var(--ombre-creux);min-width:0}
.oh-marge__titre{font-family:var(--regie);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton);margin:0 0 .5rem;text-shadow:none}
.oh-marge__sommaire,.oh-marge__sources{list-style:none;margin:0 0 1rem;padding:0;font-family:var(--regie);font-size:.78rem;letter-spacing:.04em}
.oh-marge__sommaire li,.oh-marge__sources li{padding:.3rem 0;border-bottom:1px solid var(--filet)}
.oh-marge a{color:var(--encre);text-decoration:none}
.oh-marge a:hover{color:var(--laiton);text-decoration:underline}
.oh-corps--service{max-width:var(--mesure)}

/* -------- Pied -------- */
.oh-pied{background:var(--indigo);color:#EDE7DA;margin-top:2rem;padding-block:2rem;box-shadow:var(--ombre-forte)}
.oh-pied__colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem;min-width:0}
.oh-pied__colonne h2{font-size:1.1rem;color:#FFF7E8;text-shadow:none;margin-bottom:.5rem}
.oh-pied__colonne p,.oh-pied__colonne li{color:#D6CFC0;max-width:34ch}
.oh-pied__colonne ul{list-style:none;margin:0;padding:0}
.oh-pied__colonne li{padding:.2rem 0}
.oh-pied a{color:#EECB84;text-decoration:none}
.oh-pied a:hover{color:#FFF7E8;text-decoration:underline}
.oh-pied__note{font-size:.92rem;font-style:italic}
.oh-pied__ligne{margin-top:1.6rem;padding-top:1rem;border-top:1px solid rgba(237,231,218,.25);font-family:var(--regie);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#BEB6A6}

/* -------- Responsive -------- */
@media (max-width:62rem){
  .oh-ouverture__vedette{grid-template-columns:minmax(0,1fr)}
  .oh-vedette__image img{min-height:14rem;aspect-ratio:16/9}
  .oh-duo{grid-template-columns:minmax(0,1fr)}
  .oh-marge{order:2}
}
@media (max-width:46rem){
  .oh-fronton__interieur{flex-direction:column;align-items:flex-start}
  .oh-entree--ligne{grid-template-columns:minmax(6rem,8rem) minmax(0,1fr)}
  .oh-liste__item{grid-template-columns:5rem minmax(0,1fr)}
  .oh-etage__tete{flex-direction:column;align-items:flex-start}
  .oh-vedette__corps{padding:1.1rem}
}
@media (max-width:26rem){
  .oh-entree--ligne{grid-template-columns:minmax(0,1fr)}
  .oh-entree--ligne .oh-entree__vignette{margin:.9rem .9rem 0}
  .oh-liste__item{grid-template-columns:minmax(0,1fr)}
  .oh-liste__vignette img{aspect-ratio:16/9}
  .oh-repere{grid-template-columns:repeat(3,minmax(0,1fr));font-size:.62rem}
}
@media (min-width:120rem){
  :root{--large:82rem}
  .oh-ouverture__vedette{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}