/*----- ACCUEIL CSS----*/


/* ---- header ---- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero {
    position: relative;
    width: 100%;
    height: 720px;
    background: #0F274D;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    right: 10%;
    bottom: 0;

    width: 62%;
    height: 100%;

    object-fit: cover;
    object-position: center;
right:8%;
    width:65%;
    z-index: 1;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

background: linear-gradient(
    to right,
    #071732 28.99%,
     rgba(7, 23, 50, 0.96) 31.93%,
      rgba(7, 23, 50, 0.55) 36.97%, 
      rgba(7, 23, 50, 0) 54.2%, 
      rgba(7, 23, 50, 0) 68.07%, 
      rgba(7, 23, 50, 0.55) 77.31%, 
      rgba(7, 23, 50, 0.96) 85.29%, 
      #071732 90.34%);    
    
    }

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1400px;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 80px 40px 0;
}

.hero-left {
    width: 42%;
    color: white;    
}

.hero-left h1 {
    font-size: 70px;
    color: #ffffff;
}

.subtitle {
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 18px;
    margin-top: 35px;
}

.description {
    font-size: 18px;
    line-height: 1.7;
    margin: 30px 0 90px 0;
    color: #ffffff;
}

.buttons {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.buttons button {
    background: transparent;
    color: white;
    font-size: 16px;
    font-weight: 800;
    border: 2px solid #D7BA63;
    padding: 14px 26px;
    border-radius: 8px;
    cursor: pointer;
}

.buttons button:hover {
    background: #D7BA63;
    color: #0F274D;

}


/*=======================
pourquoi soutenir
=========================*/

.support-section {
  width: 100%;
  background: #fff;
  padding: 30px 28px 50px;
}

.support-title {
  text-align: center;
  margin-bottom: 30px;
}

.support-title h2 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #050505;
}


.stats-grid{
    margin: auto;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}
.stat{
    position:relative;
    margin-top: 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:0 15px;
}


/* Icônes */

.stat img{
    width:48px;
    height:48px;
    object-fit:contain;
    margin-bottom:18px;
}

/* titres */

.stat h3{
    margin:0 0 10px;

    color:#000000;

    font-size:1.36rem;
    font-weight:650;
    line-height:1;
}

/* Descriptions */

.stat p{
    font-size: 0.9rem;
    max-width: 280px;

    margin: 0;

    color: #000;
    font-weight: 400;
    line-height: 1.35;

    max-width: 260px;
}

/*--- gold line ---*/

.gold-line {
    
    width:250px;
    height:3px;
    background:#c8b46e;
    margin-bottom: 30px;
    
    
}

.gold-line2 {
    
    width:250px;
    height:3px;
    background:#c8b46e;
    margin:0 auto 40px;
    
    
}


/* ==================================
   OFFRES DE PARTENARIAT
================================== */

.offers-section{
    width:100%;
    background:#fff;
    padding:50px 28px 70px;
}

.offers-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;

    display:grid;
    grid-template-columns:minmax(0, 2.15fr) minmax(300px, 1fr);
    gap:18px;
    align-items:start;
}

/* Titres */

.offers-partnership > h2,
.patron-card > h2{
    margin:0 0 18px;

    font-family:"Poppins", sans-serif;
    font-size:1.8rem;
    font-weight:800;
    line-height:1.1;
    color:#080808;
}

.offers-partnership > h2 span,
.patron-card > h2 span{
    color:#c8b46e;
}

/* Tableau */

.offers-table-wrapper{
    width:100%;
    overflow-x:auto;

    border:2px solid #c8b46e;
    border-radius:7px;
}

.offers-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;

    font-family:"Poppins", sans-serif;
    table-layout:fixed;
}

.offers-table th,
.offers-table td{
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
}

.offers-table th:last-child,
.offers-table td:last-child{
    border-right:none;
}

.offers-table tbody tr:last-child td{
    border-bottom:none;
}

/* En-têtes */

.offers-table thead th:first-child{
    width:29%;
    background:#fff;
}

.offer-head{
    height:105px;
    padding:12px 6px;

    color:#fff;
    text-align:center;
    vertical-align:middle;
}

.offer-head strong{
    display:block;

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

.offer-head span{
    display:block;
    margin-top:9px;

    font-size:.64rem;
    font-weight:400;
    line-height:1.35;
}

.offer-head--bronze{
    background:#b97600;
}

.offer-head--silver{
    background:#b8b8b8;
}

.offer-head--gold{
    background:#efc320;
}

.offer-head--premium{
    background:#102b4c;
}

/* Cellules */

.offers-table tbody td{
    background:#e9e9e9;

    padding:8px 7px;

    font-size:.7rem;
    line-height:1.25;
    text-align:center;
    vertical-align:middle;
}

.offers-table tbody td:first-child{
    background:#f5f5f5;
    text-align:left;
}

.offers-table tbody td:not(:first-child){
    font-size:1.1rem;
    font-weight:600;
}

/* Textes longs dans la dernière colonne */

.offers-table tbody td:last-child{
    font-size: 1.1rem;
    font-weight:600;
}

/* ==================================
   BLOC MÉCÈNE
================================== */

.patron-card__content{
    border: 2px solid #c8b46e;
    border-radius: 7px;
    padding: 9px 26px;
}

.patron-intro{
    margin: 0 0 30px;

    font-family: "Poppins", sans-serif;
    font-size: .9rem;
    line-height: 1.55;
    color: #111;
}

.patron-benefits{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 28px;
}

.patron-benefit{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;
}

.patron-benefit img{
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 14px;
}

.patron-benefit p{
    max-width: 260px;
    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: .75rem;
    line-height: 1.45;
}

/* Réduction fiscale */

.tax-box{
    border: 2px solid #c8b46e;
    border-radius: 6px;

    padding: 20px;
    margin-top: 12px;
}

.tax-box h3{
    margin: 0 0 18px;

    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: .9rem;
    font-weight: 800;
}

.tax-grid{
    display: grid;
    grid-template-columns: 1fr;
}

.tax-grid > div:first-child{
    padding-right: 0;
    border-right: none;
}

.tax-grid strong{
    display: block;
    margin-bottom: 10px;

    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: .75rem;
    font-weight: 800;
}

.tax-grid p{
    max-width: 420px;
    margin: 0 auto;

    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: .7rem;
    line-height: 1.45;
}

.patron-card__content > p:last-child{
    margin: 24px 0 0;

    font-family: "Poppins", sans-serif;
    font-size: .78rem;
    line-height: 1.5;
}

.patron-button:hover{
    background:#b5a15d;
    transform:translateY(-2px);
}


.partenaire-majeur td{
    background-color: #e8dcc0 !important;
    font-weight: 600;
}/* ==================================
   CONTACT + FAQ
================================== */

.support-contact{
    width:100%;
    padding:34px 28px;
    background:#061a38;
}

.support-contact__container{
    width:100%;
    max-width:1400px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.support-form-block h2,
.support-faq h2{
    margin:0 0 14px;

    color:#fff;
    font-family:"Poppins", sans-serif;
    font-size:1.55rem;
    font-weight:800;
    line-height:1.2;
}

/* Formulaire */

.support-form{
    padding:16px;
    border:2px solid #c8b46e;
    border-radius:6px;
}

.support-form__grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.support-field{
    display:flex;
    flex-direction:column;
}

.support-field label{
    padding:5px 7px;

    background:#304b6d;
    color:#fff;

    font-family:"Poppins", sans-serif;
    font-size:.68rem;
    font-weight:600;
}

.support-field input,
.support-field textarea{
    width:100%;

    border:none;
    outline:none;
    border-radius:0 0 3px 3px;

    background:#172d4d;
    color:#fff;

    font-family:"Poppins", sans-serif;
    font-size:.8rem;
}

.support-field input{
    height:42px;
    padding:0 10px;
}

.support-field textarea{
    min-height:110px;
    padding:10px;
    resize:none;
}

.support-field--message{
    margin-top:10px;
}

.support-field input:focus,
.support-field textarea:focus{
    box-shadow:inset 0 0 0 1px #c8b46e;
}

.support-form__button{
    display:block;

    margin:16px auto 12px;
    padding:11px 22px;

    border:none;
    border-radius:4px;

    background:#c8b46e;
    color:#fff;

    font-family:"Poppins", sans-serif;
    font-size:.72rem;
    font-weight:700;

    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
}

.support-form__button:hover{
    background:#b39d56;
    transform:translateY(-2px);
}


.support-form__consent a{
    color:#c8b46e;
}

.support-form__consent{
    max-width:440px;
    margin:0 auto;

    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:7px;

    color:#fff;
    font-family:"Poppins", sans-serif;
    font-size:0.8rem;
    line-height:1.4;
}

.support-form__consent input[type="checkbox"]{
    width:15px;
    height:15px;
    flex-shrink:0;
    margin:1px 0 0;
    accent-color:#c8b46e;
}
/* FAQ */

.faq-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.faq-item{
    border:2px solid #c8b46e;
    border-radius:5px;
    overflow:hidden;
}

.faq-question{
    width:100%;
    min-height:56px;
    padding:0 16px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    border:none;
    background:transparent;
    color:#fff;

    text-align:left;
    font-family:"Poppins", sans-serif;
    font-size:.73rem;
    font-weight:600;

    cursor:pointer;
}

.faq-icon{
    flex-shrink:0;

    color:#c8b46e;
    font-size:1.2rem;
    font-weight:400;

    transition:transform .25s ease;
}

.faq-answer{
    max-height:0;
    overflow:hidden;

    transition:max-height .35s ease;
}

.faq-answer p{
    margin:0;
    padding:0 16px 16px;

    color:rgba(255,255,255,.82);
    font-family:"Poppins", sans-serif;
    font-size:.7rem;
    line-height:1.6;
}

.faq-item.is-open .faq-answer{
    max-height:180px;
}

.faq-item.is-open .faq-icon{
    transform:rotate(45deg);
}


/* ==================================
   ILS LE SOUTIENNENT
================================== */

.supporters-section{
    width:100%;
    padding:34px 28px 45px;
    background:#fff;
}

.supporters-container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.supporters-heading h2{
    margin:0;

    color:#080808;
    font-family:"Poppins", sans-serif;
    font-size:1.5rem;
    font-weight:800;
}

.supporters-line{
    width:155px;
    height:2px;

    margin-top:8px;
    background:#c8b46e;
}

.supporters-logos{
    margin-top:30px;

    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    align-items:center;
    gap:45px;
}

.supporter-logo{
    min-height:90px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.supporter-logo img{
    display:block;

    width:100%;
    max-width:180px;
    max-height:80px;

    object-fit:contain;

    transition:transform .25s ease;
}

.supporter-logo:hover img{
    transform:scale(1.05);
}


/* =========================================================
   RESPONSIVE COMPLET - PAGE PARTENARIAT
========================================================= */


/* =========================================================
   GRANDE TABLETTE / PETIT ORDINATEUR
   769px à 1100px
========================================================= */

@media screen and (max-width: 1100px) {

    /* =========================
       HERO
    ========================= */

    .hero{
        height:620px;
    }

    .hero-image{
        right:0;
        width:72%;
        height:100%;
        object-position:58% center;
    }

    .hero-overlay{
        background:linear-gradient(
            to right,
            #071732 0%,
            rgba(7,23,50,.98) 28%,
            rgba(7,23,50,.78) 45%,
            rgba(7,23,50,.20) 72%,
            rgba(7,23,50,.68) 100%
        );
    }

    .hero-content{
        max-width:100%;
        padding:75px 35px 0;
    }

    .hero-left{
        width:50%;
    }

    .hero-left h1{
        font-size:52px;
        line-height:1.05;
    }

    .subtitle,
    .description{
        font-size:15px;
    }

    .subtitle{
        margin-top:28px;
    }

    .description{
        margin:25px 0 45px;
    }

    .gold-line{
        width:190px;
    }

    .buttons{
        margin-top:30px;
        flex-wrap:wrap;
    }

    .buttons button{
        padding:12px 18px;
        font-size:13px;
    }


    /* =========================
       POURQUOI SOUTENIR
    ========================= */

    .support-section{
        padding:45px 24px 55px;
    }

    .support-title h2{
        font-size:1.85rem;
    }

    .stats-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:40px 20px;
        max-width:900px;
    }

    .stat{
        margin-top:0;
    }

    .stat h3{
        font-size:1.15rem;
    }

    .stat p{
        font-size:.82rem;
    }


    /* =========================
       OFFRES + MÉCÉNAT
    ========================= */

    .offers-section{
        padding:50px 24px 65px;
    }

    .offers-container{
        grid-template-columns:1fr;
        gap:50px;
        max-width:950px;
    }

    .offers-partnership > h2,
    .patron-card > h2{
        font-size:1.65rem;
    }

    /* Le tableau peut défiler horizontalement */
    .offers-table-wrapper{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .offers-table{
        min-width:760px;
    }

    .patron-card{
        width:100%;
        max-width:760px;
        margin:0 auto;
    }

    .patron-card__content{
        padding:25px;
    }

    .patron-benefits{
        gap:28px;
    }


    /* =========================
       CONTACT + FAQ
    ========================= */

    .support-contact{
        padding:50px 24px;
    }

    .support-contact__container{
        grid-template-columns:1fr;
        gap:45px;
        max-width:850px;
    }

    .support-form-block,
    .support-faq{
        width:100%;
    }

    .support-form-block h2,
    .support-faq h2{
        font-size:1.45rem;
    }


    /* =========================
       PARTENAIRES
    ========================= */

    .supporters-section{
        padding:50px 24px;
    }

    .supporters-logos{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:30px 40px;
    }

}



/* =========================================================
   TABLETTE PORTRAIT / GRAND MOBILE
   jusqu'à 768px
========================================================= */

@media screen and (max-width:768px){

    /* =========================
       HERO
    ========================= */

    .hero{
        height:auto;
        min-height:650px;
        padding-top:68px;
    }

    .hero-image{
        top:0;
        right:0;
        bottom:auto;

        width:100%;
        height:100%;

        object-position:66% center;
    }

    .hero-overlay{
        background:linear-gradient(
            to bottom,
            rgba(7,23,50,.40) 0%,
            rgba(7,23,50,.58) 35%,
            rgba(7,23,50,.92) 70%,
            #071732 100%
        );
    }

    .hero-content{
        min-height:582px;

        padding:45px 24px 38px;

        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
    }

    .hero-left{
        width:100%;
        max-width:520px;
    }

    .hero-left h1{
        font-size:clamp(40px, 12vw, 54px);
        line-height:1.05;
    }

    .subtitle{
        margin-top:22px;
        margin-bottom:16px;

        font-size:15px;
        line-height:1.55;
    }

    .description{
        margin:20px 0 28px;

        font-size:14px;
        line-height:1.65;
    }

    .subtitle br,
    .description br{
        display:none;
    }

    .gold-line{
        width:150px;
        margin-bottom:18px;
    }

    .buttons{
        width:100%;
        margin-top:20px;
    }

    .buttons button{
        width:100%;
        max-width:340px;

        min-height:52px;

        padding:13px 18px;

        font-size:13px;
        border-radius:10px;
    }


    /* =========================
       POURQUOI SOUTENIR
    ========================= */

    .support-section{
        padding:48px 20px;
    }

    .support-title{
        margin-bottom:35px;
    }

    .support-title h2{
        font-size:1.6rem;
    }

    .gold-line2{
        width:130px;
        margin-bottom:30px;
    }

    .stats-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:38px 15px;
    }

    .stat{
        padding:0 8px;
    }

    .stat img{
        width:44px;
        height:44px;
        margin-bottom:13px;
    }

    .stat h3{
        margin-bottom:8px;

        font-size:1rem;
        line-height:1.25;
    }

    .stat p{
        font-size:.78rem;
        line-height:1.45;
    }


    /* =========================
       OFFRES
    ========================= */

    .offers-section{
        padding:48px 16px 55px;
    }

    .offers-container{
        gap:42px;
    }

    .offers-partnership > h2,
    .patron-card > h2{
        font-size:1.4rem;
        line-height:1.25;
    }

    /*
       On ne compresse PAS le tableau.
       On le laisse défiler horizontalement.
    */

    .offers-table-wrapper{
        width:100%;

        overflow-x:auto;
        overscroll-behavior-inline:contain;

        border-radius:7px;
    }

    .offers-table{
        min-width:700px;
    }

    .offer-head{
        height:90px;
        padding:10px 5px;
    }

    .offer-head strong{
        font-size:.76rem;
    }

    .offer-head span{
        margin-top:7px;
        font-size:.56rem;
    }

    .offers-table tbody td{
        padding:7px 6px;
        font-size:.62rem;
    }

    .offers-table tbody td:not(:first-child),
    .offers-table tbody td:last-child{
        font-size:.85rem;
    }


    /* =========================
       MÉCÉNAT
    ========================= */

    .patron-card{
        max-width:100%;
    }

    .patron-card__content{
        padding:22px 16px;
    }

    .patron-intro{
        margin-bottom:28px;

        font-size:.84rem;
        line-height:1.6;
    }

    .patron-benefits{
        grid-template-columns:1fr;
        gap:28px;
    }

    .patron-benefit img{
        width:70px;
        height:70px;
        margin-bottom:12px;
    }

    .patron-benefit p{
        max-width:330px;

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

    .tax-box{
        padding:18px 14px;
    }

    .tax-box h3{
        font-size:.85rem;
    }

    .tax-grid strong{
        font-size:.72rem;
    }

    .tax-grid p{
        font-size:.7rem;
    }

    .patron-card__content > p:last-child{
        font-size:.78rem;
        line-height:1.55;
    }


    /* =========================
       CONTACT
    ========================= */

    .support-contact{
        padding:48px 18px;
    }

    .support-contact__container{
        gap:42px;
    }

    .support-form-block h2,
    .support-faq h2{
        font-size:1.3rem;
    }

    .support-form{
        padding:14px;
    }

    .support-form__grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .support-field input{
        min-height:46px;
    }

    .support-field textarea{
        min-height:135px;
    }

    .support-form__button{
        width:100%;
        min-height:48px;

        margin-top:18px;
    }

    .support-form__consent{
        max-width:none;

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


    /* =========================
       FAQ
    ========================= */

    .support-faq{
        margin-top:0;
    }

    .faq-question{
        min-height:60px;

        padding:12px 14px;

        font-size:.72rem;
        line-height:1.45;
    }

    .faq-answer p{
        padding:0 14px 16px;

        font-size:.7rem;
        line-height:1.6;
    }

    .faq-item.is-open .faq-answer{
        max-height:300px;
    }


    /* =========================
       PARTENAIRES
    ========================= */

    .supporters-section{
        padding:45px 18px;
    }

    .supporters-heading h2{
        font-size:1.3rem;
    }

    .supporters-line{
        width:110px;
    }

    .supporters-logos{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:25px 20px;

        margin-top:30px;
    }

    .supporter-logo{
        min-height:70px;
    }

    .supporter-logo img{
        max-width:135px;
        max-height:65px;
    }

}



/* =========================================================
   PETIT MOBILE
   jusqu'à 480px
========================================================= */

@media screen and (max-width:480px){

    /* =========================
       HERO
    ========================= */

    .hero{
        min-height:610px;
    }

    .hero-content{
        min-height:546px;

        padding:32px 18px 28px;
    }

    .hero-left h1{
        font-size:38px;
    }

    .subtitle{
        font-size:13px;
    }

    .description{
        font-size:12.5px;
    }

    .buttons button{
        max-width:100%;
        min-height:50px;

        font-size:12px;
    }


    /* =========================
       POURQUOI SOUTENIR
    ========================= */

    .support-section{
        padding:42px 16px;
    }

    .support-title h2{
        font-size:1.4rem;
    }

    .stats-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .stat{
        padding:25px 15px;
    }

    .stat:not(:last-child){
        border-bottom:1px solid #e2e2e2;
    }

    .stat img{
        width:42px;
        height:42px;
    }

    .stat h3{
        font-size:1rem;
    }

    .stat p{
        max-width:300px;
        font-size:.8rem;
    }


    /* =========================
       OFFRES
    ========================= */

    .offers-section{
        padding:42px 12px 50px;
    }

    .offers-partnership > h2,
    .patron-card > h2{
        font-size:1.25rem;
    }

    .offers-table{
        min-width:660px;
    }

    /*
       Petit indicateur visuel :
       le tableau peut être glissé.
    */

    .offers-table-wrapper{
        position:relative;
    }


    /* =========================
       MÉCÉNAT
    ========================= */

    .patron-card__content{
        padding:18px 13px;
    }

    .patron-intro{
        font-size:.8rem;
        text-align:center
    }

    .patron-benefit img{
        width:64px;
        height:64px;
    }

    .patron-benefit p{
        font-size:.75rem;
    }

    .tax-box{
        padding:15px 10px;
    }

    .tax-box h3{
        font-size:.8rem;
    }


    /* =========================
       CONTACT
    ========================= */

    .support-contact{
        padding:42px 14px;
    }

    .support-form{
        padding:11px;
    }

    .support-form-block h2,
    .support-faq h2{
        font-size:1.2rem;
    }

    .support-field label{
        font-size:.64rem;
    }

    .support-field input,
    .support-field textarea{
        font-size:.76rem;
    }

    .support-form__consent{
        font-size:.64rem;
    }


    /* =========================
       FAQ
    ========================= */

    .faq-question{
        padding:11px 12px;
        font-size:.68rem;
    }

    .faq-icon{
        font-size:1rem;
    }


    /* =========================
       PARTENAIRES
    ========================= */

    .supporters-section{
        padding:40px 14px;
    }

    .supporters-logos{
        gap:20px 14px;
    }

    .supporter-logo img{
        max-width:115px;
        max-height:58px;
    }

    .supporter-logo:last-child:nth-child(odd){
        grid-column:1 / -1;
    }

}



/* =========================================================
   TRÈS PETIT MOBILE
   jusqu'à 360px
========================================================= */

@media screen and (max-width:360px){

    .hero-left h1{
        font-size:34px;
    }

    .hero-content{
        padding-left:15px;
        padding-right:15px;
    }

    .support-section,
    .offers-section,
    .support-contact,
    .supporters-section{
        padding-left:12px;
        padding-right:12px;
    }

    .support-title h2{
        font-size:1.28rem;
    }

    .offers-table{
        min-width:630px;
    }

}

/* =========================================================
   OFFRES MOBILE EN CARTES
========================================================= */

.offers-mobile-cards{
    display:none;
}


@media screen and (max-width:768px){

    /* On cache le tableau desktop */

    .offers-table-wrapper{
        display:none;
    }

    /* On affiche les cartes */

    .offers-mobile-cards{
        display:flex;
        flex-direction:column;

        gap:18px;

        width:100%;
    }


    /* Carte */

    .offer-mobile-card{
        overflow:hidden;

        width:100%;

        border-radius:14px;

        background:#fff;

        box-shadow:0 10px 28px rgba(0,0,0,.12);
    }


    /* En-tête */

    .offer-mobile-card__head{
        padding:22px 20px;

        text-align:center;
    }

    .offer-mobile-card__head h3{
        margin:0;

        font-family:"Poppins", sans-serif;
        font-size:1.3rem;
        font-weight:800;
    }

    .offer-mobile-card__head p{
        margin:5px 0 0;

        font-family:"Poppins", sans-serif;
        font-size:.9rem;
        font-weight:600;
    }


    /* BRONZE */

    .offer-mobile-card--bronze
    .offer-mobile-card__head{
        background:#b97600;
        color:#fff;
    }


    /* ARGENT */

    .offer-mobile-card--silver
    .offer-mobile-card__head{
        background:#b8b8b8;
        color:#fff;
    }


    /* OR */

    .offer-mobile-card--gold
    .offer-mobile-card__head{
        background:#efc320;
        color:#fff;
    }


    /* PREMIUM */

    .offer-mobile-card--premium{
        background:#102b4c;
    }

    .offer-mobile-card--premium
    .offer-mobile-card__head{
        background:#102b4c;
        color:#fff;
    }


    /* Liste des avantages */

    .offer-mobile-card__list{
        display:flex;
        flex-direction:column;

        gap:14px;

        margin:0;
        padding:22px 20px;

        list-style:none;
    }

    .offer-mobile-card__list li{
        display:flex;
        align-items:flex-start;

        gap:10px;

        font-family:"Poppins", sans-serif;
        font-size:.82rem;
        line-height:1.45;

        color:#151515;
    }

    .offer-mobile-check{
        flex-shrink:0;

        color:#c8b46e;

        font-size:1rem;
        font-weight:800;
    }


    /* Premium texte blanc */

    .offer-mobile-card--premium
    .offer-mobile-card__list li{
        color:#fff;
    }


    /* Bouton */

    .offer-mobile-card__button{
        display:block;

        width:calc(100% - 40px);

        margin:0 20px 22px;
        padding:13px 15px;

        border:2px solid #c8b46e;
        border-radius:8px;

        background:transparent;
        color:#071732;

        font-family:"Poppins", sans-serif;
        font-size:.78rem;
        font-weight:800;

        cursor:pointer;
    }

    .offer-mobile-card--premium
    .offer-mobile-card__button{
        background:#c8b46e;
        color:#fff;
    }

}
/* ==================================
   CORRECTION COULEURS BLOC MÉCÈNE
================================== */

.patron-card,
.patron-card__content{
    color:#111;
}

.patron-card__content p,
.patron-intro,
.patron-benefit p,
.tax-box,
.tax-box p,
.tax-box strong{
    color:#111;
    text-align:center;
}

.patron-card > h2{
    color:#080808;
}

.patron-card > h2 span{
    color:#c8b46e;
}
/* Caché sur desktop */
.offers-mobile-contact {
    display: none;
}

@media screen and (max-width: 768px) {

    .offers-mobile-contact {
        display: flex;
        justify-content: center;
        margin: 5px 20px 25px;
    }

    .offers-mobile-contact a {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 52px;
        padding: 14px 30px;

        background: #D7BA63;
        color: #ffffff;

        font-family: "Poppins", sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;

        border-radius: 6px;
        cursor: pointer;
    }
}