/* ==========================================================================
   Lumières d'Ailleurs / authorsimage.com
   Feuille unique. Vocabulaire de classes : l'optique et la visée (préfixe foc-).
   Aucune police distante, aucun script, aucune image distante.
   ========================================================================== */

:root{
  /* Palette : nuit bleu-ardoise, safran, jade, brique */
  --nuit:          #141826;
  --nuit-creuse:   #0f1320;
  --panneau:       #1d2233;
  --panneau-haut:  #232941;
  --filet:         #333a52;
  --filet-clair:   #47506e;
  --clair:         #edeaf3;
  --clair-doux:    #a8b0c6;
  --safran:        #e6a253;
  --safran-vif:    #f0b673;
  --jade:          #7ac8b2;
  --brique:        #d2694f;
  --sur-accent:    #141826;

  /* Typographie : Iowan Old Style (titres) + Corbel (texte) + DIN Alternate (repères) */
  --face-titre:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --face-texte:  Corbel, Seravek, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --face-repere: "DIN Alternate", "PT Sans Narrow", "Arial Narrow", "Liberation Sans Narrow", sans-serif;

  /* Mesures */
  --fut:      78rem;   /* largeur du fût (conteneur large) */
  --depoli:   40rem;   /* largeur de la colonne de lecture */
  --tirant:   clamp(2.6rem, 6vw, 5rem); /* respiration verticale entre sections */
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--nuit);
  color:var(--clair);
  font-family:var(--face-texte);
  font-size:1.02rem;
  line-height:1.68;
  text-rendering:optimizeLegibility;
}

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

a{ color:var(--safran); text-decoration:none; }
a:hover{ color:var(--safran-vif); text-decoration:underline; text-underline-offset:.18em; }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--jade); outline-offset:3px; border-radius:2px; }

h1,h2,h3,h4{ font-family:var(--face-titre); font-weight:600; line-height:1.16; margin:0; text-wrap:balance; }

p{ margin:0 0 1.05rem; }

/* --- utilitaires de structure ------------------------------------------- */

.foc-fut{ width:100%; max-width:var(--fut); margin:0 auto; padding:0 1.35rem; }
.foc-fut--depoli{ max-width:calc(var(--depoli) + 2.7rem); }

.foc-hors-vue{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.foc-evitement{
  position:absolute; left:-9999px; top:0;
  background:var(--safran); color:var(--sur-accent);
  padding:.6rem 1rem; font-family:var(--face-repere); z-index:50;
}
.foc-evitement:focus{ left:.6rem; top:.6rem; }

/* --- viseur (bandeau de tête) -------------------------------------------- */

.foc-viseur{
  background:var(--nuit-creuse);
  border-bottom:1px solid var(--filet);
  box-shadow:inset 0 3px 0 var(--safran);
}

.foc-viseur__rang{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  padding-top:1rem; padding-bottom:.85rem;
}

.foc-objectif{ display:flex; align-items:center; gap:.75rem; color:var(--clair); }
.foc-objectif:hover{ text-decoration:none; color:var(--clair); }
.foc-objectif__lentille{ flex:0 0 auto; }
.foc-objectif__nom{
  display:block; font-family:var(--face-titre);
  font-size:1.38rem; letter-spacing:.012em; line-height:1.1;
}
.foc-objectif__mention{
  display:block; font-family:var(--face-repere);
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--clair-doux); margin-top:.22rem;
}

.foc-bague{ display:flex; flex-wrap:wrap; gap:.15rem 1.15rem; margin-left:auto; }
.foc-bague__cran{
  font-family:var(--face-repere);
  font-size:.83rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clair-doux); padding:.3rem 0; border-bottom:2px solid transparent;
}
.foc-bague__cran:hover,
.foc-bague__cran[aria-current="page"]{
  color:var(--clair); border-bottom-color:var(--safran); text-decoration:none;
}

/* --- ouverture (héros pleine largeur) ------------------------------------ */

.foc-ouverture{
  position:relative;
  min-height:clamp(26rem, 62vh, 38rem);
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--filet);
}

.foc-ouverture__verre{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 52%;
}

/* Voile : couleur EN DUR, jamais une variable. */
.foc-ouverture__filtre{
  position:absolute; inset:0;
  background:linear-gradient(178deg,
    rgba(20,24,38,.80) 0%,
    rgba(20,24,38,.72) 38%,
    rgba(20,24,38,.88) 100%);
}

.foc-ouverture__visee{
  position:relative; z-index:1;
  width:100%; max-width:var(--fut); margin:0 auto;
  padding:clamp(3rem,9vw,5.6rem) 1.35rem clamp(2.4rem,6vw,3.6rem);
}

.foc-ouverture__mention{
  font-family:var(--face-repere);
  font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--safran); margin:0 0 1rem;
}

.foc-ouverture h1{
  font-size:clamp(2.15rem,5.2vw,3.55rem);
  color:#f7f4fb; margin:0 0 1.1rem; max-width:20ch;
}

.foc-ouverture__amorce{
  max-width:56ch; font-size:clamp(1.02rem,.97rem + .34vw,1.16rem);
  color:#dcd9e6; margin-bottom:1.1rem;
}

.foc-ouverture__acces{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; }

.foc-acces{
  display:inline-block;
  font-family:var(--face-repere);
  font-size:.88rem; letter-spacing:.11em; text-transform:uppercase;
  padding:.68rem 1.35rem;
  border:1px solid var(--filet-clair);
  color:var(--clair);
}
.foc-acces:hover{ border-color:var(--safran); color:var(--safran-vif); text-decoration:none; }
.foc-acces--plein{
  background:var(--safran); border-color:var(--safran); color:var(--sur-accent); font-weight:600;
}
.foc-acces--plein:hover{ background:var(--safran-vif); border-color:var(--safran-vif); color:var(--sur-accent); }

/* --- rythme des sections -------------------------------------------------- */

.foc-champ-visuel{ padding:var(--tirant) 0; }
.foc-champ-visuel--creuse{ background:var(--nuit-creuse); border-block:1px solid var(--filet); }

.foc-entete{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.4rem;
  margin-bottom:1.9rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--filet);
}
.foc-entete h2{ font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem); }
.foc-entete__note{ margin:0; color:var(--clair-doux); font-size:.98rem; max-width:58ch; }
.foc-entete__indice{
  font-family:var(--face-repere); font-size:.75rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--jade); margin:0 0 .35rem; flex-basis:100%;
}

/* --- diaphragme : la grille des rubriques -------------------------------- */

.foc-diaphragme{
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}

.foc-lamelle{
  display:flex; flex-direction:column;
  background:var(--panneau);
  border:1px solid var(--filet);
  border-top:3px solid transparent;
  transition:border-top-color .18s ease, background .18s ease;
}
.foc-lamelle:hover{ border-top-color:var(--safran); background:var(--panneau-haut); }

.foc-lamelle__cadre{ position:relative; }
.foc-lamelle__verre{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.foc-lamelle__scrim{
  position:absolute; inset:auto 0 0 0;
  padding:1.6rem .95rem .6rem;
  background:linear-gradient(180deg, rgba(15,19,32,0) 0%, rgba(15,19,32,.86) 72%, rgba(15,19,32,.95) 100%);
  font-family:var(--face-repere);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--safran);
}

.foc-lamelle__corps{ padding:.95rem 1.05rem 1.15rem; display:flex; flex-direction:column; flex:1; }
.foc-lamelle__corps h3{ font-size:1.19rem; margin:0 0 .5rem; }
.foc-lamelle__corps h3 a{ color:var(--clair); }
.foc-lamelle__corps h3 a:hover{ color:var(--safran-vif); text-decoration:none; }
.foc-lamelle__apercu{ color:var(--clair-doux); font-size:.94rem; margin:0 0 .85rem; }
.foc-lamelle__suite{
  margin-top:auto; font-family:var(--face-repere);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}

/* --- profondeur : le fil daté -------------------------------------------- */

.foc-profondeur{ display:flex; flex-direction:column; }

.foc-plan{
  display:grid; gap:1rem 1.4rem;
  grid-template-columns:9.5rem 1fr;
  align-items:start;
  padding:1.5rem 0;
  border-top:1px solid var(--filet);
}
.foc-plan:first-child{ border-top:0; padding-top:0; }

.foc-plan__vignettage{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--filet);
}

.foc-plan--pique{ grid-template-columns:1fr; gap:1.15rem; }
.foc-plan--pique .foc-plan__vignettage{ aspect-ratio:21/9; }
.foc-plan--pique h3{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem); }
.foc-plan--pique .foc-plan__amorce{ font-size:1.06rem; max-width:66ch; }

.foc-plan__reperage{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem;
  margin-bottom:.55rem;
}
.foc-declic{
  font-family:var(--face-repere);
  font-size:.79rem; letter-spacing:.15em; color:var(--clair-doux);
  font-variant-numeric:tabular-nums;
}
.foc-etiquette{
  font-family:var(--face-repere);
  font-size:.71rem; letter-spacing:.17em; text-transform:uppercase;
  padding:.18rem .55rem;
  border:1px solid var(--filet-clair); color:var(--jade);
}
.foc-etiquette:hover{ border-color:var(--jade); text-decoration:none; }

.foc-plan h3{ font-size:1.32rem; margin:0 0 .5rem; }
.foc-plan h3 a{ color:var(--clair); }
.foc-plan h3 a:hover{ color:var(--safran-vif); text-decoration:none; }
.foc-plan__amorce{ color:var(--clair-doux); margin:0; max-width:74ch; }

/* --- planche : bande de trois vues --------------------------------------- */

.foc-planche{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.foc-planche figure{ margin:0; }
.foc-planche img{ width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--filet); }
.foc-planche figcaption{
  margin-top:.6rem; font-size:.9rem; color:var(--clair-doux); line-height:1.55;
}
.foc-planche figcaption strong{ color:var(--clair); font-family:var(--face-titre); font-weight:600; }

/* --- bonnette : bloc de renvois éditoriaux -------------------------------- */

.foc-bonnette{
  background:var(--panneau);
  border-left:3px solid var(--jade);
  padding:1.35rem 1.45rem .55rem;
}
.foc-bonnette h2,
.foc-bonnette h3{ font-size:1.2rem; margin:0 0 .8rem; }
.foc-bonnette p{ color:var(--clair-doux); }
.foc-bonnette p:last-child{ margin-bottom:1rem; }

/* --- mire : fil de navigation -------------------------------------------- */

.foc-mire{
  font-family:var(--face-repere);
  font-size:.78rem; letter-spacing:.1em;
  color:var(--clair-doux);
  padding:1rem 0 0;
}
.foc-mire ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.3rem .55rem; margin:0; padding:0; }
.foc-mire li+li::before{ content:"›"; margin-right:.55rem; color:var(--filet-clair); }

/* --- cartouche : titre de page ------------------------------------------- */

.foc-cartouche{ padding:1.9rem 0 1.5rem; border-bottom:1px solid var(--filet); }
.foc-cartouche__surtitre{
  font-family:var(--face-repere); font-size:.75rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--safran); margin:0 0 .8rem;
}
.foc-cartouche h1{ font-size:clamp(1.95rem,1.5rem + 2.1vw,3.05rem); margin:0 0 .9rem; max-width:24ch; }
.foc-cartouche__chapo{
  font-size:clamp(1.04rem,1rem + .35vw,1.18rem);
  color:#d6d3e2; max-width:62ch; margin:0 0 1rem;
}
.foc-cartouche__signes{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; }

/* --- planche pleine largeur d'un article --------------------------------- */

.foc-planche-pleine{ margin:0; }
.foc-planche-pleine img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.foc-planche-pleine figcaption{
  max-width:calc(var(--depoli) + 2.7rem); margin:.7rem auto 0; padding:0 1.35rem;
  font-size:.89rem; color:var(--clair-doux); font-style:italic;
}

/* --- cadrage : colonne de lecture ---------------------------------------- */

.foc-cadrage{ padding:2rem 0 .5rem; }
.foc-cadrage > *{ max-width:var(--depoli); margin-left:auto; margin-right:auto; }
.foc-cadrage h2{
  font-size:clamp(1.35rem,1.2rem + .8vw,1.75rem);
  margin:2.3rem auto .85rem; padding-top:.6rem;
  border-top:1px solid var(--filet);
}
.foc-cadrage h3{ font-size:1.16rem; margin:1.7rem auto .6rem; color:var(--safran-vif); }
.foc-cadrage ul,
.foc-cadrage ol{ padding-left:1.15rem; margin:0 auto 1.15rem; }
.foc-cadrage li{ margin-bottom:.45rem; }
.foc-cadrage li::marker{ color:var(--safran); }

.foc-lettrine::first-letter{
  font-family:var(--face-titre); float:left;
  font-size:3.5rem; line-height:.86; padding:.1rem .5rem .1rem 0;
  color:var(--safran);
}

/* --- repère : encadré ----------------------------------------------------- */

.foc-repere{
  background:var(--panneau);
  border:1px solid var(--filet);
  border-top:3px solid var(--safran);
  padding:1.15rem 1.3rem .4rem;
  margin:1.9rem auto 2rem;
}
.foc-repere__titre{
  font-family:var(--face-repere); font-size:.76rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--safran); margin:0 0 .7rem;
}
.foc-repere p,
.foc-repere li{ color:var(--clair-doux); font-size:.96rem; }

/* --- diptyque : deux vues côte à côte ------------------------------------- */

.foc-diptyque{
  max-width:var(--fut); display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin:2.1rem auto;
}
.foc-diptyque figure{ margin:0; }
.foc-diptyque img{ width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--filet); }
.foc-diptyque figcaption{ margin-top:.55rem; font-size:.86rem; color:var(--clair-doux); }

/* --- fiche : tableau ------------------------------------------------------ */

.foc-defile{ overflow-x:auto; margin:1.6rem auto 2rem; max-width:var(--depoli); }
.foc-fiche{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:30rem; }
.foc-fiche caption{
  text-align:left; font-family:var(--face-repere); font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--jade);
  padding-bottom:.6rem;
}
.foc-fiche th,
.foc-fiche td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--filet); vertical-align:top; }
.foc-fiche thead th{ color:var(--clair); border-bottom:1px solid var(--filet-clair); }
.foc-fiche tbody th{ color:var(--safran); font-weight:600; white-space:nowrap; }
.foc-fiche td{ color:var(--clair-doux); }

/* --- monture : pied de page ---------------------------------------------- */

.foc-monture{
  background:var(--nuit-creuse);
  border-top:1px solid var(--filet);
  padding:var(--tirant) 0 1.6rem;
  margin-top:var(--tirant);
}
.foc-monture__grille{
  display:grid; gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.foc-monture h2{
  font-family:var(--face-repere); font-size:.76rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--safran); margin:0 0 .85rem;
}
.foc-monture p{ color:var(--clair-doux); font-size:.94rem; }
.foc-monture ul{ list-style:none; margin:0; padding:0; }
.foc-monture li{ margin-bottom:.42rem; font-size:.94rem; }
.foc-monture li a{ color:var(--clair-doux); }
.foc-monture li a:hover{ color:var(--safran-vif); }
.foc-monture__bas{
  margin-top:1.9rem; padding-top:1.1rem; border-top:1px solid var(--filet);
  font-family:var(--face-repere); font-size:.78rem; letter-spacing:.09em;
  color:var(--clair-doux);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between;
}

/* --- adaptations ---------------------------------------------------------- */

@media (max-width:52rem){
  .foc-viseur__rang{ flex-direction:column; align-items:flex-start; }
  .foc-bague{ margin-left:0; }
  .foc-plan{ grid-template-columns:1fr; }
  .foc-plan__vignettage{ aspect-ratio:16/9; }
  .foc-planche-pleine img{ aspect-ratio:4/3; }
}

@media (max-width:34rem){
  body{ font-size:1rem; }
  .foc-diaphragme{ grid-template-columns:1fr; }
  .foc-ouverture{ min-height:23rem; }
  .foc-lettrine::first-letter{ font-size:2.9rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}

@media print{
  .foc-viseur,.foc-bague,.foc-monture,.foc-bonnette{ display:none; }
  body{ background:#fff; color:#000; }
}