/* ═══════════════════════════════════════════════════════════════
   HISTOIRE.CSS 
═══════════════════════════════════════════════════════════════ */

/* Playfair Display */
@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/playfair-display-v40-latin-700.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/playfair-display-v40-latin-900.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/playfair-display-v40-latin-900italic.woff2') format('woff2');
}


/* source-serif -4 */
@font-face {
  font-display: swap; 
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/source-serif-4-v14-latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/source-serif-4-v14-latin-300italic.woff2') format('woff2'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/source-serif-4-v14-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/source-serif-4-v14-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/source-serif-4-v14-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  src: url('/fonts/source-serif-4-v14-latin-600italic.woff2') format('woff2');
}


/* ══════════════════════════════════════════════════════════
   BODY
══════════════════════════════════════════════════════════ */

body {
    --h-serif: 'Playfair Display', Georgia, serif;
    --h-body:  'Source Serif 4',   Georgia, serif;
}

/* ══════════════════════════════════════════════════════════
   HERO 
══════════════════════════════════════════════════════════ */
.hero-page {
    margin-top: 50px;
    padding: 80px 8% 64px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
}

.hero-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 90% at 50% 110%, rgba(255,200,30,.14) 0%, transparent 70%);
    pointer-events: none;
}

.hero-page h1 {
    font-family: var(--h-serif);
    font-size: clamp(3.8rem, 6vw, 6.5rem);
    font-weight: 900;
    letter-spacing: -.02em;
    position: relative; z-index: 1;
    margin-bottom: 12px;
    text-shadow: 0 2px 24px rgba(0,0,0,.3);
    opacity: 0; transform: translateY(20px);
    animation: h-fadeUp .7s .1s ease forwards;
}

.hero-page p {
    font-family: var(--h-body);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 300; font-style: italic;
    color: rgba(255,255,255,.82);
    position: relative; z-index: 1;
    opacity: 0; transform: translateY(16px);
    animation: h-fadeUp .7s .3s ease forwards;
}

@keyframes h-fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════
   RUBAN INTRO 
══════════════════════════════════════════════════════════ */
.h-intro-ruban {
    display: flex;
    align-items: stretch;
    background: var(--color-background-alt);
    border-top: 4px solid var(--color-tertiary);
    border-radius: 15px;
    overflow: hidden;
    margin: 32px 8%;
    box-shadow: 0 4px 6px var(--shadow);
}

.h-intro-ruban-line {
    width: 6px;
    background: var(--color-tertiary);
    flex-shrink: 0;
}

.h-intro-ruban-text {
    padding: 32px 40px;
    flex: 1;
}

.h-intro-ruban-text p {
    font-family: var(--h-serif);
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.55;
}

.h-intro-ruban-text em {
    color: var(--color-primary);
    font-style: normal;
}

.h-intro-ruban-deco {
    width: 190px;
    background: var(--color-primary-dark);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}

.h-intro-ruban-deco span {
    font-family: var(--h-serif);
    font-size: 8rem; font-weight: 900;
    color: rgba(255,255,255,.07);
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: -.05em;
}

/* ══════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════ */
.h-section        { padding: 80px 8%; }
.h-section--alt   { background: var(--color-background-alt); }
.h-section--white { background: var(--color-background); }

.h-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    font-family: var(--h-body);
    font-size: 1.1rem; font-weight: 600;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--color-tertiary);
}
.h-eyebrow::before {
    content: '';
    width: 28px; height: 2px;
    background: var(--color-tertiary);
    flex-shrink: 0;
}

.h-title {
    font-family: var(--h-serif);
    font-size: clamp(3.2rem, 4.5vw, 5.5rem);
    font-weight: 900; line-height: 1.05;
    color: var(--color-text);
    margin-bottom: 20px;
    letter-spacing: -.02em;
}
.h-title em { color: var(--color-primary); font-style: italic; }

.h-lead {
    font-family: var(--h-body);
    font-size: clamp(1.6rem, 2vw, 2rem);
    line-height: 1.7; color: var(--color-text-light);
    border-left: 3px solid var(--color-primary);
    padding-left: 18px; margin-bottom: 28px;
    font-style: italic; max-width: 640px;
}

.h-body-text {
    font-family: var(--h-body);
    font-size: clamp(1.4rem, 1.6vw, 1.65rem);
    line-height: 1.9; color: var(--color-text-light);
    max-width: 720px;
}
.h-body-text p            { margin-bottom: 16px; }
.h-body-text p:last-child { margin-bottom: 0; }
.h-body-text strong       { color: var(--color-text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   DEUX COLONNES 
══════════════════════════════════════════════════════════ */
.h-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
}
.h-two-col--rev .h-visual { order: -1; }

.h-visual {
    border-radius: 15px;
    overflow: hidden; position: relative;
    box-shadow: 12px 12px 0 var(--color-background-alt),
                12px 12px 0 2px var(--color-tertiary);
}
.h-two-col--rev .h-visual {
    box-shadow: -12px 12px 0 var(--color-background-alt),
                -12px 12px 0 2px var(--color-tertiary);
}
.h-visual img {
    width: 100%; aspect-ratio: 4/3;
    object-fit: cover; display: block;
    transition: transform .6s ease;
}
.h-visual:hover img { transform: scale(1.04); }

/* ══════════════════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════════════════ */
.h-timeline {
    margin-top: 28px;
    border-left: 3px solid var(--color-border);
    padding-left: 32px;
}
.h-tl-item {
    position: relative;
    margin-bottom: 26px; padding-bottom: 26px;
    border-bottom: 1px dashed var(--color-border);
}
.h-tl-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.h-tl-item::before {
    content: '';
    position: absolute; left: -40px; top: 7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-tertiary);
    border: 3px solid var(--color-background);
    box-shadow: 0 0 0 2px var(--color-tertiary);
}
.h-tl-year  { font-family: var(--h-serif); font-size: 1.3rem; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; letter-spacing: .05em; }
.h-tl-head  { font-size: 1.6rem; font-weight: 600; color: var(--color-text); margin-bottom: 5px; }
.h-tl-desc  { font-size: 1.4rem; color: var(--color-text-light); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════
   PULL QUOTE 
══════════════════════════════════════════════════════════ */
.h-pull-quote {
    margin: 0 8%;
    padding: 36px 44px;
    background: var(--color-primary-dark);
    color: #fff; position: relative; overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.h-pull-quote::before {
    content: '\201C';
    position: absolute; top: -8px; left: 20px;
    font-family: var(--h-serif);
    font-size: 9rem; line-height: 1;
    color: rgba(255,255,255,.10);
    pointer-events: none;
}
.h-pull-quote p {
    font-family: var(--h-serif);
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    font-style: italic; line-height: 1.5;
    position: relative; z-index: 1;
}
.h-pull-quote p em { color: var(--color-tertiary); font-style: normal; }

/* ══════════════════════════════════════════════════════════
   BANDE CHIFFRES
══════════════════════════════════════════════════════════ */
.h-chiffres {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--color-primary);
    border-radius: 15px; overflow: hidden;
    margin: 0 8%;
}
.h-chiffre-item {
    padding: 40px 24px; text-align: center;
    border-right: 1px solid rgba(255,255,255,.12);
}
.h-chiffre-item:last-child { border-right: none; }
.h-chiffre-val {
    font-family: var(--h-serif);
    font-size: 4.5rem; font-weight: 900;
    color: var(--color-tertiary);
    display: block; line-height: 1; margin-bottom: 10px;
}
.h-chiffre-label {
    font-size: 1.3rem; color: rgba(255,255,255,.70);
    letter-spacing: .06em; text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   GRILLE CURÉS 
══════════════════════════════════════════════════════════ */
.h-figures-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 36px;
}
.h-figure-card {
    background: var(--color-boxground);
    border: 1px solid var(--color-border);
    border-radius: 15px; overflow: hidden;
    box-shadow: 0 4px 6px var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.h-figure-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
}
.h-figure-card img {
    width: 100%; height: 500px;
    object-fit: cover; object-position: top center;
    display: block;
}
.h-figure-body   { padding: 18px 20px; }
.h-figure-name   { font-family: var(--h-serif); font-size: 1.6rem; font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.h-figure-period { font-size: 1.2rem; color: var(--color-primary); font-weight: 600; margin-bottom: 8px; }
.h-figure-desc   { font-size: 1.3rem; color: var(--color-text-light); line-height: 1.55; }

/* ══════════════════════════════════════════════════════════
   GRILLE ACTIVITÉS 
══════════════════════════════════════════════════════════ */
.h-activites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; margin-top: 32px;
}
.h-activite-card {
    padding: 28px 24px;
    border-top: 3px solid var(--color-primary);
    border-radius: 10px;
    background: var(--color-boxground);
    box-shadow: 0 4px 6px var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.h-activite-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
}
.h-activite-icon  { font-size: 3rem; margin-bottom: 14px; display: block; line-height: 1; }
.h-activite-title { font-family: var(--h-serif); font-size: 1.9rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.h-activite-desc  { font-size: 1.4rem; color: var(--color-text-light); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════
   BOUTONS CTA 
══════════════════════════════════════════════════════════ */
.h-cta {
    padding: 80px 8%;
    text-align: center;
}
.h-cta-title {
    font-family: var(--h-serif);
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    font-weight: 900; color: var(--color-text); margin-bottom: 12px;
}
.h-cta-title em { color: var(--color-primary); font-style: italic; }
.h-cta-sub      { font-size: 1.6rem; color: var(--color-text-light); margin-bottom: 32px; font-family: var(--h-body); }

.h-cta-btns {
    display: flex; gap: 14px;
    justify-content: center; flex-wrap: wrap;
}

.h-btn-primary,
.h-btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 1.6rem; font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.h-btn-primary {
    background: var(--color-primary); color: #fff;
}
.h-btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30,95,138,.35);
}
.h-btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}
.h-btn-secondary:hover {
    background: var(--color-primary); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30,95,138,.25);
}

/* ══════════════════════════════════════════════════════════
   MODE SOMBRE
══════════════════════════════════════════════════════════ */
.dark .h-tl-item::before         { border-color: var(--color-background); }
.dark .h-visual                  { box-shadow: 12px 12px 0 var(--color-background-alt), 12px 12px 0 2px var(--color-tertiary); }
.dark .h-two-col--rev .h-visual  { box-shadow: -12px 12px 0 var(--color-background-alt), -12px 12px 0 2px var(--color-tertiary); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .h-two-col,
    .h-two-col--rev          { grid-template-columns: 1fr; gap: 36px; }
    .h-two-col--rev .h-visual { order: 0; }
    .h-visual,
    .h-two-col--rev .h-visual { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
    .h-figures-grid           { grid-template-columns: repeat(2, 1fr); }
    .h-activites-grid         { grid-template-columns: repeat(2, 1fr); }
    .h-chiffres               { grid-template-columns: repeat(2, 1fr); }
    .h-intro-ruban-deco       { display: none; }
    .h-section                { padding: 56px 6%; }
    .h-intro-ruban,
    .h-pull-quote,
    .h-chiffres               { margin-left: 6%; margin-right: 6%; }
}

@media (max-width: 600px) {
    .h-figures-grid           { grid-template-columns: 1fr; }
    .h-activites-grid         { grid-template-columns: 1fr; }
    .h-intro-ruban,
    .h-pull-quote,
    .h-chiffres               { margin-left: 4%; margin-right: 4%; }
    .h-cta                    { padding: 60px 5%; }
    .h-cta-btns               { flex-direction: column; align-items: stretch; }
    .h-btn-primary,
    .h-btn-secondary          { text-align: center; }
    .h-chiffres               { grid-template-columns: repeat(2, 1fr); }
}