/* =========================================================================
   beaulien.fr — Le Carnet (dossiers éditoriaux)
   Système de design : aquarelle marine, côte du Léon. Sobre, premium.
   Palette ancrée sur le bleu historique du site (#578FA8).
   ========================================================================= */

@import url('fonts/fonts.css');

:root{
  --ink:#1c3a47;          /* ardoise marine, titres */
  --body:#2f3e45;         /* texte courant */
  --muted:#6d6557;        /* légendes, méta */
  --paper:#f5efe3;        /* fond page, papier chaud */
  --sheet:#fffdf8;        /* feuille de contenu */
  --line:#dcd2c0;         /* filets */
  --sea:#578fa8;          /* bleu historique du site */
  --sea-deep:#2f6b86;     /* bleu profond, liens survol */
  --indigo:#33485f;       /* indigo, accents froids */
  --ocre:#b5743f;         /* ocre/couchant, accent chaud */
  --maxw:1180px;
  --col:680px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].seen{opacity:1;transform:none}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:"Spectral",Georgia,serif;
  font-weight:400;
  font-size:19px;
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea-deep);text-decoration:none;border-bottom:1px solid rgba(47,107,134,.28);transition:color .2s,border-color .2s}
a:hover{color:var(--ink);border-color:var(--ink)}

/* ---- bandeau de navigation ---- */
.site-top{
  background:var(--ink);
  color:#eaf2f4;
  font-family:"Cormorant Garamond",serif;
}
.site-top .inner{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.site-top .wordmark{font-size:25px;font-weight:600;letter-spacing:.04em;color:#fff;border:0}
.site-top .wordmark span{color:var(--sea);font-style:italic;font-weight:500}
.site-top nav a{color:#cfe0e5;border:0;margin-left:20px;font-size:18px;letter-spacing:.03em}
.site-top nav a:hover{color:#fff}

/* ---- fil d'ariane ---- */
.breadcrumb{max-width:var(--col);margin:26px auto 0;padding:0 24px;font-size:14px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;font-family:"Spectral",serif}
.breadcrumb a{color:var(--muted);border:0}
.breadcrumb a:hover{color:var(--ink)}

/* ---- en-tête d'article ---- */
.article-head{max-width:var(--col);margin:0 auto;padding:30px 24px 8px}
.kicker{font-family:"Spectral",serif;font-weight:500;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--ocre);margin:0 0 16px}
.article-head h1{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:clamp(34px,5.4vw,54px);
  line-height:1.08;
  color:var(--ink);
  margin:0 0 18px;
  letter-spacing:.005em;
}
.standfirst{font-size:22px;line-height:1.5;color:#42525a;font-weight:300;margin:0 0 22px}
.byline{font-size:14.5px;letter-spacing:.03em;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;display:flex;gap:22px;flex-wrap:wrap}
.byline b{color:var(--ink);font-weight:600}

/* ---- corps ---- */
.article-body{max-width:var(--col);margin:0 auto;padding:8px 24px 10px}
.article-body p{margin:0 0 24px}
.article-body h2{
  font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--ink);
  font-size:31px;line-height:1.15;margin:46px 0 14px;
}
.article-body h2::before{content:"";display:block;width:54px;height:2px;background:var(--sea);margin-bottom:18px}
.article-body h3{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--indigo);font-size:24px;margin:32px 0 10px}
.article-body em{color:#3a4a52}
.lead-cap::first-letter{
  font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--sea-deep);
  float:left;font-size:78px;line-height:.78;padding:8px 12px 0 0;
}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:1.2em}
.article-body li{margin:0 0 9px}

/* ---- citation (les mots de l'artiste) ---- */
.pull{
  margin:38px 0;padding:6px 0 6px 28px;border-left:3px solid var(--sea);
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;
  font-size:27px;line-height:1.32;color:var(--ink);
}
.pull cite{display:block;margin-top:12px;font-family:"Spectral",serif;font-style:normal;font-weight:500;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- figures et emplacements photo ---- */
figure{margin:34px 0}
figure img{width:100%;border-radius:2px;box-shadow:0 1px 0 #fff,0 14px 34px -18px rgba(28,58,71,.5);background:#fff}
figcaption{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:10px;font-style:italic}
figcaption b{font-style:normal;color:var(--ink);font-weight:600}
.wide{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 24px}

/* grille pas à pas */
.steps{max-width:var(--maxw);margin:36px auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.steps figure{margin:0}
.steps .n{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--ocre);font-size:20px}

/* emplacement photo à fournir */
.photo-slot{
  border:1.5px dashed #b9ad95;border-radius:3px;background:
    repeating-linear-gradient(45deg,rgba(181,116,63,.05) 0 12px,transparent 12px 24px),var(--sheet);
  padding:34px 26px;text-align:center;color:var(--muted);font-size:15px;line-height:1.55;
}
.photo-slot b{display:block;color:var(--ocre);font-family:"Spectral",serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;margin-bottom:8px}

/* ---- encart données ---- */
.data{
  background:linear-gradient(180deg,#fffdf8,#f7f1e6);
  border:1px solid var(--line);border-top:3px solid var(--sea);
  border-radius:3px;padding:24px 26px;margin:34px 0;
}
.data h4{margin:0 0 14px;font-family:"Spectral",serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea-deep)}
.data dl{margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.data .row{display:flex;justify-content:space-between;gap:18px;border-bottom:1px dotted var(--line);padding-bottom:9px;font-size:16.5px}
.data .row:last-child{border-bottom:0;padding-bottom:0}
.data dt{color:var(--body)}
.data dd{margin:0;color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.data .note{margin:14px 0 0;font-size:13.5px;color:var(--muted);font-style:italic}

/* ---- sources / notes ---- */
.sources{max-width:var(--col);margin:50px auto 0;padding:26px 24px;border-top:1px solid var(--line)}
.sources h2{font-family:"Cormorant Garamond",serif;font-size:24px;color:var(--ink);margin:0 0 14px}
.sources ol{font-size:15px;line-height:1.6;color:var(--muted);padding-left:1.3em;margin:0}
.sources li{margin:0 0 9px}
.sources a{color:var(--sea-deep);word-break:break-word}

/* ---- en lien / maillage ---- */
.related{background:#eef2ee;border-top:1px solid var(--line);margin-top:54px;padding:40px 0}
.related .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.related h2{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--ink);font-size:27px;margin:0 0 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:block;border-bottom:1px solid var(--line)}
.card:hover{border-color:var(--sea)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .t{padding:14px 16px}
.card .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocre);font-weight:600}
.card .h{font-family:"Cormorant Garamond",serif;font-size:21px;color:var(--ink);line-height:1.18;margin-top:4px}

/* ---- pied ---- */
.site-foot{background:var(--ink);color:#bcd0d6;margin-top:0;padding:34px 24px;text-align:center;font-size:14.5px;letter-spacing:.02em}
.site-foot a{color:#dbe8eb}
.site-foot .marks{margin-bottom:10px;font-family:"Cormorant Garamond",serif;font-size:20px;color:#fff;letter-spacing:.04em}

/* ---- index Le Carnet ---- */
.carnet-hero{max-width:var(--maxw);margin:0 auto;padding:46px 24px 8px;text-align:center}
.carnet-hero h1{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(38px,6vw,62px);color:var(--ink);margin:0 0 14px}
.carnet-hero p{max-width:620px;margin:0 auto;font-size:20px;font-weight:300;color:#42525a}
.carnet-grid{max-width:var(--maxw);margin:30px auto 60px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.entry{background:var(--sheet);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column}
.entry:hover{border-color:var(--sea)}
.entry a{border:0}
.entry img{width:100%;aspect-ratio:16/10;object-fit:cover}
.entry .b{padding:20px 22px 24px}
.entry .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);font-weight:600}
.entry .h{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:26px;line-height:1.14;color:var(--ink);margin:6px 0 10px}
.entry .d{font-size:16px;color:#4a585f;line-height:1.5}

@media(max-width:560px){
  body{font-size:18px}
  .standfirst{font-size:20px}
  .pull{font-size:23px}
  .lead-cap::first-letter{font-size:64px}
}

/* ---- accessibilite + perf ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:#fff;padding:11px 18px;font-family:"Spectral",serif;font-size:15px;letter-spacing:.04em}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,.marker:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sea-deep);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}