/* ============================================================
   MÉMOIRE VIVANTE des Trente Glorieuses / Années 70-80
   Feuille de style commune — style.css — VERSION SOMBRE (v3)
   Identité : Lora (titres) + Poppins (texte)
   Palette alpine sur fond nuit : confort de lecture maximal
   ============================================================ */

:root{
  --bordeaux:#6E1F2E;
  --bordeaux-fonce:#571825;
  --terracotta:#C4643B;
  --terracotta-clair:#E2A57E;   /* titres et accents chauds sur fond sombre */
  --gentiane:#2F4E7E;
  --gentiane-clair:#9FB9DF;     /* liens et repères froids sur fond sombre */
  --alpage:#4A6B4F;
  --alpage-clair:#A3C7A8;
  --papier:#26221D;             /* fond général : brun-charbon chaud, zéro éblouissement */
  --carte:#322C25;              /* fond des cartes : bois sombre */
  --encre:#F4EEE2;              /* texte principal : ivoire lumineux (sans blanc pur, anti-scintillement) */
  --gris:#BFB6A5;
  --filet:#4A4237;
  /* Teintes des décennies (frise et badges) */
  --d50:#8A6FA8; --d60:#C4643B; --d70:#C9A227; --d80:#3E7DA6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:'Poppins',system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  color:var(--encre); background:var(--papier);
}
h1,h2,h3,h4{font-family:'Lora',Georgia,serif;line-height:1.25;color:var(--terracotta-clair)}
h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700}
h2{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:600;margin:2.2em 0 .6em}
h3{font-size:1.12rem;font-weight:600;color:var(--gentiane-clair);margin:1.6em 0 .5em}
a{color:var(--gentiane-clair)}
a:hover{color:var(--terracotta-clair)}
img{max-width:100%;height:auto;border-radius:8px}

/* ---------- BANDEAU SUPÉRIEUR + NAVIGATION ---------- */
header.site{
  background:linear-gradient(180deg,var(--bordeaux-fonce),var(--bordeaux));
  color:#fff; padding:0;
}
.bandeau{
  max-width:1100px;margin:0 auto;padding:18px 20px 6px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.bandeau .logo-montagne{width:56px;flex:none}
.bandeau .titres{flex:1;min-width:230px}
.bandeau .titres .nom-site{
  font-family:'Lora',Georgia,serif;font-size:clamp(1.15rem,3vw,1.5rem);
  font-weight:700;color:#fff;margin:0;line-height:1.2;
}
.bandeau .titres .devise{
  margin:2px 0 0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#EFCBAF;
}
nav.principale{position:sticky;top:0;z-index:100;background:var(--bordeaux);
  box-shadow:0 2px 12px rgba(0,0,0,.4)}
nav.principale ul{
  list-style:none;max-width:1100px;margin:0 auto;padding:6px 12px 0;display:flex;flex-wrap:wrap;gap:2px;
}
nav.principale a{
  display:block;padding:9px 13px;color:#F5E9DC;text-decoration:none;
  font-size:.86rem;font-weight:500;border-radius:8px 8px 0 0;
}
nav.principale a:hover{background:rgba(255,255,255,.13);color:#fff}
nav.principale a.actif{background:var(--papier);color:var(--terracotta-clair);font-weight:600}
/* Crête de montagne sous le bandeau : la signature visuelle du site */
.crete{display:block;width:100%;height:46px;margin-top:-1px}
.sous-crete{background:var(--bordeaux);line-height:0}

/* Fil d'Ariane */
.ariane{max-width:1100px;margin:10px auto 0;padding:0 20px;font-size:.8rem;color:var(--gris)}
.ariane a{color:var(--gris);text-decoration:none}
.ariane a:hover{color:var(--terracotta-clair);text-decoration:underline}

/* ---------- STRUCTURE DES PAGES ---------- */
main{max-width:1100px;margin:0 auto;padding:10px 20px 70px}
.section{margin-bottom:34px}
.filet-crete{border:none;height:22px;margin:40px auto;max-width:280px;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 22"><path d="M0 21 L46 6 L78 16 L118 2 L152 14 L192 5 L228 16 L280 8" fill="none" stroke="%23E2A57E" stroke-width="2.4" stroke-linejoin="round"/></svg>')}

/* Héros de la page d'accueil */
.heros{
  background:var(--carte);border:1px solid var(--filet);border-radius:14px;
  padding:34px 30px;text-align:center;margin-top:16px;
  box-shadow:0 3px 18px rgba(0,0,0,.35);
}
.heros h1{margin:.2em 0}
.heros .slogan-central{
  font-family:'Lora',Georgia,serif;font-size:clamp(1.05rem,2.6vw,1.35rem);
  color:var(--gentiane-clair);font-weight:600;letter-spacing:.06em;margin:.4em 0 0;
}
.heros .sous-slogan{color:var(--gris);margin:.3em 0 0;font-size:.95rem}
/* Frise des décennies : repère identitaire du projet */
.frise-decennies{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
.frise-decennies span{
  font-family:'Lora',Georgia,serif;font-weight:700;font-size:1.05rem;color:#fff;
  padding:6px 16px;border-radius:999px;
}
.frise-decennies .a50{background:var(--d50)}
.frise-decennies .a60{background:var(--d60)}
.frise-decennies .a70{background:var(--d70)}
.frise-decennies .a80{background:var(--d80)}

/* ---------- TABLE DES MATIÈRES AUTOMATIQUE ---------- */
#tdm{
  background:var(--carte);border:1px solid var(--filet);
  border-left:5px solid var(--gentiane-clair);border-radius:10px;
  padding:18px 24px;margin:26px 0;
}
#tdm h2{margin:0 0 10px;font-size:1rem;color:var(--gentiane-clair);
  text-transform:uppercase;letter-spacing:.1em;font-family:'Poppins',sans-serif;font-weight:600}
#tdm ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
#tdm li{margin:4px 0;break-inside:avoid;font-size:.9rem}
#tdm a{text-decoration:none;color:var(--encre)}
#tdm a:hover{color:var(--terracotta-clair);text-decoration:underline}
@media(max-width:640px){#tdm ol{columns:1}}

/* ---------- CARTES ET ENCADRÉS ---------- */
.carte{
  background:var(--carte);border:1px solid var(--filet);border-radius:12px;
  padding:22px 26px;box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.deux-colonnes{grid-template-columns:1fr}}

.encadre-appel{ /* "Rejoignez-nous", appels à participer */
  background:linear-gradient(135deg,#453126,#3C2A20);
  border:1.5px solid var(--terracotta);border-radius:12px;
  padding:22px 26px;
}
.encadre-appel h3{color:var(--terracotta-clair);margin-top:0}

.actualite{ /* actualités datées */
  border-left:5px solid var(--alpage-clair);background:var(--carte);
  border-radius:0 12px 12px 0;padding:16px 22px;margin:14px 0;
}
.actualite .date{font-weight:600;color:var(--alpage-clair);font-size:.85rem}

.citation-reflexion{ /* les réflexions */
  background:var(--carte);border:1px solid var(--filet);border-radius:10px;
  padding:16px 20px;margin:0;
}
.citation-reflexion h4{margin:0 0 6px;color:var(--terracotta-clair);font-size:1rem}
.citation-reflexion p{margin:0;font-size:.92rem;color:#E0D8C9}
.grille-reflexions{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}

.liste-slogans{columns:2;column-gap:40px;padding-left:20px;font-size:.93rem}
.liste-slogans li{margin:5px 0;break-inside:avoid}
@media(max-width:640px){.liste-slogans{columns:1}}

/* Badges d'état des rubriques */
.badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.05em;
  padding:2px 10px;border-radius:999px;vertical-align:middle;text-transform:uppercase}
.badge.en-ligne{background:#2C3B2E;color:var(--alpage-clair);border:1px solid var(--alpage-clair)}
.badge.a-venir{background:#3A342B;color:var(--gris);border:1px dashed var(--gris)}

/* Zones à compléter par Patrice (visibles uniquement pendant la construction) */
.a-completer{
  border:2px dashed var(--terracotta);border-radius:10px;background:#3B2E23;
  padding:14px 18px;color:#E7BC97;font-size:.9rem;
}
.a-completer strong{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem}

/* Boutons de navigation entre pages */
.btn{
  display:inline-block;background:#3E639C;color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:9px;font-weight:600;font-size:.92rem;
}
.btn:hover{background:#4C74B3;color:#fff}
.btn.secondaire{background:transparent;color:var(--gentiane-clair);border:1.5px solid var(--gentiane-clair)}
.btn.secondaire:hover{background:var(--gentiane-clair);color:#26221D}

/* Formulaire intégré (Google Forms) */
.cadre-formulaire{border:1px solid var(--filet);border-radius:12px;overflow:hidden;background:var(--carte)}
.cadre-formulaire iframe{display:block;width:100%;height:900px;border:none}

/* ---------- PIED DE PAGE ---------- */
footer.site{
  background:#1C1916;color:#C9C0AF;margin-top:50px;
  padding:30px 20px 26px;text-align:center;font-size:.84rem;
  border-top:1px solid var(--filet);
}
footer.site a{color:var(--terracotta-clair)}
footer.site .signature{font-family:'Lora',Georgia,serif;font-size:.95rem;color:#EDE5D6;margin-bottom:8px}
footer.site .copyright{opacity:.85}

/* Accessibilité : focus visible partout */
a:focus-visible,button:focus-visible{outline:3px solid var(--terracotta-clair);outline-offset:2px;border-radius:4px}

/* Impression : on repasse en clair pour le papier */
@media print{
  header.site,nav.principale,footer.site,.a-completer{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   AJOUTS PHASE 2 — Blocs médias & réglages
   (généré avec le Générateur de pages v2)
   ============================================================ */

/* Paragraphes justifiés dans les cartes et encadrés */
.carte p, .citation-reflexion p, .actualite p{text-align:justify}

/* --- Photo avec légende --- */
figure.bloc-photo{margin:0 0 14px}
figure.bloc-photo:last-child{margin-bottom:0}
figure.bloc-photo img{display:block;width:100%;border-radius:8px}
figure.bloc-photo figcaption{font-size:.85rem;color:var(--gris);margin-top:6px;text-align:center;font-style:italic}

/* --- Vidéo (format 16:9 qui s'adapte à l'écran) --- */
.bloc-video{position:relative;padding-bottom:56.25%;height:0;margin:0 0 14px;border-radius:10px;overflow:hidden;background:#000}
.bloc-video:last-child{margin-bottom:0}
.bloc-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.titre-media{font-family:'Lora',Georgia,serif;font-weight:600;color:var(--gentiane-clair);text-align:center;margin:0 0 8px;font-size:1.05rem}

/* --- Lecteur audio (podcast) --- */
.bloc-podcast{margin:6px 0}
.bloc-podcast .titre-media{color:var(--terracotta-clair);text-align:left}
.bloc-podcast audio{width:100%}

/* --- Lecteur PDF --- */
.bloc-pdf{margin:6px 0}
.bloc-pdf .titre-media{color:var(--terracotta-clair);text-align:left}
.bloc-pdf iframe{width:100%;height:640px;border:1px solid var(--filet);border-radius:10px;background:#fff}
.bloc-pdf .lien-pdf{display:inline-block;margin-top:8px;font-size:.88rem}

/* --- Galerie de photos --- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:6px 0}
.galerie figure{margin:0;cursor:pointer;border-radius:8px;overflow:hidden;border:1px solid var(--filet);background:var(--carte)}
.galerie img{display:block;width:100%;height:150px;object-fit:cover;transition:transform .3s}
.galerie figure:hover img{transform:scale(1.06)}
.galerie figcaption{font-size:.78rem;color:var(--gris);padding:6px 8px;text-align:center}

/* --- Lightbox : agrandissement d'une photo au clic --- */
.lightbox{position:fixed;inset:0;background:rgba(20,17,14,.93);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;cursor:zoom-out}
.lightbox.ouverte{display:flex}
.lightbox img{max-width:94%;max-height:88%;border-radius:8px;box-shadow:0 6px 40px rgba(0,0,0,.6)}
.lightbox .fermer{position:absolute;top:16px;right:26px;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;font-family:sans-serif}
.lightbox .legende-lb{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#EDE5D6;font-size:.95rem;padding:0 20px}

/* ============================================================
   DIAPORAMA — ajout Phase 2
   ============================================================ */

/* Conteneur principal */
.diaporama{position:relative;width:100%;background:#000;border-radius:12px;overflow:hidden;margin:6px 0;user-select:none}

/* Image affichée */
.diaporama-scene{position:relative;width:100%;padding-bottom:56.25%;/* ratio 16:9 */background:#1C1916}
.diaporama-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease}
.diaporama-scene img.active{opacity:1}

/* Légende en bas de l'image */
.diaporama-legende{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(20,17,14,.88));color:#EDE5D6;font-size:.88rem;padding:28px 16px 10px;text-align:center;min-height:36px;transition:opacity .3s}

/* Boutons précédent / suivant */
.diaporama-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(110,31,46,.72);border:none;color:#fff;font-size:1.6rem;width:42px;height:56px;border-radius:6px;cursor:pointer;z-index:10;transition:background .2s;line-height:1}
.diaporama-btn:hover{background:rgba(196,100,59,.9)}
.diaporama-btn.prev{left:8px}
.diaporama-btn.next{right:8px}

/* Titre au-dessus */
.diaporama-titre{font-family:'Lora',Georgia,serif;font-weight:600;color:var(--terracotta-clair);text-align:center;margin:0 0 8px;font-size:1.05rem}

/* Pastilles de navigation (points) */
.diaporama-pastilles{display:flex;justify-content:center;gap:7px;padding:8px 0 6px;background:#1C1916}
.diaporama-pastille{width:9px;height:9px;border-radius:50%;background:var(--filet);border:none;cursor:pointer;transition:background .2s;padding:0}
.diaporama-pastille.active{background:var(--terracotta-clair)}

/* Compteur discret */
.diaporama-compteur{position:absolute;top:8px;right:12px;background:rgba(20,17,14,.6);color:#BFB6A5;font-size:.75rem;padding:3px 8px;border-radius:10px;z-index:10}

/* Plein écran au clic sur l'image */
.diaporama-scene{cursor:zoom-in}

/* ============================================================
   BLOCS 2 COLONNES & SÉPARATEURS — ajout Phase 2
   ============================================================ */

/* Bloc 2 colonnes texte/photo */
.bloc-deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:var(--carte);border:1px solid var(--filet);border-radius:12px;padding:22px 26px;margin:18px 0}
@media(max-width:700px){.bloc-deux-colonnes{grid-template-columns:1fr}}
.bloc-deux-colonnes .col-texte p{margin:0 0 .8em;text-align:justify}
.bloc-deux-colonnes .col-texte p:last-child{margin-bottom:0}
.bloc-deux-colonnes .bloc-photo{margin:0}

/* Séparateurs décoratifs */
.separateur{width:100%;line-height:0;margin:14px 0}
.separateur svg{display:block;width:100%;height:60px}
.sep-vague path{fill:var(--terracotta) !important;opacity:.55}
.sep-montagne path{fill:var(--terracotta) !important;opacity:.55}
.separateur-filet{border:none;border-top:2px solid var(--terracotta);opacity:.45;margin:24px 0}