/*######################################################################
#
# ASSOCIATION DES AMIS DE LA SCHOLA CANTORUM
# association-schola.css
#
######################################################################*/

/*======================================================================
  1 - VARIABLES
======================================================================*/
:root{
    /* Couleurs */
    --bleu: #25356d;
    --bleu-hover: #31468d;
    --or: #B79255;
    --or-clair: #d8bf8d;
    --texte: #2d2d2d;
    --fond: #ffffff;
    --fond-creme: #f7f3ea;
    --fond-blanc: #ffffff;
    --fond-page: #f8f5ed;
    --fond-gris: #f5f5f5;
    --bordure: #e6e6e6;
    --bordeaux: #730109;

    /* Typographie */
    --font-titre: "Cormorant Garamond", serif;
    --font-texte: "Inter", sans-serif;

    /* Largeurs */
    --contenu: 1280px;
    --texte: 760px;

    /* Espacements */
    --espace-xs: 0.75rem;
    --espace-s: 1.5rem;
    --espace-m: 3rem;
    --espace-l: 5rem;
    --espace-xl: 8rem;
    --espace-lg: 6rem;

    /* Divers */
    --rayon: 14px;
    --ombre: 0 12px 40px rgba(0,0,0,.08);
    --ombre-legere: 0 4px 20px rgba(0,0,0,.06);
    --transition: .28s ease;
}

/*======================================================================
  2 - RESET & BASE
======================================================================*/
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--font-texte);
    font-size: 18px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

figure{ margin: 0; }
a{ color: inherit; text-decoration: none; }
.wp-site-blocks{ overflow: hidden; }

/*======================================================================
  3 - TYPOGRAPHIE
======================================================================*/
h1, h2, h3, h4{
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 600;
    color: var(--bleu);
    line-height: 1.1;
}

h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2{ font-size: clamp(2rem, 4vw, 3rem); }
h3{ font-size: clamp(1.6rem, 3vw, 2.2rem); }

p{ margin: 0; }
strong{ font-weight: 600; }

::selection{
    background: var(--bleu);
    color: #fff;
}

/*======================================================================
  4 - BOUTONS
======================================================================*/
.wp-block-button{
    margin: 0;
}

.wp-block-button__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 170px;
    padding: .95rem 1.8rem;
    border-radius: 999px;
    font-family: var(--font-texte);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    position: relative;
}

/* Animation légère au survol */
.wp-block-button__link:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 53, 109, 0.15);
}

/* Styles spécifiques par type de bouton */
.as-btn-primary .wp-block-button__link{
    background: var(--bleu);
    color: #fff;
    border: 2px solid var(--bleu);
}
.as-btn-primary .wp-block-button__link:hover{
    background: var(--bleu-hover);
    border-color: var(--bleu-hover);
}

.as-btn-outline .wp-block-button__link{
    background: transparent;
    color: var(--bleu);
    border: 2px solid rgba(255,255,255,.85);
}
.as-btn-outline .wp-block-button__link:hover{
    background: #fff;
    color: var(--bleu);
}

.as-btn-gold-outline .wp-block-button__link{
    background: transparent;
    color: var(--or);
    border: 2px solid rgba(255,255,255,.85);
}
.as-btn-gold-outline .wp-block-button__link:hover{
    background: var(--or);
    color: #fff;
}

.as-btn-gold .wp-block-button__link{
    background: var(--or);
    color: #fff;
    border: 2px solid var(--or);
}
.as-btn-gold .wp-block-button__link:hover{
    background: #a88447;
    border-color: #a88447;
}

.as-btn-light .wp-block-button__link{
    background: #fff;
    color: var(--bleu);
    border: 2px solid var(--bordure);
}
.as-btn-light .wp-block-button__link:hover{
    border-color: var(--bleu);
}

/* Focus clavier */
.wp-block-button__link:focus-visible{
    outline: 3px solid rgba(37,53,109,.25);
    outline-offset: 4px;
}

/*======================================================================
  5 - ICONES
======================================================================*/

.as-icon{
    width:96px;
    max-width:96px;
    margin:0 auto 2rem;
}

.as-icon img{
    width:100%;
    height:auto;
    display:block;
}

/*======================================================================
  6 - LAYOUT & UTILITAIRES
======================================================================*/
.alignwide{ max-width: var(--contenu); margin-inline: auto; }
.alignfull{ width: 100%; }

.as-section{ padding: var(--espace-xl) 0; }
.as-section-sm{ padding: var(--espace-lg) 0; }
.as-section-lg{ padding: 7rem 0; }

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

/*======================================================================
  7 - COMPOSANTS
======================================================================*/

/*======================================================================
  7.1 - HERO PAGES
======================================================================*/

.as-hero-pages{
    max-width: var(--contenu);
    margin-inline: auto;
    padding: 4rem 0 5rem;
}

.as-hero-pages h2{
    color: var(--or);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.as-hero-pages h1{ text-align: center; margin-bottom: 1.5rem; }
.as-hero-pages p{ text-align: center; font-size: 1.15rem; line-height: 1.8; }

.as-hero-pages img{
    width: 100%;
    height: 550px;
    border-radius: 20px;
    box-shadow: var(--ombre);
}

/* ====================== Mise en page des boutons Hero ====================== */
.as-hero-pages .wp-block-buttons {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    width: fit-content !important;
    max-width: 100%;
    margin: 2rem auto 3.5rem;   /* espace au-dessus et en-dessous */
    padding: 0 1rem;              /* petite marge sur les côtés en mobile */
}

.as-hero-pages .wp-block-button {
    width: auto !important;
    flex: none !important;
}

/* Optionnel : un peu plus d'espace intérieur sur les boutons dans le hero */
.as-hero-pages .wp-block-button__link {
    min-width: 165px;
    padding: 1rem 2.2rem;         /* ajustable selon ton goût */
}

/* Introduction */
.as-introduction{
    max-width: 900px;
    margin: 5rem auto;
    text-align: center;
}

.as-introduction .wp-block-separator{
    width: 70px;
    height: 2px;
    margin: 3rem auto;
    background: var(--or);
    border: 0;
}

/* Features */
.as-feature{
    align-items: center;
    gap: 4rem;
}

.as-feature img{
    border-radius: var(--rayon);
    box-shadow: var(--ombre-legere);
}

/* Cards */
.as-card{
    background: var(--fond-blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
	box-shadow:0 10px 30px rgba(37,53,109,.08);
}
	
.as-card-content{ padding: 2rem; }

/* ======================================================================
   7.2 CITATION
   ====================================================================== */

.as-citation{
    max-width:620px;
    margin:3rem auto;
    text-align:center;
}

.as-citation::before,
.as-citation::after{
    content:"";
    display:block;
    width:200px;
    height:3px;
    margin:1.3rem auto;
    background:var(--or); /* ou #c7a35a */
}

.as-citation p{
    margin:0;
    padding:0;
    font-style:italic;
    font-size:1.5rem;
    line-height:1.8;
    color:#5f5f5f;
}

.as-citation cite{
    display:block;
    margin-top:1rem;
    font-style:normal;
    font-size:.9rem;
    color:#777;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* ======================================================================
   7.3 NOS ENGAGEMENTS
   ====================================================================== */

/* Conteneur des 3 colonnes */
.as-engagements .wp-block-columns{
    max-width:1050px;
    margin:4rem auto 0;
    gap:4rem;
    align-items:flex-start;
}

/* Colonnes */
.as-engagements .wp-block-column{
    text-align:center;
}

/* Icônes */
.as-engagements .as-icon{
    width:96px;
    max-width:96px;
    height:auto;
    display:block;
    margin:0 auto 1.5rem;
}

/* Titres */
.as-engagements .wp-block-column h3{
    margin:0 0 1rem;
    color:var(--bleu);
    font-size:1.8rem;
    font-weight:500;
    line-height:1.2;
}

/* Paragraphes */
.as-engagements .wp-block-column p{
    max-width:300px;
    margin:0 auto;
    line-height:1.75;
}

/* =====================================================
   7.4 CTA DE FIN DE PAGE
   ===================================================== */

.as-footer-cta{
    position:relative;
    overflow:hidden;
    margin-top:5rem;
    padding:5.5rem 2rem 5rem;
    text-align:center;
    color:#fff;
    border-radius:var(--rayon);
    box-shadow:var(--ombre-legere);
}

/* -----------------------------
   Titres
------------------------------ */

.as-footer-cta h2{
    max-width:760px;
    margin:0 auto 1.5rem;
    color:#fff;
    line-height:1.2;
}

/* -----------------------------
   Texte
------------------------------ */

.as-footer-cta p{
    max-width:950px;
    margin:0 auto 2.25rem;
    color:rgba(255,255,255,.92);
    line-height:1.8;
}

/* -----------------------------
   Boutons
------------------------------ */

.as-footer-cta .wp-block-buttons{
    justify-content:center;
}

.as-footer-cta .wp-block-button{
    margin-bottom:0;
}

/* -----------------------------
   Logo en filigrane
------------------------------ */

.as-footer-cta::after{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-70px;
    width:380px;
    height:380px;
    background-image:url("/wp-content/uploads/logo-association-blanc.svg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.05;
    pointer-events:none;
}

/*======================================================================
  8 - FOOTER & NAVIGATION
======================================================================*/
.site-footer{
    padding: 2rem;
    text-align: center;
    font-size: .85rem;
    color: #666;
    border-top: 1px solid #ececec;
}

.scroll-top{
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bleu);
    color: #fff;
    border-radius: 6px;
    transition: .25s;
    z-index: 999;
}

.scroll-top:hover{
    transform: translateY(-3px);
}

/*======================================================================
  9 - RESPONSIVE
======================================================================*/
@media (max-width: 1024px){
    .as-feature{ gap: 3rem; }
}

@media (max-width: 900px){
    .as-hero{ min-height: 600px; padding: 5rem 2rem; }
    .as-hero .wp-block-columns{ display: block; }
    .as-hero .wp-block-column:first-child{ max-width: 100%; }

    .as-hero-pages{ padding: 3rem 0 4rem; }
    .as-hero-pages img{ border-radius: 14px; height: auto; }
}

@media (max-width: 768px){
    .as-feature{ flex-direction: column; text-align: center; }
}

@media (max-width:768px){
    .as-footer-cta{
        margin-top:4rem;
        padding:4rem 1.5rem;
    }

    .as-footer-cta::after{
        width:180px;
        height:180px;
        right:-20px;
        bottom:-20px;
        opacity:.06;
    }
}

@media (max-width: 480px){
    :root{ --espace-xl: 3rem; }
    .as-section{ padding: 3rem 0; }
    .as-section-lg{ padding: 4rem 0; }
}

/* ======================================================================
   NOS ENGAGEMENTS
   ====================================================================== */

@media (max-width:768px){
    .as-engagements .wp-block-columns{
        gap:3rem;
    }

    .as-engagements .as-icon{
        width:64px;
        max-width:64px;
        margin-bottom:1.5rem;
    }

    .as-engagements .wp-block-column h3{
        font-size:1.7rem;
        margin-bottom:.8rem;
    }

    .as-engagements .wp-block-column p{
        max-width:260px;
    }
}