/**
 * DSFR Grid Helpers
 *
 * Helpers complémentaires pour le système de grille DSFR.
 * Ces classes étendent les capacités de la grille DSFR native.
 *
 * Documentation complète : docs/DSFR_GRID_PATTERNS.md
 */

/* ============================================
   GUTTERS (Espacement entre colonnes)
   ============================================ */

/* Gutters small (0.5rem) */
.fr-grid-row--gutters-sm {
    gap: 0.5rem;
}

/* Gutters medium (1rem) - Par défaut dans DSFR */
.fr-grid-row--gutters-md {
    gap: 1rem;
}

/* Gutters large (2rem) */
.fr-grid-row--gutters-lg {
    gap: 2rem;
}

/* Gutters extra-large (3rem) */
.fr-grid-row--gutters-xl {
    gap: 3rem;
}

/* ============================================
   ALIGNEMENTS VERTICAUX
   ============================================ */

/* Aligner les éléments en haut */
.fr-grid-row--top {
    align-items: flex-start;
}

/* Aligner les éléments au milieu (vertical center) */
.fr-grid-row--middle {
    align-items: center;
}

/* Aligner les éléments en bas */
.fr-grid-row--bottom {
    align-items: flex-end;
}

/* Étendre les éléments sur toute la hauteur */
.fr-grid-row--stretch {
    align-items: stretch;
}

/* ============================================
   ALIGNEMENTS HORIZONTAUX
   ============================================ */

/* Aligner à gauche */
.fr-grid-row--left {
    justify-content: flex-start;
}

/* Centrer horizontalement */
.fr-grid-row--center {
    justify-content: center;
}

/* Aligner à droite */
.fr-grid-row--right {
    justify-content: flex-end;
}

/* Espacement égal entre les éléments */
.fr-grid-row--between {
    justify-content: space-between;
}

/* Espacement égal autour des éléments */
.fr-grid-row--around {
    justify-content: space-around;
}

/* Espacement égal entre tous les éléments (y compris les bords) */
.fr-grid-row--evenly {
    justify-content: space-evenly;
}

/* ============================================
   ORDRE DES COLONNES
   ============================================ */

/* Inverser l'ordre des colonnes */
.fr-grid-row--reverse {
    flex-direction: row-reverse;
}

/* Direction en colonne */
.fr-grid-row--column {
    flex-direction: column;
}

/* Direction en colonne inversée */
.fr-grid-row--column-reverse {
    flex-direction: column-reverse;
}

/* ============================================
   WRAPPING
   ============================================ */

/* Empêcher le retour à la ligne */
.fr-grid-row--nowrap {
    flex-wrap: nowrap;
}

/* Retour à la ligne inversé */
.fr-grid-row--wrap-reverse {
    flex-wrap: wrap-reverse;
}

/* ============================================
   COLONNES - Utilitaires supplémentaires
   ============================================ */

/* Colonne auto (largeur selon contenu) */
.fr-col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* Colonne flexible (prend l'espace disponible) */
.fr-col-flex {
    flex: 1 1 0%;
}

/* ============================================
   OFFSET (Décalage de colonnes)
   ============================================ */

/* Décalage de 1 colonne (sur 12) */
.fr-col-offset-1 {
    margin-left: calc(100% / 12);
}

/* Décalage de 2 colonnes */
.fr-col-offset-2 {
    margin-left: calc(100% / 12 * 2);
}

/* Décalage de 3 colonnes */
.fr-col-offset-3 {
    margin-left: calc(100% / 12 * 3);
}

/* Décalage de 4 colonnes */
.fr-col-offset-4 {
    margin-left: calc(100% / 12 * 4);
}

/* Décalage de 6 colonnes (moitié) */
.fr-col-offset-6 {
    margin-left: 50%;
}

/* ============================================
   RESPONSIVE OFFSET
   ============================================ */

/* Offset responsive pour tablettes et desktop */
@media (min-width: 768px) {
    .fr-col-md-offset-1 {
        margin-left: calc(100% / 12);
    }

    .fr-col-md-offset-2 {
        margin-left: calc(100% / 12 * 2);
    }

    .fr-col-md-offset-3 {
        margin-left: calc(100% / 12 * 3);
    }

    .fr-col-md-offset-4 {
        margin-left: calc(100% / 12 * 4);
    }
}

/* Offset responsive pour desktop uniquement */
@media (min-width: 992px) {
    .fr-col-lg-offset-1 {
        margin-left: calc(100% / 12);
    }

    .fr-col-lg-offset-2 {
        margin-left: calc(100% / 12 * 2);
    }

    .fr-col-lg-offset-3 {
        margin-left: calc(100% / 12 * 3);
    }

    .fr-col-lg-offset-4 {
        margin-left: calc(100% / 12 * 4);
    }
}

/* ============================================
   UTILITAIRES D'AFFICHAGE
   ============================================ */

/* Cacher sur mobile, afficher sur tablette+ */
@media (max-width: 767px) {
    .fr-hidden-sm {
        display: none !important;
    }
}

/* Cacher sur tablette+, afficher sur mobile */
@media (min-width: 768px) {
    .fr-visible-sm {
        display: none !important;
    }
}

/* Cacher sur desktop+ */
@media (min-width: 992px) {
    .fr-hidden-lg {
        display: none !important;
    }
}