/* ==========================================================================
   APLJ THEME - FEUILLE DE STYLE FINALE ET CONSOLIDÉE
   ========================================================================== */


/* --- 0. FONDATIONS --- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
  --aplj-orange: #FF5733;
  --aplj-blue: #2C3E50;
  --aplj-text: #2C3E50;
  --aplj-border: #2C3E50;
  --aplj-background: #FFFFFF;
  --font-body: 'Roboto', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --aplj-news-bg: #F6F5F3; /* Le beige/gris très clair de la référence */
  --aplj-news-bg-hover: #ECEAE7; /* Une version légèrement plus foncée pour le survol */
  --aplj-engagement-bg: #ffd0ca; /* Le rose/pêche demandé */
  --aplj-engagement-bg-hover: #ffc2b9; /* Version légèrement plus foncée */
  --aplj-actu-bg: #f8f4f4;
  --aplj-actu-bg-hover: #eee4e4;
  --aplj-panel-download-bg: #f8f4f4;
  --aplj-panel-download-bg-hover: #d3d3d3;
  
  /* Couleurs Pastel */
  --aplj-panel-sky: #dcecf7;
  --aplj-panel-sky-hover: #cbe3f2;
  --aplj-panel-ice: #eaf4f7;
  --aplj-panel-ice-hover: #dbebed;
  --aplj-panel-yellow: #fef3c7;
  --aplj-panel-yellow-hover: #fce9a2; /* NOUVEAU */
  --aplj-panel-green: #d1fae5;
  --aplj-panel-green-hover: #a7f3d0; /* NOUVEAU */
  --aplj-panel-pink: #fee2e2;
  --aplj-panel-pink-hover: #fecaca; /* NOUVEAU */
  --aplj-panel-purple: #e9d5ff;
  --aplj-panel-purple-hover: #d8b4fe; /* NOUVEAU */
  --aplj-panel-orange: #ffedd5;
  --aplj-panel-orange-hover: #fed7aa; /* NOUVEAU */
  --aplj-panel-gray: #f3f4f6;
  --aplj-panel-gray-hover: #e5e7eb; /* NOUVEAU */
  
  /* NEWS PC-001 à PC-033 */
  --aplj-panel-pc001: #fef4f2;
  --aplj-panel-pc001-hover: #f5ddd8;
  
  --aplj-panel-pc005: #fef4eb;
  --aplj-panel-pc005-hover: #efdccb;
  
  --aplj-panel-pc009: #fcf2d9;
  --aplj-panel-pc009-hover: #f3dcb0; /* NOUVEAU */
  
  --aplj-panel-pc013: #e6ede5;
  --aplj-panel-pc013-hover: #b7c7ac; /* NOUVEAU */
  
  --aplj-panel-pc017: #e3e9e9;
  --aplj-panel-pc017-hover: #c3ccd3; /* NOUVEAU */
  
  --aplj-panel-pc021: #e9e6ed;
  --aplj-panel-pc021-hover: #cdcbd8; /* NOUVEAU */
  
  --aplj-panel-pc025: #faf7f0;
  --aplj-panel-pc025-hover: #e1d9ce; /* NOUVEAU */
  
  --aplj-panel-pc029: #f1f1e9;
  --aplj-panel-pc029-hover: #e1e3d6; /* NOUVEAU */
  
  --aplj-panel-pc033: #eae9e4;
  --aplj-panel-pc033-hover: #c7c6c2; /* NOUVEAU */
  
   /* NEWS pa-001 à pa-008 */

  --aplj-panel-pa-001: #feecea;
  --aplj-panel-pa-001-hover: #f6dcdd;
  
  --aplj-panel-pa-002: #f6f9e6;
  --aplj-panel-pa-002-hover: #eef5d4;
  
  --aplj-panel-pa-003: #f8f5fc;
  --aplj-panel-pa-003-hover: #eae1f6; /* NOUVEAU */
  
  --aplj-panel-pa-004: #fff5f4;
  --aplj-panel-pa-004-hover: #fbe9e5; /* NOUVEAU */
  
  --aplj-panel-pa-005: #e8f5f6;
  --aplj-panel-pa-005-hover: #dff4f5; /* NOUVEAU */
  
  --aplj-panel-pa-006: #f7f2f8;
  --aplj-panel-pa-006-hover: #f5e2f6; /* NOUVEAU */
  
  --aplj-panel-pa-007: #fefbec;
  --aplj-panel-pa-007-hover: #fef4db; /* NOUVEAU */
  
  --aplj-panel-pa-008: #f6f7fb;
  --aplj-panel-pa-008-hover: #e0e3f6; /* NOUVEAU */

}

html {
    scroll-behavior: smooth;
}

/* --- STYLE DU NAV WRAPPER POUR DESKTOP --- */
.aplj-header-nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Espace entre les groupes d'éléments */
}
.aplj-header-cta-buttons {
    display: flex;
    gap: 0.5rem;
}

/* --- 1. STYLES DE BASE --- */

body {
  background-color: var(--aplj-background);
  color: var(--aplj-text);
  font-family: var(--font-body);
  margin: 0;
}

h1, h2, h3, h4, h5, h6, .aplj-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--aplj-blue);
}

/* --- 2. STRUCTURE GÉNÉRALE --- */

.aplj-main-content {
    max-width: 1280px;
    margin: 0 auto;
}

/* --- 3. EN-TÊTE (HEADER) --- */

.aplj-site-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: stretch;
    min-height: 110px;
}

.aplj-header-logo-wrapper {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    box-sizing: border-box;
}

.aplj-header-nav-wrapper {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    position: relative; /* Contexte pour le panneau du menu */
}

.custom-logo {
  max-height: clamp(100px, 80vh, 150px); /* CORRECTION : Taille fluide et contrôlée */
  width: auto;
  display: block;
  object-fit: contain;
}

.aplj-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--aplj-background);
  color: var(--aplj-blue);
  border: 1px solid var(--aplj-blue);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.aplj-menu-button:hover {
  background-color: rgba(255, 87, 51, 0.9);
}

/* --- 3B. EN-TÊTE - ICÔNES D'ACTION (CORRECTIF) --- */

/* NOUVEAU : Style pour les boutons désactivés */
.aplj-header-actions a.is-disabled {
    opacity: 0.5; /* Rend l'icône semi-transparente */
    cursor: not-allowed; /* Affiche un curseur "interdit" au survol */
    pointer-events: none; /* Désactive complètement le clic et le survol */
}

/* On ajuste le conteneur principal pour faire de la place */
.aplj-header-nav-wrapper {
    justify-content: center; /* Aligne tout à droite */
    gap: 1rem; /* Espace entre les icônes et le menu */
    padding-right: 1.5rem; /* Marge à droite */
}

/* Le conteneur des icônes */
.aplj-header-actions {
    display: flex;
    gap: 0.5rem; /* Espace entre les icônes */
}

/* Style des liens/icônes */
.aplj-header-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--aplj-text);
    border: 1px solid var(--aplj-text);
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* Le survol en orange, comme demandé */
.aplj-header-actions a:hover {
    background-color: var(--aplj-orange);
    border-color: var(--aplj-text);
    color: var(--aplj-background);
}

/*
.aplj-header-actions svg {
    width: 24px;
    height: 24px;
}*/

/* NOUVEAU : Style pour les icônes SVG personnalisées */
.aplj-custom-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* La taille que nous voulons */
    height: 24px;
}

.aplj-custom-icon-wrapper svg {
    width: 100%; /* Le SVG remplit le wrapper */
    height: 100%;
}

/* --- 4. ICÔNES DU MENU (HAMBURGER & CROIX) --- */

.hamburger-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: all 0.2s ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: all 0.2s ease-in-out;
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }

.aplj-menu-button--close .close-icon {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
}
.aplj-menu-button--close .close-icon::before,
.aplj-menu-button--close .close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}
.aplj-menu-button--close .close-icon::before { transform: rotate(45deg); }
.aplj-menu-button--close .close-icon::after { transform: rotate(-45deg); }

/* --- 5. PANNEAU DU MENU DÉROULANT --- */

.aplj-menu-panel {
    position: absolute;
    top: 100%;
    left: -1px; /* Correction alignement */
    width: calc(100% + 2px); /* Correction alignement */
    box-sizing: border-box;
    background-color: var(--aplj-background);
    padding: 2rem;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
}

.aplj-menu-panel .aplj-main-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aplj-menu-panel .aplj-main-menu-list a {
    display: block;
    padding: 0.5rem 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--aplj-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.aplj-menu-panel .aplj-main-menu-list a:hover {
    color: var(--aplj-orange);
}

.aplj-main-menu-list .sub-menu {
    list-style: none; /* LA CORRECTION EST ICI */
}

/* Style pour la puce du menu */
.aplj-main-menu-list .avec-puce > a::before {
    content: '▶'; /* Le caractère que tu veux afficher */
    margin-right: 12px; /* L'espacement entre la puce et le texte */
    font-weight: 400; /* On peut affiner le style de la puce */
    color: var(--aplj-orange); /* On peut lui donner une couleur spécifique */
}

.aplj-main-menu-list .avec-puce2 > a::before {
    content: '◦'; /* Le caractère "petit cercle" */
    margin-right: 8px; /* L'espacement entre la puce et le texte */
    font-weight: 400; /* On peut affiner le style de la puce */
    color: var(--aplj-orange); /* On peut lui donner une couleur spécifique */
}



/* --- 6. GESTION DE L'ÉTAT OUVERT (MENU) --- */

#aplj-menu-close-btn { display: none; }
.is-menu-active #aplj-menu-open-btn { display: none; }
.is-menu-active #aplj-menu-close-btn { display: inline-flex; }
.is-menu-active .aplj-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


/* --- 7. COMPOSANTS PAGE D'ACCUEIL (GRILLES & PANNEAUX) --- */

/* Base commune pour toutes les grilles */
.grid-50-50, .grid-33-66, .grid-66-33, .grid-33-33-33, .grid-20-20-20-20-20, .grid-16-16-16-16-16-16, .grid-100, .grid-25-25-25-25, .grid-14-14-14-14-14-14-14 { /* On ajoute la nouvelle */
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* --- AJOUT POUR LE STYLE DES PARAGRAPHES DE PANNEAUX --- */
.aplj-panel-intro {
    font-size: 1rem;
    line-height: 1.6;
}

/* Colonnes pour une grille 50/50 */
.grid-50-50 > .aplj-column { width: 50%; }
.grid-33-33-33 > .aplj-column-33 { width: 33.333%; }
.grid-20-20-20-20-20 > .aplj-column-20 { width: 20%; }
.grid-25-25-25-25 > .aplj-column-25 { width: 25%; }
.grid-16-16-16-16-16-16 > .aplj-column-16 { width: 16.666%; }
.grid-14-14-14-14-14-14-14 > .aplj-column-14 { width: 14.2857%; }
.grid-100 > .aplj-column-100 { width: 100%; }

/* Colonnes pour une grille 33/66 */
.grid-33-66 > .aplj-column-33 { width: 33.33%; }
.grid-33-66 > .aplj-column-66 { width: 66.67%; }

/* Colonnes pour une grille 66/33 (celle que vous venez de demander) */
.grid-66-33 > .aplj-column-66 { width: 66.67%; }
.grid-66-33 > .aplj-column-33 { width: 33.33%; }


/* Base commune pour toutes les colonnes */
.aplj-column, .aplj-column-33, .aplj-column-66, .aplj-column-100, .aplj-column-25, .aplj-column-14 {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.aplj-panel, .aplj-theme-description-panel, .aplj-theme-panel {
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

.aplj-panel {
background-color: var(--aplj-background); / La couleur pastel /
padding: 10px; / La bordure blanche */
}

.aplj-panel, .aplj-theme-description-panel {
  padding: 24px;
}
.aplj-theme-panel {
  padding: 16px;
}

/* Le contenu doit être au-dessus de la couche de couleur, mais le lien DOIT RESTER CLIQUABLE */
.aplj-panel > *:not(.aplj-block-link),
.aplj-theme-panel > *:not(.aplj-block-link),
.aplj-theme-description-panel > * {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Le contenu (sauf le lien) ignore la souris */
}

.grid-themes {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-themes { grid-template-columns: 1fr 1fr; }
}

/* --- 8. EFFET DE SURVOL & BORDURE INTÉRIEURE --- */

/* Le lien invisible devient la couche de fond colorée */
.aplj-block-link {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Couleurs de fond initiales */
.aplj-panel-sky .aplj-block-link { background-color: var(--aplj-panel-sky); }
.aplj-panel-ice .aplj-block-link { background-color: var(--aplj-panel-ice); }
.aplj-panel-green .aplj-block-link { background-color: var(--aplj-panel-green); }
.aplj-panel-peche .aplj-block-link { background-color: var(--aplj-engagement-bg); }
.aplj-panel-news .aplj-block-link { background-color: var(--aplj-news-bg); }
.aplj-panel-purple .aplj-block-link { background-color: var(--aplj-panel-purple); }
.aplj-panel-cjl .aplj-block-link { background-color: var(--aplj-actu-bg); }

/* Couleurs au survol */
.aplj-panel-sky .aplj-block-link:hover { background-color: var(--aplj-panel-sky-hover); }
.aplj-panel-ice .aplj-block-link:hover { background-color: var(--aplj-panel-ice-hover); }
.aplj-panel-green .aplj-block-link:hover { background-color: var(--aplj-panel-green-hover); }
.aplj-panel-peche .aplj-block-link:hover { background-color: var(--aplj-engagement-bg-hover); }
.aplj-panel-news .aplj-block-link:hover { background-color: var(--aplj-news-bg-hover); }
.aplj-panel-purple .aplj-block-link:hover { background-color: var(--aplj-panel-purple-hover); }
.aplj-panel-cjl .aplj-block-link:hover { background-color: var(--aplj-actu-bg-hover); }

.aplj-theme-panel:nth-child(8n+1) .aplj-block-link:hover { background-color: var(--aplj-panel-sky); }
.aplj-theme-panel:nth-child(8n+2) .aplj-block-link:hover { background-color: var(--aplj-panel-ice); }
.aplj-theme-panel:nth-child(8n+3) .aplj-block-link:hover { background-color: var(--aplj-panel-yellow); }
.aplj-theme-panel:nth-child(8n+4) .aplj-block-link:hover { background-color: var(--aplj-panel-green); }
.aplj-theme-panel:nth-child(8n+5) .aplj-block-link:hover { background-color: var(--aplj-panel-pink); }
.aplj-theme-panel:nth-child(8n+6) .aplj-block-link:hover { background-color: var(--aplj-panel-purple); }
.aplj-theme-panel:nth-child(8n+7) .aplj-block-link:hover { background-color: var(--aplj-panel-orange); }
.aplj-theme-panel:nth-child(8n+8) .aplj-block-link:hover { background-color: var(--aplj-panel-gray); }

/* --- 9. UTILITAIRES DE BORDURES --- */

.has-border-top    { border-top:    1px solid var(--aplj-border); }
.has-border-bottom { border-bottom: 1px solid var(--aplj-border); }
.has-border-left   { border-left:   1px solid var(--aplj-border); }
.has-border-right  { border-right:  1px solid var(--aplj-border); }
.has-border-all    { border:        1px solid var(--aplj-border); }
/* NOUVEAU : Utilitaire d'espacement */
.has-margin-top {
    margin : 20px; /* Tu peux ajuster cette valeur */
}

--- COMPOSANTS GLOBAUX ---

.aplj-filters-wrapper { padding: 2rem; background-color: #f9f9f9; }
.aplj-pagination { padding: 1.5rem; display: flex; justify-content: center; gap: 0.5rem; }
.aplj-pagination .page-numbers { padding: 0.5rem 1rem; border: 1px solid var(--aplj-border); text-decoration: none; color: var(--aplj-text); }
.aplj-pagination .page-numbers.current, .aplj-pagination .page-numbers:hover { background-color: var(--aplj-blue); color: var(--aplj-background); border-color: var(--aplj-blue); }



/* --- COMPOSANT: BOUTON GÉNÉRIQUE (STRUCTURE CORRIGÉE) --- */

/* 1. Style commun à TOUS les boutons */
.aplj-button {
    display: inline-block;
    background-color: var(--aplj-orange);
    color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    cursor: pointer;
}

/* Le survol est le même pour TOUS les boutons */
.aplj-button:hover {
    background-color: var(--aplj-blue);
    color: var(--aplj-background);
    border-color: var(--aplj-blue);
}

/* 2. Le style du bouton par défaut (grand) */
.aplj-button {
    padding: 1rem 2.5rem;
    font-size: 1.5rem;
}

/* 3. La variation pour le petit bouton */
.aplj-button--small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* NOUVEAU : Variation de survol pour le bouton principal du héros */
.aplj-button--hover-white:hover {
    background-color: var(--aplj-background); /* Fond blanc */
    color: var(--aplj-blue); /* Texte bleu nuit */
    border-color: var(--aplj-background); /* Bordure blanche */
}

/* NOUVEAU : On réactive les événements de la souris pour les boutons dans les panneaux */
.aplj-panel .aplj-button {
    pointer-events: auto;
}

/* NOUVEAU : On réactive les événements de la souris pour les boutons dans les panneaux ET les cartes */
.aplj-panel .aplj-button,
.aplj-news-card .aplj-button {
    pointer-events: auto;
}

/* On s'assure que le panneau des filtres a le bon style */
#recommandations-filtres .aplj-panel {
    background-color: var(--aplj-panel-gray); /* Fond pastel gris clair */
}

/* --- 10. COMPOSANT: TAG --- */

.aplj-tag {
    display: inline-block;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    padding: 0.25rem 0.75rem;

    /* Style du texte, pour correspondre à "Recrutement" */
    font-family: var(--font-body); /* Utilise Roboto, pas Montserrat */
    font-size: 0.8rem;
    text-transform: none; /* Pas de majuscules */
    letter-spacing: normal;
    color: var(--aplj-text);
}

.aplj-tag-cjl {
     display: inline-block;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    padding: 0.25rem 0.75rem;
     align-self: center;
    /* Style du texte, pour correspondre à "Recrutement" */
    font-family: var(--font-body); /* Utilise Roboto, pas Montserrat */
    font-size: 0.8rem;
    justify-content: center;
     text-align: center;

    text-transform: none; /* Pas de majuscules */
    letter-spacing: normal;
    color: var(--aplj-text);
}

/* On ajoute un espacement uniquement pour les tags qui sont des appels à l'action */
.aplj-panel-text > .aplj-tag {
    margin-top: 1.5rem;
}

/* On ajoute un espacement et on contrôle l'alignement pour les tags qui sont des CTA */
.aplj-news-text-wrapper > .aplj-tag {
    margin-top: 1.5rem;
    align-self: flex-start; /* LA CORRECTION EST ICI */
}

/* --- MISE EN PAGE INTERNE DU PANNEAU (TEXTE/IMAGE) --- */

/* On ajoute le padding du panneau principal pour que l'image puisse être à 10px des bords */
.aplj-panel.has-internal-grid {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* Le conteneur interne est une ligne flexbox qui prend toute la place */
.aplj-panel-content-wrapper {
    display: flex;
    align-items: stretch; /* Les deux colonnes auront la même hauteur */
    flex-grow: 1; /* NOUVEAU : Permet au conteneur de remplir l'espace du panneau */
    padding: 10px;
}

/* La colonne de texte a une largeur automatique et son propre padding */
.aplj-panel-text {
    flex-shrink: 0; /* Empêche la colonne de texte de rétrécir */
    padding: 24px;
    box-sizing: border-box;
    /* On peut donner une largeur maximale au texte pour un meilleur design */
    max-width: 60%; 
}

/* La colonne de l'image prend tout l'espace restant */
.aplj-panel-image {
    flex-grow: 1; /* Permet à la colonne de grandir pour remplir l'espace */
    min-width: 0; /* Correction pour flexbox */
}

/* Le conteneur <figure> de l'image prend toute la place disponible */
.aplj-image {
    width: 100%;
    height: 100%;
    margin: 0;
}


/* L'image elle-même remplit la <figure> sans se déformer */
.aplj-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- 11. PIED DE PAGE (FOOTER) --- */

.aplj-site-footer {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 0.9rem;
}

.aplj-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Crée une grille responsive qui s'adapte au nombre de colonnes */
    gap: 2rem; /* Espace entre les colonnes */
    padding: 2rem;
}

.aplj-footer-column h4.aplj-footer-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1rem;
}

.aplj-footer-column p,
.aplj-footer-column ul,
.aplj-footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.6;
}

.aplj-footer-column a {
    text-decoration: none;
    color: var(--aplj-text);
    transition: color 0.2s ease;
}

.aplj-footer-column a:hover {
    color: var(--aplj-orange);
}

.aplj-footer-copyright {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
}

/* --- 12. PANNEAU NEWSLETTER --- */

.aplj-newsletter-wrapper {
    padding: 10px; /* Crée la "bordure blanche" extérieure */
}

/* Le panneau coloré */
.aplj-newsletter-wrapper .aplj-panel {
    background-color: var(--aplj-panel-orange);
    padding: 2rem; /* Espace intérieur généreux */
}

/* Texte d'introduction */
.aplj-newsletter-wrapper .aplj-panel > p {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Conteneur du formulaire */
.aplj-newsletter-form {
    padding-top: 0rem;
    margin-top: 0rem;
}

/* NOUVEAU : On réactive la souris pour le formulaire à l'intérieur du panneau */
.aplj-panel .aplj-newsletter-form {
    pointer-events: auto;
}

/* Le champ de saisie */
.aplj-newsletter-form .classe-de-linput-brevo {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 1px solid var(--aplj-border) !important;
    background-color: var(--aplj-background) !important;
    color: var(--aplj-text) !important;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Le bouton */
.aplj-newsletter-form .classe-du-bouton-brevo {
    /* On applique le style de notre bouton */
    background-color: var(--aplj-blue) !important;
    color: var(--aplj-background) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
}

.aplj-newsletter-form .classe-du-bouton-brevo:hover {
    background-color: var(--aplj-orange) !important;
}


/* La grille à 3 colonnes pour les champs */
.aplj-newsletter-form .form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes égales */
    gap: 1.5rem; /* Espace entre les colonnes */
    margin-bottom: 2rem; /* Espace avant le bouton */
}

/* Style des étiquettes (labels) */
.aplj-newsletter-form .form-field label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Style des champs de saisie */
.aplj-newsletter-form .form-field input[type="email"],
.aplj-newsletter-form .form-field input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--aplj-border);
    background-color: var(--aplj-background);
    color: var(--aplj-text);
    box-sizing: border-box;
    font-size: 1rem;
}

/* Style spécifique pour le bouton S'inscrire */
.aplj-newsletter-form .aplj-button {
    background-color: var(--aplj-blue);
    color: var(--aplj-background);
    border: none;
    padding: 1rem 2rem;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.aplj-newsletter-form .aplj-button:hover {
    background-color: var(--aplj-orange);
}


/* --- 12B. SURCHARGE DES STYLES DE NEWSLETTER BREVO (CORRECTIF) --- */

/* On cache les labels par défaut */
.aplj-newsletter-form .sib-form-block > label {
    display: none !important;
}

/* On stylise les champs de saisie */
.aplj-newsletter-form input.sib-email-area,
.aplj-newsletter-form input.sib-FIRSTNAME-area,
.aplj-newsletter-form input.sib-LASTNAME-area {
    width: 100% !important;
    padding: 0.75rem !important;
    border: 1px solid var(--aplj-border) !important;
    background-color: var(--aplj-background) !important;
    color: var(--aplj-text) !important;
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
    box-sizing: border-box;
}

/* On stylise le bouton */
.aplj-newsletter-form input.sib-default-btn {
    /* On applique le style de notre bouton .aplj-button */
    background-color: var(--aplj-blue) !important;
    color: var(--aplj-background) !important;
    border: none !important;
    padding: 1rem 2rem !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* On annule le border-radius par défaut */
}

.aplj-newsletter-form input.sib-default-btn:hover {
    background-color: var(--aplj-orange) !important;
}


/* --- 13. SECTION ACTUALITÉS --- */

/* On rend la classe générique pour tous les en-têtes */
.aplj-section-header {
    padding: 1rem 24px;
    border-bottom: 1px solid var(--aplj-border);
}

.aplj-section-header .aplj-heading {
    margin: 0;
    font-size: 2.3rem;
}

.aplj-news-section-header {
    padding: 1rem 24px;
    border-bottom: 1px solid var(--aplj-border);
}

.aplj-news-section-header .aplj-heading {
    margin: 0;
    font-size: 2.5rem;
}

/* NOUVELLE RÈGLE POUR LE SOUS-TITRE */
.aplj-section-subtitle {
    font-family: var(--font-body); /* On utilise la police du corps de texte */
    font-size: 1.1rem;
    font-weight: 400; /* Poids normal, non gras */
    color: var(--aplj-text);
    margin: 0.5rem 0 0 0; /* C'EST ICI QUE TU JOUES SUR L'ESPACEMENT */
}

/* Le conteneur parent. Il n'a plus de curseur ni de détection de survol. */
.aplj-news-card {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

/* Le lien invisible qui sert de fond. C'est LUI qui gère le survol. */
.aplj-news-card .aplj-block-link {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    background-color: var(--aplj-news-bg);
    transition: background-color 0.3s ease;
    cursor: pointer; /* Le curseur est maintenant ici */
}

/* Le survol est maintenant détecté directement sur le lien */
.aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-news-bg-hover);
}

/* Le contenu est rendu "transparent" à la souris */
.aplj-news-card-content-wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
    /* On retire le padding d'ici */
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* Le conteneur de l'image n'a plus besoin de marge */
.aplj-news-card-content-wrapper .aplj-news-image {
    margin: 20px; 
}

/* Nouveau conteneur pour tout le texte */
.aplj-news-text-wrapper {
    padding: 24px; /* Le padding est maintenant ici */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* C'est ce bloc qui grandit pour pousser le footer en bas */
}

.aplj-news-card .aplj-news-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.aplj-news-card .aplj-news-content {
    flex-grow: 1;
}

.aplj-news-card .aplj-news-title {
    font-size: 1.6rem;
    font-family: serif;
    font-weight: normal;
    margin: 0 0 1rem 0;
}
.aplj-news-card .aplj-news-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}
.aplj-news-card .aplj-news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-top: 24px;
}

.aplj-news-card .aplj-news-date {
    color: #6B7280;
}


/* --- 14. SECTION ENGAGEMENT (VERSION SIMPLE ET FINALE) --- */

/* Conteneur principal de l'en-tête */
.aplj-engagement-header {
    padding: 1rem 24px;
}

/* Le conteneur intérieur devient un conteneur flex */
.aplj-engagement-header__inner {
    display: flex;
    justify-content: space-between; /* Pousse les éléments aux extrémités */
    align-items: baseline;        /* Aligne le texte sur la même ligne */
}

/* On s'assure que le titre n'a pas de marges superflues */
.aplj-engagement-header__title .aplj-heading {
    margin: 0;
    font-size: 2.2rem;
}

/* Style du lien à droite */
.aplj-engagement-header__link .aplj-section-header-link {
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--aplj-text);
}

/* Le conteneur principal qui crée la "bordure blanche" de 10px */
.aplj-engagement-section {
    padding: 10px; /* C'EST ÇA, LA BORDURE BLANCHE */
    background: transparent;
}

/* Le wrapper intérieur, qui a le fond pastel et le contenu */
.aplj-engagement-wrapper {
    background-color: var(--aplj-engagement-bg);
    padding: 0rem;
    display: flex;
    gap: 0rem;
}

/* Colonne de gauche (texte) */
.aplj-engagement-content-left {
    flex: 1;
    min-width: 0;
    padding-left: 20px;  On ne cible que l'espacement à gauche
}
.aplj-engagement-intro-text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 75ch;
    margin: 0 0 2rem 0;
}
.aplj-engagement-quote {
    font-family: serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.3;
    margin: 0 0 1rem 0;
    max-width: 50ch;
}


.aplj-engagement-author a {
    color: var(--aplj-text); /* Couleur par défaut */
    text-decoration: none; /* On retire le soulignement par défaut */
    transition: color 0.2s ease; /* Transition douce */
}

.aplj-engagement-author a:hover {
    color: var(--aplj-orange); /* Le texte passe en orange au survol */
}

/* On s'assure que le texte en gras à l'intérieur du lien hérite de la couleur */
.aplj-engagement-author a strong {
    font-weight: 700; /* On force le gras */
}

/* ON RÉINTRODUIT LE STYLE DU BOUTON CTA */
.aplj-engagement-button {
    display: inline-block;
    background-color: var(--aplj-orange);
    color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 0rem; /* Espace au-dessus du bouton */
}

.aplj-engagement-button:hover {
    background-color: var(--aplj-blue);
}

/* Colonne de droite (image) */
.aplj-engagement-image-right {
    width: 330px;
    flex-shrink: 0;
    align-self: flex-end; /* Aligne en bas */
}
.aplj-engagement-image-right img {
    width: 100%;
    height: auto;
    display: block;
}


/* --- UTILITAIRES D'AFFICHAGE RESPONSIVE --- */

/* Masqué par défaut sur mobile (jusqu'à 768px) */
.hide-on-mobile { display: none !important; }
/* Masqué par défaut sur tablette et ordinateur */
.hide-on-desktop { display: block !important; } /* Affiché par défaut */

/* À partir de la taille "mobile" (768px), on inverse */
@media (min-width: 768px) {
    .hide-on-mobile { display: block !important; } /* On affiche la version desktop */
    .hide-on-desktop { display: none !important; } /* On masque la version mobile */
}

/* --- UTILITAIRES D'AFFICHAGE RESPONSIVE --- */

/* Par défaut (mobile), on affiche la version mobile et on cache la version desktop */
.show-on-mobile { display: block !important; }
.show-on-desktop { display: none !important; }

/* À partir de 992px (desktop), on inverse */
@media (min-width: 992px) {
    .show-on-mobile { display: none !important; }
    .show-on-desktop { display: block !important; }
}

/* ==========================================================================
   15. RESPONSIVE (VERSION FINALE, PROPRE ET CORRECTE)
   ========================================================================== */
   
   /* --- UTILITAIRES D'ALIGNEMENT RESPONSIVE --- */

/* Par défaut (desktop), ces classes ne font rien de spécial */
.text-center-mobile { text-align: inherit; }
.text-justify-mobile { text-align: inherit; }

@media (max-width: 768px) {
    .text-center-mobile { text-align: center !important; }
    .text-justify-mobile { text-align: justify !important; }
}

/* --- UTILITAIRES DE BORDURES RESPONSIVES --- */

/* Par défaut (desktop), ces classes ne font rien */
.has-border-top-mobile,
.has-border-bottom-mobile,
.has-border-left-mobile,
.has-border-right-mobile {
    /* Aucune règle nécessaire ici */
}

/* Par défaut (desktop), ces classes ne font rien */
.has-no-border-top-mobile,
.has-no-border-bottom-mobile,
.has-no-border-left-mobile,
.has-no-border-right-mobile {
    /* Aucune règle nécessaire ici */
}

/* Sur tablette et mobile (< 992px), on supprime la bordure */
@media (max-width: 992px) {
    .has-no-border-top-mobile { border-top: none !important; }
    .has-no-border-bottom-mobile { border-bottom: none !important; }
    .has-no-border-left-mobile { border-left: none !important; }
    .has-no-border-right-mobile { border-right: none !important; }
}

/* À partir de 992px (tablette et mobile), on les active */
@media (max-width: 992px) {
    .has-border-top-mobile { border-top: 1px solid var(--aplj-border) !important; }
    .has-border-bottom-mobile { border-bottom: 1px solid var(--aplj-border) !important; }
    .has-border-left-mobile { border-left: 1px solid var(--aplj-border) !important; }
    .has-border-right-mobile { border-right: 1px solid var(--aplj-border) !important; }
}

/* --- A. TABLETTE (max-width: 992px) --- */
@media (max-width: 992px) {
    
     /* -- On réorganise le header sur tablette -- */
    .aplj-header-nav-wrapper {
        flex-wrap: wrap !important; /* Permet aux éléments de passer à la ligne */
        padding: 1rem;
    }

    /* On autorise nos grilles principales à passer à la ligne */
    .grid-100, .grid-66-33, .grid-33-66, .grid-33-33-33, .grid-50-50, 
    .grid-25-25-25-25, .grid-20-20-20-20-20, .grid-16-16-16-16-16-16 {
        flex-wrap: wrap;
    }

    /* Toutes les colonnes prennent 100% de la largeur */
    .aplj-main-content [class*="aplj-column"] {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Gestion des bordures : on retire les bordures latérales qui ne servent plus */
    .aplj-main-content [class*="aplj-column"].has-border-right {
        border-right: none;
    }
    
    /* On s'assure qu'il y a une bordure en bas pour séparer les blocs empilés */
    .aplj-main-content .grid-66-33 > div,
    .aplj-main-content .grid-33-33-33 > div,
    .aplj-main-content .grid-50-50 > div {
        border-bottom: 1px solid var(--aplj-border);
    }
    /* On supprime la bordure du dernier élément pour une finition propre */
    .aplj-main-content > div > div:last-child {
        border-bottom: none;
    }
    
    .aplj-main-content .grid-33-66 > div:not(:last-child) {
        border-bottom: 1px solid var(--aplj-border);
    }
    
    .page-id-14 .aplj-main-content > .has-border-left.has-border-right {
        border-top: 1px solid var(--aplj-border);
    }
    
     #mission .grid-33-66 .aplj-column-33 {
        border-bottom: none !important;
    }
    #mission .grid-33-66 .aplj-column-66 {
        padding-top: 2rem;
    }

    /* Section engagement de la page d'accueil */
    .aplj-engagement-wrapper {
        flex-direction: column;
        padding: 0;
    }
    .aplj-engagement-content-left {
        padding: 2rem;
        flex-grow: 1;
    }
    .aplj-engagement-image-right {
        width: 250px;
        align-self: center;
        margin-top: 0;
    }
    
    .aplj-section-header .aplj-heading,
    .aplj-news-section-header .aplj-heading,
    .aplj-engagement-header .aplj-heading {
        font-size: 2rem;
    }
    .aplj-engagement-button {
        font-size: 2rem;
        text-align:center;
    }

    .aplj-panel.has-internal-grid .aplj-image img {
        max-height: 500px;
    }
        
    /* -- CORRECTION RESPONSIVE POUR LA GRILLE "S'ENGAGER" -- */
    #sengager-orientation .grid-33-33-33 {
        flex-wrap: wrap;
    }
    #sengager-orientation .aplj-column-33 {
        width: 100%;
        border-right: none !important;
    }
    #sengager-orientation .aplj-column-33:not(:last-child) {
        border-bottom: 1px solid var(--aplj-border);
    }
}


/* --- B. MOBILE (max-width: 768px) - VERSION COMPLÈTE ET CORRIGÉE --- */
@media (max-width: 768px) {
    
    /* On masque le sous-menu de la rubrique Trophée sur mobile */
    #trophee-submenu {
        display: none;
    }
    
    /* On masque le sous-menu de la rubrique CJL sur mobile */
    #cjl-submenu {
        display: none;
    }
    
   
    
    /* ------------------------- */
    /* STRUCTURE GÉNÉRALE        */
    /* ------------------------- */
    .aplj-site-header { flex-direction: column; min-height: auto; }
    .aplj-header-logo-wrapper, .aplj-header-nav-wrapper { width: 100%; border-left: none; border-right: none; }
    .aplj-header-logo-wrapper { border-bottom: 1px solid var(--aplj-border); }
    .aplj-header-nav-wrapper { border-bottom: none; }
    .aplj-menu-panel { left: -1px; width: 100vw; max-width: none; border-left: none; border-right: none; }
    
    /* ------------------------- */
    /* RÈGLE D'OR : ESPACEMENTS    */
    /* ------------------------- */
    .aplj-panel, .aplj-value-card, .aplj-text-block, .aplj-section-header,
    .aplj-theme-description-panel, .aplj-news-text-wrapper, .aplj-news-card-inner,
    .aplj-pole-panel-content, .aplj-nav-panel, .aplj-modal-content,
    .aplj-form-selector, .aplj-engagement-content-left, .aplj-profile-card-content {
        padding: 1.5rem !important;
    }
    .aplj-forms-container { padding: 0 !important; }
    .aplj-contact-info-panel { padding: 1.5rem; }
    .aplj-panel .aplj-text-block { padding: 0 !important; }
    
    /* ------------------------- */
    /* TYPOGRAPHIE               */
    /* ------------------------- */
    .aplj-heading { font-size: 1.5rem; text-align: center;}
    .aplj-section-header .aplj-heading, .aplj-news-section-header .aplj-heading,
    .aplj-engagement-header .aplj-heading {
        font-size: 1.8rem;
        text-align: center;
    }

    /* LA CORRECTION EST ICI : on retire !important pour permettre la surcharge */
       .aplj-main-content p:not(.aplj-phase-season):not(.aplj-hero-slogan):not(.aplj-phase-action),
    .aplj-main-content .aplj-section-subtitle {
        text-align: justify;
    }

    /* ------------------------- */
    /* AJUSTEMENTS SPÉCIFIQUES   */
    /* ------------------------- */
    /* -- PAGE D'ACCUEIL -- */
    .aplj-engagement-button { font-size: 1.4rem; text-align: center; }
    .aplj-engagement-quote { font-size: 1.5rem; }
    .aplj-panel.has-internal-grid .aplj-panel-content-wrapper { flex-direction: column; padding: 0; }
    .aplj-panel.has-internal-grid .aplj-panel-text { width: 100%; max-width: 100%; padding: 1.5rem; }
    .aplj-panel.has-internal-grid .aplj-panel-image { width: 100%; order: -1; }
    .aplj-panel.has-internal-grid .aplj-image img { max-height: 400px; }

    /* -- PAGE "À PROPOS" -- */
    .page-template-page-a-propos .aplj-value-card { display: block !important; }
    .page-template-page-a-propos .aplj-nav-panel .aplj-heading { font-size: 1.2rem; }
    .page-template-page-a-propos p { line-height: 1.7; }
    /* -- CORRECTION BORDURE SUR MOBILE (PAGE À PROPOS / MANIFESTE) -- */
    #mission .grid-33-66 .aplj-column-66 {
        border-top: 0px solid var(--aplj-border); /* On ajoute une séparation en haut */
        border-bottom: 0px solid var(--aplj-border); /* On ajoute une séparation en haut */
        padding-top: 2rem; /* On ajoute de l'espace */
    }

    /* -- PAGE "NOS ACTIONS" -- */
    .aplj-pole-panel { min-height: auto; }
    #creer .aplj-text-block { padding: 0 !important; padding-bottom: 120px !important; }
    .aplj-modal-content { max-width: 90%; }
    
    /* -- PAGE "S'ENGAGER" -- */
    #sengager-orientation .aplj-news-card-inner, #espace-jeunes .aplj-news-card-inner,
    #espace-adultes .aplj-news-card-inner, #espace-organisations .aplj-news-card-inner {
        padding: 1.5rem !important;
        text-align: center;
    }
    #sengager-orientation .aplj-news-text-wrapper, #sengager-orientation .aplj-news-content,
    #espace-jeunes .aplj-news-text-wrapper, #espace-jeunes .aplj-news-content,
    #espace-adultes .aplj-news-text-wrapper, #espace-adultes .aplj-news-content,
    #espace-organisations .aplj-news-text-wrapper, #espace-organisations .aplj-news-content {
        padding: 0 !important;
    }
    #sengager-orientation .aplj-news-image { margin-bottom: 2.5rem; }
    #sengager-orientation .aplj-news-text-wrapper > .aplj-tag { align-self: center !important; }

    /* -- PAGE "CONTACT" -- */
    .aplj-form-selector .aplj-filter-options { flex-direction: column; align-items: stretch; }

    /* -- PAGE ACCUEIL TROPHÉE -- */
    .aplj-judgment-grid { display: flex; flex-direction: column; gap: 2rem; }
    .aplj-judgment-step { text-align: center; padding-left: 0; border-left: none; padding-bottom: 2rem; border-bottom: 1px solid var(--aplj-border); }
    .aplj-judgment-grid .aplj-judgment-step:last-child { border-bottom: none; padding-bottom: 0; }
   
    #organisation .aplj-cta-banner .aplj-heading { font-size: 1.6rem !important; }
    #organisation .aplj-cta-banner .aplj-button { padding: 0.8rem 1.8rem; font-size: 1.2rem; }

    #organisation .aplj-phase-card-v2 { text-align: center; }
    #organisation .aplj-phase-card-v2 .aplj-phase-date, #organisation .aplj-phase-card-v2 .aplj-phase-header {
        justify-content: center;
        align-self: center;
    }
    
    /* -- PAGE CONCEPT TROPHÉE -- */

    /* On s'assure que le sous-titre de la page est bien justifié */
    .page-id-283 .aplj-section-subtitle {
        text-align: justify !important;
    }

    /* On centre le titre de la section "révolution du plaisir" */
    #mission .aplj-section-title {
        text-align: center;
    }
    
    /* -- PAGE CALENDRIER & RÈGLEMENT (page-id-283) -- */

    /* On réduit la taille des titres */
    .page-id-283 .aplj-section-header .aplj-heading {
        font-size: 1.6rem !important;
    }

    /* On force le centrage dans les en-têtes de phase */
    .page-id-283 #calendrier .aplj-panel {
        text-align: center;
    }
    /* Et on force le paragraphe à obéir, en gagnant contre la règle 'justify' */
    .page-id-283 #calendrier .aplj-timeline-season {
        text-align: center !important;
    }

    /* On centre les tags de date */
    .page-id-283 .aplj-timeline__tag-title {
        margin-left: auto;
        margin-right: auto;
        display: table;
        text-align: center !important;
    }

    
    /* On justifie les descriptions */
    .page-id-283 .aplj-timeline__event-title,
    .page-id-283 .aplj-timeline__event-description,
    .page-id-283 .aplj-timeline__event-action {
        text-align: justify !important;
    }
    
    /* On réduit le padding du règlement */
    .page-id-283 .aplj-simple-accordion-reponse {
        padding: 0.5rem !important;
    }
    
    .page-id-283 .aplj-anchor-nav {
        justify-content: center;
    }
    
    /* -- PAGE KIT PÉDAGOGIQUE -- */

    /* On transforme la grille des boutons d'action en colonne */
    .page-template-page-trophee-kit .aplj-seance-actions-grid {
        flex-direction: column;
        gap: 1rem;
    }

    /* On applique le style demandé aux cartes d'action */
    .page-template-page-trophee-kit .aplj-seance-button-card .aplj-block-link {
        border: 1px solid var(--aplj-border);
        background-color: #f3f4f6; /* Le gris clair standard */
    }

    .page-template-page-trophee-kit .aplj-seance-button-card .aplj-block-link:hover {
        background-color: #e5e7eb; /* Un gris légèrement plus foncé au survol */
    }
    
    .page-template-page-trophee-kit .aplj-text-block {
        padding: 1rem 1rem !important; 
    }
    
    .page-template-page-trophee-kit .aplj-tabs-container {
        padding: 0rem !important;
    }
    
    /* On centre le bouton de téléchargement des séquences */
    .page-template-page-trophee-kit .aplj-text-block .aplj-button {
        display: table; /* Astuce pour centrer un inline-block */
        margin-left: auto;
        margin-right: auto;
    }    
    /* On diminue la taille des titres de séance dans l'accordéon */
    .page-template-page-trophee-kit .aplj-simple-accordion-question {
        font-size: 1.1rem;
    }
    
    /* -- PAGE FINALE & LAURÉATS -- */

    /* On force la justification du sous-titre */
    .page-id-287 .aplj-section-subtitle { 
        text-align: justify !important;
    }
    
    /* On force le centrage du titre de section */
    .page-id-287 #organisation .aplj-section-header .aplj-heading {
        text-align: center !important;
    }
    
     /* On réorganise la grille du palmarès pour le mobile */
    .page-id-287 .aplj-laureats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* On garde les 2 colonnes */
        grid-auto-flow: column; /* C'EST LA MAGIE : on remplit d'abord les colonnes, de haut en bas */
        grid-template-rows: repeat(5, auto); /* On définit 5 lignes */
        gap: 1rem;
    }
    
    .page-id-287 .aplj-intro-text {
        text-align: justify !important;
    }
    
    /* -- PAGE FAQ TROPHÉE -- */

    /* On réduit la taille des titres de THÈMES (h2) */
    .page-template-page-trophee-faq .aplj-faq-section .aplj-heading {
        font-size: 1.6rem !important; /* On force une taille plus petite */
        text-align: center; 
        padding-left: 0; /* On ajuste le padding qui était dans un style en ligne */
    }
    
    /* -- PAGE ACCUEIL CJL -- */
    .aplj-hero-content--with-image {
        flex-direction: column-reverse;
    }
    .aplj-hero-image {
        width: 80%;
        max-width: 300px;
    }
    .aplj-hero-content--with-image .aplj-page-title {
        font-size: 1.6rem; /* On ajuste la taille du titre pour mobile */
        text-align: center;
    }
    
    .page-id-12 .aplj-hero-slogan,
    .page-id-12 .aplj-news-card-inner p {
        text-align: center !important;
    }
    
    /* -- PAGE CJL - PÔLES D'EXPERTISE -- */

    /* On réduit le padding des étapes du processus de labellisation */
    .page-template-page-cjl-poles .aplj-process-step {
        padding: 10px;
    }
    
    /* -- PAGE CJL - MISSION (page-id-XXX) -- */

    /* On annule la marge du haut du h3 spécifique */
    .page-id-307 .aplj-heading {
        margin-top: 0 !important;
    }
    
    /* --- EXCEPTION POUR LA PAGE CJL-MISSION (page-id-307) --- */

    /* On annule le padding de la règle d'or pour ce conteneur spécifique */
.page-id-307 #mission .aplj-panel {
        padding: 0 !important;
    }
    
    /* --- AJUSTEMENTS FINS DES MARGES SUR MOBILE --- */

    /* On supprime la marge du haut sur les titres-étiquettes */
    .aplj-tag-title {
        margin-top: 0;
    }

    /* On supprime la marge du bas sur les paragraphes dans les blocs de contenu des cartes */
    .aplj-news-content p {
        margin-bottom: 0;
    }
}


/* --- 16. STYLES DES PAGES INTÉRIEURES (CORRECTION AVEC CSS GRID) --- */

/* Wrapper qui crée la bordure blanche de 10px */
.aplj-panel-wrapper {
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
}

.aplj-panel-wrapper .aplj-panel {
    background-color: var(--aplj-panel-ice);
    padding: 2rem;
}

/* Le panneau à l'intérieur, qui reçoit la couleur et le contenu */
.aplj-panel-wrapper .aplj-value-card {
    padding: 2rem;
    height: 100%;
    box-sizing: border-box;
}

/* Styles pour le texte de la section Mission */
.aplj-text-block { padding: 2rem; }
.aplj-text-block p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.aplj-text-block p:last-child { margin-bottom: 0; }
.aplj-section-title { font-size: 1.8rem; margin-top: 0px; margin-bottom: 10px; /*margin : 10px;*/ }

/* Style des cartes de valeurs */
.aplj-value-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem 0;
    text-align: center;
}
.aplj-value-card p {
    margin: 0;
    line-height: 1.6;
}

.aplj-image-placeholder {
    background-color: var(--aplj-background);
    border: 0px solid var(--aplj-border);
    height: 150px; /* Hauteur de l'espace réservé */
    margin-top: 1.5rem;
}

/* --- 16B. SOUS-MENU DE NAVIGATION INTERNE --- */

/* La grille à 4 colonnes */
.grid-25-25-25-25 {
    display: flex;
    align-items: stretch;
}

.grid-25-25-25-25 > .aplj-column {
    width: 25%;
}

/* Style des panneaux de navigation */
.aplj-nav-panel {
    position: relative;
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center; /* Centre le texte verticalement */
    justify-content: center; /* Centre le texte horizontalement */
    text-align: center;
}

.aplj-nav-panel .aplj-heading {
    margin: 0;
    font-size: 1.2rem;
    position: relative;
    z-index: 2; /* Pour être sûr qu'il est au-dessus du lien de fond */
    pointer-events: none; /* Pour que le clic traverse jusqu'au lien de fond */
}

/* Couleurs des panneaux */
.aplj-nav-panel.panel-pa-001 .aplj-block-link { background-color: var(--aplj-panel-pa-001); }
.aplj-nav-panel.panel-pa-002 .aplj-block-link { background-color: var(--aplj-panel-pa-002); }
.aplj-nav-panel.panel-pa-003 .aplj-block-link { background-color: var(--aplj-panel-pa-003); }
.aplj-nav-panel.panel-pa-005 .aplj-block-link { background-color: var(--aplj-panel-pa-005); }

/* Couleurs au survol */
.aplj-nav-panel.panel-pa-001 .aplj-block-link:hover { background-color: var(--aplj-panel-pa-001-hover); }
.aplj-nav-panel.panel-pa-002 .aplj-block-link:hover { background-color: var(--aplj-panel-pa-002-hover); }
.aplj-nav-panel.panel-pa-003 .aplj-block-link:hover { background-color: var(--aplj-panel-pa-003-hover); }
.aplj-nav-panel.panel-pa-005 .aplj-block-link:hover { background-color: var(--aplj-panel-pa-005-hover); }


/* --- 17. PAGE "NOS ACTIONS" --- */

/* Panneaux des pôles */
.aplj-pole-panel {
    position: relative;
    height: 100%;
    min-height: 250px; /* Hauteur minimale pour un bel affichage */
}

.aplj-pole-panel-content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.aplj-pole-panel-content svg {
    margin-bottom: 1rem;
    color: var(--aplj-blue);
}

.aplj-pole-panel-content .aplj-heading {
    font-size: 1.5rem;
}

.aplj-pole-panel-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.aplj-pole-icon-img {
    display: block;
    width: 300px; /* Ajuste cette taille si besoin */
    height: auto;
    margin: 0.5rem 0; /* Espace au-dessus et en dessous de l'icône */
}

/* --- STYLE POUR IMAGE EN BAS DE PANNEAU (PAGE ACTIONS) --- */

/* On s'assure que le panneau qui contient l'image peut la positionner */
#creer .aplj-text-block {
    position: relative; /* Contexte de positionnement pour l'image */
    padding-bottom: 150px; /* On fait de la place en bas pour l'image. Ajuste cette valeur si besoin. */
}

/* Le style de l'image elle-même */
.aplj-panel-bottom-image {
    position: absolute;
    bottom: -10px; /* On la fait "dépasser" un peu du padding blanc du panneau */
    left: 50%;
    transform: translateX(-50%); /* Technique classique pour centrer horizontalement */
    max-width: 90%; /* Pour qu'elle ne touche pas les bords */
    height: auto;
    display: block;
}


/* Couleurs des panneaux de pôle */
.aplj-pole-panel.panel-green .aplj-block-link { background-color: var(--aplj-news-bg); }
.aplj-pole-panel.panel-yellow .aplj-block-link { background-color: var(--aplj-panel-ice); }
.aplj-pole-panel.panel-orange .aplj-block-link { background-color: var(--aplj-actu-bg); }

.aplj-pole-panel.panel-green .aplj-block-link:hover { background-color: var(--aplj-news-bg-hover); }
.aplj-pole-panel.panel-yellow .aplj-block-link:hover { background-color: var(--aplj-panel-ice-hover); }
.aplj-pole-panel.panel-orange .aplj-block-link:hover { background-color: var(--aplj-actu-bg-hover); }

/* CARTE DE TYPE "ACTUALITÉS" (RÉUTILISÉE PARTOUT) */
.aplj-news-card { position: relative; height: 100%; box-sizing: border-box; }
.aplj-news-card .aplj-block-link { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 1; transition: background-color 0.3s ease; cursor: pointer; }
.aplj-news-card-inner { position: relative; z-index: 2; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; pointer-events: none; }
.aplj-news-card-inner .aplj-image-placeholder { margin: 20px 20px 0 20px; background-color: #fff; border: 1px solid var(--aplj-border); }
.aplj-news-text-wrapper { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }
.aplj-news-content { flex-grow: 1; }
.aplj-news-title { font-size: 1.6rem; font-family: serif; font-weight: normal; margin: 0 0 1rem 0; }
.aplj-news-excerpt { font-size: 1rem; line-height: 1.6; margin: 0; }
.aplj-news-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-top: 0; }
.aplj-news-date { color: #6B7280; }


/* --- 18. PAGE "NOS RECOMMANDATIONS" (NETTOYÉ) --- */

/* Couleur de fond pour la sélection "Sceau d'Or" */
#recommandations-sceau-dor .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-panel-yellow);
}
#recommandations-sceau-dor .aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-panel-yellow-hover);
}

/* Couleur de fond pour la grille des résultats */
#recommandations-resultats .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-panel-sky);
}
#recommandations-resultats .aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-panel-sky-hover);
}

/* Les styles pour les filtres et la pagination restent, car ils sont uniques à cette page */

.aplj-filter-group { margin-bottom: 1.5rem; }
.aplj-filter-group:last-child { margin-bottom: 0; }
.aplj-filter-label { display: block; font-family: var(--font-heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.aplj-filters-form input[type="text"] { width: 100%; padding: 0.75rem; border: 1px solid var(--aplj-border); font-size: 1rem; }
.aplj-filter-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aplj-filter-button { background-color: var(--aplj-background); border: 1px solid var(--aplj-border); padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }
.aplj-filter-button:hover, .aplj-filter-button.is-active { background-color: var(--aplj-blue); color: var(--aplj-background); border-color: var(--aplj-blue); }



#recommandations-resultats .aplj-news-title {
    font-family: var(--font-heading); /* Revient à Montserrat */
    font-weight: 700; /* On s'assure qu'elle est en gras */
}

/* Responsive pour la grille */
@media (max-width: 992px) {
    .aplj-results-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur tablette */
    }
    .aplj-results-grid div:nth-child(3n) .aplj-critic-card-wrapper {
        border-right: 1px solid var(--aplj-border); /* On réactive la bordure */
    }
    .aplj-results-grid div:nth-child(2n) .aplj-critic-card-wrapper {
        border-right: none; /* On désactive sur la nouvelle dernière colonne */
    }
}
@media (max-width: 768px) {
    .aplj-results-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
    .aplj-results-grid div:nth-child(n) .aplj-critic-card-wrapper {
        border-right: none; /* Plus aucune bordure à droite */
    }
}


/* --- 19. PAGE "S'ENGAGER" (VERSION AMÉLIORÉE) --- */

.aplj-profile-card {
    position: relative;
    height: 100%;
}

.aplj-profile-card-content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* NOUVEAU : Placeholder pour l'image dans les cartes de profil */
.aplj-profile-card .aplj-image-placeholder {
    height: 120px;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    margin-bottom: 2rem;
}

.aplj-profile-card-content .aplj-heading {
    font-size: 1.8rem;
    flex-grow: 1; /* Pousse le paragraphe vers le bas */
}

.aplj-profile-card-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* NOUVEAU : Conteneur pour le tag en dessous */
.aplj-profile-tag-wrapper {
    text-align: center;
    padding: 0.5rem;
    border: 1px solid var(--aplj-border);
    border-top: none;
}

/* Couleurs des panneaux */
.aplj-profile-card.panel-sky .aplj-block-link { background-color: var(--aplj-panel-sky); }
.aplj-profile-card.panel-green .aplj-block-link { background-color: var(--aplj-panel-green); }
.aplj-profile-card.panel-yellow .aplj-block-link { background-color: var(--aplj-panel-yellow); }

.aplj-profile-card.panel-sky .aplj-block-link:hover { background-color: var(--aplj-panel-sky-hover); }
.aplj-profile-card.panel-green .aplj-block-link:hover { background-color: var(--aplj-panel-green-hover); }
.aplj-profile-card.panel-yellow .aplj-block-link:hover { background-color: var(--aplj-panel-yellow-hover); }

/* On applique les couleurs de fond aux cartes de cette page */
#sengager-orientation .card-jeune .aplj-block-link { background-color: var(--aplj-news-bg); }
#sengager-orientation .card-jeune .aplj-block-link:hover { background-color: var(--aplj-news-bg-hover); }

#sengager-orientation .card-adulte .aplj-block-link { background-color: var(--aplj-panel-ice); }
#sengager-orientation .card-adulte .aplj-block-link:hover { background-color: var(--aplj-panel-ice-hover); }

#sengager-orientation .card-orga .aplj-block-link { background-color: var(--aplj-actu-bg); }
#sengager-orientation .card-orga .aplj-block-link:hover { background-color: var(--aplj-actu-bg-hover); }

/* On centre le texte dans les cartes de la section d'orientation */
#sengager-orientation .aplj-news-text-wrapper {
    text-align: center;
}

/* Couleurs pour les panneaux de la page "S'engager" */

/* Section Jeunes */
#espace-jeunes .aplj-news-card .aplj-block-link { background-color: var(--aplj-news-bg); }
#espace-jeunes .aplj-news-card .aplj-block-link:hover { background-color: var(--aplj-news-bg-hover); }

/* Section Adultes */
#espace-adultes .aplj-news-card .aplj-block-link { background-color: var(--aplj-panel-ice); }
#espace-adultes .aplj-news-card .aplj-block-link:hover { background-color: var(--aplj-panel-ice-hover); }

/* Section Organisations */
#espace-organisations .aplj-news-card .aplj-block-link { background-color: var(--aplj-actu-bg); }
#espace-organisations .aplj-news-card .aplj-block-link:hover { background-color: var(--aplj-actu-bg-hover); }

/* On ajuste les styles pour les sections détaillées */
#sengager-details .aplj-value-card {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#sengager-details .aplj-value-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem 0;
}
#sengager-details .aplj-value-card p {
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
    flex-grow: 1; /* Pousse le bouton en bas */
}
#sengager-details .aplj-button {
    align-self: center; /* Centre le bouton */
    width: fit-content;
}

/* NOUVEAU : On unifie le style des paragraphes pour les sections détaillées */
#espace-jeunes .aplj-news-content p,
#espace-adultes .aplj-news-content p,
#espace-organisations .aplj-news-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- 20. PAGE "CONTACT" (CORRECTIF) --- */

/* Wrapper qui crée la bordure blanche de 10px */
.aplj-contact-panel-wrapper {
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
}

/* Le panneau intérieur avec le fond pastel et le contenu */
.aplj-contact-info-panel {
    background-color: var(--aplj-panel-gray); /* Fond pastel gris */
    padding: 2rem;
    height: 100%;
    box-sizing: border-box;
}

.aplj-contact-info-title {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1.5rem 0;
}

.aplj-contact-info-group {
    margin-bottom: 1.5rem;
}
.aplj-contact-info-group:last-child {
    margin-bottom: 0;
}

.aplj-contact-info-label {
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.aplj-contact-info-group p {
    margin: 0;
    line-height: 1.6;
}
.aplj-contact-info-group a {
    color: var(--aplj-text);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.aplj-contact-info-group a:hover {
    color: var(--aplj-orange);
}

.aplj-form-selector {
    padding: 2rem;
    background-color: #f9f9f9;
    border-bottom: 1px solid var(--aplj-border);
}
.aplj-form-selector p {
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.aplj-forms-container {
    /*padding: 2rem;*/
}


/* --- 21. PAGE "ACTUALITÉS" --- */

/* Le wrapper qui crée la bordure blanche */
.aplj-featured-article-wrapper {
    padding: 10px;
}

/* Le panneau intérieur avec le contenu */
.aplj-featured-article {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    min-height: 300px;
    background-color: var(--aplj-panel-sky); /* Le fond pastel est ici */
}

.aplj-featured-article .aplj-block-link {
    /* Le lien invisible ne gère plus le fond, juste le clic */
    top: 0; left: 0; right: 0; bottom: 0;
    transition: background-color 0.2s ease;
}

/* On applique l'effet de survol directement sur le panneau */
.aplj-featured-article:hover {
    background-color: var(--aplj-panel-sky-hover);
}

.aplj-featured-article__image-placeholder {
    width: 40%;
    height: 250px;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.aplj-featured-article__image-placeholder {
    width: 40%;
    height: 250px;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.aplj-featured-article__content {
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.aplj-featured-article__content .aplj-heading {
    font-size: 2rem;
    margin-top: 1rem;
}

/* NOUVEAU : On centre le contenu pour les cartes de filtre */
#actualites-filtres .aplj-news-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
    font-weight: 700;
}

/* Couleur de fond pour les filtres */
#actualites-filtres .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-actu-bg);
}
#actualites-filtres .aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-actu-bg-hover);
}
/* On met en évidence le filtre actif */
#actualites-filtres .is-active .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-actu-bg-hover);
}

/* NOUVEAU : La grille spécifique pour les articles filtrables */
.aplj-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes par défaut */
}

/* La classe qui cache les articles filtrés DANS CETTE GRILLE */
.aplj-articles-grid > .is-hidden {
    display: none;
}

/* On adapte le responsive pour cette grille spécifique */
@media (max-width: 992px) {
    .aplj-articles-grid {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur tablette */
    }
}
@media (max-width: 768px) {
    .aplj-articles-grid {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
}


/* --- 22. RUBRIQUE TROPHÉE --- */

/* NOUVEAU : Style pour le lien sous chaque "réponse" */
.aplj-value-card .aplj-concept-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--aplj-text);
}
.aplj-value-card .aplj-concept-link:hover {
    color: var(--aplj-orange);
}

/* NOUVEAU : On ajoute un espacement aux boutons à l'intérieur des cartes de valeur */
.aplj-value-card .aplj-button {
    margin-top: 1.5rem;
}

/* On applique la couleur pastel à notre nouveau sous-menu */
#trophee-submenu .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-panel-ice);
}
/* Survol */
#trophee-submenu .aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-panel-ice-hover);
}
/* État actif */
#trophee-submenu .is-active .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-panel-ice-hover);
}

/* Style du bloc "Héros" (styles manquants) */
.aplj-page-title { /* Règle générique pour les titres de page */
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    margin: 0;
}
.aplj-hero-content {
    position: relative;
    z-index: 2;
}

/* On s'assure que les titres à l'intérieur de ce bloc sont blancs */
.aplj-hero-video-placeholder .aplj-page-title {
    color: var(--aplj-background);
}

/* Style du bloc "Héros" de la page Trophée */
.aplj-hero-video-placeholder {
    height: 30vh; /* Prend 60% de la hauteur de l'écran */
    background-color: var(--aplj-blue); /* Fond sombre */
    color: var(--aplj-background); /* Texte blanc */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.aplj-hero-slogan {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 400;
    /*max-width: 50ch;  Limite la largeur du slogan */
    margin: 1rem auto 2.5rem auto; /* Centre et ajoute de l'espace */
}

.aplj-hero-buttons {
    display: flex;
    justify-content: center; /* LA CORRECTION EST ICI */
    gap: 1rem;
}

/* NOUVEAU : On ajoute le style pour le bandeau CTA final */
.aplj-cta-banner-wrapper {
    padding: 10px; /* Crée la bordure blanche */
}

.aplj-cta-banner {
    background-color: var(--aplj-panel-yellow);
    padding: 3rem 2rem;
    text-align: center;
}

/* Variation "secondaire" pour les boutons */
.aplj-button--secondary {
    background-color: transparent;
    border-color: var(--aplj-background);
    color: var(--aplj-background);
}

.aplj-button--secondary:hover {
    background-color: var(--aplj-background);
    color: var(--aplj-blue);
}

/* SECTION "LE CONCEPT EN 3 QUESTIONS" */
/* Cette section réutilise .grid-33-33-33 et .aplj-value-card, déjà stylés */
/* On peut juste ajuster le titre si besoin */
#concept .aplj-value-title {
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* SECTION "BOÎTE À OUTILS" */
#outils .aplj-panel {
    background-color: var(--aplj-panel-ice);
}
.aplj-tool-card {
    padding: 2rem;
    text-align: center;
}
.aplj-tool-card svg {
    color: var(--aplj-orange);
    margin-bottom: 1rem;
}
.aplj-tool-title {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}
.aplj-tool-card p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
}
.aplj-cta-centered {
    text-align: center;
    padding: 1.5rem;
}

/* SECTION "CALENDRIER ET JURYS" */
#organisation .aplj-panel {
    background-color: var(--aplj-panel-ice);
}
.aplj-step-list {
    padding-left: 20px;
    line-height: 1.7;
}
.aplj-step-list li {
    margin-bottom: 1rem;
}

/* SECTION "APPEL À L'ACTION FINAL" */
.aplj-cta-banner {
    background-color: var(--aplj-panel-yellow);
    padding: 3rem 2rem;
    text-align: center;
}
.aplj-cta-banner .aplj-heading {
    font-size: 2rem;
}
.aplj-cta-banner p {
    margin: 1rem 0 2rem 0;
    font-size: 1.1rem;
}

.aplj-accordion-placeholder {
    border: 1px solid var(--aplj-border);
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--aplj-background);
}
.aplj-buttons-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* NOUVEAU : Grille de boutons de téléchargement */
.aplj-download-grid {
    /* Ce conteneur n'a besoin d'aucun style particulier */
}

.aplj-download-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    min-height: 100px;
    height: 100%;
}

.aplj-download-panel .aplj-block-link {
    top: 0; left: 0; right: 0; bottom: 0; /* Prend tout l'espace */
}

.aplj-download-panel .aplj-download-text {
    position: relative;
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
}

/* Couleurs des boutons */
.aplj-download-panel--primary .aplj-block-link { background-color: var(--aplj-orange); }
.aplj-download-panel--primary .aplj-download-text { color: var(--aplj-background); }
.aplj-download-panel--primary .aplj-block-link:hover { background-color: var(--aplj-orange-hover); }

.aplj-download-panel--secondary .aplj-block-link { background-color: var(--aplj-panel-ice); }
.aplj-download-panel--secondary .aplj-download-text { color: var(--aplj-blue); }
.aplj-download-panel--secondary .aplj-block-link:hover { background-color: var(--aplj-panel-ice-hover); }

.aplj-download-link-card .aplj-news-card-inner {
    display: flex;
    /* align-items: center; -- On retire le centrage vertical global */
    justify-content: space-between;
    padding: 1.5rem;
    min-height: 80px;
}
/* NOUVEAU : On aligne spécifiquement l'icône sur le bas */
.aplj-download-link-card__icon {
    align-self: flex-end; /* Aligne l'icône sur le bas du conteneur flex */
    padding-bottom: 0.1rem; /* Léger ajustement pour un alignement parfait avec la ligne de base du titre */
}

.aplj-download-link-card__text {
    text-align: left; /* Aligne le texte à gauche */
}

.aplj-download-link-card__text .aplj-download-type {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}

.aplj-download-link-card__text .aplj-download-title {
    font-family: serif;
    font-size: 1.2rem;
    color: var(--aplj-text);
}

.aplj-download-link-card__icon svg {
    width: 28px;
    height: 28px;
    color: var(--aplj-text);
}

/* On applique les nouvelles couleurs directement via CSS */
.aplj-download-link-card .aplj-block-link {
    background-color: var(--aplj-panel-download-bg);
}
.aplj-download-link-card .aplj-block-link:hover {
    background-color: var(--aplj-panel-download-bg-hover);
}

/* NOUVEAU : Positionnement de l'icône de téléchargement */
.aplj-download-link-card .aplj-download-wrapper {
    display: flex;
    justify-content: space-between; /* Pousse les 2 enfants aux extrémités */
    width: 100%;
}

.aplj-download-link-card .aplj-download-icon-wrapper {
    display: flex;
    align-items: center; /* Centre l'icône verticalement */
}

@media (max-width: 992px) {

    /* ... (les autres règles ne changent pas) ... */


    /* NOUVEAU : On ajuste le bloc "Héros" du Trophée sur tablette */
    .aplj-hero-video-placeholder {
        height: auto; /* Hauteur automatique */

    }
    .aplj-hero-video-placeholder .aplj-page-title {
        font-size: 2rem; /* On réduit le titre */
    }
    .aplj-hero-slogan {
        font-size: 1.2rem; /* On réduit le slogan */
    }
    .aplj-hero-buttons {
        flex-direction: column; /* On empile les boutons */
        align-items: center; /* On les centre */
        width: 100%;
    }
    .aplj-hero-buttons .aplj-button {
        width: 100%;
        max-width: 350px; /* On limite leur largeur pour l'esthétique */
    }
    
    /* NOUVEAU : On réduit la taille des titres de section sur mobile */
    .aplj-section-header .aplj-heading {
        font-size: 1.8rem; /* Plus petit que le 2.5rem par défaut */
    }

}


/* --- 22B. COMPOSANT: TIMELINE DU CALENDRIER --- */

.aplj-timeline {
    /* Conteneur principal */
}

.aplj-timeline__phase {
    margin-bottom: 3rem; /* Espace entre chaque grande phase */
}
.aplj-timeline__phase:last-child {
    margin-bottom: 0;
}

.aplj-timeline__phase-header .aplj-heading {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aplj-timeline__phase-header .aplj-timeline-season {
    font-weight: 700;
    color: #6b7280;
    margin-top: 0.25rem;
}

.aplj-timeline__events {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espace entre les panneaux d'événements */
}

/* On utilise notre système de panneau fiable */
.aplj-timeline__event-panel {
    /* Le .aplj-panel-wrapper gère la bordure blanche */
}
.aplj-timeline__event-panel .aplj-panel {
    padding: 1.5rem;
    background-color: var(--aplj-panel-ice);
}

.aplj-timeline__event-date {
    font-weight: 700;
}
.aplj-timeline__event-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.aplj-timeline__tag-title {
    display: inline-block;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    padding: 0.25rem 0.75rem;
    
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0.5rem 0;
}


.aplj-timeline__event-description {
    margin: 0.5rem 0;
}
.aplj-timeline__event-action {
    margin-top: 1rem;
    font-weight: 700;
}


/* --- 23. PAGE "KIT PÉDAGOGIQUE" (ONGLETS & ACCORDÉONS) --- */

/* NOUVEAU : Style pour les onglets secondaires (imbriqués) */
.aplj-tabs-nav--secondary {
    border-bottom: 1px solid #ddd; /* Une bordure plus légère */
    margin-bottom: 1.5rem;
}
.aplj-tab-link--secondary {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    font-weight: 400;
}
.aplj-tab-link--secondary.is-active {
    font-weight: 700;
    border-color: var(--aplj-blue); /* Une couleur différente pour la distinction */
}

.aplj-tabs-container {
    padding: 2rem;
}

/* Navigation des onglets */
.aplj-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--aplj-border);
}
.aplj-tab-link {
    padding: 1rem 1.5rem;
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--aplj-text);
    margin-bottom: -1px; /* Pour que la bordure se superpose */
}
.aplj-tab-link.is-active {
    border-color: var(--aplj-orange);
    font-weight: 700;
}

/* Contenu des onglets */
.aplj-tabs-content {
    padding: 2rem 0 0 0;
}



/* NOUVEAU : Séparateur entre les cycles */
.aplj-cycle-separator {
    border-bottom: 2px solid var(--aplj-border);
    margin: 3rem 0;
}


/* --- 24. PAGE FAQ (COMPOSANT ACCORDÉON DÉDIÉ) --- */

.aplj-faq-section {
    margin-bottom: 0rem;
}

.aplj-accordion-item {
    padding: 10px; /* Crée la bordure blanche */
    border-top: 1px solid var(--aplj-border);
}
.aplj-faq-section .aplj-accordion-item:first-of-type {
    border-top: none;
}

.aplj-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--aplj-panel-download-bg);
    border: 0px solid var(--aplj-border);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.aplj-accordion-header:hover {
    background-color: var(--aplj-panel-download-bg-hover);
}

.aplj-accordion-header .aplj-accordion-title {
    font-family: var(--font-heading); /* On utilise la police des titres (Montserrat) */
    font-size: 1.2rem; /* J'ai ajusté la taille pour que ce soit moins massif */
    font-weight: 400; /* On s'assure qu'elle est en gras */
    color: var(--aplj-text);
}

.aplj-accordion-header .aplj-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
}

.aplj-accordion-header .aplj-accordion-icon svg {
    transition: transform 0.3s ease;
}

.aplj-accordion-item.is-open .aplj-accordion-header {
    background-color: var(--aplj-panel-download-bg-hover);
}
.aplj-accordion-item.is-open .aplj-accordion-icon svg {
    transform: rotate(180deg);
}

.aplj-accordion-content {
    padding: 2rem;
    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
    border-top: none;
}


/* --- 25. RUBRIQUE CJL --- */

/* On applique la couleur pastel au sous-menu */
#cjl-submenu .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-news-bg);
}
/* Survol */
#cjl-submenu .aplj-news-card .aplj-block-link:hover {
    background-color: var(--aplj-news-bg-hover);
}
/* État actif */
#cjl-submenu .is-active .aplj-news-card .aplj-block-link {
    background-color: var(--aplj-news-bg-hover);
}


/* --- 26. PAGE CJL - PROCESSUS DE LABELLISATION --- */

.aplj-process-step {
    display: flex;
    align-items: flex-start; /* Aligne les éléments en haut */
    gap: 2rem; /* Espace entre le numéro et le texte */
    background-color: #f0f4f8; /* Fond pastel #f0f4f8 */
    padding: 2rem;
}

.aplj-process-step__number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3rem;
    color: #cbd5e1; /* Couleur pour le numéro */
    line-height: 1;
}

.aplj-process-step__text {
    flex: 1; /* Prend le reste de la place */
}

.aplj-process-step__title {
    font-size: 1.5rem;
    margin: 0 0 0.25rem 0;
    color: #2C3E50; /* Couleur bleu nuit */
}

.aplj-process-step__subtitle {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: #FF5733; /* Couleur orange */
    margin: 0 0 1rem 0;
}

.aplj-process-step__description {
    margin: 0;
    line-height: 1.6;
}


/* --- 25. COMPOSANT: ACCORDÉON SIMPLE (ANCIENNEMENT FAQ) --- */

.aplj-simple-accordion-theme {
    padding: 2rem 0;
    border-top: 1px solid var(--aplj-border);

}

.aplj-simple-accordion-item {
    border: 1px solid var(--aplj-border);
    margin-top: -1px; /* Fusionne les bordures */
    background-color: var(--aplj-background); /* Fond blanc pour chaque item */
    padding:10px;
}

.aplj-simple-accordion-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding : 10px;
    background-color: var(--aplj-panel-download-bg); /* Le header est transparent, laisse voir le fond blanc de l'item */
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.2rem;
}

.aplj-simple-accordion-question:hover {
    background-color: var(--aplj-panel-download-bg-hover); /* Léger survol gris, quasi invisible */
}

/*.aplj-simple-accordion-icon {
    font-size: 2rem;
    font-weight: 700;
}*/

/*.aplj-simple-accordion-item.is-open .aplj-simple-accordion-icon {
    transform: rotate(45deg);
}*/

/* Le conteneur (le carré blanc) */
.aplj-simple-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 35px; /* On définit une largeur fixe */
    height: 35px; /* On définit une hauteur fixe */
    flex-shrink: 0; /* C'EST LA CORRECTION CLÉ */

    background-color: var(--aplj-background);
    border: 1px solid var(--aplj-border);
}

/* L'icône SVG à l'intérieur */
.aplj-simple-accordion-icon svg {
    width: 24px; /* Taille de l'icône */
    height: 24px;
    transition: transform 0.3s ease;
}

/* On retire la rotation en croix, on utilise maintenant 2 icônes */
.aplj-simple-accordion-item.is-open .aplj-simple-accordion-icon {
    /* Plus de transformation ici */
}

/* On cache la flèche "haut" par défaut */
.aplj-simple-accordion-item .icon-up {
    display: none;
}

.aplj-simple-accordion-reponse {
    padding: 1.5rem;
    background-color: transparent; /* La réponse est transparente */
    border-top: 1px solid var(--aplj-border);
}

.aplj-simple-accordion-item.is-open .aplj-simple-accordion-question {
    background-color: var(--aplj-panel-download-bg-hover);
}



/* Règle pour que les accordéons soient cliquables à l'intérieur des panneaux */
.aplj-panel .aplj-simple-accordion-question {
    pointer-events: auto;
}


/* --- 25B. COMPOSANT: CONTENU DE SÉANCE (NETTOYÉ) --- */

/* La grille principale qui contient les boutons et le formulaire */
.aplj-seance-actions-grid {
    display: flex;
    flex-wrap: wrap; /* Permet au formulaire de passer à la ligne */
    gap: 1.5rem;   /* Espace entre tous les éléments */
}

/* On dit à chaque colonne/bouton de grandir et de prendre une place égale */
.aplj-seance-actions-grid > .aplj-column-33 {
    flex: 1; 
}

/* Style commun pour le contenu à l'intérieur des boutons */
.aplj-seance-actions-grid .aplj-news-card-inner {
    padding: 1.5rem;
    text-align: center; /* On centre le texte par défaut */
}

.aplj-seance-actions-grid .aplj-seance-action-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.aplj-seance-actions-grid .aplj-seance-action-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Le formulaire prend toute la largeur et passe à la ligne */
.aplj-contribution-form-wrapper {
    flex-basis: 100%;
    padding: 2rem;
    border: 1px solid var(--aplj-border);
    margin-top: 1rem; /* Un peu d'air au-dessus */
    background-color: #f3f4f6;
}



/* On utilise le système .aplj-news-card */
.aplj-seance-button-card {
    /* Le wrapper .aplj-news-card gère la bordure noire */
}

/* Le lien invisible gère le fond et le survol */
.aplj-seance-button-card .aplj-block-link {
    background-color: var(--aplj-background); /* Fond blanc par défaut */
}
.aplj-seance-button-card .aplj-block-link:hover {
    background-color: var(--aplj-panel-gray); /* Fond gris clair au survol */
}

/* Le contenu intérieur */
.aplj-seance-button-card .aplj-news-card-inner {
    padding: 2rem;
    text-align: center;
}

.aplj-seance-button-card .aplj-seance-action-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    margin-top: 8px;
}

.aplj-seance-button-card .aplj-seance-action-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
}



/* --- COMPOSANT: MODALE (VERSION RÉUTILISABLE) --- */
.aplj-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style de base pour tout le contenu de modale */
.aplj-modal-content {
    position: relative;
    background-color: var(--aplj-background); /* Fond blanc par défaut */
    color: var(--aplj-text);
    border: 1px solid var(--aplj-border);
    padding: 2rem 3rem;
    text-align: center;
    max-width: 600px;
}

.aplj-modal-content p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Variation pour la modale de succès (verte) */
.aplj-modal-content--success {
    background-color: #d1fae5;
    border-color: #10B981;
    color: #047857;
}

.aplj-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: inherit; /* Hérite la couleur du parent */
}


/* --- 25E. FORMULAIRE DE CONTRIBUTION (DESIGN AMÉLIORÉ) --- */

.aplj-contribution-form {
    display: flex;
    flex-direction: column; /* On passe en colonne */
    align-items: flex-start; /* On aligne les éléments à droite */
    gap: 1rem;
    margin-top: 1rem;
}

.aplj-contribution-form textarea {
    width: 100%; /* LA CORRECTION EST ICI */
    box-sizing: border-box; /* Assure que le padding ne fait pas déborder */
    min-height: 150px; /* J'ai remis la hauteur que tu avais définie */
    border: 1px solid var(--aplj-border);
    padding: 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
}

.aplj-contribution-form .aplj-button {
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

/* NOUVEAU : Style pour les liens d'ancrage */
.aplj-anchor-nav {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}



/* --- 27. PAGE LÉGALE (DESIGN AMÉLIORÉ) --- */

/* Bloc "Héros" avec le titre */
.aplj-legal-hero {

    padding: 10px; /* Crée la bordure blanche */
    margin-bottom: -1px; /* Fusionne avec le bloc du dessous */
}
.aplj-legal-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 40vh; /* Hauteur du bloc */
    padding: 2rem;
    overflow: hidden; /* Empêche l'image de déborder */
}
.aplj-legal-hero__background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.40; /* L'opacité pour la transparence */
    z-index: 1;
}
.aplj-legal-hero__inner .aplj-page-title {
    position: relative;
    z-index: 2;
    color: var(--aplj-blue); /* On s'assure que le titre est bien lisible */
}

/* Bloc de contenu en dessous */
.aplj-legal-content-grid {
    border: 1px solid var(--aplj-border);
    display: flex;
}
.aplj-legal-content__meta {
    width: 33.33%;
    padding: 2rem;
    border-right: 1px solid var(--aplj-border);
}
.aplj-legal-content__main {
    width: 66.67%;
    padding: 2rem;
}
.aplj-legal-meta-group {
    margin-bottom: 2rem;
}
.aplj-legal-meta-group:last-child {
    margin-bottom: 0;
}
.aplj-legal-meta-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.aplj-legal-content__main p,
.aplj-legal-content__main li {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 75ch;
}


 /* --- STYLES COMPLETS POUR LE FORMULAIRE D'INSCRIPTION (AVEC PANNEAUX) --- */

.aplj-form-container {
    padding: 0;
}

/* On retire la bordure du fieldset, car elle est maintenant gérée par le panneau*/
.aplj-form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* On retire la bordure en haut de la légende */
.aplj-form-legend {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 1rem 0; /* On ajuste le padding */
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--aplj-border); /* On garde la ligne de séparation */
    
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--aplj-blue);
}

/* Le conteneur des champs n'a plus besoin de padding horizontal */
.aplj-form-fields-wrapper {
    padding: 0;
}

.aplj-form-group {
    margin-bottom: 1.5rem;
}

.aplj-form-group:last-child {
    margin-bottom: 0;
}

.aplj-form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.aplj-form-input,
.aplj-form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--aplj-border);
    font-size: 1rem;
    box-sizing: border-box;
    
}

.aplj-radio-group,
.aplj-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aplj-radio-group label,
.aplj-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.aplj-classe-bloc {
    border: 1px dashed var(--aplj-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--aplj-background);
}

.aplj-classe-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aplj-form-submit {
    padding: 2rem;
    text-align: center;
    border-top: 1px solid var(--aplj-border);
    margin-top: 0; /* Le margin est maintenant géré par le wrapper */
}

/* --- CORRECTIF POUR FORMULAIRE INTERACTIF DANS UN PANNEAU --- */
.aplj-panel .aplj-form-fieldset {
    pointer-events: auto;
}
    
    /* --- COMPOSANT : LIEN DE TÉLÉCHARGEMENT DE SECTION --- */
.aplj-download-action-wrapper { padding: 1rem 1rem 1rem 1rem; /* Espace autour du lien */}

.aplj-download-action { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--aplj-border);
    text-decoration: none;
    color: var(--aplj-text);
    transition: background-color 0.2s ease;
}

.aplj-download-action:hover { background-color: var(--aplj-panel-gray);}

.aplj-download-action-text { display: flex; flex-direction: column;}

.aplj-download-action-type {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.aplj-download-action-title { font-family: serif; font-size: 1.2rem;}

.aplj-download-action-icon svg { color: var(--aplj-blue);}


/* --- AJOUT POUR LA GRILLE DU FORMULAIRE DE CONTACT --- */
.aplj-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes de taille égale */
    gap: 1.5rem; /* Espace entre les colonnes */
}

/* --- NOUVELLE VARIATION DE BOUTON (TAILLE MOYENNE) --- */
.aplj-button--medium {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
}

/* --- COMPOSANT HÉROS CJL (FINAL) --- */
/* Style pour tous les écrans */
.aplj-hero-content--with-image {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* On centre le texte partout */
}
.aplj-hero-image {
    flex-shrink: 0; /* Empêche l'image de rétrécir */
    width: 400px;   /* Taille de l'image sur desktop */
}
.aplj-hero-image img {
    width: 100%;
    height: auto;
}

/* On réduit la taille du titre qui était trop gros */
.aplj-hero-content--with-image .aplj-page-title {
    font-size: 2.5rem;
}

/* --- COMPOSANT : TITRE ÉTIQUETTE --- */
.aplj-tag-title {

    padding: 0.5rem 0.5rem;
    margin-bottom: 1rem; /* Espace sous le titre */
    
    background-color: var(--aplj-news-bg-hover); /* La couleur de fond bleue */
    color: var(--aplj-blue); /* Le texte en blanc */

    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem; /* Ajuste la taille si besoin */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* --- COMPOSANT : GRILLE DE TIMELINE --- */
.aplj-timeline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: 10px; /* Espace entre les cartes */
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.aplj-phase-card {
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.aplj-phase-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--aplj-blue);
}

.aplj-phase-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aplj-phase-season {
    font-size: 0.9rem;
    color: #6B7280; /* Un gris pour le texte secondaire */
    margin: 0 0 1.5rem 0;
}

.aplj-phase-date {
    display: inline-block;
    background-color: var(--aplj-background);
    color: var(--aplj-blue);
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* Pour un effet "pilule" */
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
}

.aplj-phase-action {
    margin: 0;
    margin-top: auto; /* Pousse ce bloc tout en bas de la carte */
    padding-top: 1rem;
    font-size: 0.9rem;
}

/* --- NOUVEL UTILITAIRE D'ALIGNEMENT --- */
.aplj-button-wrapper--center {
    text-align: center;
}

/* --- COMPOSANT FINAL : BLOC AVEC IMAGE EN BAS (FLEXBOX) --- */

.aplj-block-with-footer-image {
    display: flex;
    flex-direction: column; /* On aligne les enfants (texte et image) verticalement */
    height: 100%; /* Le conteneur prend toute la hauteur disponible */
   /* padding: 2rem;  On applique le padding ici, une seule fois */
}

.aplj-block-with-footer-image .main-content {
    flex-grow: 1; /* C'est la magie : le bloc de texte va grandir pour pousser l'image tout en bas */
}

.aplj-block-with-footer-image .footer-image {
    flex-shrink: 0; /* Empêche l'image de rétrécir */
    text-align: center; /* Centre l'image si elle est plus petite que le conteneur */
    /*padding-top: 2rem;  Espace entre la fin du texte et l'image */
    align-self: flex-end; /* On "colle" ce bloc en bas de l'espace flex */
    width: 100%; /* S'assure qu'il prend toute la largeur */
}

.aplj-block-with-footer-image .footer-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Pour que le text-align: center fonctionne */
}

/* --- COMPOSANT : TAG-LIEN AVEC BORDURE --- */
.aplj-tag-link {
    display: inline-block;
    border: 1px solid var(--aplj-border);
    padding: 0.5rem 1rem;
    background-color: var(--aplj-background);
    color: var(--aplj-text);
    text-align: center;
    border-top: none; /* On retire la bordure du haut */
}

/* On s'assure que le conteneur du tag est bien en bas */
.aplj-card-footer {
    margin-top: auto; /* Pousse ce bloc tout en bas */
    padding-top: 1.5rem;
    border-top: 1px solid var(--aplj-border);
    align-self: stretch; /* Fait en sorte que la bordure prenne toute la largeur */
    text-align: center;
}


/* --- COMPOSANT FINAL : CARTE "RÉPONSE" (CORRIGÉ POUR L'ALIGNEMENT) --- */

.aplj-reponse-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #F6F5F3;
    padding: 2rem;
}

.aplj-reponse-card .aplj-heading {
    text-align: left;
    font-size: 1.2rem;
}

.aplj-reponse-card p {
    flex-grow: 1; /* LA SOLUTION EST ICI */
    text-align: left;
    margin-top: 1rem;
    line-height: 1.7;
}

.aplj-reponse-card a {
    display: block;
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--aplj-border); /* On ne garde que la bordure du haut */
    border-bottom: 1px solid var(--aplj-border);
    border-left: 1px solid var(--aplj-border);
    border-right: 1px solid var(--aplj-border);
    text-align: center;
    text-decoration: none;
    color: var(--aplj-text);
    background-color: transparent;
    transition: all 0.2s ease;
}

.aplj-reponse-card a:hover {
    background-color: var(--aplj-blue);
    color: var(--aplj-background);
}


/* --- STYLE FINAL POUR LES CARTES "UN PROJET, TROIS RÉPONSES" (CENTRÉ) --- */

#concept .aplj-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center; /* On centre tout le texte */
}

#concept .aplj-panel p {
    flex-grow: 1; /* Pousse le tag en bas */
    padding-left: 1rem; /* Ajoute un peu d'espace à gauche */
    padding-right: 1rem; /* et à droite pour que le texte ne colle pas aux bords */
}

#concept .aplj-panel .aplj-tag {
    align-self: center; /* Centre le tag horizontalement */
}


/* --- COMPOSANT : GRILLE DES LAURÉATS PLACEHOLDER (DESIGN FINAL v2) --- */

.aplj-laureats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding-top: 20px; /* Espace en haut pour les icônes */
}

.aplj-video-placeholder {
    position: relative;
    background-color: #f3f4f6; /* Le fond gris clair */
    
    /* LA SOLUTION EST ICI : */
    border: 5px solid var(--aplj-background); /* Crée la bordure blanche de 10px */
    box-sizing: border-box; /* Indispensable pour que la bordure soit incluse dans la taille de l'élément */

    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aplj-video-placeholder__text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #d1d5db;
    font-weight: 700;
}

.aplj-award-icon {
    position: absolute;
    top: -20px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent; 
    border: none;
    padding: 0;
    width: 40px; 
    height: 40px;
}

.aplj-award-icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- CORRECTION GRILLE 25% ET STYLE DES CARTES DE PHASE --- */



/* Le style des cartes de phase */
.aplj-phase-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}
.aplj-phase-card .aplj-phase-header { display: flex; align-items: center; gap: 0.75rem; color: var(--aplj-blue); justify-content: center; }
.aplj-phase-card .aplj-phase-title { margin: 0; font-family: var(--font-heading); font-size: 1rem; text-transform: uppercase; }
.aplj-phase-card .aplj-phase-season { font-size: 0.9rem; color: #6B7280; margin: 1rem 0; }
.aplj-phase-card .aplj-phase-date { display: inline-block; background-color: var(--aplj-background); color: var(--aplj-blue); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 700; margin-bottom: 0.75rem; align-self: center; }
.aplj-phase-card .aplj-phase-action { margin: 0; margin-top: auto; padding-top: 1.5rem; font-size: 0.9rem; }

/* On applique les couleurs via des classes dédiées */
.aplj-phase-card--sky    { background-color: var(--aplj-panel-sky); }
.aplj-phase-card--yellow { background-color: var(--aplj-panel-yellow); }
.aplj-phase-card--green  { background-color: var(--aplj-panel-green); }
.aplj-phase-card--orange { background-color: var(--aplj-panel-orange); }

/* Grille pour le jugement par les pairs */
/* Grille Flex pour le jugement par les pairs */
.aplj-judgment-flex-grid {
    display: flex;
    gap: 2rem;
}

.aplj-judgment-flex-grid .aplj-judgment-step {
    width: 33.33%; /* Chaque colonne prend un tiers de l'espace */
}

/* On s'assure que la bordure a bien le bon padding */
.aplj-judgment-flex-grid .has-border-left {
    padding-left: 2rem;
}
.aplj-judgment-step-title { font-family: var(--font-heading); font-weight: 700; margin-top: 0; margin-bottom: 1rem; }
.aplj-judgment-step p { margin: 0; line-height: 1.7; font-size: 0.95rem; }


/* --- COMPOSANT : SOUS-MENU FLEXIBLE --- */

.aplj-submenu-flex-grid {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments d'aller à la ligne si besoin */
    gap: 0;
}

.aplj-submenu-flex-grid > [class*="aplj-column-"] { /* Cible toutes tes colonnes */
    flex: 1 1 auto; /* C'EST LA MAGIE */
    min-width: 150px; /* Largeur minimale avant de passer à la ligne */
}

/* --- COMPOSANT FINAL : CARTE D'ORIENTATION (PAGE S'ENGAGER) --- */

#sengager-orientation .aplj-panel {
    padding: 0;
    display: flex;
    flex-direction: column;
    cursor: pointer; /* On ajoute un curseur pour indiquer que c'est cliquable */
    transition: background-color 0.3s ease; /* Pour l'effet de survol */
}
/* On applique les couleurs et les hovers directement au panneau */
#sengager-orientation .card-jeune .aplj-panel { background-color: var(--aplj-news-bg); }
#sengager-orientation .card-jeune .aplj-panel:hover { background-color: var(--aplj-news-bg-hover); }
#sengager-orientation .card-adulte .aplj-panel { background-color: var(--aplj-panel-ice); }
#sengager-orientation .card-adulte .aplj-panel:hover { background-color: var(--aplj-panel-ice-hover); }
#sengager-orientation .card-orga .aplj-panel { background-color: var(--aplj-actu-bg); }
#sengager-orientation .card-orga .aplj-panel:hover { background-color: var(--aplj-actu-bg-hover); }


#sengager-orientation .aplj-news-image { margin: 0; }
#sengager-orientation .aplj-news-image img { display: block; width: 100%; }

#sengager-orientation .aplj-news-text-wrapper {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#sengager-orientation .aplj-news-content {
    flex-grow: 1;
}

#sengager-orientation .aplj-tag {
    align-self: center;
    pointer-events: auto; /* On s'assure que le lien est bien cliquable */
}

/* --- CORRECTIONS FINALES POUR LA PAGE "S'ENGAGER" --- */

/* 1. On corrige la police du titre dans les cartes d'orientation */
#sengager-orientation .aplj-news-title {
    font-family: var(--font-heading); /* On force la police Montserrat */
    font-weight: 700;
    font-size: 1.5rem; /* On peut ajuster la taille si besoin */
}

/* 2. On retire le soulignement du tag quand c'est un lien */
#sengager-orientation .aplj-tag {
    text-decoration: none;
}

/* 3. On ajoute le padding aux sections "jeunes", "adultes", "organisations" */
#espace-jeunes .aplj-news-card-inner,
#espace-adultes .aplj-news-card-inner,
#espace-organisations .aplj-news-card-inner {
    padding: 10px;
}

/* 4. On centre le contenu et les tags dans les sections détaillées */
#espace-jeunes .aplj-news-text-wrapper,
#espace-adultes .aplj-news-text-wrapper,
#espace-organisations .aplj-news-text-wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex-grow: 1; /* S'assure que le wrapper prend toute la hauteur */
}

/* On force le tag à s'auto-centrer horizontalement */
#espace-jeunes .aplj-tag,
#espace-adultes .aplj-tag,
#espace-organisations .aplj-tag {
    align-self: center;
}

/* --- STYLE POUR LE TEXTE D'INTRODUCTION (PAGE LAURÉATS) --- */
.aplj-intro-text {
    text-align: center; /* Centré par défaut sur grand écran */
    /* Tu peux ajouter d'autres styles ici si besoin, comme la police, etc. */
}