/* ==========================================================================
   MADRASSA — THÈME PUBLIC GLOBAL
   Direction : héritage islamique moderne, clair, vert profond et doré
   Fichier conseillé : public/assets/css/public-theme.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables globales
   -------------------------------------------------------------------------- */
:root {
    --public-bg: #fbf8ee;
    --public-bg-soft: #f4efdd;
    --public-bg-deep: #e9e1c5;
    --public-surface: #fffdf7;
    --public-surface-strong: #ffffff;
    --public-surface-muted: #f7f1df;

    --public-green-950: #062f22;
    --public-green-900: #093b2b;
    --public-green-850: #0c4633;
    --public-green-800: #11523b;
    --public-green-700: #1b6749;
    --public-green-600: #287a59;

    --public-gold-800: #8b5708;
    --public-gold-700: #a86c0c;
    --public-gold-600: #c48617;
    --public-gold-500: #d6a43b;
    --public-gold-400: #dfbd69;
    --public-gold-300: #ead399;
    --public-gold-200: #f3e5bd;

    --public-text: #18372d;
    --public-text-soft: #5d7168;
    --public-text-faint: #819087;
    --public-white: #fffdf8;

    --public-success: #2c7a4b;
    --public-warning: #b66b0b;
    --public-danger: #a83c35;
    --public-info: #346c78;

    --public-border: rgba(9, 59, 43, .14);
    --public-border-strong: rgba(9, 59, 43, .24);
    --public-gold-border: rgba(168, 108, 12, .30);

    --public-shadow-xs: 0 4px 15px rgba(48, 62, 45, .06);
    --public-shadow-sm: 0 10px 28px rgba(48, 62, 45, .09);
    --public-shadow: 0 20px 58px rgba(48, 62, 45, .12);
    --public-shadow-lg: 0 30px 85px rgba(38, 55, 42, .16);

    --public-radius-sm: 12px;
    --public-radius: 20px;
    --public-radius-lg: 30px;
    --public-radius-pill: 999px;

    --public-container: 1320px;
    --public-transition: .25s ease;
}

/* --------------------------------------------------------------------------
   2. Base et structure
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
}

body {
    color: var(--public-text);
    background: var(--public-bg);
}
html {
    scroll-behavior: smooth;
}
.public-page,
.page-wrapper-guest {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: clip;
    color: var(--public-text);
    background:
        radial-gradient(circle at 50% -8rem, rgba(214, 164, 59, .15), transparent 32rem),
        linear-gradient(180deg, #fffef9 0%, var(--public-bg) 36%, #f7f1e2 100%);
    isolation: isolate;
}

.public-page::before,
.page-wrapper-guest::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle at 10% 8%, rgba(168, 108, 12, .08) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 16%, rgba(9, 59, 43, .07) 0 1px, transparent 2px);
    background-size: 32px 32px, 40px 40px;
}

.public-page::after,
.page-wrapper-guest::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9, 59, 43, .025) 1px, transparent 1px),
        linear-gradient(rgba(9, 59, 43, .025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 78%);
}

.public-page a {
    color: var(--public-green-800);
}

.public-page a:hover {
    color: var(--public-gold-700);
}

.public-container,
.page-wrapper-guest .container,
.page-wrapper-guest .container-sm,
.page-wrapper-guest .container-md,
.page-wrapper-guest .container-lg,
.page-wrapper-guest .container-xl,
.page-wrapper-guest .container-xxl {
    width: min(100% - 2rem, var(--public-container));
    max-width: var(--public-container);
    margin-inline: auto;
}

.public-page hr,
.page-wrapper-guest hr {
    border-color: rgba(9, 59, 43, .12);
    opacity: 1;
}

.public-page .text-body,
.public-page .text-muted,
.public-page .text-body.text-opacity-75,
.public-page .text-body.text-opacity-50 {
    color: var(--public-text-soft) !important;
}

.public-page .text-success {
    color: var(--public-green-700) !important;
}

.public-page .text-warning {
    color: var(--public-gold-700) !important;
}

.public-page .text-light {
    color: var(--public-green-950) !important;
}

.public-page .text-white {
    color: #d0d0d0 !important;
}

/* --------------------------------------------------------------------------
   3. Classes HTML réutilisables
   -------------------------------------------------------------------------- */
.public-section {
    position: relative;
    padding-block: clamp(4rem, 8vw, 4rem);
}

.public-section--soft {
    background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(244,239,221,.72));
    border-block: 1px solid rgba(9, 59, 43, .08);
}

.public-section--green {
    color: var(--public-white);
    background:
        radial-gradient(circle at 12% 8%, rgba(214,164,59,.14), transparent 24rem),
        linear-gradient(135deg, var(--public-green-900), var(--public-green-950));
}

.public-section-heading {
    max-width: 780px;
    margin: 0 auto clamp(2.2rem, 5vw, 4rem);
    text-align: center;
}

.public-section-kicker,
.section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-bottom: .9rem;
    color: var(--public-gold-700);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.public-section-title,
.section-title {
    margin: 0;
    color: var(--public-green-950);
    font-family: "Outfit", sans-serif;
    font-size: clamp(2rem, 4vw, 3.65rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.public-section-subtitle,
.section-subtitle {
    max-width: 720px;
    margin: 1rem auto 0;
    color: var(--public-text-soft);
    font-size: 1.04rem;
    line-height: 1.8;
}

.public-grid {
    display: grid;
    gap: 1.5rem;
}

.public-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   4. Hero public
   -------------------------------------------------------------------------- */
.public-hero,
#home {
    position: relative;
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 4rem;
    margin-top: 0;
    overflow: hidden;
    color: var(--public-text);
    background:
        radial-gradient(circle at 70% 35%, rgba(214, 164, 59, .18), transparent 28rem),
        radial-gradient(circle at 5% 20%, rgba(9, 59, 43, .08), transparent 24rem),
        linear-gradient(135deg, #fffef9 0%, #faf5e7 58%, #eee4c7 100%) !important;
}


.public-hero::before,
#home::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        repeating-radial-gradient(circle at 0 0, transparent 0 18px, rgba(9,59,43,.15) 19px 20px),
        repeating-radial-gradient(circle at 100% 100%, transparent 0 20px, rgba(168,108,12,.12) 21px 22px);
    mask-image: linear-gradient(90deg, #000 0, transparent 34%, transparent 66%, #000 100%);
}

#home > .position-absolute {
    opacity: 0 !important;
    pointer-events: none;
}

.public-hero__content,
.div-hero-content {
    position: relative;
    z-index: 3;
}

.public-hero__title,
.hero-title {
    max-width: 740px;
    margin-bottom: 1.25rem !important;
    color: var(--public-green-950) !important;
    font-family: "Outfit", sans-serif;
    font-size: clamp(2.65rem, 5.8vw, 3.1rem) !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.public-hero__text,
.hero-text {
    max-width: 680px;
    color: var(--public-text-soft) !important;
    font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
    line-height: 1.85 !important;
}

.hero-payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    color: rgba(9, 59, 43, .42) !important;
}

.hero-payment-icons i {
    margin: 0;
    transition: color var(--public-transition), transform var(--public-transition);
}

.hero-payment-icons i:hover {
    color: var(--public-gold-700);
    transform: translateY(-2px);
}

.hero-buttons-group {
    gap: .75rem !important;
}

.hero-quran-image {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 570px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 28px 30px rgba(40, 58, 43, .18));
    animation: publicFloat 6s ease-in-out infinite;
}

@keyframes publicFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   5. Boutons
   Les anciennes classes restent compatibles pour faciliter la migration.
   -------------------------------------------------------------------------- */
.public-btn,
.public-page .btn-neon,
.public-page .btn-primary-soft,
.public-page .btn-warning-soft,
.public-page .btn-danger-soft,
.public-page .btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 50px;
    padding: .75rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--public-radius-pill);
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    transition:
        color var(--public-transition),
        background var(--public-transition),
        border-color var(--public-transition),
        box-shadow var(--public-transition),
        transform var(--public-transition);
}

.public-btn:hover,
.public-page .btn-neon:hover,
.public-page .btn-primary-soft:hover,
.public-page .btn-warning-soft:hover,
.public-page .btn-danger-soft:hover,
.public-page .btn-outline-white:hover {
    transform: translateY(-2px);
}

.public-btn--primary,
.public-page .btn-neon {
    color: #fffdf7;
    background: linear-gradient(135deg, var(--public-green-700), var(--public-green-950));
    border-color: rgba(214, 164, 59, .48);
    box-shadow: 0 12px 28px rgba(6, 47, 34, .20);
}

.public-btn--primary:hover,
.public-page .btn-neon:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--public-green-800), #031f17);
    border-color: var(--public-gold-500);
    box-shadow: 0 16px 34px rgba(6, 47, 34, .27);
}

.public-btn--secondary,
.public-page .btn-primary-soft,
.public-page .btn-outline-white {
    color: var(--public-green-900);
    background: rgba(255, 255, 255, .84);
    border-color: var(--public-border-strong);
    box-shadow: var(--public-shadow-xs);
}

.public-btn--secondary:hover,
.public-page .btn-primary-soft:hover,
.public-page .btn-outline-white:hover {
    color: var(--public-green-950);
    background: #fff;
    border-color: var(--public-gold-border);
    box-shadow: var(--public-shadow-sm);
}

.public-btn--gold,
.public-page .btn-warning-soft {
    color: #fffdf7;
    background: linear-gradient(135deg, var(--public-gold-600), var(--public-gold-800));
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 12px 28px rgba(168, 108, 12, .20);
}

.public-btn--gold:hover,
.public-page .btn-warning-soft:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--public-gold-700), #754604);
    box-shadow: 0 16px 34px rgba(168, 108, 12, .28);
}

.public-btn--danger,
.public-page .btn-danger-soft {
    color: var(--public-danger);
    background: rgba(168, 60, 53, .08);
    border-color: rgba(168, 60, 53, .25);
}

.public-btn--danger:hover,
.public-page .btn-danger-soft:hover {
    color: #fff;
    background: var(--public-danger);
    border-color: var(--public-danger);
}

/* --------------------------------------------------------------------------
   6. Cards globales réutilisables
   -------------------------------------------------------------------------- */
.public-card,
.public-page .card {
    position: relative;
    height: 100%;
    overflow: hidden;
    color: var(--public-text);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,245,233,.96)) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    box-shadow: var(--public-shadow-sm) !important;
    transition:
        transform var(--public-transition),
        box-shadow var(--public-transition),
        border-color var(--public-transition);
}

.public-card::before,
.public-page .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--public-gold-500), transparent);
    opacity: .75;
}

.public-card:hover,
.public-page .card:hover {
    transform: translateY(-5px);
    border-color: var(--public-gold-border) !important;
    box-shadow: var(--public-shadow) !important;
}

.public-card__body,
.public-page .card-body {
    position: relative;
    z-index: 1;
}

.public-card__icon,
.public-page .avatar-title {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--public-gold-700) !important;
    background: rgba(214, 164, 59, .12) !important;
    border: 1px solid rgba(214, 164, 59, .25);
    border-radius: 17px !important;
}

.public-card__title,
.public-page .card h3,
.public-page .card h4,
.public-page .card h5,
.public-page .card h6 {
    color: var(--public-green-950);
}

.public-card__text {
    color: var(--public-text-soft);
    line-height: 1.75;
}

.public-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--public-green-800);
    font-weight: 750;
    text-decoration: none;
}

.public-card__link:hover {
    color: var(--public-gold-700);
}

/* Neutralise les décorations HUD */
.public-page .card-arrow,
.public-page .card-arrow-top-left,
.public-page .card-arrow-top-right,
.public-page .card-arrow-bottom-left,
.public-page .card-arrow-bottom-right {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. Statistiques
   -------------------------------------------------------------------------- */
.public-stat,
.stats-row > [class*="col-"] > .d-flex {
    height: 100%;
    padding: 1rem;
    background: rgba(255,255,255,.62);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius-sm);
}

.stats-row .h4 {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    color: var(--public-gold-700) !important;
    background: rgba(214,164,59,.12);
    border-radius: 13px;
}

.stats-row .h5 {
    color: var(--public-green-950);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   8. Tarifs
   -------------------------------------------------------------------------- */
#pricing {
    background:
        radial-gradient(circle at 50% 0, rgba(214,164,59,.12), transparent 24rem);
}

#pricing .text-center.mb-5 h1,
#blog .text-center.mb-5 h1 {
    color: var(--public-green-950);
    font-family: "Outfit", sans-serif;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 700;
}

.plan-nav {
    padding: .35rem !important;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius-pill) !important;
    box-shadow: var(--public-shadow-xs);
}

.pricing-box {
    overflow: visible !important;
}

.pricing-box .card-body {
    overflow: visible !important;
    padding: 3.4rem 1.6rem 1.7rem !important;
    margin: 0 !important;
    background: transparent !important;
}

.pricing-box h2 {
    color: var(--public-green-950);
    font-family: "Outfit", sans-serif;
}

.pricing-box ul li {
    color: var(--public-text-soft);
    line-height: 1.65;
}

.pricing-box ul i.text-success {
    color: var(--public-green-700) !important;
}

.cross-shadow-ribbon {
    position: absolute;
    top: -18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    max-width: calc(100% - 2rem);
    padding: .65rem 1rem;
    border-radius: var(--public-radius-pill);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--public-shadow-sm);
    backdrop-filter: blur(8px);
}

.cross-left {
    left: 1.2rem;
}

.cross-right {
    right: 1.2rem;
}

.ribbon-danger {
    color: #8c332e;
    background: #fff4ef;
    border: 1px solid rgba(168,60,53,.25);
}

.ribbon-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--public-green-700), var(--public-green-950));
    border: 1px solid rgba(214,164,59,.45);
}

.ribbon-warning {
    color: #6f4305;
    background: #fff7df;
    border: 1px solid rgba(168,108,12,.28);
}

.ribbon-primary .fa-crown,
.ribbon-primary .rank-star,
.ribbon-warning .rank-star {
    color: var(--public-gold-400);
    text-shadow: none;
    animation: none;
}

/* --------------------------------------------------------------------------
   9. Galerie
   -------------------------------------------------------------------------- */
#blog {
    background:
        linear-gradient(180deg, rgba(244,239,221,.72), rgba(255,255,255,.54)) !important;
}

.gallery-card .card-body:first-child {
    padding: .7rem;
}

.gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--public-radius) - 7px) !important;
    transition: transform .5s ease;
}

.gallery-card:hover img {
    transform: scale(1.025);
}

.gallery-card .list-inline {
    color: var(--public-text-faint) !important;
}

.gallery-card h5 {
    margin-bottom: .65rem;
    font-family: "Outfit", sans-serif;
    font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   10. Formulaires et panneaux
   -------------------------------------------------------------------------- */
.public-form-panel,
.contact-panel {
    position: relative;
    padding: clamp(1.2rem, 3vw, 2rem);
    color: var(--public-text) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,245,233,.96)) !important;
    border: 1px solid var(--public-border) !important;
    border-radius: var(--public-radius-lg) !important;
    box-shadow: var(--public-shadow) !important;
    overflow: hidden;
}

.contact-panel:hover {
    transform: none;
    border-color: var(--public-gold-border) !important;
    box-shadow: var(--public-shadow-lg) !important;
}

.contact-panel > h4 {
    color: var(--public-green-950) !important;
    font-family: "Outfit", sans-serif;  
    font-size: 1.35rem;
}

.public-page .form-label {
    margin-bottom: .45rem;
    color: var(--public-green-950);
    font-size: .9rem;
    font-weight: 750;
}

.public-page .form-control,
.public-page textarea,
.public-page select {
    width: 100%;
    min-height: 50px;
    padding: .75rem .95rem !important;
    color: var(--public-text) !important;
    background: #fffdf8 !important;
    border: 1px solid rgba(9,59,43,.18) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    transition: border-color var(--public-transition), box-shadow var(--public-transition);
}

.public-page textarea {
    min-height: 130px;
    resize: vertical;
}

.public-page .form-control:focus,
.public-page textarea:focus,
.public-page select:focus {
    background: #fff !important;
    border-color: var(--public-gold-500) !important;
    box-shadow: 0 0 0 4px rgba(214,164,59,.14) !important;
    outline: none;
}

.public-page .form-control::placeholder,
.public-page textarea::placeholder {
    color: #99a39d;
}

.contact-info-item {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,.72);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius-sm);
}

.contact-info-item i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: var(--public-gold-700);
    background: rgba(214,164,59,.12);
    border-radius: 12px;
}

.contact-muted {
    color: var(--public-text-soft);
}

/* --------------------------------------------------------------------------
   11. Alertes, badges et fonds doux
   -------------------------------------------------------------------------- */
.public-page .alert {
    color: var(--public-text);
    background: rgba(255,255,255,.94);
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius-sm);
    box-shadow: var(--public-shadow-sm);
}

.public-page .alert-success {
    border-left: 4px solid var(--public-success);
}

.public-page .alert-danger {
    border-left: 4px solid var(--public-danger);
}

.public-page .alert-warning {
    border-left: 4px solid var(--public-gold-600);
}

.bg-neon-soft,
.bg-primary-soft,
.bg-success-soft,
.bg-warning-soft,
.bg-danger-soft,
.bg-purple-soft,
.bg-slate-soft {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--public-border) !important;
    color: var(--public-green-800) !important;
}

.text-neon,
.bg-neon {
    color: var(--public-green-700) !important;
}

/* --------------------------------------------------------------------------
   12. Offcanvas et modales
   -------------------------------------------------------------------------- */
.public-page .offcanvas,
.public-page .modal-content {
    color: var(--public-text);
    background:
        linear-gradient(145deg, #fffef9, #f8f2df) !important;
    border: 1px solid var(--public-gold-border);
    border-radius: var(--public-radius-lg);
    box-shadow: var(--public-shadow-lg);
}

.public-page .modal-header,
.public-page .modal-footer,
.public-page .offcanvas-header,
.public-page .offcanvas-footer {
    border-color: var(--public-border);
}

.public-page .modal-title,
.public-page .offcanvas-title {
    color: var(--public-green-950);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
}

.public-page .btn-close {
    filter: none;
}

.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

.modal-dialog {
    position: relative;
    z-index: 1061 !important;
}

.offcanvas {
    z-index: 1045 !important;
}

.offcanvas-backdrop {
    z-index: 1040 !important;
}

/* --------------------------------------------------------------------------
   13. Popup d’annonce
   -------------------------------------------------------------------------- */
#announcementHomePopup {
    z-index: 1070 !important;
}

.announcement-popup-modal .modal-content {
    color: var(--public-text);
    background:
        radial-gradient(circle at 10% 0, rgba(214,164,59,.15), transparent 20rem),
        linear-gradient(145deg, #fffef9, #f8f2df) !important;
    border: 1px solid var(--public-gold-border);
    border-radius: var(--public-radius-lg);
    overflow: hidden;
    box-shadow: var(--public-shadow-lg);
}

.announcement-popup-cover {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--public-radius-sm);
    border: 1px solid var(--public-border);
}

.announcement-popup-type {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: var(--public-radius-pill);
    color: var(--public-green-900) !important;
    background: rgba(214,164,59,.13) !important;
    border: 1px solid rgba(168,108,12,.22) !important;
    font-size: .8rem;
    font-weight: 800;
}

.announcement-popup-excerpt {
    padding: 1rem;
    color: var(--public-green-900) !important;
    background: rgba(214,164,59,.10);
    border: 1px solid rgba(168,108,12,.18);
    border-radius: var(--public-radius-sm);
}

.announcement-popup-body {
    color: var(--public-text-soft);
    line-height: 1.85;
}

.announcement-popup-date {
    color: var(--public-text-faint);
    font-size: .9rem;
}

/* --------------------------------------------------------------------------
   14. Bouton de retour en haut
   -------------------------------------------------------------------------- */
.btn-scroll-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fffdf7;
    background: linear-gradient(135deg, var(--public-green-700), var(--public-green-950));
    border: 1px solid rgba(214,164,59,.45);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(6,47,34,.25);
    opacity: 0;
    visibility: hidden;
    text-decoration: none;
    transition: opacity .2s, visibility .2s, transform .2s;
}

.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.btn-scroll-top:hover {
    color: #fff;
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   15. Utilitaires
   -------------------------------------------------------------------------- */
.move-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hover-card {
    transition: transform var(--public-transition), box-shadow var(--public-transition);
}

.text-break-all,
.text-break-all a,
.contact-info-block p,
.contact-info-block a {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.info-links-wrap .btn {
    min-height: 48px;
    font-weight: 700;
}

.about-content,
.public-page .lead {
    color: var(--public-text-soft) !important;
    line-height: 1.85;
}

.about-float-image {
    float: left;
    width: 850px;
    max-width: 100%;
    margin: 20px 30px 20px 0;
}

/* --------------------------------------------------------------------------
   16. RTL / arabe
   -------------------------------------------------------------------------- */
.rtl-page {
    direction: rtl;
    text-align: right;
}

.rtl-page,
.rtl-page .offcanvas,
.rtl-page .modal-content,
.rtl-page .card,
.rtl-page .form-control,
.rtl-page .form-label,
.rtl-page .alert,
.rtl-page .btn,
.rtl-page .dropdown-menu {
    direction: rtl;
}

.rtl-page h1,
.rtl-page h2,
.rtl-page h3,
.rtl-page h4,
.rtl-page h5,
.rtl-page h6,
.rtl-page p,
.rtl-page li,
.rtl-page .lead,
.rtl-page .text-muted,
.rtl-page .form-label,
.rtl-page .card-body,
.rtl-page .modal-body,
.rtl-page .modal-header,
.rtl-page .modal-footer,
.rtl-page .offcanvas-body,
.rtl-page .offcanvas-header,
.rtl-page .offcanvas-footer {
    text-align: right;
}

.rtl-page .form-control,
.rtl-page textarea,
.rtl-page input {
    text-align: right;
}

.rtl-page .list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    padding-right: 0;
}

.rtl-page ul.list-unstyled {
    padding-right: 0;
}

.rtl-page .hero-buttons-wrap,
.rtl-page .hero-payment-icons {
    justify-content: flex-end !important;
    text-align: right !important;
}

.rtl-page .d-flex.align-items-center.flex-row-adapt,
.rtl-page .info-row,
.rtl-page .contact-buttons,
.rtl-page .auto-reg-actions,
.rtl-page .modal-footer-flex {
    flex-direction: row-reverse;
}

.rtl-page .offcanvas-start {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%);
}

.rtl-page .offcanvas.show:not(.hiding),
.rtl-page .offcanvas.showing {
    transform: none;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1660px) {
    .public-container,
    .page-wrapper-guest .container,
    .page-wrapper-guest .container-sm,
    .page-wrapper-guest .container-md,
    .page-wrapper-guest .container-lg,
    .page-wrapper-guest .container-xl,
    .page-wrapper-guest .container-xxl {
        max-width: var(--public-container);
    }
}

@media (max-width: 1199.98px) {
    .public-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .public-container,
    .page-wrapper-guest .container,
    .page-wrapper-guest .container-sm,
    .page-wrapper-guest .container-md,
    .page-wrapper-guest .container-lg,
    .page-wrapper-guest .container-xl,
    .page-wrapper-guest .container-xxl {
        width: min(100% - 2rem, var(--public-container));
        padding-inline: 0 !important;
    }

    .public-hero,
    #home {
        min-height: auto;
        padding-block: 4.5rem 3.5rem;
    }

    .hero-title {
        font-size: clamp(2.25rem, 8vw, 3.4rem) !important;
        line-height: 1.08 !important;
    }

    .hero-image-desktop {
        display: none !important;
    }

    .hero-buttons-wrap {
        display: block !important;
        width: 100%;
    }

    .hero-buttons-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    .hero-buttons-group .btn {
        width: 100%;
    }

    .hero-payment-icons {
        justify-content: center;
    }

    .public-grid--3,
    .public-grid--2 {
        grid-template-columns: 1fr;
    }

    .contact-buttons,
    .auto-reg-actions,
    .modal-footer-flex,
    .form-actions-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .75rem !important;
    }

    .contact-buttons .btn,
    .auto-reg-actions .btn,
    .modal-footer-flex .btn,
    .form-actions-stack > * {
        width: 100%;
    }

    .about-float-image {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .hero-image-desktop {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
    .public-section {
        padding-block: 3.5rem;
    }

    .pricing-box {
        margin-bottom: 1.4rem;
    }

    .cross-left,
    .cross-right {
        left: 1rem;
        right: auto;
    }

    .stats-row > [class*="col-"] > .d-flex {
        align-items: flex-start !important;
    }

    .info-links-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    .info-links-wrap a {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .public-page,
    .page-wrapper-guest {
        font-size: .95rem;
    }

    .public-section-title,
    .section-title {
        font-size: 2rem;
    }

    .hero-title {
        font-size: 2.15rem !important;
    }

    .public-card,
    .public-page .card,
    .public-form-panel,
    .contact-panel {
        border-radius: 18px !important;
    }

    .announcement-popup-modal .modal-dialog {
        margin: .5rem;
    }

    .announcement-popup-modal .modal-content {
        border-radius: 20px;
    }

    .announcement-popup-modal .modal-header,
    .announcement-popup-modal .modal-body {
        padding: 1rem;
    }

    .announcement-popup-excerpt {
        font-size: 1rem !important;
        line-height: 1.45;
    }
}

/* --------------------------------------------------------------------------
   18. Accessibilité
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.public-page :focus-visible {
    outline: 3px solid rgba(214,164,59,.55);
    outline-offset: 3px;
}

/* ==========================================================================
   MODAL RÉINSCRIPTION — FOOTER
   ========================================================================== */

.public-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: rgba(244, 239, 221, .58);
    border-top: 1px solid var(--public-border);
}

.public-modal-footer .public-btn {
    min-width: 165px;
}

.public-modal-footer .popup-registration-link {
    box-shadow: 0 12px 28px rgba(6, 47, 34, .18);
}

@media (max-width: 575.98px) {
    .public-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .public-modal-footer .public-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   MODAL RÉINSCRIPTION
   ========================================================================== */

.auto-registration-modal {
    z-index: 20010;
}

.auto-registration-modal .modal-dialog {
    max-width: 820px;
}

.auto-registration-modal .modal-content {
    overflow: hidden;
    color: var(--public-text);
    background:
        radial-gradient(
            circle at top left,
            rgba(214, 164, 59, .14),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #fffdf7,
            #f6efdc
        );

    border: 1px solid rgba(168, 108, 12, .22);
    border-radius: 26px;

    box-shadow:
        0 30px 90px rgba(25, 42, 31, .24);
}

/* Header */

.auto-registration-modal__header {
    align-items: flex-start;
    padding: 1.35rem 1.5rem;
    background: rgba(255, 255, 255, .58);
    border-bottom: 1px solid var(--public-border);
}

.auto-registration-modal__heading {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.auto-registration-modal__heading-icon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    color: var(--public-gold-700);
    background: rgba(214, 164, 59, .13);

    border: 1px solid rgba(168, 108, 12, .20);
    border-radius: 17px;

    font-size: 1.25rem;
}

.auto-registration-modal__eyebrow {
    display: block;
    margin-bottom: .2rem;

    color: var(--public-gold-700);

    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auto-registration-modal .modal-title {
    margin: 0;

    color: var(--public-green-950);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
}

.auto-registration-modal__heading p {
    margin: .3rem 0 0;

    color: var(--public-text-soft);
    font-size: .88rem;
    line-height: 1.5;
}

/* Body */

.auto-registration-modal__body {
    padding: clamp(1.2rem, 4vw, 2rem);
}

.auto-registration-modal__information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .8rem;
    margin-bottom: 1.5rem;
}

.auto-registration-modal__info-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);

    gap: .75rem;
    align-items: center;

    padding: .85rem .95rem;

    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--public-border);
    border-radius: 14px;
}

.auto-registration-modal__info-item > span {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--public-gold-700);
    background: rgba(214, 164, 59, .11);

    border-radius: 12px;
}

.auto-registration-modal__info-item p {
    margin: 0;

    color: var(--public-text-soft);
    font-size: .82rem;
    line-height: 1.55;
}

/* Formulaire */

.auto-registration-modal__form .form-label {
    display: flex;
    align-items: center;
    gap: .45rem;

    margin-bottom: .45rem;

    color: var(--public-green-950);

    font-size: .86rem;
    font-weight: 800;
}

.auto-registration-modal__form .form-label i {
    color: var(--public-gold-700);
}

.auto-registration-modal__form .form-control {
    min-height: 52px;

    color: var(--public-text);
    background: #fffdf8;

    border: 1px solid rgba(9, 59, 43, .17);
    border-radius: 13px;

    box-shadow: none;
}

.auto-registration-modal__form .form-control:focus {
    background: #fff;
    border-color: var(--public-gold-500);

    box-shadow:
        0 0 0 4px rgba(214, 164, 59, .13);
}

.auto-registration-modal__form .form-control.is-invalid {
    border-color: #b94a42;

    box-shadow:
        0 0 0 3px rgba(168, 60, 53, .09);
}

.auto-registration-modal__form .invalid-feedback {
    margin-top: .35rem;

    color: #a83c35;
    font-size: .78rem;
}

.auto-registration-modal__form .form-text {
    display: flex;
    align-items: flex-start;
    gap: .4rem;

    margin-top: .45rem;

    color: var(--public-text-faint);

    font-size: .76rem;
    line-height: 1.5;
}

.auto-registration-modal__form .form-text i {
    margin-top: .12rem;
    color: var(--public-gold-700);
}

/* Notice */

.auto-registration-modal__notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;

    margin-top: 1.25rem;
    padding: .9rem 1rem;

    color: var(--public-text-soft);
    background: rgba(52, 108, 120, .07);

    border: 1px solid rgba(52, 108, 120, .16);
    border-radius: 14px;
}

.auto-registration-modal__notice i {
    margin-top: .18rem;
    color: var(--public-gold-700);
}

.auto-registration-modal__notice p {
    margin: 0;
    line-height: 1.6;
}

/* Actions */

.auto-registration-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;

    margin-top: 1.35rem;
    padding-top: 1.2rem;

    border-top: 1px solid var(--public-border);
}

.auto-registration-modal__actions .public-btn {
    min-width: 155px;
}

/* Footer */

.auto-registration-modal__footer {
    display: block;
    padding: .9rem 1.5rem;

    background: rgba(244, 239, 221, .60);
    border-top: 1px solid var(--public-border);
}

.auto-registration-modal__direct-access {
    display: flex;
    align-items: flex-start;
    gap: .65rem;

    color: var(--public-text-faint);

    font-size: .75rem;
    line-height: 1.5;
}

.auto-registration-modal__direct-access > i {
    margin-top: .15rem;
    color: var(--public-gold-700);
}

.auto-registration-modal__direct-access span,
.auto-registration-modal__direct-access a {
    display: block;
}

.auto-registration-modal__direct-access a {
    margin-top: .15rem;

    color: var(--public-green-800);
    font-weight: 700;

    overflow-wrap: anywhere;
}

.auto-registration-modal__direct-access a:hover {
    color: var(--public-gold-700);
}

/* Backdrop */

body > .modal-backdrop {
    z-index: 20000 !important;
}

/* RTL */

.rtl-page .auto-registration-modal__heading,
.rtl-page .auto-registration-modal__info-item {
    direction: rtl;
}

.rtl-page .auto-registration-modal__actions {
    justify-content: flex-start;
}

/* Mobile */

@media (max-width: 767.98px) {
    .auto-registration-modal__information {
        grid-template-columns: 1fr;
    }

    .auto-registration-modal__actions {
        flex-direction: column-reverse;
    }

    .auto-registration-modal__actions .public-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .auto-registration-modal .modal-dialog {
        margin: .65rem;
    }

    .auto-registration-modal .modal-content {
        border-radius: 20px;
    }

    .auto-registration-modal__header {
        padding: 1rem;
    }

    .auto-registration-modal__heading {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: .75rem;
    }

    .auto-registration-modal__heading-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .auto-registration-modal__body {
        padding: 1rem;
    }

    .auto-registration-modal__footer {
        padding: .85rem 1rem;
    }
}

.contact-title {
    color: var(--public-gold-800) !important;
    
    font-weight: 500;
}

#contact {
    scroll-margin-top: 110px;
}

.password-wrapper {
    position: relative;
}

.password-wrapper .toggle-password {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: #6c757d;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 5;
}

.password-wrapper .toggle-password:hover {
    color: #212529;
}

.password-wrapper .toggle-password:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 50%;
}

/* =========================================================
   BOUTONS PASTEL
   Thème ivoire / or / vert
========================================================= */

.btn-pastel {
    --btn-bg: #f4f1e8;
    --btn-border: #e5dfd0;
    --btn-color: #4f514b;
    --btn-hover: #ece7da;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    min-height: 50px;
    padding: .75rem 1.3rem;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);

    border-radius: .6rem;

    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;

    box-shadow: 0 2px 6px rgba(30, 40, 35, .035);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.btn-pastel:hover,
.btn-pastel:focus {
    color: var(--btn-color);
    background: var(--btn-hover);
    border-color: var(--btn-border);

    box-shadow: 0 4px 12px rgba(30, 40, 35, .07);
}

.btn-pastel:active {
    transform: translateY(1px);
    box-shadow: none;
}


/* =========================================================
   VERT SAUGE
========================================================= */

.btn-pastel-green {
    --btn-bg: #e7efe9;
    --btn-border: #cfddd2;
    --btn-color: #496453;
    --btn-hover: #dce8df;
}


/* =========================================================
   OR / CHAMPAGNE
========================================================= */

.btn-pastel-gold {
    --btn-bg: #f5eddc;
    --btn-border: #e7d7b5;
    --btn-color: #806b3f;
    --btn-hover: #eee2c9;
}


/* =========================================================
   IVOIRE
========================================================= */

.btn-pastel-ivory {
    --btn-bg: #f8f5ed;
    --btn-border: #e7e0d2;
    --btn-color: #625f55;
    --btn-hover: #f0ebdf;
}


/* =========================================================
   BLEU POUDRÉ
========================================================= */

.btn-pastel-blue {
    --btn-bg: #e9eff3;
    --btn-border: #d3dfe6;
    --btn-color: #506874;
    --btn-hover: #dfe9ee;
}


/* =========================================================
   ROSE POUDRÉ
========================================================= */

.btn-pastel-rose {
    --btn-bg: #f4e9e8;
    --btn-border: #e5d2d0;
    --btn-color: #805e5b;
    --btn-hover: #eddfdd;
}


/* =========================================================
   LAVANDE
========================================================= */

.btn-pastel-purple {
    --btn-bg: #eeebf3;
    --btn-border: #ddd6e6;
    --btn-color: #675d78;
    --btn-hover: #e5e0ec;
}


/* =========================================================
   PÊCHE
========================================================= */

.btn-pastel-orange {
    --btn-bg: #f6ede4;
    --btn-border: #ead8c7;
    --btn-color: #80654f;
    --btn-hover: #f0e3d6;
}


/* =========================================================
   ROUGE DOUX / ACTION SENSIBLE
========================================================= */

.btn-pastel-red {
    --btn-bg: #f5e8e8;
    --btn-border: #e8d0d0;
    --btn-color: #865c5c;
    --btn-hover: #eedddd;
}


/* =========================================================
   GRIS
========================================================= */

.btn-pastel-gray {
    --btn-bg: #efefec;
    --btn-border: #deded8;
    --btn-color: #62645f;
    --btn-hover: #e6e6e1;
}


/* =========================================================
   PETIT FORMAT
========================================================= */

.btn-pastel-sm {
    padding: .4rem .72rem;
    border-radius: .5rem;
    font-size: .82rem;
}


/* =========================================================
   ICÔNES
========================================================= */

.btn-pastel i {
    font-size: .9em;
    opacity: .78;
}