/* 1. IMPORTATION DES POLICES */
/* Merriweather pour le côté "Histoire/Journal" et Lato pour la lisibilité moderne */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:ital,wght@0,300;0,700;1,400&display=swap');

:root {
    /* Palette de couleurs personnalisée */
    --achft-blue: #1a4789;       /* Bleu profond, sérieux */
    --achft-red: #8b1e1e;        /* Rouge brique/historique */
    --achft-gold: #D4AF37;         /* Or métallique */
  /*    --achft-paper: #f9f7f1;     Blanc cassé type "vieux papier" 
    --achft-text: #333333;*/
    --achft-blue-dark: #0d1625;    /* Bleu nuit profond */
    --achft-blue-light: #1a2a44;   /* Bleu plus doux pour les dégradés */
    --achft-gold-light: #FCF6BA;   /* Reflet d'or brillant */
    --achft-paper: #fdfaf3;        /* Fond papier parcheminé */
    --achft-text: #2c3e50;         /* Gris très foncé pour le texte */
}

/* 2. BASES */
body {
    background-color: var(--achft-paper);
    color: var(--achft-text);
    font-family: 'Lato', trebuchet ms,tahoma,verdana,arial,sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: trebuchet ms,tahoma,verdana,arial,sans-serif;
    color: var(--achft-blue);
    font-weight: 700;
}

a {
    color: var(--achft-red);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--achft-blue);
    text-decoration: underline;
}

/* 3. SURCHARGE BOOTSTRAP (Override) */

/* Personnalisation des Panels/Cards */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombre douce */
    background-color: #fff;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px); /* Léger effet de levée au survol */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* En-têtes des cartes */
.card-header.bg-primary {
    background-color: var(--achft-blue) !important; /* Force le bleu personnalisé */
    border-bottom: 4px solid var(--achft-gold);     /* Liseré doré élégant */
    color: white;
    font-family: 'Merriweather', serif;
    letter-spacing: 0.5px;
}

.card-footer {
    background-color: white;
    border-top: 1px solid #eee;
    color: #666;
    font-style: italic;
}

/* Boutons */
.btn-outline-primary {
    background-color: var(--achft-blue);
    border-color: var(--achft-blue);
	color:white;
}

.btn-outline-primary:hover {
    background-color: var(--achft-red);
    border-color: var(--achft-red);
}

.btn-outline-secondary {
    background-color: var(--achft-blue);
    border-color: var(--achft-gold);
	color:white;
}

.btn-outline-secondary:hover {
    background-color: #315a95;
    color: var(--achft-gold);
	border-color:var(--achft-gold);
	transform: scale(1.05); /* Agrandit légèrement l'image (5%) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; /* Ajoute une ombre plus douce et profonde */

}
/* --- STYLE DES 3 PILIERS --- */
/* --- ADAPTATION DES PILIERS POUR LE MOBILE --- */

.pilier-circle {
    /* Taille adaptative : utilise 20% de la largeur de l'écran, 
       mais plafonné à 150px pour les grands écrans */
    width: clamp(60px, 18vw, 150px);
    height: clamp(60px, 18vw, 150px);
    border: 2px solid var(--achft-gold);
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
}

/* On réduit la police uniquement sur mobile */
.pilier-title-mobile {
    font-size: 0.75rem; /* Très petit sur mobile */
    color: var(--achft-blue);
    font-weight: bold;
    margin-top: 5px;
    /* On coupe le texte s'il est trop long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On repasse à une taille normale sur tablette/PC */
@media (min-width: 768px) {
    .pilier-title-mobile {
        font-size: 1.3rem;
    }
}

.pilier-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%); /* Petit effet historique */
    transition: all 0.3s ease-in-out;
}

.pilier-title {
    color: var(--achft-blue);
    font-family: 'Merriweather', serif;
    font-weight: 700;
}



/* Effet au survol du bloc entier */
.pilier-item:hover .pilier-circle {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    border-color: var(--achft-red); /* On change la couleur au survol pour dynamiser */
}

.pilier-item:hover .pilier-circle img {
    filter: grayscale(0%); /* L'image reprend ses couleurs */
    transform: scale(1.1);
}

.pilier-item:hover .pilier-title {
    color: var(--achft-gold);
}

/* 4. ÉLÉMENTS SPÉCIFIQUES */

/* Liste des mises à jour (Scrollbar personnalisée) */
.overflow-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.overflow-auto::-webkit-scrollbar-thumb {
    background: var(--achft-blue);
    border-radius: 3px;
}
.overflow-auto::-webkit-scrollbar-thumb:hover {
    background: var(--achft-red);
}


/* --- STYLE DU CARROUSEL --- */
/* Fixe la hauteur pour les deux éléments sur grands écrans */
@media (min-width: 992px) {
    .equal-height-container {
        height: 400px; /* Ajustez cette valeur selon vos besoins */
    }
}

.custom-carousel-img {
    height: 100%; /* Ajustez la hauteur selon vos besoins */
    width:100%;
	object-fit: cover; /* Remplit l'espace sans déformer */
    background-color: #000;
	object-position:center;
}

/* Personnalisation des indicateurs (Optionnel : pour les mettre en Or) */
.carousel-indicators [button] {
    background-color: var(--achft-gold);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

/* Sur mobile, on peut réduire un peu la hauteur */
@media (max-width: 768px) {
    .custom-carousel-img {
        height: 250px;
    }
}


/* Carrousel */
.carousel-item img {
    border-radius: 4px;
    object-fit: cover;
    max-height: 250px; /* Évite les images trop hautes */
}









/* Badges */
.badge.bg-secondary {
    background-color: var(--achft-gold) !important;
    color: #333;
}

/* Vignettes images (Promenade, Galerie, etc.) */
.img-thumbnail {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 3px;
}

/* Section Liens Rapides (bas de page) */
.h6.text-primary {
    color: var(--achft-red) !important; /* On change le bleu par défaut en rouge pour les titres du bas */
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 10px;
    display: inline-block;
}
.text-primary {
	    color: var(--achft-blue) !important; /* On change le bleu par défaut en rouge pour les titres du bas */
}
/* Bandeau 
	.bandeau {
        background : url("../../images/header-croy.jpg") no-repeat ;
        background-size : 100% 100%;
        margin-bottom: 0;
		}
*/
/* Blockquote */
	.blockquote {
		border-left: 4px solid #CCC;
		padding-left: 8px;
		}
	
	
/* =========================================
   5. NAVIGATION (MENU) PERSONNALISÉE
   ========================================= */

/* La barre principale */
.navbar-achft {
    background-color: var(--achft-blue) !important;
    border-bottom: 5px solid var(--achft-gold); /* Liseré doré de finition */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 0.1rem 0.1rem;
    min-height: 50px; /* Ajustez selon votre besoin */
    padding-top: 0;
    padding-bottom: 0;
}
/* Les liens du menu (Niveau 1) */
.navbar-achft .nav-link {
    color: rgba(255, 255, 255, 0.9) !important; /* Blanc cassé pour ne pas éblouir */
    font-family: 'Lato', serif; /* Police "Histoire" */
    font-weight: 700;
    text-transform: uppercase; /* Majuscules pour l'aspect officiel */
    font-size: 0.9rem;
    padding: 8px 5px !important; /* Espacement confortable */
    transition: all 0.3s ease;
    border-radius: 4px;
}


/* 3. Très grands écrans (PC fixes - à partir de 1200px) */
@media (min-width: 1200px) {
    .navbar-achft .nav-link {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* État survol (Hover) et Actif des liens niveau 1 */
.navbar-achft .nav-link:hover,
.navbar-achft .nav-link.active {
    color: var(--achft-gold) !important;
    background-color: rgba(255, 255, 255, 0.1); /* Fond légèrement éclairci */
}
/* Déclenchement au survol sur les écrans d'ordinateurs (PC/Mac) */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Évite un espace vide qui fermerait le menu */
    }
}
/* Le bouton Burger (Mobile) */
.navbar-achft .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-achft .navbar-toggler-icon:hover {
    color: var(--achft-gold) !important;
    background-color: rgba(255, 255, 255, 0.1); /* Fond légèrement éclairci */
}
/* Supprime l'ombre bleue/noire au clic (focus) */
.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}
/* Supprime la bordure noire qui peut apparaître sur certains navigateurs */
.navbar-toggler {
    outline: none !important;
    border: none !important;
}
/* Optionnel : Si tu veux que le burger change légèrement de couleur 
   au lieu d'avoir une bordure moche, tu peux faire ceci : */
.navbar-toggler:active {
    opacity: 0.7;
}
.navbar-img {
    border-radius: 3px;
    outline: 1px solid var(--achft-gold);
	}

/* =========================================
   6. MENUS DÉROULANTS (DROPDOWNS)
   ========================================= */

.dropdown-menu {
    border: none;
    border-top: 3px solid var(--achft-red); /* Rappel du rouge brique */
    border-radius: 0 0 5px 5px; /* Arrondi seulement en bas */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    background-color: #fff;
    padding: 0;
    margin-top: 0; /* Colle le menu à la barre */
	
}


/* Les liens dans le menu déroulant */
.dropdown-item {
    padding: 5px 20px;
    font-family: 'Lato', sans-serif; /* Police moderne pour la lecture */
	font-size: 0.85rem; /* Optionnel : réduire un peu la taille du texte */
    color: var(--achft-text);
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
	line-height:10px;
}

.dropdown-item:last-child {
    border-bottom: none;
}

/* Survol des sous-menus */
.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: var(--achft-paper); /* Fond parchemin */
    color: var(--achft-red); /* Texte rouge brique */
    padding-left: 25px; /* Petit effet de glissement vers la droite */
    font-weight: 600;
}

/* Ajustement pour mobile : décale les sous-menus */
@media (max-width: 991px) {
    .dropdown-menu {
        border-top: none;
        border-left: 3px solid var(--achft-gold);
        background-color: rgba(255,255,255,0.05); /* Légèrement transparent sur mobile */
        margin-left: 10px;
    }
    .dropdown-item {
        color: rgba(255,255,255,0.8); /* Texte clair sur mobile */
        border-bottom-color: rgba(255,255,255,0.1);
    }
    .dropdown-item:hover {
        background-color: transparent;
        color: var(--achft-gold);
    }
}

/* =========================================
   7. PERSONNALISATION DE LA PAGINATION
   ========================================= */

/* Conteneur global */
.pagination {
    --bs-pagination-border-radius: 4px;
}

/* État normal des liens */
.pagination .page-link {
    color: var(--achft-blue);           /* Texte bleu profond */
    background-color: #fff;
    border: 1px solid #dee2e6;
    padding: 6px 12px;
    transition: all 0.2s ease-in-out;
}

/* État au survol (Hover) */
.pagination .page-link:hover {
    color: var(--achft-red);            /* Texte devient rouge au survol */
    background-color: var(--achft-paper); /* Fond parchemin très léger */
    border-color: var(--achft-gold);    /* Bordure dorée */
    z-index: 2;
}

/* Page active (La page où l'on se trouve) */
.pagination .page-item.active .page-link {
    background-color: var(--achft-blue); /* Fond bleu profond */
    border-color: var(--achft-blue);     /* Bordure assortie */
    color: var(--achft-gold);            /* Texte doré pour le prestige */
    font-weight: bold;
}

/* État désactivé (Boutons Précédent/Suivant inutilisables) */
.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #fff;
    border-color: #dee2e6;
}

/* Focus (clic/accessibilité) */
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.25); /* Halo doré au lieu de bleu */
    outline: 0;
}

/* =========================================
   8. TABLES STYLE "ARCHIVES"
   ========================================= */

/* Conteneur pour le défilement mobile */
.table-responsive {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.table-achft {
    background-color: #fff;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #dee2e6;
    font-size: 0.95rem;
}

/* En-tête du tableau */
.table-achft thead th {
    background-color: var(--achft-blue);
    color: var(--achft-gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    border-bottom: 5px solid var(--achft-gold);
    vertical-align: middle;
}

/* Cellules */
.table-achft td {
    padding: 10px 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

/* 1. EFFET ZEBRA (Lignes impaires) */
/* On cible le td à l'intérieur de la ligne impaire (odd) ou (paire) evenpour bypasser Bootstrap */
.table-achft tbody tr:nth-of-type(odd) > td {
    background-color: rgba(249, 247, 241, 0.8) !important; /* Votre blanc cassé */
    --bs-table-accent-bg: transparent; /* Désactive le gris auto de Bootstrap */
}

/* 2. EFFET SURVOL (Hover) */
/* On cible le td au survol de la ligne */
.table-achft tbody tr:hover > td {
    background-color: rgba(212, 175, 55, 0.1) !important; /* Votre rouge brique très léger */
    color: var(--achft-red); /* Optionnel : le texte change aussi de couleur */
    cursor: pointer;
}

/* Liens dans les tableaux */
.table-achft td a {
    font-weight: 600;
    color: var(--achft-red);
}

.table-achft td a:hover {
    color: var(--achft-blue);
    text-decoration: underline;
}

/* Style spécifique pour les dates ou badges dans les tableaux */
.table-achft .date-cell {
    font-family: 'Lato', sans-serif;
    color: #666;
    font-variant-numeric: tabular-nums; /* Chiffres bien alignés */
}


/* 3. NETTOYAGE BOOTSTRAP */
/* Parfois Bootstrap 5 met une ombre interne qui bloque les couleurs */
.table-achft td {
    box-shadow: none !important;
}

/* =========================================
   9. GALERIE D'IMAGES
   ========================================= */

.gallery-card {
    border: 3px solid #fff !important;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.gallery-card img {
    height: 200px; /* Force une hauteur identique pour toutes les vignettes */
    object-fit: cover; /* Recadre l'image sans la déformer */
    transition: transform 0.5s ease;
}

.gallery-card:hover img {
    transform: scale(1.1); /* Zoom au survol */
}

.gallery-card:hover {
    border-color: var(--achft-gold) !important; /* Bordure dorée au survol */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

.gallery-card .card-body {
    background-color: var(--achft-paper);
    border-top: 1px solid #eee;
}


/* =========================================
   10. STRUCTURE GLOBALE DU HEADER
   ========================================= */

.main-header {
    border-bottom: 2px solid var(--achft-gold);
}

/* Étage supérieur (Zone Bleue) */
.header-top {
    background-color: var(--achft-blue);
    border-bottom: 5px solid var(--achft-gold); /* Le fameux liseré doré */
    position: relative;
	max-height: 200px;
	padding-top: 10px;
	padding-bottom: 10px;
	}
	
/* Étage inférieur */
.header-bottom {
    position: relative;
    max-height: 350px;
    overflow: hidden;
    background-color: var(--achft-gold);
	background-position : center top;
    border-top: 3px solid var(--achft-gold);
    border-bottom: 3px solid var(--achft-gold);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.banner-img {
    object-fit: cover;
    height: 300px; /* Ajustez selon vos préférences */
    filter: brightness(1); /* Légèrement assombri pour le contraste */
}




.header-title {
    color: var(--achft-gold); /* Titre en doré comme sur l'image */
/*    font-family: 'Merriweather', serif;
    font-weight: 700;*/
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}


/* Style par défaut pour le sous-titre (Mobile) */
.header-subtitle {
    color: var(--achft-gold-light);
    font-size: 0.9rem; /* Taille réduite pour mobile */
    font-weight: 500;
    line-height: 1.4;
}

/* Style pour les écrans plus larges (Tablettes et PC) */
@media (min-width: 992px) {
.header-subtitle {
    font-size: 1.25rem; /* Correspond à la taille h5 classique */
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(
        to bottom, 
        var(--achft-gold) 0%, 
        var(--achft-gold) 20%, 
        var(--achft-gold) 40%, 
        var(--achft-gold-light) 80%, 
        var(--achft-gold-light) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
   }
}
.footer-achft {
    background-color: var(--achft-blue);
    border-top: 2px solid var(--achft-gold); /* Le fameux liseré doré */
    border-bottom: 5px solid var(--achft-gold); /* Le fameux liseré doré */
    position: relative;
	font-size: 0.8rem;
	padding-top: 10px;
	padding-bottom: 10px;
    color: var(--achft-gold); /* Titre en doré comme sur l'image */
	}
/* Les liens du footer */
.footer-achft a {
    color: var(--achft-gold) !important; /* Blanc cassé pour ne pas éblouir */
 }
/* Petites vignettes sur les côtés */
.mini-thumb {
    position: relative;
	top:80px;
	width: 150px;
    object-fit: cover;
    border-radius: 25px;
    border: 5px solid var(--achft-gold);
	z-index: 20;
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 767px) {
    .banner-img {
        height: 150px; /* Plus petit sur mobile */
    }
    .header-bottom {
        padding-top: 15px;
    }
    .header-title {
        font-size: 1.5rem;
    }
}
/* Pour que les icônes changent de couleur au survol */
.hover-gold:hover {
    color: var(--achft-gold) !important;
    transition: color 0.3s ease;
}

/* On s'assure que le titre ne s'écrase pas trop sur mobile */
h2.h4 {
    line-height: 1.2;
}

/* --- EFFET GLOBAL : TOUTES LES IMAGES CLIQUABLES --- */
/* Style par défaut de l'image cliquable */
a img {
    transition: all 0.3s ease-in-out; /* Transition fluide pour tous les changements */
    cursor: pointer; /* Change le curseur en main pour indiquer que c'est cliquable */
}

/* Effet au survol de l'image */
a:hover img {
    transform: scale(1.01); /* Agrandit légèrement l'image (1%) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; /* Ajoute une ombre plus douce et profonde */
    border-color: var(--achft-gold) !important; /* Optionnel : si vous voulez une bordure dorée au survol */
}

/* --- HARMONISATION DES IMAGES --- */

    /* Effet d'animation au survol des cartes */
    .feature-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid var(--achft-gold) !important;
        overflow: hidden;
    }
    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
    }
    /* Uniformisation des images */
    .card-img-top {
        height: 200px;
        object-fit: cover;
    }

.image-equal-card {
    border: 1px solid var(--achft-gold) !important;
    overflow: hidden;
    background-color: white;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
.image-equal-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

.custom-equal-img {
    /* On fixe une hauteur de référence */
    height: 200px; 
    
    /* REMPLISSAGE INTELLIGENT : */
    /* L'image remplit la zone sans s'écraser, elle est recadrée au centre */
    object-fit: cover; 
    
    width: 100%;
    display: block;
}

/* Optionnel : Ajuster la hauteur sur mobile pour ne pas avoir d'images trop écrasées */
@media (max-width: 576px) {
    .custom-equal-img {
        height: 150px;
    }
}

.scroll-container {
    overflow-x: auto; /* Active la barre de défilement si le contenu dépasse */
    -webkit-overflow-scrolling: touch; /* Rendre le défilement fluide sur iPhone/Android */
    scroll-snap-type: x mandatory; /* Optionnel : pour que ça "accroche" proprement */
}

/* On force les piliers à ne jamais se réduire */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Optionnel : cacher la barre de défilement sur les navigateurs modernes */
.scroll-container::-webkit-scrollbar {
    height: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--achft-gold);
    border-radius: 10px;
}

/* Justifie tous les paragraphes du site par défaut */
p {
    text-align: justify;
}

/* Optionnel : Justifie aussi les textes dans les cartes Bootstrap */
.card-text {
    text-align: justify;
}