@charset "utf-8";

/* ======================================= */
/* 1. MISE EN PAGE ET BASE DE STYLE */
/* ======================================= */

/* AJOUT CLE : Appliquez le Box Model "border-box" a tous les elements */
*, *:before, *:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: white;
    /* BASE FIXEE : PASSAGE À 18PX */
    font-size: 18px;    
    
    /* 🛠️ AJUSTEMENT 1 : Empêcher iOS de modifier la taille du texte (Correction iPhone) */
    -webkit-text-size-adjust: 100%; 
    text-size-adjust: 100%;       
}    

/* Definir la police et la couleur pour tout le texte */
body, h1, h2, h3, h4, h5, h6, p, ul, li, td {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";        
    color: black;
    background-color: transparent;
}

/* Texte courant : Defaut pour p, ul, li, td */
p, ul, li, td {
    /* Retablissement de la taille 1.2em souhaitee (~21.6px avec base 18px) */
    font-size: 1.2em;
    text-align: justify;
    line-height: 1.5;
}

/* CORRECTION ULTIME DES LISTES (PIXELS FORCES) */
.left-column ul,
.right-column ul,
.left-column li,
.right-column li {
    font-size: 19px !important;
}

/* Classes utilitaires conservees */
.list-normal-size, .list-normal-size li {
    font-size: 19px !important;
}

/* AJOUT POUR HARMONISER LA TAILLE DE LA LISTE DE PUBLICATIONS */
.list-publications, 
.list-publications li {
    font-size: 19px !important;
}


/* ======================================= */
/* 2. STYLES SPECIFIQUES DES BLOCS (CORRIGÉ POUR FLEXBOX) */
/* ======================================= */

/* Le conteneur principal centré, max 1300px */
.main-content-container {
    width: 95%; 
    max-width: 1300px; 
    margin: 30px auto; 
}

/* Conteneur Flexbox des colonnes */
.content-table {
    width: 100%; 
    max-width: 1300px;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: left;
    
    display: flex;    
    flex-wrap: nowrap;
    column-gap: 30px;    
}

/* MODIFICATION CLÉ : Les cellules (colonnes) */
.content-cell {
    padding: 20px;
    vertical-align: top;
    /* Règle essentielle : Donne une part égale (1) à la colonne et une base de 0 pour démarrer */
    flex: 1 1 0%;    
    /* Cette règle combinée garantit un partage équitable de l'espace restant */
}

/* L'utilisation des classes left/right-column est maintenue pour d'Ă©ventuels styles
    spécifiques, mais la largeur est maintenant gérée par le `flex: 1 1 0%` de .content-cell. */
.left-column {
    /* Suppression des flex: 0 0 50% et width: 50% qui causaient le conflit */
}
.right-column {
    /* Suppression des flex: 0 0 50% et width: 50% qui causaient le conflit */
}

/* AJOUT CLE : RENDRE TOUTES LES IMAGES DU CONTENU RESPONSIVES */
.content-table img, .main-content-container img {
    max-width: 100%;
    height: auto;
}

/* Classes utilitaires pour l'alignement et la taille de texte */
.text-align-center {
    text-align: center;
}
.text-align-justify {
    text-align: justify;
}
.small-text {
    /* Taille ajustee a 1em (18px avec la nouvelle base) */
    font-size: 1em;
}

/* ======================================= */
/* 2.1. CORRECTION RESPONSIVE POUR TABLETTES (Empilement des colonnes) */
/* ======================================= */

@media screen and (max-width: 1300px) {
    
    .main-content-container,
    .content-table,
    .banner-img,
    .navigation-bar {
        width: 100%;
        box-sizing: border-box;            
    }
    
    .main-content-container,
    .navigation-bar {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Empilement des colonnes sur mobile/tablette */
    .content-table {
        flex-wrap: wrap;
    }
    
    /* MODIFICATION CLÉ POUR LE RESPONSIVE : Les cellules doivent occuper 100% de la largeur */
    .left-column,
    .right-column,
    .content-cell {
        width: 100%;
        flex: 0 0 100%; /* Surcharge la règle flex: 1 1 0% pour prendre toute la ligne */
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 20px;
    }
    
    /* ATTENTION : La règle text-align: left !important; a été déplacée vers 2.2 */
}

/* ======================================= */
/* 2.2. ALIGNEMENT TEXTE (CORRECTION iPHONE PORTRAIT) */
/* ======================================= */
@media screen and (max-width: 1300px) and (orientation: portrait) {
    /* 🛠️ AJUSTEMENT 2 : Forcer l'alignement à gauche UNIQUEMENT en mode PORTRAIT */
    p, ul, li, td {
        text-align: left !important;
    }
}


/* ======================================= */
/* 2.5. STYLES DU BANDEAU ET DU HEADER (POUR CENTRAGE) */
/* ======================================= */

/* Assure que la zone de la banniere centre son contenu */
.banner-area {
    text-align: center;
    width: 100%;            
}

/* Assure que l'image elle-meme soit consideree comme un bloc centre */
.banner-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Centrage des boutons de navigation sous la banniere */
.navigation-buttons {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.nav-button {
    margin: 0 10px;
}

/* Ajout d'une regle pour agrandir la zone cliquable interne (liens <a> a l'interieur de .nav-button) */
.nav-button a {
    display: inline-block;
    padding: 12px 15px;
}

/* Titre principal (remplace size="6") */
.title-main {
    text-align: center;
    font-size: 2.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Sous-titre (remplace size="5") */
.title-subtitle {
    text-align: center;
    font-size: 1.8em;
    font-weight: normal;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* Ligne de separation horizontale */
hr.align-center {
    width: 95%;
    margin: 15px auto;
    border: 0;
    height: 1px;
    background-color: #ccc;
}

/* Ancre HTML5 invisible */
.anchor-point {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    display: block;
}

/* Titre d'achat (pour les call-to-action) */
.title-purchase {
    text-align: justify;
    font-size: 1.6em;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 10px;
    /* NOUVEAU: Couleur pour l'appel a l'achat (#800000) */
    color: #800000;
}

/* Liens d'achat (couleur specifique #800000) */
.purchase-callout .purchase-link {
    text-decoration: none;
}
.purchase-callout .purchase-link:hover {
    text-decoration: underline;
}

/* Styles pour les liens de telechargement/achat dans la colonne de droite */
.link-callout {
    font-size: 1.2em;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* ======================================= */
/* 2.6. TITRES SPECIFIQUES (REINTEGRE) */
/* ======================================= */

.column-header-title {
    font-size: 1.2em; /* Rend le texte plus grand que le texte par defaut (18px base = 21.6px) */
    font-weight: bold; /* Le met en gras */
    text-transform: uppercase; /* Le met en majuscules pour lui donner plus de presence */
    letter-spacing: 0.1em; /* Ajoute un peu d'espacement entre les lettres */
    color: #333; /* Une couleur legerement plus foncee pour le demarquer */
    margin: 5px 0; /* Ajoute une petite marge pour l'isoler */
    padding: 5px;
    border-bottom: 2px solid #ccc; /* Ajoute une ligne de separation pour l'effet de "masse" */
    display: block; /* Assure que le fond prend toute la largeur */
}

/* ======================================= */
/* 2.7. CORRECTION LISTES IMBRIQUEES (REINTEGRE) */
/* ======================================= */

/* Priorise la taille de texte petite (1em = 18px) pour les sous-liens en ecrasant le 19px !important */
.left-column .nav-list .small-text, 
.right-column .nav-list .small-text,
.left-column .nav-list .small-text a,
.right-column .nav-list .small-text a {
    font-size: 1em !important;    
    font-weight: normal !important;
}

/* ======================================= */
/* 3. COULEURS DES LIENS (Maintien de vos styles) */
/* ======================================= */

a:link {
    color: darkslategray;
    text-decoration: underline;
}    

a:visited {
    color: grey;
}    

/* ======================================= */
/* 4. MEDIA QUERIES (Retrait des regles de zoom pour la compatibilite iOS) */
/* ======================================= */

/* ======================================= */
/* 5. BANDEAU DE NAVIGATION (Utilise Flexbox) */
/* ======================================= */

.navigation-bar {
    width: 100%;    
    max-width: 1300px;
    margin: 0 auto;
    /* CORRECTION : Ajout de padding horizontal pour les bords des anciens iPhones */
    padding: 10px 15px;    
    border-top: 1px solid #ccc;
}

.footer-nav {
    display: flex;    
    justify-content: space-between;    
    align-items: center;    
    /* width: 100% est implicite car il est dans .navigation-bar qui est width: 100% */
}

/* Styles pour les groupes de liens (Gauche et Droit) */
.nav-links-group {
    flex: 1;    
}

.nav-list {
    display: flex;    
    list-style: none;    
    margin: 0;
    padding: 0;
    
    /* MODIFICATION CLE : Utilisation de GAP pour espacer les liens internes */
    gap: 20px;    
}

.nav-item {
    padding: 0;
    margin-right: 0;    
}

/* BLOC CENTRAL: Nom du site */
.nav-brand {
    text-align: center;
    flex-grow: 1;
}

.nav-brand-text, .nav-link {
    font-size: 0.9em; /* Maintenant 18px * 0.9 = 16.2px */
    margin: 0;
    padding: 0;
}

/* Alignement specifique des groupes (pour reproduire le layout) */
.left-group {
    text-align: left;
}
.right-group {
    text-align: right;
}

/* AJOUT CLE : Aligner les listes de liens (ul) a droite dans le conteneur du groupe de droite */
.right-group .nav-list {
    display: flex;        
    justify-content: flex-end;    
    width: 100%;
}/* ======================================= */
/* 6. BANDEAU DYNAMIQUE FIXE (CTA Achat - Bleu Marine / Jaune) */
/* ======================================= */

.dynamic-banner {
    /* Position et Structure Flexbox */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    
    /* Styles visuels (Bleu Marine) */
    background-color: #001f3f; /* Bleu marine classique */
    color: white;    
    text-align: center;
    padding: 10px 20px;    
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);    
    z-index: 1000;    
    
    display: flex;
    justify-content: center;    
    align-items: center;        
    gap: 20px;    
}

/* Texte du message dans le bandeau */
.banner-message {
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;    
}

/* Style du bouton d'achat réel (Jaune/Or) */
.banner-button {
    /* Couleur du bouton : Jaune vif / Or */
    background-color: #FFC300;    
    color: #001f3f; /* Texte bleu marine sur le bouton jaune */
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    padding: 8px 15px;    
    border-radius: 5px;    
    transition: background-color 0.3s ease;    
    display: inline-block; 
	/* LIGNES Ŕ AJOUTER POUR LE SOULIGNEMENT NET (BORDER-BOTTOM) */
    border: none; /* Annule toute bordure potentielle du navigateur */
    border-bottom: 2px solid #001f3f; /* Crée le trait bleu marine sous le texte */
}

.banner-button:hover {
    background-color: #e6b200; /* Un jaune légèrement plus foncé au survol */
    text-decoration: none;
}/* COMPENSATION DU DÉCALAGE */
/* Cet espace est nécessaire pour empêcher le bandeau fixe de masquer le contenu du haut de la page. */
.header-spacer {
    /* Hauteur pour compenser le bandeau fixe (ajustable si nécessaire) */
    height: 50px;    
    display: block;
}