/*CLIMATDETERREUR HTML - CLIMATDETERREUR HTML - CLIMATDETERREUR HTML - LOCAL*/
/*******************************************************************************************/
/* Réglages Généraux */
body {
    background-color: peachpuff;
    color: rgb(42,42,101); /* = #2a2a65. Bleu foncé légèrement violet */ 
    font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;                /* était : margin: 0; */
    line-height: 1.6;
	font-weight: 400;
}

/* La Structure en Grille */
.grille-layout {
    display: grid;
    grid-template-columns: 300px 1fr 20%; 
    grid-template-rows: auto 1fr;
    height: 100vh;   /* Force la hauteur à 100% de la fenêtre */
    overflow: hidden; /* Empêche le défilement général du site */
}

/* L'En-tête */
.entete {
    grid-column: 1 / 3; /* S'arrête avant la colonne de droite */
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Réduit de 30px à 10px : rapproche le menu du logo */
    padding: 10px 20px; /* Réduit le padding vertical de l'en-tête */
}

/* Style du Logo : Agrandissement et Responsive */
.logo-cdt {
    /* 1. On l'agrandit pour qu'il occupe 90% de la largeur de sa colonne */
    width: 35vw%; 

    /* 2. MAIS on lui met une limite pour qu'il ne devienne pas gigantesque sur grand écran */
    /* Ajustez cette valeur (ex: 400px ou 450px) selon la taille réelle de votre image */
    max-width: 700px; 

    /* 3. CRUCIAL pour garder les proportions et ne pas l'écraser */
    height: auto;
}

/* Menus Horizontaux */  
.menu-horizontal {
    list-style: none;
    padding: 0;
    margin: 0;      /* Supprime les marges automatiques du menu */
    display: flex;
    gap: 20px;
}

.menu-horizontal a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* Colonne de Droite (Archives) */
.col-droite {
    grid-column: 3;
    grid-row: 1 / 3;
    border-left: 1px solid rgba(0,0,0,0.1);
    padding: 15px;
    padding-top: 150px; /* Aligne le menu avec le contenu central */
}

/* Colonne de Gauche (Actuels) */
.col-gauche {
    grid-column: 1;
    grid-row: 2;
    background-color: peachpuff;
    border-right: 1px solid rgba(0,0,0,0.1);
    padding: 15px;
    
    /* On s'assure que tout le contenu est visible */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Crée l'espace automatiquement entre le menu et l'encart */
    overflow-y: auto; 
}
.col-gauche ul {
    list-style: none; /* Enlève les puces */
    padding: 10px;
    margin: 0;
    display: flex;
    flex-direction: column; /* FORCE l'empilement vertical (l'un sous l'autre) */
    gap: 10px; /* Ajoute un petit espace entre chaque ligne */
}

.col-gauche li a {
    text-decoration: none;
    display: block; /* Permet au lien de prendre toute la largeur */
}

/* Zone Centrale */
/* L'ascenseur pour le texte */
.col-centre {
    grid-column: 2;
    grid-row: 2;
    padding: 20px;
    background-color: peachpuff;
    overflow-y: auto; /* L'ascenseur apparaît ici si le texte est trop long */
    height: 100%;    /* Prend toute la place restante */
    color: #2c5f9e; /* Bleu plus soutenu */
    border-bottom: 2px solid black; 
 }

.col-gauche, .col-droite {
    overflow-y: auto;
    max-height: 100%;
}


/* Valeurs traditionnelles du Climat de terreur actuel */

/* On cible les listes à l'intérieur de tous vos accordéons */
details ul {
    list-style-type: none; /* Enlève les puces pour gagner de la place à gauche */
    padding-left: 10px;    /* Un petit retrait pour la hiérarchie */
    margin-top: 5px;       /* Rapproche la liste du titre (summary) */
    margin-bottom: 5px;
}

/* On réduit l'espace entre chaque ligne de lien */
details li {
    margin-bottom: 2px;    /* Presque plus d'espace entre les lignes */
    line-height: 1.2;      /* Réduit la hauteur de la ligne elle-même */
}

/* Optionnel : ajuster la taille du lien pour le rendre plus compact */
details li a {
    font-size: 0.95rem;
    display: block;        /* Permet de cliquer sur toute la ligne */
    padding: 2px 0;        /* Un tout petit peu de confort vertical */
}

h1
{
	color: rgb(3, 8, 122);
	font-size: 220%;
	font-style: italic;
	text-transform: uppercase;
	font-weight: 700;
	text-align: left;
}
h2
{
	color: purple;
	font-size: 150%;
	font-style: italic;
	text-align: left;
	font-weight: 700;
	line-height: 100%;
}
h3
{
	
	color: green;
	font-family: Verdana;
	font-size: 120%;
	font-style: italic;
	font-weight: 600;
	text-align: left;
}
h4
{
	color: black;
	font-size: 120%;
	font-weight: normal;
	text-decoration: underline;
	text-align: left;
}	
h5
{
	color: rgb(194,57,0);				/*était	orange;*/
	font-size: 100%;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
}
h6
{
	color: rgb(128,0,128);
	font-size: 92%;
	font-weight: 500;
	text-align: justify;
	line-height: 110%;
}

p
{
	text-align: justify;
	color: rgb(42,42,101);                  /*répété (voir body)*/
	line-height: 120%;
}


h1, h2, h4, h5, h6
{
	
}
ul
{
	color: rgb(42,42,101);                  /*était rgb(80,80,120);*/
	line-height: 120%;
}

/* INDEX */

div#header
{
	width: 100%;
	height: 17%;
	position: fixed;
	top: 0.5%;
}

/* ACCORDÉON ACTUEL (Le brillant) */
.accordeon-actuel summary {
    background-image: linear-gradient(#AAA, black);
    color: white;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    list-style: none;
}

.accordeon-actuel summary:hover {
    color:yellow;
	text-decoration: underline;
}

.accordeon-actuel ul {
    list-style-type: disc; /* On remet le petit cercle noir */
    padding-left: 25px;    /* On laisse de la place pour le cercle */
    margin-top: 10px;
}

.accordeon-actuel li {
    margin-bottom: 5px;    /* Espace entre les articles */
    color: blue;          /* Couleur du cercle */
}

/* ACCORDÉON ANCIEN (Le discret) */
.accordeon-archives summary {
    color: #1a3a5f;    /*bleu tirant sur vert, bleu électrique*/
    cursor: pointer;
    font-size: 0.9rem;
    padding: 10px 0;
    border-bottom: 1px dashed #AAA;
}

.accordeon-archives summary:hover {
    color:green;
	font-weight:700;
	text-decoration: underline;
}


.accordeon-archives ul {
    list-style-type: none; /* Pas de puce ici pour la discrétion */
    padding-left: 0;
    margin-top: 10px;
}

.accordeon-archives li {
    display: block;        /* FORCE le retour à la ligne pour chaque lien */
    width: 100%;           /* Prend toute la largeur de la colonne */
    margin-bottom: 8px;    /* Espace vertical entre deux archives */
    line-height: 1.2;
	
}

.accordeon-archives li a {
    display: inline-block; /* Permet au lien de bien se comporter */
    padding: 2px 0;
}
/* ACCORDEON ANCIENS */
/* Conteneur principal (caché par défaut) */
#menuAncienConteneur {
    display: none;
    margin-top: 15px;
}

/* Reset de la liste */
.ancien-menu-accordeon .accordeon-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style des boutons "Groupes" (à adapter selon vos anciennes couleurs) */
.ancien-menu-accordeon .accordeon-titre {
    width: 100%;
    text-align: left;
    background-color: #f8f9fa; /* Ancienne couleur de fond */
    color: #333;               /* Ancienne couleur de texte */
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: block;
    outline: none;
    transition: background 0.3s ease;
    cursor: pointer; /* Force l'apparition de la main au survol */
}


/* Effet au survol du groupe */
.ancien-menu-accordeon .accordeon-titre:hover {
    background-color: #e9ecef;
}

/* Flèche indicative (Optionnelle - Style Joomla classique) */
.ancien-menu-accordeon .accordeon-titre::after {
    content: ' ▾';
    float: right;
}
.ancien-menu-accordeon .accordeon-titre.actif::after {
    content: ' ▴';
}

/* --- LE COEUR DE L'ACCORDÉON --- */
/* Par défaut, on cache tous les sous-liens d'un groupe */
.ancien-menu-accordeon .accordeon-titre + .accordeon-liens {
    display: none;
    list-style: none;
    padding: 5px 0 5px 20px; /* Décalage à droite pour les articles */
    border-left: 1px solid #ddd;
    background-color: #ffffff;
}

/* Quand le titre a la classe .actif (gérée par le JS), on montre les liens */
.ancien-menu-accordeon .accordeon-titre.actif + .accordeon-liens {
    display: block;
}

/* Style des liens vers les anciens articles */
.ancien-menu-accordeon .accordeon-liens li a {
    display: block;
    padding: 6px 0;
    color: #007bff; /* Couleur de vos anciens liens */
    text-decoration: none;
}

.ancien-menu-accordeon .accordeon-liens li a:hover {
    text-decoration: underline;
}

/* Retrait des listes dans les menus */
ul {
    padding-left: 20px;
}

ol {
    padding-left: 20px;
}
li a {
    color: #1a3a5f;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
	color:red;
	
}
div {
	color: rgb(42,42,101)  /*même couleur que colonne centrale*/
}

/* Mobile */
@media (max-width: 768px) {
    .grille-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .col-droite, .entete {
        grid-column: 1;
        grid-row: auto;
        padding-top: 20px;
    }
}

.encart-exterieur {
    border: 2px solid black;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    /* On s'assure qu'il ne dépasse pas de la colonne de 300px */
    /* On force l'encart à occuper presque toute la largeur de la colonne */
    width: 85%; 
    margin: 20px auto; /* Centre l'encart dans la colonne */
    
    /* On s'assure qu'il n'est pas "écrasé" en hauteur */
    min-height: fit-content;
}

.encart-exterieur h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #1a3a5f;
}

.encart-exterieur p {
    font-size: 0.9rem;
    margin: 10px 0;
}

.bouton-ouverture {
    display: inline-block; /* Il ne prend que la place de son texte */
    background: linear-gradient(#AAA, black);
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 0.85rem;
}
.bouton-ouverture:hover {
    color: yellow;
}

/* Personnalisation de l'ascenseur pour Chrome/Edge/Safari */
.col-centre::-webkit-scrollbar {
    width: 8px;
}
.col-centre::-webkit-scrollbar-track {
    background: peachpuff; 
}
.col-centre::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.5); /* Un gris transparent discret */
    border-radius: 10px;
}

.sans-soulignement {
	text-decoration: none
}

.vert-ecolo {
	color: rgb(7,92,19);     /*****était : green*****************/
	font-style: italic;
}

img {
    max-width: 100%;  /* L'image ne dépassera jamais son conteneur */
    height: auto;     /* Garde les proportions pour ne pas écraser l'image */
    display: block;   /* Supprime l'espace vide sous l'image */
    margin: 10px auto; /* Centre l'image si elle est plus petite que l'espace */
}	
	
/* COMMENTAIRES  */	
	#comment-section {
    max-width: 500px;
    margin: 0px auto;                     /* Etait margin: 20px auto:*/
    font-family: Arial, sans-serif;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#comment-section input, #comment-section textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Évite que les champs dépassent */
}

#submit-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

#submit-btn:hover {
    background-color: #218838;
}

.comment-item {
    background: peachpuff;
    padding: 10px;
    margin-top: 10px;
    border-left: 4px solid #28a745;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- ESPACE COMMENTAIRES --- */

/* Force les éléments du formulaire à se superposer proprement */
#comment-section {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace de 15px entre chaque élément */
    max-width: 100%; /* S'adapte à la largeur de votre colonne centrale */
	background-color: peachpuff; 
}

/* Élargit la case Nom et la case Texte au maximum de la colonne */
#comment-section input[type="text"], 
#comment-section textarea {
    width: 100%;
    box-sizing: border-box; /* Évite que les cases ne dépassent à cause des bordures */
    padding: 12px;
    font-family: inherit; /* Utilise la même police que le reste du site */
	background-color: #ffcca3;
}

/* Donne une hauteur minimale confortable à la case de message */
#comment-section textarea {
    min-height: 100px;
    resize: vertical; /* Permet à l'internaute d'agrandir la case verticalement s'il le veut */
}

/* Style du bouton Publier (Bleu, aligné à droite) */
#submit-btn {
    background-color: #0056b3; /* Un beau bleu soutenu */
    color: white;
    border: none;
    padding: 10px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-end; /* Aligne le bouton complètement à droite */
    transition: background-color 0.2s ease;
}

/* Effet au survol de la souris sur le bouton */
#submit-btn:hover {
    background-color: #002758; /* Un bleu plus foncé au survol */
}

.encadre-citation-gauche {
    float: left;                  /* Place l'encadré à gauche */
    width: 300px;                 /* Largeur de l'encadré (ajustable selon vos besoins) */
    font-size: 1.35rem;           /* Rend les caractères assez grands */
    color: #cc0000;               /* Un beau rouge vif et lisible */
    font-weight: bold;            /* Met le texte en gras pour plus d'impact */
    line-height: 1.4;             /* Aère l'interligne pour faciliter la lecture */
    
    /* Marges et espacements */
    margin-right: 20px;           /* Espace de 20px avec le texte de l'article à droite */
    margin-bottom: 15px;          /* Espace avec le texte en dessous */
    padding: 15px;                /* Espace intérieur entre le texte et la bordure */
    
    /* Style visuel de l'encadré */
    border-left: 5px solid #cc0000; /* Une ligne rouge épaisse sur le côté gauche */
    background-color: peachpuff;    /* Etait : fond gris très léger pour le faire ressortir */
}
/* --- CONFIGURATION DU CURSEUR "MAIN" --- */

/* Pour votre titre de module actuel */
#titre-selection-archive {
    cursor: pointer;
}

/* Pour les boutons des groupes de l'ancien menu */
.ancien-menu-accordeon .accordeon-titre {
    cursor: pointer;
}


/* --- INTEGRATION DE L'ANCIEN MENU --- */

/* Le menu complet est caché au chargement de la page */
#menuAncienConteneur {
    display: none; 
    margin-top: 15px;
}

/* Reset de la liste pour éviter les puces indésirables */
.ancien-menu-accordeon .accordeon-liste,
.ancien-menu-accordeon .accordeon-liens {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style de vos titres de groupes (Articles techniques, Économie...) */
.ancien-menu-accordeon .accordeon-titre {
    width: 100%;
    text-align: left;
    border: 1px solid #ddd;
    padding: 10px;
    font-weight: bold;
    background-color: #f5f5f5; /* Mettez ici votre ancienne couleur de fond */
    display: block;
}

/* --- LE COEUR DE L'ACCORDÉON --- */

/* Par défaut, les sous-menus contenant les articles sont cachés */
.ancien-menu-accordeon .accordeon-titre + .accordeon-liens {
    display: none;
    padding-left: 15px; /* Décalage vers la droite pour les articles */
}

/* Quand le JavaScript ajoute la classe "actif" au titre, le sous-menu apparaît */
.ancien-menu-accordeon .accordeon-titre.actif + .accordeon-liens {
    display: block;
}

/* Le style de vos anciens liens d'articles */
.ancien-menu-accordeon .accordeon-liens li a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #333; /* Mettez ici votre ancienne couleur de lien */
}

.ancien-menu-accordeon .accordeon-liens li a:hover {
    text-decoration: underline;
}