/* Le Sel — feuille de style unique
   Palette tirée du pays : sel, sansouïre, saladelle, rempart. */

:root{
  --sel:        #EFEDE4;  /* fond : blanc de camelle, cassé de vert */
  --sel-vif:    #FBFAF5;  /* cartes, encadrés */
  --encre:      #1F241C;  /* texte : presque noir, olive */
  --sansouire:  #5A6150;  /* texte secondaire, filets */
  --saladelle:  #6E5A86;  /* accent : le mauve de la fleur des salins */
  --rempart:    #8C8577;  /* pierre d'Aigues-Mortes */
  --saumure:    #C4818A;  /* rose des tables salantes, usage rare */
  --mesure:     68ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--sel);
  color:var(--encre);
  font-family:"Alegreya",Georgia,serif;
  font-size:clamp(1.05rem,.98rem + .35vw,1.2rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.mesure{max-width:var(--mesure)}

/* ---------- Navigation ---------- */
.site-nav{border-bottom:1px solid rgba(31,36,28,.14);background:var(--sel);position:sticky;top:0;z-index:10}
.site-nav .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.6rem;padding:1rem 0}
.site-nav a{color:var(--saladelle);text-decoration:none;font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.9rem;letter-spacing:.09em;text-transform:uppercase}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--encre)}
.site-nav a[aria-current="page"]{color:var(--saladelle);border-bottom:2px solid var(--saladelle);padding-bottom:2px}
.site-nav .marque{font-family:"Bodoni Moda",Didot,serif;font-size:1.1rem;letter-spacing:.02em;color:var(--saladelle);text-transform:none;margin-right:auto}

/* ---------- Titres ---------- */
h1,h2,h3{font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-weight:400;line-height:1.08;margin:0;color:var(--saladelle)}
h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.2rem);letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.6rem);margin-top:3.4rem;margin-bottom:.9rem}
h3{font-size:1.22rem;margin-top:2rem;margin-bottom:.35rem}

/* L'exergue : le nom provençal de la page. Signature du site. */
.exergue{
  font-family:"Alegreya Sans",system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--saladelle);margin:0 0 1.1rem;
}
.exergue span{color:var(--rempart);letter-spacing:.12em;text-transform:none;font-style:italic}

.chapo{font-size:1.28rem;line-height:1.6;color:var(--sansouire);max-width:56ch;margin:1.6rem 0 0}

header.page{padding:4.5rem 0 2.2rem}
main{padding-bottom:5rem}
p{max-width:var(--mesure)}
p + p{margin-top:1.1rem}

/* ---------- Filet de sel : séparateur ---------- */
.filet{border:0;height:9px;margin:3.5rem 0;max-width:var(--mesure);
  background:repeating-linear-gradient(90deg,var(--rempart) 0 2px,transparent 2px 9px);
  opacity:.5}

/* ---------- Emplacements médias ---------- */
.media{margin:2.4rem 0;max-width:var(--mesure)}
.media--large{max-width:100%}
.media img,.media video{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 12px 32px rgba(31,36,28,.12)}
.media video{aspect-ratio:16/9;object-fit:cover;background:#111}
.r-21x9 img{aspect-ratio:21/9;object-fit:cover}
.r-16x9 img{aspect-ratio:16/9;object-fit:cover}
.r-4x3 img{aspect-ratio:4/3;object-fit:cover}
.r-3x4 img{aspect-ratio:3/4;object-fit:cover}
.media--cover{max-width:22rem;margin-inline:auto}
.media--cover img{aspect-ratio:auto;object-fit:contain}
.cadre{
  border:1px dashed var(--rempart);background:var(--sel-vif);
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;
  padding:1.6rem;text-align:center;border-radius:2px;
}
.r-16x9 .cadre{aspect-ratio:16/9}
.r-4x3  .cadre{aspect-ratio:4/3}
.r-3x4  .cadre{aspect-ratio:3/4}
.r-21x9 .cadre{aspect-ratio:21/9}
.cadre b{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--saladelle)}
.cadre span{font-size:.92rem;color:var(--sansouire);max-width:46ch;margin-inline:auto;line-height:1.5}
figcaption{font-size:.9rem;color:var(--sansouire);margin-top:.6rem;font-style:italic}

/* ---------- Extrait ---------- */
.extrait{max-width:var(--mesure);scroll-margin-top:6rem}
.extrait p{font-size:1.08rem;line-height:1.78}
.extrait p:nth-of-type(3),.extrait p:nth-of-type(5),.extrait p:nth-of-type(8),.extrait p:nth-of-type(9){
  font-style:italic;color:var(--sansouire)
}

/* ---------- Auteur ---------- */
.auteur{margin:2.8rem 0}
.auteur-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 180px;gap:2.5rem;align-items:center;max-width:68rem;margin:1.8rem auto 0}
.auteur-portrait,.auteur-blason{margin:0}
.auteur-portrait img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;box-shadow:0 12px 32px rgba(31,36,28,.16)}
.auteur-blason{justify-self:center}
.auteur-blason img{display:block;width:100%;height:auto}
.auteur-texte p{max-width:none}

/* ---------- Grilles ---------- */
.grille{display:grid;gap:2.2rem;margin-top:2.2rem}
.grille-2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grille p{max-width:none}

.fiche{background:var(--sel-vif);border:1px solid rgba(31,36,28,.1);padding:1.5rem 1.6rem;border-radius:2px}
.fiche h3{margin-top:0}
.fiche .role{font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--saladelle);display:block;margin-bottom:.7rem}
.fiche--large{grid-column:1/-1}

/* ---------- Glossaire ---------- */
.glossaire{max-width:var(--mesure);margin-top:2rem}
.glossaire div{padding:.95rem 0;border-bottom:1px solid rgba(31,36,28,.11)}
.glossaire dt{font-family:"Bodoni Moda",serif;font-size:1.2rem}
.glossaire dt em{font-family:"Alegreya Sans",sans-serif;font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rempart);margin-left:.7rem}
.glossaire dd{margin:.3rem 0 0;color:var(--sansouire)}

/* ---------- Boutons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.btn{display:inline-block;font-family:"Alegreya Sans",system-ui,sans-serif;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.75rem 1.4rem;border:1px solid var(--encre);color:var(--encre);text-decoration:none;border-radius:2px;transition:background .18s,color .18s}
.btn:hover,.btn:focus-visible{background:var(--encre);color:var(--sel)}
.btn--plein{background:var(--saladelle);border-color:var(--saladelle);color:var(--sel-vif)}
.btn--plein:hover,.btn--plein:focus-visible{background:var(--encre);border-color:var(--encre)}

a{color:var(--saladelle)}
:focus-visible{outline:2px solid var(--saladelle);outline-offset:3px}

/* ---------- Pied ---------- */
footer{border-top:1px solid rgba(31,36,28,.14);padding:2.4rem 0 3rem;margin-top:4rem;color:var(--sansouire);font-size:.9rem}
footer a{color:var(--sansouire)}
footer nav{margin-bottom:.9rem;display:flex;flex-wrap:wrap;gap:1.2rem}

@media (max-width:48rem){
  .auteur-grid{grid-template-columns:170px minmax(0,1fr) 140px;gap:1.5rem;align-items:start}
}

@media (max-width:36rem){
  .auteur-grid{grid-template-columns:1fr;text-align:left}
  .auteur-portrait{width:min(70%,15rem)}
  .auteur-blason{width:min(48%,9rem);justify-self:center}
}

.site-evolution{font-size:.78rem;line-height:1.45;color:var(--rempart);font-style:italic;text-align:center;margin:1.1rem auto 0}