/* Ma liste de reves - feuille de style editorial clair */

:root{
  --encre:#141414;
  --gris:#5c5c5c;
  --gris-clair:#e6e2db;
  --papier:#faf8f5;
  --blanc:#ffffff;
  --accent:#b08d3f;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--encre)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* En-tete */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,245,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gris-clair);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:46px;width:auto}
.logo span{font-family:var(--serif);font-size:18px;letter-spacing:.04em}
.nav{display:flex;gap:28px;flex-wrap:wrap}
.nav a{
  text-decoration:none;text-transform:uppercase;
  font-size:12px;letter-spacing:.16em;color:var(--gris);
  padding-bottom:4px;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--encre);border-bottom-color:var(--accent)}

/* Hero */
.hero{
  position:relative;
  min-height:78vh;
  display:flex;align-items:center;
  background:#0d0d0d url("assets/hero.jpg") center/cover no-repeat;
  color:var(--blanc);
  text-align:center;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.hero .wrap{position:relative;z-index:1;padding-top:90px;padding-bottom:90px}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px,5.4vw,64px);
  line-height:1.15;
  margin:0 auto 22px;
  max-width:16ch;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hero p{max-width:52ch;margin:0 auto 32px;font-size:18px;color:rgba(255,255,255,.88)}

.bouton{
  display:inline-block;
  padding:15px 34px;
  border:1px solid currentColor;
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;letter-spacing:.18em;
  transition:background .2s,color .2s;
}
.hero .bouton{color:var(--blanc)}
.hero .bouton:hover{background:var(--blanc);color:var(--encre)}
.bouton.sombre{color:var(--encre)}
.bouton.sombre:hover{background:var(--encre);color:var(--papier)}

/* Sections */
section{padding:88px 0}
section.alt{background:var(--blanc);border-top:1px solid var(--gris-clair);border-bottom:1px solid var(--gris-clair)}
.oeil{
  display:block;text-transform:uppercase;
  font-size:11px;letter-spacing:.24em;color:var(--accent);
  margin-bottom:14px;
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.25;margin:0 0 20px;
}
h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.4vw,28px);
  margin:0 0 12px;
}
p{margin:0 0 18px;color:var(--gris)}
p.fort{color:var(--encre);font-size:19px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo.inverse .texte{order:2}
.duo img{border:1px solid var(--gris-clair)}

/* Etapes */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:42px}
.etape{border-top:2px solid var(--encre);padding-top:18px}
.etape .num{
  font-family:var(--serif);font-size:34px;color:var(--accent);
  display:block;line-height:1;margin-bottom:10px;
}
.etape p{margin:0;color:var(--encre);font-size:16px}

/* Citation */
.citation{
  text-align:center;
  background:var(--encre);color:var(--papier);
}
.citation h2{max-width:22ch;margin:0 auto;color:var(--papier)}
.citation p{color:rgba(250,248,245,.7);max-width:46ch;margin:22px auto 0}

/* Reves */
.reve{padding-top:64px;border-top:1px solid var(--gris-clair);margin-top:64px}
.reve:first-of-type{border-top:0;margin-top:0;padding-top:0}
.reve-tete{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.annee{
  font-family:var(--serif);font-size:15px;letter-spacing:.12em;
  color:var(--blanc);background:var(--accent);
  padding:5px 14px;white-space:nowrap;
}
.reve-tete h3{margin:0;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(19px,2.2vw,26px)}
.reve .lien{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);text-decoration:none;border-bottom:1px solid var(--accent);
}
.reve .lien:hover{color:var(--encre)}

.galerie{display:grid;gap:18px}
.galerie.g1{grid-template-columns:1fr}
.galerie.g2{grid-template-columns:repeat(2,1fr)}
.galerie.g3{grid-template-columns:repeat(3,1fr)}
.galerie figure{margin:0}
.galerie img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;border:1px solid var(--gris-clair)}
.galerie.portrait img{aspect-ratio:4/3}

/* Video : affiche cliquable, remplacee par le lecteur quand le site est en ligne */
.video{margin-top:26px}
.video-affiche{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  width:100%;aspect-ratio:16/9;
  background:var(--encre);border:1px solid var(--gris-clair);
  text-decoration:none;transition:background .25s ease;
}
.video-affiche:hover{background:#000}
.video-play{
  width:72px;height:72px;border-radius:50%;
  border:1px solid rgba(250,248,245,.5);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s ease,transform .25s ease;
}
.video-play::after{
  content:"";border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent var(--papier);
  margin-left:5px;
}
.video-affiche:hover .video-play{border-color:var(--accent);transform:scale(1.06)}
.video-titre{
  font-family:var(--serif);font-size:clamp(17px,2vw,21px);
  color:var(--papier);text-align:center;padding:0 24px;
}
.video-note{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(250,248,245,.55);
}
.video-lecteur{position:relative;width:100%;aspect-ratio:16/9;background:var(--encre)}
.video-lecteur iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Contact */
.formulaire{max-width:640px}
.champ{margin-bottom:22px}
.champ label{
  display:block;text-transform:uppercase;font-size:11px;
  letter-spacing:.18em;color:var(--gris);margin-bottom:8px;
}
.champ input,.champ textarea{
  width:100%;padding:14px 16px;
  border:1px solid var(--gris-clair);background:var(--blanc);
  font-family:var(--sans);font-size:16px;color:var(--encre);
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent)}
.champ textarea{min-height:170px;resize:vertical}

/* Pied de page */
.site-footer{
  background:var(--encre);color:rgba(250,248,245,.72);
  padding:56px 0 40px;font-size:14px;
}
.site-footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-footer a{color:var(--papier);text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{border-bottom-color:var(--accent)}
.site-footer .marque{font-family:var(--serif);font-size:17px;color:var(--papier)}

@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:32px}
  .duo.inverse .texte{order:0}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .galerie.g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  section{padding:64px 0}
  .site-header .wrap{flex-direction:column;align-items:flex-start;padding-top:14px;padding-bottom:14px}
  .nav{gap:18px}
  .etapes{grid-template-columns:1fr}
  .galerie.g2,.galerie.g3{grid-template-columns:1fr}
}