/* Fabien BANGOURA — feuille de style éditoriale
   Palette : encre / papier / ocre. Une seule couleur d'accent. */

:root{
  --encre:#0B2C5A;
  --encre-douce:#2A4A72;
  --papier:#F2F8FC;
  --papier-creux:#DCEBF7;
  --accent:#E2704A;
  --filet:rgba(18,16,14,.14);
  --serif:"Spectral","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --serif-titre:"Playfair Display","Didot","Bodoni MT",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --marge:clamp(20px,5vw,90px);
  --largeur:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--serif);font-size:clamp(17px,1.05vw,19px);line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}

.entete{
  position:sticky;top:0;z-index:40;background:rgba(247,244,238,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--filet);
}
.entete-inner{
  max-width:var(--largeur);margin:0 auto;padding:0 var(--marge);
  display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:24px;
}
.marque{font-family:var(--serif-titre);font-size:20px;letter-spacing:.16em;text-transform:uppercase}
.marque span{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.28em;color:var(--encre-douce);margin-top:2px}
nav ul{display:flex;gap:clamp(14px,1.8vw,30px);list-style:none;margin:0;padding:0}
nav a{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
nav a[aria-current="page"]{color:var(--accent)}
.burger{display:none;background:none;border:0;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:10px 0}

/* ——— héros ——— */
.heros{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 74px);align-items:stretch}
.heros-texte{
  padding:clamp(40px,6vw,90px) var(--marge);display:flex;flex-direction:column;justify-content:center;gap:26px;
}
.surtitre{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
h1.nom{
  font-family:var(--serif-titre);font-weight:400;font-size:clamp(46px,7.4vw,104px);line-height:.94;
  margin:0;letter-spacing:-.015em;
}
.role{font-family:var(--sans);font-size:clamp(12px,1.2vw,14px);letter-spacing:.06em;color:var(--encre-douce);max-width:38ch}
.accroche{font-size:clamp(21px,2.1vw,29px);font-style:italic;margin:0;max-width:24ch;line-height:1.35}
.heros-photo{position:relative;background:var(--papier-creux);overflow:hidden;min-height:340px}
.heros-photo img{width:100%;height:100%;object-fit:cover}
.heros-photo .vide{
  position:absolute;inset:clamp(18px,3vw,40px);border:1px dashed var(--filet);
  display:grid;place-items:center;text-align:center;font-family:var(--sans);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);padding:20px;
}

/* ——— sections ——— */
section{padding:clamp(56px,7vw,110px) var(--marge)}
.contenu{max-width:var(--largeur);margin:0 auto}
.etroit{max-width:760px;margin:0 auto}
h2{font-family:var(--serif-titre);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.12;margin:0 0 28px;letter-spacing:-.01em}
h3{font-family:var(--serif-titre);font-weight:400;font-size:clamp(22px,2.2vw,28px);margin:0 0 12px;line-height:1.25}
.filet{height:1px;background:var(--filet);border:0;margin:0}
.grand-texte{font-size:clamp(19px,1.5vw,22px);line-height:1.7}
.texte p{margin:0 0 1.1em}
.texte p:last-child{margin-bottom:0}

/* ——— citation ——— */
.citation{
  background:var(--papier-creux);text-align:center;
}
.citation blockquote{
  margin:0 auto;max-width:22ch;font-family:var(--serif-titre);font-style:italic;
  font-size:clamp(24px,3.4vw,42px);line-height:1.3;letter-spacing:-.01em;
}
.citation .auteur{margin-top:26px;font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--encre-douce)}

/* ——— livre mis en avant ——— */
.livre-vedette{display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:clamp(26px,4vw,64px);align-items:center}
.couverture{
  aspect-ratio:2/3;background:var(--encre);color:var(--papier);position:relative;
  display:flex;flex-direction:column;justify-content:space-between;padding:22px;
  box-shadow:0 22px 44px -22px rgba(18,16,14,.55);
}
.couverture .titre-couv{font-family:var(--serif-titre);font-size:clamp(20px,2.4vw,30px);line-height:1.1}
.couverture .auteur-couv{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.couverture::after{content:"";position:absolute;inset:10px;border:1px solid rgba(247,244,238,.25);pointer-events:none}

/* ——— boutons ——— */
.bouton{
  display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--encre);padding:15px 28px;transition:background .2s,color .2s;
}
.bouton:hover{background:var(--encre);color:var(--papier)}
.bouton-accent{border-color:var(--accent);color:var(--accent)}
.bouton-accent:hover{background:var(--accent);color:var(--papier)}

/* ——— grilles ——— */
.grille-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(22px,3vw,44px)}
.grille-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,4vw,60px)}
.carte{border-top:1px solid var(--encre);padding-top:18px}
.carte .num{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:var(--accent)}
.carte p{color:var(--encre-douce);margin:.4em 0 0}

/* ——— pages intérieures ——— */
.entete-page{padding:clamp(48px,6vw,86px) var(--marge) clamp(24px,3vw,40px);border-bottom:1px solid var(--filet)}
.entete-page .contenu{max-width:var(--largeur);margin:0 auto}
.entete-page h1{font-family:var(--serif-titre);font-weight:400;font-size:clamp(38px,5.6vw,76px);line-height:.98;margin:10px 0 0;letter-spacing:-.02em}
.chapo{font-size:clamp(18px,1.6vw,22px);color:var(--encre-douce);max-width:62ch;margin:22px 0 0}

/* ——— listes éditoriales ——— */
.entree{display:grid;grid-template-columns:130px 1fr;gap:clamp(14px,3vw,40px);padding:28px 0;border-bottom:1px solid var(--filet)}
.entree .date{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce);padding-top:6px}
.entree h3{margin:0 0 6px}
.entree p{margin:0;color:var(--encre-douce)}
.etiquette{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--filet);padding:4px 10px;margin:0 8px 8px 0;color:var(--encre-douce)}

/* ——— médias ——— */
.vignette{aspect-ratio:16/10;background:var(--papier-creux);border:1px solid var(--filet);display:grid;place-items:center;font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--encre-douce);text-transform:uppercase}

/* ——— formulaire ——— */
form{display:grid;gap:20px;max-width:640px}
label{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--encre-douce)}
input,select,textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--encre);
  font-family:var(--serif);font-size:17px;padding:10px 0;color:var(--encre);border-radius:0;
}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--accent)}
textarea{min-height:130px;resize:vertical}
.note{font-size:14px;color:var(--encre-douce)}

/* ——— pied de page ——— */
footer{background:var(--encre);color:var(--papier);padding:clamp(46px,6vw,80px) var(--marge)}
footer .contenu{max-width:var(--largeur);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}
footer h4{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;color:rgba(247,244,238,.6)}
footer a{color:rgba(247,244,238,.85)}
footer a:hover{color:#fff}
footer .bas{margin-top:44px;padding-top:22px;border-top:1px solid rgba(247,244,238,.16);font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.5)}

/* ——— citation pleine page ——— */
.citations-liste{display:grid;gap:clamp(38px,5vw,70px)}
.citations-liste blockquote{
  margin:0;font-family:var(--serif-titre);font-size:clamp(21px,2.4vw,31px);line-height:1.35;
  padding-left:clamp(18px,3vw,34px);border-left:2px solid var(--accent);
}
.citations-liste .n{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--accent);display:block;margin-bottom:12px}

/* ——— responsive ——— */
@media (max-width:900px){
  .heros{grid-template-columns:1fr}
  .heros-photo{min-height:62vh;order:-1}
  .livre-vedette{grid-template-columns:1fr}
  .couverture{max-width:260px}
  .entree{grid-template-columns:1fr}
  .entree .date{padding-top:0}
  nav{display:none}
  nav.ouvert{display:block;position:absolute;top:74px;left:0;right:0;background:var(--papier);border-bottom:1px solid var(--filet);padding:20px var(--marge)}
  nav.ouvert ul{flex-direction:column;gap:16px}
  .burger{display:block}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ——— impression ——— */
@media print{header,footer{display:none}body{background:#fff}}

/* ——— portraits et galerie ——— */
.portrait-auteur{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;display:block}
.photo-galerie{width:100%;max-width:340px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;display:block}

/* ——— filtres de la page écrits ——— */
.filtre{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--filet);background:transparent;padding:6px 12px;color:var(--encre-douce);cursor:pointer;transition:all .18s ease}
.filtre:hover{border-color:var(--accent);color:var(--accent)}
.filtre.actif{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.entree[hidden]{display:none}

/* ——— galerie ——— */
.galerie{columns:3 260px;column-gap:clamp(14px,2vw,26px)}
.vignette{margin:0 0 clamp(14px,2vw,26px);break-inside:avoid;overflow:hidden;background:var(--papier-creux)}
.vignette img{width:100%;height:auto}
.vignette figcaption{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-douce);padding:8px 2px 10px;background:var(--papier)}
.en-images .vignette{margin:0}

/* ——— animations sobres ——— */
a{transition:color .2s ease}
.bouton{transition:background .25s ease,color .25s ease,transform .25s ease}
.bouton:hover{transform:translateY(-2px)}
.carte{transition:transform .3s ease,border-color .3s ease}
.carte:hover{transform:translateY(-3px);border-color:var(--accent)}
.vignette img,.photo-galerie{transition:transform .5s ease,filter .5s ease}
@media (hover:hover){
  .vignette:hover img{transform:scale(1.04);filter:brightness(1.04)}
  .photo-galerie:hover{transform:scale(1.02)}
}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .vignette:hover img,.carte:hover,.bouton:hover,.photo-galerie:hover{transform:none!important}
}
@media print{
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .galerie{columns:2}
}

/* portrait d'accueil : cadrage propre, sans déformation */
.heros-photo img{object-position:50% 22%}