/* ===================================================================
   La Chouette — feuille de style commune
   Identité : le crépuscule hégélien. Partagée par toutes les pages.
   =================================================================== */

:root{
  --papier:      #F1EFE8;
  --papier-2:    #E8E5DB;
  --encre:       #262340;
  --encre-2:     #3B3760;
  --nuit-haut:   #1E1B38;
  --nuit-bas:    #4A3F6B;
  --horizon:     #8A5A46;
  --ambre:       #DFA32E;
  --ambre-clair: #F0C468;
  --mauve:       #8D82A8;
  --filet:       #C9C4B4;

  --display: 'Young Serif', Georgia, serif;
  --body:    'Spectral', Georgia, serif;
  --mono:    'Fragment Mono', 'Courier New', monospace;

  --mesure: 66ch;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--papier);
  color:var(--encre);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--ambre);
  outline-offset:3px;
  border-radius:2px;
}

.mono{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* ---------- Masthead crépusculaire ---------- */
.ciel{
  background:linear-gradient(to bottom, var(--nuit-haut) 0%, var(--nuit-bas) 72%, var(--horizon) 100%);
  color:var(--papier);
  text-align:center;
  padding:clamp(2.5rem, 6vw, 4.5rem) var(--gouttiere) clamp(2rem, 5vw, 3.25rem);
  position:relative;
  overflow:hidden;
}
.ciel::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(to right, transparent, var(--ambre) 30%, var(--ambre-clair) 50%, var(--ambre) 70%, transparent);
}
.etoiles{ position:absolute; inset:0; pointer-events:none; }
.etoiles span{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--papier); opacity:.5;
}
.etoiles span:nth-child(1){ top:18%; left:12%; }
.etoiles span:nth-child(2){ top:32%; left:26%; opacity:.3; }
.etoiles span:nth-child(3){ top:14%; left:71%; }
.etoiles span:nth-child(4){ top:38%; left:84%; opacity:.35; }
.etoiles span:nth-child(5){ top:52%; left:8%;  opacity:.25; }
.etoiles span:nth-child(6){ top:46%; left:64%; opacity:.4; }
.etoiles span:nth-child(7){ top:22%; left:46%; opacity:.3; }

.chouette{ display:inline-block; margin-bottom:1.1rem; overflow:visible; cursor:pointer; }

/* ---------- Ailes de l'emblème : trois pointes, tracées au survol / au toucher ---------- */
.aile path{
  fill:none; stroke:var(--mauve); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1), opacity .15s ease;
}
.chouette.ailes-ouvertes .aile path,
a:focus-visible .chouette .aile path{ stroke-dashoffset:0; opacity:1; }
@media (hover:hover){
  .chouette:hover .aile path{ stroke-dashoffset:0; opacity:1; }
}
.oeil-paupiere{ transform-origin:center; animation:clignement 8s infinite; }
@keyframes clignement{
  0%, 91%, 100%{ transform:scaleY(0); }
  93%, 96%{ transform:scaleY(1); }
}

.masthead-titre{
  font-family:var(--display);
  font-size:clamp(2.6rem, 8vw, 5.2rem);
  line-height:1;
  letter-spacing:0.01em;
}
.masthead-titre a{ text-decoration:none; }
.masthead-devise{
  margin-top:0.9rem;
  color:var(--mauve);
  font-style:italic;
  font-size:clamp(1rem, 2.2vw, 1.15rem);
}
.masthead-devise em{ color:var(--ambre-clair); font-style:italic; }

/* ---------- En-tête réduit (pages intérieures) ---------- */
.ciel.ciel-reduit{
  padding:clamp(1.5rem, 4vw, 2.25rem) var(--gouttiere);
}
.ciel-reduit .masthead-titre{ font-size:clamp(1.8rem, 5vw, 2.6rem); }
.ciel-reduit .chouette{ margin-bottom:0.5rem; }

/* ---------- Navigation ---------- */
.rubriques{
  border-bottom:1px solid var(--filet);
  background:var(--papier);
  position:sticky; top:0; z-index:10;
}
.rubriques ul{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 clamp(1rem, 3vw, 2.5rem);
  padding:0.9rem var(--gouttiere);
}
.rubriques a{
  text-decoration:none;
  color:var(--encre-2);
  padding:0.25rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
.rubriques a:hover, .rubriques a[aria-current="page"]{
  color:var(--encre); border-bottom-color:var(--ambre);
}
.rubriques .rub-fun a{ color:var(--horizon); }

/* ---------- Structure ---------- */
.page{ max-width:1120px; margin:0 auto; padding:0 var(--gouttiere); }

/* ---------- Une ---------- */
.une{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
  gap:clamp(1.5rem, 4vw, 4rem);
  padding:clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  align-items:end;
}
.une-label{ color:var(--horizon); display:block; margin-bottom:1rem; }
.une h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 4.6vw, 3.4rem);
  line-height:1.12;
  text-wrap:balance;
}
.une h1 a{ text-decoration:none; }
.une h1 a:hover{ color:var(--encre-2); }
.une-chapo p{ font-size:1.05rem; color:var(--encre-2); max-width:var(--mesure); }
.une-meta{ margin-top:1.3rem; color:var(--mauve); }
.une-meta .duree{ color:var(--ambre); }

.filet-plume{
  border:none; height:1px; background:var(--filet);
  position:relative; overflow:visible;
}
.filet-plume::after{
  content:"◦"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--mauve); background:var(--papier); padding:0 0.7rem;
  font-size:0.8rem;
}

/* ---------- Grille d'articles ---------- */
.sommaire{ padding:clamp(2rem, 5vw, 3.5rem) 0; }
.sommaire-titre{ color:var(--mauve); margin-bottom:2rem; }
.grille{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.carte{
  border-top:2px solid var(--encre);
  padding-top:1.1rem;
  display:flex; flex-direction:column; gap:0.7rem;
}
.carte .rubrique{ color:var(--horizon); }
.carte.legere .rubrique{ color:var(--ambre); }
.carte h2{
  font-family:var(--display); font-weight:400;
  font-size:1.35rem; line-height:1.25; text-wrap:balance;
}
.carte h2 a{ text-decoration:none; }
.carte h2 a:hover{ text-decoration:underline; text-decoration-color:var(--ambre); text-underline-offset:4px; }
.carte p{ color:var(--encre-2); font-size:0.98rem; }
.carte .meta{ margin-top:auto; color:var(--mauve); }

/* ---------- Citation du soir ---------- */
.veillee{
  background:linear-gradient(to bottom, var(--nuit-bas), var(--nuit-haut));
  color:var(--papier);
  margin:clamp(2rem, 5vw, 3.5rem) 0;
  padding:clamp(2.5rem, 6vw, 4rem) var(--gouttiere);
  text-align:center; border-radius:6px;
}
.veillee .mono{ color:var(--ambre); display:block; margin-bottom:1.4rem; }
.veillee blockquote{
  font-family:var(--display);
  font-size:clamp(1.3rem, 3vw, 1.9rem);
  line-height:1.35; max-width:32ch; margin:0 auto; text-wrap:balance;
}
.veillee figcaption{ margin-top:1.2rem; color:var(--mauve); font-style:italic; }

/* ---------- Newsletter ---------- */
.tournee{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
  padding:0 0 clamp(3rem, 7vw, 5rem);
}
.tournee h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2.1rem); margin-bottom:0.6rem;
}
.tournee p{ color:var(--encre-2); max-width:var(--mesure); }
.tournee form{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.tournee input[type="email"]{
  flex:1 1 220px;
  font-family:var(--body); font-size:1rem;
  padding:0.75rem 1rem;
  border:1px solid var(--filet);
  background:var(--papier-2); color:var(--encre);
  border-radius:3px;
}
.tournee button{
  font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:0.75rem 1.4rem;
  background:var(--encre); color:var(--papier);
  border:none; border-radius:3px; cursor:pointer;
  transition:background .2s;
}
.tournee button:hover{ background:var(--nuit-bas); }

/* ===================================================================
   PAGE D'ARTICLE — typographie de lecture longue
   =================================================================== */
.article{
  max-width:var(--mesure);
  margin:0 auto;
  padding:clamp(2.5rem, 6vw, 4.5rem) var(--gouttiere) clamp(3rem, 7vw, 5rem);
}
.article-fil{ color:var(--mauve); margin-bottom:1.4rem; }
.article-fil a{ color:var(--mauve); text-decoration:none; }
.article-fil a:hover{ color:var(--encre); }

.article h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 5vw, 3.1rem);
  line-height:1.12; text-wrap:balance;
  margin-bottom:1.2rem;
}
.article-rubrique{ color:var(--horizon); display:block; margin-bottom:0.8rem; }
.article-chapo{
  font-size:1.2rem; font-style:italic; color:var(--encre-2);
  line-height:1.5; margin-bottom:1.6rem;
}
.article-signe{ color:var(--mauve); margin-bottom:2.5rem; }
.article-signe .duree{ color:var(--ambre); }

.article hr.filet-article{
  border:none; height:1px; background:var(--filet);
  margin:2.5rem 0;
}

/* Corps */
.article-corps > p{ margin:0 0 1.3rem; }
.article-corps > p:first-of-type::first-letter{
  font-family:var(--display);
  font-size:3.4rem; line-height:0.8;
  float:left; margin:0.1rem 0.6rem 0 0;
  color:var(--horizon);
}
.article-corps h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem, 3vw, 1.85rem);
  line-height:1.2; margin:2.6rem 0 1rem;
  text-wrap:balance;
}
.article-corps h3{
  font-family:var(--body); font-weight:500; font-style:italic;
  font-size:1.2rem; margin:1.8rem 0 0.8rem; color:var(--encre-2);
}
.article-corps blockquote{
  margin:1.8rem 0; padding:0.4rem 0 0.4rem 1.6rem;
  border-left:3px solid var(--ambre);
  font-style:italic; color:var(--encre-2);
  font-size:1.1rem;
}
.article-corps em{ font-style:italic; }
.article-corps strong{ font-weight:500; }
.article-corps a{ color:var(--horizon); text-underline-offset:3px; }

.article-bas{
  max-width:var(--mesure); margin:0 auto;
  padding:0 var(--gouttiere) clamp(3rem,7vw,5rem);
}
.retour-sommaire{
  display:inline-block; margin-top:1rem;
  font-family:var(--mono); font-size:0.75rem;
  letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; color:var(--encre);
  border-bottom:2px solid var(--ambre); padding-bottom:2px;
}
.retour-sommaire:hover{ color:var(--horizon); }

/* ===================================================================
   PAGES ANNEXES (manifeste, archives, etc.)
   =================================================================== */
.contenu{
  max-width:var(--mesure); margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) var(--gouttiere) clamp(3rem,7vw,5rem);
}
.contenu h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4.5vw,2.8rem); margin-bottom:1.5rem;
}
.contenu h2{
  font-family:var(--display); font-weight:400;
  font-size:1.4rem; margin:2.2rem 0 0.9rem;
}
.contenu p{ margin:0 0 1.2rem; }
.contenu a{ color:var(--horizon); }
.contenu ul{ margin:0 0 1.2rem 1.4rem; }
.contenu li{ margin-bottom:0.5rem; }

.archives-liste{ list-style:none; margin:0; }
.archives-liste li{
  border-top:1px solid var(--filet); padding:1.1rem 0;
}
.archives-liste a{ text-decoration:none; }
.archives-liste h2{
  font-family:var(--display); font-size:1.25rem; font-weight:400;
  margin:0 0 0.3rem;
}
.archives-liste h2 a:hover{ color:var(--horizon); }
.archives-liste .meta{ color:var(--mauve); font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }

/* ---------- Pied de page ---------- */
footer{
  border-top:1px solid var(--filet);
  padding:2rem var(--gouttiere) 2.5rem;
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between; align-items:baseline;
  color:var(--mauve);
  max-width:1120px; margin:0 auto;
}
footer nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--encre); }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .une, .tournee{ grid-template-columns:1fr; }
  .une{ align-items:start; }
}