/* =============================================================================
   Franchise landing "Ouvrir votre magasin" — charte La Croquetterie
   Vert #a7bc44 · gris #414142 · fond clair. Polices heritees du theme via les
   memes CSS vars que front.css (coherence avec les pages actualites).
   ========================================================================== */

.lcf {
    --lcf-green: #a7bc44;
    --lcf-green-dark: #93a839;
    --lcf-ink: #414142;
    --lcf-muted: #6b6c6d;
    --lcf-bg: #f5f6f8;
    --lcf-card: #ffffff;
    --lcf-line: #e7e8ea;

    /* La police n'est PAS forcee : titres et paragraphes heritent du theme. */
    color: var(--lcf-ink);
    line-height: 1.6;
}

.lcf * { box-sizing: border-box; }

.lcf-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lcf-center { text-align: center; }

/* --- Titres (police heritee du theme, on ne garde que la mise en forme) ---- */
.lcf-h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--lcf-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 .6em;
}
.lcf-h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--lcf-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 1.4em 0 .5em;
}
.lcf-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--lcf-green);
    margin: 0 0 .8rem;
}
.lcf-lead {
    font-size: 1.1rem;
    color: var(--lcf-muted);
    max-width: 760px;
    margin: 0 auto 2.2rem;
}
.lcf-note {
    font-size: .9rem;
    color: var(--lcf-muted);
    max-width: 820px;
    margin: 1.6rem auto 0;
}
.lcf-rte p { margin: 0 0 1em; }

/* --- Boutons --------------------------------------------------------------- */
.lcf-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: .85rem;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.lcf-btn:hover { transform: translateY(-2px); text-decoration: none; }
.lcf-btn--primary { background: var(--lcf-green); color: #fff; }
.lcf-btn--primary:hover { background: var(--lcf-green-dark); color: #fff; }
.lcf-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
.lcf-btn--ghost:hover { background: #fff; color: var(--lcf-ink); }
.lcf-btn--dark { background: var(--lcf-ink); color: #fff; }
.lcf-btn--dark:hover { background: #2c2c2d; color: #fff; }

/* --- HERO ------------------------------------------------------------------ */
.lcf-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    margin-bottom: 70px;
}
.lcf-hero__media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.03);
}
.lcf-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, rgba(48,49,50,.86) 0%, rgba(48,49,50,.55) 55%, rgba(167,188,68,.35) 100%);
}
.lcf-hero__inner {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 64px 20px;
}
.lcf-hero__crumb {
    font-size: .8rem;
    letter-spacing: .03em;
    margin: 0 0 1.4rem;
    color: rgba(255,255,255,.85);
}
.lcf-hero__crumb a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
}
.lcf-hero__crumb a:hover { color: #fff; text-decoration: underline; }
.lcf-hero__crumb-sep { margin: 0 6px; opacity: .7; }
.lcf-hero__title {
    /* police heritee du theme */
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.12;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #fff;
    max-width: 16ch;
    margin: 0 0 1rem;
}
.lcf-hero__subtitle {
    font-size: 1.15rem;
    max-width: 48ch;
    margin: 0 0 1.8rem;
    color: rgba(255,255,255,.92);
}
.lcf-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.lcf-cta .lcf-hero__cta { justify-content: center; }

/* --- Sections split (texte + image) --------------------------------------- */
.lcf-split {
    max-width: 1200px;
    margin: 0 auto 70px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.lcf-split--reverse .lcf-split__img { order: 2; }
.lcf-split__img img {
    width: 100%; height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(65,65,66,.12);
}
.lcf-split__text { min-width: 0; }

.lcf-checklist { list-style: none; padding: 0; margin: .5rem 0 0; }
.lcf-checklist li {
    position: relative;
    padding: 8px 0 8px 32px;
    border-bottom: 1px solid var(--lcf-line);
    font-weight: 500;
}
.lcf-checklist li::before {
    content: "";
    position: absolute; left: 0; top: 14px;
    width: 18px; height: 10px;
    border-left: 3px solid var(--lcf-green);
    border-bottom: 3px solid var(--lcf-green);
    transform: rotate(-45deg);
}

/* --- Bandes (fond clair) --------------------------------------------------- */
.lcf-band {
    background: var(--lcf-bg);
    padding: 64px 0;
    margin-bottom: 70px;
}
.lcf-band--flush { margin-bottom: 0; }

/* --- Moyens de reussir (3 cartes) ----------------------------------------- */
.lcf-means {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.lcf-means__card {
    position: relative;
    background: var(--lcf-card);
    border-radius: 10px;
    padding: 40px 28px 28px;
    box-shadow: 0 10px 30px rgba(65,65,66,.07);
    border-top: 4px solid var(--lcf-green);
}
.lcf-means__num {
    position: absolute; top: -22px; left: 28px;
    width: 44px; height: 44px;
    background: var(--lcf-green);
    color: #fff; font-weight: 800; font-size: 1.1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(167,188,68,.45);
}
.lcf-means__title {
    font-size: 1.1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    margin: 0 0 1rem;
}
.lcf-means__list { list-style: none; padding: 0; margin: 0; }
.lcf-means__list li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: .95rem;
    color: var(--lcf-muted);
}
.lcf-means__list li::before {
    content: "";
    position: absolute; left: 0; top: 13px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--lcf-green);
}

/* --- Modele economique (stats) -------------------------------------------- */
.lcf-model { margin-bottom: 70px; }
.lcf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 1.5rem;
}
.lcf-stat {
    background: var(--lcf-card);
    border: 1px solid var(--lcf-line);
    border-radius: 10px;
    padding: 30px 24px;
    text-align: center;
}
.lcf-stat__value {
    font-size: 2rem; font-weight: 800;
    color: var(--lcf-green);
    line-height: 1.1;
    margin-bottom: .4rem;
}
.lcf-stat__label {
    font-size: .9rem; color: var(--lcf-muted);
    text-transform: uppercase; letter-spacing: .02em;
}

/* --- Methode 10 etapes (timeline) ----------------------------------------- */
.lcf-steps {
    list-style: none;
    counter-reset: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 40px;
}
.lcf-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--lcf-card);
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(65,65,66,.06);
}
.lcf-step__num {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lcf-ink);
    color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.lcf-step__title {
    font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    margin: 4px 0 .3rem;
}
.lcf-step__desc { font-size: .9rem; color: var(--lcf-muted); margin: 0; }

/* --- CTA final ------------------------------------------------------------- */
.lcf-cta {
    background: #fff;
    color: var(--lcf-ink);
    padding: 64px 0 70px;
    margin-bottom: 0;
}
.lcf-cta__title {
    /* police heritee du theme */
    font-size: 1.9rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .02em;
    color: #414142; margin: 0 0 .6rem;
}
.lcf-cta__text { color: #414142; max-width: 60ch; margin: 0 auto 1.8rem; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
    .lcf-means, .lcf-stats { grid-template-columns: 1fr 1fr; }
    .lcf-steps { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .lcf-split { grid-template-columns: 1fr; gap: 26px; }
    .lcf-split--reverse .lcf-split__img { order: 0; }
    .lcf-means, .lcf-stats { grid-template-columns: 1fr; }
    .lcf-hero { min-height: 380px; }
    .lcf-h2, .lcf-cta__title { font-size: 1.5rem; }
}

/* =============================================================================
   Formulaire candidat franchise (page 2)
   ========================================================================== */
.lcf-form-head {
    background: var(--lcf-green);
    color: #fff;
    padding: 48px 0;
    margin-bottom: 40px;
    /* pleine largeur (le contenu reste centre via .lcf-wrap) */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.lcf-form-head .lcf-eyebrow,
.lcf-form-head .lcf-h2 { color: #fff; }
.lcf-form-head .lcf-lead { color: rgba(255, 255, 255, .92); }
.lcf-form-wrap { padding-bottom: 70px; }
.lcf-form__req { color: var(--lcf-muted); font-size: .9rem; margin: 0 0 18px; }
.lcf-req { color: #c0392b; font-weight: 700; }

.lcf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}
.lcf-field { display: flex; flex-direction: column; }
.lcf-field--full { grid-column: 1 / -1; }
.lcf-field label {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--lcf-ink);
    margin-bottom: 6px;
}
.lcf-field input,
.lcf-field textarea {
    width: 100%;
    border: 1px solid var(--lcf-line);
    border-radius: 6px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--lcf-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lcf-field input:focus,
.lcf-field textarea:focus {
    outline: none;
    border-color: var(--lcf-green);
    box-shadow: 0 0 0 3px rgba(167,188,68,.18);
}
.lcf-field textarea { resize: vertical; }

.lcf-form__actions { margin-top: 26px; }

/* Honeypot : invisible pour les humains, present pour les bots */
.lcf-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Alertes */
.lcf-alert {
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 22px;
    font-size: .98rem;
}
.lcf-alert--ok { background: #eef5d8; border: 1px solid var(--lcf-green); color: #4c5a16; }
.lcf-alert--err { background: #fdecea; border: 1px solid #e74c3c; color: #922b21; }
.lcf-alert ul { margin: 0; padding-left: 20px; }

@media (max-width: 680px) {
    .lcf-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Pleine largeur + retrait des blocs de thème (ce fichier n'est chargé QUE sur
   les pages franchise : ces règles n'affectent aucune autre page du site).
   ========================================================================== */

/* Bannière (hero) + sections à fond coloré sur toute la largeur de l'écran,
   tout en gardant le contenu centré via .lcf-wrap / .lcf-hero__inner. */
.lcf-hero,
.lcf-band,
.lcf-cta {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Retrait du bandeau vert "page-top" (image verte/dechiree du theme) et du bloc
   reassurance (bandeau beige), uniquement sur les pages franchise. */
#module-lc_news-franchise .page-top,
#module-lc_news-franchisecontact .page-top { display: none !important; }

/* Le <section id="main"> du theme impose un padding de 60px : on le retire sur
   ces pages pour que le hero/les fonds pleine largeur collent aux bords. */
#module-lc_news-franchise #main,
#module-lc_news-franchisecontact #main { padding: 0 !important; }

.block-reassurance,
#block-reassurance,
.blockreassurance,
#blockreassurance,
.block_reassurance { display: none !important; }
