/* christopheauger.com
   1. Polices  2. Jetons  3. Base  4. En-tete  5. Bio  6. Liens
   7. Liban  8. Visionneuse  9. Suite et pied  10. Ecrans etroits */

/* 1. Polices ------------------------------------------------------------- */
@font-face{
  font-family:'Newsreader';
  src:url('../fonts/newsreader-latin-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

/* 2. Jetons -------------------------------------------------------------- */
:root{
  --pap:#FAF6EF;      /* papier */
  --pap-2:#F2ECE1;    /* papier appuye */
  --enc:#252019;      /* texte */
  --gris:#6B6257;     /* texte secondaire, AA sur papier */
  --acc:#9C4A22;      /* terre cuite */
  --fil:#E3D9C9;
  --page:58rem;       /* largeur de la page */
  --col:39rem;        /* largeur de la colonne de lecture */
}

/* 3. Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--pap);color:var(--enc);
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:20px;line-height:1.62;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:inherit}
.enveloppe{max-width:var(--page);margin:0 auto;padding:0 2rem}
.saut{position:absolute;left:-9999px}
.saut:focus{left:1rem;top:1rem;z-index:10;background:var(--pap);
  padding:.6rem 1rem;border:1px solid var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* 4. En-tete ------------------------------------------------------------- */
.tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.4rem;padding:2.6rem 0 0}
.tete__nom{font-size:.82rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:1.7rem;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.menu a{text-decoration:none;padding-bottom:.2rem;border-bottom:1px solid transparent}
.menu a:hover{color:var(--acc);border-color:var(--acc)}
.menu [aria-current]{color:var(--enc);border-color:var(--acc)}
.filet{border:0;border-top:1px solid var(--fil);margin:0}

/* 5. Bio ----------------------------------------------------------------- */
.ouverture{display:grid;grid-template-columns:15rem 1fr;gap:3rem;
  align-items:end;margin:5rem 0 3.4rem}
.ouverture__portrait{width:100%;display:block;border-radius:2px;
  box-shadow:0 1px 0 var(--fil),0 18px 44px -28px rgba(60,40,20,.55)}
h1{margin:0;font-size:clamp(3rem,7vw,4.6rem);line-height:.98;font-weight:300;
  letter-spacing:-.018em}
h1 em{display:block;font-style:normal;font-weight:400;color:var(--acc)}
.chapo{margin:1.5rem 0 .35rem;font-size:1.32rem;line-height:1.45;
  color:var(--gris);max-width:42ch}
.chapo a{color:var(--enc);text-decoration-color:var(--acc);text-underline-offset:.22em}
.corps{max-width:var(--col);margin:3.2rem 0 0}
.corps p{margin:0 0 1.55rem}
.corps--lettrine p:first-child::first-letter{float:left;font-size:3.6rem;
  line-height:.86;padding:.16rem .5rem 0 0;color:var(--acc);font-weight:400}
.corps a{color:var(--enc);text-decoration:none;
  border-bottom:1px solid var(--acc);padding-bottom:.06em}
.corps a:hover{color:var(--acc)}

/* 6. Liens --------------------------------------------------------------- */
.intro{max-width:var(--col);margin:3.4rem 0 0}
.intro h1{font-size:clamp(2.4rem,6vw,3.4rem);margin-bottom:.9rem}
.intro p{margin:0;color:var(--gris);font-size:1.2rem;line-height:1.5}
.rubriques{margin:3.4rem 0 0;border-top:1px solid var(--fil)}
.rubrique{display:grid;grid-template-columns:12rem 1fr;gap:2.4rem;
  padding:2rem 0;border-bottom:1px solid var(--fil)}
.rubrique h2{margin:.3rem 0 0;font-size:1.02rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.rubrique ul{margin:0;padding:0;list-style:none}
.rubrique li{margin:0 0 .85rem;max-width:44ch}
.rubrique li:last-child{margin-bottom:0}
.rubrique a{text-decoration:none;border-bottom:1px solid var(--acc);
  padding-bottom:.05em}
.rubrique a:hover{color:var(--acc)}
.rubrique span{display:block;font-size:.94rem;color:var(--gris);line-height:1.4}

/* 6 bis. Page legale ----------------------------------------------------- */
.titre-legal{margin:2.4rem 0 .7rem;font-size:1.02rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.titre-legal:first-child{margin-top:0}
.corps b{font-weight:500}

/* 7. Liban --------------------------------------------------------------- */
.recit{max-width:var(--col);margin:3.4rem 0 0}
.recit h1{font-size:clamp(2.4rem,6vw,3.4rem);margin-bottom:1.2rem}
.recit p{margin:0 0 1.4rem}
.sejours{margin:2rem 0 0;padding:0;list-style:none;border-top:1px solid var(--fil)}
.sejours li{display:grid;grid-template-columns:10.5rem 1fr;gap:1.2rem;
  padding:.75rem 0;border-bottom:1px solid var(--fil);font-size:1.02rem}
.sejours b{font-weight:400;color:var(--acc)}
.galerie{margin:4.6rem 0 0}
.photo{margin:0 0 4.2rem}
.photo button{display:block;padding:0;border:0;background:none;cursor:zoom-in;
  width:100%;text-align:left;font:inherit;color:inherit}
.photo img{display:block;margin:0 auto;border-radius:2px;
  box-shadow:0 1px 0 var(--fil),0 20px 46px -30px rgba(60,40,20,.6)}
.photo--paysage img{width:100%;max-width:var(--col)}
.photo--portrait img{width:auto;max-width:min(100%,29rem);max-height:78vh}
.photo figcaption{max-width:var(--col);margin:1.15rem auto 0}
.photo h2{margin:0 0 .3rem;font-size:1.32rem;font-weight:400;color:var(--acc)}
.photo figcaption p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--gris)}

/* 8. Visionneuse --------------------------------------------------------- */
.visionneuse{position:fixed;inset:0;z-index:20;background:rgba(28,22,16,.95);
  display:none;align-items:center;justify-content:center;padding:3rem 2rem 5rem}
.visionneuse.ouverte{display:flex}
.visionneuse img{max-width:100%;max-height:80vh;border-radius:2px}
.visionneuse figcaption{position:absolute;left:0;right:0;bottom:1.6rem;
  text-align:center;color:#EDE6DA;font-size:1.02rem;padding:0 3rem}
.visionneuse__fermer{position:absolute;top:1rem;right:1.2rem;background:none;
  border:0;color:#EDE6DA;font-size:2.2rem;line-height:1;cursor:pointer;
  font-family:inherit;padding:.2rem .6rem}
.visionneuse__fermer:hover{color:#fff}

/* 9. Suite et pied ------------------------------------------------------- */
.suite{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fil);
  border-top:1px solid var(--fil);border-bottom:1px solid var(--fil);margin:4.5rem 0 0}
.suite a{background:var(--pap);padding:2.1rem 1.9rem;text-decoration:none;
  display:block;transition:background .18s}
.suite a:hover{background:var(--pap-2)}
.suite strong{display:block;font-weight:400;font-size:1.5rem;margin-bottom:.3rem}
.suite span{font-size:.98rem;color:var(--gris)}
.suite a:hover strong{color:var(--acc)}
.pied{display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;
  align-items:baseline;padding:2.6rem 0 3.4rem;font-size:.95rem;color:var(--gris)}
.pied p{margin:0}
.pied a{text-decoration:none;border-bottom:1px solid var(--fil)}
.pied a:hover{color:var(--acc);border-color:var(--acc)}
.pied__liens{display:flex;gap:1.5rem}

/* 10. Ecrans etroits ----------------------------------------------------- */
@media (max-width:760px){
  body{font-size:19px}
  .enveloppe{padding:0 1.4rem}
  .tete{gap:1rem}
  .tete__nom{font-size:.74rem;letter-spacing:.16em}
  .menu{gap:1.1rem;font-size:.74rem;letter-spacing:.1em}
  .ouverture{grid-template-columns:1fr;gap:2rem;margin:3rem 0 2.4rem;
    align-items:start}
  .ouverture__portrait{max-width:15rem}
  .rubrique{grid-template-columns:1fr;gap:.9rem;padding:1.6rem 0}
  .sejours li{grid-template-columns:1fr;gap:.1rem}
  .photo{margin-bottom:3rem}
  .photo--portrait img{max-width:100%;max-height:none}
  .suite{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}