/* ==========================================================================
   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
    2. ACCESSIBILITÉ .............. focus clavier
    3. LARGEUR DU SITE ............ conteneur 1320px (DÉSACTIVÉ — voir note)
    4. OVERRIDES PRESTASHOP ....... breakout pleine largeur (CMS 11 & 13)
    5. PAGE « NOTRE HISTOIRE » .... timeline (.lc-timeline, .lc-entry…)
    6. PAGE « CONTACT » ........... cartes + formulaire (.lc-contact-*)
    7. PAGE « ENGAGEMENTS » ....... piliers (.lc-eng-*)
    8. CTA BAS DE PAGE ............ partagé Histoire + Engagements
    9. PAGES CMS CONSOLIDÉES ...... préfixe .lc-cms (portée autonome)
   10. CHECKOUT — MODULE DPD ...... corrections transporteur DPD France
   11. FOOTER — OVERRIDES ......... largeur, hauteur, widget avis, réseaux
   12. ANIMATIONS ................. @keyframes
   ========================================================================== */


/* ==========================================================================
   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 */
}


/* ==========================================================================
   2. ACCESSIBILITÉ — FOCUS CLAVIER
   ========================================================================== */

/* Supprime l'outline par défaut au clic souris uniquement */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Indicateur de focus visible pour la navigation clavier */
*:focus-visible {
    outline: 2px solid var(--lc-focus);
    outline-offset: 2px;
    border-radius: 4px;
}


/* ==========================================================================
   3. LARGEUR DU SITE — CONTENEUR 1320px (DÉSACTIVÉ)
   --------------------------------------------------------------------------
   ⚠ HISTORIQUE : dans le fichier d'origine, ce bloc était précédé d'un
   fragment de texte parasite (« css », résidu de copier-coller) qui le
   rendait syntaxiquement invalide : les navigateurs l'IGNORAIENT donc
   entièrement. Pour préserver le rendu actuel à l'identique, il est
   conservé ici mais commenté.

   Pour élargir le site à 1320px (aligné sur l'accueil « zoomé ») :
   décommenter le bloc ci-dessous, puis vérifier l'affichage.
   ========================================================================== */
/*
@media (min-width: 1200px) {
    .container                { width: 1320px !important; }
    body:not(#index) .wrapper { max-width: 1320px !important; }
}
*/


/* ==========================================================================
   4. OVERRIDES PRESTASHOP — BREAKOUT PLEINE LARGEUR
   --------------------------------------------------------------------------
   Neutralise la colonne centrée du gabarit CMS de PrestaShop sur :
   - page-cms-11 : « Notre Histoire »
   - page-cms-13 : « Engagements »
   Les !important sont nécessaires pour surclasser la grille du thème.
   (Pour une nouvelle page, ajouter son .page-cms-XX à chaque sélecteur.)
   ========================================================================== */
.page-cms-11 .cols-flex,
.page-cms-13 .cols-flex {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.page-cms-11 .col-desktop-10,
.page-cms-11 .col-large-8,
.page-cms-13 .col-desktop-10,
.page-cms-13 .col-large-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-cms-11 .col-desktop-push-1,
.page-cms-11 .col-large-push-2,
.page-cms-13 .col-desktop-push-1,
.page-cms-13 .col-large-push-2 {
    left: 0 !important;
}

.page-cms-11 #content,
.page-cms-13 #content {
    overflow: hidden;
}


/* ==========================================================================
   5. PAGE « NOTRE HISTOIRE » — TIMELINE
   ========================================================================== */

/* --- Conteneur & ligne verticale ------------------------------------- */
.lc-timeline {
    position: relative;
    max-width: 100%;
    padding: 60px 20px 100px;
    overflow: hidden;
}

.lc-timeline-line {
    position: absolute;
    left: 50%;
    top: 72px;
    bottom: 0;
    z-index: 0;
    width: var(--lc-timeline-w);
    background: linear-gradient(
        to bottom,
        var(--lc-vert) 0%,
        var(--lc-vert) calc(100% - 80px),
        transparent 100%
    );
    transform: translateX(-50%);
}

/* --- Entrée (bloc date + texte + image) ------------------------------- */
.lc-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    max-width: 1100px;
    margin-bottom: 80px;
    margin-left: auto;
    margin-right: auto;
    animation: lcFadeUp 0.7s ease both;
}

/* Apparition en cascade */
.lc-entry:nth-child(2) { animation-delay: 0.1s; }
.lc-entry:nth-child(3) { animation-delay: 0.2s; }
.lc-entry:nth-child(4) { animation-delay: 0.3s; }
.lc-entry:nth-child(5) { animation-delay: 0.4s; }
.lc-entry:nth-child(6) { animation-delay: 0.5s; }
.lc-entry:nth-child(7) { animation-delay: 0.6s; }

.lc-entry:last-child {
    margin-bottom: 0;
}

/* Variante : contenu à gauche, image à droite */
.lc-entry--left .lc-entry-content {
    width: 45%;
    margin-right: auto;
    padding-right: 50px;
    text-align: right;
}
.lc-entry--left .lc-entry-image {
    width: 45%;
    margin-left: auto;
    padding-left: 50px;
}

/* Variante : contenu à droite, image à gauche */
.lc-entry--right {
    flex-direction: row-reverse;
}
.lc-entry--right .lc-entry-content {
    width: 45%;
    margin-left: auto;
    padding-left: 50px;
    text-align: left;
}
.lc-entry--right .lc-entry-image {
    width: 45%;
    margin-right: auto;
    padding-right: 50px;
}

/* --- Point sur la ligne ------------------------------------------------ */
.lc-dot {
    position: absolute;
    left: 50%;
    top: 12px;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: var(--lc-vert);
    border: 4px solid var(--lc-blanc);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--lc-vert), 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: translateX(-50%);
    transition: transform var(--lc-duration) ease,
                box-shadow var(--lc-duration) ease;
}
.lc-entry:hover .lc-dot {
    transform: translateX(-50%) scale(1.25);
    box-shadow: 0 0 0 4px var(--lc-vert-light),
                0 4px 16px rgba(167, 188, 68, 0.3);
}

/* --- Contenu texte ------------------------------------------------------ */
.lc-date {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 18px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border-radius: 30px;
}

.lc-entry-title {
    margin-bottom: 12px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lc-gris);
}

.lc-entry-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--lc-text);
}

/* --- Image & blob décoratif -------------------------------------------- */
.lc-entry-image {
    position: relative;
}

.lc-entry-blob {
    position: absolute;
    z-index: 0;
    opacity: 0.25;
    pointer-events: none;
}
.lc-entry-blob img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Position/taille du blob, spécifiques à chaque entrée */
.lc-entry:nth-child(2) .lc-entry-blob { width: 280px; top: -40px; left: -30px; }
.lc-entry:nth-child(3) .lc-entry-blob { width: 260px; top: -30px; right: -20px; left: auto; }
.lc-entry:nth-child(4) .lc-entry-blob { width: 250px; top: -50px; left: -40px; }
.lc-entry:nth-child(5) .lc-entry-blob { width: 240px; top: -20px; right: -30px; left: auto; }
.lc-entry:nth-child(6) .lc-entry-blob { width: 270px; top: -35px; left: -25px; }
.lc-entry:nth-child(7) .lc-entry-blob { width: 250px; top: -30px; right: -25px; left: auto; }

.lc-img-wrap {
    position: relative;
    z-index: 1;
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    box-shadow: var(--lc-shadow-img);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.lc-img-wrap:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-shadow-img-hover);
}
.lc-img-wrap img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

/* --- Responsive : timeline passe à gauche, entrées en colonne ---------- */
@media (max-width: 768px) {
    .lc-timeline-line {
        left: 24px;
    }

    /* !important requis : neutralise le row-reverse de .lc-entry--right,
       conservé par prudence vis-à-vis de l'ordre de chargement du thème */
    .lc-entry,
    .lc-entry--right {
        flex-direction: column !important;
    }

    .lc-entry {
        margin-bottom: 50px;
    }

    .lc-entry--left .lc-entry-content,
    .lc-entry--right .lc-entry-content {
        width: 100%;
        margin: 0;
        padding: 0 0 0 56px;
        text-align: left;
    }
    .lc-entry--left .lc-entry-image,
    .lc-entry--right .lc-entry-image {
        width: 100%;
        margin: 0;
        padding: 16px 0 0 56px;
    }

    .lc-dot {
        left: 24px;
    }

    .lc-img-wrap img {
        height: 200px;
    }

    .lc-entry-blob {
        display: none;
    }
}


/* ==========================================================================
   6. PAGE « CONTACT »
   ========================================================================== */

/* --- Intro -------------------------------------------------------------- */
.lc-contact-intro {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px 10px;
    text-align: center;
}

.lc-contact-subtitle {
    margin-bottom: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--lc-gris);
}

.lc-contact-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lc-text);
}

/* --- Cartes de contact --------------------------------------------------- */
.lc-contact-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 50px;
}

.lc-contact-card {
    flex: 1 1 260px;
    max-width: 300px;
    padding: 36px 28px;
    text-align: center;
    background: var(--lc-kraft-light);
    border-radius: var(--lc-radius-md);
    transition: transform var(--lc-duration) ease,
                box-shadow var(--lc-duration) ease;
}
.lc-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-shadow-card-hover);
}

.lc-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border-radius: 50%;
}
.lc-contact-icon svg {
    width: 26px;
    height: 26px;
}

.lc-contact-card-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--lc-gris);
}

.lc-contact-card-text {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--lc-text);
}

.lc-contact-card-link {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--lc-vert);
    text-decoration: none;
    transition: color var(--lc-duration);
}
.lc-contact-card-link:hover {
    color: var(--lc-vert-light);
    text-decoration: underline;
}

/* --- Section formulaire --------------------------------------------------- */
.lc-contact-form-section {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.lc-contact-form-inner {
    padding: 44px 40px;
    background: var(--lc-gris);
    border-radius: var(--lc-radius-lg);
}

.lc-contact-form-title {
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    color: var(--lc-blanc);
}

.lc-contact-form-text {
    margin-bottom: 30px;
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}

/* --- Habillage du formulaire natif PrestaShop ----------------------------- */
.lc-contact-form-wrap .contact-form {
    margin: 0;
    padding: 0;
    background: transparent;
}

.lc-contact-form-wrap label {
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.lc-contact-form-wrap .form-control,
.lc-contact-form-wrap input[type="text"],
.lc-contact-form-wrap input[type="email"],
.lc-contact-form-wrap textarea,
.lc-contact-form-wrap select {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--lc-blanc);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--lc-radius-sm);
    transition: border-color var(--lc-duration),
                background var(--lc-duration);
}
.lc-contact-form-wrap .form-control:focus,
.lc-contact-form-wrap input[type="text"]:focus,
.lc-contact-form-wrap input[type="email"]:focus,
.lc-contact-form-wrap textarea:focus,
.lc-contact-form-wrap select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--lc-vert);
    outline: none;
    box-shadow: 0 0 0 3px rgba(167, 188, 68, 0.2);
}

.lc-contact-form-wrap textarea {
    min-height: 140px;
    resize: vertical;
}

.lc-contact-form-wrap select option {
    color: var(--lc-blanc);
    background: var(--lc-gris);
}

.lc-contact-form-wrap ::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Bouton d'envoi */
.lc-contact-form-wrap .btn-primary,
.lc-contact-form-wrap button[type="submit"],
.lc-contact-form-wrap input[type="submit"] {
    display: inline-block;
    margin-top: 10px;
    padding: 13px 36px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border: none;
    border-radius: var(--lc-radius-pill);
    cursor: pointer;
    transition: background var(--lc-duration),
                transform var(--lc-duration);
}
.lc-contact-form-wrap .btn-primary:hover,
.lc-contact-form-wrap button[type="submit"]:hover,
.lc-contact-form-wrap input[type="submit"]:hover {
    background: var(--lc-vert-light);
    transform: translateY(-2px);
}

/* Espacement des champs */
.lc-contact-form-wrap .form-group {
    margin-bottom: 20px;
}

/* Upload de fichier */
.lc-contact-form-wrap .form-control-file {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Messages erreur / succès (rouges à usage unique : laissés en dur) */
.lc-contact-form-wrap .alert-success {
    padding: 14px 20px;
    color: var(--lc-vert);
    background: rgba(167, 188, 68, 0.15);
    border: 1px solid var(--lc-vert);
    border-radius: var(--lc-radius-sm);
}
.lc-contact-form-wrap .alert-danger {
    padding: 14px 20px;
    color: #ff6b7a;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid #dc3545;
    border-radius: var(--lc-radius-sm);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
    .lc-contact-cards {
        flex-direction: column;
        align-items: center;
    }
    .lc-contact-card {
        width: 100%;
        max-width: 100%;
    }
    .lc-contact-form-inner {
        padding: 30px 20px;
    }
}


/* ==========================================================================
   7. PAGE « ENGAGEMENTS »
   ========================================================================== */

/* --- Intro ---------------------------------------------------------------- */
.lc-eng-intro {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px 20px;
    text-align: center;
}

.lc-eng-subtitle {
    margin-bottom: 16px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lc-vert);
}

.lc-eng-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--lc-text);
}

/* --- Piliers ---------------------------------------------------------------- */
.lc-eng-pillars {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 20px 40px;
}

.lc-eng-pillar {
    position: relative;
    margin-bottom: 50px;
    padding: 36px 32px;
    background: var(--lc-kraft-light);
    border-radius: var(--lc-radius-lg);
    overflow: hidden;
}

/* Bandeau de couleur à gauche, teinte par pilier */
.lc-eng-pillar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: var(--lc-radius-lg) 0 0 var(--lc-radius-lg);
}
.lc-eng-pillar--1::before { background: var(--lc-vert); }
.lc-eng-pillar--2::before { background: var(--lc-ocre); }
.lc-eng-pillar--3::before { background: var(--lc-terracotta); }
.lc-eng-pillar--4::before { background: var(--lc-vert-eau); }
.lc-eng-pillar--5::before { background: var(--lc-olive); }

/* En-tête de pilier */
.lc-eng-pillar-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.lc-eng-pillar-num {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--lc-gris);
    opacity: 0.15;
}

.lc-eng-pillar-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lc-gris);
}

.lc-eng-pillar-desc {
    margin-bottom: 24px;
    padding-left: 2px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--lc-text);
}

/* --- Liste des engagements --------------------------------------------------- */
.lc-eng-commitments {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lc-eng-commitment {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--lc-blanc);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lc-eng-commitment:hover {
    transform: translateY(-2px);
    box-shadow: var(--lc-shadow-soft-hover);
}

.lc-eng-commit-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border-radius: 50%;
}

/* Pastilles teintées selon le pilier */
.lc-eng-pillar--2 .lc-eng-commit-num { background: var(--lc-ocre); }
.lc-eng-pillar--3 .lc-eng-commit-num { background: var(--lc-terracotta); }
.lc-eng-pillar--4 .lc-eng-commit-num { background: var(--lc-vert-eau); }
.lc-eng-pillar--5 .lc-eng-commit-num { background: var(--lc-olive); }

.lc-eng-commit-content h4 {
    margin-bottom: 4px;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--lc-gris);
}

.lc-eng-commit-content p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555555; /* gris moyen, usage unique */
}

/* --- Responsive ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .lc-eng-pillar {
        padding: 28px 20px;
    }
    .lc-eng-commitment {
        padding: 14px 16px;
    }
}


/* ==========================================================================
   8. CTA BAS DE PAGE — PARTAGÉ « NOTRE HISTOIRE » + « ENGAGEMENTS »
   --------------------------------------------------------------------------
   Les deux blocs étaient identiques à un détail près : le letter-spacing
   du bouton (1px sur Histoire, 0.5px sur Engagements) — conservé tel quel.
   ========================================================================== */
.lc-cta,
.lc-eng-cta {
    padding: 40px 20px 50px;
    text-align: center;
    border-top: 2px solid var(--lc-kraft);
}

.lc-cta h2,
.lc-eng-cta h2 {
    margin-bottom: 12px;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 800;
    color: var(--lc-gris);
}

.lc-cta p,
.lc-eng-cta p {
    max-width: 500px;
    margin: 0 auto 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lc-text);
}

.lc-cta-btn,
.lc-eng-cta-btn {
    display: inline-block;
    padding: 12px 32px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border-radius: var(--lc-radius-pill);
    transition: background var(--lc-duration),
                transform var(--lc-duration);
}
.lc-eng-cta-btn {
    letter-spacing: 0.5px; /* valeur d'origine, différente du CTA Histoire */
}

.lc-cta-btn:hover,
.lc-eng-cta-btn:hover {
    color: var(--lc-blanc);
    background: var(--lc-vert-light);
    text-decoration: none;
    transform: translateY(-2px);
}


/* ==========================================================================
   9. PAGES CMS CONSOLIDÉES — PRÉFIXE .lc-cms
   --------------------------------------------------------------------------
   Système autonome pour les pages CMS « riches ». Tout est préfixé
   « .lc-cms » : aucun impact sur le reste du site.

   ⚠ PORTÉE LOCALE : ce bloc REDÉFINIT volontairement --lc-vert, --lc-kraft…
   avec des valeurs différentes de la palette globale (section 1). À
   l'intérieur d'un .lc-cms, var(--lc-vert) vaut #8fa339, pas #a7bc44.
   Ne pas fusionner ces variables avec :root.
   ========================================================================== */
.lc-cms {
    /* Palette locale (volontairement distincte du :root) */
    --lc-vert:        #8fa339;
    --lc-vert-clair:  #a7bc44;
    --lc-gris:        #414142;
    --lc-kraft:       #f5f0e6;
    --lc-kraft-fonce: #d9ceb5;
    --lc-muted:       #6f6f68;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    color: var(--lc-gris);
    -webkit-font-smoothing: antialiased;
}

.lc-cms * {
    box-sizing: border-box;
}

/* Le gabarit CMS de PrestaShop pose le contenu dans une colonne centrée
   (col-large-8 = 66 %, col-desktop-10 = 83 %, avec décalage). On sort de
   cette colonne toute page contenant un .lc-cms : pleine largeur, sans
   décalage. La largeur réelle est ensuite calée à 1320px par .lc-cms__wrap. */
.cols > .col:has(.lc-cms) {
    width: 100%;
    margin-left: 0;
}

/* --- Structure & typographie ---------------------------------------------- */
.lc-cms__wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 22px;
}

.lc-cms__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lc-vert);
}

.lc-cms h1 {
    margin: 0 0 18px;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--lc-gris);
}

.lc-cms h2 {
    margin: 0 0 16px;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--lc-gris);
}

.lc-cms h3 {
    margin: 0 0 8px;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--lc-gris);
}

.lc-cms p {
    margin: 0 0 16px;
}

.lc-cms__lead {
    max-width: 48rem;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--lc-gris);
}

.lc-cms__section {
    padding: 62px 0;
}

.lc-cms__hero {
    padding: 34px 0 30px;
}

/* Hero centré (variante) */
.lc-cms__hero--center {
    text-align: center;
}
.lc-cms__hero--center .lc-cms__lead {
    margin-left: auto;
    margin-right: auto;
}

/* Chapo d'intro centré, resserré sous le bandeau de titre natif du thème.
   À utiliser à la place d'un hero quand la page a déjà son bandeau vert. */
.lc-cms__intro {
    padding: 20px 0 6px;
    text-align: center;
}
.lc-cms__intro p {
    max-width: 64ch;
    margin: 0 auto;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--lc-gris);
}

.lc-cms__rule {
    width: 54px;
    height: 3px;
    margin: 0 0 22px;
    background: var(--lc-vert);
    border: 0;
    border-radius: 2px;
}

.lc-cms__measure {
    max-width: 46rem;
}

.lc-cms__highlight {
    max-width: 62rem;
    margin: 6px auto 0;
    padding: 18px 24px;
    font-size: 1.06rem;
    font-style: italic;
    color: var(--lc-gris);
    background: var(--lc-blanc);
    border: 1px solid var(--lc-kraft-fonce);
    border-left: 4px solid var(--lc-vert);
    border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
}

/* --- Grille de cartes (3 raisons / services) --------------------------------- */
.lc-cms__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.lc-cms__card {
    padding: 22px 22px 24px;
    background: var(--lc-blanc);
    border: 1px solid var(--lc-kraft-fonce);
    border-top: 3px solid var(--lc-vert);
    border-radius: var(--lc-radius-sm);
}
.lc-cms__card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--lc-muted);
}
.lc-cms__band .lc-cms__card {
    border-color: #e7dcc4; /* kraft intermédiaire, usage unique */
}

/* --- Philosophie (citation + signature) --------------------------------------- */
.lc-cms__quote {
    margin: 26px 0;
    padding: 18px 24px;
    font-size: 1.12rem;
    font-style: italic;
    color: var(--lc-gris);
    background: var(--lc-blanc);
    border-left: 4px solid var(--lc-vert-clair);
    border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
}
.lc-cms__quote cite {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lc-vert);
}

.lc-cms__sign {
    margin-top: 26px;
    font-weight: 700;
    color: var(--lc-gris);
}
.lc-cms__sign span {
    display: block;
    margin-top: 2px;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--lc-muted);
}

/* --- Piliers produits ------------------------------------------------------------ */
.lc-cms__pillar {
    padding: 58px 0;
}
.lc-cms__pillar + .lc-cms__pillar {
    border-top: 1px solid var(--lc-kraft-fonce);
}
.lc-cms__pillar ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.lc-cms__pillar li {
    max-width: 46rem;
}

/* --- Bloc texte + image (alterné via --reverse, responsive) ----------------------- */
.lc-cms__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 46px;
    align-items: center;
    padding: 54px 0;
}
.lc-cms__media + .lc-cms__media {
    border-top: 1px solid var(--lc-kraft-fonce);
}
.lc-cms__media-img img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
}
.lc-cms__media--reverse .lc-cms__media-img {
    order: -1;
}
.lc-cms__media-txt ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

/* Puces communes aux listes « piliers » et « média »
   (règles identiques dans le fichier d'origine, mutualisées ici) */
.lc-cms__pillar li,
.lc-cms__media-txt li {
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 0 26px;
    color: var(--lc-muted);
}
.lc-cms__pillar li::before,
.lc-cms__media-txt li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 8px;
    height: 8px;
    background: var(--lc-vert);
    border-radius: 50%;
}

/* --- CTA ---------------------------------------------------------------------------- */
.lc-cms__cta {
    max-width: 1276px;
    margin: 56px auto 0;
    padding: 40px 34px;
    text-align: center;
    color: var(--lc-blanc);
    background: var(--lc-gris);
    border-radius: 14px;
}
.lc-cms__cta h2 {
    margin-bottom: 10px;
    color: var(--lc-blanc);
}
.lc-cms__cta p {
    max-width: 40rem;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, 0.82);
}

.lc-cms__cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.lc-cms__btn {
    display: inline-block;
    padding: 13px 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--lc-blanc);
    background: var(--lc-vert);
    border-radius: 8px;
    transition: background 0.15s;
}
.lc-cms__btn:hover {
    color: var(--lc-blanc);
    background: var(--lc-vert-clair);
}

.lc-cms__btn--ghost {
    color: var(--lc-blanc);
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.lc-cms__btn--ghost:hover {
    color: var(--lc-blanc);
    background: rgba(255, 255, 255, 0.12);
}

/* --- Responsive ----------------------------------------------------------------------- */
@media (max-width: 640px) {
    .lc-cms h1        { font-size: 1.95rem; }
    .lc-cms h2        { font-size: 1.42rem; }
    .lc-cms__lead     { font-size: 1.08rem; }
    .lc-cms__section  { padding: 46px 0; }
    .lc-cms__hero     { padding: 40px 0 34px; }
    .lc-cms__intro p  { font-size: 1.06rem; }
    .lc-cms__pillar   { padding: 42px 0; }

    .lc-cms__media {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 40px 0;
    }
    .lc-cms__media--reverse .lc-cms__media-img {
        order: 0;
    }

    .lc-cms__cta-btns {
        flex-direction: column;
    }
    .lc-cms__cta-btns .lc-cms__btn {
        width: 100%;
    }
}


/* ==========================================================================
   10. CHECKOUT — CORRECTIONS MODULE DPD FRANCE
   --------------------------------------------------------------------------
   Le bloc Predict / relais DPD débordait de sa colonne dans la liste des
   transporteurs. Les !important sont indispensables face aux styles inline
   et à la spécificité du module : NE PAS LES RETIRER.
   ========================================================================== */

/* 1) Le conteneur flex parent : on l'autorise juste à passer à la ligne */
.delivery-option *:has(> #div_dpdfrance_predict_block),
.delivery-option *:has(> #dpdfrance_relais_point_table),
.delivery-option *:has(> .dpdfrance_fo) {
    flex-wrap: wrap !important;
}

/* 2) Le bloc DPD prend toute la largeur de SA colonne, jamais plus */
.dpdfrance_fo,
#dpdfrance_relais_point_table,
#div_dpdfrance_predict_block {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;   /* clé : empêche le contenu large de pousser le bloc */
    margin-top: 12px !important;
    box-sizing: border-box !important;
}

/* 3) L'image Predict et le tableau ne forcent plus la largeur */
#div_dpdfrance_predict_block img,
#dpdfrance_relais_point_table img,
#dpdfrance_relais_point_table {
    max-width: 100% !important;
    height: auto !important;
}


/* ==========================================================================
   11. FOOTER — OVERRIDES (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;
    }
}

/* Astuce : pour gagner encore beaucoup de hauteur, on peut masquer
   entièrement le bandeau réassurance (les 3 icônes du haut) :
   #footer .footer-before { display: none; }                                  */

/* --------------------------------------------------------------------------
   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é, taille raisonnable */
    }
    /* 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%;
    }
}


/* ==========================================================================
   12. ANIMATIONS
   ========================================================================== */

/* Apparition en fondu + translation (entrées de la timeline) */
@keyframes lcFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}