/* =========================================================
   sebvaissiere.com — feuille de style
   Valeurs relevées sur le site Squarespace d'origine (sept. 2026)
   Fraunces (titres) + Libre Caslon Text (texte) + Bitter (boutons)
   ========================================================= */

:root{
  --ink:#191605;
  --red:#e03331;
  --grey:#cdcdcd;
  --paper:#ffffff;
  --maxw:1400px;
  --gutter:6vw;
  --u:10.5px;                /* unité typographique fluide (mobile) */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --ui:"Bitter",Georgia,serif;
  --cw:min(var(--maxw), calc(100vw - var(--gutter) * 2));
}
@media (min-width:768px){
  :root{
    --gutter:4vw;
    --u:min(15.63px, calc(2.927px + 0.9086vw));
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:calc(var(--u) * 1.198);
  line-height:1.5;
  letter-spacing:.06em;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:.02em;margin:0}
h1{font-size:calc(var(--u) * 4.1);line-height:1.1388}
h2{font-size:calc(var(--u) * 1.5);line-height:1.3}
h3{font-size:calc(var(--u) * 1.413);line-height:1.27}
h4{font-size:calc(var(--u) * .971);line-height:1.3}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);
  padding:calc(var(--u) * .95) var(--gutter);
  text-align:left;
}
.hd-title{
  font-family:var(--display);font-weight:600;
  font-size:calc(var(--u) * 1.198);
  letter-spacing:-.02em;line-height:1.2;
  text-decoration:none;display:inline-block;
}
.hd-nav{display:none}
.hd-burger{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  width:34px;height:24px;border:0;background:none;padding:0;cursor:pointer;
  display:block;
}
.hd-burger span{display:block;height:1px;background:var(--ink);margin:7px 0;transition:transform .25s ease,opacity .2s ease}
.hd-burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hd-burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (min-width:768px){
  .hd{text-align:center;padding:calc(var(--u) * .7) var(--gutter) calc(var(--u) * .8)}
  .hd-burger{display:none}
  .hd-nav{display:block;margin-top:calc(var(--u) * .3)}
  .hd-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:calc(var(--u) * 1.15)}
  .hd-nav a{
    font-size:calc(var(--u) * .875);line-height:1.5;letter-spacing:.06em;
    text-decoration:none;
  }
  .hd-nav a:hover{text-decoration:underline;text-underline-offset:.28em}
  .hd-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.28em}
}

/* ---------- Menu plein écran (mobile) ---------- */
.menu{
  position:fixed;inset:0;z-index:49;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;
}
.menu[hidden]{display:none}
.menu ul{list-style:none;margin:0;padding:calc(var(--u) * 8) var(--gutter);text-align:center;width:100%}
.menu li{margin:.12em 0}
.menu a{
  font-family:var(--serif);font-weight:400;
  font-size:calc(var(--u) * 4.78);line-height:1.5;letter-spacing:.023em;
  color:var(--grey);text-decoration:none;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ink)}

/* ---------- Gabarit général ---------- */
main{padding-top:calc(var(--u) * 9.6);padding-bottom:calc(var(--u) * 9)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.pagetitle{text-align:center;margin:0 0 calc(var(--u) * 7.35)}

/* ---------- Texte enrichi ---------- */
.rte > :last-child{margin-bottom:0}
.rte a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:from-font}
.rte a:hover{color:var(--red)}
.rte strong{font-weight:700}
.rte h1,.rte h2,.rte h3,.rte h4{margin:0}
.rte h3 strong{font-weight:600}
.rte p:empty{margin:0;height:.8em}

/* ---------- Bouton ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:12px;font-weight:400;letter-spacing:normal;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);border-radius:0;
  padding:0 15.6px;min-height:28px;
  transition:background-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--full{width:100%}

/* ---------- Grille fluide (pages composées) ---------- */
.fe{
  display:grid;position:relative;
  --cell:calc(min(var(--maxw), 100vw) / 8);
  grid-template-columns:
    minmax(var(--gutter),1fr)
    repeat(8,minmax(0,var(--cell)))
    minmax(var(--gutter),1fr);
  grid-template-rows:repeat(var(--rows-m,1),minmax(24px,auto));
  column-gap:0;row-gap:0;
  overflow-x:clip;
}
@media (min-width:768px){
  .fe{
    --cell:calc(var(--cw) / 24);
    grid-template-columns:
      minmax(var(--gutter),1fr)
      repeat(24,minmax(0,var(--cell)))
      minmax(var(--gutter),1fr);
    grid-template-rows:repeat(var(--rows-d,1),minmax(calc(var(--cw) * var(--rs,.0215)),auto));
  }
}
.fe-b{min-width:0;display:flex;flex-direction:column}
.fe-b > .fe-i{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}
.fe-i > *{max-width:100%}
.fe-i figure{margin:0;width:100%;position:relative;flex:1 1 auto;
  min-height:calc(var(--cw) * var(--rs,.0215) * var(--nrows,6))}
.fe-i figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fe-i[style*="flex-start"] figure img,.fe-b > .fe-i figure img{object-position:center}
.fe-i figcaption{position:absolute;bottom:-1.6em;left:0;font-size:calc(var(--u) * .8)}
.fe-i .rte{width:100%}

/* ---------- Liste des billets ---------- */
.grid{display:grid;gap:48px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
.card a{text-decoration:none;display:block}
.card figure{margin:0 0 calc(var(--u) * 1.25)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f2f2f0}
.card .cat{font-size:12px;line-height:1.5;letter-spacing:normal;color:var(--red);margin:0 0 .3em}
.card h2{font-size:calc(var(--u) * 1.413);line-height:1.3;margin:0 0 .55em}
.card .exc{font-size:calc(var(--u) * .875);line-height:1.5;margin:0}
.card a:hover h2{color:var(--red)}

.pager{display:flex;justify-content:space-between;align-items:center;margin-top:calc(var(--u) * 6);font-size:calc(var(--u) * .875)}
.pager a{text-decoration:none}
.pager a:hover{color:var(--red)}
.pager span{color:var(--grey)}

/* ---------- Billet ---------- */
.article{width:88vw;max-width:88vw;margin:0 auto}
@media (min-width:768px){.article{width:46vw;max-width:46vw}}
.article .cat{font-size:12px;line-height:1.5;letter-spacing:normal;color:var(--red);margin:0 0 .6em}
.article h1{margin:0 0 .5em;line-height:1.3}
.article .chapo{margin:0 0 calc(var(--u) * 2)}
.article figure{margin:calc(var(--u) * 2) 0}
.article figcaption{font-size:calc(var(--u) * .8);color:#7c7969;margin-top:.6em}
.article .signature{font-family:var(--display);font-weight:300;font-size:calc(var(--u) * 1.413);margin-top:calc(var(--u) * 3)}
.article .retour{display:block;margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * .875);text-decoration:none}
.article .retour:hover{color:var(--red)}

/* ---------- Carrousel photos ---------- */
.diapo{background:#191207;padding:calc(var(--u) * 3) 0;position:relative}
.diapo-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}
.diapo-piste::-webkit-scrollbar{display:none}
.diapo figure{flex:0 0 100%;scroll-snap-align:center;margin:0;padding:0 var(--gutter)}
.diapo img{width:100%;max-height:74vh;object-fit:contain;margin:0 auto}
.diapo figcaption{color:#e8e4d9;text-align:center;font-size:calc(var(--u) * .875);margin-top:calc(var(--u) * 1.2)}
.diapo-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 calc(var(--gutter) / 2);pointer-events:none}
.diapo-nav button{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:#a33027;color:#fff;font-size:18px;line-height:1;
}

/* ---------- Audios & vidéos ---------- */
.media-liste{display:grid;gap:calc(var(--u) * 4);grid-template-columns:1fr}
@media (min-width:900px){.media-liste{grid-template-columns:repeat(2,1fr)}}
.media h3{margin:0 0 .3em}
.media .source{font-size:calc(var(--u) * .875);color:var(--grey);margin:0 0 .8em}
.media audio,.media video{width:100%}
.media video{background:#000}

/* ---------- Contact ---------- */
.contact-bloc{border:1px solid var(--ink);padding:calc(var(--u) * 3) var(--gutter);text-align:center;margin-bottom:calc(var(--u) * 3)}
.contact-bloc a{text-decoration:underline;text-underline-offset:.2em}
.contact-bloc .mail{font-family:var(--display);font-weight:300;font-size:calc(var(--u) * 2.4);line-height:1.3;display:inline-block;margin-bottom:.3em}
.formulaire{max-width:680px;margin:calc(var(--u) * 4) auto 0;display:grid;gap:calc(var(--u) * 1.4)}
.formulaire label{display:block;font-size:calc(var(--u) * .875);margin-bottom:.35em}
.formulaire input,.formulaire textarea{
  width:100%;font:inherit;font-size:calc(var(--u) * .95);color:var(--ink);
  background:transparent;border:1px solid var(--ink);border-radius:0;padding:.55em .7em;
}
.formulaire textarea{min-height:9em;resize:vertical}
.formulaire .duo{display:grid;gap:calc(var(--u) * 1.4);grid-template-columns:1fr}
@media (min-width:640px){.formulaire .duo{grid-template-columns:1fr 1fr}}
.formulaire .envoi{justify-self:start}
.formulaire .msg{font-size:calc(var(--u) * .875)}
.formulaire .msg[data-etat="erreur"]{color:var(--red)}

/* ---------- Pied ---------- */
.pied{padding:calc(var(--u) * 4) var(--gutter) calc(var(--u) * 3);text-align:center;font-size:calc(var(--u) * .8);color:var(--grey)}
.pied a{text-decoration:none}
.pied a:hover{color:var(--ink)}

/* ---------- Divers ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Couleurs de texte héritées de la charte ---------- */
.c-accent{color:var(--red)}
.c-encre{color:var(--ink)}
h1 strong,h2 strong,h3 strong,.rte strong{font-weight:700}

/* ---------- Notices : Livres & supports, Audios ---------- */
.notices{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:calc(var(--u) * 7)}
.notice{display:grid;grid-template-columns:1fr;gap:calc(var(--u) * 2);align-items:start}
@media (min-width:768px){
  .notice{grid-template-columns:4fr 8fr;gap:calc(var(--u) * 3.4)}
}
.notice-visuel{display:flex;flex-wrap:wrap;gap:calc(var(--u) * .9);align-items:flex-start;max-width:420px}
.notice-visuel figure{margin:0;flex:1 1 30%;min-width:0}
.notice-visuel figure:only-child{flex:1 1 100%}
.notice-visuel img{width:100%;height:auto}
.notice-texte .rte + .rte{margin-top:.6em}
.notice-texte h3{margin:0 0 .25em}
.notice-texte h3 + h3{font-weight:300}
.notice-texte p{margin:0 0 .6em}
.notice .credit{font-size:calc(var(--u) * .8);line-height:1.5;color:#7c7969;margin:.9em 0 0}
.notice .credit a{text-decoration:underline;text-underline-offset:.2em}
.notice .btn{margin-top:calc(var(--u) * 1.7)}
.notice audio{width:100%;margin-top:calc(var(--u) * 1.4)}
.notice .source{font-size:calc(var(--u) * .8);color:#7c7969;margin:0}

/* ---------- Films ---------- */
.films{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;gap:calc(var(--u) * 6)}
.film{margin:0;max-width:940px}
.film .media{margin:0}
.film video{width:100%;height:auto;background:#000;display:block}
.film img{width:100%;height:auto;display:block}
.film figcaption{font-family:var(--display);font-weight:300;
  font-size:calc(var(--u) * 1.413);line-height:1.3;letter-spacing:.02em;
  margin-top:calc(var(--u) * 1.1)}

/* ---------- Surtitre ---------- */
.surtitre{display:block}