/* =========================================================
 * E-Annuaire Hôtels Antananarivo — Styles frontend
 * Design professionnel
 * Palette logo : #d16a4c / #16233d
 * =======================================================*/

:root{
    --eah-primary:#d16a4c;
    --eah-primary-dark:#b85338;
    --eah-primary-light:#e89578;

    --eah-navy:#16233d;
    --eah-navy-dark:#0d1729;
    --eah-navy-light:#263653;

    --eah-white:#ffffff;
    --eah-bg:#f5f7fa;
    --eah-text:#263044;
    --eah-muted:#737b89;

    --eah-border:rgba(22,35,61,.10);

    --eah-radius:18px;
    --eah-radius-btn:12px;

    --eah-shadow:
        0 8px 30px rgba(22,35,61,.08);

    --eah-shadow-hover:
        0 18px 45px rgba(22,35,61,.16);

    --eah-transition:
        all .3s cubic-bezier(.4,0,.2,1);
}

/* =========================================================
 * GLOBAL
 * =======================================================*/

.eah-wrap{
    max-width:1080px;
    margin:2.5rem auto;
    padding:0 1rem;
    font-family:inherit;
    color:var(--eah-text);
    box-sizing:border-box;
}

.eah-wrap *,
.eah-wrap *::before,
.eah-wrap *::after{
    box-sizing:border-box;
}

.eah-title{
    font-size:1.8rem;
    margin:0 0 .45rem;
    color:var(--eah-navy);
    text-align:center;
    font-weight:800;
    letter-spacing:-.02em;
}

.eah-subtitle{
    text-align:center;
    color:var(--eah-muted);
    margin:0 0 2rem;
}

.eah-req{
    color:var(--eah-primary);
}

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

.eah-card{
    background:var(--eah-white);
    border-radius:var(--eah-radius);
    box-shadow:var(--eah-shadow);
    padding:2rem;
    transition:var(--eah-transition);
    border:1px solid var(--eah-border);
}

.eah-card:hover{
    box-shadow:var(--eah-shadow-hover);
    transform:translateY(-3px);
}

a.eah-card:hover{
    box-shadow:var(--eah-shadow-hover);
    transform:translateY(-5px);
}

.eah-form-card{
    max-width:720px;
    margin:0 auto;
}

.eah-form-narrow{
    max-width:460px;
}

/* =========================================================
 * BOUTONS — DESIGN PROFESSIONNEL
 * =======================================================*/

.eah-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;

    padding:.85rem 1.7rem;

    border:none;
    border-radius:var(--eah-radius-btn);

    cursor:pointer;

    font-weight:700;
    font-size:.98rem;

    text-decoration:none;
    line-height:1.3;

    position:relative;
    overflow:hidden;

    transition:
        transform .3s cubic-bezier(.4,0,.2,1),
        box-shadow .3s ease,
        background .3s ease,
        color .3s ease;

    box-shadow:
        0 6px 18px rgba(22,35,61,.12);
}

/* Effet lumineux */

.eah-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:skewX(-20deg);
    transition:left .6s ease;
}

.eah-btn:hover::before{
    left:140%;
}

.eah-btn:hover{
    transform:translateY(-3px);
    box-shadow:
        0 12px 25px rgba(22,35,61,.20);
}

.eah-btn:active{
    transform:translateY(-1px) scale(.98);
}

/* Bouton principal */

.eah-btn-green{
    background:linear-gradient(
        135deg,
        var(--eah-navy),
        var(--eah-navy-light)
    );
    color:#fff;
}

.eah-btn-green:hover{
    background:linear-gradient(
        135deg,
        var(--eah-navy-dark),
        var(--eah-navy)
    );
    color:#fff;
}

/* Bouton inscription */

.eah-btn-gold{
    background:linear-gradient(
        135deg,
        var(--eah-primary),
        var(--eah-primary-dark)
    );
    color:#fff;
}

.eah-btn-gold:hover{
    background:linear-gradient(
        135deg,
        var(--eah-primary-dark),
        #9f442d
    );
    color:#fff;
}

.eah-btn-block{
    width:100%;
    margin-top:1.2rem;
}

.eah-btn[disabled]{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.eah-menu-btn{
    margin-left:.75rem;

    background:var(--eah-primary);
    color:#fff;

    box-shadow:
        0 5px 15px rgba(209,106,76,.28);
}

.eah-menu-btn:hover{
    background:var(--eah-primary-dark);
}

.eah-btn-save{
    min-width:280px;
    margin:0 auto;
    display:flex;
}

/* =========================================================
 * PORTAIL CONNEXION / INSCRIPTION
 * =======================================================*/

.eah-portail{
    text-align:center;
}

/*
 * Grille principale
 */

.eah-portail-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:1.5rem;

    max-width:820px;

    margin:0 auto;
}

/*
 * Cartes principales
 */

a.eah-portail-card{
    position:relative;

    color:var(--eah-text);
    text-decoration:none;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:.65rem;

    padding:2.3rem 2rem 2rem;

    overflow:hidden;

    background:var(--eah-white);

    border-radius:20px;

    border:1px solid var(--eah-border);

    box-shadow:var(--eah-shadow);

    transition:
        transform .35s cubic-bezier(.4,0,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

/*
 * Ligne supérieure
 */

a.eah-portail-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .45s ease;
}

a.eah-portail-card:hover::before{
    transform:scaleX(1);
}

/* Connexion */

a.eah-portail-login{
    border-top:4px solid var(--eah-navy);
}

a.eah-portail-login::before{
    background:var(--eah-navy);
}

/* Inscription */

a.eah-portail-register{
    border-top:4px solid var(--eah-primary);
}

a.eah-portail-register::before{
    background:var(--eah-primary);
}

/*
 * Hover carte
 */

a.eah-portail-card:hover{
    transform:translateY(-7px);

    box-shadow:
        0 20px 45px rgba(22,35,61,.15);

    border-color:rgba(22,35,61,.16);
}

/* =========================================================
 * ICONES
 * =======================================================*/

.eah-portail-ico{
    width:72px;
    height:72px;

    border-radius:50%;

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

    color:#fff;

    margin-bottom:.55rem;

    box-shadow:
        0 10px 25px rgba(22,35,61,.18);

    transition:
        transform .45s cubic-bezier(.34,1.56,.64,1),
        box-shadow .3s ease;
}

a.eah-portail-card:hover .eah-portail-ico{
    transform:
        translateY(-5px)
        scale(1.08)
        rotate(-4deg);

    box-shadow:
        0 15px 30px rgba(22,35,61,.24);
}

/* Icone connexion */

.eah-ico-green{
    background:
        linear-gradient(
            135deg,
            var(--eah-navy),
            var(--eah-navy-light)
        );
}

/* Icone inscription */

.eah-ico-gold{
    background:
        linear-gradient(
            135deg,
            var(--eah-primary),
            var(--eah-primary-dark)
        );
}

/* =========================================================
 * TEXTES PORTAIL
 * =======================================================*/

.eah-portail-card h3{
    margin:.25rem 0 .1rem;

    color:var(--eah-navy);

    font-size:1.18rem;

    font-weight:800;
}

.eah-portail-card p{
    color:var(--eah-muted);

    margin:0;

    line-height:1.6;

    flex:1;

    max-width:330px;
}

/* =========================================================
 * BOUTONS PORTAIL
 * =======================================================*/

.eah-btn-portail{
    width:100%;

    margin-top:1.3rem;

    padding:.95rem 1.1rem;

    font-size:1rem;

    border-radius:12px;

    position:relative;
    overflow:hidden;

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

    gap:.7rem;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

/*
 * On enlève l'ancienne flèche générée
 * pour utiliser une flèche animée propre.
 */

.eah-btn-portail::after{
    content:"→";

    margin-left:.2rem;

    font-size:1.2rem;

    transition:
        transform .35s cubic-bezier(.34,1.56,.64,1);
}

a.eah-portail-card:hover
.eah-btn-portail::after{
    transform:translateX(7px);
}

/* Connexion */

a.eah-portail-login .eah-btn-portail{
    background:var(--eah-navy);

    color:#fff;

    box-shadow:
        0 8px 20px rgba(22,35,61,.22);
}

a.eah-portail-login:hover
.eah-btn-portail{
    background:var(--eah-navy-dark);

    box-shadow:
        0 12px 27px rgba(22,35,61,.30);

    transform:translateY(-2px);
}

/* Inscription */

a.eah-portail-register .eah-btn-portail{
    background:var(--eah-primary);

    color:#fff;

    box-shadow:
        0 8px 20px rgba(209,106,76,.25);
}

a.eah-portail-register:hover
.eah-btn-portail{
    background:var(--eah-primary-dark);

    box-shadow:
        0 12px 27px rgba(209,106,76,.32);

    transform:translateY(-2px);
}

/* =========================================================
 * SUPPRESSION DES SECTIONS BLANCHES VIDES
 * =======================================================*/

/*
 * Cache automatiquement les éléments vides
 * qui peuvent créer une zone blanche entre
 * "Se connecter" et "Créer un compte".
 */

.eah-portail-grid > :empty{
    display:none !important;
}

/*
 * Cache les cartes complètement vides.
 */

.eah-portail-grid
.eah-card:empty{
    display:none !important;
}

/*
 * Si WordPress/Elementor génère une section vide
 * à l'intérieur du portail.
 */

.eah-portail > .eah-card:empty,
.eah-portail > section:empty,
.eah-portail-grid > section:empty,
.eah-portail-grid > div:empty{
    display:none !important;
}

/* =========================================================
 * FORMULAIRES
 * =======================================================*/

.eah-field{
    margin-bottom:1.1rem;
    text-align:left;
}

.eah-field label{
    display:block;

    font-weight:700;

    margin-bottom:.4rem;

    font-size:.94rem;

    color:var(--eah-navy);
}

.eah-field input[type=text],
.eah-field input[type=email],
.eah-field input[type=tel],
.eah-field input[type=password],
.eah-field input[type=url],
.eah-field select,
.eah-field textarea{
    width:100%;

    padding:.8rem .95rem;

    border:1.5px solid #dce1e8;

    border-radius:10px;

    font-size:1rem;

    background:#fff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    color:var(--eah-text);
}

.eah-field input:focus,
.eah-field select:focus,
.eah-field textarea:focus{
    outline:none;

    border-color:var(--eah-primary);

    box-shadow:
        0 0 0 4px rgba(209,106,76,.12);

    transform:translateY(-1px);
}

.eah-field input.eah-invalid,
.eah-field textarea.eah-invalid{
    border-color:var(--eah-primary);
}

.eah-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.eah-hint{
    color:var(--eah-muted);
    font-size:.82rem;
    margin-top:.25rem;
    display:block;
}

.eah-check{
    display:flex!important;
    align-items:center;
    gap:.55rem;
    font-weight:400!important;
    cursor:pointer;
}

.eah-check input{
    width:18px;
    height:18px;
    accent-color:var(--eah-primary);
}

.eah-switch{
    text-align:center;
    margin-top:1.2rem;
    font-size:.92rem;
}

.eah-switch a{
    color:var(--eah-primary);
    font-weight:700;
}

/* =========================================================
 * ALERTES
 * =======================================================*/

.eah-alert{
    border-radius:10px;

    padding:.85rem 1.1rem;

    margin-bottom:1.1rem;

    font-size:.95rem;

    animation:eahPop .35s ease;
}

.eah-alert-error{
    background:#fff0ec;
    color:#a33f2b;
    border:1px solid #efc0b4;
}

.eah-alert-success{
    background:#edf5ff;
    color:var(--eah-navy);
    border:1px solid #cbd8eb;
}

.eah-hidden{
    display:none!important;
}

@keyframes eahPop{
    from{
        opacity:0;
        transform:translateY(-8px) scale(.98);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* =========================================================
 * ANIMATIONS D'ENTREE
 * =======================================================*/

.eah-fade-in{
    animation:eahFade .6s ease both;
}

@keyframes eahFade{
    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* Animation flottante légère des icônes */

.eah-portail-ico{
    animation:eahFloat 4s ease-in-out infinite;
}

@keyframes eahFloat{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }
}

a.eah-portail-card:hover .eah-portail-ico{
    animation:none;
}

/* =========================================================
 * FORMULES / TARIFS
 * =======================================================*/

.eah-plans{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:1.6rem;
    max-width:860px;
    margin:0 auto;
}

.eah-plan-card{
    position:relative;
    text-align:left;
    display:flex;
    flex-direction:column;
}

.eah-plan-premium{
    border:2px solid var(--eah-primary);
}

.eah-ribbon{
    position:absolute;
    top:-13px;
    right:20px;

    background:var(--eah-primary);

    color:#fff;

    font-size:.75rem;
    font-weight:700;

    padding:.28rem .9rem;

    border-radius:999px;

    letter-spacing:.03em;
}

.eah-plan-name{
    margin:0 0 .5rem;

    color:var(--eah-navy);

    font-size:1.25rem;

    text-transform:uppercase;

    letter-spacing:.04em;
}

.eah-plan-premium .eah-plan-name{
    color:var(--eah-primary);
}

.eah-plan-price{
    font-size:2rem;
    font-weight:800;
    color:var(--eah-primary);
    margin-bottom:1rem;
}

.eah-plan-price span{
    font-size:.95rem;
    font-weight:500;
    color:var(--eah-muted);
}

.eah-plan-features{
    list-style:none;
    margin:0 0 1.4rem;
    padding:0;
    flex:1;
}

.eah-plan-features li{
    padding:.42rem 0;

    border-bottom:1px dashed #dfe3e9;

    font-size:.95rem;
}

.eah-plan-features li:last-child{
    border-bottom:none;
}

/* =========================================================
 * PAIEMENT
 * =======================================================*/

.eah-summary{
    background:#f2f5f9;

    border-radius:12px;

    padding:1.2rem 1.4rem;

    margin-bottom:1.4rem;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.8rem;
}

.eah-summary div{
    display:flex;
    flex-direction:column;
}

.eah-summary span{
    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.05em;

    color:var(--eah-muted);
}

.eah-summary strong{
    font-size:1.05rem;

    color:var(--eah-navy);
}

.eah-price-total{
    color:var(--eah-primary);
    font-size:1.35rem!important;
}

.eah-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
}

.eah-method{
    display:flex;
    align-items:center;

    gap:.5rem;

    border:1.5px solid #dce1e8;

    border-radius:10px;

    padding:.65rem .8rem;

    cursor:pointer;

    transition:var(--eah-transition);

    background:#fff;
}

.eah-method:has(input:checked){
    border-color:var(--eah-primary);

    background:#fff5f1;

    box-shadow:
        0 4px 12px rgba(209,106,76,.10);
}

.eah-method input{
    accent-color:var(--eah-primary);
}

/* =========================================================
 * CONFIRMATION
 * =======================================================*/

.eah-confirm-card{
    text-align:center;
    padding:3rem 2rem;
}

.eah-check-big{
    width:76px;
    height:76px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--eah-primary),
            var(--eah-primary-dark)
        );

    color:#fff;

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

    font-size:2.2rem;

    margin:0 auto 1.2rem;

    animation:eahPop .5s ease;
}

.eah-confirm-text{
    color:var(--eah-muted);
    line-height:1.6;
    margin-bottom:1.6rem;
}

/* =========================================================
 * TABLEAU DE BORD
 * =======================================================*/

.eah-dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:1.6rem;
}

.eah-dash-head .eah-title,
.eah-dash-head .eah-subtitle{
    text-align:left;
}

.eah-dash-meta{
    text-align:right;
}

.eah-meta-line{
    display:flex;
    flex-direction:column;
    font-size:.88rem;
    color:var(--eah-muted);
    margin-top:.4rem;
}

.eah-badge{
    display:inline-block;
    padding:.3rem .95rem;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
}

.eah-badge-en_attente{
    background:#fff5dc;
    color:#8a6d0b;
}

.eah-badge-valide,
.eah-badge-paye{
    background:#edf5ff;
    color:var(--eah-navy);
}

.eah-badge-refuse,
.eah-badge-echoue{
    background:#fff0ec;
    color:#a33f2b;
}

.eah-dash-section{
    margin-bottom:1.4rem;
}

.eah-dash-section h3{
    margin:0 0 1.1rem;

    color:var(--eah-navy);

    font-size:1.1rem;

    border-bottom:2px solid #edf0f4;

    padding-bottom:.5rem;
}

.eah-photos-preview{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:.6rem;
    margin-top:.6rem;
}

.eah-photos-preview img{
    width:100%;
    height:82px;
    object-fit:cover;
    border-radius:10px;
    box-shadow:var(--eah-shadow);
}

/* =========================================================
 * BADGES ADMIN WORDPRESS
 * =======================================================*/

.eah-admin .eah-badge-en_attente{
    background:#fff5dc;
    color:#8a6d0b;
}

.eah-admin .eah-badge-valide,
.eah-admin .eah-badge-paye{
    background:#edf5ff;
    color:var(--eah-navy);
}

.eah-admin .eah-badge-refuse,
.eah-admin .eah-badge-echoue{
    background:#fff0ec;
    color:#a33f2b;
}

/* =========================================================
 * ANNUAIRE PUBLIC
 * =======================================================*/

.eah-annuaire-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(300px,1fr));

    gap:1.5rem;
}

a.eah-hotel-card{
    display:block;

    text-decoration:none;

    color:var(--eah-text);

    padding:0;

    overflow:hidden;

    display:flex;

    flex-direction:column;
}

.eah-hotel-card:hover{
    transform:translateY(-5px);
}

.eah-card-premium{
    border:2px solid var(--eah-primary);
}

.eah-hotel-cover{
    height:190px;

    background:#f1f3f6;

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

    overflow:hidden;
}

.eah-hotel-cover img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .5s ease;
}

.eah-hotel-card:hover
.eah-hotel-cover img{
    transform:scale(1.06);
}

.eah-hotel-noimg{
    font-size:3rem;
    color:var(--eah-primary);
}

.eah-hotel-body{
    padding:1.2rem 1.3rem 1.4rem;

    display:flex;
    flex-direction:column;

    gap:.45rem;

    flex:1;
}

.eah-hotel-body h3{
    margin:0;

    color:var(--eah-navy);

    font-size:1.15rem;
}

.eah-hotel-addr{
    margin:0;

    color:var(--eah-muted);

    font-size:.88rem;
}

.eah-hotel-desc{
    margin:0;

    color:#596273;

    font-size:.92rem;

    flex:1;
}

.eah-btn-sm{
    padding:.55rem 1.2rem;

    font-size:.88rem;

    align-self:flex-start;

    margin-top:.5rem;
}

/* =========================================================
 * FICHE DETAILLEE
 * =======================================================*/

.eah-back{
    color:var(--eah-primary);

    font-weight:700;

    text-decoration:none;
}

.eah-back:hover{
    color:var(--eah-primary-dark);
}

.eah-detail-head{
    margin-bottom:1.4rem;
}

.eah-detail-head .eah-title{
    margin:0;
}

.eah-ribbon-static{
    display:inline-block;

    background:var(--eah-primary);

    color:#fff;

    font-size:.7rem;

    padding:.2rem .8rem;

    border-radius:999px;

    vertical-align:middle;

    margin-left:.6rem;

    letter-spacing:.04em;
}

.eah-detail-addr{
    color:var(--eah-muted);
    margin:.3rem 0 0;
}

.eah-gallery{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:.7rem;

    margin-bottom:1.6rem;
}

.eah-gallery img{
    width:100%;
    height:150px;

    object-fit:cover;

    border-radius:10px;

    box-shadow:var(--eah-shadow);
}

.eah-gallery .eah-gallery-main{
    grid-column:1/-1;
    height:340px;
}

.eah-detail-grid{
    display:grid;

    grid-template-columns:
        1.6fr 1fr;

    gap:1.4rem;

    align-items:start;
}

.eah-detail-block h3{
    margin:0 0 .9rem;

    color:var(--eah-navy);

    font-size:1.15rem;

    border-bottom:2px solid #edf0f4;

    padding-bottom:.5rem;
}

.eah-detail-block h4{
    margin:1.1rem 0 .5rem;

    color:var(--eah-navy);

    font-size:1rem;
}

.eah-detail-block p{
    margin:.4rem 0;
}

.eah-detail-block a{
    color:var(--eah-primary);
    font-weight:700;
}

.eah-checklist{
    list-style:none;
    margin:0;
    padding:0;
}

.eah-checklist li{
    padding:.3rem 0;
    color:#596273;
}

.eah-pricelist{
    list-style:none;
    margin:0;
    padding:0;
}

.eah-pricelist li{
    padding:.55rem 0;

    border-bottom:1px dashed #dce1e8;

    font-weight:600;

    color:var(--eah-navy);
}

.eah-pricelist li:last-child{
    border-bottom:none;
}

.eah-btn-outline{
    background:transparent;

    color:var(--eah-navy);

    border:2px solid var(--eah-navy);
}

.eah-btn-outline:hover{
    background:var(--eah-navy);

    color:#fff;
}

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

@media (max-width:820px){

    .eah-detail-grid{
        grid-template-columns:1fr;
    }

    .eah-gallery{
        grid-template-columns:repeat(2,1fr);
    }

    .eah-gallery .eah-gallery-main{
        height:230px;
    }
}

@media (max-width:720px){

    .eah-row{
        grid-template-columns:1fr;
    }

    .eah-summary{
        grid-template-columns:1fr;
    }

    .eah-methods{
        grid-template-columns:1fr;
    }

    .eah-form-card{
        padding:1.4rem;
    }

    .eah-dash-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .eah-dash-meta{
        text-align:left;
    }

    .eah-menu-btn{
        margin:.5rem 0 0;
    }

    /* Portail mobile */

    .eah-portail-grid{
        grid-template-columns:1fr;
        gap:1.2rem;
    }

    a.eah-portail-card{
        padding:2rem 1.4rem 1.6rem;
    }

    .eah-portail-ico{
        width:64px;
        height:64px;
    }
}

/* =========================================================
 * REDUCTION DES ANIMATIONS POUR ACCESSIBILITE
 * =======================================================*/

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}