/* ============================================================================
   50ans.ayassou.net — feuille de style

   Vous n'avez normalement PAS besoin de toucher à ce fichier pour mettre le
   site à jour : tout le texte et toutes les images se modifient dans
   « index.html ». Ce fichier ne décide que de l'apparence.

   LES COULEURS viennent de ses propres photographies :
     l'indigo du pagne, le rouge de l'impression du 25e anniversaire, le
     papier jauni des documents d'archive. Elles ne sont pas choisies au
     hasard, et il vaut mieux ne pas les remplacer par des couleurs vives.
   ========================================================================= */

:root {
  --papier:      #f4f1e9;   /* le fond : papier d'archive */
  --papier-fort: #e9e4d6;   /* creux, séparations */
  --surface:     #fffdf7;   /* les cartes posées sur le papier */
  --encre:       #1b1a16;   /* le texte */
  --encre-douce: #5a554a;   /* le texte secondaire */
  --filet:       #d9d2c1;   /* les traits */

  /* L'INDIGO : la couleur de travail. Titres, liens, repères. */
  --indigo:      #23395b;
  --indigo-pale: #e4e8ef;

  /* LE ROUGE : la mémoire. Employé rarement — les dates de 1958 et de 1975. */
  --terre:       #a63d24;
  --terre-pale:  #f6e4de;

  /* L'OR : l'hommage de la République, en 2025. UNE SEULE FOIS dans la page. */
  --or:          #8a6b1f;
  --or-pale:     #f7efd8;

  --serif: "Petrona", "Bitstream Charter", Georgia, serif;
  --sans:  "Karla", "Segoe UI", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", Consolas, ui-monospace, monospace;

  --lu: 34rem;          /* largeur de lecture confortable */
  --large: 68rem;       /* largeur de page */
}

/* Le thème sombre : le papier devient nuit, l'encre devient craie.
   Il suit le réglage du téléphone ou de l'ordinateur du visiteur. */
@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #14130f;
    --papier-fort: #1c1a15;
    --surface:     #201d17;
    --encre:       #ece7da;
    --encre-douce: #a09a8b;
    --filet:       #332f26;

    --indigo:      #8fb0d8;
    --indigo-pale: #17202e;
    --terre:       #e08d72;
    --terre-pale:  #331a13;
    --or:          #d9b45a;
    --or-pale:     #2b2410;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1rem; max-width: var(--lu); }
p:last-child { margin-bottom: 0; }

a { color: var(--indigo); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 3px;
}

/* `height: auto` N'EST PAS FACULTATIF.
   Les attributs width et height posés dans le HTML sont des indications de
   présentation : le navigateur les traduit en `width` et `height` CSS. Notre
   règle `width: 100%` remplace la largeur — mais la HAUTEUR de l'attribut
   reste, et l'image est étirée. Le portrait s'affichait en 300 x 900 : un
   visage allongé, et aucune erreur nulle part. Cela ne se voit qu'à l'écran. */
img { max-width: 100%; height: auto; display: block; }

.oeil {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Ce qui n'existe que pour les lecteurs d'écran. */
.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.saut:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
  margin: 0; clip-path: none; background: var(--surface); color: var(--encre);
  padding: .8rem 1.2rem; border-radius: 4px; z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------ navigation */

.barre {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
.barre .dedans {
  max-width: var(--large); margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
}
.barre .nom {
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; color: var(--encre); white-space: nowrap;
}
.barre nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.barre nav a {
  font-size: .88rem; color: var(--encre-douce); text-decoration: none;
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.barre nav a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }

/* Sur un téléphone, la barre repliée sur deux lignes mangeait 150 px de haut —
   soit un cinquième de l'écran, avant même le premier mot. Les liens défilent
   donc horizontalement, sur une seule ligne. */
@media (max-width: 46rem) {
  .barre .dedans { flex-direction: column; align-items: stretch; gap: .5rem; padding: .6rem 1.5rem .5rem; }
  .barre nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.3rem;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .barre nav::-webkit-scrollbar { display: none; }
  .barre nav a { white-space: nowrap; }
}

/* ------------------------------------------------------------------ page */

.page { max-width: var(--large); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 4.5rem 0; border-top: 1px solid var(--filet); }
section:first-of-type { border-top: 0; }
section > .titre { margin-bottom: 1.6rem; }
section h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* ------------------------------------------------------------------ hero */
/* Le portrait est présenté comme une PLANCHE D'ARCHIVE encadrée, posée sur
   le papier — et non en fond d'écran recadré. C'est un document, pas une
   image d'ambiance. */

.ouverture {
  display: grid; gap: 2.5rem; align-items: center;
  padding: 3.5rem 0 4.5rem;
}
@media (min-width: 54rem) {
  .ouverture { grid-template-columns: 22rem 1fr; gap: 3.5rem; }
  .planche { max-width: none; margin: 0; }
}

.planche {
  /* Sur un écran étroit la planche s'empile au-dessus du titre : sans plafond
     elle occuperait toute la largeur et écraserait le nom. 20rem la garde à la
     taille d'un portrait encadré, pas d'une affiche. */
  max-width: 20rem;
  margin: 0 auto;
  background: var(--surface);
  padding: .9rem;
  border: 1px solid var(--filet);
  box-shadow: 0 14px 40px rgba(35, 57, 91, .13), 0 2px 6px rgba(35, 57, 91, .08);
}
.planche img { width: 100%; height: auto; }
.planche figcaption {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-douce);
  padding-top: .7rem; text-align: center;
}

.ouverture h1 {
  font-size: clamp(2.4rem, 7vw, 4rem);
  margin-bottom: .6rem;
}
.ouverture .qualite {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--indigo); margin-bottom: 1rem;
}
.ouverture .vie {
  font-family: var(--mono); font-size: .95rem; letter-spacing: .1em;
  color: var(--terre); margin-bottom: 1.6rem;
}
.ouverture .phrase {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.45; max-width: 30rem;
  border-left: 3px solid var(--indigo); padding-left: 1.1rem;
}

/* ------------------------------------------------------------- le sceau */
/* L'OR N'APPARAÎT QUE DANS CE BLOC. C'est l'hommage de la République, et le
   distinguer de tout le reste est le but. */

.sceau {
  background: var(--or-pale);
  border: 1px solid var(--or);
  border-radius: 4px;
  padding: 2rem 2.2rem;
  margin: 0 0 1rem;
}
.sceau .oeil { color: var(--or); }
.sceau h2 { color: var(--or); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: .5rem 0 1rem; }
.sceau .mention {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.4;
  background: var(--surface); border-left: 4px solid var(--or);
  padding: 1rem 1.2rem; margin: 1.2rem 0; max-width: 32rem;
}
.sceau p { color: var(--encre); }

/* --------------------------------------------------------- chronologie */

.frise { border-left: 2px solid var(--filet); padding-left: 1.6rem; margin-top: 2rem; }
.frise .etape { padding-bottom: 2.2rem; position: relative; }
.frise .etape:last-child { padding-bottom: 0; }
.frise .etape::before {
  content: ""; position: absolute; left: calc(-1.6rem - 6px); top: .55rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--indigo);
}
/* Les deux dates qui marquent la mémoire portent le rouge, pas l'indigo. */
.frise .etape.memoire::before { border-color: var(--terre); background: var(--terre); }

.frise .an {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  color: var(--indigo); display: block; margin-bottom: .3rem;
}
.frise .etape.memoire .an { color: var(--terre); }
.frise h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.frise p { font-size: .97rem; }

/* ------------------------------------------------------------- archives */
/* Chaque pièce est montrée comme dans une vitrine : la planche, puis une
   étiquette qui dit ce que c'est et d'où cela vient. */

.vitrine { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 50rem) { .vitrine { grid-template-columns: repeat(2, 1fr); } }

.piece { background: var(--surface); border: 1px solid var(--filet); border-radius: 3px; }
.piece img { width: 100%; height: auto; }
.piece .etiquette { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--filet); }
.piece .etiquette h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.piece .etiquette p { font-size: .9rem; color: var(--encre-douce); margin-bottom: .5rem; }
.piece .provenance {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--encre-douce); text-transform: uppercase;
}

/* ------------------------------------------------------------- citation */

.citation {
  background: var(--terre-pale);
  border-left: 4px solid var(--terre);
  padding: 1.6rem 1.8rem;
  margin: 2rem 0;
  max-width: 40rem;
}
.citation blockquote {
  margin: 0 0 .8rem;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.45;
  color: var(--terre);
}
.citation cite { font-style: normal; font-size: .85rem; color: var(--encre-douce); }

/* ----------------------------------------------------------------- fiche */

.deux { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 50rem) { .deux { grid-template-columns: 1fr 1fr; } }

.fiche {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 3px; padding: 1.4rem 1.6rem;
}
.fiche h3 { font-size: 1.1rem; color: var(--indigo); margin-bottom: .6rem; }
.fiche p { font-size: .96rem; }
.fiche ul { margin: 0; padding-left: 1.1rem; font-size: .96rem; }
.fiche li { margin-bottom: .35rem; }

/* ------------------------------------------------------------- mémoire */

.memoire-bloc {
  background: var(--indigo-pale);
  border-radius: 4px;
  padding: 2.2rem 2.4rem;
  text-align: center;
}
.memoire-bloc .dates {
  font-family: var(--mono); font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: .1em; color: var(--indigo); margin-bottom: 1rem;
}
.memoire-bloc p { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- contact */

.appel {
  border: 1px dashed var(--indigo);
  border-radius: 4px; padding: 1.6rem 1.8rem;
  max-width: 40rem;
}
.appel a { font-weight: 600; }

/* -------------------------------------------------------------- pied */

footer.pied {
  border-top: 2px solid var(--encre);
  margin-top: 3rem; padding: 2.5rem 0 4rem;
  font-size: .85rem; color: var(--encre-douce);
}
footer.pied p { max-width: 44rem; }
footer.pied .sources { margin-top: 1rem; }
footer.pied .sources li { margin-bottom: .3rem; }