/* ===================================
   IMPORTS DES FICHIERS CSS
   =================================== */

/* Import des styles de blocs */

/**
 * Bloc Avant/Après - Comparateur d'images
 * Styles pour le comparateur d'images avec curseur glissant
 */

.before-after {
    --before-after-border-radius: 8px;
    --before-after-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --before-after-scroller-size: 50px;
    --before-after-scroller-border: 4px solid #fff;
    --before-after-scroller-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --before-after-label-bg: rgba(0, 0, 0, 0.7);
    --before-after-label-color: #fff;
    --before-after-label-padding: 8px 16px;
    --before-after-label-border-radius: 20px;
    --before-after-line-color: #fff;
    --before-after-line-width: 2px;
    
    margin: 2rem 0;
}

.before-after__container  {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.before-after__title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-heading, #333);
}

.before-after__subtitle {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-text, #666);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.before-after__wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--before-after-border-radius);
    overflow: hidden;
    box-shadow: var(--before-after-shadow);
    background-color: #f8f9fa;
    /* Fallback si aspect-ratio non supporté */
    height: auto;
}

/* S'assurer que le wrapper garde la hauteur des images si pas d'aspect-ratio inline */

.before-after__wrapper::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16/9 par défaut, sera écrasé par aspect-ratio inline */
}

.before-after__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.before-after__image--before {
    z-index: 1;
}

.before-after__image--after {
    z-index: 2;
    width: 50%; /* Position initiale */
}

.before-after__content-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    /* Aligner le contenu sur la gauche pour éviter l'effet de glissement en réduisant la largeur */
    -o-object-position: left center;
       object-position: left center;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

/* Renforcer l'ancrage à gauche sur la couche "après" */

.before-after__image--after .before-after__content-image {
    -o-object-position: left center;
       object-position: left center;
}

/* Optionnel: même ancrage sur la couche "avant" pour une symétrie parfaite */

.before-after__image--before .before-after__content-image {
    -o-object-position: left center;
       object-position: left center;
}

/* Performance hint pour le redimensionnement de la couche "après" */

.before-after__image--after {
    will-change: width;
}

.before-after__label {
    position: absolute;
    top: 12px;
    padding: var(--before-after-label-padding);
    background: var(--before-after-label-bg);
    color: var(--before-after-label-color);
    border-radius: var(--before-after-label-border-radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10; /* au-dessus des images et de la ligne du scroller */
    pointer-events: none; /* ne pas gêner le drag du scroller */
}

.before-after__label--after,
.before-after__label--before {
    left: 12px;
    width: -moz-fit-content;
    width: fit-content;
}

.before-after__scroller {
    position: absolute;
    top: 50%;
    left: calc(50% - 25px);
    width: var(--before-after-scroller-size);
    height: var(--before-after-scroller-size);
    transform: translateY(-50%);
    background: transparent;
    border: var(--before-after-scroller-border);
    border-radius: 50%;
    cursor: grab;
    z-index: 20;
    box-shadow: var(--before-after-scroller-shadow);
    transition: all 0.2s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    touch-action: none;
}

.before-after__scroller:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.before-after__scroller--active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.1);
}

.before-after__scroller-thumb {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.before-after__scroller-line {
    position: absolute;
    top: 100%;
    left: 50%;
    width: var(--before-after-line-width);
    height: 9999px;
    background: var(--before-after-line-color);
    transform: translateX(-50%);
    z-index: 15;
}

.before-after__scroller-line::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: var(--before-after-line-width);
    height: 9999px;
    background: var(--before-after-line-color);
    transform: translateX(-50%);
}

.before-after__instructions {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--color-text-muted, #888);
    font-size: 0.875rem;
    font-style: italic;
}

.before-after__error {
    padding: 2rem;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: var(--before-after-border-radius);
    color: #721c24;
    text-align: center;
}

/* Responsive Design */

@media (max-width: 781px) {
    .before-after__title {
        font-size: 1.5rem;
    }
    
    .before-after__subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .before-after__wrapper {
        max-width: 100%;
        border-radius: 6px;
    }
    
    .before-after__label {
        top: 10px;
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .before-after__label--before {
        left: 10px;
    }
    
    .before-after__label--after {
        right: 10px;
    }
    
    .before-after__scroller {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    .before-after__scroller-thumb {
        padding: 6px;
    }
    
    .before-after__instructions {
        font-size: 0.8rem;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .before-after__title {
        font-size: 1.25rem;
    }
    
    .before-after__subtitle {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .before-after__label {
        top: 8px;
        padding: 4px 8px;
        font-size: 0.7rem;
    }
    
    .before-after__label--before {
        left: 8px;
    }
    
    .before-after__label--after {
        right: 8px;
    }
    
    .before-after__scroller {
        width: 36px;
        height: 36px;
        border-width: 2px;
    }
    
    .before-after__scroller-thumb {
        padding: 5px;
    }
}

/* États de focus pour l'accessibilité */

.before-after__scroller:focus {
    outline: 2px solid var(--color-primary, #007cba);
    outline-offset: 2px;
}

.before-after__scroller:focus:not(:focus-visible) {
    outline: none;
}

/* Animation d'entrée */

.before-after__wrapper {
    animation: before-after-fade-in 0.6s ease-out;
}

@keyframes before-after-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Support pour le mode sombre */

@media (prefers-color-scheme: dark) {
    .before-after {
        --before-after-label-bg: rgba(255, 255, 255, 0.9);
        --before-after-label-color: #333;
        --before-after-scroller-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
    
    .before-after__title {
        color: var(--color-heading-dark, #fff);
    }
    
    .before-after__subtitle {
        color: var(--color-text-dark, #ccc);
    }
    
    .before-after__instructions {
        color: var(--color-text-muted-dark, #aaa);
    }
}

/* Support pour les préférences de réduction de mouvement */

@media (prefers-reduced-motion: reduce) {
    .before-after__scroller {
        transition: none;
    }
    
    .before-after__wrapper {
        animation: none;
    }
    
    .before-after__scroller:hover {
        transform: translateY(-50%);
    }
}

/* ===================================
   BLOG — LATEST POSTS
   =================================== */

.blog-latest {
    background-color: #ffffff;
}

.blog-latest__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.blog-latest__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des articles */

.blog-latest__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-latest__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .blog-latest__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Article individuel */

.blog-latest__article {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.blog-latest__article:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Image de l'article */

.blog-latest__image {
    width: 100%;
    height: 12rem; /* h-48 */
    overflow: hidden;
}

.blog-latest__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-latest__thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.blog-latest__article:hover .blog-latest__thumbnail {
    transform: scale(1.05);
}

/* Contenu de l'article */

.blog-latest__content {
    padding: 1.5rem; /* p-6 */
}

/* Métadonnées */

.blog-latest__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-bottom: 0.75rem; /* mb-3 */
    flex-wrap: wrap;
}

.blog-latest__date {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
    font-weight: 500;
}

.blog-latest__category {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #eef2ff; /* bg-indigo-50 */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 0.375rem; /* rounded-md */
}

/* Titre de l'article */

.blog-latest__article-title {
    margin: 0 0 0.75rem 0; /* mb-3 */
}

.blog-latest__article-link {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.blog-latest__article-link:hover {
    color: var(--accent-color); /* hover:text-indigo-600 */
    text-decoration: none;
}

.blog-latest__article-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Extrait de l'article */

.blog-latest__excerpt {
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin: 0 0 1rem 0; /* mb-4 */
    font-size: 0.875rem; /* text-sm */
}

/* Lien "Lire la suite" */

.blog-latest__read-more {
    margin-top: auto;
}

.blog-latest__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-latest__link:hover {
    color: var(--accent-hover); /* hover:text-indigo-500 */
    text-decoration: none;
    gap: 0.5rem; /* Animation du gap */
}

.blog-latest__link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Bouton d'action */

.blog-latest__action {
    text-align: center;
    margin-top: 3rem; /* mt-12 */
}

.blog-latest__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.blog-latest__button:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.blog-latest__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.blog-latest__button:active {
    transform: translateY(0);
}

/* État vide */

.blog-latest__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.blog-latest__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .blog-latest__container {
        padding: 3rem 1rem;
    }
    
    .blog-latest__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .blog-latest__grid {
        gap: 1.5rem;
    }
    
    .blog-latest__content {
        padding: 1.25rem;
    }
    
    .blog-latest__image {
        height: 10rem;
    }
    
    .blog-latest__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .blog-latest__action {
        margin-top: 2rem;
    }
    
    .blog-latest__button {
        width: 100%;
        max-width: 300px;
    }
}

/* Grille adaptative selon le nombre d'articles */

.blog-latest__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

.blog-latest__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-latest__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .blog-latest__article,
    .blog-latest__thumbnail,
    .blog-latest__link,
    .blog-latest__button {
        transition: none;
    }
    
    .blog-latest__article:hover,
    .blog-latest__button:hover,
    .blog-latest__button:active {
        transform: none;
    }
    
    .blog-latest__article:hover .blog-latest__thumbnail {
        transform: none;
    }
}

/* ===================================
   CARDS — GRID
   =================================== */

.cards-grid {
    background-color: #f9fafb; /* bg-gray-50 */
}

.cards-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.cards-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des cartes */

.cards-grid__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .cards-grid__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Carte individuelle */

.cards-grid__card {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.cards-grid__card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Image de la carte */

.cards-grid__card-image {
    width: 100%;
    height: 12rem; /* h-48 */
    overflow: hidden;
}

.cards-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.cards-grid__card:hover .cards-grid__image {
    transform: scale(1.05);
}

/* Contenu de la carte */

.cards-grid__card-content {
    padding: 1.5rem; /* p-6 */
}

/* Titre de la carte */

.cards-grid__card-title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.75rem 0; /* mb-3 */
    line-height: 1.3;
}

/* Texte de la carte */

.cards-grid__card-text {
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin: 0 0 1rem 0; /* mb-4 */
}

/* Action (lien) */

.cards-grid__card-action {
    margin-top: auto;
}

.cards-grid__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.cards-grid__card-link:hover {
    color: var(--accent-hover); /* hover:text-indigo-500 */
    text-decoration: none;
    gap: 0.5rem; /* Animation du gap */
}

.cards-grid__card-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* État vide */

.cards-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.cards-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .cards-grid__container {
        padding: 3rem 1rem;
    }
    
    .cards-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .cards-grid__grid {
        gap: 1.5rem;
    }
    
    .cards-grid__card-content {
        padding: 1.25rem;
    }
    
    .cards-grid__card-image {
        height: 10rem;
    }
}

/* Adaptation automatique selon le nombre de cartes */

.cards-grid__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
}

.cards-grid__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cards-grid__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .cards-grid__card,
    .cards-grid__image,
    .cards-grid__card-link {
        transition: none;
    }
    
    .cards-grid__card:hover {
        transform: none;
    }
    
    .cards-grid__card:hover .cards-grid__image {
        transform: none;
    }
}

/* Mode sombre (si besoin futur) */

@media (prefers-color-scheme: dark) {
    .cards-grid {
        background-color: #1f2937;
    }
    
    .cards-grid__card {
        background-color: #374151;
        border-color: #4b5563;
    }
    
    .cards-grid__title {
        color: #f9fafb;
    }
    
    .cards-grid__card-title {
        color: #f9fafb;
    }
    
    .cards-grid__card-text {
        color: #d1d5db;
    }
}

/**
 * Carousel avec Lightbox - Styles CSS
 * Utilise Swiper.js
 * 
 * @package Npru\Theme
 * @since 1.0.0
 */

/* ====================
   Variables CSS
   ==================== */

:root {
  --carousel-gap: 20px;
  --carousel-border-radius: 8px;
  --carousel-overlay-bg: rgba(0, 0, 0, 0.3);
  --carousel-overlay-hover-bg: rgba(0, 0, 0, 0.5);
  --carousel-nav-size: 44px;
  --carousel-nav-color: #fff;
  --carousel-nav-bg: rgba(0, 0, 0, 0.7);
  --carousel-nav-hover-bg: rgba(0, 0, 0, 0.9);
  --lightbox-bg: rgba(0, 0, 0, 0.95);
  --lightbox-nav-size: 60px;
  --lightbox-close-size: 40px;
  --lightbox-z-index: 9999;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ====================
   Bloc Carousel
   ==================== */

.carousel-lightbox {
  margin: 2rem 0;
}

.carousel-lightbox__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.carousel-lightbox__title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}

.carousel-lightbox__wrapper {
  position: relative;
}

/* ====================
   Swiper Customization
   ==================== */

.carousel-lightbox .swiper {
  padding: 0;
  margin: 0;
  overflow: hidden; /* Cache les slides adjacentes */
}

.carousel-lightbox .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.carousel-lightbox .swiper-slide {
  height: auto;
  display: flex;
}

/* ====================
   Slides du Carousel
   ==================== */

.carousel-lightbox__slide {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: var(--carousel-border-radius);
  overflow: hidden;
  background: #f5f5f5;
  transition: transform var(--transition-fast);
}

.carousel-lightbox__slide:hover {
  transform: translateY(-2px);
}

.carousel-lightbox__image-button {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: block;
  overflow: hidden;
}

.carousel-lightbox__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--transition-normal);
}

.carousel-lightbox__image-button:hover .carousel-lightbox__image {
  transform: scale(1.05);
}

/* ====================
   Overlay et icône zoom
   ==================== */

.carousel-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--carousel-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.carousel-lightbox__image-button:hover .carousel-lightbox__overlay,
.carousel-lightbox__image-button:focus .carousel-lightbox__overlay {
  opacity: 1;
}

.carousel-lightbox__zoom-icon {
  width: 48px;
  height: 48px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* ====================
   Légendes des slides
   ==================== */

.carousel-lightbox__slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.carousel-lightbox__slide:hover .carousel-lightbox__slide-caption {
  transform: translateY(0);
}

.carousel-lightbox__slide-caption p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ====================
   Navigation Swiper
   ==================== */

.carousel-lightbox__nav {
  position: absolute;
  width: var(--carousel-nav-size);
  height: var(--carousel-nav-size);
  background: var(--carousel-nav-bg);
  border-radius: 50%;
  color: var(--carousel-nav-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-lightbox__nav:hover {
  background: var(--carousel-nav-hover-bg);
  transform: translateY(-50%) scale(1.1);
}

.carousel-lightbox__nav::after {
  font-size: 18px;
  font-weight: bold;
}

.carousel-lightbox__nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-lightbox__nav.swiper-button-disabled:hover {
  background: var(--carousel-nav-bg);
  transform: translateY(-50%) scale(1);
}

/* ====================
   Pagination Swiper
   ==================== */

.carousel-lightbox__pagination {
  position: relative;
  margin-top: 1.5rem;
  text-align: center;
}

.carousel-lightbox__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ccc;
  opacity: 1;
  transition: all var(--transition-fast);
}

.carousel-lightbox__pagination .swiper-pagination-bullet-active {
  background: #007cba;
  transform: scale(1.2);
}

/* ====================
   Lightbox Modal
   ==================== */

.carousel-lightbox__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--lightbox-z-index);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.carousel-lightbox__modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.carousel-lightbox__modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--lightbox-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.carousel-lightbox__modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ====================
   Bouton fermer lightbox
   ==================== */

.carousel-lightbox__modal-close {
  position: absolute;
  top: -60px;
  right: 0;
  width: var(--lightbox-close-size);
  height: var(--lightbox-close-size);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
}

.carousel-lightbox__modal-close:hover {
  background: white;
  transform: scale(1.1);
}

.carousel-lightbox__close-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

/* ====================
   Navigation lightbox
   ==================== */

.carousel-lightbox__modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--lightbox-nav-size);
  height: var(--lightbox-nav-size);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  z-index: 10;
}

.carousel-lightbox__modal-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-lightbox__modal-nav--prev {
  left: -80px;
}

.carousel-lightbox__modal-nav--next {
  right: -80px;
}

.carousel-lightbox__modal-nav svg {
  width: 24px;
  height: 24px;
  color: #333;
}

/* ====================
   Image lightbox
   ==================== */

.carousel-lightbox__modal-image-container {
  position: relative;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-lightbox__modal-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--carousel-border-radius);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ====================
   Légende et compteur lightbox
   ==================== */

.carousel-lightbox__modal-caption {
  margin-top: 1rem;
  max-width: 600px;
  text-align: center;
}

.carousel-lightbox__modal-caption p {
  color: white;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.carousel-lightbox__modal-counter {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ====================
   État body avec modal ouverte
   ==================== */

body.carousel-lightbox-modal-open {
  overflow: hidden;
}

/* ====================
   Empty state
   ==================== */

.carousel-lightbox__empty {
  padding: 3rem;
  text-align: center;
  background: #f8f9fa;
  border-radius: var(--carousel-border-radius);
  border: 2px dashed #dee2e6;
}

.carousel-lightbox__empty p {
  margin: 0;
  color: #6c757d;
  font-style: italic;
}

/* ====================
   Responsive Design
   ==================== */

@media (max-width: 781px) {
  .carousel-lightbox .swiper {
    padding: 0 30px;
    margin: 0 -30px;
  }
  
  .carousel-lightbox__nav {
    width: 36px;
    height: 36px;
  }
  
  .carousel-lightbox__nav::after {
    font-size: 14px;
  }
  
  .carousel-lightbox__modal-backdrop {
    padding: 1rem;
  }
  
  .carousel-lightbox__modal-close {
    top: -50px;
    width: 36px;
    height: 36px;
  }
  
  .carousel-lightbox__close-icon {
    width: 18px;
    height: 18px;
  }
  
  .carousel-lightbox__modal-nav {
    width: 48px;
    height: 48px;
  }
  
  .carousel-lightbox__modal-nav--prev {
    left: -60px;
  }
  
  .carousel-lightbox__modal-nav--next {
    right: -60px;
  }
  
  .carousel-lightbox__modal-image-container {
    max-height: 60vh;
  }
  
  .carousel-lightbox__slide {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .carousel-lightbox .swiper {
    padding: 0 20px;
    margin: 0 -20px;
  }
  
  .carousel-lightbox__nav {
    width: 32px;
    height: 32px;
  }
  
  .carousel-lightbox__modal-nav--prev {
    left: 10px;
  }
  
  .carousel-lightbox__modal-nav--next {
    right: 10px;
  }
  
  .carousel-lightbox__modal-close {
    top: 10px;
    right: 10px;
  }
  
  .carousel-lightbox__slide {
    height: 180px;
  }
  
  .carousel-lightbox__title {
    font-size: 1.5rem;
  }
}

/* ====================
   Focus et accessibilité
   ==================== */

.carousel-lightbox__image-button:focus,
.carousel-lightbox__nav:focus,
.carousel-lightbox__modal-close:focus,
.carousel-lightbox__modal-nav:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

/* Animation d'apparition de la modal */

.carousel-lightbox__modal[aria-hidden="false"] .carousel-lightbox__modal-content {
  animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================
   CONTENT — SPLIT (TEXT + MEDIA)
   =================================== */

.content-split {
    background-color: #ffffff;
}

.content-split__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    align-items: center;
    gap: 3rem; /* gap-12 */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

@media (min-width: 1024px) {
    .content-split__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 lg:items-center */
    }
}

/* Contenu texte */

.content-split__content {
    order: 1;
}

@media (min-width: 1024px) {
    .content-split__content {
        order: unset;
    }
}

/* Titre */

.content-split__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.2;
}

/* Contenu WYSIWYG */

.content-split__wysiwyg {
    margin-top: 1.5rem; /* mt-6 */
    max-width: none;
    color: #374151; /* text-gray-700 */
}

/* Styles prose pour le WYSIWYG */

.content-split__wysiwyg > * {
    margin-bottom: 1rem;
}

.content-split__wysiwyg > *:last-child {
    margin-bottom: 0;
}

.content-split__wysiwyg p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.content-split__wysiwyg h2,
.content-split__wysiwyg h3,
.content-split__wysiwyg h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.content-split__wysiwyg h2 {
    font-size: 1.5rem;
}

.content-split__wysiwyg h3 {
    font-size: 1.25rem;
}

.content-split__wysiwyg h4 {
    font-size: 1.125rem;
}

.content-split__wysiwyg ul,
.content-split__wysiwyg ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-split__wysiwyg li {
    margin-bottom: 0.5rem;
}

.content-split__wysiwyg a {
    color: var(--accent-color);
    text-decoration: underline;
}

.content-split__wysiwyg a:hover {
    color: var(--accent-hover);
}

.content-split__wysiwyg strong {
    font-weight: 600;
    color: #111827;
}

.content-split__wysiwyg blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Action (bouton) */

.content-split__action {
    margin-top: 2rem; /* mt-8 */
}

.content-split__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.content-split__button:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.content-split__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.content-split__button:active {
    transform: translateY(0);
}

/* Section média */

.content-split__media {
    position: relative;
    order: 0;
}

@media (min-width: 1024px) {
    .content-split__media {
        order: unset;
    }
}

.content-split__image {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(17, 24, 39, 0.1); /* ring-1 ring-gray-900/10 */
}

/* Placeholder image */

.content-split__image-placeholder {
    width: 100%;
    height: 300px;
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 500;
}

.content-split__image-placeholder p {
    margin: 0;
}

/* Responsive mobile */

@media (max-width: 1024px) {
    .content-split__container {
        padding: 3rem 1rem;
        gap: 2rem;
    }
    
    .content-split__title {
        font-size: 1.5rem;
    }
    
    .content-split__wysiwyg {
        margin-top: 1rem;
    }
    
    .content-split__action {
        margin-top: 1.5rem;
    }
    
    .content-split__button {
        width: 100%;
        max-width: 300px;
        padding: 0.75rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .content-split__button {
        transition: none;
    }
    
    .content-split__button:hover,
    .content-split__button:active {
        transform: none;
    }
}

/* ===================================
   CALL TO ACTION — CENTERED
   =================================== */

.cta-centered {
    background-color: var(--accent-color); /* bg-indigo-600 */
    color: #ffffff;
}

.cta-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 4rem 1.5rem; /* py-16 px-6 */
    text-align: center;
}

/* Titre */

.cta-centered__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Texte */

.cta-centered__text {
    margin-top: 0.75rem; /* mt-3 */
    color: #c7d2fe; /* text-indigo-100 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Section bouton */

.cta-centered__action {
    margin-top: 2rem; /* mt-8 */
}

/* Bouton */

.cta-centered__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #ffffff;
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-hover); /* text-indigo-700 */
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.cta-centered__button:hover {
    background-color: #eef2ff; /* hover:bg-indigo-50 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.cta-centered__button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.cta-centered__button:active {
    transform: translateY(0);
}

/* Placeholder pour l'éditeur */

.cta-centered--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.cta-centered--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .cta-centered__container {
        padding: 3rem 1rem;
    }
    
    .cta-centered__title {
        font-size: 1.5rem;
    }
    
    .cta-centered__button {
        width: 100%;
        max-width: 300px;
        padding: 1rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .cta-centered__button {
        transition: none;
    }
    
    .cta-centered__button:hover {
        transform: none;
    }
    
    .cta-centered__button:active {
        transform: none;
    }
}

/* ===================================
   FAQ — DETAILS NATIFS
   =================================== */

.faq-details {
    background-color: #ffffff;
}

.faq-details__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.faq-details__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 2rem 0; /* mb-8 */
    line-height: 1.2;
}

/* Liste des questions */

.faq-details__items {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

/* Question individuelle (élément details) */

.faq-details__item {
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e5e7eb; /* border */
    padding: 1rem; /* p-4 */
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.faq-details__item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-details__item[open] {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

/* Question (élément summary) */

.faq-details__question {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; /* select-none */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    line-height: 1.4;
    padding-right: 1rem; /* Pour laisser de la place au chevron natif */
    list-style: none; /* Supprime le triangle par défaut sur certains navigateurs */
}

/* Suppression du triangle par défaut */

.faq-details__question::-webkit-details-marker {
    display: none;
}

.faq-details__question::marker {
    content: none;
}

/* Chevron personnalisé */

.faq-details__question::after {
    content: "▼";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.faq-details__item {
    position: relative;
}

.faq-details__item[open] .faq-details__question::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-color);
}

/* Survol de la question */

.faq-details__question:hover {
    color: var(--accent-color);
}

/* Réponse */

.faq-details__answer {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    padding-right: 1rem; /* Pour éviter le chevauchement avec le chevron */
}

.faq-details__answer p {
    margin: 0.5rem 0;
}

.faq-details__answer p:first-child {
    margin-top: 0;
}

.faq-details__answer p:last-child {
    margin-bottom: 0;
}

.faq-details__answer ul,
.faq-details__answer ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.faq-details__answer li {
    margin: 0.25rem 0;
}

/* État vide */

.faq-details__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.faq-details__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .faq-details__container {
        padding: 3rem 1rem;
    }
    
    .faq-details__title {
        font-size: 1.5rem;
    }
    
    .faq-details__item {
        padding: 0.75rem;
    }
    
    .faq-details__question::after {
        right: 0.75rem;
    }
    
    .faq-details__answer {
        padding-right: 0.75rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .faq-details__item,
    .faq-details__question::after {
        transition: none;
    }
}

/* Focus visible pour l'accessibilité */

.faq-details__question:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Amélioration pour les lecteurs d'écran */

.faq-details__question[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Animation d'ouverture/fermeture (optionnel) */

@media (prefers-reduced-motion: no-preference) {
    .faq-details__answer {
        animation: fadeInUp 0.3s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   FEATURES — GRID WITH ICONS
   =================================== */

.features-grid {
    background-color: #ffffff;
}

.features-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* En-tête */

.features-grid__header {
    margin: 0 auto;
    max-width: 672px; /* max-w-2xl */
    text-align: center;
}

.features-grid__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.1;
}

.features-grid__intro {
    margin-top: 1rem; /* mt-4 */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Grille des éléments */

.features-grid__items {
    margin-top: 3rem; /* mt-12 */
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .features-grid__items {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .features-grid__items {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Élément individuel */

.features-grid__item {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 2rem; /* p-8 */
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.features-grid__item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Icône */

.features-grid__icon {
    margin-bottom: 1rem; /* mb-4 */
}

.features-grid__emoji {
    font-size: 3rem; /* text-3xl */
    line-height: 1;
    display: inline-block;
}

.features-grid__image {
    width: 48px;
    height: 48px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0.5rem;
}

/* Titre de l'élément */

.features-grid__item-title {
    margin-top: 1rem; /* mt-4 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.4;
}

/* Texte de l'élément */

.features-grid__item-text {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* État vide */

.features-grid__empty {
    margin-top: 3rem;
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.features-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Placeholder pour l'éditeur */

.features-grid--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.features-grid--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .features-grid__container {
        padding: 3rem 1rem;
    }
    
    .features-grid__title {
        font-size: 1.875rem;
    }
    
    .features-grid__items {
        margin-top: 2rem;
        gap: 1.5rem;
    }
    
    .features-grid__item {
        padding: 1.5rem;
    }
    
    .features-grid__emoji {
        font-size: 2.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .features-grid__item {
        transition: none;
    }
    
    .features-grid__item:hover {
        transform: none;
    }
}

/* ===================================
   FEATURES — WITH SCREENSHOT
   =================================== */

.features-screenshot {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
}

.features-screenshot__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    gap: 3rem; /* gap-12 */
    padding: 6rem 1.5rem; /* py-24 px-6 */
    align-items: center;
}

@media (min-width: 1024px) {
    .features-screenshot__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

/* Contenu texte */

.features-screenshot__content {
    order: 1;
}

@media (min-width: 1024px) {
    .features-screenshot__content {
        order: unset;
    }
}

/* Surtitre */

.features-screenshot__eyebrow {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: var(--accent-light); /* text-indigo-400 */
    margin: 0;
}

/* Titre principal */

.features-screenshot__title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 0;
}

/* Introduction */

.features-screenshot__intro {
    margin-top: 1.5rem; /* mt-6 */
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Liste des fonctionnalités */

.features-screenshot__features {
    margin-top: 2.5rem; /* mt-10 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

/* Fonctionnalité individuelle */

.features-screenshot__feature {
    position: relative;
    padding-left: 1.75rem; /* pl-7 */
}

/* Bullet point */

.features-screenshot__bullet {
    position: absolute;
    left: 0;
    top: 0.25rem; /* top-1 */
    display: inline-block;
    width: 1rem; /* size-4 */
    height: 1rem; /* size-4 */
    border-radius: 0.25rem;
    background-color: var(--accent-opacity-30); /* bg-indigo-400/30 */
}

/* Titre de la fonctionnalité */

.features-screenshot__feature-title {
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    margin: 0;
    line-height: 1.4;
}

/* Texte de la fonctionnalité */

.features-screenshot__feature-text {
    margin-top: 0.25rem;
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Section image */

.features-screenshot__image {
    order: 0;
}

@media (min-width: 1024px) {
    .features-screenshot__image {
        order: -1; /* lg:order-first */
        justify-self: end; /* lg:justify-self-end */
    }
}

.features-screenshot__img {
    max-width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(255, 255, 255, 0.1); /* ring-1 ring-white/10 */
}

/* Placeholder image */

.features-screenshot__img-placeholder {
    max-width: 100%;
    height: 300px;
    background-color: #374151;
    border-radius: 0.75rem;
    border: 2px dashed #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-weight: 500;
}

.features-screenshot__img-placeholder p {
    margin: 0;
}

/* Placeholder pour l'éditeur */

.features-screenshot--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.features-screenshot--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 1024px) {
    .features-screenshot__container {
        padding: 4rem 1rem;
        gap: 2rem;
    }
    
    .features-screenshot__title {
        font-size: 1.875rem;
    }
    
    .features-screenshot__features {
        margin-top: 2rem;
        gap: 1.25rem;
    }
}

/* ===================================
   GALLERY — MASONRY SIMPLE (CSS GRID)
   =================================== */

.gallery-grid {
    background-color: #ffffff;
}

.gallery-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.gallery-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille masonry */

.gallery-grid__grid {
    display: grid;
    gap: 1rem; /* gap-4 */
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-grid__grid--5-cols {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
    .gallery-grid__grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid__grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--4-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--5-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery-grid__grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid__grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .gallery-grid__grid--4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gallery-grid__grid--5-cols {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Item de la galerie */

.gallery-grid__item {
    position: relative;
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    background-color: #f3f4f6; /* bg-gray-100 */
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Bouton image (pour l'accessibilité) */

.gallery-grid__image-button {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.gallery-grid__image-button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Image */

.gallery-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__image {
    transform: scale(1.05);
}

/* Overlay au survol */

.gallery-grid__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__overlay {
    opacity: 1;
}

.gallery-grid__zoom-icon {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    color: #ffffff;
}

/* Légende */

.gallery-grid__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #ffffff;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.gallery-grid__item:hover .gallery-grid__caption {
    transform: translateY(0);
}

.gallery-grid__caption p {
    margin: 0;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.4;
}

/* Modal pour l'affichage en grand */

.gallery-grid__modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none; /* Cachée par défaut */
}

.gallery-grid__modal[aria-hidden="false"] {
    display: flex;
}

.gallery-grid__modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.gallery-grid__modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.gallery-grid__modal-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
}

.gallery-grid__modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.gallery-grid__modal-close:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.gallery-grid__close-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.gallery-grid__modal-image {
    max-width: 100%;
    max-height: 80vh;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 0.5rem;
}

.gallery-grid__modal-caption {
    margin-top: 1rem;
    text-align: center;
    color: #ffffff;
}

.gallery-grid__modal-caption p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

/* État vide */

.gallery-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.gallery-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .gallery-grid__container {
        padding: 3rem 1rem;
    }
    
    .gallery-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .gallery-grid__grid {
        gap: 0.75rem;
    }
    
    .gallery-grid__modal-content {
        max-width: 95vw;
    }
    
    .gallery-grid__modal-close {
        top: -2.5rem;
        font-size: 1.25rem;
    }
    
    .gallery-grid__modal-image {
        max-height: 70vh;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .gallery-grid__item,
    .gallery-grid__image,
    .gallery-grid__overlay,
    .gallery-grid__caption,
    .gallery-grid__modal-close {
        transition: none;
    }
    
    .gallery-grid__item:hover {
        transform: none;
    }
    
    .gallery-grid__item:hover .gallery-grid__image {
        transform: none;
    }
}

/* Styles pour masquer le scrollbar du body quand modal ouverte */

body.gallery-modal-open {
    overflow: hidden;
}

/* Animation d'ouverture de la modal */

.gallery-grid__modal[aria-hidden="false"] .gallery-grid__modal-backdrop {
    animation: fadeIn 0.2s ease-out;
}

.gallery-grid__modal[aria-hidden="false"] .gallery-grid__modal-content {
    animation: scaleIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Désactiver les animations si préférence utilisateur */

@media (prefers-reduced-motion: reduce) {
    .gallery-grid__modal-backdrop,
    .gallery-grid__modal-content {
        animation: none;
    }
}

/* ===================================
   HERO — CENTERED
   =================================== */

.hero-centered {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
}

.hero-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 8rem 1.5rem; /* py-32 px-6 */
    text-align: center;
}

/* Surtitre */

.hero-centered__eyebrow {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-light); /* text-indigo-300 */
    margin: 0;
}

/* Titre principal */

.hero-centered__title {
    margin-top: 0.75rem; /* mt-3 */
    font-size: 3rem; /* text-5xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.1;
    margin-bottom: 0;
}

/* Version responsive du titre */

@media (min-width: 640px) {
    .hero-centered__title {
        font-size: 3.75rem; /* sm:text-6xl */
    }
}

/* Texte d'introduction */

.hero-centered__lead {
    margin-top: 1.5rem; /* mt-6 */
    font-size: 1.125rem; /* text-lg */
    color: #d1d5db; /* text-gray-300 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Conteneur des boutons */

.hero-centered__actions {
    margin-top: 2.5rem; /* mt-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* gap-4 */
    flex-wrap: wrap;
}

/* Styles des boutons */

.hero-centered__button {
    text-decoration: none;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
}

/* Bouton principal */

.hero-centered__button--primary {
    background-color: var(--accent-color); /* bg-indigo-500 */
    color: #ffffff;
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    border: 2px solid transparent;
}

.hero-centered__button--primary:hover {
    background-color: var(--accent-hover); /* hover:bg-indigo-400 */
    text-decoration: none;
}

.hero-centered__button--primary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Bouton secondaire */

.hero-centered__button--secondary {
    color: #ffffff;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
}

.hero-centered__button--secondary:hover {
    color: var(--accent-light); /* text-indigo-300 */
    text-decoration: underline;
}

.hero-centered__button--secondary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Placeholder pour l'éditeur */

.hero-centered--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.hero-centered--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .hero-centered__container {
        padding: 4rem 1rem; /* Réduction du padding sur mobile */
    }
    
    .hero-centered__title {
        font-size: 2.25rem; /* Plus petit sur mobile */
    }
    
    .hero-centered__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-centered__button {
        width: 100%;
        max-width: 300px;
        padding: 0.875rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .hero-centered__button {
        transition: none;
    }
}

/* Mode sombre (si le thème le supporte) */

@media (prefers-color-scheme: dark) {
    .hero-centered {
        background-color: #000000;
    }
}

/* ===================================
   HERO — SPLIT IMAGE
   =================================== */

.hero-split {
    background-color: #ffffff;
}

.hero-split__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    display: grid;
    align-items: center;
    gap: 3rem; /* gap-12 */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

@media (min-width: 1024px) {
    .hero-split__container {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    }
}

/* Contenu texte */

.hero-split__content {
    order: 1;
}

@media (min-width: 1024px) {
    .hero-split__content {
        order: unset;
    }
}

/* Surtitre */

.hero-split__eyebrow {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    margin: 0;
}

/* Titre principal */

.hero-split__title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    line-height: 1.1;
    margin-bottom: 0;
}

/* Texte d'introduction */

.hero-split__lead {
    margin-top: 1.5rem; /* mt-6 */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Conteneur des boutons */

.hero-split__actions {
    margin-top: 2rem; /* mt-8 */
    display: flex;
    gap: 1rem; /* gap-4 */
    flex-wrap: wrap;
}

/* Styles des boutons */

.hero-split__button {
    text-decoration: none;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
}

/* Bouton principal */

.hero-split__button--primary {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border: 2px solid transparent;
}

.hero-split__button--primary:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
}

.hero-split__button--primary:focus {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

/* Bouton secondaire */

.hero-split__button--secondary {
    color: #111827; /* text-gray-900 */
    padding: 0.5rem 0;
    background: transparent;
    border: none;
}

.hero-split__button--secondary:hover {
    color: var(--accent-color); /* text-indigo-600 */
    text-decoration: underline;
}

.hero-split__button--secondary:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Section image */

.hero-split__image {
    position: relative;
    order: 0;
}

@media (min-width: 1024px) {
    .hero-split__image {
        order: unset;
    }
}

.hero-split__img {
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow */
    border: 1px solid rgba(17, 24, 39, 0.1); /* ring-1 ring-gray-900/10 */
}

/* Placeholder image */

.hero-split__img-placeholder {
    width: 100%;
    height: 300px;
    background-color: #f3f4f6;
    border-radius: 0.75rem;
    border: 2px dashed #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 500;
}

.hero-split__img-placeholder p {
    margin: 0;
}

/* Placeholder pour l'éditeur */

.hero-split--placeholder {
    background-color: #f3f4f6;
    color: #374151;
    padding: 2rem;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: 0.5rem;
}

.hero-split--placeholder p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .hero-split__container {
        padding: 3rem 1rem;
        gap: 2rem;
    }
    
    .hero-split__title {
        font-size: 1.875rem; /* Plus petit sur mobile */
    }
    
    .hero-split__actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-split__button {
        width: 100%;
        max-width: 300px;
        padding: 0.75rem 1.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .hero-split__button {
        transition: none;
    }
}

/* ===================================
   BLOC HERO
   =================================== */

.hero-block {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
}

/* Fond avec overlay */

.hero-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* Contenu du hero */

.hero-block .container {
    position: relative;
    z-index: 2;
}

/* Animations d'entrée */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.hero-block h1 {
    animation-delay: 0.2s;
}

.hero-block p {
    animation-delay: 0.4s;
}

.hero-block a {
    animation-delay: 0.6s;
}

/* Responsive */

@media (max-width: 781px) {
    .hero-block h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-block p {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .hero-block h1 {
        font-size: 2rem;
    }
    
    .hero-block p {
        font-size: 1rem;
    }
}

/* États de hover pour les boutons */

.hero-block .btn-primary:hover,
.hero-block .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.hero-block .btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

/* ===================================
   LOGO CLOUD — SIMPLE
   =================================== */

.logo-cloud {
    background-color: #ffffff;
}

.logo-cloud__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 4rem 1.5rem; /* py-16 px-6 */
}

/* Surtitre */

.logo-cloud__eyebrow {
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* text-gray-500 */
    margin: 0 0 2rem 0; /* mb-8 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Grille des logos */

.logo-cloud__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 par défaut */
    gap: 2rem; /* gap-8 */
    align-items: center;
    justify-items: center;
}

@media (min-width: 640px) {
    .logo-cloud__logos {
        grid-template-columns: repeat(3, 1fr); /* sm:grid-cols-3 */
    }
}

@media (min-width: 1024px) {
    .logo-cloud__logos {
        grid-template-columns: repeat(6, 1fr); /* lg:grid-cols-6 */
    }
}

/* Logo individuel */

.logo-cloud__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    transition: all 0.2s ease;
}

.logo-cloud__logo:hover {
    transform: scale(1.05);
}

/* Image du logo */

.logo-cloud__image {
    height: 2rem; /* h-8 */
    width: auto;
    max-width: 100%;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.2s ease;
    -o-object-fit: contain;
       object-fit: contain;
}

.logo-cloud__logo:hover .logo-cloud__image {
    filter: grayscale(0%);
    opacity: 1;
}

/* État vide */

.logo-cloud__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.logo-cloud__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .logo-cloud__container {
        padding: 3rem 1rem;
    }
    
    .logo-cloud__logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .logo-cloud__logo {
        height: 60px;
    }
    
    .logo-cloud__image {
        height: 1.5rem;
    }
}

/* Variantes selon le nombre de logos */

.logo-cloud__logos[data-count="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.logo-cloud__logos[data-count="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.logo-cloud__logos[data-count="5"] {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
    .logo-cloud__logos[data-count="4"],
    .logo-cloud__logos[data-count="5"],
    .logo-cloud__logos[data-count="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .logo-cloud__logos[data-count="3"],
    .logo-cloud__logos[data-count="4"],
    .logo-cloud__logos[data-count="5"],
    .logo-cloud__logos[data-count="6"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .logo-cloud__logo,
    .logo-cloud__image {
        transition: none;
    }
    
    .logo-cloud__logo:hover {
        transform: none;
    }
}

/* ===================================
   NEWSLETTER — CENTERED
   =================================== */

.newsletter-centered {
    background-color: #f9fafb; /* bg-gray-50 */
}

.newsletter-centered__container {
    margin: 0 auto;
    max-width: 768px; /* max-w-3xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
    text-align: center;
}

/* Titre */

.newsletter-centered__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.2;
}

/* Texte */

.newsletter-centered__text {
    margin-top: 0.75rem; /* mt-3 */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Formulaire */

.newsletter-centered__form {
    margin: 0 auto;
    margin-top: 2rem; /* mt-8 */
    display: flex;
    max-width: 448px; /* max-w-md */
    gap: 0.75rem; /* gap-3 */
    align-items: stretch;
}

/* Champ email */

.newsletter-centered__input {
    min-width: 0;
    flex: 1; /* flex-1 */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    font-size: 0.875rem; /* text-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: all 0.2s ease;
}

.newsletter-centered__input::-moz-placeholder {
    color: #9ca3af; /* placeholder:text-gray-400 */
}

.newsletter-centered__input::placeholder {
    color: #9ca3af; /* placeholder:text-gray-400 */
}

.newsletter-centered__input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); /* focus:ring-2 focus:ring-indigo-500 */
}

/* Bouton */

.newsletter-centered__button {
    border-radius: 0.375rem; /* rounded-md */
    background-color: var(--accent-color); /* bg-indigo-600 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-centered__button:hover {
    background-color: var(--accent-hover); /* hover:bg-indigo-500 */
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.newsletter-centered__button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.newsletter-centered__button:active {
    transform: translateY(0);
}

/* Note */

.newsletter-centered__note {
    margin-top: 1rem;
    color: #6b7280;
    font-style: italic;
}

.newsletter-centered__note small {
    font-size: 0.75rem;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .newsletter-centered__container {
        padding: 3rem 1rem;
    }
    
    .newsletter-centered__title {
        font-size: 1.5rem;
    }
    
    .newsletter-centered__form {
        flex-direction: column;
        gap: 0.75rem;
        max-width: 100%;
    }
    
    .newsletter-centered__input,
    .newsletter-centered__button {
        padding: 0.75rem 1rem;
    }
}

/* États d'envoi (pour JS futur) */

.newsletter-centered__form[data-loading] .newsletter-centered__button {
    opacity: 0.7;
    cursor: not-allowed;
}

.newsletter-centered__form[data-success] {
    opacity: 0.8;
}

.newsletter-centered__form[data-error] .newsletter-centered__input {
    border-color: #dc2626;
}

/* Accessibilité */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .newsletter-centered__input,
    .newsletter-centered__button {
        transition: none;
    }
    
    .newsletter-centered__button:hover,
    .newsletter-centered__button:active {
        transform: none;
    }
}

/* ===================================
   PRICING — 3 TIERS
   =================================== */

.pricing-3 {
    background-color: #ffffff;
}

.pricing-3__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 6rem 2rem; /* py-24 px-6 */
}

/* En-tête */

.pricing-3__header {
    margin: 0 auto;
    max-width: 672px; /* max-w-2xl */
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
}

.pricing-3__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.1;
}

.pricing-3__intro {
    margin-top: 1rem; /* mt-4 */
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 0;
    line-height: 1.6;
}

/* Grille des formules */

.pricing-3__plans {
    display: grid;
    gap: 1.5rem; /* gap-6 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pricing-3__plans {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .pricing-3__plans {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

/* Formule individuelle */

.pricing-3__plan {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 2rem; /* p-8 */
    background-color: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

.pricing-3__plan:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Formule mise en avant */

.pricing-3__plan--featured {
    border: 1px solid var(--accent-color); /* ring-1 ring-indigo-500 */
    box-shadow: 0 0 0 1px var(--accent-color);
}

.pricing-3__plan--featured::before {
    content: "Recommandé";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Nom de la formule */

.pricing-3__plan-name {
    font-size: 1rem; /* text-base */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0;
    line-height: 1.4;
}

/* Prix */

.pricing-3__plan-price {
    margin-top: 1rem; /* mt-4 */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.1;
}

/* Liste des fonctionnalités */

.pricing-3__features {
    margin-top: 1.5rem; /* mt-6 */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
    list-style: none;
    padding: 0;
}

.pricing-3__feature {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    position: relative;
    padding-left: 1.5rem;
}

.pricing-3__feature::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981; /* text-green-500 */
    font-weight: 600;
}

/* Bouton CTA */

.pricing-3__cta {
    margin-top: 2rem; /* mt-8 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #111827; /* bg-gray-900 */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.pricing-3__cta:hover {
    background-color: #1f2937; /* hover:bg-gray-800 */
    text-decoration: none;
    transform: translateY(-1px);
}

.pricing-3__cta:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* CTA pour formule mise en avant */

.pricing-3__plan--featured .pricing-3__cta {
    background-color: var(--accent-color);
}

.pricing-3__plan--featured .pricing-3__cta:hover {
    background-color: var(--accent-hover);
}

/* État vide */

.pricing-3__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.pricing-3__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .pricing-3__container {
        padding: 4rem 1rem;
    }
    
    .pricing-3__title {
        font-size: 1.875rem;
    }
    
    .pricing-3__plan {
        padding: 1.5rem;
    }
    
    .pricing-3__plan-price {
        font-size: 2rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .pricing-3__plan,
    .pricing-3__cta {
        transition: none;
    }
    
    .pricing-3__plan:hover,
    .pricing-3__cta:hover {
        transform: none;
    }
}

/* ===================================
   BLOC SERVICES
   =================================== */

.services-block {
    padding: 4rem 0;
    background-color: #f9fafb;
}

/* En-tête de section */

.services-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.services-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cartes de services */

.service-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.service-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* Icônes des services */

.service-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

.service-icon img {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.service-icon span {
    font-size: 3.75rem;
    display: block;
}

/* Contenu des services */

.service-content h3 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.service-content p {
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.service-content a {
    color: #3b82f6;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}

.service-content a:hover {
    color: #1d4ed8;
}

/* Grilles responsives */

.services-block .grid {
    display: grid;
    gap: 2rem;
}

.services-block .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.services-block .md\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.services-block .lg\\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.services-block .lg\\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Responsive */

@media (min-width: 782px) {
    .services-block .md\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .services-block .lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .services-block .lg\\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Animations d'entrée */

.service-card {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }

.service-card:nth-child(2) { animation-delay: 0.2s; }

.service-card:nth-child(3) { animation-delay: 0.3s; }

.service-card:nth-child(4) { animation-delay: 0.4s; }

.service-card:nth-child(5) { animation-delay: 0.5s; }

.service-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   STATS — GRID
   =================================== */

.stats-grid {
    background-color: #ffffff;
}

.stats-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 4rem 2rem; /* py-16 px-6 */
}

/* Grille des statistiques */

.stats-grid__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
    gap: 2rem; /* gap-8 */
    text-align: center;
}

@media (min-width: 640px) {
    .stats-grid__items {
        grid-template-columns: repeat(4, 1fr); /* sm:grid-cols-4 */
    }
}

/* Statistique individuelle */

.stats-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Libellé */

.stats-grid__label {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Valeur */

.stats-grid__value {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.1;
}

/* État vide */

.stats-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.stats-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .stats-grid__container {
        padding: 3rem 1rem;
    }
    
    .stats-grid__items {
        gap: 1.5rem;
    }
    
    .stats-grid__value {
        font-size: 1.5rem;
    }
}

/* Animation au scroll (optionnel) */

@media (prefers-reduced-motion: no-preference) {
    .stats-grid__value {
        transition: transform 0.2s ease;
    }
    
    .stats-grid__item:hover .stats-grid__value {
        transform: scale(1.05);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .stats-grid__value {
        transition: none;
    }
    
    .stats-grid__item:hover .stats-grid__value {
        transform: none;
    }
}

/* ===================================
   STEPS / HOW IT WORKS
   =================================== */

.steps-horizontal {
    background-color: #ffffff;
}

.steps-horizontal__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 2rem; /* py-20 px-6 */
}

/* Titre */

.steps-horizontal__title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 2.5rem 0; /* mb-10 */
    line-height: 1.2;
}

/* Liste des étapes */

.steps-horizontal__steps {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .steps-horizontal__steps {
        grid-template-columns: repeat(3, 1fr); /* sm:grid-cols-3 */
    }
}

/* Étape individuelle */

.steps-horizontal__step {
    border-radius: 1rem; /* rounded-2xl */
    border: 1px solid #e5e7eb; /* border */
    padding: 1.5rem; /* p-6 */
    background-color: #ffffff;
    position: relative;
    transition: all 0.2s ease;
}

.steps-horizontal__step:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Numéro de l'étape */

.steps-horizontal__step-number {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Titre de l'étape */

.steps-horizontal__step-title {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin-bottom: 0;
    line-height: 1.4;
}

/* Texte de l'étape */

.steps-horizontal__step-text {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Connecteurs entre les étapes (sur desktop) */

@media (min-width: 640px) {
    .steps-horizontal__step:not(:last-child)::after {
        content: '→';
        position: absolute;
        top: 50%;
        right: -1.5rem;
        transform: translateY(-50%);
        font-size: 1.5rem;
        color: #d1d5db;
        z-index: 1;
    }
}

/* État vide */

.steps-horizontal__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.steps-horizontal__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .steps-horizontal__container {
        padding: 3rem 1rem;
    }
    
    .steps-horizontal__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .steps-horizontal__steps {
        gap: 1.5rem;
    }
    
    .steps-horizontal__step {
        padding: 1.25rem;
    }
    
    /* Connecteurs verticaux sur mobile */
    .steps-horizontal__step:not(:last-child)::after {
        content: '↓';
        position: absolute;
        bottom: -1.25rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.25rem;
        color: #d1d5db;
        z-index: 1;
    }
}

/* Animation d'apparition progressive */

@media (prefers-reduced-motion: no-preference) {
    .steps-horizontal__step:nth-child(1) {
        animation-delay: 0ms;
    }
    
    .steps-horizontal__step:nth-child(2) {
        animation-delay: 100ms;
    }
    
    .steps-horizontal__step:nth-child(3) {
        animation-delay: 200ms;
    }
    
    .steps-horizontal__step:nth-child(4) {
        animation-delay: 300ms;
    }
    
    .steps-horizontal__step:nth-child(5) {
        animation-delay: 400ms;
    }
    
    .steps-horizontal__step:nth-child(6) {
        animation-delay: 500ms;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .steps-horizontal__step {
        transition: none;
    }
    
    .steps-horizontal__step:hover {
        transform: none;
    }
}

/* ===================================
   TABS — SIMPLE (SANS JS, VIA ANCHOR)
   =================================== */

.tabs-simple {
    background-color: #f9fafb; /* bg-gray-50 */
}

.tabs-simple__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 2rem; /* py-20 px-6 */
}

/* Titre */

.tabs-simple__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Wrapper des onglets */

.tabs-simple__wrapper {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Navigation des onglets */

.tabs-simple__nav {
    display: flex;
    background-color: #f9fafb; /* bg-gray-50 */
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.tabs-simple__nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Onglet individuel */

.tabs-simple__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem; /* py-4 px-6 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

.tabs-simple__tab:hover {
    color: var(--accent-color); /* hover:text-indigo-600 */
    background-color: #ffffff; /* hover:bg-white */
    text-decoration: none;
}

.tabs-simple__tab:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    border-radius: 0.25rem;
}

/* Onglet actif */

.tabs-simple__tab--active,
.tabs-simple__tab:target {
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #ffffff; /* bg-white */
    border-bottom-color: var(--accent-color); /* border-indigo-600 */
    font-weight: 600; /* font-semibold */
}

/* Contenu des onglets */

.tabs-simple__content {
    position: relative;
    min-height: 12rem; /* min-h-48 */
}

/* Panel individuel */

.tabs-simple__panel {
    padding: 2rem; /* p-8 */
    display: none;
}

.tabs-simple__panel--active,
.tabs-simple__panel:target {
    display: block;
}

/* Contenu du panel */

.tabs-simple__panel-content {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
}

.tabs-simple__panel-content > * {
    margin-bottom: 1rem;
}

.tabs-simple__panel-content > *:last-child {
    margin-bottom: 0;
}

.tabs-simple__panel-content p {
    margin-bottom: 1rem;
}

.tabs-simple__panel-content h2,
.tabs-simple__panel-content h3,
.tabs-simple__panel-content h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.tabs-simple__panel-content h2 {
    font-size: 1.5rem;
}

.tabs-simple__panel-content h3 {
    font-size: 1.25rem;
}

.tabs-simple__panel-content h4 {
    font-size: 1.125rem;
}

.tabs-simple__panel-content ul,
.tabs-simple__panel-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.tabs-simple__panel-content li {
    margin-bottom: 0.5rem;
}

.tabs-simple__panel-content a {
    color: var(--accent-color);
    text-decoration: underline;
}

.tabs-simple__panel-content a:hover {
    color: var(--accent-hover);
}

.tabs-simple__panel-content strong {
    font-weight: 600;
    color: #111827;
}

.tabs-simple__panel-content blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Système d'ancres CSS pour navigation sans JS */

.tabs-simple__tab:target ~ .tabs-simple__content .tabs-simple__panel {
    display: none;
}

.tabs-simple__panel:target {
    display: block !important;
}

/* Fallback si pas de target */

.tabs-simple__panel:first-child {
    display: block;
}

.tabs-simple__panel:target ~ .tabs-simple__panel:first-child {
    display: none;
}

/* État vide */

.tabs-simple__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.tabs-simple__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 781px) {
    .tabs-simple__container {
        padding: 3rem 1rem;
    }
    
    .tabs-simple__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .tabs-simple__nav {
        flex-direction: column;
    }
    
    .tabs-simple__tab {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        border-right: none;
    }
    
    .tabs-simple__tab--active,
    .tabs-simple__tab:target {
        border-bottom-color: #e5e7eb;
        border-left: 3px solid var(--accent-color);
    }
    
    .tabs-simple__panel {
        padding: 1.5rem;
    }
}

/* Smooth scroll pour les ancres */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Animation d'apparition du contenu */

@media (prefers-reduced-motion: no-preference) {
    .tabs-simple__panel {
        animation: fadeInUp 0.3s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .tabs-simple__tab,
    .tabs-simple__panel {
        transition: none;
        animation: none;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Indicateur visuel pour navigation clavier */

.tabs-simple__tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Mode sombre (si besoin futur) */

@media (prefers-color-scheme: dark) {
    .tabs-simple {
        background-color: #1f2937;
    }
    
    .tabs-simple__wrapper {
        background-color: #374151;
        border-color: #4b5563;
    }
    
    .tabs-simple__nav {
        background-color: #2d3748;
        border-color: #4b5563;
    }
    
    .tabs-simple__title {
        color: #f9fafb;
    }
    
    .tabs-simple__tab {
        color: #d1d5db;
    }
    
    .tabs-simple__tab:hover,
    .tabs-simple__tab--active,
    .tabs-simple__tab:target {
        color: var(--accent-color);
        background-color: #374151;
    }
    
    .tabs-simple__panel-content {
        color: #e5e7eb;
    }
    
    .tabs-simple__panel-content h2,
    .tabs-simple__panel-content h3,
    .tabs-simple__panel-content h4,
    .tabs-simple__panel-content strong {
        color: #f9fafb;
    }
}

/* ===================================
   TEAM — GRID
   =================================== */

.team-grid {
    background-color: #f9fafb; /* bg-gray-50 */
}

.team-grid__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 5rem 2rem; /* py-20 px-6 */
}

/* Titre */

.team-grid__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des membres */

.team-grid__grid {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid {
        grid-template-columns: repeat(2, 1fr); /* sm:grid-cols-2 */
    }
}

@media (min-width: 1024px) {
    .team-grid__grid {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}

@media (min-width: 1280px) {
    .team-grid__grid {
        grid-template-columns: repeat(4, 1fr); /* xl:grid-cols-4 */
    }
}

/* Membre individuel */

.team-grid__member {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb; /* border */
    padding: 1.5rem; /* p-6 */
    text-align: center;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.team-grid__member:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-4px);
}

/* Photo du membre */

.team-grid__photo {
    width: 5rem; /* w-20 */
    height: 5rem; /* h-20 */
    margin: 0 auto 1rem auto; /* mx-auto mb-4 */
    border-radius: 50%; /* rounded-full */
    overflow: hidden;
    background-color: #f3f4f6; /* bg-gray-100 */
    border: 3px solid #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.team-grid__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.team-grid__member:hover .team-grid__image {
    transform: scale(1.1);
}

/* Placeholder pour photo manquante */

.team-grid__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.team-grid__initials {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    text-transform: uppercase;
}

/* Informations du membre */

.team-grid__info {
    text-align: center;
}

/* Nom */

.team-grid__name {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.25rem 0; /* mb-1 */
    line-height: 1.3;
}

/* Poste */

.team-grid__position {
    font-size: 0.875rem; /* text-sm */
    color: var(--accent-color); /* text-indigo-600 */
    font-weight: 500; /* font-medium */
    margin: 0 0 0.75rem 0; /* mb-3 */
}

/* Biographie */

.team-grid__bio {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin: 0 0 1rem 0; /* mb-4 */
}

/* Réseaux sociaux */

.team-grid__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem; /* gap-3 */
    margin-top: 1rem;
}

.team-grid__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
    border-radius: 50%; /* rounded-full */
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #6b7280; /* text-gray-500 */
    text-decoration: none;
    transition: all 0.2s ease;
}

.team-grid__social-link:hover {
    background-color: var(--accent-color); /* hover:bg-indigo-600 */
    color: #ffffff; /* hover:text-white */
    transform: translateY(-1px);
}

.team-grid__social-link:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.team-grid__social-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
}

/* État vide */

.team-grid__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.team-grid__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 640px) {
    .team-grid__container {
        padding: 3rem 1rem;
    }
    
    .team-grid__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .team-grid__grid {
        gap: 1.5rem;
    }
    
    .team-grid__member {
        padding: 1.25rem;
    }
    
    .team-grid__photo {
        width: 4rem;
        height: 4rem;
    }
    
    .team-grid__initials {
        font-size: 1rem;
    }
    
    .team-grid__name {
        font-size: 1rem;
    }
}

/* Grille adaptative selon le nombre de membres */

.team-grid__grid[data-count="1"] {
    grid-template-columns: 1fr;
    max-width: 300px;
    margin: 0 auto;
}

.team-grid__grid[data-count="2"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid[data-count="2"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        margin: 0 auto;
    }
}

.team-grid__grid[data-count="3"] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid__grid[data-count="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .team-grid__grid[data-count="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .team-grid__member,
    .team-grid__image,
    .team-grid__social-link {
        transition: none;
    }
    
    .team-grid__member:hover,
    .team-grid__social-link:hover {
        transform: none;
    }
    
    .team-grid__member:hover .team-grid__image {
        transform: none;
    }
}

/* Variantes de couleur pour les placeholders */

.team-grid__image-placeholder:nth-child(4n+1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.team-grid__image-placeholder:nth-child(4n+2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.team-grid__image-placeholder:nth-child(4n+3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.team-grid__image-placeholder:nth-child(4n+4) {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* ===================================
   BLOC ÉQUIPE
   =================================== */

.team-block {
    padding: 4rem 0;
    background-color: white;
}

/* En-tête de section */

.team-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.team-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grilles responsives */

.team-block .grid {
    display: grid;
    gap: 2rem;
}

.team-block .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.team-block .md\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.team-block .lg\\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.team-block .lg\\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Responsive */

@media (min-width: 782px) {
    .team-block .md\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .team-block .lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .team-block .lg\\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Cartes des membres */

.team-member {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    transform: translateY(0);
}

.team-member:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-0.5rem);
}

/* Photo du membre */

.member-photo {
    height: 16rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.member-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s ease;
}

.team-member:hover .member-photo img {
    transform: scale(1.05);
}

.member-photo div {
    color: white;
    font-size: 3.75rem;
    font-weight: 700;
    text-align: center;
}

/* Informations du membre */

.member-info {
    padding: 1.5rem;
    text-align: center;
}

.member-info h3 {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.member-info .text-primary {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.member-info p {
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Liens sociaux */

.member-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.member-social a {
    color: #9ca3af;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f3f4f6;
    transition: all 0.2s ease;
}

.member-social a:hover {
    color: #3b82f6;
    background-color: #dbeafe;
    transform: translateY(-2px);
}

.member-social svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Animations d'entrée */

.team-member {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.team-member:nth-child(1) { animation-delay: 0.1s; }

.team-member:nth-child(2) { animation-delay: 0.2s; }

.team-member:nth-child(3) { animation-delay: 0.3s; }

.team-member:nth-child(4) { animation-delay: 0.4s; }

.team-member:nth-child(5) { animation-delay: 0.5s; }

.team-member:nth-child(6) { animation-delay: 0.6s; }

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */

@media (max-width: 781px) {
    .team-block .text-center h2 {
        font-size: 2rem;
    }
    
    .team-block .text-center p {
        font-size: 1.125rem;
    }
    
    .member-photo {
        height: 14rem;
    }
    
    .member-photo div {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .team-block .text-center h2 {
        font-size: 1.75rem;
    }
    
    .team-block .text-center p {
        font-size: 1rem;
    }
    
    .member-photo {
        height: 12rem;
    }
    
    .member-photo div {
        font-size: 2.5rem;
    }
    
    .member-info {
        padding: 1.25rem;
    }
}

/* ===================================
   TESTIMONIALS — CARDS
   =================================== */

.testimonials-cards {
    background-color: #f9fafb; /* bg-gray-50 */
}

.testimonials-cards__container {
    margin: 0 auto;
    max-width: 1280px; /* max-w-7xl */
    padding: 6rem 1.5rem; /* py-24 px-6 */
}

/* Titre */

.testimonials-cards__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Grille des témoignages */

.testimonials-cards__items {
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: 1fr;
}

@media (min-width: 782px) {
    .testimonials-cards__items {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}

/* Témoignage individuel */

.testimonials-cards__item {
    border-radius: 1rem; /* rounded-2xl */
    background-color: #ffffff;
    padding: 2rem; /* p-8 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    border: 1px solid rgba(17, 24, 39, 0.05); /* ring-1 ring-gray-900/5 */
    margin: 0;
    transition: all 0.2s ease;
}

.testimonials-cards__item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Citation */

.testimonials-cards__quote {
    color: #374151; /* text-gray-700 */
    line-height: 1.6;
    margin: 0;
    font-style: italic;
    position: relative;
}

.testimonials-cards__quote::before {
    content: "\201C";
    font-size: 3rem;
    color: #d1d5db;
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    font-family: serif;
    line-height: 1;
}

/* Auteur */

.testimonials-cards__author {
    margin-top: 1rem; /* mt-4 */
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 0;
}

.testimonials-cards__author-name {
    font-weight: 600;
    color: #374151; /* text-gray-700 */
}

.testimonials-cards__author-role {
    font-weight: 400;
}

/* État vide */

.testimonials-cards__empty {
    text-align: center;
    padding: 3rem;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.testimonials-cards__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 781px) {
    .testimonials-cards__container {
        padding: 4rem 1rem;
    }
    
    .testimonials-cards__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .testimonials-cards__items {
        gap: 1.5rem;
    }
    
    .testimonials-cards__item {
        padding: 1.5rem;
    }
    
    .testimonials-cards__quote::before {
        font-size: 2rem;
        top: -0.5rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .testimonials-cards__item {
        transition: none;
    }
    
    .testimonials-cards__item:hover {
        transform: none;
    }
}

/* Variante avec plus de 4 témoignages */

@media (min-width: 1024px) {
    .testimonials-cards__items[data-count="3"],
    .testimonials-cards__items[data-count="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .testimonials-cards__items[data-count="4"],
    .testimonials-cards__items[data-count="8"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   TIMELINE — VERTICAL
   =================================== */

.timeline-vertical {
    background-color: #ffffff;
}

.timeline-vertical__container {
    margin: 0 auto;
    max-width: 1024px; /* max-w-5xl */
    padding: 5rem 1.5rem; /* py-20 px-6 */
}

/* Titre */

.timeline-vertical__title {
    text-align: center;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #111827; /* text-gray-900 */
    margin: 0 0 3rem 0; /* mb-12 */
    line-height: 1.2;
}

/* Timeline container */

.timeline-vertical__timeline {
    position: relative;
    padding: 0 1rem;
}

/* Ligne centrale verticale */

.timeline-vertical__timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), #06b6d4);
    transform: translateX(-50%);
    z-index: 1;
}

/* Événement individuel */

.timeline-vertical__event {
    position: relative;
    display: flex;
    margin-bottom: 3rem; /* mb-12 */
    align-items: flex-start;
}

/* Événements à gauche */

.timeline-vertical__event--left {
    justify-content: flex-end;
}

.timeline-vertical__event--left .timeline-vertical__content {
    margin-right: 2rem; /* mr-8 */
    text-align: right;
}

/* Événements à droite */

.timeline-vertical__event--right {
    justify-content: flex-start;
}

.timeline-vertical__event--right .timeline-vertical__content {
    margin-left: 2rem; /* ml-8 */
    text-align: left;
}

/* Marker central */

.timeline-vertical__marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-vertical__dot {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    border-radius: 50%;
    background-color: var(--accent-color); /* bg-indigo-600 */
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 4px #eef2ff; /* ring-4 ring-indigo-50 */
    transition: all 0.2s ease;
}

.timeline-vertical__event:hover .timeline-vertical__dot {
    transform: scale(1.2);
    background-color: var(--accent-hover); /* hover:bg-indigo-700 */
}

/* Contenu de l'événement */

.timeline-vertical__content {
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #e5e7eb;
    max-width: 24rem; /* max-w-sm */
    transition: all 0.2s ease;
    position: relative;
}

.timeline-vertical__event:hover .timeline-vertical__content {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
    transform: translateY(-2px);
}

/* Flèche pointant vers le centre */

.timeline-vertical__content::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.timeline-vertical__event--left .timeline-vertical__content::before {
    right: -16px;
    border-left-color: #ffffff;
}

.timeline-vertical__event--right .timeline-vertical__content::before {
    left: -16px;
    border-right-color: #ffffff;
}

/* Date */

.timeline-vertical__date {
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: var(--accent-color); /* text-indigo-600 */
    background-color: #eef2ff; /* bg-indigo-50 */
    padding: 0.25rem 0.5rem; /* py-1 px-2 */
    border-radius: 0.375rem; /* rounded-md */
    display: inline-block;
    margin-bottom: 0.5rem; /* mb-2 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Titre de l'événement */

.timeline-vertical__event-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #111827; /* text-gray-900 */
    margin: 0 0 0.5rem 0; /* mb-2 */
    line-height: 1.3;
}

/* Image de l'événement */

.timeline-vertical__image {
    margin: 0.75rem 0; /* my-3 */
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden;
}

.timeline-vertical__img {
    width: 100%;
    height: 8rem; /* h-32 */
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.timeline-vertical__event:hover .timeline-vertical__img {
    transform: scale(1.05);
}

/* Texte de l'événement */

.timeline-vertical__text {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    line-height: 1.5;
    margin: 0;
}

/* État vide */

.timeline-vertical__empty {
    text-align: center;
    padding: 3rem;
    background-color: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    color: #6b7280;
}

.timeline-vertical__empty p {
    margin: 0;
    font-weight: 500;
}

/* Responsive mobile */

@media (max-width: 781px) {
    .timeline-vertical__container {
        padding: 3rem 1rem;
    }
    
    .timeline-vertical__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .timeline-vertical__timeline {
        padding: 0;
    }
    
    /* Timeline linéaire sur mobile */
    .timeline-vertical__timeline::before {
        left: 1rem;
    }
    
    .timeline-vertical__event {
        margin-bottom: 2rem;
        justify-content: flex-start !important;
    }
    
    .timeline-vertical__event--left,
    .timeline-vertical__event--right {
        justify-content: flex-start;
    }
    
    .timeline-vertical__event--left .timeline-vertical__content,
    .timeline-vertical__event--right .timeline-vertical__content {
        margin-left: 2.5rem;
        margin-right: 0;
        text-align: left;
        max-width: calc(100% - 2.5rem);
    }
    
    .timeline-vertical__marker {
        left: 1rem;
    }
    
    .timeline-vertical__content::before {
        top: 1.5rem;
        left: -16px !important;
        right: auto !important;
        border-right-color: #ffffff !important;
        border-left-color: transparent !important;
    }
    
    .timeline-vertical__event {
        align-items: flex-start;
    }
    
    .timeline-vertical__content {
        margin-top: -0.25rem;
    }
}

/* Animations d'apparition */

@media (prefers-reduced-motion: no-preference) {
    .timeline-vertical__event:nth-child(odd) {
        animation: slideInLeft 0.6s ease-out;
        animation-fill-mode: both;
    }
    
    .timeline-vertical__event:nth-child(even) {
        animation: slideInRight 0.6s ease-out;
        animation-fill-mode: both;
    }
    
    .timeline-vertical__event:nth-child(1) { animation-delay: 0.1s; }
    .timeline-vertical__event:nth-child(2) { animation-delay: 0.2s; }
    .timeline-vertical__event:nth-child(3) { animation-delay: 0.3s; }
    .timeline-vertical__event:nth-child(4) { animation-delay: 0.4s; }
    .timeline-vertical__event:nth-child(5) { animation-delay: 0.5s; }
    .timeline-vertical__event:nth-child(6) { animation-delay: 0.6s; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .timeline-vertical__content,
    .timeline-vertical__dot,
    .timeline-vertical__img {
        transition: none;
    }
    
    .timeline-vertical__event:hover .timeline-vertical__content,
    .timeline-vertical__event:hover .timeline-vertical__dot,
    .timeline-vertical__event:hover .timeline-vertical__img {
        transform: none;
    }
    
    .timeline-vertical__event {
        animation: none;
    }
}

/* ==========================================================================
   Block: Text Image Full
   Fichier : resources/css/blocks/_text-image-full.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables locales (surchargeables depuis le thème)
   -------------------------------------------------------------------------- */

.block-text-image-full {
    --tif-container:   1280px;
    --tif-max-width:   1920px;
    --tif-color-title: #1a3a8c;
    --tif-color-text:  #1a1a2e;
    --tif-color-cta:   #1a6fd4;
    --tif-gap:         0px;
    --tif-section-py:  80px;
    --tif-header-pb:   48px;
}

/* --------------------------------------------------------------------------
   Évasion du container parent
   .container global = max-width: 82rem (≈1312px) + padding-inline: 1rem

   margin-inline: calc(50% - 50vw) pousse le bloc jusqu'aux bords du viewport.
   width: 100vw lui donne la pleine largeur.
   overflow: hidden empêche le scroll horizontal.
   -------------------------------------------------------------------------- */

.block-text-image-full {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    overflow: hidden;
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Wrapper interne : plafond 1920px, centré au-delà
   -------------------------------------------------------------------------- */

.tif__outer {
    width: 100%;
    max-width: var(--tif-max-width);
    margin-inline: auto;
    padding-block: var(--tif-section-py);
    padding-bottom: 0px;
}

@media (min-width: 1024px) {

    .tif__outer {
        padding-bottom: 5rem;
    }
}

/* --------------------------------------------------------------------------
   tif__container : reproduit l'alignement exact du .container global.

   Le bloc est maintenant en 100vw. Pour que le texte s'aligne sur le bord
   gauche du .container parent (max-width: 1280px centré), on utilise
   la même recette que le container global :
     max-width: 1280px + margin-inline: auto + padding-inline identique (1rem).
   -------------------------------------------------------------------------- */

.tif__container {
    width: 100%;
    max-width: var(--tif-container);
    margin-inline: auto;
    padding-inline: 2rem;
}

/* --------------------------------------------------------------------------
   En-tête : titre dans le container 1280px
   -------------------------------------------------------------------------- */

.tif__header {
    padding-bottom: var(--tif-header-pb);
}

.tif__title {
    font-weight: 900;
    color: var(--tif-color-title);
    line-height: 1.15;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Corps : layout deux colonnes
   -------------------------------------------------------------------------- */

.tif__body {
    display: flex;
    align-items: stretch;
    gap: var(--tif-gap);
}

/* --------------------------------------------------------------------------
   Colonne gauche

   Elle occupe 50% du viewport (= 50vw).
   Le tif__container à l'intérieur est max-width: 640px (= 1280/2),
   calé à droite de la colonne (margin-left: auto / margin-right: 0).

   Résultat : le texte commence exactement là où commence le contenu
   d'un .container 1280px centré, aligné pixel-perfect avec les
   autres sections de la page.
   -------------------------------------------------------------------------- */

.tif__col-left {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    align-items: center;
}

.tif__col-left .tif__container {
    max-width: calc(var(--tif-container) / 2); /* 640px */
    margin-inline: auto 0;  /* calé à droite dans la colonne gauche */
    padding-right: 124px;    /* gouttière vers l'image */    padding-right: 2rem;
}

@media (min-width: 1280px) {

    .tif__col-left .tif__container {
        padding-right: 124px;
    }
}

.tif__col-left .tif__container {
    padding-left: 2rem;     /* aligné sur le padding du .container global */
}

/* --------------------------------------------------------------------------
   Ligne interne : décorations + texte
   -------------------------------------------------------------------------- */

.tif__content-row {
    display: flex;
    position: relative;
    align-items: flex-start;
    gap: 0;
}

.tif__deco {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    min-height: 240px;
}

.tif__text {
    flex: 1;
    z-index: 1;
}

.tif__wysiwyg {
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
    font-size: 1.25rem;
    line-height: 1.5;
}

.tif__wysiwyg p {
    margin-block: 0 24px;
}

.tif__wysiwyg p:last-child {
    margin-bottom: 0;
}

.tif__cta {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--tif-color-cta);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.tif__cta:hover,
.tif__cta:focus-visible {
    opacity: 0.75;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Colonne droite : image collée au bord droit du viewport
   -------------------------------------------------------------------------- */

.tif__col-right {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.tif__image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    margin-top: 5rem;
}

@media (min-width: 1024px) {

    .tif__image-wrap {
        margin-top: 0px;
    }
}

.tif__image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

/* .tif__image-mask {
    position: absolute;
    inset: 0;
    background-image: url('../img/mask-bird.svg');
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    pointer-events: none;
} */

/* --------------------------------------------------------------------------
   >= 1920px : tif__outer plafonné à 1920px et centré.
   Deux colonnes égales de 960px.
   Le texte reste aligné sur les 640px droits du container 1280px.
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .tif__col-left {
        flex: 0 0 50%;
        width: 50%;
    }

    .tif__col-right {
        flex: 0 0 50%;
        width: 50%;
    }

    .tif__col-left .tif__container {
        max-width: calc(var(--tif-container) / 2);
        margin-inline: auto 0;
        padding-right: 60px;
        padding-left: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Responsive tablette
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .block-text-image-full {
        --tif-section-py: 60px;
        --tif-header-pb:  32px;
    }

    .tif__body {
        flex-direction: column;
    }

    .tif__col-left,
    .tif__col-right {
        width: 100%;
        flex: 0 0 auto;
    }

    .tif__col-left .tif__container {
        max-width: var(--tif-container);
        margin-inline: auto;
        padding-inline: 2rem;
    }

    .tif__image-wrap {
        min-height: 300px;
        max-height: 450px;
    }
}

/* --------------------------------------------------------------------------
   Responsive mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .block-text-image-full {
        --tif-section-py: 48px;
        --tif-header-pb:  24px;
    }

    .tif__content-row {
        flex-direction: column;
        gap: 24px;
    }

    .tif__deco {
        flex-direction: row;
        min-height: auto;
        gap: 16px;
        display: none;
    }
    .tif__image-wrap {
        min-height: 250px;
        max-height: 250px;
        height: 250px;
    }
}

.tif__content-row::before,
.tif__content-row::after {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* // 1 jaune */

.tif__content-row::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='234.703' height='184.769' viewBox='0 0 234.703 184.769'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 184.769h234.7V0H0Z' data-name='Tracé 30'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 36'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 35'%3E%3Cg data-name='Groupe 34'%3E%3Cpath fill='%23ffb243' d='M.29.412c.686-1.206 6.6.371 14.3 3.061 22.39 8.439 63.219 22.685 83.25 45.055 9.052 12.409 12.15 32.387 25.023 41.754 16.082 10 35.726-.965 50.454-8.013a92.1 92.1 0 0 1 36.227-8.013c9.145.352 18.123.093 25.134 2.875.3.668-2.04 1.5-7.086 2.764-12.038 2.949-29.252 6.826-41.328 9.85-3.636.927-6.752 1.744-10.054 2.782-13.893 4.359-17.807 11.167-25.153 20.682-8.273 9.534-20.256 15.971-32.405 21.257-14.468 6.678-29.938 7.809-43.22 14.988C56.009 162.55 28.336 183.066.475 184.772c-2.115-.445 10.592-2.059 24.374-7.679a147 147 0 0 0 19.254-9.256c6.566-4.025 11.779-6.975 15.47-11.074.315-.668.037-.594-.408-.686-5.62.779-16.991 5.732-31.051 8.329-8.125 1.41-21.369 4.656-28.121 3.691 13.986-4.155 30.792-4.452 45.983-10.944 13.226-5.23 26.544-12.262 37.618-21.13 15.563-12.335 14.784-25.134 8.774-39.677a153.7 153.7 0 0 0-22.333-36.41C50.873 37.751 28.109 25.657 7.357 8.276 2.497 4.307-.23 1.543.234.523' data-name='Tracé 29'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 234px;
    height: 184px;
    top: 0;
    left: -184px;
}

/* // 2 bleu */

.tif__content-row::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='127.027' height='100.001' viewBox='0 0 127.027 100.001'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%231c30a8' d='M0 100.001h127.027v-100H0Z' data-name='Tracé 30'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 48'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 35'%3E%3Cg data-name='Groupe 34'%3E%3Cpath fill='%231c30a8' d='M.157.223c.371-.653 3.574.2 7.74 1.656 12.115 4.569 34.215 12.279 45.056 24.386 4.9 6.716 6.576 17.529 13.543 22.6 8.7 5.411 19.336-.522 27.307-4.337a49.8 49.8 0 0 1 19.609-4.339c4.949.191 9.808.05 13.6 1.556.161.361-1.1.813-3.835 1.5-6.515 1.6-15.832 3.694-22.367 5.331-1.968.5-3.654.944-5.441 1.506-7.519 2.359-9.638 6.044-13.613 11.194-4.478 5.16-10.963 8.644-17.539 11.5-7.83 3.615-16.205 4.227-23.391 8.113C30.312 87.976 15.336 99.08.257 100.003c-1.145-.24 5.732-1.114 13.192-4.156a79.6 79.6 0 0 0 10.421-5.01c3.554-2.179 6.375-3.775 8.373-5.993.171-.361.02-.321-.221-.371-3.042.422-9.2 3.1-16.806 4.508-4.4.763-11.565 2.52-15.22 2 7.57-2.249 16.665-2.409 24.887-5.923a80 80 0 0 0 20.36-11.435c8.423-6.676 8-13.6 4.749-21.474a83.2 83.2 0 0 0-12.088-19.71C27.534 20.432 15.212 13.887 3.982 4.48 1.351 2.331-.124.836.127.283' data-name='Tracé 29'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 127px;
    height: 100px;
    bottom: -100px;
    left: 40px;
}

@media (min-width: 1280px) {
    .tif__content-row::after {
        bottom: -112px;
        left: 40px;
    }
}

/* =========================================================
   Block Actualités – Full width breakout
   ========================================================= */

.actualites-section {
  position: relative;
  width: 100vw;
  /* left: 50%;
  max-width: 1920px;
  margin-left: max(-50vw, -960px);
  margin-right: max(-50vw, -960px); */
  margin-left: calc(50% - 50vw);

}

.actualites-band {
  gap: 16px;
}

/* ── Image gauche ──────────────────────────────────────── */

.actualites-image {
    width: 850px;
    max-width: 45%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

@media (max-width: 1280px) {
    .actualites-image {
        width: 40vw;
    }
}

@media (max-width: 781px) {
    .actualites-image {
        display: none;
    }
}

/* ── Swiper ────────────────────────────────────────────── */

/* Le wrapper coupe le débordement du peek */

.actualites-swiper-outer {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* overflow:visible pour que la carte peek soit visible mais coupée par le wrapper */

.actualites-swiper {
    overflow: visible !important;
    height: 100%;
}

.actualites-swiper .swiper-wrapper {
    align-items: stretch;
}

/* Cartes carrées de 416px fixes – Swiper auto calcule combien rentrent */

.actualites-swiper .swiper-slide {
    width: 416px !important;
    height: auto;
    align-self: stretch;
    max-width: 100%;
}

/* Opacité réduite sur la carte en peek (classe ajoutée par JS) */

.actualites-swiper .swiper-slide-peek {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Carte article ─────────────────────────────────────── */

.article-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: filter 0.2s ease;
}

.article-card-date {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
}

.article-card-title {
    margin-bottom: 0.75rem;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 30px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.article-card-excerpt {
    margin-top: auto;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.article-card-content {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
}

 
#site-header > .container > .article-card-content {
    height: 100%;
}

@media (max-width: 781px) {
    .footer-bandeau-content .article-card-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.article-card:hover {
    filter: brightness(1.08);
}

/* ── Contrôles ─────────────────────────────────────────── */

.actualites-controls {
  padding-left: min(calc(45% + 32px), 866px);
}

@media (max-width: 1280px) {
    .actualites-controls {
      padding-left: calc(40vw + 2rem);
    }
}

@media (max-width: 781px) {
    .actualites-controls {
        padding-left: 2rem;
    }
}

.swiper-slide {
  transition: opacity .2s ease-in-out !important;
}

.swiper-slide-visible + .swiper-slide-visible + .swiper-slide-visible:not(.swiper-slide-next) {
  opacity: 0.2 !important;
}

/* =========================================================
   Block Planning du projet
   ========================================================= */

.planning-block {
    padding: 2rem 0 5rem;
}

/* ── Grille des étapes ─────────────────────────────────── */

.planning-etapes {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    position: relative;
    gap: 1rem;
}

.planning-etape-inner {
    min-height: 140px;
}

@media (min-width: 500px) {
    .planning-etapes {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .planning-etapes {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .planning-etape-inner {
        min-height: unset;
    }
}

/* ── Étape individuelle ────────────────────────────────── */

.planning-etape {
    position: relative;
    padding-bottom: 0;
}

/* Contenu texte – prend toute la hauteur de la cellule */

.planning-etape-inner {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 782px) {

    .planning-etape-inner {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {

    .planning-etape-inner {
        padding: 55px;
    }
}

.planning-etape-inner {
    height: 100%;
    background-color: rgba(28, 48, 168, 0.4); /* #1c30a866 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-bottom: 1px solid #12d9bf;
}

/* ── Étape active ──────────────────────────────────────── */

.planning-etape.is-active .planning-etape-inner {
    background-color: #12d9bf;
}

.planning-etape.is-active .planning-date {
    color: #071777; /* primary-dark */
}

.planning-etape.is-active .planning-desc {
    color: #071777; /* primary-dark */
}

/* ── Typographie commune ───────────────────────────────── */

.planning-date {
    font-size: 30px;
    font-weight: 800;
    color: #12d9bf; /* turquoise */
    margin: 0;
    line-height: 1.2;
}

.planning-desc {
    font-size: 1.125rem; /* text-lg = 18px */
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
}

/* ── Ligne turquoise + curseur ─────────────────────────── */

@media (min-width: 1024px) {
/* Ligne turquoise au bas des cellules */
    .planning-etapes::after {
        content: '';
        position: absolute;
        bottom: 0; /* même valeur que padding-bottom de .planning-etape */
        left: 0;
        right: 0;
        height: 1px;
        background-color: #12d9bf;
    }
}

/* Curseur centré sur la ligne */

.planning-cursor {
    position: absolute;
    bottom: -26px; /* 26px = moitié de la hauteur du SVG (52px / 2) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    line-height: 0;
}

/* ==========================================================================
   Block : Listing Ateliers — Layout Masonry + Modale
   Fichier : resources/css/blocks/_listing-ateliers.css
   ========================================================================== */

.block-listing-ateliers {
    --la-primary:      #1C30A8;
    --la-primary-dark: #071777;
    --la-secondary:    #0073FF;
    --la-tertiary:     #12D9BF;
    --la-accent:       #FFBE00;
    --la-white:        #ffffff;
    --la-border:       #E2E8F0;
    --la-text:         #0F1B4D;
    --la-text-muted:   #6B7A99;
    --la-bg:           #F4F6FB;
    --la-font:         "EDF 2020", Inter, system-ui, sans-serif;
    --la-gap:          16px;
}

.la-masonry {
    display: flex;
    flex-direction: row;
    gap: var(--la-gap);
    align-items: flex-start;
}

.la-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--la-gap);
    min-width: 0;
}

/* Col 1 */

.la-item--1  { aspect-ratio: 416 / 416; }

.la-item--4  { aspect-ratio: 416 / 270; max-height: 300px; }

.la-item--7  { aspect-ratio: 416 / 535; }

.la-item--9  { aspect-ratio: 416 / 409; }

/* Col 2 */

.la-item--2  { aspect-ratio: 416 / 535; }

.la-item--5  { aspect-ratio: 416 / 389; }

.la-item--8  { aspect-ratio: 416 / 722; max-height: 635px; }

/* Col 3 */

.la-item--3  { aspect-ratio: 416 / 512; }

.la-item--6  { aspect-ratio: 416 / 566; }

.la-item--10 { aspect-ratio: 416 / 568; }

.la-item { display: flex; flex-direction: column; }

.la-item > .la-card,
.la-item > .la-image-wrap {
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* --------------------------------------------------------------------------
   Images intercalées
   -------------------------------------------------------------------------- */

.la-image-wrap {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
}

.la-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

.la-image-wrap--placeholder {
    background: linear-gradient(135deg, #e6eeff 0%, #dde3f0 100%);
    min-height: 280px;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.la-card {
    background-color: var(--la-secondary);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 32px 28px 24px;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
    cursor: default;
}

.la-card:hover { background-color: var(--la-primary-dark); }

.la-card:hover .la-card__footer path {
    stroke: #FFBE00;
}

.la-card:hover .la-card__date {
    --tw-text-opacity: 1;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1));
}

.la-card__badge-termine {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--la-primary-dark);
    color: var(--la-white);
    font-family: var(--la-font);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
}

.la-card__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.la-card__titre {
    font-family: var(--la-font);
    font-size: 30px;
    font-weight: 700 !important;
    color: var(--la-white);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.la-card__description {
    font-family: var(--la-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--la-white);
    margin: 0;
    opacity: 0.9;
}

.la-card__dates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.la-card__date {
    font-family: var(--la-font);
    font-size: 16px;
    font-weight: 900;
    color: var(--la-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.la-card__lieu {
    font-family: var(--la-font);
    font-size: 16px;
    font-weight: 900;
    color: var(--la-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    transition: color 0.25s ease;
}

.la-card--termine { opacity: 0.75; }

.la-card--termine .la-card__date { opacity: 0.6; }

.la-card__footer { 
    margin-top: 24px;
    text-align: end;
 }

.la-btn-inscrire {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: 18px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--la-white);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: gap 0.2s ease, opacity 0.2s ease;
    text-transform: uppercase;
}

/* .la-btn-inscrire:hover:not(.la-btn-inscrire--disabled) { gap: 14px; } */

.la-btn-arrow {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* .la-btn-inscrire:hover:not(.la-btn-inscrire--disabled) .la-btn-arrow { transform: translateX(4px); } */

.la-btn-inscrire--disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Formulaire sélecteur de date
   -------------------------------------------------------------------------- */

.atelier-form__field select {
    font-family: var(--la-font);
    font-size: 0.9rem;
    padding: 10px 14px;
    border: 1.5px solid var(--la-border);
    border-radius: 7px;
    color: var(--la-text);
    background: var(--la-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.atelier-form__field select:focus {
    border-color: var(--la-secondary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.12);
}

.atelier-form__places-info {
    font-size: 0.75rem;
    color: var(--la-text-muted);
    font-family: var(--la-font);
    min-height: 16px;
    margin-top: 2px;
}

.atelier-form__places-info--urgent { color: #c0392b; font-weight: 600; }

/* --------------------------------------------------------------------------
   RESPONSIVE — géré par masonry-ateliers.js
   Le JS redistribue les items et égalise les hauteurs selon le breakpoint.
   -------------------------------------------------------------------------- */

/* Items — hauteur min pour ne jamais être vides */

.la-item > .la-card       { min-height: 200px; }

.la-item > .la-image-wrap { min-height: 180px; }

/* Mobile : images masquées */

@media (max-width: 639px) {
    .la-item--3,
    .la-item--4,
    .la-item--8 { display: none; }

    .la-card { padding: 24px 20px 20px; }
    .la-card__titre { font-size: 1rem; }
}

/* ==========================================================================
   MODALE D'INSCRIPTION
   ========================================================================== */

/* Overlay + boîte */

.atelier-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }

.atelier-modal[hidden] { display: none; }

.atelier-modal__overlay { position: absolute; inset: 0; background: rgba(7,23,119,.55); backdrop-filter: blur(2px); cursor: pointer; }

.atelier-modal__box { position: relative; background: #fff; width: 100%; max-width: 600px; max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(7,23,119,.2); z-index: 1; animation: modal-in 0.22s ease; }

@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Croix de fermeture — #12D9BF */

.atelier-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #12D9BF;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.atelier-modal__close svg { fill: #12D9BF; width: 22px; height: 22px; }

/* Header : "INSCRIPTION" */

.atelier-modal__header { padding: 32px 32px 0; }

.atelier-modal__titre {
    font-family: var(--la-font);
    font-size: 30px;
    font-weight: 800;
    color: #1C30A8;
    text-transform: uppercase;
    margin: 0;
    padding-right: 36px;
    letter-spacing: 0.02em;
}

/* Description atelier : titre en bleu uppercase + texte */

.atelier-modal__atelier-desc { padding: 12px 0 16px; }

.atelier-modal__atelier-desc .modal-atelier-titre {
    font-family: var(--la-font);
    font-size: 20px;
    font-weight: 700;
    color: #0073FF;
    text-transform: uppercase;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}

.atelier-modal__atelier-desc .modal-atelier-description {
    font-family: var(--la-font);
    font-size: 16px;
    font-weight: 400;
    color: #071777;
    line-height: 1.5;
    margin: 0;
}

/* Formulaire — conteneur */

#atelier-form { padding: 0 32px 32px; }

.atelier-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Lignes 2 colonnes */

.atelier-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}

@media (max-width: 480px) { .atelier-form__row { grid-template-columns: 1fr; margin-bottom: 16px; } }

/* Champ générique */

.atelier-form__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }

.atelier-form__field > label {
    font-family: var(--la-font);
    font-size: 14px;
    font-weight: 600;
    color: #071777;
}

/* Inputs texte / email / tel — fond bleu clair, texte bleu */

.atelier-form__field input[type="text"],
.atelier-form__field input[type="email"],
.atelier-form__field input[type="tel"] {
    font-family: var(--la-font);
    font-size: 16px;
    font-weight: 400;
    color: #0073FF;
    background: rgba(0, 115, 255, 0.1);
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.2s, box-shadow 0.2s;
}

.atelier-form__field input[type="text"]::-moz-placeholder, .atelier-form__field input[type="email"]::-moz-placeholder, .atelier-form__field input[type="tel"]::-moz-placeholder { color: #0073FF; opacity: 0.7; }

.atelier-form__field input[type="text"]::placeholder,
.atelier-form__field input[type="email"]::placeholder,
.atelier-form__field input[type="tel"]::placeholder { color: #0073FF; opacity: 0.7; }

.atelier-form__field input[type="text"]:focus,
.atelier-form__field input[type="email"]:focus,
.atelier-form__field input[type="tel"]:focus {
    background: rgba(0, 115, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(0,115,255,.3);
}

/* Erreurs champs */

.atelier-form__error { 
    font-size: 0.75rem; 
    color: #c0392b; 
    min-height: 14px; 
    font-family: 12px; 
    line-height: 14px;
    margin-bottom: 4px; 
}

/* --------------------------------------------------------------------------
   Dates — radio buttons
   16px bold #071777, rond bordure #1C30A8, actif fond #FFBE00
   -------------------------------------------------------------------------- */

.atelier-form__dates-fieldset { border: none; padding: 0; margin: 0 0 16px; }

.atelier-form__dates-list { display: flex; flex-direction: column; gap: 12px; }

.atelier-form__date-option span,
.atelier-form__date-option {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-family: var(--la-font);
    font-size: 16px;
    font-weight: 700;
    color: #071777;
    line-height: 1.3;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.atelier-form__date-option input[type="radio"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 3px solid #1C30A8;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
    background: #fff;
}

/* Actif : fond #FFBE00, point central blanc */

.atelier-form__date-option input[type="radio"]:checked {
    /* background: #FFBE00;
    border-color: #FFBE00; */
}

/* .atelier-form__date-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
} */

input[type=radio]:checked::before {
    border-radius: 50%;
    width: 11px;
    height: 11px;
    margin: 2.5px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 190 0 / var(--tw-bg-opacity, 1));
 }

.atelier-form__date-option .date-label-date {
    font-weight: 800;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Checkbox accompagnement — rond style radio (même look que les dates)
   -------------------------------------------------------------------------- */

.atelier-form__field--checkbox { flex-direction: row; align-items: center; gap: 0; margin-bottom: 12px; }

.atelier-form__checkbox-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-family: var(--la-font);
    line-height: 1.4;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.atelier-form__checkbox-label span {
    font-size: 14px;
    line-height: 20px;
}

/* Accompagnement : style radio rond */

.atelier-form__field--checkbox:not(.atelier-form__field--rgpd) .atelier-form__checkbox-label {
    font-size: 16px;
    font-weight: 400;
    color: #071777;
}

.atelier-form__field--checkbox:not(.atelier-form__field--rgpd) .atelier-form__checkbox-label input[type="checkbox"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 3px solid #1C30A8;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 1px;
    background: #fff;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

.atelier-form__field--checkbox:not(.atelier-form__field--rgpd) .atelier-form__checkbox-label input[type="checkbox"]:checked {
    /* background: #FFBE00;
    border-color: #FFBE00; */
}

.atelier-form__field--checkbox:not(.atelier-form__field--rgpd) .atelier-form__checkbox-label input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 11px;
    height: 11px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 190 0 / var(--tw-bg-opacity, 1));
    border-radius: 50%;
    margin: 2.5px;
}

/* Champ "Précisez" — même style que les inputs */

#atelier-accompagnement-detail-wrap input[type="text"] {
    font-family: var(--la-font);
    font-size: 16px;
    color: #0073FF;
    background: rgba(0, 115, 255, 0.1);
    border: none;
    border-radius: 6px;
    padding: 14px 16px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

#atelier-accompagnement-detail-wrap input[type="text"]::-moz-placeholder { color: #0073FF; opacity: 0.7; }

#atelier-accompagnement-detail-wrap input[type="text"]::placeholder { color: #0073FF; opacity: 0.7; }

/* --------------------------------------------------------------------------
   Footer : checkbox RGPD (carré #FFBE00) + bouton sur la même ligne
   -------------------------------------------------------------------------- */

.atelier-form__footer {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,115,255,0.15);
}

@media (max-width: 640px) {
    .atelier-form__footer {
        flex-flow: column;
    }
}

.atelier-form__field--rgpd {
    flex: 1;
    margin-bottom: 0;
}

/* RGPD : carré #FFBE00 bordure, carré #1C30A8 dedans quand coché */

.atelier-form__field--rgpd .atelier-form__checkbox-label {
    font-size: 13px;
    font-weight: 400;
    color: #071777;
    align-items: flex-start;
}

.atelier-form__field--rgpd .atelier-form__checkbox-label input[type="checkbox"] {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 3px solid #FFBE00;
    border-radius: 0;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 1px;
    background: #fff;
    position: relative;
    transition: background 0.15s;
}

/* Coché : carré #1C30A8 à l'intérieur du carré #FFBE00 */

.atelier-form__field--rgpd .atelier-form__checkbox-label input[type="checkbox"]:checked {
    /* background: #FFBE00; */
}

.atelier-form__field--rgpd .atelier-form__checkbox-label input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 11px;
    height: 11px;
    background: #1C30A8;
    border-radius: 0;
    margin: 1.5px;
}

/* Bouton S'inscrire — classe cta-primary gérée par le thème */

.atelier-form__submit {
    flex-shrink: 0;
    align-self: flex-end;
    white-space: nowrap;
}

/* Spinner */

.atelier-spinner { width: 18px; height: 18px; animation: spin 0.8s linear infinite; flex-shrink: 0; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Sr-only */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Notices */

.atelier-form__recaptcha-notice { margin-top: 12px; font-size: 0.72rem; color: var(--la-text-muted); font-family: var(--la-font); text-align: center; line-height: 1.5; }

.atelier-form__recaptcha-notice a { color: var(--la-secondary); text-decoration: none; }

/* Succès */

.atelier-form__success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px; text-align: center; }

.atelier-form__success svg { width: 48px; height: 48px; fill: #27ae60; }

.atelier-form__success p { font-family: var(--la-font); font-size: 0.95rem; color: var(--la-text); line-height: 1.6; margin: 0; }

/* Erreur globale */

.atelier-form__error-global { margin: 0 32px 20px; padding: 12px 16px; background: #fdf0f0; border: 1px solid #f5c6cb; border-radius: 7px; }

.atelier-form__error-global p { font-family: var(--la-font); font-size: 0.85rem; color: #721c24; margin: 0; }

#listing-ateliers {
    padding-bottom: 2rem;
}

@media (min-width: 640px) {

    #listing-ateliers {
        padding-bottom: 50px;
    }
}

@media (min-width: 1024px) {

    #listing-ateliers {
        padding-bottom: 200px;
    }
}

/* ==========================================================================
   Block : Projet Intro — "Une STEP, kosa i lé ?"
   Fichier : resources/css/blocks/_projet-intro.css
   ========================================================================== */

.block-projet-intro {
    --pi-bg:        #1C30A8;
    --pi-bg-col:    #0073FF;
    --pi-accent:    #FFBE00;
    --pi-white:     #ffffff;
    --pi-container: 1280px;
    --pi-max-width: 1920px;
    --pi-font:      "EDF 2020", Inter, system-ui, sans-serif;
    --pi-pad-top:   72px;   /* padding-top de la col gauche — référence d'alignement */
}

/* --------------------------------------------------------------------------
   Évasion du container parent
   -------------------------------------------------------------------------- */

.block-projet-intro {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    overflow: hidden;
    background: linear-gradient(135deg, #071777 0%, #1C30A7 100%);
}

/* --------------------------------------------------------------------------
   Wrapper — plafond 1920px
   -------------------------------------------------------------------------- */

.pi__outer {
    width: 100%;
    max-width: var(--pi-max-width);
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CSS Grid principal
   3 colonnes × 2 rows :
     Col 1, Row 1 : texte gauche (.pi__col-left)
     Col 1-2, Row 2 : illustration (.pi__illustration)  ← grid-column: 1/3
     Col 2, Row 1 : bloc bleu clair (.pi__col-center)
     Col 3, Row 1-2 : photo bord droit (.pi__col-right)
   -------------------------------------------------------------------------- */

.pi__grid {
    display: grid;
    grid-template-columns: 42% 29% 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 16px;
}

/* Placement explicite de chaque cellule */

.pi__col-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.pi__illustration {
    grid-column: 1 / 3;   /* ← couvre col1 + col2 */
    grid-row: 2 / 3;
}

.pi__col-center {
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    height: calc(100% - 72px);
}

.pi__col-right {
    grid-column: 3 / 4;
    grid-row: 1 / 3;   /* ← s'étend sur les 2 rows pour suivre la hauteur totale */
}

/* --------------------------------------------------------------------------
   Col 1 / Row 1 — Texte
   -------------------------------------------------------------------------- */

.pi__col-left {
    display: flex;
    flex-direction: column;
    padding-top: var(--pi-pad-top);
    padding-bottom: 48px;
    padding-right: 48px;
    padding-left: max(2rem, calc((100vw - var(--pi-container)) / 2));
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Col 2 / Row 1 — Bloc bleu clair
   margin-top: 72px pour aligner visuellement avec la col gauche
   Pas de padding car on ne veut pas de fond de couleur au-dessus
   -------------------------------------------------------------------------- */

.pi__col-center {
    background-color: var(--pi-bg-col);
    margin-top: var(--pi-pad-top);  /* aligne avec le contenu de la col gauche */
    align-self: start;
}

.pi__col-center-inner {
    padding: 68px 73px;
}

.pi__col-center-inner p {
    font-family: var(--pi-font);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--pi-white);
    margin-block: 0 1.4em;
}

.pi__col-center-inner p:last-child {
    margin-bottom: 0;
}

.pi__col-center-inner strong,
.pi__col-center-inner b {
    color: var(--pi-accent);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Col 3 / Rows 1-2 — Photo bord droit
   S'étire sur toute la hauteur (col-center row1 + illustration row2)
   margin-top: 72px pour aligner visuellement le début de l'image avec les autres cols
   -------------------------------------------------------------------------- */

.pi__col-right {
    align-self: stretch;
    margin-top: var(--pi-pad-top);
}

.pi__col-right img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

/* --------------------------------------------------------------------------
   Col 1-2 / Row 2 — Illustration PNG (fond noir → transparent via blend mode)
   -------------------------------------------------------------------------- */

.pi__illustration {
    display: flex;
    align-items: flex-end;
    padding-left: max(2rem, calc((100vw - var(--pi-container)) / 2));
    overflow: hidden;
}

.pi__illustration img {
    display: block;
    width: 100%;
    height: auto;
    mix-blend-mode: screen;
    filter: saturate(1.1) brightness(1.05);
}

/* --------------------------------------------------------------------------
   Contenu col gauche — typographie
   -------------------------------------------------------------------------- */

.pi__surtitre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

.pi__titre {
    font-family: var(--pi-font);
    font-size: 60px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pi-white);
    /* margin: 0 0 36px; */
    max-width: 520px;
}

.pi__texte-intro {
    font-family: var(--pi-font);
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    max-width: 480px;
}

.pi__texte-intro p {
    margin-block: 0 1.2em;
}

.pi__texte-intro p:last-child {
    margin-bottom: 0;
}

.pi__illustration {
    margin-top: -150px;
}

/* --------------------------------------------------------------------------
   ≥ 1920px
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .pi__col-left,
    .pi__illustration {
        padding-left: calc((var(--pi-max-width) - var(--pi-container)) / 2 + 2rem);
    }
}

/* --------------------------------------------------------------------------
   Tablette ≤ 1024px — empilement vertical
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .pi__grid {
        gap: 0;
    }
    .pi__illustration {
        margin-top: 0;
    }

    .pi__grid {
        display: flex;
        flex-direction: column;
    }

    .pi__col-left {
        padding: 48px 2rem 32px;
        order: 1;
    }

    .pi__col-center {
        margin-top: 0;
        order: 2;
    }

    .pi__col-center-inner {
        padding: 36px 2rem;
    }

    .pi__col-right {
        margin-top: 0 !important;
        order: 3;
        min-height: 300px;
    }

    .pi__col-right img {
        height: 300px !important;
    }

    .pi__illustration {
        padding: 2rem;
        order: 4;
    }

    .block-projet-intro .pi__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .block-projet-intro .pi__col-left {
        grid-column: 1 / 1;
        grid-row: 1 / 1;
    }
    .block-projet-intro .pi__illustration {
        grid-column: 2 / 2;
        grid-row: 1 / 1;
        height: 100%;
    }
    .block-projet-intro .pi__col-center {
        grid-column: 1 / 3;
        grid-row: 2 / 2;
        height: 100%;
    }
    .block-projet-intro .pi__col-right {
        grid-column: 1 / 3;
        grid-row: 3 / 3;
    }
}

/* --------------------------------------------------------------------------
   Mobile ≤ 640px
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .pi__col-left {
        padding: 40px 2rem 24px;
    }

    .pi__titre {
        font-size: 2rem;
    }

    .pi__col-center-inner {
        padding: 28px 2rem;
    }

    .pi__col-right img {
        height: 220px;
    }

    .pi__illustration {
        padding: 2rem;
    }
    .block-projet-intro .pi__grid {
        display: flex;
        flex-direction: column;
    }
    .block-projet-intro .pi__illustration {
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   Accessibilité — mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pi__illustration img {
        filter: none;
    }
}

/* La col droite s'étend sur les 2 rows mais on veut qu'elle 
   s'arrête visuellement à la hauteur de pi__col-center (row 1 uniquement) */

.pi__col-right {
    grid-column: 3 / 4;
    grid-row: 1 / 2;        /* ← row 1 uniquement, pas 1/3 */
    margin-top: var(--pi-pad-top);
    align-self: stretch;    /* s'étire à la hauteur de la row 1 */
}

.pi__col-right img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

@media (min-width: 1280px) {
    .block-projet-intro .pi__illustration {
        padding-bottom: 64px;
    }
}

@media (min-width: 1500px) {
    .block-projet-intro .pi__illustration {
        margin-top: -100px;
    }
}

/* ==========================================================================
   Block : Porteurs du projet — 3 colonnes image + 2 cols bleues
   Fichier : resources/css/blocks/_porteurs-projet.css

   Logique des colonnes :
   - Container global : 1280px centré avec padding-inline: 1rem
   - Les 2 colonnes bleues font 416px chacune
   - Leur bord droit = bord droit du container 1280px
   - La colonne image = tout l'espace restant à gauche (collée au bord écran)

   Calcul de la marge gauche des colonnes bleues :
   margin-left du container = (100vw - 1280px) / 2 + 1rem (padding)
   Bord gauche col1 = 100vw - margin-right - 416px - 416px
   ========================================================================== */

.block-porteurs-projet {
    --pp-bg-col:    #0073FF;
    --pp-white:     #ffffff;
    --pp-accent:    #FFBE00;
    --pp-turquoise: #12D9BF;
    --pp-text:      #0F1B4D;
    --pp-container: 1280px;
    --pp-max-width: 1920px;
    --pp-col-width: 416px;
    --pp-padding:   45px;
    --pp-font:      "EDF 2020", Inter, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Évasion du container parent
   -------------------------------------------------------------------------- */

.block-porteurs-projet {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    background-color: #ffffff;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Grille CSS
   3 colonnes :
   Col 1 (image) : prend tout l'espace restant après les 2 cols bleues
   Col 2 + Col 3 : 416px chacune, calées sur le bord droit du container 1280px
   -------------------------------------------------------------------------- */

.pp__grid {
    display: grid;
    grid-template-columns:
        1fr                 /* image : tout l'espace restant */
        var(--pp-col-width) /* col bleue 1 */
        var(--pp-col-width) /* col bleue 2 */;

    /* Le bord droit des 2 cols bleues = bord droit container 1280px
       On ajoute un padding-right pour caler sur le container.
       padding-right = (100vw - 1280px) / 2 + 1rem
       Mais on utilise max() pour éviter une valeur négative sur mobile */
    padding-right: max(2rem, calc((100vw - var(--pp-container)) / 2));
    max-width: var(--pp-max-width);
    margin-inline: auto;
    align-items: stretch;
    box-sizing: border-box;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Col image — bord gauche de l'écran
   -------------------------------------------------------------------------- */

.pp__col-image {
    position: relative;
    min-height: 480px;
}

.pp__col-image img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
}

/* --------------------------------------------------------------------------
   Colonnes bleues communes
   -------------------------------------------------------------------------- */

.pp__col-blue {
    background-color: var(--pp-bg-col);
    padding: var(--pp-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Titre de chaque colonne */

.pp__col-titre {
    color: #FFF;
    margin: 0 0 24px;
}

/* Contenu wysiwyg */

.pp__col-texte {
    color: #FFF;
    flex: 1;
}

.pp__col-texte p {
    margin-block: 0 1.2em;
}

.pp__col-texte p:last-child {
    margin-bottom: 0;
}

/* Listes à puces — icône turquoise */

.pp__col-texte ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.pp__col-texte ul li {
    position: relative;
    margin-bottom: 14px;
    line-height: 1.6;
}

/* Icône turquoise devant chaque item */

.pp__col-texte ul li::before {
    content: '';
    position: absolute;
    left: 0;
    flex-shrink: 0;
}

/* Gras dans les listes ("Rôle :", "Savoir-faire :") */

.pp__col-texte ul li strong,
.pp__col-texte ul li b {
    font-weight: 700;
    color: var(--pp-white);
}

/* --------------------------------------------------------------------------
   ≥ 1920px
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .pp__grid {
        padding-right: calc((var(--pp-max-width) - var(--pp-container)) / 2 + 2rem);
    }
}

/* --------------------------------------------------------------------------
   Tablette ≤ 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .pp__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        padding-right: 0;
    }

    /* Image sur toute la largeur en haut */
    .pp__col-image {
        grid-column: 1 / 3;
        min-height: 320px;
    }

    /* Les 2 cols bleues se partagent la largeur */
    .pp__col-1 { grid-column: 1 / 2; }
    .pp__col-2 { grid-column: 2 / 3; }

    .pp__col-image img {
        -o-object-position: center center;
           object-position: center center;
        max-height: 340px;
    }
}

/* --------------------------------------------------------------------------
   Mobile ≤ 640px
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .pp__grid {
        grid-template-columns: 1fr;
    }

    .pp__col-image {
        grid-column: 1;
        min-height: 240px;
    }

    .pp__col-1,
    .pp__col-2 {
        grid-column: 1;
    }

    .pp__col-blue {
        padding: 32px 2rem;
    }
}

/* ==========================================================================
   Block : Pourquoi une STEP ? — Accordéon numéroté
   Fichier : resources/css/blocks/_pourquoi-step.css

   Couleurs unifiées (pas de cycle) :
   Fermé  : fond #071777, numéro blanc+turquoise, titre #12D9BF, icône #12D9BF
   Ouvert : fond #12D9BF, numéro blanc+turquoise, titre #071777, icône #071777

   Structure : CSS Grid sur .ps__item
   Col 1 (1fr)    : .ps__dt (header) / .ps__content (texte)
   Col 2 (371px)  : .ps__image-wrap (rows 1-2, pleine hauteur)
   Col 3 (72px)   : icône dans .ps__header / vide
   ========================================================================== */

.block-pourquoi-step {
    --ps-closed-bg:  #071777;
    --ps-open-bg:    #12D9BF;
    --ps-turquoise:  #12D9BF;
    --ps-dark:       #071777;
    --ps-white:      #ffffff;
    --ps-font:       "EDF 2020", Inter, system-ui, sans-serif;
    --ps-img-width:  371px;
    --ps-icon-width: 72px;
    --ps-num-size:   72px;
    --ps-num-font:   60px;
    --ps-gap:        20px;
}

.block-pourquoi-step .container { 
    padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   Liste
   -------------------------------------------------------------------------- */

.ps__list {
    margin: 0;
    padding: 0;
    padding-block: 48px;
    display: flex;
    flex-direction: column;
    gap: var(--ps-gap);
}

/* --------------------------------------------------------------------------
   Item — grille CSS 3 colonnes × 2 rows
   Row 1 : header (dt) | image | —
   Row 2 : content (dd) | image | —
   L'image span sur les 2 rows → pleine hauteur garantie
   -------------------------------------------------------------------------- */

.ps__item {
    display: grid;
    grid-template-columns: 1fr var(--ps-img-width) var(--ps-icon-width);
    grid-template-rows: auto auto;
    grid-template-areas:
        "header image icon-void"
        "content image icon-void";
    background-color: var(--ps-closed-bg);
    /* overflow hidden pour que le radius s'applique à l'image aussi */
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Placement des éléments dans la grille
   -------------------------------------------------------------------------- */

.ps__dt      { grid-area: header;  }

.ps__content { grid-area: content; }

.ps__image-wrap {
    grid-area: image;
    grid-row: 1 / 3;    /* span rows 1-2 : pleine hauteur */
}

/* --------------------------------------------------------------------------
   Header (bouton) — occupe col 1 + col 3 (via le grid du dt)
   -------------------------------------------------------------------------- */

.ps__dt {
    display: contents; /* laisse le bouton utiliser directement la grille */
}

.ps__header {
    /* Le bouton occupe col 1 de la grille parente */
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
    background: transparent; /* fond géré par .ps__item */
    outline: none;
    min-height: 70px;
}

/* Colonne 3 — icône, placée dans la grille via pseudo-élément du header */

/* On intègre l'icône directement dans le flex du header */

.ps__header:focus-visible {
    outline: 3px solid var(--ps-turquoise);
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Numéro — carré blanc, chiffre turquoise
   -------------------------------------------------------------------------- */

.ps__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ps-num-size);
    height: var(--ps-num-size);
    background-color: var(--ps-white);
    font-family: var(--ps-font);
    font-size: var(--ps-num-font);
    font-weight: 800;
    color: var(--ps-turquoise);
    line-height: 1;
    /* Décalage maquette */
    margin-top: -10px;
    margin-left: -10px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Titre — turquoise en fermé
   -------------------------------------------------------------------------- */

.ps__titre {
    flex: 1;
    font-family: var(--ps-font);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--ps-turquoise);
    padding: 20px 16px;
    line-height: 1.2;
    transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Icône — dans le header, col 3
   -------------------------------------------------------------------------- */

.ps__icon-wrap {
    /* Placé en dernier dans le flex du header — s'étire à droite */
    flex-shrink: 0;
    width: var(--ps-icon-width);
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    margin-left: auto;
}

.ps__icon--minus { display: none; }

.ps__icon--plus  { display: block; }

/* --------------------------------------------------------------------------
   Image — col 2, rows 1-2 (pleine hauteur)
   -------------------------------------------------------------------------- */

.ps__image-wrap {
    overflow: hidden;
    /* hidden par défaut : visible uniquement quand déplié */
    display: none;
}

.ps__image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

.ps__image-wrap--empty {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Contenu texte — col 1, row 2
   Caché par défaut via [hidden]
   -------------------------------------------------------------------------- */

.ps__content {
    background: transparent; /* fond géré par .ps__item */
}

.ps__content[hidden] {
    display: none;
}

.ps__texte {
    padding: 20px 24px 28px 78px;
    font-family: var(--ps-font);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ps-dark);
}

.ps__texte p {
    margin-block: 0 1em;
}

.ps__texte p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   État OUVERT — .ps__item--open
   Fond turquoise, titre dark, icône dark
   -------------------------------------------------------------------------- */

.ps__item--open {
    background-color: var(--ps-open-bg);
}

/* Titre ouvert → #071777 */

.ps__item--open .ps__titre {
    color: var(--ps-dark);
    max-width: 50%;
}

/* Icône ouverte : - visible, + caché */

.ps__item--open .ps__icon--minus { display: block; }

.ps__item--open .ps__icon--plus  { display: none; }

/* SVG minus → couleur dark */

.ps__item--open .ps__icon--minus rect {
    fill: var(--ps-dark) !important;
}

/* Deuxième rect du minus (la barre verticale opacité 0 = masquée) */

.ps__item--open .ps__icon--minus rect:last-child {
    opacity: 0.005;
}

/* Texte ouvert → dark */

.ps__item--open .ps__texte {
    color: var(--ps-dark);
}

/* Image visible à l'ouverture */

.ps__item--open .ps__image-wrap {
    display: block;
}

/* --------------------------------------------------------------------------
   Ajustement grille quand image visible
   Quand fermé : grille 1fr 0px 72px (image collapse)
   Quand ouvert : grille 1fr 371px 72px
   -------------------------------------------------------------------------- */

.ps__item {
    grid-template-columns: 1fr 0 var(--ps-icon-width);
    transition: grid-template-columns 0.25s ease;
}

.ps__item--open {
    grid-template-columns: 1fr var(--ps-img-width) var(--ps-icon-width);
}

/* --------------------------------------------------------------------------
   Responsive ≤ 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .block-pourquoi-step {
        --ps-img-width: 260px;
    }
}

/* --------------------------------------------------------------------------
   Responsive ≤ 768px — grille → flex colonne
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .ps__item,
    .ps__item--open {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-areas: none;
    }

    .ps__header {
        width: 100%;
    }

    .ps__titre {
        font-size: 1.15rem;
        padding: 14px 12px;
    }

    .ps__numero {
        width: 52px;
        height: 52px;
        font-size: 42px;
    }

    /* Image mobile : sous le texte, hauteur fixe */
    .ps__item--open .ps__image-wrap {
        width: 100%;
        height: 200px;
        order: 3;
    }

    .ps__item--open .ps__image-wrap img {
        height: 200px;
    }

    .ps__texte {
        padding: 16px 20px;
    }

    .ps__icon-wrap {
        width: 52px;
    }
}

/* --------------------------------------------------------------------------
   Responsive ≤ 480px
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .ps__list {
        padding-block: 32px;
    }

    .ps__titre {
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Accessibilité — mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ps__item {
        transition: none;
    }
    .ps__titre {
        transition: none;
    }
}

/* ==========================================================================
   Block : Emplacement
   Fichier : resources/css/blocks/_emplacement.css
   ========================================================================== */

.block-emplacement {
    --emp-gradient-start: rgba(7, 23, 119, 0.9);
    --emp-gradient-end:   rgba(28, 48, 167, 0.9);
    --emp-accent:         #FFBE00;
    --emp-turquoise:      #12D9BF;
    --emp-white:          #ffffff;
    --emp-container:      1280px;
    --emp-max-width:      1920px;
    --emp-font:           "EDF 2020", Inter, system-ui, sans-serif;
    --emp-margin-top:     147px;
    --emp-overflow-bot:   132px;
    --emp-illus-height:   320px; /* hauteur approximative de l'illustration */
}

/* --------------------------------------------------------------------------
   Section — pleine largeur, image de fond
   L'illustration déborde du container bleu vers le bas
   → la section a besoin d'espace pour l'accueillir
   -------------------------------------------------------------------------- */

.block-emplacement {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 16px;
    overflow: visible;
    margin-bottom: 300px;
}

/* --------------------------------------------------------------------------
   Container gradient — max-width 1280px centré, avec gradient
   Contient TOUT le contenu y compris l'illustration (position:relative)
   -------------------------------------------------------------------------- */

.emp__gradient-wrap {
    max-width: var(--emp-container);
    margin-inline: auto;
    padding: 108px;
    padding-bottom: 340px;
    box-sizing: border-box;
    background: linear-gradient(
        135deg,
        var(--emp-gradient-start) 0%,
        var(--emp-gradient-end)   100%
    );
    /* Contexte de positionnement pour l'illustration absolue */
    position: relative;
    transform: translateY(147px);
}

@media (max-width: 1024px) {
    .emp__gradient-wrap {
        padding-left: 32px;
        padding-right: 32px;
        padding-bottom: 240px;
    }
}

/* --------------------------------------------------------------------------
   Titre H2
   -------------------------------------------------------------------------- */

.emp__titre {
    font-family: var(--emp-font);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    color: var(--emp-white);
    margin: 0 0 48px;
    line-height: 1.15;
    max-width: 820px;
}

/* --------------------------------------------------------------------------
   2 colonnes
   -------------------------------------------------------------------------- */

.emp__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   Colonne gauche — texte + oiseaux
   -------------------------------------------------------------------------- */

.emp__col-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.emp__texte-intro {
    font-family: var(--emp-font);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
}

.emp__texte-intro p {
    margin-block: 0 1em;
}

.emp__texte-intro p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Oiseaux décoratifs
   -------------------------------------------------------------------------- */

.emp__oiseaux {
    position: relative;
    height: 140px;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.emp__oiseau {
    position: absolute;
}

.emp__oiseau--bleu {
    left: 20px;
    bottom: 0;
    width: 127px;
    height: auto;
}

.emp__oiseau--orange {
    right: 80px;
    top: 20px;
    width: 57px;
    height: auto;
}

/* --------------------------------------------------------------------------
   Colonne droite — titre liste + items
   -------------------------------------------------------------------------- */

.emp__col-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Titre liste — turquoise, 30px, ExtraBold, uppercase */

.emp__liste-titre {
    font-family: var(--emp-font);
    font-size: 1.875rem; /* 30px */
    font-weight: 800;
    text-transform: uppercase;
    color: var(--emp-turquoise);
    margin: 0 0 24px;
    line-height: 1.2;
}

/* Liste */

.emp__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Item : icône + texte */

.emp__liste-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Icône — pas de style, juste la taille */

.emp__item-icone {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.emp__item-icone img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Texte item — style par défaut hérité */

.emp__item-texte {
    color: var(--emp-white);
}

/* --------------------------------------------------------------------------
   Illustration 3D — dans le container, déborde en bas
   position: absolute sur .emp__gradient-wrap (qui est position:relative)
   -------------------------------------------------------------------------- */

.emp__illustration {
    position: absolute;
    bottom: 0;
    left: 50%;
    /* Décalage vers le bas pour sortir du container */
    transform: translateX(-50%) translateY(50%);
    width: min(880px, 85%);
    pointer-events: none;
    z-index: 2;

    padding-bottom: 170px;
}

.emp__illustration img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   ≥ 1920px
   -------------------------------------------------------------------------- */

@media (min-width: 1920px) {
    .emp__gradient-wrap {
        padding-inline: calc((var(--emp-max-width) - var(--emp-container)) / 2 + 1rem);
    }
}

/* --------------------------------------------------------------------------
   Tablette ≤ 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .emp__illustration {
        padding-bottom: 0;
    }
    .block-emplacement {
        --emp-margin-top: 80px;
        --emp-illus-height: 240px;
    }

    .emp__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .emp__oiseaux {
        height: 100px;
    }

    .emp__oiseau--bleu   { width: 90px; }
    .emp__oiseau--orange { width: 44px; }

    .emp__illustration {
        width: min(600px, 90%);
    }
}

/* --------------------------------------------------------------------------
   Mobile ≤ 640px
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .block-emplacement {
        --emp-margin-top: 48px;
        --emp-illus-height: 180px;
        padding-inline: 0;
    }

    .emp__gradient-wrap {
        padding-inline: 2rem;
        padding-top: 36px;
    }

    .emp__titre {
        font-size: 1.5rem;
        margin-bottom: 28px;
    }

    .emp__liste-titre {
        font-size: 1.3rem;
    }

    .emp__oiseaux {
        height: 70px;
    }

    .emp__oiseau--bleu   { width: 64px; left: 0; }
    .emp__oiseau--orange { width: 36px; right: 16px; top: 10px; }

    .emp__illustration {
        width: min(480px, 95%);
    }
}

/* --------------------------------------------------------------------------
   Accessibilité — mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .emp__illustration { transition: none; }
}

/* ==========================================================================
   Block : Docuthèque — Documents
   Fichier : resources/css/blocks/_docutheque-documents.css
   ========================================================================== */

.block-docutheque-documents {
    --dd-primary:   #1C30A8;
    --dd-secondary: #0073FF;
    --dd-border:    #0073FF;
    --dd-accent:    #FFBE00;
    --dd-tertiary:  #12D9BF;
    --dd-white:     #ffffff;
    --dd-font:      "EDF 2020", Inter, system-ui, sans-serif;
    padding-bottom: 2rem;
}

@media (min-width: 1024px) {

    .block-docutheque-documents {
        padding-bottom: 147px;
    }
}

/* --------------------------------------------------------------------------
   Grille 3 colonnes — hauteur égale
   -------------------------------------------------------------------------- */

.dd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Colonne générique
   -------------------------------------------------------------------------- */

.dd-col {
    
    border: 1px solid var(--dd-border);
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Col 1 — image de fond + overlay
   -------------------------------------------------------------------------- */

.dd-col--featured {
    background-color: var(--dd-primary);
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 280px;
}

.dd-col__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    gap: 16px;
}

.dd-col__featured-titre {
    font-family: var(--dd-font);
    color: var(--dd-white);
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.dd-col__featured-btn {
    flex-shrink: 0;
}

.dd-col__featured-btn:hover {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* --------------------------------------------------------------------------
   Col 2 & 3 — listes de documents
   -------------------------------------------------------------------------- */

.dd-col--list {
    padding: 24px 28px;
}

.dd-col__titre {
    font-size: 20px;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(18 217 191 / var(--tw-text-opacity, 1));
    font-weight: 700;
    margin: 0 0 20px;
}

/* --------------------------------------------------------------------------
   Liste de documents
   -------------------------------------------------------------------------- */

.dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dd-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--dd-border);
    font-family: var(--dd-font);
    color: var(--dd-primary);
}

.dd-list__item:first-child {
    border-top: none;
}

.dd-list__item:last-child {
    border-bottom: none;
}

.dd-list__nom {
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    flex: 1;
    min-width: 0;
}

.dd-list__dl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dd-accent);
    transition: color 0.2s, transform 0.2s;
    text-decoration: none;
}

.dd-list__dl:hover {
    color: var(--dd-secondary);
    transform: translateY(2px);
}

.dd-list__dl svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive ≤ 1024px — 2 colonnes (col1 + col2) puis col3 en dessous
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .dd-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .dd-col--featured {
        grid-column: 1;
        grid-row: 1;
        min-height: 240px;
    }

    .dd-col--list:first-of-type {
        grid-column: 2;
        grid-row: 1;
    }

    .dd-col--list:last-of-type {
        grid-column: 1 / -1;
        grid-row: 2;
    }

}

/* --------------------------------------------------------------------------
   Responsive ≤ 640px — 1 colonne
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .dd-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .dd-col--featured {
        grid-column: 1;
        grid-row: auto;
    }

    .dd-col--list:first-of-type,
    .dd-col--list:last-of-type {
        grid-column: 1;
        grid-row: auto;
    }


}

/* ==========================================================================
   Block : Contact Hero
   Fichier : resources/css/blocks/_contact-hero.css
   ========================================================================== */

.block-contact-hero {
    --ch-container:  1280px;
    --ch-bg:         #071777;
    --ch-form-bg:    #0073FF;
    --ch-font:       "EDF 2020", Inter, system-ui, sans-serif;
    --ch-section-py: 80px;
    /* Image : max 736px = 38.333% de 1920px */
    --ch-img-max:    736px;
    --ch-img-pct:    38.333%;
}

/* --------------------------------------------------------------------------
   Bloc — évasion du container parent, fond uni
   -------------------------------------------------------------------------- */

.block-contact-hero {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    overflow: hidden;
    background-color: var(--ch-bg);
    position: relative; /* ancre .ch__bg-image */
}

/* --------------------------------------------------------------------------
   Image de fond — positionnée INDÉPENDAMMENT du contenu
   - Collée au bord droit du viewport
   - Jamais plus large que min(736px, 38.333vw)
   - Au-delà de 1920px : reste calée comme dans un container 1920px à droite
   -------------------------------------------------------------------------- */

.ch__bg-image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* Largeur = min des deux contraintes */
    width: min(var(--ch-img-max), var(--ch-img-pct));
    background-size: cover;
    background-position: center top;
    z-index: 0;
    pointer-events: none;
}

/* Au-delà de 1920px : l'image ne doit plus coller au bord droit du viewport
   mais rester calée comme si le viewport faisait 1920px.
   right = (100vw - 1920px) / 2 */

@media (min-width: 1920px) {
    .ch__bg-image {
        right: calc((100vw - 1920px) / 2);
        width: var(--ch-img-max); /* fixe à 736px */
    }
}

/* --------------------------------------------------------------------------
   Container 1280px centré — tout le contenu vit ici
   -------------------------------------------------------------------------- */

.ch__container {
    position: relative;
    z-index: 1; /* passe au-dessus de l'image */
    width: 100%;
    max-width: var(--ch-container);
    margin-inline: auto;
    padding-inline: 2rem;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Body — flex 50/50
   -------------------------------------------------------------------------- */

.ch__body {
    display: flex;
    align-items: stretch;
    min-height: 600px;
    gap: 0;
}

/* --------------------------------------------------------------------------
   Col gauche — texte
   -------------------------------------------------------------------------- */

.ch__col-left {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-block: var(--ch-section-py);
    padding-right: 60px;
}

.ch__surtitre {
    font-family: var(--ch-font);
    color: #FFBE00;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.ch__titre  { color: #ffffff; margin: 0 0 24px; }

.ch__texte  { color: #ffffff; line-height: 36px; font-size: 30px;max-width: 447px; }

.ch__texte p { margin: 0 0 1em;font-weight: 600;font-size: 30px; line-height: 36px; }

.ch__texte p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Col droite — formulaire
   -------------------------------------------------------------------------- */

.ch__col-right {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    align-items: center;
    padding-block: var(--ch-section-py);
    padding-top: 150px;
}

.ch__form-wrap {
    background: var(--ch-form-bg);
    padding: 36px 40px;
    width: 100%;
}

.ch__form-wrap form p {
    margin: 0;
}

.ch__form-titre {
    font-family: var(--ch-font);
    color: #ffffff;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ch__form-texte {
    font-family: var(--ch-font);
    color: #ffffff;
    line-height: 1.55;
    margin: 0 0 28px;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   CF7 — champs
   -------------------------------------------------------------------------- */

.ch__form-content .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ch__form-content .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.ch__form-content br { display: none !important; }

.ch__form-content input[type="text"],
.ch__form-content input[type="email"],
.ch__form-content input[type="tel"],
.ch__form-content textarea {
    font-family: var(--ch-font) !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: background 0.2s !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
         appearance: none !important;
}

.ch__form-content input::-moz-placeholder, .ch__form-content textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 1) !important;
}

.ch__form-content input::placeholder,
.ch__form-content textarea::placeholder {
    color: rgba(255, 255, 255, 1) !important;
}

.ch__form-content input:focus,
.ch__form-content textarea:focus {
    background: rgba(255, 255, 255, 0.22) !important;
}

.ch__form-content select {
    font-family: var(--ch-font) !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    background-color: rgba(7, 23, 119, 0.75) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFBE00'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 22px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 44px 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
         appearance: none !important;
}

.ch__form-content select:focus {
    background-color: rgba(7, 23, 119, 0.9) !important;
}

.ch__form-content select option {
    color: #071777 !important;
    background: #fff !important;
}

.ch__form-content textarea {
    resize: vertical !important;
    max-height: 120px !important;
}

.ch__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ch__form-content .wpcf7-submit,
.ch__form-content input[type="submit"] {
    display: block !important;
    margin-left: auto !important;
    margin-top: 4px !important;
}

.ch__form-content .wpcf7-not-valid-tip {
    font-size: 0.75rem !important;
    color: #FFBE00 !important;
}

.ch__form-content .wpcf7-response-output {
    font-family: var(--ch-font) !important;
    font-size: 0.85rem !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
    background: rgba(255,255,255,0.1) !important;
}

/* --------------------------------------------------------------------------
   ≤ 1024px — empilement vertical
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .block-contact-hero { --ch-section-py: 60px; }

    /* Image passe derrière le contenu empilé */
    .ch__bg-image {
        top: 0;
        height: 50%; /* visible seulement sur la moitié haute */
        width: 100%;
        right: 0;
        opacity: 0.3;
        display: none;
    }

    .ch__body {
        flex-direction: column;
        min-height: auto;
    }

    .ch__col-left,
    .ch__col-right {
        flex: 0 0 auto;
        width: 100%;
    }

    .ch__col-left {
        padding-block: var(--ch-section-py);
        padding-right: 0;
    }

    .ch__col-right {
        padding-block: 0;
        padding-bottom: var(--ch-section-py);
        padding-top: 0;
    }
}

/* --------------------------------------------------------------------------
   ≤ 640px — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .block-contact-hero { --ch-section-py: 48px; }
    .ch__form-wrap { padding: 24px 20px; }
    .ch__form-row { grid-template-columns: 1fr; }
}

/* Formulaire */

/* Select "Qui êtes-vous" — pleine largeur, fond primary-dark */

.ch__form-content .cf7-select-full {
    background-color: rgba(7, 23, 119, 0.6) !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* Select "Sujet" dans la ligne 2 colonnes */

.ch__form-content .cf7-select-half {
    background-color: rgba(7, 23, 119, 0.6) !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* Wraps CF7 — supprimer les marges par défaut */

.ch__form-content .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* Supprimer le br que CF7 insère entre les champs */

.ch__form-content br { display: none !important; }

/* Aligner le submit à droite */

.ch__form-content .wpcf7-submit {
    display: block !important;
    margin-left: auto !important;
}

/* Les <p> générés par CF7 dans les lignes 2 colonnes */

.ch__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Le <p> wrapper CF7 dans ch__form-row devient transparent */

.ch__form-row > p {
    display: contents; /* le <p> disparaît visuellement, ses enfants participent au grid */
}

/* Chaque wpcf7-form-control-wrap prend une cellule */

.ch__form-row .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* ==========================================================================
   Block : FAQ — Accordéon
   Fichier : resources/css/blocks/_faq.css

   Maquette :
   - Fond global : #1C30A8 (bleu intermédiaire)
   - Fermé  : titre turquoise (#12D9BF), icône + turquoise
   - Ouvert : ligne séparatrice turquoise, titre blanc, texte blanc, icône − turquoise
   ========================================================================== */

.block-faq {
    --faq-bg:        #1C30A8;
    --faq-turquoise: #12D9BF;
    --faq-white:     #ffffff;
    --faq-border:    #12D9BF;
    --faq-font:      "EDF 2020", Inter, system-ui, sans-serif;
    --faq-gap:       4px;    /* espace entre les items */
    --faq-px:        32px;   /* padding horizontal interne */
    --faq-py:        22px;   /* padding vertical du header */
}

.block-faq .container {
    padding: 0px !important;
}

.block-faq {
    padding-bottom: 2rem;
}

@media (min-width: 1024px) {

    .block-faq {
        padding-bottom: 80px;
    }
}

.faq__cta-arrow-wrap {
    margin-top: 80px;
    display: flex;
    justify-content: flex-end;
}

 
#site-header > .container > .faq__cta-arrow-wrap {
    height: 100%;
}

@media (max-width: 781px) {
    .footer-bandeau-content .faq__cta-arrow-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.block-faq {
    padding-bottom: 100px;
}

@media (min-width: 1280px) {

    .block-faq {
        padding-bottom: 250px;
    }
}

/* --------------------------------------------------------------------------
   Liste
   -------------------------------------------------------------------------- */

.faq__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Item
   -------------------------------------------------------------------------- */

.faq__item {
    background-color: var(--faq-bg);
}

/* --------------------------------------------------------------------------
   dt — transparent, le bouton gère tout
   -------------------------------------------------------------------------- */

.faq__dt {
    display: block;
}

/* --------------------------------------------------------------------------
   Header (bouton)
   -------------------------------------------------------------------------- */

.faq__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--faq-py) var(--faq-px);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    gap: 24px;
    outline: none;
}

/* --------------------------------------------------------------------------
   Titre — turquoise en fermé
   -------------------------------------------------------------------------- */

.faq__titre {
    font-family: var(--faq-font);
    font-weight: 700;
    color: var(--faq-turquoise);
    line-height: 1.3;
    flex: 1;
    transition: color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Icône + / −
   -------------------------------------------------------------------------- */

.faq__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.faq__icon--minus { display: none; }

.faq__icon--plus  { display: block; }

/* --------------------------------------------------------------------------
   Contenu — caché par défaut
   -------------------------------------------------------------------------- */

.faq__content {
    margin: 0;
    overflow: hidden;
}

.faq__content[hidden] {
    display: none;
}

.faq__texte {
    padding: 32px;
    font-family: var(--faq-font);
    line-height: 1.75;
    color: var(--faq-white);
}

.faq__texte p {
    margin-block: 0 1em;
}

.faq__texte p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   État OUVERT — .faq__item--open
   -------------------------------------------------------------------------- */

/* Ligne séparatrice turquoise entre header et contenu */

.faq__item--open .faq__header {
    border-bottom: 1px solid var(--faq-border);
}

/* Icône : − visible, + caché */

.faq__item--open .faq__icon--minus { display: block; }

.faq__item--open .faq__icon--plus  { display: none; }

/* --------------------------------------------------------------------------
   Responsive ≤ 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .block-faq {
        --faq-px: 20px;
        --faq-py: 18px;
    }
}

/* --------------------------------------------------------------------------
   Accessibilité — mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .faq__titre { transition: none; }
}

/* ==========================================================================
   Block : Listing Actualités — CSS Grid 3×N carrés + Load More AJAX
   Fichier : resources/css/blocks/_listing-actualites.css
   ========================================================================== */

.block-listing-actualites {
    --lactu-primary:      #1C30A8;
    --lactu-primary-dark: #071777;
    --lactu-secondary:    #0073FF;
    --lactu-accent:       #FFBE00;
    --lactu-white:        #ffffff;
    --lactu-font:         "EDF 2020", Inter, system-ui, sans-serif;
    --lactu-gap:          16px;
}

/* --------------------------------------------------------------------------
   Layout CSS Grid — cellules carrées 1/1
   -------------------------------------------------------------------------- */

.lactu-grid,
.lactu-more-batch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lactu-gap);
}

.lactu-more-batch {
    margin-top: var(--lactu-gap);
}

.lactu-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Images intercalées
   -------------------------------------------------------------------------- */

.lactu-image-wrap {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.lactu-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

.lactu-image-wrap--placeholder {
    background: linear-gradient(135deg, #e6eeff 0%, #dde3f0 100%);
}

/* --------------------------------------------------------------------------
   Card article
   -------------------------------------------------------------------------- */

.lactu-card {
    background-color: var(--lactu-secondary);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: background-color 0.25s ease;
}

.lactu-card:hover {
    
    background-color: rgba(0, 115, 255, .5) !important;
}

.lactu-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px 24px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.lactu-card__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.lactu-card__date {
    font-family: var(--lactu-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--lactu-primary-dark);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.lactu-card:hover .lactu-card__date {
    color: var(--lactu-accent);
}

.lactu-card__titre {
    font-family: var(--lactu-font);
    font-size: 30px;
    font-weight: 800;
    color: var(--lactu-white);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lactu-card__excerpt {
    font-family: var(--lactu-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--lactu-white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden; 
    margin-top: auto;
}

.lactu-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    font-family: var(--lactu-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--lactu-white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: gap 0.2s ease;
    flex-shrink: 0;
}

.lactu-card:hover .lactu-card__footer {
    /* gap: 16px; */
}

.lactu-btn-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lactu-card:hover .lactu-btn-arrow {
    /* transform: translateX(4px); */
}

.lactu-btn-arrow path {
    transition: stroke 0.25s ease;
    stroke: #071777;
}

.lactu-card:hover .lactu-btn-arrow path {
    stroke: var(--lactu-accent);
}

/* --------------------------------------------------------------------------
   Container des batches AJAX
   -------------------------------------------------------------------------- */

.lactu-more-container {
    margin-top: var(--lactu-gap);
}

/* --------------------------------------------------------------------------
   Bouton "Voir plus"
   -------------------------------------------------------------------------- */

.lactu-loadmore-wrap {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.lactu-loadmore-wrap[hidden] {
    display: none;
}

.lactu-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    color: var(--lactu-accent);
    font-family: var(--lactu-font);
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 8px 0;
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.lactu-loadmore-btn--loading {
    opacity: 0.6;
    cursor: wait;
}

/* --------------------------------------------------------------------------
   État vide
   -------------------------------------------------------------------------- */

.lactu-empty {
    font-family: var(--lactu-font);
    color: var(--lactu-white);
    text-align: center;
    padding: 48px;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .lactu-card__titre {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .lactu-grid,
    .lactu-more-batch {
        grid-template-columns: 1fr;
    }

    .lactu-item {
        aspect-ratio: 4 / 3;
    }

    .lactu-item--img {
        display: none;
    }

    .lactu-card__titre {
        font-size: 20px;
    }

    .lactu-card__link {
        padding: 24px 20px 20px;
    }
}

#listing-actualites {
    padding-bottom: 2rem;
}

@media (min-width: 640px) {

    #listing-actualites {
        padding-bottom: 50px;
    }
}

@media (min-width: 1024px) {

    #listing-actualites {
        padding-bottom: 100px;
    }
}

/* Import des styles globaux */

@font-face {
    font-family: 'EDF 2020';
    src: url('fonts/EDF2020ExtraBold.woff2') format('woff2'),
        url('fonts/EDF2020ExtraBold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EDF 2020';
    src: url('fonts/EDF2020-Bold.woff2') format('woff2'),
        url('fonts/EDF2020-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EDF 2020';
    src: url('fonts/EDF2020.woff2') format('woff2'),
        url('fonts/EDF2020.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EDF 2020 Soft';
    src: url('fonts/EDF2020-Italic.woff2') format('woff2'),
        url('fonts/EDF2020-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

html {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

body {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    font-family: "EDF 2020", Inter, system-ui, sans-serif;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 400;
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
}

h1, h2, h3, h4, h5, h6 {
    font-family: "EDF 2020", Inter, system-ui, sans-serif;
    font-weight: 800 !important;
}

h1 {
    position: relative;
    padding-left: 33px;
    font-family: "EDF 2020", Inter, system-ui, sans-serif;
    font-size: 30px !important;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 30px !important;
    --tw-text-opacity: 1;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1));
}

h1::before {
    content: '';
    position: absolute;
    left: 0;  
    top: calc(50% - 10.5px);
    width: 21px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cg fill='%230073FF' data-name='Groupe 194'%3E%3Cpath d='M0 0h5v5H0z' data-name='Rectangle 92'/%3E%3Cpath d='M0 8h5v5H0z' data-name='Rectangle 97'/%3E%3Cpath d='M0 16h5v5H0z' data-name='Rectangle 100'/%3E%3Cpath d='M8 0h5v5H8z' data-name='Rectangle 94'/%3E%3Cpath d='M8 8h5v5H8z' data-name='Rectangle 98'/%3E%3Cpath d='M8 16h5v5H8z' data-name='Rectangle 101'/%3E%3Cpath d='M16 0h5v5h-5z' data-name='Rectangle 95'/%3E%3Cpath d='M16 8h5v5h-5z' data-name='Rectangle 96'/%3E%3Cpath d='M16 16h5v5h-5z' data-name='Rectangle 99'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

main h2 {
    margin-bottom: 2rem;
    font-size: 40px;
    font-weight: 800;
    line-height: 40px;
}

@media (min-width: 782px) {

    main h2 {
        font-size: 60px;
        line-height: 60px;
    }
}

@media (min-width: 1024px) {

    main h2 {
        margin-bottom: 66px;
    }
}

main h3 {
    margin-bottom: 1rem;
    font-size: 30px;
    font-weight: 800;
    line-height: 30px;
}

p, ul, li, a, span, button, input, textarea, select, option, label, legend, cite, code, pre, kbd, samp, var, mark, time, details, summary, figcaption, caption, colgroup, col, output, progress, meter, dialog, iframe, embed, object, video, audio, canvas, svg, math, article, aside, footer, header, main, nav, section, blockquote, figure, hr, address, form {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

main p {
    margin-bottom: 24px;
}

main p:last-child {
    margin-bottom: 0;
}

a:hover {
    color: inherit;
}

.cta-primary {
    width: -moz-fit-content;
    width: fit-content;
    --tw-bg-opacity: 1;
    background-color: rgb(255 190 0 / var(--tw-bg-opacity, 1));
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
    text-decoration-line: none !important;
}

.cta-arrow {
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 62px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1));
    text-decoration-line: none !important;
}

.cta-arrow:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(0 115 255 / var(--tw-text-opacity, 1)) !important;
}

.cta-arrow:hover a {
    --tw-text-opacity: 1;
    color: rgb(0 115 255 / var(--tw-text-opacity, 1));
}

.cta-arrow::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42.172' height='12.649' viewBox='0 0 42.172 12.649'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 12.649h42.172V0H0Z' data-name='Tracé 27'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 32'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 31'%3E%3Cg data-name='Groupe 29'%3E%3Cpath fill='none' stroke='%23ffbe00' stroke-width='2' d='M0 6.325h41.036' data-name='Tracé 25'/%3E%3C/g%3E%3Cg data-name='Groupe 30'%3E%3Cpath fill='none' stroke='%23ffbe00' stroke-width='2' d='m34.843.567 6.193 5.759-6.193 5.757' data-name='Tracé 26'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 50%;
    width: 42px;
    height: 13px;
    transform-origin: left center;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.cta-arrow:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42.172' height='12.649' viewBox='0 0 42.172 12.649'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 12.649h42.172V0H0Z' data-name='Tracé 27'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 32'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 31'%3E%3Cg data-name='Groupe 29'%3E%3Cpath fill='none' stroke='%230073FF' stroke-width='2' d='M0 6.325h41.036' data-name='Tracé 25'/%3E%3C/g%3E%3Cg data-name='Groupe 30'%3E%3Cpath fill='none' stroke='%230073FF' stroke-width='2' d='m34.843.567 6.193 5.759-6.193 5.757' data-name='Tracé 26'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    transform: translateY(-50%) scaleX(1.25);
}

.lactu-card__footer svg,
.la-btn-inscrire svg,
.article-card-read-more svg,
.actualites-controls svg {
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.lactu-card__footer:hover svg,
.la-btn-inscrire:hover svg,
.article-card-read-more:hover svg,
.actualites-controls:hover svg {
    transform: scaleX(1.25);
}

.chapeau {
    font-size: 30px;
    line-height: 30px;
}

footer a,
footer p {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

footer .cta-primary {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

.chapeau {
    font-size: 30px;
    line-height: 30px;
}

.block-porteurs-projet ul li {
    padding-left: 30px;
    position: relative;
    
}

.block-porteurs-projet ul li::before {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.264' height='10.116' viewBox='0 0 20.264 10.116'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 10.116h20.264V0H0Z' data-name='Tracé 229'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 166'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 165'%3E%3Cg data-name='Groupe 164'%3E%3Cpath fill='%2300b8f1' d='M14.742 10.116a40 40 0 0 1-4.057-.205C5.564 9.383 1.997 7.969.629 5.931a4.13 4.13 0 0 1-.38-3.662l.23-.43A3.9 3.9 0 0 1 4.117 0a8 8 0 0 1 .837.045c6.307.65 14.088 7.529 15.308 9.636a30.5 30.5 0 0 1-5.52.435' data-name='Tracé 228'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    width: 20px;
    height: 10px;
    top: 12px;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.full-width {
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw;
}

figure img {
    height: 100% !important;
    width: 100% !important;
    -o-object-fit: cover;
       object-fit: cover;
}

.bg-linear {
    background:linear-gradient(135deg,#061674 0%,#1C30A7 100%);
}

/* Supprimer l'outline au clic souris */

a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Garder l'outline à la navigation clavier */

a:focus-visible {
    outline: 1px solid #0073FF;
    outline-offset: 2px;
}

/* ===================================
   NAVIGATION ET MENU MOBILE
   =================================== */

/* Menu burger */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
    height: 40px;

    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: #FFF;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    display: block;
}

/* Animation du burger en croix */

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Variables pour le menu */

:root {
    --header-height: 72px;
    --secondary-menu-height: 48px;
}

/* main margin-top est géré dynamiquement par le JavaScript */

/* Menu mobile */

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le scroll sur le conteneur principal */
}

/* Ajustement géré par JavaScript dynamiquement */

/* Conteneur de scroll pour le menu principal */

.mobile-menu-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    height: 100%; /* Force le flex à calculer la hauteur correctement */
    min-height: 0; /* Permet au contenu de déborder et déclencher le scroll */
    scrollbar-width: thin;
}

.mobile-menu.active {
    transform: translateX(0);
}

/* Contenu du menu mobile */

.mobile-menu .mobile-menu-content {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Menu secondaire dans le menu mobile */

.mobile-secondary-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.mobile-secondary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-secondary-item {
    margin: 0;
}

.mobile-secondary-item a {
    display: block;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-secondary-item a:hover {
    color: white;
}

/* Navigation principale mobile */

.mobile-menu .mobile-nav {
    flex: 1;
}

.mobile-menu .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu .mobile-nav li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu .mobile-nav a {
    display: block;
    padding: 1rem 0;
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mobile-menu .mobile-nav a:hover {
    color: #3b82f6;
}

/* Gestion des sous-menus sur mobile */

.mobile-menu .menu-item-has-children {
    position: relative;
}

.mobile-menu .menu-item-has-children > a {
    padding-right: 3rem;
}

.mobile-menu .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 3rem;
    height: 62px;
    background: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-menu .submenu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu .submenu-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.mobile-menu .submenu-toggle.active svg {
    transform: rotate(180deg);
}

/* Sous-menus mobiles - logique simple */

.mobile-menu .sub-menu {
    display: none;
    background-color: rgba(255, 255, 255, 0.05);
    margin: 0;
    margin-left: 1rem;
    padding-left: 1rem;
    overflow: hidden;
}

/* Affichage du sous-menu - UNE SEULE règle basée sur la classe active du sous-menu */

.mobile-menu .sub-menu.active {
    display: flex;
    flex-direction: column;
    height: auto;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-menu .sub-menu li {
    border-bottom: none;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    flex-shrink: 0;
}

.mobile-menu .sub-menu a {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Accès rapides */

.quick-actions-rail {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background-color: white;
    color: #374151;
    text-decoration: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    min-width: 80px;
}

.quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    background-color: #f3f4f6;
}

.quick-action-icon {
    font-size: 1.5rem;
}

.quick-action-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Accès rapides dans le menu mobile */

.mobile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.mobile-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.mobile-quick-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mobile-quick-action .quick-action-icon {
    font-size: 1.25rem;
}

.mobile-quick-action .quick-action-label {
    font-size: 0.875rem;
    color: white;
}

/* Footer du menu mobile */

.mobile-menu .mobile-menu-footer {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Accès rapides dans le menu mobile */

.mobile-menu .mobile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.mobile-menu .mobile-quick-actions .quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.mobile-menu .mobile-quick-actions .quick-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* État du body quand le menu est ouvert */

body.menu-open {
    overflow: hidden;
}

/* Header sticky et scroll */

#site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
}

#site-header.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Navigation desktop */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1rem; 
}

@media (min-width: 1024px) {

    .desktop-nav ul {
        gap: 22px;
    }
}

@media (min-width: 1280px) {

    .desktop-nav ul {
        gap: 60px;
    }
}

.desktop-nav a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    position: relative;
}

.desktop-nav a:hover {
    color: #3b82f6;
}

/* Sous-menus desktop */

.desktop-nav .menu-item-has-children {
    position: relative;
}

.desktop-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    z-index: 100;
}

.desktop-nav .menu-item-has-children:hover .sub-menu {
    display: block;
}

.desktop-nav .sub-menu li {
    margin: 0;
}

.desktop-nav .sub-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #374151;
    transition: background-color 0.2s ease;
}

.desktop-nav .sub-menu a:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
}

/* Responsive */

@media (max-width: 1023px) {
    /* @media (max-width: 781px) { */
    .mobile-menu-toggle {
        display: flex;
    }
    
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
}

@media (min-width: 1024px) {
    /* @media (min-width: 782px) { */
    .mobile-menu-toggle {
        display: none;
    }
    
    .desktop-nav {
        display: flex;
    }
    
    .mobile-menu {
        display: none;
    }
}

/* Accessibilité */

.mobile-menu-toggle:focus,
.submenu-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Animations d'entrée pour les éléments du menu */

.mobile-menu .mobile-nav li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.3s ease-out forwards;
}

.mobile-menu .mobile-nav li:nth-child(1) { animation-delay: 0.1s; }

.mobile-menu .mobile-nav li:nth-child(2) { animation-delay: 0.2s; }

.mobile-menu .mobile-nav li:nth-child(3) { animation-delay: 0.3s; }

.mobile-menu .mobile-nav li:nth-child(4) { animation-delay: 0.4s; }

.mobile-menu .mobile-nav li:nth-child(5) { animation-delay: 0.5s; }

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===================================
   HEADER ET NAVIGATION DESKTOP
   =================================== */

/* Structure du header */

#site-header {
    height: 112px;
}

#site-header > .container, 
#site-header > .container > .flex {
    height: 100%;
}

#menu-menu-principal li > a {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {

    #menu-menu-principal li > a {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

#menu-menu-principal li > a:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1)) !important;
}

/* Styles desktop uniquement */

@media screen and (min-width: 782px) {
    
    /* Container du header */
    #site-header > .container {
        position: relative;
    }
    
    /* Reset des positions pour éviter les conflits */
    .menu-item, 
    .menu-item a {
        position: initial !important;
    }
    
    .sub-menu {
        transform: none !important;
    }
    
    /* Menu principal */
    #menu-menu-principal {
        height: var(--header-height);
    }
    
    #menu-menu-principal > li {
        height: 100%;
        display: block;
        width: auto;
        margin: 0;
    }
    
    #menu-menu-principal li > a {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-width: 80px;
    }
    
    /* Sous-menus desktop */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu {
        display: none;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: #005c98;
        color: #fff;
        z-index: 1000;
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 32px 20%;
        border-radius: 0;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
        
        /* Layout flexbox */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        
        /* Transition */
        transition: opacity 0.5s ease;
    }
    
    /* Affichage au hover/focus */
    #menu-menu-principal > li.menu-item-has-children:hover > .sub-menu,
    #menu-menu-principal > li.menu-item-has-children:focus-within > .sub-menu {
        display: flex;
        opacity: 1;
    }
    
    /* Affichage persistant au clic */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu.clicked-open {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Items du sous-menu */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li {
        flex: 1 1 240px;
        margin-bottom: 0;
    }
    
    /* Liens du sous-menu */
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a {
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
        background: none;
        border: none;
        display: inline-block;
        padding: 0 6px;
        text-decoration: none;
    }
    
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a:hover,
    #menu-menu-principal > li.menu-item-has-children > .sub-menu > li > a:focus {
        text-decoration: underline;
    }
}

/* Bandeau du menu complexe */

.complex-menu-banner {
    background-color: #234C9B;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: 50px; /* Fixed height */
    z-index: 40; /* Lower z-index than container */
}

@media (max-width: 781px) {
    .complex-menu-banner {
        height: auto;
    }
}

/* Conteneur sticky pour bandeau + header complexe */

.is-sticky-header-container.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* S'assurer que le header reste dans le flux du conteneur sticky */

.is-sticky-header-container.is-sticky #site-header {
    position: relative;
    z-index: 1;
}

/* Header simple sticky */

header#site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* Navigation secondaire */

.secondary-nav {
    height: 100%;
    margin: auto;
}

.secondary-nav ul {
    height: 100%;
    padding: 0;
    gap: 16px;
    list-style: none;
    justify-content: center;
    align-items: center;
    margin: auto;
    row-gap: 0;
}

.secondary-menu-item {
    display: inline-block;
    margin: 0;
}

.secondary-menu-item a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: opacity 0.2s ease;
}

.secondary-menu-item a:hover {
    opacity: 0.8;
}

/* Sous-menus du menu complexe */

.complex-menu-item {
    position: relative;
}

.complex-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 200px;
    z-index: 100;
}

.complex-menu-item:hover .complex-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.complex-submenu ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    margin: 0;
    list-style: none;
}

.complex-submenu li {
    margin: 0;
}

.complex-submenu a {
    color: #374151;
    text-decoration: none;
    padding: 0.5rem 0;
    display: block;
    transition: color 0.2s ease;
}

.complex-submenu a:hover {
    color: #234C9B;
}

/* Responsive pour les sous-menus */

@media (max-width: 1023px) {
    .complex-submenu ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 781px) {
    .complex-submenu ul {
        grid-template-columns: 1fr;
    }
}

/* Animation d'apparition/disparition du conteneur sticky */

.is-sticky-header-container.is-sticky,
header#site-header.is-sticky {
    transition: transform 0.3s ease;
}

/* État caché (scroll vers le bas) */

.is-sticky-header-container.is-sticky.header-hidden,
header#site-header.is-sticky.header-hidden,
.is-sticky-header-container.is-sticky[style*="translateY(-100%)"],
header#site-header.is-sticky[style*="translateY(-100%)"] {
    transform: translateY(-100%);
}

/* État visible (scroll vers le haut ou en haut de page) */

.is-sticky-header-container.is-sticky.header-visible,
header#site-header.is-sticky.header-visible,
.is-sticky-header-container.is-sticky[style*="translateY(0)"],
header#site-header.is-sticky[style*="translateY(0)"] {
    transform: translateY(0);
}

/* Composants globaux du thème Zoorit */

/* ===== HEADER ===== */

#site-header {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.contact-form #site-header {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info #site-header {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block #site-header.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 781px) {
    
    .contact-form #site-header,
    .contact-info #site-header {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form #site-header,
    .contact-info #site-header {
        padding: 1.25rem;
    }
}

#site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-logo {
    max-width: 130px;
}

@media (min-width: 640px) {

    .site-logo {
        max-width: none;
    }
}

/* Logo */

.site-logo img {
    height: 100%;
    width: 100%;
    max-width: 130px;
    -o-object-fit: contain;
       object-fit: contain;
}

@media (min-width: 640px) {

    .site-logo img {
        max-width: none;
    }
}

.site-logo a {
    display: block;
    height: 53px;
    width: 175px;
    transition-duration: 200ms;
}

@media (min-width: 1024px) {

    .site-logo a {
        height: 53px;
        width: 200px;
    }
}

/* Navigation principale */

.main-nav ul {
    display: flex;
    align-items: center;
}

.main-nav ul > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

 
#site-header > .container > .main-nav ul {
    height: 100%;
}

@media (max-width: 781px) {
    .footer-bandeau-content .main-nav ul {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-bandeau-content .main-nav ul > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

.main-nav li {
    position: relative;
}

.main-nav a {
    position: relative;
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.main-nav a:hover {
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
}

.main-nav a::after {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 0.125rem;
    width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    content: '';
}

.main-nav a:hover::after {
    width: 100%;
}

/* Sous-menus */

.main-nav .sub-menu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 50;
    min-width: 12rem;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    opacity: 0;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.contact-form .main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block .main-nav .sub-menu.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .bg-white.rounded-lg.main-nav .sub-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 781px) {
    
    .contact-form .main-nav .sub-menu,
    .contact-info .main-nav .sub-menu {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .main-nav .sub-menu,
    .contact-info .main-nav .sub-menu {
        padding: 1.25rem;
    }
}

.group:hover .main-nav .sub-menu {
    visibility: visible;
    opacity: 1;
}

.main-nav .sub-menu li {
    display: block;
}

.main-nav .sub-menu a {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.footer-bandeau-content .main-nav .sub-menu a {
    font-size: 0.875rem;
}

.main-nav .sub-menu a:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.main-nav .sub-menu a::after {
    display: none;
}

/* Gestion des sous-menus avec CSS pur */

.main-nav .menu-item-has-children {
    position: relative;
}

.main-nav .menu-item-has-children > a::after {
    margin-left: 0.25rem;
    display: inline-block;
    height: 0px;
    width: 0px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-color: transparent;
    --tw-border-opacity: 1;
    border-top-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    content: '';
}

.main-nav .menu-item-has-children:hover > a::after {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-top-color: rgb(28 48 168 / var(--tw-border-opacity, 1));
}

/* Menu mobile */

.mobile-menu-toggle {
    border-radius: 0.375rem;
    padding: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.mobile-menu {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.contact-form .mobile-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .mobile-menu {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .mobile-menu h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .mobile-menu p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.contact-block .mobile-menu.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 781px) {
    
    .contact-form .mobile-menu,
    .contact-info .mobile-menu {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .mobile-menu,
    .contact-info .mobile-menu {
        padding: 1.25rem;
    }
}

.mobile-menu ul > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.mobile-menu ul {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mobile-menu li {
    display: block;
}

.mobile-menu a {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    display: block;
    border-radius: 0.375rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* ===== FOOTER ===== */

#site-footer {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.footer-column h3 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
}

.member-info .footer-column h3 {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.footer-bandeau-content .footer-column h3 {
    font-weight: 600;
}

.footer-column ul > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.footer-column a {
    display: block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.footer-column a:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ===== ACCÈS RAPIDES ===== */

.acces-rapide {
    display: block;
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

 
#site-header > .container > .acces-rapide {
    height: 100%;
}

.contact-block .bg-white.rounded-lg.acces-rapide {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 781px) {
    .footer-bandeau-content .acces-rapide {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.acces-rapide:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.acces-rapide img {
    height: 1.5rem;
    width: 1.5rem;
}

.acces-rapide svg {
    height: 1.5rem;
    width: 1.5rem;
}

/* ===== BOUTONS ===== */

.btn-primary {
    display: inline-flex;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.contact-block .bg-white.btn-primary.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.footer-bandeau-content .btn-primary {
    font-weight: 600;
}

.btn-primary:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-secondary {
    display: inline-flex;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.contact-block .bg-white.btn-secondary.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.footer-bandeau-content .btn-secondary {
    font-weight: 600;
}

.btn-secondary:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    border-radius: 0.5rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(28 48 168 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.member-info .btn-outline {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-block .bg-white.btn-outline.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.footer-bandeau-content .btn-outline {
    font-weight: 600;
}

.btn-outline:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ===== CARTES ===== */

.card {
    overflow: hidden;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.contact-form .card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info .card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-block .card.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .bg-white.card.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

@media (max-width: 781px) {
    
    .contact-form .card,
    .contact-info .card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    
    .contact-form .card,
    .contact-info .card {
        padding: 1.25rem;
    }
}

.card:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
}

.contact-info .card-footer {
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .card-footer h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .card-footer p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* ===== FORMULAIRES ===== */

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.footer-bandeau-content .form-label {
    font-size: 0.875rem;
}

.form-input {
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.form-input:focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.form-textarea {
    width: 100%;
    resize: vertical;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.form-textarea:focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
}

.form-textarea {
    min-height: 100px;
}

.form-select {
    width: 100%;
    border-radius: 0.375rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.form-select:focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
}

.form-button {
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

.footer-bandeau-content .form-button {
    font-weight: 600;
}

.form-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1));
}

/* ===== UTILITAIRES ===== */

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 82rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 781px) {
    /* .main-nav {
        @apply hidden;
    }
    
    .mobile-menu-toggle {
        @apply flex;
    } */
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* @media (min-width: 782px) {
    .mobile-menu-toggle {
        @apply hidden;
    }
    
    .mobile-menu {
        @apply hidden;
    }
} */

/* ===== ANIMATIONS ===== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

/* ===== FOCUS STATES ===== */

.focus-visible:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

/* ===== PRINT ===== */

@media print {
    .mobile-menu-toggle,
    .mobile-menu,
    .acces-rapide {
        display: none;
    }
    
    #site-header {
        position: static;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
        background-color: transparent;
        --tw-text-opacity: 1;
        color: rgb(31 41 55 / var(--tw-text-opacity, 1));
    }
}

#site-footer {
    position: relative;
}

.avis-question {
    top: 128px;
    right: 1rem;
    z-index: 50;
    display: none;
    height: auto !important;
    width: 100px;
}

@media (min-width: 782px) {

    .avis-question {
        display: block;
        height: 173px;
        width: 202px;
    }
}

.avis-question {
    position: fixed;
    /* top-[173px] right-4 */
}

.avis-question a {
    display: block;
}

.avis-question img {
    height: auto !important;
    width: 100px;
    -o-object-fit: contain;
       object-fit: contain;
}

@media (min-width: 782px) {

    .avis-question img {
        height: 173px;
        width: 202px;
    }
}

.avis-question-mobile,
.avis-question-mobile img {
    max-height: 100%;
    height: 100%;
    width: 125px;
}

@media (min-width: 640px) {

    .avis-question-mobile,
.avis-question-mobile img {
        width: 150px;
    }
}

@media (min-width: 1280px) {

    .avis-question-mobile,
.avis-question-mobile img {
        width: 173px;
    }
}

.avis-question-mobile,
.avis-question-mobile img {
    display: block;
    position: initial;
    /* margin-left: 16px; */

    -o-object-fit: contain;

       object-fit: contain;
}

#hero-arrow:hover {
    cursor: pointer;
}

.grid-chiffres {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

.grid-chiffres .wp-block-columns {
    margin-top: 2rem;
}

.grid-chiffres .wp-block-column {
    text-align: center;
}

.services-block .grid-chiffres .wp-block-column h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.services-block .grid-chiffres .wp-block-column p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

.team-block .grid-chiffres .wp-block-column h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.team-block .grid-chiffres .wp-block-column p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 781px) {
    .team-block .grid-chiffres .wp-block-column h2 {
        font-size: 2rem;
    }
    
    .team-block .grid-chiffres .wp-block-column p {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .team-block .grid-chiffres .wp-block-column h2 {
        font-size: 1.75rem;
    }
    
    .team-block .grid-chiffres .wp-block-column p {
        font-size: 1rem;
    }
}

.contact-block .grid-chiffres .wp-block-column h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.contact-block .grid-chiffres .wp-block-column p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 781px) {
    .contact-block .grid-chiffres .wp-block-column h2 {
        font-size: 2rem;
    }
    
    .contact-block .grid-chiffres .wp-block-column p {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .contact-block .grid-chiffres .wp-block-column h2 {
        font-size: 1.75rem;
    }
    
    .contact-block .grid-chiffres .wp-block-column p {
        font-size: 1rem;
    }
}

@media (min-width: 782px) {

    .grid-chiffres .wp-block-column {
        text-align: left;
    }
}

.grid-chiffres .wp-block-image img {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 781px) {
    .grid-chiffres {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================================
   Hero Home — parallaxe fixed
   Le hero est retiré du flux (position: fixed).
   La section suivante est poussée vers le bas pour compenser,
   puis vient couvrir le hero lors du scroll.
   ============================================================ */

:root {
    --hero-nav-h: 112px;
}

.hero-home {
    position: fixed !important;
    top: var(--hero-nav-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--hero-nav-h));
    overflow: hidden;

    /* Centrage vertical du contenu */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#site-footer {
    z-index: 99;
}

.home .entry-content .bandeau-block + .bandeau-block > div {
    background-color: #FFF;
}

/* La section immédiatement après le hero compense sa hauteur
   et passe par-dessus lui lors du scroll */

.home .entry-content > .bandeau-block:first-child + .bandeau-block {
    margin-top: calc(100vh - var(--hero-nav-h));
    position: relative;
    z-index: 2;
}

/* Toutes les sections suivantes passent également par-dessus */

.home .entry-content section ~ * {
    position: relative;
    z-index: 2;
}

.hero-home-baseline {
    width: 360px;
    max-width: 100%;
    margin-bottom: 2rem !important;
}

@media (min-width: 782px) {

    .hero-home-baseline {
        margin-bottom: 0px !important;
    }
}

/* ------------------------------------------------------------
   Flèche de scroll
   ------------------------------------------------------------ */

.hero-home .arrow-down {
    position: absolute;
    bottom: 1rem;
    left: calc(50% - 30px);
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-home .arrow-down:hover {
    transform: translateY(10px);
}

/* ------------------------------------------------------------
   Colonnes Gutenberg internes
   ------------------------------------------------------------ */

.hero-home .wp-block-columns {
    gap: 2rem;
}

@media (min-width: 782px) {

    .hero-home .wp-block-columns {
        gap: 110px;
    }
}

.hero-home .wp-block-columns .wp-block-column:first-child {
    flex-basis: 41%;
}

.hero-home .wp-block-columns .wp-block-column:last-child {
    flex-basis: 59%;
}

/* ============================================================
   Fallback responsive
   Écran trop court (< 620px de hauteur) ou mobile (< 782px)
   → on désactive le parallaxe, retour au flux normal
   ============================================================ */

@media (max-height: 620px), (max-width: 782px) {
    .hero-home {
        top: 0;
        left: auto;
        right: auto;
        min-height: 0;
        overflow: visible;
        padding-top: 3rem;
        padding-bottom: 3rem;
        position: relative !important;
        height: auto;
    }
    
    .home .entry-content > .bandeau-block:first-child + .bandeau-block  {
        margin-top: 0;
    }

}

/* ============================================================
   Section step (page d'accueil)
   ============================================================ */

.home .step-container {
    position: relative;
}

@media (min-width: 782px) {

    .home .step-container {
        min-height: 520px;
    }
}

@media (min-width: 1024px) {

    .home .step-container {
        min-height: 678px;
    }
}

.home .step-illu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

@media (min-width: 782px) {

    .home .step-illu {
        position: absolute;
        top: 10%;
    }
}

@media (min-width: 1024px) {

    .home .step-illu {
        top: 0px;
    }
}

@media (max-width: 782px) {
    .home .wp-block-spacer {
        display: none;
    }
}

/* ===================================
   BLOG STYLES
   =================================== */

/* Blog Listing */

.blog-listing {
    padding-top: 0;
}

/* Hero Section */

.blog-hero {
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff;
    padding: 3rem 0 2rem;
}

.blog-hero__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.blog-hero__title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    margin: 0 0 2rem 0;
    text-align: center;
}

@media (min-width: 782px) {
    .blog-hero__title {
        text-align: left;
        font-size: 3rem; /* md:text-5xl */
    }
}

/* Filtres */

.blog-filters-wrapper {
    margin-top: 1.5rem;
}

.blog-filters-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

@media (min-width: 782px) {
    .blog-filters-container {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.blog-filters__label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: #d1d5db; /* text-gray-300 */
    white-space: nowrap;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-filters .filtre {
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-filters .label-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.2s ease;
}

.blog-filters .filtre:hover .label-category {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.blog-filters .filtre.active .label-category {
    background-color: var(--accent-color); /* bg-indigo-600 */
    border-color: var(--accent-color);
    color: #ffffff;
}

.blog-filters .count {
    opacity: 0.7;
    font-size: 0.75rem;
}

/* Contenu du blog */

.blog-content {
    padding: 4rem 0;
}

.blog-content__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Grille des articles */

.blog-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 782px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Carte d'article */

.blog-card {
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.2s ease;
    height: -moz-fit-content;
    height: fit-content;
}

.blog-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

.blog-card__image {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
}

.blog-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-card__thumbnail {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card__thumbnail {
    transform: scale(1.05);
}

.blog-card__content {
    padding: 1.5rem;
}

.blog-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .blog-card__meta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.blog-card__date {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.blog-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-card__category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background-color: var(--accent-opacity-10);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.blog-card__title {
    margin: 0 0 0.75rem 0;
}

.blog-card__title-link {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.blog-card__title-link:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.blog-card__excerpt {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-card__excerpt p {
    margin: 0;
    font-size: 0.875rem;
}

.blog-card__footer {
    margin-top: auto;
}

.blog-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-card__read-more:hover {
    color: var(--accent-hover);
    text-decoration: none;
    gap: 0.5rem;
}

/* Pagination */

.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.25rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.blog-pagination .page-numbers:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    text-decoration: none;
}

.blog-pagination .page-numbers.current {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    padding: 0.5rem 1rem;
    font-weight: 600;
}

/* Overlay de chargement */

.blog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.blog-loader {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #e5e7eb;
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Single Post */

.single-post {
    max-width: none;
}

.single-post__breadcrumb {
    background-color: #111827;
    color: #ffffff;
    padding: 1rem 0;
}

.single-post__breadcrumb-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__back-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.single-post__back-link:hover {
    color: #d1d5db;
    text-decoration: none;
}

.single-post__meta-wrapper {
    background-color: #f9fafb;
    padding: 1rem 0;
}

.single-post__meta-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 782px) {
    .single-post__meta-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.single-post__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.single-post__category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background-color: var(--accent-opacity-10);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--accent-opacity-30);
}

.single-post__date {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.single-post__header {
    padding: 3rem 0 2rem;
}

.single-post__header-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
    margin: 0;
}

@media (min-width: 782px) {
    .single-post__title {
        font-size: 3rem;
    }
}

.single-post__featured-image {
    margin-bottom: 3rem;
}

.single-post__featured-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__thumbnail {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.single-post__content {
    margin-bottom: 3rem;
}

.single-post__content-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Styles prose pour le contenu */

.single-post__content-container > * {
    margin-bottom: 1.5rem;
}

.single-post__content-container > *:last-child {
    margin-bottom: 0;
}

.single-post__content-container p {
    line-height: 1.7;
    color: #374151;
}

.single-post__content-container h2,
.single-post__content-container h3,
.single-post__content-container h4 {
    font-weight: 600;
    color: #111827;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.single-post__content-container h2 {
    font-size: 1.875rem;
}

.single-post__content-container h3 {
    font-size: 1.5rem;
}

.single-post__content-container h4 {
    font-size: 1.25rem;
}

.single-post__content-container ul,
.single-post__content-container ol {
    padding-left: 1.5rem;
}

.single-post__content-container li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.single-post__content-container a {
    color: var(--accent-color);
    text-decoration: underline;
}

.single-post__content-container a:hover {
    color: var(--accent-hover);
}

.single-post__content-container blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    margin: 2rem 0;
    font-style: italic;
    color: #6b7280;
}

/* Partage social */

.single-post__share {
    background-color: #f3f4f6;
    padding: 2rem 0;
}

.single-post__share-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.single-post__share-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 782px) {
    .single-post__share-content {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

.single-post__share-label {
    font-weight: 600;
    color: #374151;
}

.single-post__share-links {
    display: flex;
    gap: 1rem;
}

.single-post__share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #6b7280;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.single-post__share-link:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.single-post__share-link--facebook:hover {
    background-color: #1877f2;
}

.single-post__share-link--linkedin:hover {
    background-color: #0a66c2;
}

.single-post__share-link--twitter:hover {
    background-color: #1da1f2;
}

.single-post__share-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Responsive */

@media (max-width: 640px) {
    .blog-hero {
        padding: 2rem 0 1.5rem;
    }
    
    .blog-hero__title {
        font-size: 1.875rem;
    }
    
    .blog-content {
        padding: 2rem 0;
    }
    
    .blog-grid {
        gap: 1.5rem;
    }
    
    .single-post__header {
        padding: 2rem 0 1.5rem;
    }
    
    .single-post__title {
        font-size: 1.75rem;
    }
}

/* Accessibilité */

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__thumbnail,
    .blog-card__read-more,
    .single-post__share-link {
        transition: none;
    }
    
    .blog-card:hover,
    .single-post__share-link:hover {
        transform: none;
    }
    
    .blog-card:hover .blog-card__thumbnail {
        transform: none;
    }
    
    .spinner {
        animation: none;
    }
}

/* ==========================================================================
   Single Actualité — charte Tanika
   ========================================================================== */

:root {
    --sa-blue-dark:  #071777;
    --sa-blue:       #1C30A8;
    --sa-blue-mid:   #0073FF;
    --sa-accent:     #FFBE00;
    --sa-white:      #ffffff;
    --sa-font:       "EDF 2020", Inter, system-ui, sans-serif;
}

.single-actu {
    background-color: var(--sa-blue-dark);
    color: var(--sa-white);
}

/* --------------------------------------------------------------------------
   Conteneur centré réutilisable
   -------------------------------------------------------------------------- */

.single-actu__container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.single-actu__breadcrumb {
    background-color: #040f4a;
    padding: 16px 0;
}

.single-actu__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sa-font);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sa-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-actu__back-link:hover {
    color: var(--sa-accent);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Header : date + titre
   -------------------------------------------------------------------------- */

.single-actu__header {
    padding: 56px 0 48px;
}

.single-actu__date {
    font-family: var(--sa-font);
    font-size: 16px;
    font-weight: 800;
    color: var(--sa-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 24px;
}

.single-actu__title {
    font-family: var(--sa-font);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--sa-white);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Image à la une
   -------------------------------------------------------------------------- */

.single-actu__featured-image {
    margin-bottom: 56px;
}

.single-actu__featured-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.single-actu__thumbnail {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

/* --------------------------------------------------------------------------
   Contenu éditorial
   -------------------------------------------------------------------------- */

.single-actu__content {
    padding-bottom: 56px;
}

.single-actu__content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.single-actu__content-container p {
    font-family: var(--sa-font);
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 1.5rem;
}

.single-actu__content-container h2,
.single-actu__content-container h3,
.single-actu__content-container h4 {
    font-family: var(--sa-font);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--sa-white);
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
}

.single-actu__content-container h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }

.single-actu__content-container h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }

.single-actu__content-container h4 { font-size: 1.25rem; }

.single-actu__content-container ul,
.single-actu__content-container ol {
    padding-left: 1.5rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1.75;
}

.single-actu__content-container li { margin-bottom: 0.5rem; }

.single-actu__content-container a {
    color: var(--sa-accent);
    text-decoration: underline;
}

.single-actu__content-container a:hover {
    color: #ffe066;
    text-decoration: underline;
}

.single-actu__content-container blockquote {
    border-left: 4px solid var(--sa-accent);
    padding: 12px 24px;
    margin: 2rem 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.single-actu__content-container figure { margin: 2rem 0; }

.single-actu__content-container figure img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Partage social
   -------------------------------------------------------------------------- */

.single-actu__share {
    background-color: var(--sa-blue);
    padding: 32px 24px;
}

.single-actu__share-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.single-actu__share-label {
    font-family: var(--sa-font);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sa-white);
}

.single-actu__share-links {
    display: flex;
    gap: 12px;
}

.single-actu__share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--sa-white);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.single-actu__share-link:hover {
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--sa-white);
}

.single-actu__share-link--facebook:hover  { background-color: #1877f2; }

.single-actu__share-link--linkedin:hover  { background-color: #0a66c2; }

.single-actu__share-link--twitter:hover   { background-color: #1da1f2; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .single-actu__header { padding: 40px 0 32px; }

    .single-actu__content-container p,
    .single-actu__content-container ul,
    .single-actu__content-container ol {
        font-size: 16px;
    }
}

/* ===================================
   BLOC CONTACT
   =================================== */

.contact-block {
    padding: 4rem 0;
    background-color: #f9fafb;
}

/* En-tête de section */

.contact-block .text-center h2 {
    color: #111827;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.contact-block .text-center p {
    color: #6b7280;
    font-size: 1.25rem;
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grille principale */

.contact-block .grid {
    display: grid;
    gap: 3rem;
}

.contact-block .lg\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .contact-block .lg\\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Formulaire de contact */

.contact-form {
    width: 100%;
}

.contact-form .bg-white {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-form h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Informations de contact */

.contact-info {
    width: 100%;
}

.contact-info .bg-white {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 2rem;
}

.contact-info h3 {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Éléments d'information */

.contact-info .space-y-6 > div {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-info .space-y-6 > div:last-child {
    margin-bottom: 0;
}

.contact-info .flex-shrink-0 {
    flex-shrink: 0;
    font-size: 1.5rem;
    width: 2rem;
    text-align: center;
}

.contact-info .flex-1 h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.contact-info .flex-1 a {
    color: #3b82f6;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}

.contact-info .flex-1 a:hover {
    color: #1d4ed8;
}

.contact-info .flex-1 p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Adresse complète */

.contact-info .border-t {
    border-top: 1px solid #e5e7eb;
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.contact-info .border-t h4 {
    color: #111827;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.contact-info .border-t p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Carte */

.contact-block .mt-12 {
    margin-top: 3rem;
}

.contact-block .bg-white.rounded-lg.shadow-lg {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-block .aspect-w-16.aspect-h-9 {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.contact-block .aspect-w-16.aspect-h-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Layouts spécifiques */

.contact-block .max-w-2xl {
    max-width: 42rem;
    margin: 0 auto;
}

.contact-block .max-w-4xl {
    max-width: 56rem;
    margin: 0 auto;
}

/* Animations d'entrée */

.contact-form,
.contact-info {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.contact-form {
    animation-delay: 0.1s;
}

.contact-info {
    animation-delay: 0.3s;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */

@media (max-width: 781px) {
    .contact-block .text-center h2 {
        font-size: 2rem;
    }
    
    .contact-block .text-center p {
        font-size: 1.125rem;
    }
    
    .contact-form .bg-white,
    .contact-info .bg-white {
        padding: 1.5rem;
    }
    
    .contact-form h3,
    .contact-info h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .contact-block .text-center h2 {
        font-size: 1.75rem;
    }
    
    .contact-block .text-center p {
        font-size: 1rem;
    }
    
    .contact-form .bg-white,
    .contact-info .bg-white {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   wpForo — Mise à la charte Tanika v5
   Basé sur HTML source réel du layout 4 (Threaded)
   ========================================================================== */

#wpforo {
    --wpf-primary:      #1C30A8;
    --wpf-primary-dark: #071777;
    --wpf-secondary:    #0073FF;
    --wpf-tertiary:     #12D9BF;
    --wpf-accent:       #FFBE00;
    --wpf-surface:      #ffffff;
    --wpf-border:       #E2E8F0;
    --wpf-text:         #0F1B4D;
    --wpf-text-muted:   #6B7A99;
    --wpf-radius:       10px;
    --wpf-font:         "EDF 2020", Inter, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Base — fond blanc partout
   -------------------------------------------------------------------------- */

#wpforo,
#wpforo-wrap,
#wpforo #wpforo-wrap,
#wpforo #wpforo-wrap .wpforo-main,
#wpforo #wpforo-wrap .wpforo-content,
#wpforo #wpforo-wrap .wpfl-4 {
    background-color: #ffffff !important;
    font-family: var(--wpf-font) !important;
    color: var(--wpf-text) !important;
}

#wpforo #wpforo-wrap {
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   MASQUER — éléments inutiles (classes réelles confirmées)
   -------------------------------------------------------------------------- */

/* Bouton "S'inscrire nouvelles réponses" */

#wpforo #wpforo-wrap .wpf-subscribe-topic { display: none !important; }

/* Boutons profil/activité colonne gauche */

#wpforo #wpforo-wrap .wpf-member-profile-buttons { display: none !important; }

/* Nicename (@...) */

#wpforo #wpforo-wrap .wpf-author-nicename { display: none !important; }

/* Bouton RSS + zone bottom de l'en-tête topic */

#wpforo #wpforo-wrap .wpf-post-head-bottom { display: none !important; }

/* "Début du sujet" */

#wpforo #wpforo-wrap .wpf-post-starter { display: none !important; }

/* Footer Forum Jump */

#wpforo #wpforo-wrap .wpforo-topic-footer { display: none !important; }

/* Topic overview panel */

#wpforo #wpforo-wrap .wpf-topic-more-info { display: none !important; }

/* Info forum (Forum principal / Dernier post par...) */

#wpforo #wpforo-wrap .wpf-post-info { display: none !important; }

/* Bouton "..." stats */

#wpforo #wpforo-wrap .wpf-post-stat-box.wpf-pb-more { display: none !important; }

/* Champ Titre dans le formulaire */

/* #wpforo #wpforo-wrap .wpf-row-title .wpf-field-name-title { display: none !important; } */

/* Zone révisions */

#wpforo #wpforo-wrap .wpforo-revisions-wrap { display: none !important; }

/* wpf-left sur les posts parents (juste "Posts: X", inutile) */

#wpforo #wpforo-wrap .wpf-parent-post .wpf-left { display: none !important; }

/* Lien de partage en haut à droite des posts parents (dans wpf-content-head-bottom) */

/* On garde visible mais discret — voir section wpf-post-btns ci-dessous */

/* --------------------------------------------------------------------------
   En-tête du topic — titre + pagination + stats
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-head-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 2px solid var(--wpf-border) !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    gap: 16px !important;
}

/* Masquer le bouton subscribe dans le head-bar */

#wpforo #wpforo-wrap .wpf-action-link {
    display: none !important;
}

#wpforo #wpforo-wrap #wpforo-title {
    font-family: var(--wpf-font) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--wpf-primary) !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Pagination — .wpf-navi (top et bottom)
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-navi {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
}

#wpforo #wpforo-wrap .wpf-navi-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    background: transparent !important;
}

/* Texte "Page 1 / 2" */

#wpforo #wpforo-wrap .wpf-page-info {
    font-family: var(--wpf-font) !important;
    font-size: 0.82rem !important;
    color: var(--wpf-text-muted) !important;
    white-space: nowrap !important;
}

/* Select dropdown de page */

#wpforo #wpforo-wrap .wpf-navi-dropdown {
    font-family: var(--wpf-font) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--wpf-primary) !important;
    background: #ffffff !important;
    border: 1.5px solid var(--wpf-primary) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    outline: none !important;
    min-width: 50px !important;
}

/* Bouton "Suivant >" */

#wpforo #wpforo-wrap .wpf-next-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--wpf-font) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: var(--wpf-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-next-button:hover {
    background: var(--wpf-primary-dark) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Stats du topic (Posts / Utilisateurs / Réactions / Vus)
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpforo-post-head {
    background: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    margin-bottom: 16px !important;
}

#wpforo #wpforo-wrap .wpforo-topic-head-wrap {
    background: transparent !important;
    margin-top: 16px;
}

#wpforo #wpforo-wrap .wpf-post-head-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

#wpforo #wpforo-wrap .wpf-post-stat {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

#wpforo #wpforo-wrap .wpf-post-stat-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
    box-shadow: none !important;
}

#wpforo #wpforo-wrap .wpf-tstat {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--wpf-primary) !important;
    line-height: 1 !important;
}

#wpforo #wpforo-wrap .wpf-tstat svg { display: none !important; }

#wpforo #wpforo-wrap .wpf-tlabel {
    font-size: 0.65rem !important;
    color: var(--wpf-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   Séparateur "10 Réponses" — #wpf-replies-sep
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap #wpf-replies-sep {
    border: none !important;
    border-top: none !important;
    margin: 16px 0 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#wpforo #wpforo-wrap #wpf-replies-sep::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--wpf-border) !important;
    display: block !important;
}

#wpforo #wpforo-wrap .wpf-replies-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--wpf-font) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--wpf-text-muted) !important;
    white-space: nowrap !important;
    /* Supprimer style wpForo par défaut */
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* --------------------------------------------------------------------------
   Toggle réponses — #wpf-ttgg-1 = .wpf-post-replies-bar
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-post-replies-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 0 6px 0 !important;
    padding: 6px 12px !important;
    background: rgba(28,48,168,0.04) !important;
    border: 1px solid rgba(28,48,168,0.12) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    /* Supprimer anciens styles */
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-post-replies-bar:hover {
    background: rgba(28,48,168,0.09) !important;
}

#wpforo #wpforo-wrap .wpf-post-replies-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#wpforo #wpforo-wrap .wpf-post-replies-title {
    font-family: var(--wpf-font) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--wpf-primary) !important;
}

#wpforo #wpforo-wrap .wpf-post-replies-bar .far.fa-comments {
    color: var(--wpf-primary) !important;
    font-size: 0.85rem !important;
}

/* Séparateur entre info et icône toggle */

#wpforo #wpforo-wrap .wpf-prsep {
    width: 1px !important;
    height: 14px !important;
    background: rgba(28,48,168,0.2) !important;
    margin: 0 2px !important;
}

/* Icône chevron toggle */

#wpforo #wpforo-wrap .wpforo-ttgg {
    color: var(--wpf-primary) !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   Post parent — wpf-parent-post
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .post-wrap {
    margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap .wpforo-post.wpf-parent-post {
    background: var(--wpf-surface) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: var(--wpf-radius) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Premier post : liseré primary */

#wpforo #wpforo-wrap .wpfp-first .wpforo-post.wpf-parent-post {
    border-left: 4px solid var(--wpf-primary) !important;
}

/* --------------------------------------------------------------------------
   En-tête du post parent — wpf-content-head
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-content-head {
    padding: 14px 20px 10px !important;
    border-bottom: 1px solid var(--wpf-border) !important;
    background: rgba(0, 115, 255, .15);
}

#wpforo #wpforo-wrap .wpf-content-head-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

#wpforo #wpforo-wrap .wpf-content-head-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

/* Nom de l'auteur */

#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name a {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--wpf-primary) !important;
    text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name .is_guest {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--wpf-text-muted) !important;
}

/* Indicateur en ligne */

#wpforo #wpforo-wrap .wpf-content-head .wpfsx {
    font-size: 8px !important;
}

/* Badge Admin */

#wpforo #wpforo-wrap .wpf-content-head .wpfut {
    display: inline-block !important;
    background: var(--wpf-primary) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Badge Membre */

#wpforo #wpforo-wrap .wpf-content-head .wpfct {
    display: inline-block !important;
    background: rgba(28,48,168,0.08) !important;
    color: var(--wpf-primary) !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border: none !important;
}

/* Date du post */

#wpforo #wpforo-wrap .wpf-content-head .wpf-post-date {
    font-size: 0.75rem !important;
    color: var(--wpf-text-muted) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Inscription date */

#wpforo #wpforo-wrap .wpf-author-joined {
    font-size: 0.7rem !important;
    color: var(--wpf-text-muted) !important;
}

/* Lien de partage (icône chaîne) */

#wpforo #wpforo-wrap .wpf-post-btns .wpf-action {
    color: var(--wpf-text-muted) !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-post-btns .wpf-action:hover {
    opacity: 1 !important;
    color: var(--wpf-primary) !important;
}

/* --------------------------------------------------------------------------
   Corps du post parent — wpf-content
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-parent-post .wpf-content {
    padding: 16px 20px !important;
    background: transparent !important;
}

#wpforo #wpforo-wrap .wpforo-post-content,
#wpforo #wpforo-wrap .wpforo-post-content p {
    font-family: var(--wpf-font) !important;
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    color: var(--wpf-text) !important;
    margin-block: 0 0.5em !important;
}

#wpforo #wpforo-wrap .wpforo-post-content p:last-child {
    margin-bottom: 0 !important;
}

/* Message "modifié" */

#wpforo #wpforo-wrap .wpf-post-edited {
    font-size: 0.72rem !important;
    color: var(--wpf-text-muted) !important;
    font-style: italic !important;
    margin-top: 8px !important;
}

/* --------------------------------------------------------------------------
   Pied du post parent — wpf-content-foot
   Contient : wpf-reply (bouton Répondre) + wpf-buttons (Citation)
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-parent-post .wpf-content-foot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-top: 1px solid var(--wpf-border) !important;
    background: transparent !important;
}

/* Bouton Répondre — .wpforo-reply.wpf-action */

#wpforo #wpforo-wrap .wpforo-reply.wpf-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    color: var(--wpf-primary) !important;
    border: 1.5px solid var(--wpf-primary) !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: var(--wpf-font) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1.4 !important;
}

#wpforo #wpforo-wrap .wpforo-reply.wpf-action:hover {
    background: var(--wpf-primary) !important;
    color: #fff !important;
}

#wpforo #wpforo-wrap .wpf-button-text {
    font-size: 0.78rem !important;
}

/* Bouton Citation */

#wpforo #wpforo-wrap .wpforo-quote.wpf-action {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    color: var(--wpf-text-muted) !important;
    border: 1.5px solid var(--wpf-border) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

#wpforo #wpforo-wrap .wpforo-quote.wpf-action:hover {
    border-color: var(--wpf-primary) !important;
    color: var(--wpf-primary) !important;
}

/* Réactions */

#wpforo #wpforo-wrap .reacted-users,
#wpforo #wpforo-wrap .reacted-users a {
    font-size: 0.7rem !important;
    color: var(--wpf-text-muted) !important;
    padding: 0 20px 8px !important;
}

/* --------------------------------------------------------------------------
   Réponses imbriquées — .wpf-post-replies.level-1
   Structure : .wpf-child-post > .wpf-reply-head + .wpf-reply-content
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-post-replies {
    margin-left: 32px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    border-left: 2px solid var(--wpf-border) !important;
    padding-left: 12px !important;
}

#wpforo #wpforo-wrap .wpf-post-replies .reply-wrap {
    margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .wpforo-post.wpf-child-post {
    background: var(--wpf-surface) !important;
    border: 1px solid var(--wpf-border) !important;
    border-left: 3px solid var(--wpf-tertiary) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* En-tête de la réponse imbriquée — wpf-reply-head */

#wpforo #wpforo-wrap .wpf-reply-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: #F8FAFF !important;
    border-bottom: 1px solid var(--wpf-border) !important;
    flex-wrap: wrap !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpf-author {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name a,
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name .is_guest {
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    color: var(--wpf-primary) !important;
    text-decoration: none !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name .is_guest {
    color: var(--wpf-text-muted) !important;
}

/* Masquer la date d'inscription dans les réponses imbriquées */

#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-joined,
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-posts {
    display: none !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpforo-memberinfo {
    display: none !important;
}

#wpforo #wpforo-wrap .wpf-reply-head .wpf-post-date {
    font-size: 0.72rem !important;
    color: var(--wpf-text-muted) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Icône lien partage dans les réponses */

#wpforo #wpforo-wrap .wpf-reply-head .wpf-post-btns .wpf-action {
    color: var(--wpf-text-muted) !important;
    font-size: 0.72rem !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
}

/* Corps de la réponse imbriquée — wpf-reply-content */

#wpforo #wpforo-wrap .wpf-reply-content {
    padding: 12px 16px !important;
    background: transparent !important;
}

/* Fil "Répondre à X" */

#wpforo #wpforo-wrap .wpf-reply-tree {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.75rem !important;
    color: var(--wpf-text-muted) !important;
    margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .wpf-reply-to a {
    color: var(--wpf-secondary) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

/* Pied de la réponse imbriquée */

#wpforo #wpforo-wrap .wpf-reply-content .wpf-content-foot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--wpf-border) !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Blockquote (citation dans le contenu)
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpforo-post-content blockquote {
    background: #F0F4FF !important;
    border-left: 3px solid var(--wpf-primary) !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    margin: 10px 0 !important;
    font-size: 0.88rem !important;
    color: var(--wpf-text-muted) !important;
}

#wpforo #wpforo-wrap .wpforo-post-quote-head {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

#wpforo #wpforo-wrap .wpforo-post-quote-author strong {
    font-size: 0.75rem !important;
    color: var(--wpf-primary) !important;
}

/* En attente de modération */

#wpforo #wpforo-wrap .wpf-mod-message {
    font-size: 0.75rem !important;
    color: #e07000 !important;
}

/* --------------------------------------------------------------------------
   Formulaire inline (s'ouvre au clic sur Répondre)
   .wpforo-post-form (display: none par défaut, affiché par JS)
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpforo-post-form {
    background: #ffffff !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 8px !important;
}

#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-fields {
    background: transparent !important;
    margin-bottom: 12px !important;
}

#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-name,
#wpforo #wpforo-wrap .wpforo-post-form .wpf-post-guest-email {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

#wpforo #wpforo-wrap .wpforo-post-form label {
    font-family: var(--wpf-font) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--wpf-text-muted) !important;
    white-space: nowrap !important;
}

#wpforo #wpforo-wrap .wpforo-post-form input[type="text"] {
    font-family: var(--wpf-font) !important;
    background: #F8FAFF !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 6px !important;
    color: var(--wpf-text) !important;
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
}

#wpforo #wpforo-wrap .wpforo-post-form input[type="text"]:focus {
    border-color: var(--wpf-secondary) !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0,115,255,0.1) !important;
}

/* Bouton Répondre (submit) du formulaire inline */

#wpforo #wpforo-wrap .wpforo-post-form button[type="submit"],
#wpforo #wpforo-wrap .wpforo-post-form .wpf-button[type="submit"] {
    font-family: var(--wpf-font) !important;
    background: var(--wpf-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

#wpforo #wpforo-wrap .wpforo-post-form button[type="submit"]:hover {
    background: var(--wpf-primary-dark) !important;
}

/* Bouton Annuler du formulaire inline */

#wpforo #wpforo-wrap .wpforo-post-form .wpf-button-secondary {
    font-family: var(--wpf-font) !important;
    background: transparent !important;
    color: var(--wpf-text-muted) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 7px !important;
    padding: 9px 16px !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

/* --------------------------------------------------------------------------
   Formulaire principal "Laisser une réponse" — .wpf-form-wrapper.wpfel-4
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap .wpf-form-wrapper.wpfel-4 {
    background: #ffffff !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: var(--wpf-radius) !important;
    padding: 24px !important;
    margin: auto !important;
    margin-top: 0 !important;
    margin-bottom: 32px !important;
}

#wpforo #wpforo-wrap .wpf-form-wrapper .wpf-button {
    padding: 0px 28px !important;
}

#wpforo #wpforo-wrap .wpf-reply-form-title {
    font-family: var(--wpf-font) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--wpf-primary) !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid var(--wpf-border) !important;
}

#wpforo #wpforo-wrap .wpf-post-create,
#wpforo #wpforo-wrap .wpforoeditor {
    background: #ffffff !important;
}

#wpforo #wpforo-wrap .wpf-label {
    font-family: var(--wpf-font) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--wpf-text-muted) !important;
}

#wpforo #wpforo-wrap .wpf-post-create input[type="text"],
#wpforo #wpforo-wrap .wpf-post-create input[type="email"],
#wpforo #wpforo-wrap .wpf-post-create textarea,
#wpforo #wpforo-wrap .wpf-post-create select {
    font-family: var(--wpf-font) !important;
    background: #F8FAFF !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 6px !important;
    color: var(--wpf-text) !important;
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    transition: border-color 0.2s !important;
    width: 100% !important;
}

#wpforo #wpforo-wrap .wpf-post-create input[type="text"]:focus,
#wpforo #wpforo-wrap .wpf-post-create input[type="email"]:focus {
    border-color: var(--wpf-secondary) !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0,115,255,0.1) !important;
}

#wpforo #wpforo-wrap .wpf-tr,
#wpforo #wpforo-wrap .wpf-td,
#wpforo #wpforo-wrap .wpf-field-wrap,
#wpforo #wpforo-wrap .wpf-field {
    background: transparent !important;
    border-bottom: none !important;
}

#wpforo #wpforo-wrap .wpf-post-create input[type="submit"],
#wpforo #wpforo-wrap .wpf-post-create .wpf-button[type="submit"] {
    font-family: var(--wpf-font) !important;
    background-color: var(--wpf-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 28px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-post-create input[type="submit"]:hover {
    background-color: var(--wpf-primary-dark) !important;
}

/* --------------------------------------------------------------------------
   Breadcrumb + liens généraux
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap #wpforo-breadcrumb,
#wpforo #wpforo-wrap #wpforo-breadcrumb a {
    color: var(--wpf-text-muted) !important;
    font-size: 0.78rem !important;
    font-family: var(--wpf-font) !important;
}

#wpforo #wpforo-wrap .wpforo-subtop { background: transparent !important; }

#wpforo #wpforo-wrap a { color: var(--wpf-secondary) !important; }

#wpforo #wpforo-wrap a:hover { color: var(--wpf-primary) !important; }

/* Correction liens auteurs (couleur inline wpForo = #FF3333) */

#wpforo #wpforo-wrap .wpf-content-head .wpf-author-name a[style],
#wpforo #wpforo-wrap .wpf-reply-head .wpf-author-name a[style] {
    color: var(--wpf-primary) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    #wpforo #wpforo-wrap .wpf-post-replies {
        margin-left: 12px !important;
    }

    #wpforo #wpforo-wrap .wpf-content-head,
    #wpforo #wpforo-wrap .wpf-reply-head {
        padding: 10px 14px !important;
    }

    #wpforo #wpforo-wrap .wpf-parent-post .wpf-content,
    #wpforo #wpforo-wrap .wpf-reply-content {
        padding: 12px 14px !important;
    }

    #wpforo #wpforo-wrap #wpforo-title {
        font-size: 1.1rem !important;
    }
}

#wpforo #wpforo-wrap .wpfl-4 .wpf-parent-post .wpf-right {
    padding: 0 !important;
}

#wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot {
    border-radius: 0 !important;
}

#wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer .reacted-users {
    display: none !important;
}

#wpforo #wpforo-wrap .wpf-reaction-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--wpf-text-muted) !important;
    font-family: var(--wpf-font) !important;
    margin-left: auto !important;
}

#wpforo #wpforo-wrap .wpf-reaction-coun span {
    display: flex;
    font-weight: normal;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

#wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer {
    background-color: #FFFFFF !important;
}

#wpforo #wpforo-wrap .wpfl-4 .wpforo-post :not(.wpf-reply-content) .wpforo-post-footer {
    padding-left: 16px;
}

#wpforo #wpforo-wrap .wpf-reaction-count svg {
    width: 13px !important;
    height: 13px !important;
    fill: var(--wpf-text-muted) !important;
    flex-shrink: 0 !important;
}

/* Bouton "< Retour" — pagination précédente */

#wpforo #wpforo-wrap .wpf-prev-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--wpf-font) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--wpf-primary) !important;
    background: transparent !important;
    border: 1.5px solid var(--wpf-primary) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-prev-button:hover {
    background: var(--wpf-primary) !important;
    color: #ffffff !important;
}

#wpforo #wpforo-wrap.wpft-post .wpf-head-bar {
    display: none !important;
}

#wpforo-menu .wpforo-home,
#wpforo-menu .wpforo-members,
#wpforo-menu .wpforo-recent {
    display: none !important;
}

.wpforo-profile .wpforo-profile-back {
    display: none !important;
}

/* =============================================
   wpForo — Menu accès rapide fixe bord droit
   ============================================= */

#wpforo-menu {
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
    background: transparent !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
}

/* Masquer les éléments inutiles */

#wpforo-menu .wpf-bar-right,
#wpforo-menu .wpf-res-menu,
#wpforo-menu .wpf-search {
    display: none !important;
}

#wpforo-menu .wpf-left {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: auto !important;
}

/* La liste */

#wpforo-menu #wpf-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Chaque item — position relative pour ancrer le lien */

#wpforo-menu #wpf-menu li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 56px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer !important;
    border-bottom: 1px solid transparent !important;
}

#wpforo-menu #wpf-menu li:hover {
    border-bottom: 1px solid transparent !important;
}

/* Le lien couvre tout le <li> et est au-dessus des ::before/::after */

#wpforo-menu #wpf-menu li a {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    display: block !important;  /* pas contents */
}

/* --- ICÔNE via ::after sur le <li> --- */

#wpforo-menu #wpf-menu li::after {
    content: '' !important;
    display: flex !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    background-color: #1C30A8 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
    z-index: 1 !important;
}

/* Les pseudo-éléments passent sous le lien */

#wpforo-menu #wpf-menu li::before,
#wpforo-menu #wpf-menu li::after {
    z-index: 1 !important;
    position: relative !important;
}

#wpforo-menu #wpf-menu li:hover::after {
    background-color: #0073FF !important;
}

/* --- LABEL TEXTE via ::before sur le <li> --- */

#wpforo-menu #wpf-menu li::before {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    background: #0073FF !important;
    color: #fff !important;
    font-family: "EDF 2020", Inter, system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-width 0.3s ease, opacity 0.25s ease, padding 0.3s ease !important;
}

#wpforo-menu #wpf-menu li:hover::before {
    max-width: 260px !important;
    opacity: 1 !important;
    padding: 0 20px !important;
}

/* --- ICÔNES SVG par classe --- */

#wpforo-menu #wpf-menu .wpforo-register::after,
#wpforo-menu #wpf-menu .wpforo-profile::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25.352' height='21.744' viewBox='0 0 25.352 21.744'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_167' data-name='Rectangle 167' width='25.352' height='21.744' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Groupe_261' data-name='Groupe 261' transform='translate(0.001)'%3E%3Cg id='Groupe_260' data-name='Groupe 260' transform='translate(-0.001 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Tracé_275' data-name='Tracé 275' d='M42.1,3.162H40.428V1.489a1.42,1.42,0,0,0-2.84,0V3.162H35.915a1.42,1.42,0,1,0,0,2.839h1.673V7.675a1.42,1.42,0,0,0,2.84,0V6H42.1a1.42,1.42,0,1,0,0-2.839' transform='translate(-18.17 -0.036)' fill='%23ffbe00'/%3E%3Cpath id='Tracé_276' data-name='Tracé 276' d='M0,18.228v1.95a1.566,1.566,0,0,0,1.566,1.566H15.245a1.566,1.566,0,0,0,1.566-1.566v-1.95a8.4,8.4,0,0,0-4.794-7.581,5.94,5.94,0,1,0-7.223,0A8.4,8.4,0,0,0,0,18.228' transform='translate(0 0)' fill='%230073ff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

#wpforo-menu #wpf-menu .wpforo-register:hover::after,
#wpforo-menu #wpf-menu .wpforo-profile:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.352' height='21.744' viewBox='0 0 25.352 21.744'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h25.352v21.744H0z' data-name='Rectangle 167'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg data-name='Groupe 261'%3E%3Cg clip-path='url(%23a)' data-name='Groupe 260'%3E%3Cpath fill='%23ffbe00' d='M23.93 3.126h-1.672V1.453a1.42 1.42 0 0 0-2.84 0v1.673h-1.673a1.42 1.42 0 1 0 0 2.839h1.673v1.674a1.42 1.42 0 0 0 2.84 0V5.964h1.672a1.42 1.42 0 1 0 0-2.839' data-name='Tracé 275'/%3E%3Cpath fill='%23071777' d='M0 18.228v1.95a1.566 1.566 0 0 0 1.566 1.566h13.679a1.566 1.566 0 0 0 1.566-1.566v-1.95a8.4 8.4 0 0 0-4.794-7.581 5.94 5.94 0 1 0-7.223 0A8.4 8.4 0 0 0 0 18.228' data-name='Tracé 276'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#wpforo-menu #wpf-menu .wpforo-login::after,
#wpforo-menu #wpf-menu .wpforo-logout::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.187' height='21.379' data-name='Groupe 259' viewBox='0 0 21.187 21.379'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h21.187v21.379H0z' data-name='Rectangle 166'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Groupe 258'%3E%3Cpath fill='%230073ff' d='M12.487 19.1h-9.22a.99.99 0 0 1-.989-.99V3.267a.99.99 0 0 1 .989-.99h9.221a1.139 1.139 0 0 0 0-2.278H3.267A3.27 3.27 0 0 0 0 3.267v14.845a3.27 3.27 0 0 0 3.267 3.267h9.221a1.139 1.139 0 0 0 0-2.278' data-name='Tracé 273'/%3E%3Cpath fill='%23ffbe00' d='m20.905 9.653-4.213-3.8a.854.854 0 0 0-1.426.634v2.664H5.165a1.139 1.139 0 0 0 0 2.278h10.1v2.663a.854.854 0 0 0 1.426.634l4.213-3.8a.854.854 0 0 0 0-1.268' data-name='Tracé 274'/%3E%3C/g%3E%3C/svg%3E");
}

#wpforo-menu #wpf-menu .wpforo-login:hover::after,
#wpforo-menu #wpf-menu .wpforo-logout:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.187' height='21.379' data-name='Groupe 259' viewBox='0 0 21.187 21.379'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='none' d='M0 0h21.187v21.379H0z' data-name='Rectangle 166'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)' data-name='Groupe 258'%3E%3Cpath fill='%23071777' d='M12.487 19.1h-9.22a.99.99 0 0 1-.989-.99V3.267a.99.99 0 0 1 .989-.99h9.221a1.139 1.139 0 0 0 0-2.278H3.267A3.27 3.27 0 0 0 0 3.267v14.845a3.27 3.27 0 0 0 3.267 3.267h9.221a1.139 1.139 0 0 0 0-2.278' data-name='Tracé 273'/%3E%3Cpath fill='%23ffbe00' d='m20.905 9.653-4.213-3.8a.854.854 0 0 0-1.426.634v2.664H5.165a1.139 1.139 0 0 0 0 2.278h10.1v2.663a.854.854 0 0 0 1.426.634l4.213-3.8a.854.854 0 0 0 0-1.268' data-name='Tracé 274'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- LABELS TEXTE par classe --- */

#wpforo-menu #wpf-menu .wpforo-register::before { content: 'CRÉER UN COMPTE' !important; }

#wpforo-menu #wpf-menu .wpforo-login::before    { content: 'SE CONNECTER' !important; }

#wpforo-menu #wpf-menu .wpforo-profile::before  { content: 'MON COMPTE' !important; }

#wpforo-menu #wpf-menu .wpforo-logout::before   { content: 'SE DÉCONNECTER' !important; }

/* wpForo — Masquer boutons Code, Spoiler, Code source, citation, emoji dans l'éditeur */

/* Bouton "source_code" (éditeur HTML source) */

.mce-toolbar-grp .mce-i-code,
.mce-toolbar-grp [aria-label="Source code"],
.mce-toolbar-grp [aria-label="Emoji"],
.mce-toolbar-grp [aria-label="Code source"],
.mce-toolbar-grp [aria-label="Code"],
.mce-toolbar-grp [aria-label="Bloc de citation"],
.mce-toolbar-grp [aria-label*="Spoiler" i] {
    display: none !important;
}

#wpforo #wpforo-wrap .wpforo-post .wpf-content-head .wpf-content-head-bottom {
    display: none !important;
}

/* ==========================================================================
   Auth Modal — Modale connexion/inscription + épuration pages wpForo
   Fichier : resources/css/_auth-modal.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

.auth-modal,
   #wpforo #wpforo-wrap .wpforo-login-wrap,
   #wpforo #wpforo-wrap .wpforo-register-wrap {
       --auth-primary:      #1C30A8;
       --auth-primary-dark: #071777;
       --auth-secondary:    #0073FF;
       --auth-border:       #E2E8F0;
       --auth-text:         #0F1B4D;
       --auth-text-muted:   #6B7A99;
       --auth-bg:           #F4F6FB;
       --auth-surface:      #ffffff;
       --auth-radius:       10px;
       --auth-font:         "EDF 2020", Inter, system-ui, sans-serif;
   }

/* --------------------------------------------------------------------------
      MODALE — Structure
      -------------------------------------------------------------------------- */

.auth-modal {
       position: fixed;
       inset: 0;
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 16px;
       font-family: var(--auth-font);
   }

.auth-modal[hidden] { display: none; }

.auth-modal__overlay {
       position: absolute;
       inset: 0;
       background: rgba(7, 23, 119, 0.55);
       backdrop-filter: blur(3px);
       cursor: pointer;
   }

.auth-modal__box {
       position: relative;
       background: var(--auth-surface);
       border-radius: 14px;
       width: 100%;
       max-width: 460px;
       max-height: 92vh;
       overflow-y: auto;
       box-shadow: 0 24px 60px rgba(7, 23, 119, 0.22);
       z-index: 1;
       animation: auth-modal-in 0.22s ease;
   }

@keyframes auth-modal-in {
       from { opacity: 0; transform: translateY(14px) scale(0.97); }
       to   { opacity: 1; transform: translateY(0) scale(1); }
   }

/* Bouton fermer */

.auth-modal__close {
       position: absolute;
       top: 14px;
       right: 14px;
       background: transparent;
       border: none;
       cursor: pointer;
       padding: 6px;
       color: var(--auth-text-muted);
       border-radius: 6px;
       transition: color 0.15s, background 0.15s;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: center;
   }

.auth-modal__close:hover {
       color: var(--auth-primary);
       background: var(--auth-bg);
   }

.auth-modal__close svg { fill: currentColor; }

/* En-tête */

.auth-modal__header {
       padding: 28px 28px 16px;
       text-align: center;
       border-bottom: 1px solid var(--auth-border);
   }

.auth-modal__titre {
       font-family: var(--auth-font);
       font-size: 1.15rem;
       font-weight: 700;
       color: var(--auth-primary);
       margin: 0 0 6px;
       padding-right: 28px;
   }

.auth-modal__subtitle {
       font-family: var(--auth-font);
       font-size: 0.85rem;
       color: var(--auth-text-muted);
       margin: 0;
       line-height: 1.5;
   }

/* Onglets */

.auth-modal__tabs {
       display: flex;
       border-bottom: 2px solid var(--auth-border);
   }

.auth-modal__tab {
       flex: 1;
       padding: 14px 12px;
       background: transparent;
       border: none;
       border-bottom: 3px solid transparent;
       margin-bottom: -2px;
       font-family: var(--auth-font);
       font-size: 0.88rem;
       font-weight: 600;
       color: var(--auth-text-muted);
       cursor: pointer;
       transition: color 0.2s, border-color 0.2s;
   }

.auth-modal__tab:hover {
       color: var(--auth-primary);
   }

.auth-modal__tab--active {
       color: var(--auth-primary);
       border-bottom-color: var(--auth-primary);
   }

/* Panneaux */

.auth-modal__content {
       padding: 0;
   }

.auth-modal__panel {
       padding: 24px 28px 28px;
   }

/* Loader */

.auth-modal__loader {
       display: flex;
       align-items: center;
       gap: 10px;
       color: var(--auth-text-muted);
       font-size: 0.85rem;
       font-family: var(--auth-font);
       justify-content: center;
       padding: 20px 0;
   }

.auth-spinner {
       width: 18px;
       height: 18px;
       animation: auth-spin 0.8s linear infinite;
       color: var(--auth-primary);
       flex-shrink: 0;
   }

@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Erreur de chargement */

.auth-modal__error {
       font-family: var(--auth-font);
       font-size: 0.85rem;
       color: #c0392b;
       text-align: center;
       padding: 12px 0;
   }

.auth-modal__error a {
       color: var(--auth-secondary);
   }

/* --------------------------------------------------------------------------
      Formulaires wpForo injectés dans la modale
      -------------------------------------------------------------------------- */

/* Masquer les éléments parasites des pages wpForo dans la modale */

.auth-modal__form-wrap #wpforo-title,
   .auth-modal__form-wrap p#wpforo-title,
   .auth-modal__form-wrap h3,
   .auth-modal__form-wrap .wpforo-login-wrap > .wpforo-login-content > h3,
   .auth-modal__form-wrap .wpforo-register-wrap > .wpforo-register-content > h3 {
       display: none !important;
   }

/* Conteneur formulaire wpForo — fond transparent dans la modale */

.auth-modal__form-wrap .wpforo-login-wrap,
   .auth-modal__form-wrap .wpforo-register-wrap {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin: 0 !important;
   }

.auth-modal__form-wrap .wpforo-login-content,
   .auth-modal__form-wrap .wpforo-register-content {
       background: transparent !important;
       padding: 0 !important;
   }

.auth-modal__form-wrap .wpforo-table,
   .auth-modal__form-wrap .wpforo-register-table {
       background: transparent !important;
   }

/* Champs de saisie */

.auth-modal__form-wrap .wpf-field-wrap {
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       background: var(--auth-bg) !important;
       border: 1.5px solid var(--auth-border) !important;
       border-radius: 8px !important;
       margin-bottom: 12px !important;
       transition: border-color 0.2s !important;
       overflow: hidden !important;
   }

.auth-modal__form-wrap .wpf-field-wrap:focus-within {
       border-color: var(--auth-secondary) !important;
       background: #ffffff !important;
       box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.1) !important;
   }

.auth-modal__form-wrap .wpf-field-icon {
       padding: 0 12px !important;
       color: var(--auth-text-muted) !important;
       font-size: 0.85rem !important;
       flex-shrink: 0 !important;
   }

.auth-modal__form-wrap .wpf-login-text,
   .auth-modal__form-wrap input[type="text"],
   .auth-modal__form-wrap input[type="email"],
   .auth-modal__form-wrap input[type="password"] {
       font-family: var(--auth-font) !important;
       font-size: 0.9rem !important;
       color: var(--auth-text) !important;
       background: transparent !important;
       border: none !important;
       outline: none !important;
       padding: 11px 14px 11px 0 !important;
       width: 100% !important;
       box-sizing: border-box !important;
   }

/* Icône toggle password */

.auth-modal__form-wrap .wpf-show-password {
       padding: 0 12px !important;
       color: var(--auth-text-muted) !important;
       cursor: pointer !important;
       font-size: 0.85rem !important;
       flex-shrink: 0 !important;
       transition: color 0.15s !important;
   }

.auth-modal__form-wrap .wpf-show-password:hover {
       color: var(--auth-primary) !important;
   }

/* Labels wpForo */

.auth-modal__form-wrap .wpf-label {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       font-weight: 600 !important;
       color: var(--auth-text-muted) !important;
       margin-bottom: 4px !important;
       display: block !important;
   }

.auth-modal__form-wrap .wpf-desc {
       font-size: 0.72rem !important;
       color: var(--auth-text-muted) !important;
       margin-bottom: 6px !important;
   }

.auth-modal__form-wrap .wpf-field-required-icon {
       color: var(--auth-primary) !important;
   }

/* Case "Se souvenir de moi" + lien mot de passe oublié */

.auth-modal__form-wrap .wpf-extra {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       color: var(--auth-text-muted) !important;
       text-align: center !important;
       margin-bottom: 14px !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       gap: 6px !important;
       flex-wrap: wrap !important;
   }

.auth-modal__form-wrap .wpf-forgot-pass {
       color: var(--auth-secondary) !important;
       font-size: 0.78rem !important;
       text-decoration: none !important;
   }

.auth-modal__form-wrap .wpf-forgot-pass:hover {
       color: var(--auth-primary) !important;
   }

/* Bouton submit */

.auth-modal__form-wrap input[type="submit"] {
       font-family: var(--auth-font) !important;
       width: 100% !important;
       padding: 12px 24px !important;
       background: var(--auth-primary) !important;
       color: #ffffff !important;
       border: none !important;
       border-radius: 8px !important;
       font-size: 0.95rem !important;
       font-weight: 700 !important;
       cursor: pointer !important;
       transition: background 0.2s !important;
       margin-bottom: 12px !important;
   }

.auth-modal__form-wrap input[type="submit"]:hover {
       background: var(--auth-primary-dark) !important;
   }

/* Lien "Créer un compte" / "Connexion" en bas du formulaire */

.auth-modal__form-wrap .wpf-field-reg,
   .auth-modal__form-wrap .wpf-field-login {
       text-align: center !important;
       font-size: 0.82rem !important;
       font-family: var(--auth-font) !important;
       color: var(--auth-text-muted) !important;
       margin-top: 4px !important;
   }

/* On masque ces liens dans la modale car les onglets jouent ce rôle */

.auth-modal__form-wrap .wpf-field-reg,
   .auth-modal__form-wrap .wpf-field-login {
       display: none !important;
   }

/* --------------------------------------------------------------------------
      PAGES sign-in / sign-up — épuration du rendu pleine page
      -------------------------------------------------------------------------- */

/* Masquer le menu wpForo complet sur ces pages */

body.wpft-login  #wpforo-menu,
   body.wpft-register #wpforo-menu {
       display: none !important;
   }

/* Masquer le titre "Forum - Connexion" / "Forum - abonnement" */

body.wpft-login  #wpforo-title,
   body.wpft-register #wpforo-title {
       display: none !important;
   }

/* Centrer et encadrer le formulaire sur la page */

body.wpft-login .wpforo-login-wrap,
   body.wpft-register .wpforo-register-wrap {
       max-width: 440px !important;
       margin: 48px auto !important;
       background: #ffffff !important;
       border: 1px solid var(--auth-border) !important;
       border-radius: 14px !important;
       box-shadow: 0 8px 32px rgba(28, 48, 168, 0.1) !important;
       overflow: hidden !important;
   }

body.wpft-login .wpforo-login-content,
   body.wpft-register .wpforo-register-content {
       padding: 32px 32px 28px !important;
       background: transparent !important;
   }

/* Titre "Bienvenue !" / "Rejoignez-nous aujourd'hui !" */

body.wpft-login  .wpforo-login-content  h3,
   body.wpft-register .wpforo-register-content h3 {
       font-family: var(--auth-font) !important;
       font-size: 1.2rem !important;
       font-weight: 700 !important;
       color: var(--auth-primary) !important;
       text-align: center !important;
       margin-bottom: 24px !important;
   }

/* Champs pleine page — même style que dans la modale */

body.wpft-login  .wpf-field-wrap,
   body.wpft-register .wpf-field-wrap {
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       background: var(--auth-bg) !important;
       border: 1.5px solid var(--auth-border) !important;
       border-radius: 8px !important;
       margin-bottom: 12px !important;
       transition: border-color 0.2s !important;
       overflow: hidden !important;
   }

body.wpft-login  .wpf-field-wrap:focus-within,
   body.wpft-register .wpf-field-wrap:focus-within {
       border-color: var(--auth-secondary) !important;
       background: #ffffff !important;
       box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.1) !important;
   }

body.wpft-login  .wpf-field-icon,
   body.wpft-register .wpf-field-icon {
       padding: 0 12px !important;
       color: var(--auth-text-muted) !important;
       font-size: 0.85rem !important;
   }

body.wpft-login  .wpf-login-text,
   body.wpft-login  input[type="text"],
   body.wpft-login  input[type="password"],
   body.wpft-register input[type="text"],
   body.wpft-register input[type="email"],
   body.wpft-register input[type="password"] {
       font-family: var(--auth-font) !important;
       font-size: 0.9rem !important;
       color: var(--auth-text) !important;
       background: transparent !important;
       border: none !important;
       outline: none !important;
       padding: 11px 14px 11px 0 !important;
       width: 100% !important;
   }

body.wpft-login  input[type="submit"],
   body.wpft-register input[type="submit"] {
       font-family: var(--auth-font) !important;
       width: 100% !important;
       padding: 12px 24px !important;
       background: var(--auth-primary) !important;
       color: #ffffff !important;
       border: none !important;
       border-radius: 8px !important;
       font-size: 0.95rem !important;
       font-weight: 700 !important;
       cursor: pointer !important;
       transition: background 0.2s !important;
       margin-bottom: 12px !important;
   }

body.wpft-login  input[type="submit"]:hover,
   body.wpft-register input[type="submit"]:hover {
       background: var(--auth-primary-dark) !important;
   }

/* Se souvenir + mot de passe oublié */

body.wpft-login .wpf-extra {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       color: var(--auth-text-muted) !important;
       text-align: center !important;
   }

body.wpft-login .wpf-forgot-pass {
       color: var(--auth-secondary) !important;
       text-decoration: none !important;
   }

/* Lien "Créer un compte" / "Connexion" */

body.wpft-login  .wpf-field-reg a,
   body.wpft-register .wpf-field-login a {
       font-family: var(--auth-font) !important;
       font-size: 0.82rem !important;
       color: var(--auth-secondary) !important;
       text-decoration: none !important;
       display: inline-flex !important;
       align-items: center !important;
       gap: 5px !important;
   }

body.wpft-login  .wpf-field-reg a:hover,
   body.wpft-register .wpf-field-login a:hover {
       color: var(--auth-primary) !important;
   }

/* Labels */

body.wpft-login  .wpf-label,
   body.wpft-register .wpf-label {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       font-weight: 600 !important;
       color: var(--auth-text-muted) !important;
   }

/* Description (ex: longueur min pseudo) */

body.wpft-register .wpf-desc {
       font-size: 0.7rem !important;
       color: var(--auth-text-muted) !important;
   }

/* Espacement global */

body.wpft-login  .wpforo-login-table,
   body.wpft-register .wpforo-register-table {
       background: transparent !important;
   }

/* Responsive */

@media (max-width: 480px) {
       .auth-modal__box {
           border-radius: 10px;
       }
   
       .auth-modal__panel {
           padding: 20px 18px 24px;
       }
   
       .auth-modal__header {
           padding: 22px 18px 14px;
       }
   
       body.wpft-login  .wpforo-login-content,
       body.wpft-register .wpforo-register-content {
           padding: 24px 20px 20px !important;
       }
   }

/* Masquer : Forums, Members, Recent Posts, Logout */

#wpforo #wpforo-wrap #wpf-menu .wpforo-home,
#wpforo #wpforo-wrap #wpf-menu .wpforo-members,
#wpforo #wpforo-wrap #wpf-menu .wpforo-recent {
    display: none !important;
}

/* Dans le sous-menu profil, masquer Activity et Subscriptions */

#wpforo #wpforo-wrap #wpf-menu .wpforo-profile-activity,
#wpforo #wpforo-wrap #wpf-menu .wpforo-profile-subscriptions {
    display: none !important;
}

.wpforo-profile-menu,
.wpforo-user-tools .wpf-ab-edit_dash {
    display: none !important;
}

/* ===================================
   FOOTER
   =================================== */

/* Footer principal */

#site-footer {
    margin-top: auto; /* Pour pousser le footer en bas */
}

/* Colonnes du footer */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-content {
    color: #e5e7eb;
}

.footer-content h3 {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-content p {
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
}

.member-info .footer-content p {
    color: #3b82f6;
    font-weight: 500;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.footer-content p {
    line-height: 1.25rem;
}

#menu-menu-footer li {
    margin-top: 0;
}

/* Menus du footer */

.footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-item {
    margin: 0;
}

.footer-menu-link {
    color: #d1d5db;
    text-decoration: none;
    display: block;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.footer-menu-link:hover {
    color: #3b82f6; /* primary color */
}

/* Bandeau de financement */

.footer-bandeau {
    background-color: #111827; /* gray-900 */
    border-top: 1px solid #374151; /* gray-700 */
}

.footer-bandeau-content {
    color: #e5e7eb;
}

.footer-bandeau-content img {
    max-height: 4rem;
    width: auto;
}

.footer-bandeau-content .text-sm {
    font-size: 0.875rem;
}

.footer-bandeau-content .text-xs {
    font-size: 0.75rem;
}

.footer-bandeau-content .font-semibold {
    font-weight: 600;
}

.footer-bandeau-content .text-blue-600 {
    color: #2563eb;
}

/* Copyright */

.footer-copyright {
    background-color: #111827; /* gray-900 */
    border-top: 1px solid #374151; /* gray-700 */
}

.footer-copyright p {
    margin: 0;
}

/* Responsive */

@media (max-width: 781px) {
    .footer-bandeau-content .flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .footer-bandeau-content .space-x-8 > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .footer-bandeau-content .space-x-4 > * + * {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* Espacement des colonnes */

.footer-column + .footer-column {
    margin-top: 2rem;
}

@media (min-width: 782px) {
    .footer-column + .footer-column {
        margin-top: 0;
    }
}

/* Liens dans le contenu WYSIWYG */

.footer-content a {
    color: #3b82f6;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-content a:hover {
    color: #1d4ed8;
}

/* Images dans le contenu WYSIWYG */

.footer-content img {
    max-width: 100%;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Listes dans le contenu WYSIWYG */

.footer-content ul,
.footer-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.footer-content li {
    margin: 0.25rem 0;
}

.footer-column:last-child .footer-content {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 782px) {
    .tanika-footer {
        /* grid-template-columns: 20% 20% 1fr !important */
        grid-template-columns: 1fr 1fr 2fr 1fr !important;
    }
    .tanika-footer .footer-column:nth-last-child(-n+2){
        border-left: 1px solid #1C30A8;
        padding-left: 1rem;
    }
}

@media (min-width: 1024px) {
    .tanika-footer {
        grid-template-columns: 1fr 1fr 2fr 1fr !important;
    }
}

.participer-intro {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 1024px) {

    .participer-intro {
        padding-top: 100px;
        padding-bottom: 75px;
    }
}

.participer-intro h1 {
    margin-bottom: 1.25rem;
}

.participer-intro h2 {
    margin-bottom: 1.75rem;
}

.fas.fa-user.wpf-field-icon,
.fas.fa-envelope.wpf-field-icon,
.fas.fa-key.wpf-field-icon {
    display: none !important;
}

#wpforo #wpforo-wrap .wpf-field input[type="text"], 
#wpforo #wpforo-wrap .wpf-field input[type="search"], 
#wpforo #wpforo-wrap .wpf-field input[type="password"], 
#wpforo #wpforo-wrap .wpf-field input[type="email"], 
#wpforo #wpforo-wrap .wpf-field input[type="date"], 
#wpforo #wpforo-wrap .wpf-field input[type="number"], 
#wpforo #wpforo-wrap .wpf-field input[type="url"], 
#wpforo #wpforo-wrap .wpf-field input[type="tel"], 
#wpforo #wpforo-wrap .wpf-field textarea, 
#wpforo #wpforo-wrap .wpf-field select {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #0073FF !important;
    background: rgba(0, 115, 255, 0.1) !important;
    border: none;
    border-radius: 0 !important;
    padding: 14px 16px;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}

#wpforo #wpforo-wrap .wpf-field-wrap {
    border: none !important;
}

#wpforo #wpforo-wrap .wpf-field .wpf-label-wrap {
    width: 100% !important;
}

#wpforo #wpforo-wrap .wpf-field {
    display: flex !important;
    flex-flow: column nowrap !important;
}

#wpforo #wpforo-wrap .wpf-field .wpf-field-wrap {
    width: 100% !important;
}

#wpforo #wpforo-wrap input {
    padding-left: 16px !important;
}

#wpforo #wpforo-wrap input::-moz-placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

#wpforo #wpforo-wrap input::placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

#wpforo #wpforo-wrap textarea::-moz-placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

#wpforo #wpforo-wrap textarea::placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

#wpforo #wpforo-wrap select::-moz-placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

#wpforo #wpforo-wrap select::placeholder { 
    color: #0073FF !important; 
    opacity: 0.7; 
}

.wpforo-login-content .wpf-field .wpf-field-wrap {
    display: flex !important;
    flex-flow: column nowrap !important;
}

.wpforo-register-content .wpf-field .wpf-field-wrap .wpf-field-login,
.wpforo-login-content .wpf-field .wpf-field-wrap .wpf-field-reg {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-register-wrap .wpf-field-login a,
.wpforo-login-content .wpf-field .wpf-field-wrap .wpf-field-reg a {
    border: none !important;
}

#wpforo #wpforo-wrap .wpforo-login-content .wpf-field.wpf-extra-field-end,
#wpforo #wpforo-wrap .wpforo-register-content .wpf-field.wpf-extra-field-end {
    display: none !important;
}

#wpforo #wpforo-wrap .wpf-field-wrap,
#wpforo #wpforo-wrap .wpf-field-wrap input {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

#wpforo #wpforo-wrap .wpforo-register-content .wpf-label-wrap {
    display: none !important;
}

#wpforo #wpforo-wrap input[type="checkbox"] {
    -moz-appearance: none !important;
         appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 20px !important;
    border: 3px solid #FFBE00 !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    margin-top: 1px !important;
    background: #fff !important;
    position: relative !important;
    transition: background 0.15s !important;

    top: 6px !important;
}

#wpforo #wpforo-wrap input[type="checkbox"]:checked::before {
    content: '';
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 11px !important;
    height: 11px !important;
    background: #1C30A8 !important;
    border-radius: 0 !important;
    margin: 2.5px !important;
}

#auth-tab-register .wpforo-legal-checkbox span,
#wpforo #wpforo-wrap .wpf-td.wpfw-1, 
#wpforo #wpforo-wrap label span,
#wpforo #wpforo-wrap #wpf-login-remember + label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #071777 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#auth-tab-login .auth-modal__form-wrap input[type="checkbox"] {
    top: 0px !important;
}

#wpforo #wpforo-wrap .fa-info-circle.wpf-reg-info {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-extra {
    padding: 0 5px 16px 5px !important;
}

/* ==========================================================================
   Auth Modal — Modale connexion/inscription + épuration pages wpForo
   Fichier : resources/css/_auth-modal.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

.auth-modal,
   #wpforo #wpforo-wrap .wpforo-login-wrap,
   #wpforo #wpforo-wrap .wpforo-register-wrap {
       --auth-primary:      #1C30A8;
       --auth-primary-dark: #071777;
       --auth-secondary:    #0073FF;
       --auth-border:       #E2E8F0;
       --auth-text:         #0F1B4D;
       --auth-text-muted:   #6B7A99;
       --auth-bg:           #F4F6FB;
       --auth-surface:      #ffffff;
       --auth-radius:       10px;
       --auth-font:         "EDF 2020", Inter, system-ui, sans-serif;
   }

/* --------------------------------------------------------------------------
      MODALE — Structure
      -------------------------------------------------------------------------- */

.auth-modal {
       position: fixed;
       inset: 0;
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 16px;
       font-family: var(--auth-font);
   }

.auth-modal[hidden] { display: none; }

.auth-modal__overlay {
       position: absolute;
       inset: 0;
       background: rgba(7, 23, 119, 0.55);
       backdrop-filter: blur(3px);
       cursor: pointer;
   }

.auth-modal__box {
       position: relative;
       background: var(--auth-surface);
       border-radius: 14px;
       width: 100%;
       max-width: 460px;
       max-height: 92vh;
       overflow-y: auto;
       box-shadow: 0 24px 60px rgba(7, 23, 119, 0.22);
       z-index: 1;
       animation: auth-modal-in 0.22s ease;
   }

@keyframes auth-modal-in {
       from { opacity: 0; transform: translateY(14px) scale(0.97); }
       to   { opacity: 1; transform: translateY(0) scale(1); }
   }

/* Bouton fermer */

.auth-modal__close {
       position: absolute;
       top: 14px;
       right: 14px;
       background: transparent;
       border: none;
       cursor: pointer;
       padding: 6px;
       color: var(--auth-text-muted);
       border-radius: 6px;
       transition: color 0.15s, background 0.15s;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: center;
   }

.auth-modal__close:hover {
       color: var(--auth-primary);
       background: var(--auth-bg);
   }

.auth-modal__close svg { fill: currentColor; }

/* En-tête */

.auth-modal__header {
       padding: 28px 28px 16px;
       text-align: center;
       border-bottom: 1px solid var(--auth-border);
   }

.auth-modal__titre {
       font-family: var(--auth-font);
       font-size: 1.15rem;
       font-weight: 700;
       color: var(--auth-primary);
       margin: 0 0 6px;
       padding-right: 28px;
   }

.auth-modal__subtitle {
       font-family: var(--auth-font);
       font-size: 0.85rem;
       color: var(--auth-text-muted);
       margin: 0;
       line-height: 1.5;
   }

/* Onglets */

.auth-modal__tabs {
       display: flex;
       border-bottom: 2px solid var(--auth-border);
   }

.auth-modal__tab {
       flex: 1;
       padding: 14px 12px;
       background: transparent;
       border: none;
       border-bottom: 3px solid transparent;
       margin-bottom: -2px;
       font-family: var(--auth-font);
       font-size: 0.88rem;
       font-weight: 600;
       color: var(--auth-text-muted);
       cursor: pointer;
       transition: color 0.2s, border-color 0.2s;
   }

.auth-modal__tab:hover {
       color: var(--auth-primary);
   }

.auth-modal__tab--active {
       color: var(--auth-primary);
       border-bottom-color: var(--auth-primary);
   }

/* Panneaux */

.auth-modal__content {
       padding: 0;
   }

.auth-modal__panel {
       padding: 24px 28px 28px;
   }

/* Loader */

.auth-modal__loader {
       display: flex;
       align-items: center;
       gap: 10px;
       color: var(--auth-text-muted);
       font-size: 0.85rem;
       font-family: var(--auth-font);
       justify-content: center;
       padding: 20px 0;
   }

.auth-spinner {
       width: 18px;
       height: 18px;
       animation: auth-spin 0.8s linear infinite;
       color: var(--auth-primary);
       flex-shrink: 0;
   }

@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Erreur de chargement */

.auth-modal__error {
       font-family: var(--auth-font);
       font-size: 0.85rem;
       color: #c0392b;
       text-align: center;
       padding: 12px 0;
   }

.auth-modal__error a {
       color: var(--auth-secondary);
   }

/* --------------------------------------------------------------------------
      Formulaires wpForo injectés dans la modale — charte Tanika
      -------------------------------------------------------------------------- */

/* Masquer éléments parasites */

.auth-modal__form-wrap #wpforo-title,
   .auth-modal__form-wrap p#wpforo-title,
   .auth-modal__form-wrap h3,
   .auth-modal__form-wrap .wpforo-login-wrap > .wpforo-login-content > h3,
   .auth-modal__form-wrap .wpforo-register-wrap > .wpforo-register-content > h3,
   .auth-modal__form-wrap .wpf-extra-field-end,
   .auth-modal__form-wrap .fas.fa-user.wpf-field-icon,
   .auth-modal__form-wrap .fas.fa-envelope.wpf-field-icon,
   .auth-modal__form-wrap .fas.fa-key.wpf-field-icon,
   .auth-modal__form-wrap .wpf-field-reg,
   .auth-modal__form-wrap .wpf-field-login {
       display: none !important;
   }

/* Wrapper transparent */

.auth-modal__form-wrap .wpforo-login-wrap,
   .auth-modal__form-wrap .wpforo-register-wrap {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin: 0 !important;
   }

.auth-modal__form-wrap .wpforo-login-content,
   .auth-modal__form-wrap .wpforo-register-content {
       background: transparent !important;
       padding: 0 !important;
   }

.auth-modal__form-wrap .wpforo-table,
   .auth-modal__form-wrap .wpforo-register-table {
       background: transparent !important;
   }

/* Reset table → block */

.auth-modal__form-wrap .wpf-table,
   .auth-modal__form-wrap .wpforo-table,
   .auth-modal__form-wrap .wpforo-register-table,
   .auth-modal__form-wrap .wpforo-login-table {
       display: block !important;
       width: 100% !important;
       padding: 0 !important;
       background: transparent !important;
   }

.auth-modal__form-wrap .wpf-tr {
       display: block !important;
       margin-bottom: 12px !important;
       clear: both !important;
   }

.auth-modal__form-wrap .wpf-td {
       display: block !important;
       width: 100% !important;
       padding: 0 !important;
       float: none !important;
   }

.auth-modal__form-wrap .wpf-cl { display: none !important; }

/* Chaque champ en colonne */

.auth-modal__form-wrap .wpf-field {
       display: flex !important;
       flex-direction: column !important;
       margin-bottom: 12px !important;
       background: transparent !important;
       border: none !important;
   }

/* Labels masqués dans la modale (placeholder suffit) */

.auth-modal__form-wrap .wpf-label-wrap { display: none !important; }

/* Wrap input — fond bleu clair, pas de border */

.auth-modal__form-wrap .wpf-field-wrap {
       display: block !important;
       position: relative !important;
       width: 100% !important;
       border: none !important;
       background: transparent !important;
       box-shadow: none !important;
       margin: 0 !important;
   }

/* Inputs — fond rgba bleu, texte bleu, pas de border */

.auth-modal__form-wrap .wpf-login-text,
   .auth-modal__form-wrap input[type="text"],
   .auth-modal__form-wrap input[type="email"],
   .auth-modal__form-wrap input[type="password"] {
       font-family: var(--auth-font) !important;
       font-size: 16px !important;
       font-weight: 400 !important;
       color: #0073FF !important;
       background: rgba(0, 115, 255, 0.1) !important;
       border: none !important;
       border-radius: 0 !important;
       outline: none !important;
       box-shadow: none !important;
       padding: 14px 16px !important;
       width: 100% !important;
       box-sizing: border-box !important;
       -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
       transition: background 0.2s !important;
   }

.auth-modal__form-wrap input[type="text"]::-moz-placeholder, .auth-modal__form-wrap input[type="email"]::-moz-placeholder, .auth-modal__form-wrap input[type="password"]::-moz-placeholder, .auth-modal__form-wrap .wpf-login-text::-moz-placeholder {
       color: #0073FF !important;
       opacity: 0.6 !important;
   }

.auth-modal__form-wrap input[type="text"]::placeholder,
   .auth-modal__form-wrap input[type="email"]::placeholder,
   .auth-modal__form-wrap input[type="password"]::placeholder,
   .auth-modal__form-wrap .wpf-login-text::placeholder {
       color: #0073FF !important;
       opacity: 0.6 !important;
   }

.auth-modal__form-wrap input[type="text"]:focus,
   .auth-modal__form-wrap input[type="email"]:focus,
   .auth-modal__form-wrap input[type="password"]:focus,
   .auth-modal__form-wrap .wpf-login-text:focus {
       background: rgba(0, 115, 255, 0.15) !important;
       box-shadow: 0 0 0 2px rgba(0, 115, 255, 0.3) !important;
   }

/* Icône œil */

.auth-modal__form-wrap .wpf-show-password {
       position: absolute !important;
       right: 14px !important;
       top: 50% !important;
       transform: translateY(-50%) !important;
       color: #0073FF !important;
       cursor: pointer !important;
       font-size: 14px !important;
       z-index: 2 !important;
   }

/* Checkbox — carré FFBE00, coché = carré primary dedans */

.auth-modal__form-wrap input[type="checkbox"] {
       -moz-appearance: none !important;
            appearance: none !important;
       -webkit-appearance: none !important;
       width: 20px !important;
       height: 20px !important;
       min-width: 20px !important;
       border: 3px solid #FFBE00 !important;
       border-radius: 0 !important;
       flex-shrink: 0 !important;
       cursor: pointer !important;
       background: #fff !important;
       position: relative !important;
       margin: 0 !important;
       top: 4px !important;
       transition: background 0.15s !important;
   }

.auth-modal__form-wrap input[type="checkbox"]:checked::before {
       content: '' !important;
       position: absolute !important;
       top: 0 !important;
       left: 0 !important;
       width: 10px !important;
       height: 10px !important;
       background: #1C30A8 !important;
       margin: 2px !important;
       border-radius: 0 !important;
   }

/* "Se souvenir de moi" + "Mot de passe perdu" */

.auth-modal__form-wrap .wpf-extra {
       font-family: var(--auth-font) !important;
       font-size: 13px !important;
       color: #071777 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       flex-wrap: wrap !important;
       gap: 6px 10px !important;
       margin: 0 0 12px !important;
       padding: 0 !important;
       text-align: center !important;
       background: transparent !important;
       border: none !important;
   }

.auth-modal__form-wrap .wpf-extra label {
       font-size: 13px !important;
       color: #071777 !important;
   }

.auth-modal__form-wrap .wpf-forgot-pass {
       font-family: var(--auth-font) !important;
       font-size: 13px !important;
       color: #0073FF !important;
       text-decoration: none !important;
   }

.auth-modal__form-wrap .wpf-forgot-pass:hover {
       color: #1C30A8 !important;
   }

/* Zone actions */

.auth-modal__form-wrap .wpf-field-type-submit {
       display: flex !important;
       flex-direction: column !important;
       align-items: center !important;
       gap: 0 !important;
       padding-top: 20px !important;
       margin-top: 8px !important;
       border-top: 1px solid rgba(0, 115, 255, 0.15) !important;
       background: transparent !important;
   }

/* Bouton submit — accent jaune */

.auth-modal__form-wrap input[type="submit"] {
       font-family: var(--auth-font) !important;
       font-size: 15px !important;
       font-weight: 800 !important;
       text-transform: uppercase !important;
       letter-spacing: 0.05em !important;
       color: #071777 !important;
       background: #FFBE00 !important;
       border: none !important;
       border-radius: 0 !important;
       padding: 14px 40px !important;
       cursor: pointer !important;
       transition: background 0.2s !important;
       width: auto !important;
       box-shadow: none !important;
       -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
       margin: 0 !important;
   }

.auth-modal__form-wrap input[type="submit"]:hover {
       background: #e1a000 !important;
   }

/* Info message */

.auth-modal__form-wrap .wpf-reg-info {
       color: #12D9BF !important;
       font-size: 14px !important;
   }

.auth-modal__form-wrap .wpf-td:has(.wpf-reg-info) {
       font-family: var(--auth-font) !important;
       font-size: 12px !important;
       color: #071777 !important;
       opacity: 0.65 !important;
   }

/* --------------------------------------------------------------------------
      PAGES sign-in / sign-up — épuration du rendu pleine page
      -------------------------------------------------------------------------- */

/* Masquer le menu wpForo complet sur ces pages */

body.wpft-login  #wpforo-menu,
   body.wpft-register #wpforo-menu {
       display: none !important;
   }

/* Masquer le titre "Forum - Connexion" / "Forum - abonnement" */

body.wpft-login  #wpforo-title,
   body.wpft-register #wpforo-title {
       display: none !important;
   }

/* Centrer et encadrer le formulaire sur la page */

body.wpft-login .wpforo-login-wrap,
   body.wpft-register .wpforo-register-wrap {
       max-width: 440px !important;
       margin: 48px auto !important;
       background: #ffffff !important;
       border: 1px solid var(--auth-border) !important;
       border-radius: 14px !important;
       box-shadow: 0 8px 32px rgba(28, 48, 168, 0.1) !important;
       overflow: hidden !important;
   }

body.wpft-login .wpforo-login-content,
   body.wpft-register .wpforo-register-content {
       padding: 32px 32px 28px !important;
       background: transparent !important;
   }

/* Titre "Bienvenue !" / "Rejoignez-nous aujourd'hui !" */

body.wpft-login  .wpforo-login-content  h3,
   body.wpft-register .wpforo-register-content h3 {
       font-family: var(--auth-font) !important;
       font-size: 1.2rem !important;
       font-weight: 700 !important;
       color: var(--auth-primary) !important;
       text-align: center !important;
       margin-bottom: 24px !important;
   }

/* Champs pleine page — même style que dans la modale */

body.wpft-login  .wpf-field-wrap,
   body.wpft-register .wpf-field-wrap {
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       background: var(--auth-bg) !important;
       border: 1.5px solid var(--auth-border) !important;
       border-radius: 8px !important;
       margin-bottom: 12px !important;
       transition: border-color 0.2s !important;
       overflow: hidden !important;
   }

body.wpft-login  .wpf-field-wrap:focus-within,
   body.wpft-register .wpf-field-wrap:focus-within {
       border-color: var(--auth-secondary) !important;
       background: #ffffff !important;
       box-shadow: 0 0 0 3px rgba(0, 115, 255, 0.1) !important;
   }

body.wpft-login  .wpf-field-icon,
   body.wpft-register .wpf-field-icon {
       padding: 0 12px !important;
       color: var(--auth-text-muted) !important;
       font-size: 0.85rem !important;
   }

body.wpft-login  .wpf-login-text,
   body.wpft-login  input[type="text"],
   body.wpft-login  input[type="password"],
   body.wpft-register input[type="text"],
   body.wpft-register input[type="email"],
   body.wpft-register input[type="password"] {
       font-family: var(--auth-font) !important;
       font-size: 0.9rem !important;
       color: var(--auth-text) !important;
       background: transparent !important;
       border: none !important;
       outline: none !important;
       padding: 11px 14px 11px 0 !important;
       width: 100% !important;
   }

body.wpft-login  input[type="submit"],
   body.wpft-register input[type="submit"] {
       font-family: var(--auth-font) !important;
       width: 100% !important;
       padding: 12px 24px !important;
       background: var(--auth-primary) !important;
       color: #ffffff !important;
       border: none !important;
       border-radius: 8px !important;
       font-size: 0.95rem !important;
       font-weight: 700 !important;
       cursor: pointer !important;
       transition: background 0.2s !important;
       margin-bottom: 12px !important;
   }

body.wpft-login  input[type="submit"]:hover,
   body.wpft-register input[type="submit"]:hover {
       background: var(--auth-primary-dark) !important;
   }

/* Se souvenir + mot de passe oublié */

body.wpft-login .wpf-extra {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       color: var(--auth-text-muted) !important;
       text-align: center !important;
   }

body.wpft-login .wpf-forgot-pass {
       color: var(--auth-secondary) !important;
       text-decoration: none !important;
   }

/* Lien "Créer un compte" / "Connexion" */

body.wpft-login  .wpf-field-reg a,
   body.wpft-register .wpf-field-login a {
       font-family: var(--auth-font) !important;
       font-size: 0.82rem !important;
       color: var(--auth-secondary) !important;
       text-decoration: none !important;
       display: inline-flex !important;
       align-items: center !important;
       gap: 5px !important;
   }

body.wpft-login  .wpf-field-reg a:hover,
   body.wpft-register .wpf-field-login a:hover {
       color: var(--auth-primary) !important;
   }

/* Labels */

body.wpft-login  .wpf-label,
   body.wpft-register .wpf-label {
       font-family: var(--auth-font) !important;
       font-size: 0.78rem !important;
       font-weight: 600 !important;
       color: var(--auth-text-muted) !important;
   }

/* Description (ex: longueur min pseudo) */

body.wpft-register .wpf-desc {
       font-size: 0.7rem !important;
       color: var(--auth-text-muted) !important;
   }

/* Espacement global */

body.wpft-login  .wpforo-login-table,
   body.wpft-register .wpforo-register-table {
       background: transparent !important;
   }

/* Responsive */

@media (max-width: 480px) {
       .auth-modal__box {
           border-radius: 10px;
       }
   
       .auth-modal__panel {
           padding: 20px 18px 24px;
       }
   
       .auth-modal__header {
           padding: 22px 18px 14px;
       }
   
       body.wpft-login  .wpforo-login-content,
       body.wpft-register .wpforo-register-content {
           padding: 24px 20px 20px !important;
       }
   }

#cmplz-document p, 
#cmplz-document span, 
#cmplz-document li, 
#cmplz-document td, 
#cmplz-document a, 
.editor-styles-wrapper .cmplz-unlinked-mode p, 
.editor-styles-wrapper .cmplz-unlinked-mode li, 
.editor-styles-wrapper .cmplz-unlinked-mode td {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

#cmplz-document h2 {
    font-size: 40px !important;
    line-height: 48px !important;
    margin-top: 2rem;
}

#cmplz-document .cmplz-subtitle {
    font-size: 32px !important;
    line-height: 40px !important;
}

/* Directives Tailwind */

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: "EDF 2020", Inter, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

@media (min-width: 640px) {

    .container {
        max-width: 640px;
    }
}

@media (min-width: 782px) {

    .container {
        max-width: 782px;
    }
}

@media (min-width: 1024px) {

    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1920px) {

    .container {
        max-width: 1920px;
    }
}

/* Utilitaires globaux */

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

.inset-0 {
    inset: 0px;
}

.\!left-1\/2 {
    left: 50% !important;
}

.\!right-1\/2 {
    right: 50% !important;
}

.bottom-0 {
    bottom: 0px;
}

.bottom-4 {
    bottom: 1rem;
}

.left-0 {
    left: 0px;
}

.left-\[calc\(50\%-_30px\)\] {
    left: calc(50% - 30px);
}

.right-0 {
    right: 0px;
}

.right-4 {
    right: 1rem;
}

.top-0 {
    top: 0px;
}

.top-\[128px\] {
    top: 128px;
}

.top-\[173px\] {
    top: 173px;
}

.top-full {
    top: 100%;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.m-0 {
    margin: 0px;
}

.\!mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.\!-ml-\[50vw\] {
    margin-left: -50vw !important;
}

.\!-mr-\[50vw\] {
    margin-right: -50vw !important;
}

.\!mb-5 {
    margin-bottom: 1.25rem !important;
}

.\!mb-8 {
    margin-bottom: 2rem !important;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-4 {
    margin-left: 1rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-12 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mt-\[66px\] {
    margin-top: 66px;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.table-row {
    display: table-row;
}

.grid {
    display: grid;
}

.contents {
    display: contents;
}

.list-item {
    display: list-item;
}

.hidden {
    display: none;
}

.\!h-auto {
    height: auto !important;
}

.\!h-full {
    height: 100% !important;
}

.h-0 {
    height: 0px;
}

.h-0\.5 {
    height: 0.125rem;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-16 {
    height: 4rem;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-64 {
    height: 16rem;
}

.h-\[53px\] {
    height: 53px;
}

.h-full {
    height: 100%;
}

.max-h-full {
    max-height: 100%;
}

.min-h-\[416px\] {
    min-height: 416px;
}

.min-h-screen {
    min-height: 100vh;
}

.\!w-\[153px\] {
    width: 153px !important;
}

.\!w-full {
    width: 100% !important;
}

.w-0 {
    width: 0px;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-16 {
    width: 4rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-\[100px\] {
    width: 100px;
}

.w-\[125px\] {
    width: 125px;
}

.w-\[175px\] {
    width: 175px;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content;
}

.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.min-w-48 {
    min-width: 12rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-\[130px\] {
    max-width: 130px;
}

.max-w-\[43px\] {
    max-width: 43px;
}

.max-w-\[66px\] {
    max-width: 66px;
}

.max-w-\[70px\] {
    max-width: 70px;
}

.max-w-\[80rem\] {
    max-width: 80rem;
}

.max-w-\[81px\] {
    max-width: 81px;
}

.max-w-\[82rem\] {
    max-width: 82rem;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-none {
    flex: none;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.basis-1\/3 {
    flex-basis: 33.333333%;
}

.basis-2\/3 {
    flex-basis: 66.666667%;
}

.basis-\[41\%\] {
    flex-basis: 41%;
}

.basis-\[59\%\] {
    flex-basis: 59%;
}

.basis-\[60\%\] {
    flex-basis: 60%;
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
    resize: both;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.\!justify-end {
    justify-content: flex-end !important;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-0 {
    gap: 0px;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-10 {
    gap: 2.5rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
    overflow: hidden;
}

.whitespace-normal {
    white-space: normal;
}

.break-words {
    overflow-wrap: break-word;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-r-4 {
    border-right-width: 4px;
}

.border-t {
    border-top-width: 1px;
}

.border-t-4 {
    border-top-width: 4px;
}

.\!border-secondary {
    --tw-border-opacity: 1 !important;
    border-color: rgb(0 115 255 / var(--tw-border-opacity, 1)) !important;
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-primary {
    --tw-border-opacity: 1;
    border-color: rgb(28 48 168 / var(--tw-border-opacity, 1));
}

.border-secondary {
    --tw-border-opacity: 1;
    border-color: rgb(0 115 255 / var(--tw-border-opacity, 1));
}

.border-transparent {
    border-color: transparent;
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-t-gray-400 {
    --tw-border-opacity: 1;
    border-top-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-t-primary {
    --tw-border-opacity: 1;
    border-top-color: rgb(28 48 168 / var(--tw-border-opacity, 1));
}

.bg-accent {
    --tw-bg-opacity: 1;
    background-color: rgb(255 190 0 / var(--tw-bg-opacity, 1));
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-indigo-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
}

.bg-primary-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1));
}

.bg-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 115 255 / var(--tw-bg-opacity, 1));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-opacity-50 {
    --tw-bg-opacity: 0.5;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-primary {
    --tw-gradient-from: #1C30A8 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(28 48 168 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-secondary {
    --tw-gradient-to: #0073FF var(--tw-gradient-to-position);
}

.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}

.object-center {
    -o-object-position: center;
       object-position: center;
}

.\!p-0 {
    padding: 0px !important;
}

.p-0 {
    padding: 0px;
}

.p-2 {
    padding: 0.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.\!px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.\!py-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.\!pb-\[80px\] {
    padding-bottom: 80px !important;
}

.\!pl-\[33px\] {
    padding-left: 33px !important;
}

.\!pt-\[90px\] {
    padding-top: 90px !important;
}

.pb-0 {
    padding-bottom: 0px;
}

.pl-\[33px\] {
    padding-left: 33px;
}

.pr-\[62px\] {
    padding-right: 62px;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.text-center {
    text-align: center;
}

.font-primary {
    font-family: "EDF 2020", Inter, system-ui, sans-serif;
}

.\!text-\[30px\] {
    font-size: 30px !important;
}

.\!text-\[60px\] {
    font-size: 60px !important;
}

.\!text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-\[30px\] {
    font-size: 30px;
}

.text-\[40px\] {
    font-size: 40px;
}

.text-\[60px\] {
    font-size: 60px;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-black {
    font-weight: 900;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.\!leading-\[30px\] {
    line-height: 30px !important;
}

.\!leading-\[60px\] {
    line-height: 60px !important;
}

.leading-\[1\.7\] {
    line-height: 1.7;
}

.leading-\[30px\] {
    line-height: 30px;
}

.leading-\[40px\] {
    line-height: 40px;
}

.leading-\[60px\] {
    line-height: 60px;
}

.leading-relaxed {
    line-height: 1.625;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.\!text-accent {
    --tw-text-opacity: 1 !important;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1)) !important;
}

.\!text-white {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-accent {
    --tw-text-opacity: 1;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-primary {
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
}

.text-primary-dark {
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-secondary {
    --tw-text-opacity: 1;
    color: rgb(0 115 255 / var(--tw-text-opacity, 1));
}

.text-tertiary {
    --tw-text-opacity: 1;
    color: rgb(18 217 191 / var(--tw-text-opacity, 1));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
    text-decoration-line: underline;
}

.\!no-underline {
    text-decoration-line: none !important;
}

.no-underline {
    text-decoration-line: none;
}

.opacity-0 {
    opacity: 0;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-90 {
    opacity: 0.9;
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.outline {
    outline-style: solid;
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-primary {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-filter {
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.mobile-only {
    display: block;
}

@media (min-width: 1024px) {

    .mobile-only {
        display: none;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 1024px) {

    .desktop-only {
        display: block;
    }
}

.tablet-up {
    display: none;
}

@media (min-width: 782px) {

    .tablet-up {
        display: block;
    }
}

.mobile-up {
    display: block;
}

body {
  overflow-x: hidden;
  height: auto;
}

/* ===================================
   STYLES GLOBAUX FULL-WIDTH
   =================================== */

/* Classe pour les sections en pleine largeur */

.cta-centered--full-width,
.features-screenshot--full-width,
.hero-centered--full-width,
.testimonials-cards--full-width,
.newsletter-centered--full-width,
.cards-grid--full-width,
.team-grid--full-width,
.tabs-simple--full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Composants personnalisés */

/* Responsive utilities */

/* Animations personnalisées */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Focus states accessibles */

.focus-visible:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 2px;
}

/* Scrollbar personnalisée */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

::-webkit-scrollbar-thumb:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.hover\:-translate-y-2:hover {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(28 48 168 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(7 23 119 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.hover\:\!text-secondary:hover {
    --tw-text-opacity: 1 !important;
    color: rgb(0 115 255 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-accent:hover {
    --tw-text-opacity: 1;
    color: rgb(255 190 0 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(28 48 168 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-dark:hover {
    --tw-text-opacity: 1;
    color: rgb(7 23 119 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(0 115 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-transparent:focus {
    border-color: transparent;
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-primary:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(28 48 168 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}

.disabled\:opacity-40:disabled {
    opacity: 0.4;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

@media (min-width: 640px) {

    .sm\:block {
        display: block;
    }

    .sm\:inline-block {
        display: inline-block;
    }

    .sm\:inline {
        display: inline;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:inline-flex {
        display: inline-flex;
    }

    .sm\:grid {
        display: grid;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:w-1\/2 {
        width: 50%;
    }

    .sm\:w-1\/3 {
        width: 33.333333%;
    }

    .sm\:w-1\/4 {
        width: 25%;
    }

    .sm\:w-2\/3 {
        width: 66.666667%;
    }

    .sm\:w-\[150px\] {
        width: 150px;
    }

    .sm\:w-full {
        width: 100%;
    }

    .sm\:max-w-none {
        max-width: none;
    }

    .sm\:basis-\[60\%\] {
        flex-basis: 60%;
    }

    .sm\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .sm\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:flex-row-reverse {
        flex-direction: row-reverse;
    }

    .sm\:flex-col {
        flex-direction: column;
    }

    .sm\:flex-col-reverse {
        flex-direction: column-reverse;
    }

    .sm\:items-center {
        align-items: center;
    }

    .sm\:justify-center {
        justify-content: center;
    }

    .sm\:justify-between {
        justify-content: space-between;
    }

    .sm\:gap-1 {
        gap: 0.25rem;
    }

    .sm\:gap-10 {
        gap: 2.5rem;
    }

    .sm\:gap-12 {
        gap: 3rem;
    }

    .sm\:gap-2 {
        gap: 0.5rem;
    }

    .sm\:gap-3 {
        gap: 0.75rem;
    }

    .sm\:gap-4 {
        gap: 1rem;
    }

    .sm\:gap-5 {
        gap: 1.25rem;
    }

    .sm\:gap-6 {
        gap: 1.5rem;
    }

    .sm\:gap-8 {
        gap: 2rem;
    }

    .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem * var(--tw-space-x-reverse));
        margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .sm\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .sm\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sm\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sm\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sm\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .sm\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .sm\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .sm\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .sm\:text-left {
        text-align: left;
    }

    .sm\:text-center {
        text-align: center;
    }

    .sm\:text-right {
        text-align: right;
    }
}

@media (min-width: 782px) {

    .md\:absolute {
        position: absolute;
    }

    .md\:top-\[10\%\] {
        top: 10%;
    }

    .md\:mb-\[90px\] {
        margin-bottom: 90px;
    }

    .md\:mt-0 {
        margin-top: 0px;
    }

    .md\:block {
        display: block;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:flex {
        display: flex;
    }

    .md\:inline-flex {
        display: inline-flex;
    }

    .md\:grid {
        display: grid;
    }

    .md\:hidden {
        display: none;
    }

    .md\:h-\[173px\] {
        height: 173px;
    }

    .md\:min-h-\[520px\] {
        min-height: 520px;
    }

    .md\:w-1\/2 {
        width: 50%;
    }

    .md\:w-1\/3 {
        width: 33.333333%;
    }

    .md\:w-1\/4 {
        width: 25%;
    }

    .md\:w-2\/3 {
        width: 66.666667%;
    }

    .md\:w-\[202px\] {
        width: 202px;
    }

    .md\:w-full {
        width: 100%;
    }

    .md\:max-w-none {
        max-width: none;
    }

    .md\:basis-full {
        flex-basis: 100%;
    }

    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-row-reverse {
        flex-direction: row-reverse;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:flex-col-reverse {
        flex-direction: column-reverse;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:justify-center {
        justify-content: center;
    }

    .md\:justify-between {
        justify-content: space-between;
    }

    .md\:gap-1 {
        gap: 0.25rem;
    }

    .md\:gap-10 {
        gap: 2.5rem;
    }

    .md\:gap-12 {
        gap: 3rem;
    }

    .md\:gap-2 {
        gap: 0.5rem;
    }

    .md\:gap-3 {
        gap: 0.75rem;
    }

    .md\:gap-4 {
        gap: 1rem;
    }

    .md\:gap-5 {
        gap: 1.25rem;
    }

    .md\:gap-6 {
        gap: 1.5rem;
    }

    .md\:gap-8 {
        gap: 2rem;
    }

    .md\:gap-\[110px\] {
        gap: 110px;
    }

    .md\:gap-\[120px\] {
        gap: 120px;
    }

    .md\:gap-\[90px\] {
        gap: 90px;
    }

    .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem * var(--tw-space-x-reverse));
        margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .md\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .md\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .md\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .md\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .md\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .md\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .md\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .md\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .md\:py-\[147px\] {
        padding-top: 147px;
        padding-bottom: 147px;
    }

    .md\:pb-8 {
        padding-bottom: 2rem;
    }

    .md\:pt-\[147px\] {
        padding-top: 147px;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:text-center {
        text-align: center;
    }

    .md\:text-right {
        text-align: right;
    }

    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }

    .md\:text-\[60px\] {
        font-size: 60px;
    }

    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    .md\:leading-\[60px\] {
        line-height: 60px;
    }
}

@media (min-width: 1024px) {

    .lg\:mb-\[66px\] {
        margin-bottom: 66px;
    }

    .lg\:block {
        display: block;
    }

    .lg\:inline-block {
        display: inline-block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:inline-flex {
        display: inline-flex;
    }

    .lg\:grid {
        display: grid;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:h-\[53px\] {
        height: 53px;
    }

    .lg\:min-h-\[678px\] {
        min-height: 678px;
    }

    .lg\:w-1\/2 {
        width: 50%;
    }

    .lg\:w-1\/3 {
        width: 33.333333%;
    }

    .lg\:w-1\/4 {
        width: 25%;
    }

    .lg\:w-2\/3 {
        width: 66.666667%;
    }

    .lg\:w-\[200px\] {
        width: 200px;
    }

    .lg\:w-full {
        width: 100%;
    }

    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-row-reverse {
        flex-direction: row-reverse;
    }

    .lg\:flex-col {
        flex-direction: column;
    }

    .lg\:flex-col-reverse {
        flex-direction: column-reverse;
    }

    .lg\:items-center {
        align-items: center;
    }

    .lg\:justify-center {
        justify-content: center;
    }

    .lg\:justify-between {
        justify-content: space-between;
    }

    .lg\:gap-1 {
        gap: 0.25rem;
    }

    .lg\:gap-10 {
        gap: 2.5rem;
    }

    .lg\:gap-12 {
        gap: 3rem;
    }

    .lg\:gap-2 {
        gap: 0.5rem;
    }

    .lg\:gap-3 {
        gap: 0.75rem;
    }

    .lg\:gap-4 {
        gap: 1rem;
    }

    .lg\:gap-5 {
        gap: 1.25rem;
    }

    .lg\:gap-6 {
        gap: 1.5rem;
    }

    .lg\:gap-8 {
        gap: 2rem;
    }

    .lg\:gap-\[120px\] {
        gap: 120px;
    }

    .lg\:gap-\[22px\] {
        gap: 22px;
    }

    .lg\:gap-\[60px\] {
        gap: 60px;
    }

    .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem * var(--tw-space-x-reverse));
        margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .lg\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .lg\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .lg\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .lg\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .lg\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .lg\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .lg\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .lg\:py-\[147px\] {
        padding-top: 147px;
        padding-bottom: 147px;
    }

    .lg\:pb-\[147px\] {
        padding-bottom: 147px;
    }

    .lg\:pb-\[66px\] {
        padding-bottom: 66px;
    }

    .lg\:pb-\[75px\] {
        padding-bottom: 75px;
    }

    .lg\:pt-0 {
        padding-top: 0px;
    }

    .lg\:pt-\[100px\] {
        padding-top: 100px;
    }

    .lg\:pt-\[147px\] {
        padding-top: 147px;
    }

    .lg\:text-left {
        text-align: left;
    }

    .lg\:text-center {
        text-align: center;
    }

    .lg\:text-right {
        text-align: right;
    }

    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (min-width: 1280px) {

    .xl\:block {
        display: block;
    }

    .xl\:inline-block {
        display: inline-block;
    }

    .xl\:inline {
        display: inline;
    }

    .xl\:flex {
        display: flex;
    }

    .xl\:inline-flex {
        display: inline-flex;
    }

    .xl\:grid {
        display: grid;
    }

    .xl\:hidden {
        display: none;
    }

    .xl\:w-1\/2 {
        width: 50%;
    }

    .xl\:w-1\/3 {
        width: 33.333333%;
    }

    .xl\:w-1\/4 {
        width: 25%;
    }

    .xl\:w-2\/3 {
        width: 66.666667%;
    }

    .xl\:w-\[173px\] {
        width: 173px;
    }

    .xl\:w-full {
        width: 100%;
    }

    .xl\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:flex-row {
        flex-direction: row;
    }

    .xl\:flex-row-reverse {
        flex-direction: row-reverse;
    }

    .xl\:flex-col {
        flex-direction: column;
    }

    .xl\:flex-col-reverse {
        flex-direction: column-reverse;
    }

    .xl\:items-center {
        align-items: center;
    }

    .xl\:justify-center {
        justify-content: center;
    }

    .xl\:justify-between {
        justify-content: space-between;
    }

    .xl\:gap-1 {
        gap: 0.25rem;
    }

    .xl\:gap-10 {
        gap: 2.5rem;
    }

    .xl\:gap-12 {
        gap: 3rem;
    }

    .xl\:gap-2 {
        gap: 0.5rem;
    }

    .xl\:gap-3 {
        gap: 0.75rem;
    }

    .xl\:gap-4 {
        gap: 1rem;
    }

    .xl\:gap-5 {
        gap: 1.25rem;
    }

    .xl\:gap-6 {
        gap: 1.5rem;
    }

    .xl\:gap-8 {
        gap: 2rem;
    }

    .xl\:gap-\[120px\] {
        gap: 120px;
    }

    .xl\:gap-\[60px\] {
        gap: 60px;
    }

    .xl\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(2rem * var(--tw-space-x-reverse));
        margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .xl\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .xl\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .xl\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .xl\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .xl\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .xl\:py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .xl\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .xl\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .xl\:py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .xl\:text-left {
        text-align: left;
    }

    .xl\:text-center {
        text-align: center;
    }

    .xl\:text-right {
        text-align: right;
    }
}