/* ==============================
   BASE
============================== */

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

:root {
    --green-deep: #006600;
    --green-dark: #4d8040;
    --green-medium: #b2d297;
    --green-light: #d5e1a5;
    --green-lighter: #f3f6e9;

    --warm-yellow: #ffdd00;
    --warm-green: #b2d297;
    --warm-light-green: #d5e1a5;
    --warm-lighter-green: #f3f6e9;

    --soft-blue: #9bdcee;
    --soft-green: #b2d297;
    --soft-light-green: #d5e1a5;
    --soft-lighter-green: #f3f6e9;

    --soft-brown: #793e15;
    --soft-light-brown: #d5e1a5;
    --soft-lighter-brown: #f3f6e9;

    --middle-blue: #267cd2;
    --middle-green: #b2d297;
    --middle-yellow: #ffdd00;
    --middle-brown: #793e15;
    --middle-light-brown: #d5e1a5;
    --middle-lighter-brown: #f3f6e9;

    --bleu-ciel: #0157ad;
}

body {
    font-family: "EB Garamond", Garamond, "Times New Roman", serif;
    font-weight: 500;
        background: linear-gradient(180deg, var(--green-lighter) 0%, var(--soft-blue) 100%);
    color: #1e1e1e;
    min-height: 100vh;
    overflow-x: hidden; /* Empêche le scroll horizontal */
    touch-action: pan-y; /* Permet seulement le scroll vertical sur mobile */
    position: relative;
    width: 100%;
}

/* ==============================
   CONTAINER PRINCIPAL
============================== */

.home-container {
    max-width: 900px;
    margin: auto;
    padding: 0 0px;
    overflow-x: hidden; /* Empêche le scroll horizontal */
    touch-action: pan-y; /* Permet seulement le scroll vertical sur mobile/tablette */
    width: 100%;
    position: relative;
}

/* ==============================   
   Style des boutons en ligne horizontale
============================== */
.boutons-en-ligne-horizontale {
    margin-top: 0px;
    margin-bottom: 00px;
    display: flex;
    flex-direction: row;
    justify-content: center;   /* centrage horizontal dans la page */
    align-items: center;       /* alignement vertical */
    flex-wrap: nowrap;         /* ❗ empêche le retour à la ligne */
    width: 100%;
}

/* ==============================
   CARTES / BLOCS
============================== */

.card {
    background: transparent;
    border-radius: 6px;
    padding: 32px 28px;
    margin-bottom: 28px;
    box-shadow: none;
}

.card-action {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.card hero {
    padding: 10px;
    margin-left: 0px;
    margin-right: 0px;
}
.card-question {
    background: #ffffff;
    border-radius: 0px;
    padding: 20px;
    margin-bottom: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.card-question:hover {
    background: var(--green-medium);
}
/* ==============================
   HERO
============================== */

.hero {
    text-align: center;
}

.logo-grand {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    border-radius: 200px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);

}
.logo-petit {
    max-width: 100px;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    border-radius: 100px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);

}

.hero h1 {
    font-size: 2.6rem;
    letter-spacing: 1.2px;
    margin-bottom: 20px;
    font-family: "EB Garamond", serif;
    font-weight: 900;
    
}

.hero .tagline {
    font-size: 1.5rem;
    margin-bottom: 16px;
    font-weight: 700;
}

.hero .subtitle {
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.3;
    max-width: 750px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 20px;
    font-weight: 100;
    text-align: center;
}

/* ==============================
   BOUTONS PRINCIPAUX
============================== */

.action-button {
    display: flex;
    justify-content: left;
    gap: 14px;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: baseline;
}

.action-button span.icon {
    font-size: 1.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.action-button span.aide {
    font-size: 1.1rem;
    display: flex;
    justify-content: flex-end;
    font-weight: 400;
    color: #6b645e;
    align-items: baseline;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Variantes */
.finance {
    border-left: 6px solid #ffdd00;
}

.host {
    border-left: 6px solid #793e15;
}

.intervenir {
    border-left: 6px solid #2196f3;
}

/* ==============================
   ACCORDÉONS / SECTIONS
============================== */

.section {
    background: var(--green-light);
    border-radius: 0px;
    padding: 18px 20px;
    margin-bottom: 5px;
    font-size: 1.2rem;
    border: 0px solid #ffffff;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    color: var(--green-deep);
}

.section:hover {
    background: var(--green-medium);
}


/* ==============================
   TEXTES
============================== */
.card-text {
    background: none;
    border-radius: 0px;
    padding: 18px 20px;
    margin-top: 10px;
    margin-bottom: 1px;
    font-size: 1.0rem;
    border: none ;
    cursor: pointer;
    color: black;
}
.card-text:hover {
    color: var(--green-deep);
    background: none;
}

.card-question_description {
    font-family: 'EB Garamond', serif;
    text-align: justify;
    font-size: 1.2rem;
    font-weight: 400;
    overflow: visible;
    overflow-y: auto;
    max-height: 0;
    opacity: 0.8;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    margin-top: -5px;
    margin-left: 00px;
    margin-right: 00px;
    margin-bottom: 10px;
    padding: 0 12px;
    background: white;
    border-left: 3px solid var(--green-medium);
    border-right: 3px solid var(--green-medium);
    border-bottom: 3px solid var(--green-medium);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    border-radius: 0px 0px 12px 12px;
    border-color: var(--green-light);
   

    color: var(--green-deep);
}

.card-question_description.is-open {
    max-height: 500px;
    opacity: 1;
    padding: 12px;
}

/* ==============================
   Bouton-texte
============================== */
.bouton-texte {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    margin: 0px;
    margin-top: 20px;
    padding: 14px 28px;

    font-family: "Open Sans", sans-serif;
    font-size: 1.0rem;
    font-weight: 400;
    color: var(--middle-blue);
    background: transparent;
    border: none;
    cursor: pointer;
    box-shadow: none ;
    transition: all 0.25s ease;
}

/* ==============================
   BOUTON CONTINUER
============================== */

.button-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    margin: 30px auto 20px auto;
    padding: 14px 28px;

    font-family: "EB Garamond", serif;
    font-size: 1.4rem;
    font-weight: 700;

    color: #ffffff;
    background: var(--green-deep);

    border: none;
    border-radius: 10px; /* forme douce, engageante */
    cursor: pointer;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
}

/* Icône (facultative) */
.button-continue .icon {
    font-size: 1.2rem;
}

/* Hover */
.button-continue:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

/* Focus clavier (accessibilité) */
.button-continue:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 0, 0.35);
}

.button-retour {
    color: var(--soft-blue);
    background: transparent;
    box-shadow: none;
}
.button-retour:hover {
    color: var(--soft-blue);
    background: transparent;
    transform: scale(1.05);
    font-weight: 700;
    box-shadow: none;
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 600px) {

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero .tagline {
        font-size: 1.5rem;

    }
    .hero .subtitle {
        font-size: 1.0rem;
       
    }

    .action-button {
        font-size: 1.5rem;
        padding: 18px;
    }
}




  
  /* --- Responsive mobile --- */
  @media (max-width: 600px) {
    .match-arrow.left {
      left: 6px;
    }
  
    .match-arrow.right {
      right: 6px;
    }
  
    .match-card {
      padding: 22px 18px 26px;
    }
  }