@font-face{font-family:"LM";src:url(fonts/lm-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LM";src:url(fonts/lm-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"LM";src:url(fonts/lm-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"LM Caps";src:url(fonts/lm-caps.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  --creme:#fbf7dc; --creme-2:#f4eec8; --bleu:#3466a5; --bleu-fonce:#23406b;
  --encre:#1d1d1b; --gris:#5a5850; --filet:rgba(52,102,165,.35);
  --mesure:38rem;
}
*{box-sizing:border-box}
html{font-size:112.5%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:"LM",Georgia,"Times New Roman",serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-fonce);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--bleu)}
.caps{font-family:"LM Caps","LM",Georgia,serif;letter-spacing:.06em}

/* En-tête */
.entete{border-bottom:1px solid var(--filet)}
.entete .interieur{max-width:68rem;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--encre)}
.marque img{width:34px}
.marque span{font-family:"LM Caps",Georgia,serif;font-size:1.35rem;letter-spacing:.08em}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--encre);font-family:"LM Caps",Georgia,serif;letter-spacing:.06em}
nav a:hover,nav a[aria-current]{color:var(--bleu);border-bottom:1px solid var(--bleu)}

main{display:block}
.section{max-width:68rem;margin:0 auto;padding:3.5rem 1.5rem}
.etroit{max-width:var(--mesure);margin:0 auto}

/* Accueil */
.accueil{text-align:center;padding-top:4.5rem;padding-bottom:3rem}
.cadre{border:3px solid var(--bleu);outline:1px solid var(--bleu);outline-offset:6px;padding:3rem 2rem;max-width:44rem;margin:0 auto}
.accueil h1{font-family:"LM Caps",Georgia,serif;font-weight:400;font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:.08em;margin:0;color:var(--bleu-fonce)}
.accueil .collection{font-style:italic;font-size:1.3rem;margin:.6rem 0 1.6rem}
.accueil .accroche{font-size:1.15rem;max-width:32rem;margin:0 auto}
.accueil .avocette{width:70px;margin:2rem auto 0}

h2{font-family:"LM Caps",Georgia,serif;font-weight:400;font-size:1.7rem;letter-spacing:.06em;color:var(--bleu-fonce);text-align:center;margin:0 0 .4rem}
.sous-titre{text-align:center;font-style:italic;color:var(--gris);margin:0 0 2.5rem}

/* Livres */
.roman{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:2.5rem;align-items:center;margin-bottom:3.5rem}
.roman .texte h3{margin:.2rem 0 .2rem;font-size:1.8rem;font-weight:400}
.genre{font-style:italic;color:var(--gris);margin:0 0 .8rem}
.nouvelles{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.carte{text-decoration:none;color:var(--encre);display:block}
.carte img,.roman img,.fiche .couv img{box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(35,64,107,.18);transition:transform .2s ease}
.carte:hover img{transform:translateY(-3px)}
.carte h3{font-weight:400;font-size:1.3rem;margin:1rem 0 .1rem}
.carte p{margin:.3rem 0 0}
.etiquette{font-family:"LM Caps",Georgia,serif;letter-spacing:.08em;font-size:.85rem;color:var(--bleu)}

.bouton{display:inline-block;font-family:"LM Caps",Georgia,serif;letter-spacing:.06em;background:var(--bleu-fonce);color:#fff;text-decoration:none;padding:.65rem 1.3rem;border-radius:2px;border:1px solid var(--bleu-fonce);font-size:1rem;cursor:pointer}
.bouton:hover{background:var(--bleu);color:#fff}
.bouton.secondaire{background:transparent;color:var(--bleu-fonce)}
.bouton.secondaire:hover{background:var(--creme-2);color:var(--bleu-fonce)}
.mention{font-size:.9rem;color:var(--gris);margin-top:.6rem}

/* Bandeau carnet */
.bandeau{background:var(--creme-2);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.bandeau .section{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding:2.5rem 1.5rem}
.bandeau img{width:64px}
.bandeau h2{text-align:left;margin:0}
.bandeau p{margin:.3rem 0 0}

/* Fiche livre */
.fiche{display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:3rem;align-items:start}
.fiche h1{font-weight:400;font-size:clamp(2rem,5vw,2.8rem);line-height:1.15;margin:0}
.fiche .description p{margin:0 0 1rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.extrait{border-top:1px solid var(--filet);margin-top:3.5rem;padding-top:3rem}
.extrait .texte{max-width:var(--mesure);margin:0 auto;font-size:1.05rem}
.extrait .texte p{margin:0;text-indent:1.5em;text-align:justify;hyphens:auto}
.extrait .texte p.dialogue{text-indent:0}
.extrait .texte p.coupe{text-align:center;text-indent:0;margin:1rem 0;color:var(--gris)}
.extrait .texte h3{font-weight:400;text-align:center;font-family:"LM Caps",Georgia,serif;letter-spacing:.06em;margin:0 0 1.2rem}
.extrait .suite{text-align:center;margin-top:2.5rem}

/* Pages de texte */
.page h1{font-family:"LM Caps",Georgia,serif;font-weight:400;font-size:2.2rem;letter-spacing:.06em;color:var(--bleu-fonce);text-align:center;margin:0 0 2rem}
.page p{margin:0 0 1.1rem}
.page .lettrine::first-letter{font-size:3.2em;float:left;line-height:.9;padding:.25rem .5rem 0 0;color:var(--bleu-fonce)}
.portrait{width:12rem;margin:0 auto 2rem;border-radius:50%;overflow:hidden;border:3px solid var(--bleu)}
.page h2{text-align:left;font-size:1.3rem;margin:2rem 0 .6rem}

/* Formulaire */
.formulaire{background:#fff8;border:1px solid var(--filet);padding:2rem;margin:2rem 0}
.formulaire label{display:block;font-family:"LM Caps",Georgia,serif;letter-spacing:.05em;margin:0 0 .3rem}
.formulaire input[type=email],.formulaire input[type=text]{width:100%;font:inherit;padding:.6rem .7rem;border:1px solid var(--bleu);background:#fff;margin-bottom:1rem}
.formulaire .consentement{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin-bottom:1.2rem}
.formulaire .consentement label{font-family:inherit;letter-spacing:0}

/* Pied */
.pied{border-top:1px solid var(--filet);text-align:center;padding:2.5rem 1.5rem 3rem;color:var(--gris);font-size:.9rem}
.pied img{width:36px;margin:0 auto .8rem;opacity:.85}
.pied a{color:var(--gris)}
.pied ul{list-style:none;padding:0;margin:.6rem 0 0;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

@media (max-width:760px){
  html{font-size:106%}
  .roman,.fiche{grid-template-columns:1fr;gap:1.6rem}
  .roman img,.fiche .couv{max-width:14rem;margin:0 auto}
  .nouvelles{grid-template-columns:1fr 1fr}
  .bandeau .section{grid-template-columns:1fr;text-align:center}
  .bandeau img{margin:0 auto}
  .bandeau h2{text-align:center}
  .cadre{padding:2rem 1.2rem}
}
@media (max-width:460px){.nouvelles{grid-template-columns:1fr}.nouvelles .carte img{max-width:12rem}}