/*
  ============================================================
  styles.css — Salon du Livre 2026
  ============================================================
  Licence : MIT — Copyright (c) 2026 Salon du Livre

  STRUCTURE :
    1.  Variables CSS & reset
    2.  Typographie globale
    3.  En-tête
    4.  Menu navigation latéral (JS)
    5.  Contrôles globaux (JS)
    6.  Contenu principal
    7.  Fiches auteurs
    8.  Images
    9.  Pied de page
   10.  États JavaScript (body.js-actif)
   11.  Media queries (responsive)
   12.  Styles d'impression
  ============================================================
*/


/* ═══════════════════════════════════════════════════════════
   1. VARIABLES CSS & RESET
═══════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --c-fond          : #0a0a0a;
  --c-fond-alt      : #111111;
  --c-fond-carte    : #141414;
  --c-fond-section  : #1a1a1a;
  --c-texte         : #e8e8e8;
  --c-texte-doux    : #aaaaaa;
  --c-texte-discret : #666666;
  --c-accent        : #c8a96e;  /* or littéraire */
  --c-accent-clair  : #e0c080;
  --c-lien          : #c8a96e;
  --c-lien-survol   : #ffffff;
  --c-bord          : #2a2a2a;
  --c-bord-fort     : #3a3a3a;
  --c-menu-fond     : #0d0d0d;
  --c-menu-survol   : #1e1e1e;
  --c-overlay       : rgba(0,0,0,0.75);
  --c-btn-fond      : #1e1e1e;
  --c-btn-survol    : #2e2e2e;

  /* Typographie */
  --police       : Arial, Helvetica, sans-serif;
  --lh           : 1.7;

  /* Espacements */
  --sp-xs  : 0.25rem;
  --sp-s   : 0.5rem;
  --sp-m   : 1rem;
  --sp-l   : 2rem;
  --sp-xl  : 3rem;
  --sp-xxl : 5rem;

  /* Layout */
  --larg-contenu : 860px;
  --larg-menu    : 320px;
  --rayon        : 4px;

  /* Transitions */
  --tr-vite    : 0.15s ease;
  --tr-normale : 0.25s ease;
  --tr-lente   : 0.4s ease;

  /* Taille images */
  --img-max        : 10cm;
  --img-max-mobile : 70%;
  --img-thumb      : 1.5cm;
}

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

html {
  scroll-behavior : smooth;
  font-size       : 16px;
}

body {
  background : var(--c-fond);
  color      : var(--c-texte);
  font-family: var(--police);
  line-height: var(--lh);
  -webkit-font-smoothing : antialiased;
  min-height : 100vh;
}

:focus-visible {
  outline        : 2px solid var(--c-accent);
  outline-offset : 3px;
  border-radius  : var(--rayon);
}


/* ═══════════════════════════════════════════════════════════
   2. TYPOGRAPHIE GLOBALE
═══════════════════════════════════════════════════════════ */

/* Titre de page dans <header> */
.page-titre {
  font-family    : var(--police);
  font-size      : clamp(1.8rem, 4vw, 3rem);
  font-weight    : 700;
  letter-spacing : 0.04em;
  color          : #ffffff;
  line-height    : 1.15;
  margin         : 0;
}

/* H1 auteur */
h1.auteur-nom {
  font-family    : var(--police);
  font-size      : clamp(1.3rem, 3vw, 1.9rem);
  font-weight    : 700;
  letter-spacing : 0.03em;
  color          : var(--c-accent);
  line-height    : 1.2;
  padding        : var(--sp-l) var(--sp-l) var(--sp-m);
  border-bottom  : 1px solid var(--c-bord-fort);
  display        : flex;
  align-items    : center;
  gap            : var(--sp-m);
  flex-wrap      : wrap;
}

/* H2 de section */
h2 {
  font-family    : var(--police);
  font-size      : clamp(0.9rem, 2vw, 1.1rem);
  font-weight    : 600;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : var(--c-texte-doux);
  border-left    : 3px solid var(--c-accent);
  padding-left   : var(--sp-m);
  margin-bottom  : var(--sp-m);
}

p {
  margin-bottom : var(--sp-m);
  max-width     : 72ch;
}

em   { font-style: italic; color: var(--c-texte); }
strong { font-weight: 700; color: #ffffff; }

a {
  color               : var(--c-lien);
  text-decoration     : underline;
  text-underline-offset: 3px;
  transition          : color var(--tr-vite);
}
a:hover, a:focus-visible { color: var(--c-lien-survol); }


/* ═══════════════════════════════════════════════════════════
   3. EN-TÊTE
═══════════════════════════════════════════════════════════ */

#entete {
  position         : sticky;
  top              : 0;
  z-index          : 100;
  background       : var(--c-fond);
  border-bottom    : 1px solid var(--c-bord-fort);
  padding          : var(--sp-m) var(--sp-l);
  display          : flex;
  align-items      : center;
  gap              : var(--sp-l);
}

.entete-inner { flex: 1; }

.entete-surtitre {
  font-size      : 0.7rem;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--c-texte-discret);
  margin-bottom  : var(--sp-xs);
}

.entete-sous-titre {
  font-size     : 0.85rem;
  color         : var(--c-texte-doux);
  margin-top    : var(--sp-xs);
  margin-bottom : 0;
}

/* Bouton menu hamburger */
#bouton-menu {
  background    : var(--c-btn-fond);
  color         : var(--c-texte);
  border        : 1px solid var(--c-bord-fort);
  border-radius : var(--rayon);
  padding       : var(--sp-s) var(--sp-m);
  font-family   : var(--police);
  font-size     : 0.9rem;
  cursor        : pointer;
  white-space   : nowrap;
  order         : -1;
  flex-shrink   : 0;
  transition    : background var(--tr-vite), border-color var(--tr-vite);
}
#bouton-menu:hover {
  background   : var(--c-btn-survol);
  border-color : var(--c-accent);
}
.burger-icone { margin-right: var(--sp-xs); }


/* ═══════════════════════════════════════════════════════════
   4. MENU NAVIGATION LATÉRAL
═══════════════════════════════════════════════════════════ */

/* Fond semi-transparent */
#menu-overlay {
  position   : fixed;
  inset      : 0;
  background : var(--c-overlay);
  z-index    : 149;
  opacity    : 0;
  transition : opacity var(--tr-normale);
  pointer-events : none;
}
#menu-overlay.actif {
  opacity        : 1;
  pointer-events : auto;
}

/* Panneau latéral */
#menu-nav {
  position         : fixed;
  top              : 0;
  left             : 0;
  bottom           : 0;
  width            : var(--larg-menu);
  max-width        : 90vw;
  background       : var(--c-menu-fond);
  border-right     : 1px solid var(--c-bord-fort);
  z-index          : 150;
  overflow-y       : auto;
  overflow-x       : hidden;
  transform        : translateX(-100%);
  transition       : transform var(--tr-normale);
  scrollbar-width  : thin;
  scrollbar-color  : var(--c-bord-fort) transparent;
}
#menu-nav.ouvert { transform: translateX(0); }

#menu-nav-interieur {
  padding : var(--sp-xl) var(--sp-m) var(--sp-xxl);
}

/* Titre en haut du menu */
.menu-titre {
  font-size      : 0.7rem;
  letter-spacing : 0.2em;
  text-transform : uppercase;
  color          : var(--c-texte-discret);
  padding        : 0 var(--sp-s) var(--sp-m);
  border-bottom  : 1px solid var(--c-bord);
  margin-bottom  : var(--sp-s);
}

/* Lien auteur dans le menu */
.menu-lien-auteur {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-m);
  padding         : var(--sp-s);
  border-radius   : var(--rayon);
  text-decoration : none;
  color           : var(--c-texte-doux);
  font-size       : 0.9rem;
  border-bottom   : 1px solid var(--c-bord);
  transition      : background var(--tr-vite), color var(--tr-vite);
}
.menu-lien-auteur:hover {
  background : var(--c-menu-survol);
  color      : var(--c-accent);
}

/* Miniature auteur dans le menu */
.menu-thumb {
  width        : var(--img-thumb);
  height       : var(--img-thumb);
  min-width    : var(--img-thumb);
  border-radius: 50%;
  object-fit   : cover;
  border       : 1px solid var(--c-bord-fort);
  background   : var(--c-fond-alt);
  flex-shrink  : 0;
}

/* Fallback initiales (si pas de photo) */
.menu-initiales {
  width           : var(--img-thumb);
  height          : var(--img-thumb);
  min-width       : var(--img-thumb);
  border-radius   : 50%;
  border          : 1px solid var(--c-accent);
  background      : var(--c-fond-section);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 0.62rem;
  font-weight     : 700;
  color           : var(--c-accent);
  letter-spacing  : 0.05em;
  flex-shrink     : 0;
}


/* ═══════════════════════════════════════════════════════════
   5. CONTRÔLES GLOBAUX (boutons + et − en haut à droite)
═══════════════════════════════════════════════════════════ */

#controles-globaux {
  display     : flex;
  gap         : var(--sp-xs);
  flex-shrink : 0;
}

#btn-tout-deplier,
#btn-tout-replier {
  background      : var(--c-btn-fond);
  color           : var(--c-texte);
  border          : 1px solid var(--c-bord-fort);
  border-radius   : var(--rayon);
  width           : 2.2rem;
  height          : 2.2rem;
  font-size       : 1.3rem;
  font-weight     : 700;
  line-height     : 1;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--police);
  transition      : background var(--tr-vite), border-color var(--tr-vite), color var(--tr-vite);
}
#btn-tout-deplier:hover,
#btn-tout-replier:hover {
  background   : var(--c-accent);
  border-color : var(--c-accent);
  color        : #000000;
}


/* ═══════════════════════════════════════════════════════════
   6. CONTENU PRINCIPAL
═══════════════════════════════════════════════════════════ */

#contenu-principal {
  max-width : var(--larg-contenu);
  margin    : var(--sp-xl) auto;
  padding   : 0 var(--sp-l);
}


/* ═══════════════════════════════════════════════════════════
   7. FICHES AUTEURS
═══════════════════════════════════════════════════════════ */

article.auteur {
  background    : var(--c-fond-carte);
  border        : 1px solid var(--c-bord);
  border-radius : var(--rayon);
  margin-bottom : var(--sp-xl);
  overflow      : hidden;
  /* Révélation progressive au scroll (JS) */
  opacity       : 1;
  transform     : translateY(0);
  transition    : opacity var(--tr-lente), transform var(--tr-lente),
                  border-color var(--tr-normale);
}
article.auteur:hover   { border-color: var(--c-bord-fort); }
article.auteur.en-attente { opacity: 0; transform: translateY(20px); }
article.auteur.visible    { opacity: 1 !important; transform: translateY(0) !important; }

.auteur-contenu {
  padding    : var(--sp-l);
  overflow   : hidden;
  transition : max-height var(--tr-lente) ease, opacity var(--tr-normale) ease;
}
.auteur-contenu.replie {
  max-height     : 0 !important;
  opacity        : 0;
  padding-top    : 0;
  padding-bottom : 0;
}

.section-livre {
  margin-bottom  : var(--sp-xl);
  padding-bottom : var(--sp-xl);
  border-bottom  : 1px solid var(--c-bord);
}
.section-auteur {
  margin-bottom  : 0;
  padding-bottom : 0;
}

.resume,
.biographie  { color: var(--c-texte); margin-bottom: var(--sp-l); }
.site-web    { font-size: 0.9rem; color: var(--c-texte-doux); margin-bottom: var(--sp-s); }
.infos-diverses {
  font-size    : 0.85rem;
  color        : var(--c-texte-doux);
  border-left  : 2px solid var(--c-bord-fort);
  padding-left : var(--sp-m);
  margin-bottom: 0;
}

/* Bouton toggle individuel (injecté par JS) */
.toggle-auteur {
  margin-left     : auto;
  flex-shrink     : 0;
  background      : var(--c-btn-fond);
  color           : var(--c-texte-doux);
  border          : 1px solid var(--c-bord-fort);
  border-radius   : var(--rayon);
  width           : 2rem;
  height          : 2rem;
  font-size       : 1.2rem;
  font-weight     : 700;
  line-height     : 1;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-family     : var(--police);
  transition      : background var(--tr-vite), border-color var(--tr-vite), color var(--tr-vite);
}
.toggle-auteur:hover {
  background   : var(--c-accent);
  border-color : var(--c-accent);
  color        : #000000;
}

/* H1 cliquable (JS) */
body.js-actif h1.auteur-nom { cursor: pointer; }
body.js-actif h1.auteur-nom:hover { background: var(--c-fond-alt); }

/* Miniature dans le H1 (injectée par JS) */
.auteur-nom-thumb {
  display      : none;
  width        : var(--img-thumb);
  height       : var(--img-thumb);
  min-width    : var(--img-thumb);
  border-radius: 50%;
  object-fit   : cover;
  border       : 1px solid var(--c-bord-fort);
  background   : var(--c-fond-alt);
  flex-shrink  : 0;
}
body.js-actif .auteur-nom-thumb { display: block; }


/* ═══════════════════════════════════════════════════════════
   8. IMAGES
═══════════════════════════════════════════════════════════ */

.figure-media {
  display        : flex;
  flex-direction : column;
  align-items    : flex-start;
  margin-bottom  : var(--sp-l);
}

/* Taille max = résolution naturelle OU 10 cm, le plus petit */
.photo-livre,
.photo-auteur {
  max-width     : var(--img-max);
  width         : auto;
  height        : auto;
  display       : block;
  border        : 1px solid var(--c-bord);
  border-radius : var(--rayon);
  background    : var(--c-fond-alt);
}

.photo-livre  { box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.photo-auteur {
  border-radius : calc(var(--rayon) * 2);
  box-shadow    : 0 4px 16px rgba(0,0,0,0.5);
}

.figure-media figcaption {
  margin-top : var(--sp-xs);
  font-size  : 0.75rem;
  color      : var(--c-texte-discret);
  font-style : italic;
}


/* ═══════════════════════════════════════════════════════════
   9. PIED DE PAGE
═══════════════════════════════════════════════════════════ */

#pied-de-page {
  background  : var(--c-fond-alt);
  border-top  : 1px solid var(--c-bord-fort);
  padding     : var(--sp-xxl) var(--sp-l) var(--sp-xl);
  margin-top  : var(--sp-xxl);
}

.footer-grille {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
  gap                   : var(--sp-xl);
  max-width             : var(--larg-contenu);
  margin                : 0 auto var(--sp-xl);
}

.footer-titre {
  font-weight    : 700;
  color          : var(--c-accent);
  font-size      : 0.8rem;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  margin-bottom  : var(--sp-m);
}
.footer-col p {
  font-size     : 0.85rem;
  color         : var(--c-texte-doux);
  margin-bottom : var(--sp-s);
}

.footer-copyright {
  max-width   : var(--larg-contenu);
  margin      : 0 auto;
  border-top  : 1px solid var(--c-bord);
  padding-top : var(--sp-l);
  text-align  : center;
}
.footer-copyright p {
  font-size     : 0.78rem;
  color         : var(--c-texte-discret);
  max-width     : none;
  margin-bottom : var(--sp-s);
}
.footer-technique { font-size: 0.72rem !important; }


/* ═══════════════════════════════════════════════════════════
   10. ÉTATS JAVASCRIPT
       Appliqués quand body a la classe .js-actif
═══════════════════════════════════════════════════════════ */

body.js-actif #bouton-menu,
body.js-actif #controles-globaux { display: flex; }


/* ═══════════════════════════════════════════════════════════
   11. MEDIA QUERIES — RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  :root { --larg-menu: 280px; }

  #entete {
    padding   : var(--sp-s) var(--sp-m);
    flex-wrap : wrap;
    gap       : var(--sp-s);
  }
  .entete-sous-titre { display: none; }

  #contenu-principal {
    padding : 0 var(--sp-m);
    margin  : var(--sp-l) auto;
  }

  h1.auteur-nom {
    padding   : var(--sp-m);
    font-size : 1.2rem;
  }

  .auteur-contenu { padding: var(--sp-m); }

  /* Images : 70 % de large sur mobile */
  .photo-livre,
  .photo-auteur { max-width: var(--img-max-mobile); }

  .footer-grille { grid-template-columns: 1fr; gap: var(--sp-l); }
}

@media (max-width: 420px) {

  .page-titre { font-size: 1.2rem; }

  /* Boutons + et − fixés en bas à droite sur très petit écran */
  #controles-globaux {
    position   : fixed;
    bottom     : var(--sp-m);
    right      : var(--sp-m);
    z-index    : 90;
  }
  #btn-tout-deplier,
  #btn-tout-replier {
    width      : 2.8rem;
    height     : 2.8rem;
    font-size  : 1.6rem;
    box-shadow : 0 2px 12px rgba(0,0,0,0.8);
  }
}


/* ═══════════════════════════════════════════════════════════
   12. STYLES D'IMPRESSION
       Fond blanc · texte noir · tout déplié · bien disposé
═══════════════════════════════════════════════════════════ */

@media print {

  /* Réinitialisation couleurs pour l'impression */
  :root {
    --c-fond        : #ffffff;
    --c-fond-alt    : #ffffff;
    --c-fond-carte  : #ffffff;
    --c-texte       : #111111;
    --c-texte-doux  : #333333;
    --c-texte-discret: #555555;
    --c-accent      : #333333;
    --c-bord        : #cccccc;
    --c-bord-fort   : #999999;
    --c-lien        : #000000;
  }

  *,
  *::before,
  *::after {
    background  : #ffffff !important;
    color       : #111111 !important;
    box-shadow  : none    !important;
    text-shadow : none    !important;
  }

  /* Masquer éléments inutiles en impression */
  #bouton-menu,
  #menu-nav,
  #menu-overlay,
  #controles-globaux,
  .toggle-auteur,
  .auteur-nom-thumb,
  .entete-sous-titre { display: none !important; }

  /* En-tête */
  #entete {
    position      : static;
    border-bottom : 2px solid #111;
    padding       : 1cm 0 0.5cm;
    margin-bottom : 0.5cm;
  }
  .page-titre       { font-size: 22pt; color: #000 !important; }
  .entete-surtitre  { font-size: 9pt; color: #555 !important; }

  /* Layout */
  #contenu-principal { max-width: 100%; margin: 0; padding: 0; }

  /* Fiches */
  article.auteur {
    border         : 1px solid #ccc !important;
    border-radius  : 0;
    margin-bottom  : 1cm;
    page-break-inside : avoid;
    break-inside   : avoid;
  }

  /* Tout déplié à l'impression */
  .auteur-contenu,
  .auteur-contenu.replie {
    display    : block   !important;
    max-height : none    !important;
    opacity    : 1       !important;
    overflow   : visible !important;
    padding    : 0.5cm   !important;
  }

  h1.auteur-nom {
    font-size        : 16pt;
    color            : #000 !important;
    border-bottom    : 1px solid #999;
    padding          : 0.3cm;
    background       : #f0f0f0 !important;
    page-break-after : avoid;
    break-after      : avoid;
  }

  h2 {
    font-size        : 12pt;
    color            : #333 !important;
    border-left      : 3px solid #333;
    margin-top       : 0.4cm;
    page-break-after : avoid;
    break-after      : avoid;
  }

  p { font-size: 10pt; line-height: 1.5; max-width: none; }

  /* Afficher l'URL en impression */
  a[href]::after {
    content    : " (" attr(href) ")";
    font-size  : 8pt;
    color      : #555 !important;
    word-break : break-all;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }

  /* Images impression */
  .photo-livre,
  .photo-auteur {
    max-width          : 6cm !important;
    height             : auto;
    border             : 1px solid #ccc;
    page-break-inside  : avoid;
    break-inside       : avoid;
  }
  .figure-media figcaption { font-size: 8pt; color: #555 !important; }

  .section-livre {
    border-bottom  : 1px solid #ccc;
    padding-bottom : 0.4cm;
    margin-bottom  : 0.4cm;
  }

  #pied-de-page {
    border-top  : 1px solid #999;
    padding     : 0.5cm 0 0.3cm;
    margin-top  : 1cm;
  }
  .footer-grille  { display: block; }
  .footer-col     { margin-bottom: 0.3cm; }
  .footer-copyright {
    border-top  : 1px solid #ccc;
    padding-top : 0.3cm;
  }
}
/* ── Fin de styles.css ────────────────────────────────── */