/* ============================================================================
 * flyfishing / custom.css
 *
 * Surcharges propres a la declinaison "flyfishing".
 * Ce fichier est charge APRES css/base.css : a specificite egale, ce qui est
 * ecrit ici gagne. Il n'est jamais ecrase par le script d'export, contrairement
 * a base.css et index.html.
 *
 * Cotes relevees sur la maquette Figma "page landing page 1" (node 10364-5465),
 * cadre de reference 1920 px, colonne de contenu 1600 px (marges de 160 px).
 *
 * Rappels :
 *  - base.css conserve l'ordre de chargement d'origine du site et porte des
 *    commentaires "=== /chemin/du/fichier.css ===" pour retrouver la regle
 *    d'origine et sa specificite.
 *  - eviter !important tant qu'un selecteur plus precis suffit.
 *  - les chemins d'images sont relatifs a ce fichier : url("../images/xxx.svg").
 *
 * Sommaire
 *   1. Variables et socle
 *   2. Diaporama
 *   3. Accroche et logo
 *   4. Sous-categories
 *   5. Visuels mis en avant
 *   6. Produits phares
 *   7. Presentation
 *   8. Logos de marques
 *   9. Bouton commun
 *  10. Menu hamburger
 *  11. Responsive
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Variables et socle
 * ------------------------------------------------------------------------ */
:root {
    --ff-noir: #1d1d1b;
    --ff-texte: #302e2f;
    --ff-rouge: #e52c2e;
    --ff-bord: #e2e3e4;
    --ff-blanc: #fff;

    --ff-contenu: 1600px;   /* colonne de contenu */
    --ff-marge: 160px;      /* marge laterale a 1920 px */
    --ff-gap: 30px;         /* gouttiere commune aux grilles */
}

/* Le padding est pris en plus de la colonne : a 1920 px on retrouve les
   marges de 160 px et la colonne de 1600 px de la maquette. */
.ff-container {
    width: 100%;
    max-width: calc(var(--ff-contenu) + 40px);
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

/* Titres de section masques : la maquette ne les affiche pas, mais ils
   structurent le document pour l'accessibilite et le referencement. */
.ff-categories .sr-only,
.ff-brands .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * 2. Diaporama, 6 bandeaux en 1920 x 700
 *    Carrousel Bootstrap du theme, seule la presentation est reprise ici.
 * ------------------------------------------------------------------------ */
.ff-slider {
    position: relative;
    margin: 0;
}

.ff-slider .carousel-inner {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* base.css impose .carousel .carousel-item{height:100%}, ce qui rogne la
   diapo a une hauteur intermediaire : on rend la main a l'image. */
.ff-slider .carousel-inner,
.ff-slider .carousel-item {
    height: auto;
}

.ff-slider .carousel-item > a,
.ff-slider .carousel-item img {
    display: block;
    width: 100%;
}

.ff-slider .carousel-item img {
    height: auto;
    /* La maquette pose un rapport 1920 x 700 : on le tient meme si le
       navigateur dispose d'une image de rapport different. */
    aspect-ratio: 1920 / 700;
    object-fit: cover;
}

/* Puces : traits de 20 x 5, 20 px d'ecart, a 40 px du bas, rouge pour l'active.
   Le prefixe #carousel est necessaire pour passer devant la regle
   #content.page-home #carousel .carousel-indicators li de base.css. */
#content.page-home #carousel.ff-slider .carousel-indicators {
    right: 0;
    bottom: 40px;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#content.page-home #carousel.ff-slider .carousel-indicators li {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 20px;
    height: 5px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--ff-blanc);
    opacity: 1;
    text-indent: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#content.page-home #carousel.ff-slider .carousel-indicators li.active {
    background-color: var(--ff-rouge);
}

/* ---------------------------------------------------------------------------
 * 3. Accroche et logo Hook Up Fly Fishing
 *    Section de 296 px : 50 px de padding, 52 + 20 + 124 de contenu.
 * ------------------------------------------------------------------------ */
.ff-intro {
    padding: 50px 0;
    background-color: var(--ff-blanc);
}

.ff-intro__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
    text-align: center;
}

.ff-intro__baseline {
    display: block;
    font-family: Barlow, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 52px;
    color: var(--ff-noir);
    text-transform: none;
}

.ff-intro__logo {
    display: block;
    width: 397px;
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
 * 4. Sous-categories, 2 lignes de 6 tuiles de 242 x 202
 * ------------------------------------------------------------------------ */
.ff-categories {
    padding: 0 0 80px;
    background-color: var(--ff-blanc);
}

.ff-categories__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--ff-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-categories__cell {
    display: flex;
}

.ff-category {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    min-height: 202px;
    padding: 20px 15px 25px;
    border: 1px solid var(--ff-bord);
    border-radius: 5px;
    background-color: var(--ff-blanc);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ff-category:hover,
.ff-category:focus {
    border-color: var(--ff-noir);
    box-shadow: 0 2px 10px rgb(29 29 27 / 8%);
    text-decoration: none;
}

.ff-category__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
}

.ff-category__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.ff-category__label {
    display: block;
    font-family: Barlow, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ff-texte);
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * 5. Visuels mis en avant, 785 + 378 + 378 sur 510 de haut, coins a 20
 *    Les proportions de la maquette sont tenues par flex-grow, pour rester
 *    justes a toutes les largeurs.
 * ------------------------------------------------------------------------ */
.ff-highlights {
    background-color: var(--ff-blanc);
}

.ff-highlights__row {
    display: flex;
    gap: var(--ff-gap);
    align-items: stretch;
}

.ff-highlight {
    display: block;
    flex: 378 1 0;
    overflow: hidden;
    border-radius: 20px;
    line-height: 0;
}

.ff-highlight--wide {
    flex: 785 1 0;
}

.ff-highlight img {
    display: block;
    width: 100%;
    height: 510px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ff-highlight:hover img,
.ff-highlight:focus img {
    transform: scale(1.03);
}

/* ---------------------------------------------------------------------------
 * 6. Produits phares
 *    Markup du module conserve tel quel, on aligne juste la largeur de la
 *    colonne et les marges verticales sur la maquette (section de 841 px).
 * ------------------------------------------------------------------------ */
#dmutabs.container {
    max-width: var(--ff-contenu);
    padding-top: 80px;
    padding-bottom: 80px;
}

#dmutabs .title_mct {
    margin-bottom: 40px;
    font-family: Barlow, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--ff-noir);
}

/* Cinq produits, donc pas de carrousel : une grille remplace le defilement
   horizontal. Les cartes gardent le markup et l'habillage du theme, seule la
   largeur fixe de 296 px prevue pour le scroller est liberee.
   minmax(0, 1fr) et non 1fr : le minimum auto d'une piste vaut la largeur
   min-content de la carte, ce qui faisait deborder la grille en mobile. */
#content.page-home #dmutabs .ff-produits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ff-gap);
    margin-bottom: 40px;
}

#content.page-home #dmutabs .ff-produits > .slider-product {
    flex: initial;
    max-width: none;
}

/* ---------------------------------------------------------------------------
 * 7. Presentation, image 595 x 496 a gauche, texte a droite
 *    Filets de 1 px en haut et en bas, sur toute la largeur.
 * ------------------------------------------------------------------------ */
.ff-presentation {
    padding: 100px 0 120px;
    border-top: 1px solid var(--ff-noir);
    border-bottom: 1px solid var(--ff-noir);
    background-color: var(--ff-blanc);
}

.ff-presentation__row {
    display: flex;
    gap: 85px;
    align-items: flex-start;
}

.ff-presentation__media {
    flex: 0 0 595px;
    max-width: 595px;
    overflow: hidden;
    border-radius: 20px;
    line-height: 0;
}

.ff-presentation__media img {
    display: block;
    width: 100%;
    height: 496px;
    object-fit: cover;
}

.ff-presentation__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    min-width: 0;
}

.ff-presentation__title {
    margin: 0;
    font-family: Barlow, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    color: var(--ff-noir);
    text-transform: none;
}

.ff-presentation__text {
    /* La maquette pose 30 px entre le titre et le texte, 20 px entre les
       paragraphes. Le gap de 40 du parent vaut pour le bouton. */
    margin-top: -10px;
}

.ff-presentation__text p {
    margin: 0 0 20px;
    font-family: Barlow, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 35px;
    color: var(--ff-texte);
}

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

.ff-presentation__closing {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 8. Logos de marques, une ligne, fixes, avec lien
 * ------------------------------------------------------------------------ */
.ff-brands {
    padding: 40px 0 50px;
    background-color: var(--ff-blanc);
}

/* Une seule ligne de 9 logos : les logos sources vont de 200 a 880 px de large,
   une grille de colonnes egales evite qu'un logo large fasse passer la ligne
   a la suivante. */
.ff-brands__list {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: center;
    gap: var(--ff-gap);
    margin: 0 0 var(--ff-gap);
    padding: 0;
    list-style: none;
}

.ff-brands__list li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.ff-brands__list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 134px;
}

.ff-brands__list img {
    max-width: 100%;
    max-height: 134px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.ff-brands__list a:hover img,
.ff-brands__list a:focus img {
    opacity: 0.7;
}

.ff-brands .ff-btn {
    display: flex;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
 * 9. Bouton commun, 46 px de haut, coins a 10, contour noir
 * ------------------------------------------------------------------------ */
.ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 15px 30px;
    border: 1px solid var(--ff-noir);
    border-radius: 10px;
    background-color: var(--ff-blanc);
    font-family: Barlow, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: var(--ff-noir);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ff-btn:hover,
.ff-btn:focus {
    background-color: var(--ff-noir);
    color: var(--ff-blanc);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 10. Menu hamburger
 *     Le markup, la CSS et le JS du menu viennent du site source et ne sont pas
 *     modifies. Seul le panneau de droite est repris ici : l'arborescence Fly
 *     Fishing compte jusqu'a 16 sous-categories par rubrique, la colonne unique
 *     du module les empilait sur 700 px de haut en laissant les deux tiers du
 *     panneau vides.
 * ------------------------------------------------------------------------ */
/* Le deroulant restait haut de 720 px alors que les 13 rubriques en font 780 :
   les deux dernieres (Rodbuilding et Selection Competition) passaient sous le
   bord. Deux causes cumulees dans base.css :
     - une media query pose height:0 sur l'onglet, et avec min-height:720px la
       hauteur utilisee se fige a 720 ;
     - les rubriques sont flottantes, elles ne poussent donc pas le conteneur.
   On rend la hauteur au contenu sur l'etat ouvert, et flow-root fait contenir
   les flottants. */
#header .ets_prmn_megamenu .prmn_menus_li .prmn_columns_ul.prmn_columns_ul_tab {
    display: flow-root;
}

#header .ets_prmn_megamenu .prmn_menus_li.open > .prmn_columns_ul.prmn_columns_ul_tab {
    height: auto;
}

/* Le panneau de droite est cale sur le haut du deroulant, alors que la colonne
   de gauche commence apres les 30 px de padding de celui-ci. On repose les
   memes 30 px pour aligner le premier element des deux colonnes. */
#header .ets_prmn_megamenu .prmn_columns_contents_ul {
    padding-top: 30px;
}

/* Le module pose .column_size_4{width:33.333%} sur l'unique bloc de la
   rubrique, qui n'occupait donc qu'un tiers du panneau. */
#header .ets_prmn_megamenu .prmn_columns_contents_ul > .prmn_columns_li {
    float: none;
    width: 100%;
}

/* 460 px est la largeur du plus long libelle des 83, padding de 30 compris :
   en dessous, jusqu'a 27 entrees passaient sur deux lignes et se touchaient,
   le module ne prevoyant pas d'ecart vertical. A cette valeur le panneau de
   1103 px utiles tient exactement 2 colonnes et le rythme de 40 px du site de
   base est conserve tel quel. */
#header .ets_prmn_megamenu .ets_prmn_categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    align-content: start;
    gap: 0 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une seule propriete est reprise ici : la hauteur fixe de 40 px devient un
   minimum, sans quoi un libelle sur deux lignes debordait sur l'entree
   suivante. Le padding de 0 30px, l'interligne et la taille de police restent
   ceux du site de base, il ne faut surtout pas les redeclarer. */
#header .ets_prmn_megamenu .ets_prmn_categories > li > a {
    height: auto;
    min-height: 40px;
}

/* ---------------------------------------------------------------------------
 * 11. Responsive
 *     La maquette n'existe qu'en 1920 : les paliers ci-dessous sont une
 *     adaptation, a confronter aux maquettes tablette et mobile.
 * ------------------------------------------------------------------------ */
@media (max-width: 1600px) {
    .ff-presentation__media {
        flex-basis: 45%;
        max-width: 45%;
    }

    .ff-presentation__row {
        gap: 50px;
    }
}

@media (max-width: 1199px) {
    .ff-categories__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ff-intro__baseline {
        font-size: 26px;
        line-height: 40px;
    }

    .ff-highlight img {
        height: 400px;
    }

    #content.page-home #dmutabs .ff-produits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ff-presentation__media img {
        height: 400px;
    }

    .ff-presentation__title,
    #dmutabs .title_mct {
        font-size: 32px;
        line-height: 36px;
    }
}

@media (max-width: 991px) {
    .ff-categories__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ff-intro {
        padding: 40px 0;
    }

    .ff-categories {
        padding-bottom: 50px;
    }

    .ff-highlights__row {
        flex-wrap: wrap;
    }

    .ff-highlight,
    .ff-highlight--wide {
        flex: 1 1 100%;
    }

    .ff-highlight img {
        height: 320px;
    }

    #content.page-home #dmutabs .ff-produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ff-presentation {
        padding: 60px 0 70px;
    }

    .ff-presentation__row {
        flex-direction: column;
        gap: 30px;
    }

    .ff-presentation__media {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }

    .ff-presentation__content {
        gap: 30px;
    }

    #dmutabs.container {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .ff-brands__list {
        grid-template-columns: repeat(5, 1fr);
    }

    .ff-brands__list a {
        height: 90px;
    }

    .ff-brands__list img {
        max-height: 90px;
    }
}

@media (max-width: 767px) {
    .ff-slider .carousel-indicators {
        bottom: 15px;
        gap: 12px;
    }

    .ff-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .ff-category {
        min-height: 0;
        padding: 15px 10px 20px;
    }

    .ff-category__media {
        width: 90px;
        height: 90px;
    }

    .ff-category__label {
        font-size: 16px;
    }

    .ff-intro__baseline {
        font-size: 20px;
        line-height: 30px;
    }

    .ff-intro__logo {
        width: 260px;
    }

    .ff-highlights__row {
        gap: 15px;
    }

    .ff-highlight img {
        /* height: 240px; */
        height: auto;
	}

    #content.page-home #dmutabs .ff-produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    /* En deux colonnes, les paddings empiles du conteneur (30), de la carte
       (10) et de la description (20) ne laissaient que 96 px de texte, moins
       que le mot FLUOROCARBON qui en fait 103. On les resserre pour rendre
       132 px au libelle. Le titre est reduit et la cesure reste en dernier
       recours pour un mot plus long encore. */
    #content.page-home #dmutabs.container {
        padding-right: 15px;
        padding-left: 15px;
    }

    #content.page-home #dmutabs .ff-produits .product-description {
        padding-right: 10px;
        padding-left: 10px;
    }

    #content.page-home #dmutabs .ff-produits .product-title,
    #content.page-home #dmutabs .ff-produits .product-title a {
        font-size: 14px;
        line-height: 18px;
        overflow-wrap: break-word;
    }

    .ff-presentation__media img {
        height: 260px;
    }

    .ff-presentation__title,
    #dmutabs .title_mct {
        font-size: 26px;
        line-height: 30px;
    }

    .ff-presentation__text p {
        font-size: 17px;
        line-height: 28px;
    }

    .ff-brands__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .ff-brands__list a {
        height: 70px;
    }

    .ff-brands__list img {
        max-height: 70px;
    }
}