/* ===== Le Dahu de Camargue — carnet de terrain naturaliste ===== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,380;0,9..144,560;1,9..144,420;1,9..144,600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#E8E1CE;
  --paper-dark:#DDD3B9;
  --ink:#262420;
  --marsh:#38504A;
  --marsh-deep:#283a35;
  --marsh-light:#7C9987;
  --flamant:#C24F5F;
  --gold:#A9822F;
  --line:#B8AE96;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--marsh-deep);
  color:var(--ink);
  font-family:"Fraunces",serif;
  font-optical-sizing:auto;
}
.mono{font-family:"Space Mono",monospace}
a{color:var(--marsh)}
.page{max-width:1040px;margin:0 auto;background:var(--paper);box-shadow:0 0 60px rgba(0,0,0,.35)}

/* ===== HEADER — couverture de carnet ===== */
header{
  background:var(--marsh);
  color:var(--paper);
  padding:1.2rem 1.5rem 1.6rem;
  text-align:center;
  position:relative;
  border-bottom:6px solid var(--gold);
}
.track{width:34px;height:34px;margin:0 auto .6rem;opacity:.9}
.eyebrow{
  letter-spacing:.22em;text-transform:uppercase;
  font-size:.72rem;color:var(--paper-dark);margin:0 0 .5rem;
}
h1{
  margin:0;font-weight:560;font-style:italic;
  font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:.01em;
}
header h1 a{color:inherit;text-decoration:none}
.intro{
  max-width:38em;margin:.9rem auto 0;
  font-size:1.02rem;line-height:1.5;color:var(--paper);opacity:.92;
}

/* ===== NAV — onglets de classeur ===== */
nav.tabs{
  display:flex;flex-wrap:wrap;
  background:var(--paper-dark);
  border-bottom:1px solid var(--line);
  padding:0 .75rem;
  position:relative;
  overflow:hidden;
}
nav.tabs::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cpath d='M0 30 Q25 12 50 30 T100 30 T150 30 T200 30 T250 30' stroke='%237C9987' stroke-width='2.5' fill='none' opacity='0.55'/%3E%3Cpath d='M0 44 Q25 28 50 44 T100 44 T150 44 T200 44 T250 44' stroke='%23A9822F' stroke-width='1.5' fill='none' opacity='0.35'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:200px 100%;
  animation:wave-drift 11s linear infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes wave-drift{
  from{background-position-x:0}
  to{background-position-x:200px}
}
@media(prefers-reduced-motion:reduce){
  nav.tabs::before{animation:none}
}
nav.tabs a{
  display:block;padding:.85rem .9rem .7rem;
  color:var(--marsh);text-decoration:none;
  font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.03em;
  border-right:1px solid var(--line);position:relative;z-index:1;
}
nav.tabs a .num{color:var(--gold);margin-right:.3em}
nav.tabs a.active{background:var(--paper);color:var(--ink);font-weight:700}
nav.tabs a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--flamant);
}
nav.tabs a:hover{background:var(--paper)}

/* ===== CONTENU ===== */
main{
  padding:2.4rem 2.2rem 3rem;
  border-left:2px solid var(--gold);
  margin-left:1.4rem;
  position:relative;
}
main h2{font-style:italic;font-weight:560;font-size:1.6rem;margin-top:0}
main p{line-height:1.68;font-size:1.03rem;max-width:56em}
main p.lead::first-letter{
  font-size:3.4rem;line-height:.75;float:left;
  padding:.05em .12em 0 0;font-style:italic;color:var(--marsh);
}

/* ===== CARNET-DUO — photo + fiche côte à côte ===== */
.carnet-duo{
  display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:1.6rem;
  align-items:stretch;margin:0 auto 2rem;max-width:44em;
}
.photo-mount{
  background:#fff;padding:.8rem .8rem .6rem;
  box-shadow:0 3px 10px rgba(38,36,32,.22);
  margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;max-width:22rem;justify-self:center;
}
.photo-mount img{
  width:auto;max-width:100%;max-height:13rem;
  object-fit:contain;display:block;
  filter:sepia(.12) saturate(1.05);
}
.photo-mount figcaption{
  font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.04em;
  color:var(--marsh-light);padding:.5rem .1rem 0;text-align:center;
}
.photo-mount.solo{max-width:30em;margin:0 auto 2rem}

/* ===== FICHE — élément signature (étiquette de spécimen) ===== */
.fiche{
  background:var(--paper);border:1px solid var(--line);
  outline:1px dashed var(--gold);outline-offset:-8px;
  padding:1.4rem 1.6rem;margin:0;position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.fiche.solo{max-width:34em;margin:0 auto 2rem}
.fiche h3{
  margin:0 0 .7rem;font-family:"Space Mono",monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.fiche dl{margin:0;font-family:"Space Mono",monospace;font-size:.82rem;line-height:1.9}
.fiche dl div{margin:0 0 .15rem}
.fiche dt{color:var(--marsh-light);display:inline-block;width:9.5em}
.fiche dd{margin:0;display:inline}
.stamp{
  position:absolute;top:-14px;right:-10px;width:74px;height:74px;border-radius:50%;
  border:2px solid var(--flamant);color:var(--flamant);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;
  transform:rotate(-14deg);background:rgba(232,225,206,.9);line-height:1.15;
}

/* ===== liens complémentaires / retour ===== */
.liens-suite{
  margin:2rem 0 0;padding:1rem 1.2rem;
  border-top:1px dashed var(--line);
  font-family:"Space Mono",monospace;font-size:.82rem;line-height:2;
}
.liens-suite a::before{content:"→ ";color:var(--flamant)}
.retour{
  display:inline-block;margin-top:1.6rem;
  font-family:"Space Mono",monospace;font-size:.8rem;
  color:var(--marsh);text-decoration:none;
}
.retour::before{content:"← ";color:var(--flamant)}

/* ===== audio ===== */
audio{width:100%;max-width:32em;margin:.6rem 0 1.2rem;display:block}

/* ===== FOOTER ===== */
footer{
  background:var(--marsh);color:var(--paper-dark);text-align:center;padding:1.6rem;
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.03em;
  border-top:6px solid var(--gold);
}
footer p{margin:.25rem 0}
footer a{color:var(--gold)}
footer a:hover{color:var(--paper)}
.meme-auteur{
  margin-top:1rem !important;
  padding-top:1rem;
  border-top:1px dashed rgba(232,225,206,.35);
  font-size:.78rem;
}
.meme-auteur .label{
  display:block;text-transform:uppercase;letter-spacing:.18em;
  font-size:.62rem;color:var(--paper-dark);opacity:.75;margin-bottom:.4rem;
}
.meme-auteur a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.meme-auteur .sep{color:var(--flamant);margin:0 .5em}

@media(max-width:680px){
  .carnet-duo{grid-template-columns:1fr;max-width:26em}
  .photo-mount{max-width:100%}
  main{margin-left:0;border-left:none;padding:1.6rem 1.2rem 2.4rem}
  nav.tabs a{flex:1 1 45%;border-bottom:1px solid var(--line)}
}