/* ==========================================================================
   LA CROQUETTERIE — custom.css
   ==========================================================================
   Feuille de styles personnalisée du thème PrestaShop (thème Classic).
   Chargée après theme.css : themes/<theme>/assets/css/custom.css
   (vider le cache PrestaShop après modification).

   CONVENTIONS
   --------------------------------------------------------------------------
   - Préfixe « lc- » pour toutes les classes et variables du site.
   - Ordre des propriétés : positionnement → modèle de boîte → typographie
     → apparence (couleurs, bordures, ombres) → animation.
   - Les règles responsive sont regroupées à la fin de chaque section.
   - Les couleurs réutilisées passent par les variables de la section 1 ;
     les valeurs à usage unique restent en dur (commentées si utile).
   - Les !important conservés compensent la spécificité du thème ou de
     modules tiers : ne pas les retirer sans test.

   TABLE DES MATIÈRES
   --------------------------------------------------------------------------
    1. VARIABLES GLOBALES ......... palette, rayons, ombres, transitions
   11. FOOTER - OVERRIDES ......... largeur, hauteur, widget avis, réseaux
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES GLOBALES
   --------------------------------------------------------------------------
   NB : la section 9 (.lc-cms) redéfinit volontairement certaines variables
   (--lc-vert, --lc-kraft…) avec d'autres valeurs, à portée locale.
   ========================================================================== */
:root {
    /* Palette principale */
    --lc-gris:        #414142;   /* gris anthracite (titres, fonds sombres) */
    --lc-vert:        #a7bc44;   /* vert signature */
    --lc-vert-light:  #bdd15a;   /* vert clair (hover) */
    --lc-kraft:       #d9ceb5;   /* kraft (bordures, séparateurs) */
    --lc-kraft-light: #ede6d6;   /* kraft clair (fonds de cartes) */
    --lc-blanc:       #ffffff;
    --lc-text:        #3a3a3a;   /* texte courant */

    /* Accents des piliers (page Engagements) */
    --lc-ocre:        #c4a35a;   /* pilier 2 */
    --lc-terracotta:  #e07b5a;   /* pilier 3 */
    --lc-vert-eau:    #5a9e8f;   /* pilier 4 */
    --lc-olive:       #7a8c5d;   /* pilier 5 */

    /* Accessibilité */
    --lc-focus:       #93c020;   /* anneau de focus clavier (ajustable) */

    /* Rayons */
    --lc-radius-sm:   10px;      /* champs de formulaire, alertes, cartes CMS */
    --lc-radius-md:   16px;      /* images, cartes contact */
    --lc-radius-lg:   20px;      /* blocs formulaire, piliers */
    --lc-radius-pill: 50px;      /* boutons « pilule » */

    /* Ombres (états hover) */
    --lc-shadow-img:        0 8px 30px rgba(0, 0, 0, 0.1);
    --lc-shadow-img-hover:  0 16px 40px rgba(0, 0, 0, 0.15);
    --lc-shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
    --lc-shadow-soft-hover: 0 6px 20px rgba(0, 0, 0, 0.06);

    /* Transitions */
    --lc-duration:    0.3s;      /* durée standard des transitions */

    /* Dimensions */
    --lc-timeline-w:  3px;       /* épaisseur de la ligne de timeline */
}

/* ==========================================================================
   11. FOOTER (STORE LOCATOR)
   --------------------------------------------------------------------------
   Chargé après theme.css. Ne modifie que le footer.
   Tous les réglages ci-dessous sont faciles à ajuster.
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 Élargir la section footer à 1370px
   (Le header n'est pas touché : il garde la largeur du thème, 1200px.
    Pour aligner le header, appliquer la même max-width à #header .wrapper.)
   -------------------------------------------------------------------------- */
#footer .wrapper {
    max-width: 1370px;
}

/* --------------------------------------------------------------------------
   11.2 Réduire la hauteur du footer
   Valeurs d'origine : footer-before 40/40 (45/30 en desktop),
                       footer-main   40/40 (60/45 en desktop).
   Ajuster librement les paddings ci-dessous pour affiner la hauteur.
   -------------------------------------------------------------------------- */
#footer .footer-before {
    padding-top: 20px;
    padding-bottom: 20px;
}
#footer .footer-main {
    padding-top: 24px;
    padding-bottom: 24px;
}

@media (min-width: 960px) {
    #footer .footer-before {
        padding-top: 24px;
        padding-bottom: 20px;
    }
    #footer .footer-main {
        padding-top: 32px;
        padding-bottom: 28px;
    }
}

/* --------------------------------------------------------------------------
   11.3 Widget d'avis à DROITE (au niveau d'« Informations »)
        + texte masqué en desktop
   STRUCTURE RÉELLE (vérifiée sur le DOM live) :
     .footer-main-inner (flex) = .footer-logo-container + .links + .grc-site-iframe
     #steavisgarantisFooterVerif est HORS de .footer-main-inner (frère, en dessous).
   Le widget = .grc-site-iframe (4e élément flex), contenant <iframe width=100% height=221>.
   On le cale dans la 4e colonne (25 %), aligné en haut ; il peut se comprimer
   (min-width: 0) et son iframe est mise à l'échelle plus bas (section 11.4).
   La ligne de texte est masquée en desktop, conservée en mobile.
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
    #footer .footer-main-inner > .grc-site-iframe {
        flex: 0 0 25%;
        max-width: 25%;
        min-width: 0;        /* autorise la compression pour éviter le retour à la ligne */
        align-self: flex-start;
        overflow: hidden;    /* fenêtre pour l'iframe mise à l'échelle */
    }
    #footer #steavisgarantisFooterVerif {
        display: none;       /* masqué en desktop ; visible en mobile */
    }
}

/* --------------------------------------------------------------------------
   11.4 Widget d'avis : responsive (DOM réel, sans wrapper)
   L'iframe se replie à ~300px de large (largeur par défaut d'une iframe) et
   fait 221px de haut. Contenu cross-origin => non refluable : on la met à
   l'ÉCHELLE. .grc-site-iframe (overflow hidden) sert de fenêtre ; sa hauteur
   suit l'échelle pour éviter le vide vertical.

   (a) 960–1309px : le widget RESTE dans la colonne de droite et rétrécit
       par paliers (l'iframe passe à 300px fixe puis on scale).
   (b) < 960px : widget SOUS les colonnes, séparé par une ligne, centré ;
       le texte de vérification (déjà en dessous, hors de .footer-main-inner)
       est ré-affiché et centré.
   -------------------------------------------------------------------------- */
#footer .grc-site-iframe iframe {
    transform-origin: top left;
}

/* (a) Paliers desktop */
@media (min-width: 960px) and (max-width: 1069px) {
    #footer .footer-main-inner > .grc-site-iframe { height: 164px; }
    #footer .grc-site-iframe iframe { width: 300px; height: 221px; transform: scale(0.74); }
}
@media (min-width: 1070px) and (max-width: 1189px) {
    #footer .footer-main-inner > .grc-site-iframe { height: 183px; }
    #footer .grc-site-iframe iframe { width: 300px; height: 221px; transform: scale(0.83); }
}
@media (min-width: 1190px) and (max-width: 1309px) {
    #footer .footer-main-inner > .grc-site-iframe { height: 206px; }
    #footer .grc-site-iframe iframe { width: 300px; height: 221px; transform: scale(0.93); }
}
@media (min-width: 1310px) {
    #footer .grc-site-iframe iframe { width: 300px; height: 221px; } /* taille naturelle */
}

/* (b) < 960px : widget sous les colonnes, séparé et centré */
@media (max-width: 959px) {
    #footer .footer-main-inner > .grc-site-iframe {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 24px;
        padding-top: 24px;
        text-align: center;                              /* centre l'iframe */
        border-top: 1px solid rgba(255, 255, 255, 0.2);  /* séparation avec les colonnes */
    }
    #footer .grc-site-iframe iframe {
        display: inline-block;
        width: 100%;
        max-width: 320px;   /* widget centré*/
    }
    /* Texte de vérification (hors .footer-main-inner, déjà sous le widget) : centré */
    #footer #steavisgarantisFooterVerif { text-align: center; }
    #footer #steavisgarantisFooterText  { text-align: center; }
}

/* --------------------------------------------------------------------------
   11.5 Boutons sociaux Facebook + Instagram : toujours EMPILÉS, MÊME largeur
   Le conteneur reste en colonne quelle que soit la largeur d'écran ; les deux
   boutons ont une largeur minimale commune (donc identique) et un petit gap.
   -------------------------------------------------------------------------- */
#footer .footer-main .footer-social-link {
    display: flex;          /* le thème ne met flex qu'à >= 960px : on le force partout */
    flex-flow: column;
    align-items: center;
    gap: 10px;
}
#footer .footer-main .footer-social-link .btn {
    width: 170px;           /* largeur commune → boutons identiques (tablette + desktop) */
    max-width: 100%;
    justify-content: center; /* centre icône + texte (si .btn est en flex) */
    text-align: center;
}

/* Mobile : les deux boutons en pleine largeur */
@media (max-width: 599px) {
    #footer .footer-main .footer-social-link .btn {
        width: 100%;
    }
}