/* =========================================================
   PAGE À PROPOS — SECTION INTRO (shortcode)
   [fiadanana_about_intro]
   ========================================================= */

/* =========================================================
   SECTION INTRO — Pleine largeur
   Image gauche + Contenu droite
   ========================================================= */

.fiadanana-about-intro {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    /* ⭐ Gap réduit entre les 2 colonnes */
    gap: 30px !important;

    /* Pleine largeur de la page */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    /* ⭐ Padding horizontal augmenté sur desktop */
    padding: 60px 120px !important;
    box-sizing: border-box !important;

    /* Alignement vertical centré */
    align-items: flex-start !important;

    /* Animation d'apparition au scroll */
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.fiadanana-about-intro.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ---------------------------------------------
   Colonne image — rectangle horizontal
   ⭐ Largeur −20px, hauteur +20px
   --------------------------------------------- */
.fiadanana-about-intro-image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--fiadanana-radius-sm) !important;
    box-shadow: var(--fiadanana-shadow) !important;

    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    aspect-ratio: 4 / 3 !important;

    margin: 0 !important;
    top: 0 !important;
}

.fiadanana-about-intro-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: var(--fiadanana-radius-sm) !important;
}

/* Pulsation blanche au survol */
.fiadanana-about-intro-image::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 80px !important;
    height: 80px !important;
    margin: -40px 0 0 -40px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    opacity: 0;
    transform: scale(0);
    pointer-events: none !important;
    z-index: 2 !important;
}

.fiadanana-about-intro-image.is-pulsing::before {
    animation: fiadanana-about-image-pulse 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes fiadanana-about-image-pulse {
    0%   { opacity: 0.75; transform: scale(0); }
    80%  { opacity: 0;    transform: scale(5); }
    100% { opacity: 0;    transform: scale(5); }
}

/* ---------------------------------------------
   Colonne contenu
   --------------------------------------------- */
.fiadanana-about-intro-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

/* Titre principal */
.fiadanana-about-intro-title {
    font-family: var(--font-title) !important;
    font-size: var(--fs-page-title) !important;
    font-weight: var(--fw-extrabold) !important;
    line-height: var(--lh-tight) !important;
    letter-spacing: -0.5px !important;
    color: #000000 !important;
    margin: 0 0 22px 0 !important;
    text-align: left !important;
}

/* Premier mot du titre en vert clair */
.fiadanana-about-intro-title-first {
    color: var(--fiadanana-vert-clair) !important;
}

/* Paragraphe principal */
.fiadanana-about-intro-text {
    font-family: var(--font-main) !important;
    font-size: var(--fs-body) !important;
    line-height: var(--lh-comfort) !important;
    color: #555 !important;
    margin: 0 0 30px 0 !important;
    text-align: left !important;
}

/* ---------------------------------------------
   Liste des 2 points forts
   ⭐ Chaque feature : icône + titre + texte sur UNE LIGNE
   --------------------------------------------- */
.fiadanana-about-intro-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 34px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 5px !important;
    width: 100% !important;
}

.fiadanana-about-intro-feature {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Icône : noire, sans fond, plus grande */
.fiadanana-about-intro-feature-icon {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 2px !important;
}

.fiadanana-about-intro-feature-icon svg,
.fiadanana-about-intro-feature-icon .fiadanana-icon-svg {
    width: 42px !important;
    height: 42px !important;
    fill: #000000 !important;
    stroke: none !important;
    color: #000000 !important;
    margin: 0 !important;
}

/* ⭐ Titre et texte sur la même ligne */
.fiadanana-about-intro-feature-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex: 1 !important;
}

/* Titre de la feature en vert clair */
.fiadanana-about-intro-feature-title {
    font-family: var(--font-title) !important;
    font-size: var(--fs-subsection-title) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-h3) !important;
    color: var(--fiadanana-vert-clair) !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

/* Texte de la feature — même taille que le paragraphe principal */
.fiadanana-about-intro-feature-text {
    font-family: var(--font-main) !important;
    font-size: var(--fs-body) !important;
    line-height: var(--lh-comfort) !important;
    color: #555 !important;
    margin: 0 !important;
}

/* ---------------------------------------------
   Rangée des 2 boutons — côte à côte
   --------------------------------------------- */
.fiadanana-about-intro-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
}

/* =========================================================
   BOUTONS — Primaire + Secondaire
   ========================================================= */

.fiadanana-about-btn {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 18px 36px !important;
    min-height: 54px !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-family: var(--font-main) !important;
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-regular) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: border-color 0.3s ease, color 0.3s ease !important;
}

/* --- Primaire : fond vert plein --- */
.fiadanana-about-btn--primary {
    background: var(--fiadanana-vert) !important;
    border: 2px solid var(--fiadanana-vert) !important;
}

.fiadanana-about-btn--primary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--fiadanana-bleu) !important;
    transform: translateY(-100%);
    z-index: 1 !important;
    pointer-events: none !important;
}

.fiadanana-about-btn--primary:hover::before {
    animation: rideau-entrance 0.4s forwards !important;
}

.fiadanana-about-btn--primary:not(:hover)::before {
    animation: rideau-sortie 0.4s forwards !important;
}

.fiadanana-about-btn--primary:hover {
    border-color: var(--fiadanana-bleu-fonce) !important;
}

/* --- Secondaire : contour vert, fond transparent --- */
.fiadanana-about-btn--secondary {
    background: transparent !important;
    border: 2px solid var(--fiadanana-vert) !important;
    color: var(--fiadanana-vert) !important;
}

.fiadanana-about-btn--secondary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--fiadanana-vert) !important;
    transform: translateY(-100%);
    z-index: 1 !important;
    pointer-events: none !important;
}

.fiadanana-about-btn--secondary:hover::before {
    animation: rideau-entrance 0.4s forwards !important;
}

.fiadanana-about-btn--secondary:not(:hover)::before {
    animation: rideau-sortie 0.4s forwards !important;
}

.fiadanana-about-btn--secondary:hover {
    border-color: var(--fiadanana-vert-fonce) !important;
    color: #ffffff !important;
}

.fiadanana-about-btn--secondary .fiadanana-about-btn-label,
.fiadanana-about-btn--secondary .fiadanana-about-btn-icon {
    color: var(--fiadanana-vert) !important;
    transition: color 0.3s ease !important;
}

.fiadanana-about-btn--secondary:hover .fiadanana-about-btn-label,
.fiadanana-about-btn--secondary:hover .fiadanana-about-btn-icon {
    color: #ffffff !important;
}

/* --- Éléments internes communs --- */
.fiadanana-about-btn-label,
.fiadanana-about-btn-icon {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
}

.fiadanana-about-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease !important;
}

.fiadanana-about-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    color: inherit !important;
}

.fiadanana-about-btn:hover .fiadanana-about-btn-icon {
    transform: translateX(6px) !important;
}

@keyframes rideau-entrance {
    0%   { transform: translateY(-100%); }
    10%  { transform: translateY(-92.5%); }
    25%  { transform: translateY(-85%); }
    85%  { transform: translateY(-5%); }
    90%  { transform: translateY(-3%); }
    100% { transform: translateY(0%); }
}

@keyframes rideau-sortie {
    0%   { transform: translateY(0%); }
    10%  { transform: translateY(7.5%); }
    25%  { transform: translateY(15%); }
    85%  { transform: translateY(95%); }
    90%  { transform: translateY(98%); }
    100% { transform: translateY(100%); }
}

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

@media (max-width: 1400px) {
    .fiadanana-about-intro {
        gap: 30px !important;
        padding: 50px 60px !important;
    }
}

@media (max-width: 900px) {
    .fiadanana-about-intro {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 30px 24px !important;
        align-items: flex-start !important;
    }

    .fiadanana-about-intro-image {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
    }
}

@media (max-width: 600px) {
    .fiadanana-about-intro-features {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .fiadanana-about-intro {
        gap: 30px !important;
        padding: 24px 20px !important;
    }

    .fiadanana-about-intro-title {
        font-size: 1.8rem !important;
    }

    .fiadanana-about-intro-feature-title {
        font-size: 1.15rem !important;
    }

    /* ⭐ Sur mobile : titre + texte repassent en colonne */
    .fiadanana-about-intro-feature-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .fiadanana-about-intro-feature-title {
        white-space: normal !important;
    }

    .fiadanana-about-intro-buttons {
        gap: 14px !important;
    }

    .fiadanana-about-btn {
        flex: 1 1 calc(50% - 7px) !important;
        padding: 14px 18px !important;
        min-height: 50px !important;
        font-size: var(--fs-body) !important;
        gap: 8px !important;
    }

    .fiadanana-about-btn-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 420px) {
    .fiadanana-about-btn {
        flex: 1 1 100% !important;
    }
}

/* =========================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .fiadanana-about-intro, 
    .fiadanana-about-title-letter {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   TITRE — Animation lettre par lettre
   (glissement gauche → droite + fondu, en cascade)
   ========================================================= */

.fiadanana-about-intro-title {
    /* Le JS injecte des <span> ; on garde le style du titre */
    overflow: hidden;
}

/* Chaque mot est un bloc inline (évite la coupure en milieu de mot) */
.fiadanana-about-title-word {
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Chaque lettre : état initial caché + décalé à gauche */
.fiadanana-about-title-letter {
    display: inline-block !important;
    opacity: 0 !important;
    transform: translateX(-20px) !important;
    transition:
        opacity 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: opacity, transform !important;
}

/* État final : visible et à sa place */
.fiadanana-about-title-letter.is-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ⭐ Premier mot en vert clair (comme avant, mais appliqué aux lettres) */
.fiadanana-about-title-word--first .fiadanana-about-title-letter {
    color: var(--fiadanana-vert-clair) !important;
}

/* L'espace entre les mots reste un vrai espace */
.fiadanana-about-title-space {
    display: inline-block !important;
    width: 0.3em !important;
}

/* =========================================================
   MESSAGE VIDE — Aucun contenu ajouté
   ========================================================= */

.fiadanana-mv-empty {
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-style: italic;
    color: #888;
    margin: 40px auto;
    padding: 24px 0;
    max-width: 800px;
    text-align: center;
    border-top: 1px dashed rgba(28, 146, 22, 0.2);
    border-bottom: 1px dashed rgba(28, 146, 22, 0.2);
}

/* =========================================================
   ADAPTATION — Colonne unique si l'image est absente
   ========================================================= */

/* Si le conteneur n'a qu'un seul enfant (le contenu), on force 1 colonne */
.fiadanana-about-intro:has(> .fiadanana-about-intro-content:only-child) {
    grid-template-columns: 1fr !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* =========================================================
   ADAPTATION — Grille en 1 colonne si l'image OU le contenu
   est absent (les deux cas sont couverts)
   ========================================================= */

/* --- Cas 1 : contenu seul (pas d'image) --- */
.fiadanana-about-intro--no-image {
    grid-template-columns: 1fr !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* --- Cas 2 : image seule (pas de contenu) --- */
.fiadanana-about-intro--no-content {
    grid-template-columns: 1fr !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.fiadanana-about-intro--no-content .fiadanana-about-intro-image {
    max-height: 600px !important;
    aspect-ratio: 16 / 9 !important;
}

/* --- Fallback (navigateurs modernes) : 1 colonne dès qu'il n'y a qu'un seul enfant --- */
.fiadanana-about-intro:has(> :only-child) {
    grid-template-columns: 1fr !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* --- Message vide (déjà présent, on le conserve) --- */
.fiadanana-mv-empty {
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-style: italic;
    color: #888;
    margin: 40px auto;
    padding: 24px 0;
    max-width: 800px;
    text-align: center;
    border-top: 1px dashed rgba(28, 146, 22, 0.2);
    border-bottom: 1px dashed rgba(28, 146, 22, 0.2);
}

/* --- Responsive pour les 2 cas en 1 colonne --- */
@media (max-width: 900px) {
    .fiadanana-about-intro--no-image,
    .fiadanana-about-intro--no-content,
    .fiadanana-about-intro:has(> :only-child) {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 600px) {
    .fiadanana-about-intro--no-image,
    .fiadanana-about-intro--no-content,
    .fiadanana-about-intro:has(> :only-child) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}