/*****************************************************
 * Cassiopeia Extended – Header 2 lignes + sticky
 * Desktop : Logo gauche + Menu centré
 * Mobile : Topbar + Logo réduit + Hamburger
 *****************************************************/

/* ============================================
   HEADER STICKY + STRUCTURE GÉNÉRALE
   ============================================ */
.container-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "mainrow";
    width: 100%;

    will-change: transform;
    backface-visibility: hidden;
}

/* === Ligne 1 : Topbar === */
.container-header .container-topbar {
    grid-area: topbar;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 4px 12px;
    font-size: 0.8rem;
}

/* === Ligne 2 : Logo + Menu === */
.container-header .grid-child {
    grid-area: mainrow;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

/* Logo desktop */
.container-header .navbar-brand {
    display: flex;
    align-items: center;
}

/* Menu centré (desktop) */
.container-header .container-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.container-header .mod-menu {
    display: flex;
    gap: 1.6rem;
}

/*****************************************************
 *                      MOBILE
 *****************************************************/
@media (max-width: 991px) {

    .container-header .container-topbar {
        font-size: 0.7rem;
        padding: 2px 10px;
    }

    .container-header .grid-child {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 12px;
    }

    /* Logo réduit mobile */
    .container-header .navbar-brand img {
        max-width: 120px;
        height: auto;
    }

    /* Hamburger aligné à droite */
    .container-header .container-nav {
        justify-content: flex-end;
        flex: 0 0 auto;
    }

    /* Menu mobile en colonne */
    .container-header .mod-menu {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ================================
   TYPOGRAPHIE GLOBALE
   ================================ */

html {
    font-size: 100%; /* 16px base */
}

:root {
    /* Typo fluide : 15px → 18px */
    --font-base: clamp(0.94rem, 0.7rem + 0.8vw, 1.125rem);

    /* Ratio Modular Scale */
    --type-ratio: 1.05;

    /* Titres */
    --h6: calc(var(--font-base) * var(--type-ratio));
    --h5: calc(var(--h6)  * var(--type-ratio));
    --h4: calc(var(--h5)  * var(--type-ratio));
    --h3: calc(var(--h4)  * var(--type-ratio));
    --h2: calc(var(--h3)  * var(--type-ratio));
    --h1: calc(var(--h2)  * var(--type-ratio));

    /* Paragraphes / petits textes */
    --p: var(--font-base);
    --small: calc(var(--font-base) * 0.9);

    /* Échelle globale (zoom site entier) */
    --scale: 1;
}

/* Optimisation mobile : lecture plus confortable */
@media (max-width: 768px) {
    :root {
        --scale: 1.05;
    }
}

/*********************************************
 * Application globale
 *********************************************/

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: calc(var(--p) * var(--scale));
    line-height: 1.6;
    font-optical-sizing: auto;
}

/*********************************************
 * Titres (H1 → H6)
 *********************************************/

h1 { font-size: calc(var(--h1) * var(--scale)); font-weight: 700; line-height: 1.2; }
h2 { font-size: calc(var(--h2) * var(--scale)); font-weight: 600; line-height: 1.25; }
h3 { font-size: calc(var(--h3) * var(--scale)); font-weight: 500; line-height: 1.3; }
h4 { font-size: calc(var(--h4) * var(--scale)); font-weight: 400; line-height: 1.35; }
h5 { font-size: calc(var(--h5) * var(--scale)); font-weight: 400; line-height: 1.4; }
h6 { font-size: calc(var(--h6) * var(--scale)); font-weight: 300; line-height: 1.45; }

/*********************************************
 * Paragraphes et listes
 *********************************************/
p,
li {
    font-size: calc(var(--p) * var(--scale));
    font-weight: 300;
    margin-bottom: 1.2em;
}

/*********************************************
 * Textes secondaires (menus, infos)
 *********************************************/
small,
.container-header .mod-menu a,
.article-info {
    font-size: calc(var(--small) * var(--scale));
    opacity: 0.9;
}

/* ================================
   NAVIGATION CASSIOPEIA
   ================================ */

.container-header .navbar-brand {
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 600;
}

.container-header .mod-menu a {
    text-decoration: none;
    transition: opacity .3s ease;
}

.container-header .mod-menu a:hover {
    opacity: 1;
}

/* ================================
   ARTICLES / BLOG
   ================================ */

.article-info {
    opacity: 0.8;
}

.com-content-article h1 {
    margin-bottom: 0.5em;
}

/* ================================
   MENU 1ERE LETTRE
   ================================ */
a.first-letter-bold::first-letter {
    font-weight: bold;        /* Gras */
    font-size: 1.5em;         /* Taille plus grande */
}

/* ================================
  COULEUR DU BREADCRUMB
   ================================ */

/* Couleur du texte du breadcrumb */
.breadcrumb-item, 
.breadcrumb-item a {
  color: #FFFCFC !important;
}

/* Couleur de l’élément actif */
.breadcrumb-item.active {
  color: #FFE2EA !important;
}

/* Changer la couleur du séparateur (divider) */
.breadcrumb {
  --bs-breadcrumb-divider-color: #FFFCFC !important; /* met ici ta couleur */
}

/* Variante si le séparateur est un pseudo-élément */
.breadcrumb-item + .breadcrumb-item::before {
  color: #FFFCFC !important; /* même couleur que ci-dessus */
}

/* ================================
  AUGMENTER TAILLE LIENS HYPERTEXTE
   ================================ */

/* Taille des liens */
a:hover {
  font-size: 1.2em !important; /* 1.2x la taille standard */
}

/* Liens dans les menus */
.nav-link {
  font-size: 1.3em !important;
}

/* Breadcrumbs / liens spécifiques */
.breadcrumb a:hover {
  font-size: 1.1em !important;
}