/* =====================================================================
EYDENN — Couche premium « luxe africain » (additif, non destructif)
Se charge APRÈS style.css. Ne modifie que l'habillage : couleurs,
typographie, finitions. N'altère aucune logique (recherche, résa…).
--------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');
:root{
/* Palette officielle Eydenn (charte graphique) */
--eyd-emerald:#064333; /* vert émeraude principal */
--eyd-emerald-deep:#03291F; /* vert profond */
--eyd-cream:#F7F1E8; /* crème */
--eyd-sand:#E7DBC0; /* sable */
--eyd-header-bg:#F4EDDF; /* sable clair / blanc cassé — fond en-tête (logo vert-or lisible) */
--eyd-gold:#C9A24A; /* or */
--eyd-sage:#93C9AE; /* vert d'eau */
--eyd-muted:#65736B; /* gris-vert */
--eyd-ink:#101713; /* noir-vert (textes) */
--eyd-gold-soft:#E2C98B; /* teinte or claire (dérivée) */
/* on repeint les variables Bootstrap du thème */
--bs-primary:#064333;
--bs-primary-rgb:6,67,51;
--bs-link-color:#064333;
--bs-link-hover-color:#C9A24A;
--bs-body-color:#101713;
--bs-body-font-family:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif;
--bs-border-color:#e7ddca;
}
/* ---------- Base ---------- */
body{
background:var(--eyd-cream)!important;
color:var(--eyd-ink);
font-family:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif;
-webkit-font-smoothing:antialiased;
letter-spacing:.1px;
/* Chiffres tabulaires par défaut partout (tableaux, prix, montants) :
largeur fixe par chiffre → colonnes de nombres parfaitement alignées,
lecture plus nette qu'avec des chiffres proportionnels. */
font-variant-numeric:tabular-nums;
}
/* ---------- Typographie ---------- */
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,.card-title{
font-family:'Cormorant Garamond',Georgia,serif!important;
font-weight:600!important;
color:var(--eyd-emerald);
letter-spacing:.2px;
}
.display-5{ font-weight:600!important; line-height:1.04; }
h1.display-5{ font-size:3.8rem; }
h2.h2{ font-size:2.9rem!important; font-weight:600!important; }
h3.h3{ font-size:2.2rem!important; }
/* Chiffres (montants, statistiques, KPI) : jamais la serif décorative des
titres — trop peu contrastée pour lire un prix ou un total d'un coup
d'œil. Sans-serif nette + chiffres tabulaires (alignement impeccable en
colonne). Référencée dans plusieurs tableaux de bord mais jamais définie
jusqu'ici — les montants héritaient donc d'un style non maîtrisé. */
.eyd-num{
font-family:'Manrope',-apple-system,Segoe UI,Roboto,sans-serif!important;
font-variant-numeric:tabular-nums;
font-weight:700!important;
letter-spacing:0;
color:var(--eyd-emerald);
}
/* eyebrow « Bienvenue » */
h6.text-uppercase.text-primary{
color:var(--eyd-gold)!important;
letter-spacing:.32em;
font-family:'Manrope',sans-serif!important;
font-weight:600;
font-size:.72rem;
}
.text-primary{ color:var(--eyd-emerald)!important; }
.text-success{ color:var(--eyd-emerald)!important; }
/* sous-titre du hero (.playfair) → Cormorant italique élégant */
.playfair{
font-family:'Cormorant Garamond',Georgia,serif!important;
font-style:italic;
font-weight:500;
font-size:1.5rem!important;
line-height:1.4;
color:var(--eyd-muted);
}
.playfair br{ display:inline!important; }
p{ color:#3a463f; }
/* ---------- Barre de navigation ---------- */
header.header-sticky{
background:rgba(247,241,232,.86)!important;
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid rgba(201,162,74,.18);
}
.navbar-brand-item{ height:34px; }
header .nav-link{
color:var(--eyd-emerald)!important;
font-weight:600;
letter-spacing:.02em;
}
header .nav-link:hover{ color:var(--eyd-gold)!important; }
/* ---------- Boutons ---------- */
.btn{
border-radius:9px;
font-family:'Manrope',sans-serif;
font-weight:600;
letter-spacing:.02em;
padding:.72rem 1.6rem;
transition:all .25s ease;
}
.btn-primary{
background:var(--eyd-emerald)!important;
border-color:var(--eyd-emerald)!important;
color:#fff!important;
box-shadow:0 8px 22px -10px rgba(6,67,51,.6);
}
.btn-primary:hover,.btn-primary:focus{
background:var(--eyd-gold)!important;
border-color:var(--eyd-gold)!important;
color:var(--eyd-emerald-deep)!important;
transform:translateY(-1px);
box-shadow:0 10px 26px -10px rgba(201,162,74,.7);
}
.btn-outline-primary{
border:1.5px solid var(--eyd-emerald)!important;
color:var(--eyd-emerald)!important;
}
.btn-outline-primary:hover{
background:var(--eyd-emerald)!important;
color:#fff!important;
}
.btn-searchform,.homeform .btn-primary{ border-radius:9px; }
/* ---------- Formulaire de recherche (hero) ---------- */
.homeform{
background:#fff!important;
border:1px solid rgba(201,162,74,.35)!important;
box-shadow:0 28px 60px -30px rgba(6,67,51,.35);
padding:12px!important;
border-radius:16px!important;
}
.homeform .form-control,.homeform .choices__inner,
.homeform input.form-control.flatpickr{
background:#fff!important;
border:1px solid #ece3d2!important;
border-radius:11px!important;
}
.homeform svg path{ fill:var(--eyd-emerald); }
/* ---------- Section : titres centrés + filet doré ---------- */
section .text-center h2.h2{ position:relative; padding-bottom:.9rem; }
section .text-center h2.h2:after{
content:"";
position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:62px; height:2px;
background:linear-gradient(90deg,transparent,var(--eyd-gold),transparent);
}
section .text-center p{ color:var(--eyd-muted); max-width:640px; margin:.6rem auto 0; }
/* ---------- Cartes hôtels ---------- */
.card{ background:transparent; }
.card-img-scale-wrapper,.min-h6{ border-radius:14px!important; }
.card .card-img.min-h6{ box-shadow:0 18px 40px -24px rgba(6,67,51,.5); }
.card-body .card-title a{
color:var(--eyd-emerald)!important;
font-family:'Cormorant Garamond',serif;
font-weight:600;
font-size:1.4rem;
}
.card-body h6.text-success{
color:var(--eyd-gold)!important;
font-family:'Manrope',sans-serif;
font-weight:700;
}
/* ---------- Atouts (icônes) ---------- */
.icon-lg{
width:56px;height:56px;display:flex;align-items:center;justify-content:center;
font-size:1.25rem;
background:rgba(6,67,51,.07)!important;
color:var(--eyd-emerald)!important;
}
.icon-lg.text-danger,.icon-lg.text-orange,.icon-lg.text-info{
background:rgba(201,162,74,.14)!important;
color:var(--eyd-gold)!important;
}
.icon-lg i{ color:inherit!important; }
/* ---------- Carte d'Afrique / îles ---------- */
.africa-map-container path{ fill:var(--eyd-sage); }
.africa-map-container path:hover{ fill:var(--eyd-emerald); }
/* Maroc/Sahara occidental : la classe eyd-no-border (map2.svg) ne suffisait
pas — resources/css/app.css définit .africa-map-container path{stroke:#fff}
avec une spécificité plus élevée (classe+type) qu'un simple .eyd-no-border
(classe seule), qui gagnait donc malgré son ordre plus tardif. Sélecteur
composé ici pour reprendre la main, quel que soit l'ordre de chargement. */
.africa-map-container path.eyd-no-border{ stroke:none; }
.iles a{ border:1.5px solid var(--eyd-sage); border-radius:12px; }
.iles a:hover{ border-color:var(--eyd-gold); }
.iles a:hover path,.iles a:hover polygon{ fill:var(--eyd-emerald); }
.iles a div{ font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--eyd-emerald); }
/* ---------- Repère de localisation (mini carte Afrique + point doré) ---------- */
.ile-locator{
position:absolute; top:5px; right:5px; width:46px; height:46px;
pointer-events:none; z-index:2; opacity:.96;
}
.ile-locator img{ display:block; width:100%; height:100%; }
.ile-locator-dot{
position:absolute; width:7.6px; height:7.6px; margin:-3.8px 0 0 -3.8px;
border-radius:50%; background:var(--eyd-gold);
box-shadow:0 0 0 1.3px rgba(255,255,255,.9), 0 0 0 3px rgba(201,162,74,.4);
transition:transform .2s ease;
}
@media (prefers-reduced-motion:no-preference){
.iles a:hover .ile-locator-dot,
.iles a:focus-visible .ile-locator-dot{
transform:scale(1.3);
}
}
@media (max-width:576px){
.ile-locator{ width:38px; height:38px; }
}
/* ---------- Bloc « Devenir hôte » ---------- */
.bg-light{
background:linear-gradient(135deg,#fbf6ee,#f3ead8)!important;
border:1px solid rgba(201,162,74,.25);
}
.fill-primary{ fill:var(--eyd-gold)!important; }
/* ---------- Pied de page ---------- */
footer.bg-primary{
background:var(--eyd-emerald-deep)!important;
position:relative;
}
footer.bg-primary:before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--eyd-gold),transparent);
}
footer h5{
color:var(--eyd-gold-soft)!important;
font-family:'Manrope',sans-serif!important;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
font-size:.72rem!important;
}
footer a.text-light:hover{ color:var(--eyd-gold)!important; }
.eydenn_footer svg path{ fill:#fff; }
.eydenn_footer svg polygon{ fill:var(--eyd-gold)!important; }
/* signature de marque sous le logo du footer */
.eydenn_footer:after{
content:"L'Afrique, autrement.";
display:block;
font-family:'Cormorant Garamond',serif;
font-style:italic;
font-size:1.25rem;
color:var(--eyd-gold-soft);
margin-top:-1.2rem;
margin-bottom:1.4rem;
letter-spacing:.4px;
}
/* ---------- Bandeau e-mail non vérifié ---------- */
.not_verified{ background:var(--eyd-emerald-deep); }
.not_verified a{ color:var(--eyd-gold-soft); }
@media (max-width:768px){
h1.display-5{ font-size:2.8rem; }
h2.h2{ font-size:2.2rem!important; }
}
/* =====================================================================
EYDENN — Composants cinématiques (hero, recherche, cartes, confiance)
===================================================================== */
/* ---------- HERO plein écran ---------- */
.eyd-hero{
position:relative;
min-height:90vh;
display:flex;align-items:center;
background:#03291F;
background-size:cover;background-position:center;
margin-bottom:0;
overflow:hidden;
}
.eyd-hero:before{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(3,41,31,.55) 0%,rgba(3,41,31,.35) 40%,rgba(3,41,31,.85) 100%);
}
.eyd-hero:after{
content:"";position:absolute;inset:0;z-index:2;
background:radial-gradient(120% 80% at 70% 30%,transparent 40%,rgba(3,41,31,.5) 100%);
}
.eyd-hero-inner{position:relative;z-index:3;padding:7rem 0 12rem;}
/* ---------- Hero : carrousel photo en fondu enchaîné (5 photos, ~7s chacune) ---------- */
.eyd-hero-carousel{position:absolute;inset:0;z-index:0;overflow:hidden;}
.eyd-hero-carousel img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
opacity:0;animation:eydHeroFade 35s infinite;
}
.eyd-hero-carousel img:nth-child(1){animation-delay:0s;}
.eyd-hero-carousel img:nth-child(2){animation-delay:7s;}
.eyd-hero-carousel img:nth-child(3){animation-delay:14s;}
.eyd-hero-carousel img:nth-child(4){animation-delay:21s;}
.eyd-hero-carousel img:nth-child(5){animation-delay:28s;}
@keyframes eydHeroFade{
0%{opacity:0;}
2.86%{opacity:1;}
17.14%{opacity:1;}
20%{opacity:0;}
100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
.eyd-hero-carousel img{animation:none;opacity:0;}
.eyd-hero-carousel img:first-child{opacity:1;}
}
.eyd-hero .eyd-eyebrow{
color:var(--eyd-gold-soft);letter-spacing:.42em;text-transform:uppercase;
font-family:'Manrope',sans-serif;font-weight:600;font-size:.78rem;margin-bottom:1.4rem;
display:flex;align-items:center;gap:.9rem;
}
.eyd-hero .eyd-eyebrow:before{content:"";width:46px;height:1px;background:var(--eyd-gold);}
.eyd-hero h1{
color:#fff!important;
font-family:'Cormorant Garamond',serif!important;
font-weight:600!important;
font-size:5.4rem;line-height:.98;letter-spacing:.5px;
margin-bottom:1.6rem;max-width:14ch;
text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.eyd-hero h1 em{font-style:italic;color:var(--eyd-gold-soft);}
.eyd-hero .eyd-lead{
color:rgba(255,255,255,.92);font-size:1.3rem;font-weight:300;
max-width:42ch;line-height:1.6;margin-bottom:0;
}
.eyd-hero .eyd-loyalty-pill{
display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;margin-bottom:0;
padding:.55rem 1.2rem;border-radius:999px;
background:rgba(255,255,255,.12);border:1px solid rgba(201,162,74,.5);
color:#fff;font-size:.92rem;font-weight:400;backdrop-filter:blur(4px);
}
.eyd-hero .eyd-loyalty-pill i{color:var(--eyd-gold-soft);}
.eyd-hero .eyd-loyalty-pill a{color:var(--eyd-gold-soft);font-weight:600;text-decoration:underline;margin-left:.2rem;}
.eyd-hero .eyd-loyalty-pill a:hover{color:#fff;}
/* ---------- Barre de recherche premium ---------- */
.eyd-search{
position:relative;z-index:5;margin-top:-7rem;margin-bottom:4rem;
}
.eyd-search-card{
background:rgba(255,255,255,.97);
border:1px solid rgba(201,162,74,.4);
border-radius:18px;
box-shadow:0 40px 90px -40px rgba(3,41,31,.6);
padding:.6rem .6rem .6rem 1.4rem;
display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
}
.eyd-field{flex:1 1 0;padding:1rem 1.2rem;border-right:1px solid #eee3cf;min-width:160px;}
.eyd-field:last-of-type{border-right:0;}
.eyd-field label{
display:block;font-family:'Manrope',sans-serif;font-weight:700;
font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--eyd-gold);margin-bottom:.25rem;
}
.eyd-field .val{font-family:'Manrope',sans-serif;color:var(--eyd-ink);font-weight:500;font-size:1.02rem;}
.eyd-field .val.muted{color:#9aa39c;font-weight:400;}
.eyd-search-btn{
background:var(--eyd-gold);color:var(--eyd-emerald-deep);
border:0;border-radius:13px;margin:.4rem;padding:0 2.2rem;
font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.02em;
display:flex;align-items:center;gap:.6rem;cursor:pointer;
transition:all .25s ease;
}
.eyd-search-btn:hover{background:var(--eyd-emerald);color:#fff;}
/* ---------- Cartes hôtels désirables ---------- */
.eyd-hcard{
position:relative;border-radius:18px;overflow:hidden;
background:#fff;border:1px solid #ece3d2;
box-shadow:0 22px 50px -34px rgba(6,67,51,.5);
transition:transform .3s ease,box-shadow .3s ease;height:100%;
}
.eyd-hcard:hover{transform:translateY(-6px);box-shadow:0 34px 70px -34px rgba(6,67,51,.6);}
.eyd-hcard-img{position:relative;height:300px;overflow:hidden;}
.eyd-hcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.eyd-hcard:hover .eyd-hcard-img img{transform:scale(1.06);}
.eyd-verified{
position:absolute;top:14px;left:14px;z-index:2;
background:rgba(255,255,255,.95);color:var(--eyd-emerald);
font-family:'Manrope',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.02em;
padding:.4rem .8rem;border-radius:100px;display:flex;align-items:center;gap:.35rem;
box-shadow:0 6px 18px -8px rgba(0,0,0,.4);
}
.eyd-verified .dot{color:var(--eyd-gold);}
.eyd-hcard-body{padding:1.2rem 1.3rem 1.4rem;}
.eyd-hcard-body .loc{font-family:'Manrope',sans-serif;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--eyd-muted);margin-bottom:.25rem;}
.eyd-hcard-body h5{font-family:'Cormorant Garamond',serif!important;font-size:1.6rem!important;color:var(--eyd-emerald)!important;margin:0 0 .5rem;font-weight:600!important;}
.eyd-hcard-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.9rem;padding-top:.9rem;border-top:1px solid #f0e8d8;}
.eyd-rating{font-family:'Manrope',sans-serif;font-weight:700;color:var(--eyd-emerald);font-size:.92rem;}
.eyd-rating .star{color:var(--eyd-gold);}
.eyd-price{font-family:'Manrope',sans-serif;font-weight:800;color:var(--eyd-ink);}
.eyd-price small{font-weight:400;color:var(--eyd-muted);}
.eyd-offer-btn{display:inline-block;margin-top:1rem;width:100%;text-align:center;
border:1.5px solid var(--eyd-emerald);color:var(--eyd-emerald);border-radius:11px;
padding:.7rem;font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;text-decoration:none;transition:all .2s;}
.eyd-offer-btn:hover{background:var(--eyd-emerald);color:#fff;}
/* ---------- Destinations cliquables ---------- */
.eyd-dest-chips{display:flex;flex-wrap:wrap;gap:.7rem;}
.eyd-dest-chips a{
font-family:'Manrope',sans-serif;font-weight:600;font-size:.95rem;
color:var(--eyd-emerald);text-decoration:none;
border:1.5px solid var(--eyd-sage);border-radius:100px;padding:.55rem 1.2rem;
transition:all .2s;background:#fff;
}
.eyd-dest-chips a:hover{background:var(--eyd-emerald);color:#fff;border-color:var(--eyd-emerald);}
.eyd-dest-chips a .ar{color:var(--eyd-gold);margin-left:.4rem;}
/* ---------- Bloc « Pourquoi Eydenn » (confiance) ---------- */
.eyd-why{background:linear-gradient(135deg,#064333,#03291F);color:#fff;padding:5rem 0;position:relative;}
.eyd-why:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--eyd-gold),transparent);}
.eyd-why h2{color:#fff!important;text-align:center;font-size:3rem!important;margin-bottom:.6rem;}
.eyd-why .sub{text-align:center;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 3.5rem;}
.eyd-why-item{text-align:center;padding:0 1rem;}
.eyd-why-ico{
width:72px;height:72px;margin:0 auto 1.2rem;border-radius:50%;
border:1.5px solid rgba(201,162,74,.5);
display:flex;align-items:center;justify-content:center;
color:var(--eyd-gold-soft);font-size:1.5rem;background:rgba(201,162,74,.08);
}
.eyd-why-item h5{color:#fff!important;font-family:'Cormorant Garamond',serif!important;font-size:1.5rem!important;margin-bottom:.5rem;}
.eyd-why-item p{color:rgba(255,255,255,.66);font-size:.92rem;margin:0;}
/* ---------- Bandeau section titre ---------- */
.eyd-sec-head{text-align:center;margin-bottom:3rem;}
.eyd-sec-head .eyd-kicker{color:var(--eyd-gold);letter-spacing:.3em;text-transform:uppercase;font-family:'Manrope',sans-serif;font-weight:600;font-size:.72rem;display:block;margin-bottom:.6rem;}
.eyd-sec-head h2{font-size:3rem!important;margin:0;}
@media (max-width:992px){
.eyd-hero h1{font-size:3.4rem;}
.eyd-search-card{flex-direction:column;}
.eyd-field{border-right:0;border-bottom:1px solid #eee3cf;}
.eyd-search-btn{justify-content:center;padding:1rem;}
.eyd-hcard-img{height:240px;}
}
/* =====================================================================
EYDENN — Raffinements mobile (v1.1) : lisibilité & respiration
===================================================================== */
.eyd-hero h1{ font-size:clamp(2.5rem,7vw,5.4rem); }
.eyd-hero .eyd-lead{ font-size:clamp(1.05rem,2.4vw,1.3rem); }
@media (max-width:768px){
.eyd-hero{ min-height:78vh; }
.eyd-hero-inner{ padding:6rem 0 9rem; }
.eyd-hero h1{ max-width:100%; line-height:1.04; }
.eyd-hero .eyd-eyebrow{ font-size:.68rem; letter-spacing:.3em; }
/* search card : ne pas comprimer */
.eyd-search{ margin-top:-6rem; }
.eyd-search-card{ padding:.5rem; border-radius:16px; }
.eyd-field{ padding:.85rem 1rem; }
.eyd-field label{ font-size:.6rem; }
.eyd-field .val{ font-size:.95rem; }
.eyd-search-btn{ margin:.5rem 0 0; padding:.95rem; font-size:.98rem; }
/* cartes hôtels : respirer */
.eyd-hcard-img{ height:210px; }
.eyd-hcard-body{ padding:1rem 1.05rem 1.15rem; }
.eyd-hcard-body h5{ font-size:1.35rem!important; }
.eyd-verified{ font-size:.64rem; padding:.32rem .6rem; }
/* sections : titres */
.eyd-sec-head h2,.eyd-why h2{ font-size:2.2rem!important; }
.eyd-why{ padding:3.5rem 0; }
.eyd-why-item{ margin-bottom:1.4rem; }
/* destinations chips : plus compactes */
.eyd-dest-chips a{ font-size:.86rem; padding:.45rem .95rem; }
/* footer mobile compact */
footer.bg-primary{ padding-top:2.5rem!important; padding-bottom:1.5rem!important; }
footer .col-md-2{ margin-bottom:1.1rem; }
footer h5{ margin-bottom:.6rem!important; }
.eydenn_footer svg{ height:46px!important; }
.eydenn_footer:after{ font-size:1.05rem; margin-top:-.6rem; margin-bottom:1rem; }
}
@media (max-width:575px){
/* 2 cartes par ligne -> garder lisible ; titres */
.eyd-hero-inner{ padding:5.5rem 0 8rem; }
.eyd-search{ margin-top:-5.5rem; }
.eyd-hcard-img{ height:160px; }
.eyd-hcard-body{ padding:.8rem .85rem 1rem; }
.eyd-hcard-body h5{ font-size:1.15rem!important; }
.eyd-hcard-meta{ flex-direction:column; align-items:flex-start; gap:.25rem; }
.eyd-verified{ font-size:.58rem; }
}
/* =====================================================================
EYDENN — Page d'accueil : nav transparente sur le hero + recherche
===================================================================== */
.eyd-home header.header-sticky{
background:transparent!important;border-bottom:0!important;
transition:background .3s ease,border-color .3s ease;
}
.eyd-home header.header-sticky .nav-link{ color:#fff!important; }
.eyd-home header.header-sticky .nav-link:hover{ color:var(--eyd-gold-soft)!important; }
.eyd-home header.header-sticky.scrolled{
background:rgba(247,241,232,.95)!important;
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid rgba(201,162,74,.18)!important;
}
.eyd-home header.header-sticky.scrolled .nav-link{ color:var(--eyd-emerald)!important; }
/* logo : version claire au-dessus du hero, normale au défilement */
.eyd-home header.header-sticky .light-mode-item{ display:none!important; }
.eyd-home header.header-sticky .dark-mode-item{ display:inline-block!important; }
.eyd-home header.header-sticky.scrolled .light-mode-item{ display:inline-block!important; }
.eyd-home header.header-sticky.scrolled .dark-mode-item{ display:none!important; }
/* boutons connexion / inscription au-dessus du hero */
.eyd-home header.header-sticky .btn-outline-primary{ border-color:rgba(255,255,255,.65)!important;color:#fff!important; }
.eyd-home header.header-sticky .btn-outline-primary:hover{ background:#fff!important;color:var(--eyd-emerald)!important; }
.eyd-home header.header-sticky .btn-primary{ background:var(--eyd-gold)!important;border-color:var(--eyd-gold)!important;color:var(--eyd-emerald-deep)!important; }
.eyd-home header.header-sticky.scrolled .btn-outline-primary{ border-color:var(--eyd-emerald)!important;color:var(--eyd-emerald)!important; }
/* recherche réelle (.homeform) posée sur le hero */
.eyd-search-shell{ position:relative;z-index:5; }
.eyd-home .homeform.eyd-search-shell .btn-primary{
background:var(--eyd-gold)!important;border-color:var(--eyd-gold)!important;color:var(--eyd-emerald-deep)!important;
height:54px;border-radius:11px;
}
.eyd-home .homeform.eyd-search-shell .btn-primary:hover{ background:var(--eyd-emerald)!important;color:#fff!important; }
/* =====================================================================
EYDENN — Raffinement v2 : cartes hôtels, destinations images, bloc hôte
« best of both » : hero cinématique + cartes premium
===================================================================== */
/* ---------- Cartes hôtels (v2 raffinée) ---------- */
.eyd-hcard{ border:0!important; border-radius:22px; box-shadow:0 32px 64px -40px rgba(6,67,51,.5); }
.eyd-hcard-img{ height:270px; }
.eyd-cat-badge{
position:absolute; top:16px; left:16px; z-index:3;
background:var(--eyd-gold); color:var(--eyd-emerald-deep);
font-family:'Manrope',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.02em;
padding:.44rem .9rem; border-radius:100px; box-shadow:0 8px 18px -8px rgba(0,0,0,.35);
}
.eyd-fav{
position:absolute; top:14px; right:14px; z-index:3;
width:42px; height:42px; border-radius:50%;
background:rgba(255,255,255,.94); color:var(--eyd-emerald);
display:flex; align-items:center; justify-content:center; font-size:1.05rem;
box-shadow:0 8px 18px -8px rgba(0,0,0,.4); border:0; transition:all .2s;
}
.eyd-fav:hover{ background:var(--eyd-gold); color:#fff; }
.eyd-hcard-body .loc{ display:flex; align-items:center; gap:.4rem; }
.eyd-hcard-body .loc i{ color:var(--eyd-gold); font-size:.9rem; }
.eyd-hcard-body h5{ font-size:1.5rem!important; line-height:1.15; }
.eyd-rating{ display:flex; align-items:center; gap:.4rem; }
.eyd-rating .stars{ color:var(--eyd-gold); letter-spacing:1px; font-size:.95rem; }
.eyd-rating .score{ font-family:'Manrope',sans-serif; font-weight:700; color:var(--eyd-emerald); }
.eyd-rating .count{ color:var(--eyd-muted); font-size:.82rem; font-weight:400; }
.eyd-price-soft{ color:var(--eyd-muted); font-style:italic; font-family:'Cormorant Garamond',serif; font-size:1.15rem; }
/* Badge « Réservable en ligne » (audit catalogue du 01/10/2026) : distingue l'offre réelle du catalogue sur demande. */
.eyd-bookable-badge{ display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.02em; color:#fff; background:var(--eyd-emerald,#0b7a5b); white-space:nowrap; }
/* le badge « vérifié » discret, sous l'image (cohabite avec le badge catégorie) */
.eyd-verified-line{ display:flex; align-items:center; gap:.4rem; color:var(--eyd-emerald); font-family:'Manrope',sans-serif; font-weight:600; font-size:.76rem; margin-top:.5rem; }
.eyd-verified-line i{ color:var(--eyd-gold); }
/* ---------- Destinations en grandes images ---------- */
.eyd-dest-card{
position:relative; display:block; border-radius:18px; overflow:hidden;
height:340px; box-shadow:0 26px 54px -36px rgba(6,67,51,.5); text-decoration:none;
}
.eyd-dest-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.eyd-dest-card:hover img{ transform:scale(1.07); }
.eyd-dest-card:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,41,31,0) 35%,rgba(3,41,31,.85) 100%); }
.eyd-dest-card .cap{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
.eyd-dest-card .cap h4{ color:#fff!important; font-family:'Cormorant Garamond',serif; font-size:1.7rem; margin:0 0 .1rem; }
.eyd-dest-card .cap span{ color:rgba(255,255,255,.85); font-family:'Manrope',sans-serif; font-size:.84rem; }
.eyd-dest-more{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem; color:var(--eyd-emerald); font-weight:700; font-family:'Manrope',sans-serif; text-decoration:none; }
.eyd-dest-more:hover{ color:var(--eyd-gold); }
/* ---------- Bloc « Devenir hôte » (grand bloc vert + image) ---------- */
.eyd-host-grid{
display:grid; grid-template-columns:1.05fr 1fr; border-radius:24px; overflow:hidden;
box-shadow:0 40px 80px -44px rgba(6,67,51,.55);
}
.eyd-host-left{ background:linear-gradient(150deg,#064333,#03291F); color:#fff; padding:4.5rem 3.8rem; }
.eyd-host-left .eyebrow{ color:var(--eyd-gold-soft); letter-spacing:.3em; text-transform:uppercase; font-family:'Manrope',sans-serif; font-weight:600; font-size:.72rem; display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem; }
.eyd-host-left .eyebrow:before{ content:""; width:40px; height:1px; background:var(--eyd-gold); }
.eyd-host-left h2{ color:#fff!important; font-size:3rem!important; line-height:1.05; margin-bottom:1.2rem; }
.eyd-host-left p{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:42ch; margin-bottom:2rem; }
.eyd-host-btn{ display:inline-block; background:var(--eyd-gold); color:var(--eyd-emerald-deep)!important; font-family:'Manrope',sans-serif; font-weight:700; padding:.95rem 2.2rem; border-radius:100px; text-decoration:none; transition:all .25s; }
.eyd-host-btn:hover{ background:#fff; transform:translateY(-2px); }
.eyd-host-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.eyd-host-stats{ display:flex; gap:3rem; margin-top:2.6rem; }
.eyd-host-stats .num{ font-family:'Cormorant Garamond',serif; color:var(--eyd-gold-soft); font-size:2.1rem; font-weight:600; line-height:1; }
.eyd-host-stats .lbl{ color:rgba(255,255,255,.7); font-family:'Manrope',sans-serif; font-size:.82rem; margin-top:.25rem; }
.eyd-host-right{ background-size:cover; background-position:center; min-height:460px; }
@media (max-width:992px){
.eyd-host-grid{ grid-template-columns:1fr; }
.eyd-host-left{ padding:3rem 2rem; }
.eyd-host-left h2{ font-size:2.3rem!important; }
.eyd-host-right{ min-height:260px; order:-1; }
.eyd-dest-card{ height:260px; }
}
@media (max-width:575px){
.eyd-host-stats{ gap:1.6rem; }
.eyd-dest-card{ height:220px; }
}
/* =====================================================================
EYDENN — v2 : logo, favori, carrousel, sous-titres, limites mobile
===================================================================== */
/* Logo agrandi & plus lisible */
.navbar-brand-item{ height:44px!important; }
.eyd-home header.header-sticky .navbar-brand-item{ height:48px!important; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
/* Sous-titre de section */
.eyd-sec-head p{ color:var(--eyd-muted); max-width:600px; margin:.7rem auto 0; }
.eyd-why .sub{ } /* déjà défini */
/* Cœur favori (composant réel) stylé en pastille */
.eyd-fav-wrap{ position:absolute; top:12px; right:12px; z-index:3; }
.eyd-fav-wrap form{ margin:0; }
.eyd-fav-wrap .btn{
width:42px; height:42px; border-radius:50%!important;
background:rgba(255,255,255,.94)!important; color:var(--eyd-emerald)!important;
display:flex; align-items:center; justify-content:center; padding:0!important;
box-shadow:0 8px 18px -8px rgba(0,0,0,.4); border:0!important;
}
.eyd-fav-wrap .btn:hover{ background:var(--eyd-gold)!important; color:#fff!important; }
.eyd-fav-wrap .text-danger .fa-heart{ color:#e0556a!important; }
/* Carrousel hôtels : padding pour ne pas couper les ombres */
.eyd-featured-swiper{ padding:12px 4px 34px; }
.eyd-featured-swiper .swiper-slide{ height:auto; }
.eyd-featured-swiper .eyd-hcard{ height:100%; }
/* Limiter les destinations sur mobile (4 max) */
@media (max-width:575px){
.eyd-dest-col:nth-child(n+5){ display:none; }
}
/* ---------- Réseaux sociaux (SVG inline, pastilles) ---------- */
.eyd-social a{
width:40px; height:40px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; border:1px solid rgba(226,201,139,.4);
transition:all .2s ease;
}
.eyd-social a:hover{
background:var(--eyd-gold); color:var(--eyd-emerald-deep)!important;
border-color:var(--eyd-gold); transform:translateY(-2px);
}
.eyd-social svg{ display:block; }
/* =====================================================================
EYDENN — IDENTITÉ DE MARQUE (brand board) : logo, header émeraude, footer
===================================================================== */
.eyd-brand{ display:inline-flex; align-items:center; gap:.9rem; text-decoration:none; }
.eyd-brand .eyd-mark svg{ height:36px; width:auto; color:var(--eyd-gold); display:block; }
.eyd-brand .eyd-word{ display:flex; flex-direction:column; line-height:1; border-left:1px solid rgba(201,162,74,.45); padding-left:.9rem; }
.eyd-word-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.6rem; letter-spacing:.2em; color:#fff; }
.eyd-word-tag{ font-family:'Manrope',sans-serif; font-weight:500; font-size:.52rem; letter-spacing:.28em; text-transform:uppercase; color:var(--eyd-gold-soft); margin-top:.32rem; }
/* Header émeraude (brand board) — toutes pages */
header.header-sticky{
background:var(--eyd-emerald)!important;
backdrop-filter:none;
border-bottom:1px solid rgba(201,162,74,.22)!important;
}
header.header-sticky .nav-link{ color:#fff!important; }
header.header-sticky .nav-link:hover{ color:var(--eyd-gold-soft)!important; }
/* Home : transparent sur le hero, émeraude au défilement */
.eyd-home header.header-sticky{ background:transparent!important; border-bottom:0!important; }
.eyd-home header.header-sticky.scrolled{
background:var(--eyd-emerald)!important; border-bottom:1px solid rgba(201,162,74,.22)!important;
}
.eyd-home header.header-sticky .nav-link,
.eyd-home header.header-sticky.scrolled .nav-link{ color:#fff!important; }
/* Bouton « Réserver » (or) */
.eyd-reserve{
background:var(--eyd-gold)!important; color:var(--eyd-emerald-deep)!important;
border:0!important; border-radius:9px; font-family:'Manrope',sans-serif; font-weight:700;
padding:.6rem 1.6rem; letter-spacing:.02em; transition:all .2s;
}
.eyd-reserve:hover{ background:#fff!important; color:var(--eyd-emerald)!important; }
.eyd-reserve:focus-visible{ outline:2px solid var(--eyd-emerald-deep); outline-offset:2px; }
/* Footer : lockup de marque + description + newsletter */
.eyd-foot-brand .eyd-word-name{ color:#fff; }
.eyd-foot-desc{ color:rgba(255,255,255,.6); font-size:.88rem; max-width:32ch; margin-top:1.1rem; }
.eyd-news{ margin-top:.6rem; }
.eyd-news-inp{ display:flex; background:rgba(255,255,255,.06); border:1px solid rgba(226,201,139,.4); border-radius:10px; overflow:hidden; max-width:250px; }
.eyd-news-inp:focus-within{ border-color:var(--eyd-gold); box-shadow:0 0 0 2px rgba(201,162,74,.35); }
.eyd-news-inp input{ background:transparent; border:0; color:#fff; padding:.6rem .85rem; flex:1; outline:none; font-size:.85rem; }
.eyd-news-inp input::placeholder{ color:rgba(255,255,255,.5); }
.eyd-news-inp button{ background:var(--eyd-gold); border:0; color:var(--eyd-emerald-deep); padding:0 1rem; display:flex; align-items:center; }
@media (max-width:575px){
.eyd-brand .eyd-mark svg{ height:30px; }
.eyd-word-name{ font-size:1.35rem; }
}
/* ---------- Logo officiel (header + footer) ---------- */
.eyd-logo{ height:38px!important; width:auto!important; }
.eyd-home header.header-sticky .eyd-logo{ height:42px!important; }
@media (max-width:575px){ .eyd-logo{ height:32px!important; } }
.eyd-foot-logo{ height:54px; width:auto; display:block; margin-bottom:.2rem; }
.eyd-foot-brand{ max-width:340px; }
/* =====================================================================
EYDENN — Header CRÈME (logo vert+or visible) — remplace l'émeraude
===================================================================== */
header.header-sticky{
background:rgba(247,241,232,.95)!important;
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid rgba(201,162,74,.22)!important;
}
header.header-sticky .nav-link{ color:var(--eyd-emerald)!important; }
header.header-sticky .nav-link:hover{ color:var(--eyd-gold)!important; }
.eyd-home header.header-sticky,
.eyd-home header.header-sticky.scrolled{
background:rgba(247,241,232,.95)!important;
border-bottom:1px solid rgba(201,162,74,.22)!important;
}
.eyd-home header.header-sticky .nav-link{ color:var(--eyd-emerald)!important; }
/* Connexion (outline émeraude) + Réserver (or) sur header crème */
header.header-sticky .btn-outline-primary{ border-color:var(--eyd-emerald)!important; color:var(--eyd-emerald)!important; }
header.header-sticky .btn-outline-primary:hover{ background:var(--eyd-emerald)!important; color:#fff!important; }
.eyd-logo{ height:40px!important; }
.eyd-home header.header-sticky .eyd-logo{ height:42px!important; filter:none; }
/* =====================================================================
EYDENN — FICHE HÔTEL (premium, additif)
===================================================================== */
/* Galerie immersive */
.card-grid-lg, .card-grid-sm{ border-radius:16px!important; overflow:hidden; }
.card-grid-lg{ min-height:440px; }
.card-grid-sm{ min-height:215px; }
/* Titre + localisation */
section h1.fs-3{ font-family:'Cormorant Garamond',serif!important; font-size:2.7rem!important; color:var(--eyd-emerald)!important; font-weight:600; }
.btn-light_list .btn-light{ background:#fff!important; border:1px solid #ece3d2!important; color:var(--eyd-emerald)!important; border-radius:10px; }
.btn-light_list .btn-light:hover{ background:var(--eyd-emerald)!important; color:#fff!important; }
/* Badge « Hôtel vérifié par Eydenn » */
.eyd-verified-hotel{
display:inline-flex; align-items:center; gap:.55rem;
background:var(--eyd-emerald); color:#fff;
font-family:'Manrope',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.01em;
padding:.55rem 1rem; border-radius:11px; margin-bottom:1.2rem;
}
.eyd-verified-hotel svg{ color:var(--eyd-gold-soft); }
/* Encart de réservation (sticky) */
.eyd-booking-card{
border:1px solid rgba(201,162,74,.32)!important; border-radius:18px!important;
box-shadow:0 32px 66px -40px rgba(6,67,51,.5)!important; padding:1.7rem!important;
}
.eyd-booking-card .card-title{
font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important;
font-size:2.2rem!important; font-weight:600!important;
}
.eyd-booking-card .list-group-item{ font-size:.9rem; }
.eyd-booking-card .fa-check-circle{ color:var(--eyd-gold)!important; }
.eyd-booking-card .btn-success{
background:transparent!important; border:1.5px solid var(--eyd-emerald)!important; color:var(--eyd-emerald)!important;
}
.eyd-booking-card .btn-success:hover{ background:var(--eyd-emerald)!important; color:#fff!important; }
.eyd-booking-card .btn-primary{ border-radius:11px; }
/* Mobile fiche hôtel */
@media (max-width:768px){
section h1.fs-3{ font-size:2.1rem!important; }
.card-grid-lg{ min-height:280px; }
}
/* =====================================================================
EYDENN — DASHBOARDS (admin / hôtelier / voyageur) — additif
===================================================================== */
.sidebar.bg-white{ background:#fff!important; border-right:1px solid #ece3d2!important; }
.sidebar .navbar-brand-item, .sidebar .eyd-logo{ height:34px!important; }
/* barre du haut */
.user_admin_nav{ background:rgba(247,241,232,.96)!important; border-bottom:1px solid rgba(201,162,74,.2)!important; }
/* menu : item actif en doré */
.sidebar-content .nav-link.active,
.sidebar-content .nav-link[aria-current="page"]{ color:var(--eyd-gold)!important; font-weight:700; }
.sidebar-content .nav-link:hover{ color:var(--eyd-emerald)!important; }
.sidebar-content .nav-link.active i,
.sidebar-content .nav-link:hover i{ color:var(--eyd-gold)!important; }
/* ---------------------------------------------------------------------
BARRE LATÉRALE DÉFILANTE (desktop ≥ 1200px)
La barre est fixée en hauteur 100vh ; sans overflow, les sections du
bas (Partenaires, Système…) étaient coupées et inaccessibles. On rend
la LISTE défilante tout en gardant le logo fixe en haut. Le dernier
élément reste atteignable grâce au padding-bottom.
--------------------------------------------------------------------- */
@media (min-width: 1200px) {
.sidebar.navbar-expand-xl { overflow: hidden !important; }
/* La zone offcanvas occupe l'espace restant sous le logo, sans dépasser. */
.sidebar.navbar-expand-xl .offcanvas {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
}
/* Le corps du menu défile verticalement quand il dépasse l'écran. */
.sidebar.navbar-expand-xl .offcanvas-body.sidebar-content {
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 2rem !important; /* le dernier item n'est jamais collé au bord */
}
/* Barre de défilement discrète, aux couleurs Eydenn. */
.sidebar.navbar-expand-xl .offcanvas-body.sidebar-content::-webkit-scrollbar { width: 6px; }
.sidebar.navbar-expand-xl .offcanvas-body.sidebar-content::-webkit-scrollbar-thumb {
background: rgba(201,162,74,.35); border-radius: 3px;
}
.sidebar.navbar-expand-xl .offcanvas-body.sidebar-content:hover::-webkit-scrollbar-thumb {
background: rgba(201,162,74,.6);
}
}
/* ---------------------------------------------------------------------
BARRE LATÉRALE MOBILE/TABLETTE (< 1200px) — correctif responsive 09/2026
Le thème place ce conteneur hors écran via `left:-300px`, mais il
s'auto-dimensionne sur le contenu de son offcanvas interne (mesuré même
en visibility:hidden) : ~347px de large en pratique, dépassant le
décalage prévu de ~47px. Cette bande restait donc visible/cliquable
dans l'angle supérieur gauche et interceptait le bouton d'ouverture du
menu mobile (nav "…", data-bs-target="#navbarTopContent") avant même
qu'il ait pu être atteint. Contraindre explicitement la largeur au lieu
de la laisser s'auto-dimensionner corrige ce débordement sans toucher à
l'offcanvas lui-même (position fixed, indépendante de cette largeur).
--------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
.sidebar.navbar-expand-xl {
width: 300px !important;
max-width: 300px !important;
overflow: hidden !important;
}
/* OverlayScrollbars (assets/vendor/overlay-scrollbar) impose
`position:absolute!important` via sa classe `.os-host` sur l'élément
qu'il gère — ici l'offcanvas lui-même (`custom-scrollbar`). Résultat :
une fois « ouvert », l'offcanvas se positionne par rapport à son
parent `.sidebar` (resté hors écran à left:-300px) au lieu du
viewport, et reste donc invisible malgré la classe `.show`. On lui
rend sa position `fixed` d'origine (comportement standard Bootstrap
offcanvas), sans toucher aux autres éléments gérés par OverlayScrollbars
ailleurs sur le site (sélecteur scopé à cet id précis).
*/
#offcanvasSidebar.os-host {
position: fixed !important;
}
}
/* cartes & stats du contenu admin */
.content_admin .card,
.main_pro .card{ border:1px solid #ece3d2!important; border-radius:14px!important; }
.content_admin h1,.content_admin h2,.content_admin h3,
.main_pro h1,.main_pro h2,.main_pro h3{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; }
/* tableaux */
.table > :not(caption) > * > *{ border-color:#f0e8d8; }
.badge.bg-success{ background:var(--eyd-emerald)!important; color:#F7F1E8!important; }
.badge.bg-warning{ background:var(--eyd-gold)!important; color:var(--eyd-emerald-deep)!important; }
/* Type d'établissement : cartes cliquables (façon Airbnb) */
.eyd-type-card{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:.25rem; padding:1rem .6rem; border:1.5px solid #e7dcc4; border-radius:14px;
background:#fff; cursor:pointer; transition:all .15s ease; min-height:120px;
}
.eyd-type-card:hover{ border-color:var(--eyd-gold); box-shadow:0 10px 24px -16px rgba(6,67,51,.4); }
.eyd-type-card .bi{ font-size:1.7rem; color:var(--eyd-gold); }
.eyd-type-card .eyd-type-name{ font-weight:700; color:var(--eyd-emerald); font-size:.95rem; line-height:1.2; }
.eyd-type-card .eyd-type-desc{ font-size:.72rem; color:#6b7280; line-height:1.3; }
.btn-check:checked + .eyd-type-card{
border-color:var(--eyd-emerald); background:#f2fbf6; box-shadow:0 0 0 2px var(--eyd-emerald) inset;
}
.btn-check:focus-visible + .eyd-type-card{ outline:2px solid var(--eyd-gold); outline-offset:2px; }
/* Prix « à partir de » du bandeau de réservation (fiche hôtel UNIQUEMENT) :
chiffres nets (police système, alignés). Scopé à .eyd-booking-card pour ne
PAS s'appliquer aux cartes hôtel de l'accueil/destinations, qui gardent
leur police Manrope cohérente avec le reste de la carte (voir plus haut) —
la règle non scopée écrasait cette police et provoquait un chevauchement
avec le lien « Voir l'offre » à côté. */
.eyd-booking-card .card-title.eyd-price{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
font-weight: 700 !important;
letter-spacing: .2px;
font-size: 1.9rem !important;
line-height: 1.1;
white-space: nowrap; /* le montant + le symbole restent sur UNE ligne */
color: var(--eyd-emerald) !important;
}
/* Pastille « moyen de paiement sur place » — toujours lisible (fond sable clair,
texte émeraude), indépendante des surcharges .badge globales. */
.eyd-pm-pill{
display:inline-block;
background:#F1E9D6;
color:#064333;
border:1px solid #E0D3B0;
border-radius:999px;
padding:.18em .7em;
font-size:.8rem;
font-weight:600;
line-height:1.4;
margin:.1rem .15rem 0 0;
}
/* =====================================================================
EYDENN — Home v3 : confiance, voir l'offre, esprit tranquille, CTA final
===================================================================== */
/* Bandeau de confiance (sous la recherche) */
.eyd-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.6rem; margin-top:1.3rem; }
.eyd-trust span{ display:inline-flex; align-items:center; gap:.5rem; color:#5b6b62; font-family:'Manrope',sans-serif; font-weight:600; font-size:.92rem; }
.eyd-trust svg{ color:var(--eyd-gold); }
/* Lien « Voir l'offre » dans la carte */
.eyd-see-offer{ color:var(--eyd-emerald); font-family:'Manrope',sans-serif; font-weight:700; font-size:.92rem; text-decoration:none; white-space:nowrap; }
.eyd-see-offer:hover{ color:var(--eyd-gold); }
/* Bouton « Voir tous les hébergements » (or) */
.eyd-see-all{ background:var(--eyd-gold)!important; color:var(--eyd-emerald-deep)!important; border:0!important; border-radius:100px; font-family:'Manrope',sans-serif; font-weight:700; padding:.9rem 2.3rem; }
.eyd-see-all:hover{ background:var(--eyd-emerald)!important; color:#fff!important; }
/* Voyagez l'esprit tranquille — cartes blanches */
.eyd-peace{ background:var(--eyd-cream); padding:5rem 0; }
.eyd-peace-card{ background:#fff; border:1px solid #ece3d2; border-radius:18px; padding:2.4rem 1.5rem; text-align:center; height:100%; box-shadow:0 24px 50px -40px rgba(6,67,51,.4); transition:transform .3s ease; }
.eyd-peace-card:hover{ transform:translateY(-5px); }
.eyd-peace-ico{ width:64px; height:64px; margin:0 auto 1.3rem; border-radius:50%; background:var(--eyd-emerald); color:var(--eyd-gold-soft); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.eyd-peace-card h5{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.5rem!important; margin-bottom:.6rem; }
.eyd-peace-card p{ color:var(--eyd-muted); font-size:.92rem; margin:0; }
/* Bloc final CTA (image + overlay émeraude) */
.eyd-final-cta{ position:relative; border-radius:24px; overflow:hidden; background-size:cover; background-position:center; }
.eyd-final-cta:before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(6,67,51,.9),rgba(3,41,31,.68)); }
.eyd-final-inner{ position:relative; z-index:2; text-align:center; padding:5rem 1.5rem; }
.eyd-final-inner h2{ color:#fff!important; font-size:3rem!important; margin-bottom:1rem; }
.eyd-final-inner p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 2rem; font-size:1.1rem; }
.eyd-final-btn{ display:inline-block; background:var(--eyd-gold); color:var(--eyd-emerald-deep)!important; font-family:'Manrope',sans-serif; font-weight:700; padding:1rem 2.6rem; border-radius:100px; text-decoration:none; transition:all .25s; }
.eyd-final-btn:hover{ background:#fff; transform:translateY(-2px); }
@media (max-width:768px){
.eyd-final-inner h2{ font-size:2.1rem!important; }
.eyd-trust{ gap:.7rem 1.4rem; }
.eyd-trust span{ font-size:.82rem; }
.eyd-peace{ padding:3.5rem 0; }
}
/* =====================================================================
EYDENN — Home v3.1 : carte plus petite, destinations photos, témoignages
===================================================================== */
/* Carte d'Afrique plus compacte & mobile-friendly
Le viewBox de map2.svg cadre désormais précisément le continent : plus
besoin de zoomer/décaler la carte à coups de transform — un simple
width:100% suffit à la remplir sans zone blanche. Ces règles neutralisent
le scale/position hérité de resources/css/app.css (.africa-map-container
svg), qui reste chargé après ce fichier et gagnerait sinon à spécificité
égale. */
.eyd-map{ max-width:460px; width:100%; margin:0 auto; }
.eyd-map svg{ transform:none!important; top:0!important; left:0!important; width:100%!important; height:auto!important; }
@media (max-width:768px){
.eyd-map{ max-width:340px; }
}
/* Titre « Destinations populaires » */
.eyd-pop-title{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.9rem!important; text-align:center; margin:3rem 0 1.8rem!important; }
/* Titre de chaque bloc pays des carrousels « Explorez nos séjours par destination » */
.eyd-country-h3{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.6rem!important; }
/* Témoignages */
.eyd-testi{ background:var(--eyd-cream); padding:5rem 0; }
.eyd-testi-card{ background:#fff; border:1px solid #ece3d2; border-radius:18px; padding:2.2rem; height:100%; box-shadow:0 24px 50px -40px rgba(6,67,51,.4); }
.eyd-testi-stars{ color:var(--eyd-gold); font-size:1.05rem; margin-bottom:1rem; letter-spacing:2px; }
.eyd-testi-quote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.28rem; line-height:1.5; color:var(--eyd-emerald); margin-bottom:1.4rem; }
.eyd-testi-author strong{ display:block; font-family:'Manrope',sans-serif; color:var(--eyd-ink); font-weight:700; }
.eyd-testi-author span{ color:var(--eyd-muted); font-size:.86rem; }
@media (max-width:768px){ .eyd-testi{ padding:3.5rem 0; } }
/* =====================================================================
EYDENN — PAGE RÉSULTATS DE RECHERCHE (premium, additif)
===================================================================== */
.search_wrapper .card.shadow{
border:1px solid #ece3d2!important; border-radius:16px!important;
box-shadow:0 20px 44px -32px rgba(6,67,51,.4)!important;
transition:transform .25s ease, box-shadow .25s ease;
}
.search_wrapper .card.shadow:hover{ transform:translateY(-3px); box-shadow:0 28px 56px -32px rgba(6,67,51,.5)!important; }
.search_wrapper .card.shadow .card-title,
.search_wrapper .result_title,
.search_wrapper .card.shadow .card-title a{
font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-weight:600;
}
.search_wrapper .card.shadow h5.fw-bold{ color:var(--eyd-gold)!important; font-family:'Manrope',sans-serif!important; }
.h_square_img_lg, .h_square_img{ border-radius:12px!important; }
/* filtres */
.filter_card{ border:1px solid #ece3d2!important; border-radius:16px!important; background:#fff!important; padding:1.2rem; }
.filter_card h5, .filter_card h6{ color:var(--eyd-emerald)!important; }
.filter_card .form-check-input:checked{ background-color:var(--eyd-emerald); border-color:var(--eyd-emerald); }
/* coeur favori sur résultats */
.search_wrapper .card_fav .btn{ border-radius:50%!important; background:rgba(255,255,255,.94)!important; color:var(--eyd-emerald)!important; }
.search_wrapper .card_fav .btn:hover{ background:var(--eyd-gold)!important; color:#fff!important; }
/* =====================================================================
EYDENN — Correctifs : titre bloc hôte (lisibilité), bloc resserré, carte ordi
===================================================================== */
/* Bloc « Devenez hôte » : titre BLANC (plus de vert sur vert) + resserré */
.eyd-host-grid .eyd-host-left h2{ color:#fff!important; font-size:2.5rem!important; }
.eyd-host-left p{ color:rgba(255,255,255,.85)!important; }
.eyd-host-left{ padding:3.2rem 3rem!important; }
@media (max-width:768px){
.eyd-host-grid .eyd-host-left h2{ font-size:2rem!important; }
.eyd-host-left{ padding:2.4rem 1.6rem!important; }
}
/* Carte d'Afrique : plus grande sur ORDINATEUR (mobile inchangé) */
@media (min-width:992px){
.eyd-map{ max-width:600px; }
}
/* =====================================================================
EYDENN — CONNEXION / INSCRIPTION (premium, additif)
===================================================================== */
.bglogin{ position:relative; }
.bglogin .bg_login{ filter:saturate(.9) brightness(.85); }
.bglogin:before{ content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(120deg,rgba(6,67,51,.78),rgba(3,41,31,.6)); }
.bglogin .container{ position:relative; z-index:2; }
.bglogin .bg-mode{
background:#fff!important; border:1px solid rgba(201,162,74,.3)!important;
border-radius:20px!important; box-shadow:0 50px 100px -50px rgba(0,0,0,.6)!important;
}
.logo_login{ text-align:center; margin-bottom:1.6rem; }
.logo_login img{ height:46px!important; width:auto; }
.bglogin h1.h3{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:2rem!important; }
.bglogin .form-control{ border:1px solid #e7ddca!important; border-radius:11px!important; }
.bglogin .form-control:focus{ border-color:var(--eyd-gold)!important; box-shadow:0 0 0 .2rem rgba(201,162,74,.15)!important; }
.bglogin .form-floating > label{ color:#9aa39c; }
.bglogin .btn-primary{ width:100%; padding:.85rem; border-radius:11px; }
.bglogin .form-check-input:checked{ background-color:var(--eyd-emerald); border-color:var(--eyd-emerald); }
.bglogin a{ color:var(--eyd-emerald); }
.bglogin a:hover{ color:var(--eyd-gold); }
/* =====================================================================
EYDENN — RÉSERVATION (booking create/confirmation) — additif
===================================================================== */
.card.shadow{ border:1px solid #ece3d2!important; border-radius:16px!important; box-shadow:0 22px 48px -34px rgba(6,67,51,.4)!important; }
.card-header .card-title, .card.shadow .card-title{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; }
/* Réassurance paiement sécurisé */
/* Liste verticale (4 lignes icône+texte, cf. hotels/show.blade.php) — pas
une rangée horizontale : le display:flex d'origine (rangée centrée,
pensée pour un ancien balisage à icônes SVG isolées) forçait les 4
à tenir sur UNE seule ligne, largeur minimale non compressible en
dessous de leur contenu -> débordement horizontal de toute la carte de
réservation en dessous d'environ 992px (masqué sur desktop large où les
4 lignes tenaient still par hasard). Chaque gère déjà son propre
alignement icône/texte via d-flex ; l'UL n'a plus besoin d'être flex.
Audit responsive du 13/09/2026. */
.eyd-reassure{ color:var(--eyd-muted); font-family:'Manrope',sans-serif; font-size:.82rem; margin-top:.85rem; }
.eyd-reassure svg{ color:var(--eyd-gold); flex-shrink:0; }
/* Confirmation : succès */
.card.shadow .card-body.text-center h1.card-title{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; }
/* =====================================================================
EYDENN — PAGES LÉGALES (.cgu : confidentialité, CGU) — additif
===================================================================== */
.cgu .container{ max-width:880px; }
.cgu h2{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:2.7rem!important; margin-bottom:.6rem; }
.cgu h4{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.45rem!important; margin-top:2.2rem!important; margin-bottom:.6rem; position:relative; padding-left:1rem; }
.cgu h4:before{ content:""; position:absolute; left:0; top:.25em; bottom:.25em; width:3px; background:var(--eyd-gold); border-radius:2px; }
.cgu p, .cgu li{ color:#43504a; line-height:1.85; }
.cgu ul{ padding-left:1.2rem; }
.cgu li{ margin-bottom:.4rem; }
.cgu strong{ color:var(--eyd-emerald); }
.cgu a{ color:var(--eyd-gold); }
.cgu > .container > p:first-of-type{ color:var(--eyd-muted); font-style:italic; }
/* =====================================================================
EYDENN — PAGE DESTINATION ÉDITORIALE (par pays)
===================================================================== */
.eyd-dest-hero{ position:relative; min-height:54vh; display:flex; align-items:flex-end; background:#03291F; background-size:cover; background-position:center; }
.eyd-dest-hero:before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,41,31,.35) 0%,rgba(3,41,31,.55) 50%,rgba(3,41,31,.9) 100%); }
.eyd-dest-hero-inner{ position:relative; z-index:2; padding:6rem 0 3rem; }
.eyd-dest-hero .eyd-eyebrow{ color:var(--eyd-gold-soft); letter-spacing:.4em; text-transform:uppercase; font-family:'Manrope',sans-serif; font-weight:600; font-size:.75rem; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
.eyd-dest-hero .eyd-eyebrow:before{ content:""; width:40px; height:1px; background:var(--eyd-gold); }
.eyd-dest-hero h1{ color:#fff!important; font-family:'Cormorant Garamond',serif!important; font-size:4.2rem!important; font-weight:600; line-height:1; margin-bottom:.6rem; }
.eyd-dest-hero p{ color:rgba(255,255,255,.88); font-size:1.15rem; margin:0; }
@media (max-width:768px){
.eyd-dest-hero{ min-height:42vh; }
.eyd-dest-hero-inner{ padding:5rem 0 2.2rem; }
.eyd-dest-hero h1{ font-size:2.7rem!important; }
}
/* =====================================================================
EYDENN — Niveaux de vérification (badge dynamique)
===================================================================== */
.eyd-vbadge{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Manrope',sans-serif; font-weight:700; font-size:.82rem; padding:.55rem 1rem; border-radius:11px; line-height:1; }
.eyd-vbadge svg{ flex-shrink:0; }
.eyd-lvl-listed{ background:rgba(101,115,107,.14); color:#4d5a52; }
.eyd-lvl-listed svg{ color:#8a978f; }
.eyd-lvl-verified{ background:var(--eyd-emerald); color:#fff; }
.eyd-lvl-verified svg{ color:var(--eyd-gold-soft); }
.eyd-lvl-selected{ background:var(--eyd-gold); color:var(--eyd-emerald-deep); }
.eyd-lvl-selected svg{ color:var(--eyd-emerald); }
.eyd-lvl-signature{ background:linear-gradient(120deg,#d8b25c,#b8862f); color:var(--eyd-emerald-deep); box-shadow:0 8px 18px -8px rgba(201,162,74,.65); }
.eyd-lvl-signature svg{ color:var(--eyd-emerald); }
/* ligne « vérifié » dans les cartes, teintée selon le niveau */
.eyd-verified-line.lvl-selected, .eyd-verified-line.lvl-signature{ color:#a6802f; }
.eyd-verified-line.lvl-listed{ color:#5b6b62; }
.eyd-verified-line.lvl-listed i{ color:#8a978f!important; }
/* =====================================================================
EYDENN — Suggestions voyageur (v1 intelligentes)
===================================================================== */
.eyd-suggest{ margin-top:1rem; }
.eyd-suggest h3{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.8rem!important; }
.eyd-ai-chip{ display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(120deg,#d8b25c,#b8862f); color:var(--eyd-emerald-deep); font-family:'Manrope',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.04em; padding:.35rem .8rem; border-radius:100px; }
.eyd-suggest-card{ display:block; background:#fff; border:1px solid #ece3d2; border-radius:16px; overflow:hidden; text-decoration:none; box-shadow:0 18px 40px -32px rgba(6,67,51,.4); transition:transform .25s ease, box-shadow .25s ease; height:100%; }
.eyd-suggest-card:hover{ transform:translateY(-4px); box-shadow:0 26px 52px -32px rgba(6,67,51,.5); }
.eyd-suggest-img{ height:150px; overflow:hidden; }
.eyd-suggest-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.eyd-suggest-card:hover .eyd-suggest-img img{ transform:scale(1.06); }
.eyd-suggest-body{ padding:.9rem 1rem 1.1rem; }
.eyd-suggest-body .loc{ font-family:'Manrope',sans-serif; font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--eyd-muted); margin-bottom:.2rem; }
.eyd-suggest-body h6{ font-family:'Cormorant Garamond',serif!important; color:var(--eyd-emerald)!important; font-size:1.25rem!important; margin:0; }
/* =====================================================================
EYDENN — Statuts de réservation (machine d'état) — badges
===================================================================== */
.eyd-bk-badge{ display:inline-block; font-family:'Manrope',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.02em; padding:.32rem .7rem; border-radius:8px; line-height:1.2; white-space:nowrap; }
.eyd-bk-draft{ background:#eceae4; color:#6b6257; }
.eyd-bk-pending{ background:rgba(201,162,74,.16); color:#9a7a26; }
.eyd-bk-paid{ background:rgba(147,201,174,.22); color:#2f6b50; }
.eyd-bk-confirmed{ background:rgba(6,67,51,.12); color:var(--eyd-emerald); }
.eyd-bk-completed{ background:var(--eyd-emerald); color:#fff; }
.eyd-bk-cancelled{ background:rgba(176,58,58,.12); color:#a33; }
.eyd-bk-refunded{ background:rgba(120,90,160,.14); color:#6b4f8a; }
.eyd-bk-dispute{ background:#b03a3a; color:#fff; }
.eyd-bk-noshow{ background:#5b6b62; color:#fff; }
/* ============================================================
AVIS / REVIEWS (Phase 2)
============================================================ */
.eyd-reviews-wrap{ max-width:920px; margin:0 auto; }
.eyd-reviews-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
border-bottom:1px solid rgba(6,67,51,.12); padding-bottom:16px; margin-bottom:8px; }
.eyd-reviews-title{ font-family:'Cormorant Garamond',serif; font-size:1.9rem; color:var(--eyd-emerald); margin:0; }
.eyd-reviews-score{ display:flex; align-items:center; gap:10px; }
.eyd-reviews-num{ font-size:1.8rem; font-weight:700; color:var(--eyd-emerald); }
.eyd-reviews-stars span{ color:#d9d2c4; font-size:1.05rem; }
.eyd-reviews-stars span.on{ color:var(--eyd-gold); }
.eyd-reviews-count{ color:#6b7670; font-size:.92rem; }
.eyd-reviews-new{ color:#6b7670; font-style:italic; }
.eyd-review-form-card{ background:var(--eyd-cream,#F7F1E8); border:1px solid rgba(201,162,74,.3);
border-radius:16px; padding:22px; margin:22px 0; }
.eyd-review-form-title{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--eyd-emerald); margin:0 0 14px; }
.eyd-rate-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.eyd-rate-label{ display:block; font-weight:600; color:var(--eyd-deep,#03291F); margin-bottom:4px; font-size:.92rem; }
.eyd-stars-input{ display:inline-flex; gap:4px; cursor:pointer; }
.eyd-stars-input .eyd-star{ font-size:1.5rem; color:#d9d2c4; transition:color .12s; line-height:1; }
.eyd-stars-input .eyd-star.on{ color:var(--eyd-gold); }
.eyd-review-hint{ font-size:.82rem; color:#7a8580; margin:8px 0 0; }
.eyd-btn-gold{ background:var(--eyd-gold,#C9A24A); color:#fff!important; border:none; font-weight:600;
border-radius:10px; padding:9px 22px; }
.eyd-btn-gold:hover{ background:var(--eyd-emerald,#064333); color:#fff; }
.eyd-review-list{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.eyd-review-item{ border:1px solid rgba(6,67,51,.1); border-radius:14px; padding:18px; background:#fff; }
.eyd-review-meta{ display:flex; align-items:center; gap:12px; }
.eyd-review-avatar{ width:42px; height:42px; border-radius:50%; background:var(--eyd-emerald,#064333);
color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
.eyd-review-author{ font-weight:600; color:var(--eyd-deep,#03291F); }
.eyd-review-date{ font-size:.82rem; color:#8a948f; }
.eyd-review-stars{ margin-left:auto; }
.eyd-review-stars span{ color:#d9d2c4; }
.eyd-review-stars span.on{ color:var(--eyd-gold,#C9A24A); }
.eyd-review-comment{ margin:12px 0 0; color:#3c4a44; line-height:1.6; }
.eyd-review-reply{ margin-top:12px; padding:12px 14px; background:rgba(6,67,51,.05);
border-left:3px solid var(--eyd-gold,#C9A24A); border-radius:8px; }
.eyd-review-reply-label{ display:block; font-weight:700; color:var(--eyd-emerald,#064333); font-size:.85rem; margin-bottom:3px; }
.eyd-review-reply-form{ margin-top:12px; }
@media (max-width:575px){
.eyd-reviews-title{ font-size:1.55rem; }
.eyd-reviews-num{ font-size:1.5rem; }
}
.eyd-new-badge{ display:inline-block; background:rgba(201,162,74,.15); color:var(--eyd-gold,#C9A24A);
font-weight:600; font-size:.74rem; padding:2px 9px; border-radius:20px; letter-spacing:.02em; }
/* ============================================================
TICKETS DE SUPPORT
============================================================ */
.eyd-ticket-thread{ display:flex; flex-direction:column; gap:14px; }
.eyd-ticket-msg{ border:1px solid rgba(6,67,51,.1); border-radius:14px; padding:14px 16px; max-width:88%; }
.eyd-ticket-msg.user{ align-self:flex-start; background:#fff; }
.eyd-ticket-msg.staff{ align-self:flex-end; background:rgba(6,67,51,.06); border-color:rgba(6,67,51,.18); }
.eyd-ticket-msg-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.eyd-ticket-msg.staff .eyd-ticket-msg-head strong{ color:#064333; }
.eyd-ticket-msg-body{ color:#3c4a44; line-height:1.6; white-space:normal; }
@media (max-width:575px){ .eyd-ticket-msg{ max-width:100%; } }
/* ============================================================
BANDEAU MODE DÉMONSTRATION
============================================================ */
.eyd-demo-banner{
display:flex; align-items:center; justify-content:center; gap:9px;
background:linear-gradient(90deg,var(--eyd-gold,#C9A24A),var(--eyd-gold-soft,#E2C98B));
color:#3a2e12; font-size:.84rem; font-weight:600; letter-spacing:.02em;
padding:7px 14px; text-align:center; line-height:1.3;
}
.eyd-demo-dot{
width:8px; height:8px; border-radius:50%; background:#6b5318; flex:0 0 auto;
animation:eydDemoPulse 1.6s ease-in-out infinite;
}
@keyframes eydDemoPulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
@media (max-width:575px){ .eyd-demo-banner{ font-size:.76rem; padding:6px 10px; } }
/* ============================================================
BANDEAU TEASER (avant lancement complet)
============================================================ */
.eyd-teaser-banner{
display:flex; align-items:center; justify-content:center; gap:12px;
flex-wrap:wrap;
background:linear-gradient(90deg,#03291F,#064333);
color:#E8D9A8; font-size:.84rem; font-weight:600; letter-spacing:.03em;
padding:8px 14px; text-align:center; line-height:1.3;
}
.eyd-teaser-spark{ color:#C9A24A; flex:0 0 auto; }
.eyd-teaser-form{ display:flex; gap:6px; flex:0 0 auto; }
.eyd-teaser-form input[type="email"]{
border:1px solid rgba(232,217,168,.4); background:rgba(255,255,255,.08);
color:#fff; border-radius:20px; padding:4px 12px; font-size:.78rem;
min-width:180px;
}
.eyd-teaser-form input[type="email"]::placeholder{ color:rgba(232,217,168,.7); }
.eyd-teaser-form input[type="email"]:focus{ outline:2px solid #C9A24A; outline-offset:1px; }
.eyd-teaser-form button{
border:none; background:#C9A24A; color:#03291F; font-weight:700;
border-radius:20px; padding:4px 14px; font-size:.78rem; cursor:pointer;
white-space:nowrap;
}
.eyd-teaser-form button:hover{ background:#E2C98B; }
.eyd-teaser-thanks{ font-weight:600; color:#C9A24A; flex:0 0 auto; }
@media (max-width:575px){
.eyd-teaser-banner{ font-size:.76rem; padding:8px 10px; }
.eyd-teaser-form input[type="email"]{ min-width:130px; }
}
/* ============================================================
STATUTS HÔTEL (machine d'état — contrôle qualité)
============================================================ */
.eyd-hs-badge{ display:inline-block; padding:3px 11px; border-radius:20px; font-size:.76rem; font-weight:600; letter-spacing:.01em; }
.eyd-hs-draft{ background:#eceff1; color:#5b6b62; }
.eyd-hs-pending{ background:rgba(201,162,74,.16); color:#8a6d1f; }
.eyd-hs-corrections{ background:rgba(214,140,40,.16); color:#a8631a; }
.eyd-hs-active{ background:rgba(6,67,51,.12); color:#064333; }
.eyd-hs-paused{ background:rgba(120,90,160,.14); color:#6b4f8a; }
.eyd-hs-suspended{ background:rgba(176,58,58,.14); color:#a33; }
.eyd-hs-banned{ background:#7a1f1f; color:#fff; }
.eyd-hs-rejected{ background:#b03a3a; color:#fff; }
/* ==========================================================================
EYDENN — EN-TÊTE & PIED DE PAGE (conformes à la charte graphique)
Bloc final : fait autorité sur les anciens styles d'en-tête.
========================================================================== */
/* ---------- EN-TÊTE : bande émeraude ---------- */
header.header-sticky{
background:var(--eyd-emerald)!important;
border-bottom:1px solid rgba(201,162,74,.28)!important;
box-shadow:0 2px 18px rgba(3,41,31,.18)!important;
}
header.header-sticky .nav-link,
header.header-sticky .navbar-nav .nav-link,
header.header-sticky .dropdown-toggle,
header.header-sticky .navbar-toggler,
header.header-sticky .navbar-toggler .small{
color:var(--eyd-cream)!important;
}
header.header-sticky .nav-link:hover,
header.header-sticky .dropdown-toggle:hover{ color:var(--eyd-gold)!important; }
header.header-sticky .nav-link.active{ color:var(--eyd-gold)!important; }
/* Logo clair, bien dimensionné */
header.header-sticky .eyd-logo{ height:46px!important; width:auto!important; filter:none!important; }
@media (max-width:575px){ header.header-sticky .eyd-logo{ height:36px!important; } }
/* Bouton « Réserver » / « S'inscrire » : or, texte vert profond */
header.header-sticky .eyd-reserve,
header.header-sticky .btn-primary{
background:var(--eyd-gold)!important;
border-color:var(--eyd-gold)!important;
color:var(--eyd-emerald-deep)!important;
font-weight:600!important;
border-radius:10px!important;
}
header.header-sticky .eyd-reserve:hover,
header.header-sticky .btn-primary:hover{
background:var(--eyd-gold-soft)!important; border-color:var(--eyd-gold-soft)!important;
color:var(--eyd-emerald-deep)!important;
}
/* Bouton « Connexion » : contour crème */
header.header-sticky .btn-outline-primary{
border-color:rgba(247,241,232,.7)!important; color:var(--eyd-cream)!important; border-radius:10px!important;
}
header.header-sticky .btn-outline-primary:hover{ background:var(--eyd-cream)!important; color:var(--eyd-emerald)!important; }
/* Hamburger mobile en clair */
header.header-sticky .navbar-toggler-animation span{ background:var(--eyd-cream)!important; }
/* ---------- ACCUEIL : transparent au-dessus du hero, émeraude au scroll ---------- */
.eyd-home header.header-sticky{
background:transparent!important;
border-bottom:0!important;
box-shadow:none!important;
}
.eyd-home header.header-sticky.scrolled{
background:var(--eyd-emerald)!important;
border-bottom:1px solid rgba(201,162,74,.28)!important;
box-shadow:0 2px 18px rgba(3,41,31,.18)!important;
}
.eyd-home header.header-sticky .nav-link,
.eyd-home header.header-sticky.scrolled .nav-link{ color:var(--eyd-cream)!important; }
.eyd-home header.header-sticky .eyd-logo{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))!important; }
.eyd-home header.header-sticky.scrolled .eyd-logo{ filter:none!important; }
/* ---------- MENU MOBILE : panneau déroulant lisible ----------
Le thème donne au panneau déroulant (navbar-collapse) un fond BLANC
(var(--bs-body-bg)). Or nos liens sont crème → invisibles sur blanc.
On force ici le panneau ouvert en émeraude, avec liens crème lisibles,
sur mobile/tablette (point de bascule de navbar-expand-lg : < 992px,
relevé depuis 576px lors de la refonte nav 09/2026 pour éviter un
débordement du menu en ligne à largeur tablette). --}} */
@media (max-width:991.98px){
header.header-sticky .navbar-collapse{
background:var(--eyd-emerald)!important;
border-top:1px solid rgba(201,162,74,.35)!important;
box-shadow:0 12px 30px rgba(3,41,31,.28)!important;
border-radius:0 0 14px 14px;
}
/* Accueil : le panneau ouvert est aussi émeraude (le hero transparent
laisserait sinon des liens crème illisibles). */
.eyd-home header.header-sticky .navbar-collapse{
background:var(--eyd-emerald)!important;
}
/* #navbarCollapse (ID) ajouté au sélecteur : un bloc plus bas dans ce
fichier ("VERT ÉMERAUDE sur tous les états", non scoped par media
query) atteint la même spécificité par classes sur .eyd-home ...
:not(.scrolled) et gagne l'égalité par ordre d'apparition (il est
placé après celui-ci) — texte émeraude sur fond émeraude, invisible.
Bug préexistant, indépendant de la refonte nav, simplement mis en
évidence en testant le panneau ouvert sur la page d'accueil. Un ID
dépasse toujours un nombre quelconque de classes : ceinture de
sécurité définitive contre toute règle future de spécificité égale. */
header.header-sticky #navbarCollapse .nav-link,
.eyd-home header.header-sticky #navbarCollapse .nav-link{
color:var(--eyd-cream)!important;
}
header.header-sticky #navbarCollapse .nav-link:hover,
header.header-sticky #navbarCollapse .nav-link.active{
color:var(--eyd-gold)!important;
}
/* Séparateurs de lignes en doré discret plutôt qu'en noir */
header.header-sticky .navbar-collapse .navbar-nav .nav-item{
border-bottom:1px solid rgba(201,162,74,.18)!important;
}
}
/* ---------- PIED DE PAGE : vert profond (charte) ---------- */
footer.bg-primary{
background:var(--eyd-emerald-deep)!important;
border-top:3px solid var(--eyd-gold)!important;
}
footer.bg-primary h5{
color:var(--eyd-cream)!important;
font-family:'Cormorant Garamond',Georgia,serif!important;
letter-spacing:.02em;
}
footer.bg-primary a.text-light,
footer.bg-primary .text-light{ color:rgba(247,241,232,.78)!important; transition:color .2s; }
footer.bg-primary a.text-light:hover{ color:var(--eyd-gold)!important; }
footer.bg-primary hr{ border-color:rgba(247,241,232,.14)!important; }
/* ============================================================
CORRECTIF CONTRASTE MENU — autorité finale.
Résout les règles .nav-link contradictoires plus haut (blanc /
émeraude selon l'état) qui rendaient le menu illisible
(texte émeraude sur fond vert). Placé en fin de fichier pour
gagner la cascade. Garantit la lisibilité dans chaque état.
============================================================ */
/* Défaut (toutes pages hors accueil) : en-tête clair sable → texte émeraude. */
header.header-sticky .nav-link{ color:var(--eyd-emerald)!important; }
header.header-sticky .nav-link:hover,
header.header-sticky .nav-link.active{ color:var(--eyd-gold)!important; }
/* Accueil, en-tête transparent posé sur le hero : texte CRÈME + ombre de lisibilité. */
.eyd-home header.header-sticky:not(.scrolled) .nav-link{
color:var(--eyd-cream)!important;
text-shadow:0 1px 4px rgba(3,41,31,.6);
}
/* Accueil après défilement (en-tête devenu clair) : retour à l'émeraude. */
.eyd-home header.header-sticky.scrolled .nav-link{ color:var(--eyd-emerald)!important; text-shadow:none; }
/* Menu MOBILE/TABLETTE déplié (fond émeraude, < 992px) : texte crème lisible,
quelle que soit la page. Sélecteur volontairement très spécifique (+ID
#navbarCollapse, voir bloc plus haut) + couleurs littérales pour ne
pouvoir être écrasé par aucune règle plus haut — y compris le bloc
"VERT ÉMERAUDE sur tous les états" plus bas dans ce fichier, qui sans
l'ID atteignait la même spécificité sur .eyd-home ... :not(.scrolled)
et gagnait par ordre d'apparition. */
@media (max-width:991.98px){
header.header-sticky .navbar-collapse{ background:#064333 !important; }
header.header-sticky #navbarCollapse .navbar-nav .nav-item .nav-link,
header.header-sticky #navbarCollapse .navbar-nav .nav-item .nav-link span{
color:#F7F1E8 !important; text-shadow:none !important;
}
header.header-sticky #navbarCollapse .navbar-nav .nav-item .nav-link:hover,
header.header-sticky #navbarCollapse .navbar-nav .nav-item .nav-link.active{
color:#D4B368 !important;
}
/* Bouton Connexion (guest) : .btn-outline-primary résout en vert émeraude
texte+bordure — invisible sur le fond émeraude du panneau (même bordure,
même couleur). Ne touche pas .btn-outline-primary ailleurs sur le site
(hors panneau mobile émeraude), ni S'inscrire (.eyd-reserve, déjà en
fond doré plein, lisible dans tous les cas). */
header.header-sticky #navbarCollapse .btn-outline-primary{
color:#F7F1E8 !important;
border-color:rgba(247,241,232,.55) !important;
}
header.header-sticky #navbarCollapse .btn-outline-primary:hover{
color:#064333 !important;
background:#F7F1E8 !important;
border-color:#F7F1E8 !important;
}
}
.eyd-foot-logo{ height:50px!important; width:auto!important; }
.eyd-social a{ color:var(--eyd-cream)!important; border:1px solid rgba(247,241,232,.25); }
.eyd-social a:hover{ background:var(--eyd-gold)!important; color:var(--eyd-emerald-deep)!important; border-color:var(--eyd-gold)!important; }
/* ── Logo adaptatif ────────────────────────────────────────────────
Vert + or (eyd-logo-dark) par défaut : lisible sur les fonds clairs
(menu blanc des pages intérieures). Version claire (eyd-logo-light,
crème + or) uniquement sur la page d'accueil quand l'en-tête est
transparent au-dessus de la grande photo sombre. */
.eyd-logo-light{ display:none !important; }
.eyd-home header.header-sticky:not(.scrolled) .eyd-logo-dark{ display:none !important; }
.eyd-home header.header-sticky:not(.scrolled) .eyd-logo-light{ display:inline-block !important; }
/* ==========================================================================
EYDENN — EN-TÊTE PREMIUM (voile de lisibilité + typographie luxe)
Bloc final : fait autorité sur les styles d'en-tête ci-dessus.
========================================================================== */
/* ---------- 1) VOILE DÉGRADÉ (accueil) ----------
L'en-tête est transparent au-dessus de la grande photo : sur un ciel clair,
le menu crème se délave. On pose un dégradé sombre très léger (haut du hero)
UNIQUEMENT tant qu'on n'a pas défilé — il garantit un contraste net sans
masquer la photo, comme sur les sites hôteliers haut de gamme. */
.eyd-home header.header-sticky::before{
content:"";
position:absolute; left:0; right:0; top:0; height:190px;
background:linear-gradient(to bottom,
rgba(3,41,31,.62) 0%, rgba(3,41,31,.30) 48%, rgba(3,41,31,0) 100%);
pointer-events:none; z-index:-1;
opacity:1; transition:opacity .3s ease;
}
.eyd-home header.header-sticky.scrolled::before{ opacity:0; }
/* Le contenu de l'en-tête reste au-dessus du voile. */
.eyd-home header.header-sticky .container-fluid{ position:relative; z-index:1; }
/* ---------- 2) TYPOGRAPHIE LUXE DU MENU (ordinateur ≥ 992px) ----------
Petites capitales espacées, une seule ligne, soulignement doré fin qui se
révèle au survol. Donne l'allure « maison de voyage » plutôt que menu web.
Relevé de 576 à 992px (refonte nav 09/2026) : le menu se replie désormais
en panneau déroulant jusqu'à 992px (voir navbar-expand-lg), donc ce
traitement "une seule ligne, majuscules" ne doit s'appliquer qu'à la
vraie largeur bureau, sous peine de re-provoquer le débordement en
panneau tablette (texte non focus + majuscules espacées plus larges). */
@media (min-width:992px){
header.header-sticky .navbar-nav .nav-link{
font-family:'Manrope',sans-serif!important;
text-transform:uppercase;
letter-spacing:.14em;
font-size:.78rem!important;
font-weight:500!important;
white-space:nowrap; /* plus de retour à la ligne disgracieux */
padding:.4rem 1rem!important;
position:relative;
transition:color .25s ease;
}
/* Soulignement doré animé (survol + page active). Exclut .dropdown-toggle :
Bootstrap utilise déjà ::after sur ces liens pour le chevron du menu
déroulant (Signature Collection, Accès privé, Langue, Devise) — les deux
règles se disputeraient le même pseudo-élément, l'une écrasant l'autre. */
header.header-sticky .navbar-nav .nav-link:not(.dropdown-toggle)::after{
content:"";
position:absolute; left:1rem; right:1rem; bottom:.02rem;
height:1px; background:var(--eyd-gold);
transform:scaleX(0); transform-origin:left;
transition:transform .3s ease;
}
header.header-sticky .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
header.header-sticky .navbar-nav .nav-link:not(.dropdown-toggle).active::after{ transform:scaleX(1); }
/* Les petites icônes (cœur, étoiles) : discrètes et alignées */
header.header-sticky .navbar-nav .nav-link i{ font-size:.85em; vertical-align:-.05em; }
}
/* Boutons Connexion / Inscription : léger raffinement (lettres espacées) */
header.header-sticky .eyd-reserve,
header.header-sticky .btn-outline-primary{
letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
}
/* ==========================================================================
EYDENN — EN-TÊTE CLAIR (SABLE) : logo vert-or lisible + charte
Bloc final : fait autorité sur le fond émeraude défini plus haut.
S'applique partout SAUF sur l'accueil au-dessus du hero (qui reste
transparent avec menu crème).
========================================================================== */
header.header-sticky{
background:var(--eyd-header-bg)!important;
border-bottom:1px solid rgba(201,162,74,.40)!important;
box-shadow:0 2px 16px rgba(3,41,31,.07)!important;
}
/* Texte du menu en vert émeraude, accents dorés */
header.header-sticky .navbar-nav .nav-link,
header.header-sticky .dropdown-toggle,
header.header-sticky .navbar-toggler,
header.header-sticky .navbar-toggler .small{ color:var(--eyd-emerald)!important; }
header.header-sticky .navbar-nav .nav-link:hover,
header.header-sticky .navbar-nav .nav-link.active,
header.header-sticky .dropdown-toggle:hover{ color:var(--eyd-gold)!important; }
header.header-sticky .navbar-toggler-animation span{ background:var(--eyd-emerald)!important; }
/* Bouton Connexion : contour émeraude sur sable */
header.header-sticky .btn-outline-primary{
border-color:var(--eyd-emerald)!important; color:var(--eyd-emerald)!important;
}
header.header-sticky .btn-outline-primary:hover{
background:var(--eyd-emerald)!important; color:var(--eyd-cream)!important;
}
/* Bouton Inscription : reste or, texte vert profond (déjà lisible sur sable) */
/* ---------- ACCUEIL au-dessus du hero : on RESTE transparent ---------- */
.eyd-home header.header-sticky:not(.scrolled){
background:transparent!important; border-bottom:0!important; box-shadow:none!important;
}
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link,
.eyd-home header.header-sticky:not(.scrolled) .dropdown-toggle,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler .small{ color:var(--eyd-cream)!important; }
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link:hover,
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link.active{ color:var(--eyd-gold-soft)!important; }
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler-animation span{ background:var(--eyd-cream)!important; }
.eyd-home header.header-sticky:not(.scrolled) .btn-outline-primary{
border-color:rgba(247,241,232,.7)!important; color:var(--eyd-cream)!important;
}
/* Accueil après défilement : en-tête sable comme les autres pages */
.eyd-home header.header-sticky.scrolled{ background:var(--eyd-header-bg)!important; }
/* ==========================================================================
EYDENN — EN-TÊTE UNIFORME (correctif décisif)
Le fond derrière l'en-tête pouvait être clair (accueil), rendant le menu
crème illisible. On rend l'en-tête SABLE et le texte VERT sur TOUS les
états (y compris l'accueil non défilé) : lisible partout, sans exception.
Bloc tout en fin de feuille = autorité maximale.
========================================================================== */
header.header-sticky,
.eyd-home header.header-sticky,
.eyd-home header.header-sticky:not(.scrolled),
.eyd-home header.header-sticky.scrolled{
background:var(--eyd-header-bg)!important;
border-bottom:1px solid rgba(201,162,74,.40)!important;
box-shadow:0 2px 16px rgba(3,41,31,.07)!important;
}
/* Plus besoin du voile dégradé (l'en-tête est opaque). */
header.header-sticky::before,
.eyd-home header.header-sticky::before{ display:none!important; }
/* Texte du menu : VERT ÉMERAUDE sur tous les états. */
header.header-sticky .nav-link,
header.header-sticky .navbar-nav .nav-link,
header.header-sticky .dropdown-toggle,
header.header-sticky .navbar-toggler,
header.header-sticky .navbar-toggler .small,
.eyd-home header.header-sticky:not(.scrolled) .nav-link,
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link,
.eyd-home header.header-sticky:not(.scrolled) .dropdown-toggle,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler .small{
color:var(--eyd-emerald)!important;
}
/* Reliquat de l'ancien menu transparent-sur-photo : une ombre portée assurait
la lisibilité du texte crème sur la photo. Le menu est maintenant opaque
sable partout (règle ci-dessus) — cette ombre, jamais retirée, se
superposait au texte vert déjà lisible et le rendait flou/brouillé dès
l'arrivée sur la page (visible uniquement avant le premier scroll, l'état
"scrolled" la désactivant déjà plus haut dans ce fichier). */
.eyd-home header.header-sticky:not(.scrolled) .nav-link,
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link,
.eyd-home header.header-sticky:not(.scrolled) .dropdown-toggle,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler .small{
text-shadow:none!important;
}
/* Survol / page active : doré. */
header.header-sticky .nav-link:hover,
header.header-sticky .navbar-nav .nav-link:hover,
header.header-sticky .navbar-nav .nav-link.active,
header.header-sticky .dropdown-toggle:hover,
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link:hover,
.eyd-home header.header-sticky:not(.scrolled) .navbar-nav .nav-link.active{
color:var(--eyd-gold)!important;
}
/* Hamburger + bouton Connexion en émeraude sur sable, partout. */
header.header-sticky .navbar-toggler-animation span,
.eyd-home header.header-sticky:not(.scrolled) .navbar-toggler-animation span{
background:var(--eyd-emerald)!important;
}
header.header-sticky .btn-outline-primary,
.eyd-home header.header-sticky:not(.scrolled) .btn-outline-primary{
border-color:var(--eyd-emerald)!important; color:var(--eyd-emerald)!important;
}
header.header-sticky .btn-outline-primary:hover,
.eyd-home header.header-sticky:not(.scrolled) .btn-outline-primary:hover{
background:var(--eyd-emerald)!important; color:var(--eyd-cream)!important;
}
/* Logo : la version claire (crème) n'a plus lieu d'être — le logo vert-or
est parfaitement lisible sur le sable sur tous les états. */
.eyd-home header.header-sticky:not(.scrolled) .eyd-logo-dark{ display:inline-block!important; }
.eyd-home header.header-sticky:not(.scrolled) .eyd-logo-light{ display:none!important; }
/* Accessibilité clavier (audit du 13/09/2026) : ces 2 éléments n'ont aucun
indicateur de focus visible — .btn-login-social hérite du .btn Bootstrap
de base, dont l'ombre de focus par défaut a un spread de 0 (invisible,
destinée à être redéfinie par un variant .btn-primary/.btn-white… que ce
bouton n'a pas) ; le widget pays (Choices.js) désactive explicitement
outline sur .choices/.choices__input et ne laisse qu'un changement de
bordure gris clair -> gris clair (contraste quasi nul). Corrigé ici plutôt
que dans le CSS vendor pour survivre à une future mise à jour du thème. */
.btn-login-social:focus-visible{
outline:2px solid var(--eyd-emerald); outline-offset:2px;
}
.choices.is-focused .choices__inner,
.choices:focus-within .choices__inner{
border-color:var(--eyd-gold)!important;
box-shadow:0 0 0 2px rgba(201,162,74,.35);
}
/* =====================================================================
EYDENN — Navigation publique (refonte 09/2026, corrigée)
Desktop : Hôtels | Expériences | Signature Collection — espace flexible —
Accès privé | Langue | Devise | Compte | Professionnels.
Signature Collection reste une entrée de premier niveau, traitement
éditorial discret (PAS le même traitement que Accès privé). Accès privé
(Private Concierge + The Eydenn Club UNIQUEMENT) reçoit un déclencheur à
fine ligne champagne PERMANENTE + un panneau noir premium distinct du
reste du site (palette reprise de layouts.private-universe : noir
profond/ivoire/champagne). N'ALTÈRE PAS la couleur/le fond de l'en-tête
(déjà définis plus haut) : uniquement espacement, typographie, accents.
===================================================================== */
/* Réduit l'espacement excessif entre lettres + légère baisse de taille,
cohérent avec un menu de marque plus dense. */
.eyd-nav-primary .nav-link,
.eyd-nav-access-wrap .nav-link{
font-size:.82rem;
font-weight:500;
letter-spacing:.01em;
padding-top:.5rem;
padding-bottom:.5rem;
}
/* Signature Collection : traitement éditorial discret, PAS le même
traitement que Accès privé (pas de ligne champagne permanente). Léger
retrait par rapport à Hôtels/Expériences pour signaler sa nature un peu
plus événementielle sans casser la hiérarchie visuelle de premier niveau. */
.eyd-nav-collection > .dropdown-toggle{ margin-left:.5rem; }
.eyd-nav-collection .dropdown-menu{
border-color:rgba(201,162,74,.25);
box-shadow:0 12px 30px rgba(3,41,31,.12);
}
/* Le thème (style.css) révèle les dropdowns desktop via :hover uniquement
(opacity/visibility, un jeu de règles dupliqué par breakpoint navbar-expand-
{sm,md,lg,xl,xxl} — ex. .navbar-expand-lg .navbar-nav .dropdown:hover >
.dropdown-menu), sans jamais lire la classe .show ajoutée par le JS
Bootstrap : au clavier (Tab puis Entrée/Espace, sans survol souris), le
panneau resterait invisible bien que .show soit posée. Gap préexistant
(déjà présent avant cette refonte pour Langue/Devise à l'ancien point de
bascule sm) — corrigé ici UNIQUEMENT pour les deux nouveaux groupes
(Signature Collection, Accès privé), sans toucher la feuille de style du
thème ni les dropdowns préexistants, hors périmètre de cette demande. */
.eyd-nav-collection:focus-within > .dropdown-menu,
.eyd-nav-collection .dropdown-menu.show,
.eyd-nav-access:focus-within > .dropdown-menu,
.eyd-nav-access .dropdown-menu.show,
.eyd-nav-compte:focus-within > .dropdown-menu,
.eyd-nav-compte .dropdown-menu.show{
visibility:visible!important;
opacity:1!important;
}
/* Accès privé : déclencheur avec fine ligne champagne PERMANENTE (pas
seulement au survol) — seul élément de la nav à recevoir ce traitement,
pour rester "légèrement distinctif" sans devenir un bouton plein. */
.eyd-nav-access-wrap{ margin-left:1.5rem; }
.eyd-nav-access > .dropdown-toggle{
position:relative;
padding-bottom:.6rem!important;
}
header.header-sticky .navbar-nav .eyd-nav-access > .dropdown-toggle::after{
content:"";
position:absolute;
left:1rem; right:1rem; bottom:.28rem;
height:1.5px;
background:var(--eyd-gold);
opacity:.75;
transition:opacity .3s ease;
}
header.header-sticky .navbar-nav .eyd-nav-access > .dropdown-toggle:hover::after,
header.header-sticky .navbar-nav .eyd-nav-access > .dropdown-toggle:focus-visible::after,
header.header-sticky .navbar-nav .eyd-nav-access > .dropdown-toggle.active::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .eyd-nav-access > .dropdown-toggle::after{ transition:none; } }
/* Panneau noir premium — palette reprise de layouts.private-universe.blade.php
(--bg:#0A0A0B / --ivory:#F4F1E9 / --champagne:#C9B896), volontairement
distincte du reste du site pour signaler qu'on quitte l'univers réservation.
Corrigé (retour client) : ressemblait encore à un dropdown Bootstrap
standard — remplacé par deux zones ÉDITORIALES cliquables (titre + phrase
+ mention), agrandi modérément, séparées par un simple filet fin. Aucune
des deux n'est un bouton ni une carte (pas de fond/bordure par zone). */
.eyd-nav-access-menu{
background:#0A0A0B;
border:1px solid rgba(244,241,233,.14);
border-radius:4px;
padding:1.75rem 0;
min-width:300px;
}
.eyd-access-editorial{
display:flex;
flex-direction:column;
gap:.4rem;
padding:0 1.85rem;
text-decoration:none;
}
.eyd-access-editorial-title{
color:#F4F1E9;
font-size:.86rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
}
.eyd-access-editorial-desc{
color:rgba(244,241,233,.62);
font-size:.78rem;
font-style:italic;
line-height:1.5;
}
.eyd-access-editorial-cta{
color:#C9B896;
font-size:.64rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
margin-top:.15rem;
transition:color .2s ease;
}
.eyd-access-editorial:hover .eyd-access-editorial-title,
.eyd-access-editorial.active .eyd-access-editorial-title{ color:#C9B896; }
.eyd-access-editorial:hover .eyd-access-editorial-cta,
.eyd-access-editorial.active .eyd-access-editorial-cta{ color:#F4F1E9; }
/* Filet très fin entre les deux zones — jamais un bloc/carte séparé. */
.eyd-access-sep{
height:1px;
margin:1.15rem 1.85rem;
background:rgba(244,241,233,.14);
}
/* Rendu à plat (mobile/tablette) : mêmes zones éditoriales, même palette noire. */
.eyd-nav-access-flat{
background:#0A0A0B;
border-radius:8px;
margin:.5rem 1rem;
padding:1.25rem 0;
}
.eyd-nav-access-flat .eyd-nav-group-label{ color:#C9B896; opacity:.8; border-top:0; margin-top:0; padding-left:1.85rem; padding-right:1.85rem; }
.eyd-nav-access-flat .eyd-access-sep{ margin:1.15rem 1.25rem; }
/* Signature Collection à plat (mobile/tablette) : liens directs, palette
standard du site (pas de traitement noir, réservé à Accès privé). */
.eyd-nav-collection-flat .nav-link{ padding-left:1rem; padding-right:1rem; }
/* Séparateur fin avant Langue/Devise/Compte — desktop large uniquement,
pour ne pas ajouter de bruit visuel sur tablette/mobile où le menu est
déjà condensé dans le panneau déroulant. */
.eyd-nav-sep{
width:1px;
align-self:center;
height:22px;
background:rgba(201,162,74,.35);
margin:0 1rem;
}
/* Langue/Devise : une seule ligne, séparées proprement (retour client :
la marge négative précédente les rapprochait trop, lecture peu claire). */
.eyd-nav-settings .eyd-switch .nav-link{
font-size:.82rem;
padding-left:.6rem;
padding-right:.6rem;
}
.eyd-nav-settings .eyd-switch + .eyd-switch{ margin-left:.3rem; }
.eyd-nav-professional .nav-link{ font-size:.78rem; padding-left:.75rem; padding-right:.75rem; }
.eyd-nav-compte > .dropdown-toggle{ font-size:.82rem; }
/* Panneau Compte : ivoire chaud plutôt que le blanc pur par défaut de
Bootstrap, fine bordure champagne, rayon plus sobre que le 0.5rem par
défaut du thème, focus clavier visible sur chaque entrée (Se connecter /
Créer un compte). Même composant desktop et mobile/tablette. */
.eyd-nav-compte .dropdown-menu{
background:var(--eyd-header-bg);
border:1px solid rgba(201,162,74,.35);
border-radius:6px;
}
.eyd-nav-compte .dropdown-item:focus-visible{
outline:2px solid var(--eyd-gold);
outline-offset:-2px;
background:rgba(201,162,74,.08);
}
/* flex-wrap:nowrap explicite (desktop uniquement) : la classe Bootstrap .nav
(déjà portée par ces listes) inclut flex-wrap:wrap par défaut — avec les
groupes Accès privé + Professionnels ajoutés à la refonte corrigée, Langue
et Devise n'avaient plus assez de place sur leur propre ligne et
basculaient l'un sous l'autre (même bug déjà rencontré et corrigé sur
Accès privé — voir plus haut). */
@media (min-width:992px){
.eyd-nav-access-wrap,
.eyd-nav-settings,
.eyd-nav-account,
.eyd-nav-professional{ flex-wrap:nowrap!important; }
}
/* En-têtes de groupe — visibles uniquement dans le panneau mobile ouvert
(jamais sur desktop, où le regroupement est déjà lisible visuellement).
Couleur explicite (retour client : presque invisibles sur le fond
émeraude du panneau mobile) — ce ne porte pas la classe .nav-link,
il n'héritait donc d'aucune des couleurs correctives posées plus haut
pour le panneau ouvert, et retombait sur une couleur sombre par défaut
+ opacity:.6 = quasi invisible sur #064333. Ivoire atténué, contraste
suffisant sans être aussi appuyé que le texte des liens eux-mêmes. */
.eyd-nav-group-label{
display:none;
font-size:.66rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(244,241,233,.68);
padding:.9rem 1rem .3rem;
margin-top:.4rem;
border-top:1px solid rgba(201,162,74,.25);
}
.eyd-nav-primary .eyd-nav-group-label{ border-top:0; margin-top:0; }
@media (max-width:991.98px){
.eyd-nav-group-label{ display:block; }
/* En mobile ET tablette (<992px, point de bascule réel de .navbar-expand-lg),
les groupes s'empilent dans le panneau déroulant — éviter tout
débordement horizontal (Bootstrap gère déjà le collapse vertical ; on
ajoute juste un peu d'air entre les groupes). */
.eyd-nav-collection-flat,
.eyd-nav-access-flat,
.eyd-nav-settings,
.eyd-nav-account,
.eyd-nav-professional{ flex-direction:column; align-items:flex-start!important; gap:0; width:100%; }
.eyd-nav-collection-flat .nav-item,
.eyd-nav-access-flat .nav-item,
.eyd-nav-settings .nav-item,
.eyd-nav-account .nav-item,
.eyd-nav-professional .nav-item{ width:100%; }
/* .eyd-nav-access-flat a en plus une marge horizontale (.5rem 1rem, "carte"
noire détachée du panneau émeraude) — width:100% s'additionnait à cette
marge et débordait de 2rem hors du panneau (carte tronquée à droite).
width:auto laisse le modèle de boîte normal soustraire la marge. */
.eyd-nav-access-flat{ width:auto; }
}