/* =========================================================
   PURE ESTHETIC — Design system
   Identité : arches de Sidi Bou Saïd, bleu profond méditerranéen,
   ocre poterie de Nabeul, sauge apaisante.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --color-bg:#FBF8F2;
  --color-surface:#FFFFFF;
  --color-ink:#132330;
  --color-ink-soft:#4B5A63;
  --color-primary:#12384F;
  --color-primary-light:#2E6E8E;
  --color-primary-dark:#0B2436;
  --color-accent:#C97A3D;
  --color-accent-light:#E7A76B;
  --color-sage:#8FAE9B;
  --color-sand:#EFE6D3;
  --color-border:#E4DCC9;
  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius-arch: 200px 200px 12px 12px;
  --shadow-soft: 0 12px 32px rgba(19,35,48,.08);
  --shadow-strong: 0 20px 48px rgba(19,35,48,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-bg);
  line-height:1.7;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); color:var(--color-primary-dark); letter-spacing:-.01em;}
h1{font-weight:600; color:#fff}
h2{font-weight:600}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--color-accent);
  font-weight:500;
}
a{color:var(--color-primary-light); text-decoration:none}
a:hover{color:var(--color-accent)}
:focus-visible{outline:3px solid var(--color-accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ---------- Header / Arch motif signature ---------- */
.arch{
  border-radius: var(--radius-arch);
  overflow:hidden;
}
.arch-frame{
  position:relative;
  border-radius: var(--radius-arch);
  border:2px solid var(--color-accent-light);
  padding:6px;
}
.divider-arch{
  height:56px;
  width:100%;
  background:
    radial-gradient(circle at 50% 0%, transparent 27px, var(--color-bg) 28px) top/56px 56px repeat-x;
}
.divider-arch.on-primary{
  background:
    radial-gradient(circle at 50% 0%, transparent 27px, var(--color-primary) 28px) top/56px 56px repeat-x;
}

.site-header{
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  position: sticky; top: 0; z-index: 1050 !important;
  isolation: isolate;
}
.topbar{
  position: relative;
  z-index: 1060 !important;
  background: #08111e !important;
}
.navbar .dropdown-menu{
  z-index: 1100 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
  padding: 0.5rem !important;
  background: #ffffff !important;
  margin-top: 0.4rem !important;
}
.dropdown-item {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  padding: 0.55rem 1rem !important;
  border-radius: 8px !important;
  transition: all 0.18s ease-in-out !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
.sticky-form-card {
  position: sticky;
  top: 100px;
  z-index: 900 !important;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 991.98px){
  .sticky-form-card {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
  }
}
.navbar-brand{font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--color-primary-dark) !important}
.navbar-brand span{color:var(--color-accent)}
.nav-link{
  font-weight: 600 !important;
  font-size: 0.92rem;
  color: #1e293b !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}
.nav-link:hover, .nav-link:focus{
  color: #0284c7 !important;
  background-color: #f0f9ff;
}
#langDropdown {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  padding: 0.4rem 1rem !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}
#langDropdown:hover {
  background: #f1f5f9;
  border-color: #0284c7;
  color: #0284c7 !important;
}
.btn-devis{
  background:var(--color-accent); border:none; color:#fff; font-weight:600;
  border-radius:100px; padding:.6rem 1.4rem;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  transition: all 0.2s ease;
}
.btn-devis:hover{background:var(--color-primary); color:#fff; transform: translateY(-1px);}
.btn-outline-primary-custom{
  border:2px solid var(--color-primary); color:var(--color-primary); border-radius:100px; font-weight:600; padding:.55rem 1.3rem;
}
.btn-outline-primary-custom:hover{background:var(--color-primary); color:#fff}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-primary-light));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:70px;
  background:
    radial-gradient(circle at 50% 100%, var(--color-bg) 34px, transparent 35px) bottom/70px 70px repeat-x;
}
.hero .eyebrow{color:var(--color-accent-light)}
.hero-stats .num{font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:#fff}
.hero-search{
  background:#fff; border-radius:20px; padding:1.5rem; box-shadow:var(--shadow-strong); color:var(--color-ink);
}

/* ---------- Cards ---------- */
.card-proc{
  border:1px solid var(--color-border); border-radius:20px 20px 8px 8px; overflow:hidden; background:#fff;
  transition:transform .25s ease, box-shadow .25s ease; height:auto;
}
.card-proc:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft)}
.card-proc img{height:190px; object-fit:cover; width:100%}
.card-proc .body{padding:1.25rem}
.card-proc .badge-price{font-family:var(--font-mono); background:var(--color-sand); color:var(--color-primary-dark); border-radius:100px; padding:.3rem .8rem; font-size:.8rem}

.card-team{
  text-align:center; padding:1.5rem; border-radius:200px 200px 16px 16px; background:#fff; border:1px solid var(--color-border);
}
.card-team img{width:120px; height:120px; border-radius:50%; object-fit:cover; margin-bottom:1rem; border:3px solid var(--color-sand)}

.card-hotel{border-radius:16px; overflow:hidden; border:1px solid var(--color-border); background:#fff}
.card-hotel img{height:170px; object-fit:cover; width:100%}

/* ---------- Comparatif ---------- */
.table-compare{border-collapse:separate; border-spacing:0 8px}
.table-compare th{font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-ink-soft); border:none}
.table-compare td{background:#fff; padding:1rem; border:none; vertical-align:middle}
.table-compare tr td:first-child{border-radius:12px 0 0 12px; font-weight:600}
.table-compare tr td:last-child{border-radius:0 12px 12px 0}
.table-compare .col-tunisie{background:var(--color-sand)!important; font-weight:700; color:var(--color-primary-dark)}

/* Tables responsive cards */
@media (max-width: 767.98px) {
  .table-responsive { border: none; overflow: visible; }
  .table-compare thead { display: none; }
  .table-compare, .table-compare tbody, .table-compare tr, .table-compare td { display: block; width: 100%; }
  .table-compare tr { 
    margin-bottom: 1.5rem; 
    border-radius: 16px; 
    border: 1px solid var(--color-border);
    background: #fff;
    overflow: hidden;
  }
  .table-compare td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 1rem 1.25rem;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-border);
  }
  .table-compare td:last-child { border-bottom: none; }
  .table-compare td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: .8rem;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    font-weight: 500;
    margin-right: 1rem;
    text-align: left;
  }
  .table-compare td:first-child {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
    font-size: 1.1rem;
    justify-content: center;
  }
  .table-compare td:first-child::before { display: none; }
  .table-compare .col-tunisie {
    background: var(--color-sand) !important;
  }
}

/* ---------- Sections ---------- */
.section-alt{background:#fff}
.section-primary{background:var(--color-primary); color:#fff}
.section-primary h2, .section-primary h3{color:#fff}
.section-sand{background:var(--color-sand)}

.step-item{position:relative; padding-left:3.2rem}
.step-item .step-num{
  position:absolute; left:0; top:0; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--color-accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
}

.faq-accordion .accordion-button{font-weight:600; color:var(--color-primary-dark); background:#fff}
.faq-accordion .accordion-button:not(.collapsed){color:var(--color-accent); background:var(--color-sand)}
.faq-accordion .accordion-item{border-radius:14px!important; overflow:hidden; margin-bottom:.8rem; border:1px solid var(--color-border)}

.review-card{background:#fff; border-radius:16px; padding:1.5rem; border:1px solid var(--color-border); height:100%}
.review-card .stars{color:var(--color-accent); letter-spacing:2px}

.price-box{
  background:var(--color-primary-dark); color:#fff; border-radius:20px; padding:2rem; text-align:center;
}
.price-box .price{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:var(--color-accent-light)}

.breadcrumb-custom{font-family:var(--font-mono); font-size:.82rem}
.breadcrumb-custom a{color:var(--color-ink-soft)}
.breadcrumb-custom .active{color:var(--color-accent)}

footer.site-footer{background:var(--color-primary-dark); color:#e9e4d8}
footer.site-footer a{color:#cfe3ea}
footer.site-footer a:hover{color:var(--color-accent-light)}
footer .footer-title{font-family:var(--font-display); color:#fff}

.cta-band{
  background:var(--color-accent); color:#fff; border-radius:24px; padding:3rem;
}
.cta-band .btn-light-custom{background:#fff; color:var(--color-primary-dark); border-radius:100px; font-weight:700; padding:.7rem 1.6rem}

.form-control, .form-select{border-radius:10px; border:1px solid var(--color-border); padding:.7rem 1rem}
.form-control:focus, .form-select:focus{border-color:var(--color-accent); box-shadow:0 0 0 .2rem rgba(201,122,61,.15)}

.badge-eeat{background:var(--color-sage); color:#fff; border-radius:100px; padding:.4rem .9rem; font-size:.78rem; font-weight:600}

.toc-box{background:var(--color-sand); border-radius:16px; padding:1.5rem}
.toc-box a{color:var(--color-primary-dark); font-weight:500}

@media (max-width: 768px){
  .hero h1{font-size:2rem}
  .cta-band{padding:2rem}
}

/* =========================================================
   Navigation responsive
   ========================================================= */

/* ---- Hamburger (3 barres → croix) ---- */
.navbar-toggler{border:none; width:28px; height:22px; position:relative; padding:0; order:-1}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler span,
.navbar-toggler span::before,
.navbar-toggler span::after{display:block; width:26px; height:2px; background:var(--color-ink); border-radius:2px; transition:.3s cubic-bezier(.68,-.55,.27,1.55); position:absolute; right:1px}
.navbar-toggler span{top:50%; transform:translateY(-50%)}
.navbar-toggler span::before{content:""; top:-8px}
.navbar-toggler span::after{content:""; top:8px}
.navbar-toggler[aria-expanded="true"] span{background:transparent}
.navbar-toggler[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.navbar-toggler[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ---- Logo centré sur mobile ---- */
.navbar .container{display:flex; flex-wrap:nowrap; align-items:center; justify-content: space-between;}
.navbar-brand{line-height:1}
@media (max-width: 991.98px){
  .navbar .container{gap:.5rem}
  .navbar-toggler{order:1; margin:0;}
  .navbar-brand{
    order:2; 
    margin:0; 
    padding-left:0; 
    flex-grow:1; 
    display:flex; 
    justify-content:center;
  }
  .btn-devis.d-lg-none{order:3; margin:0; font-size:.82rem; padding:.38rem .8rem; white-space:nowrap;}
}
.navbar-brand img{display:block}
@media (max-width: 991.98px){.navbar-brand img{width:110px; height:auto; max-width:100%;}}

/* ---- Header scroll ---- */
.site-header.scrolled{box-shadow:0 4px 24px rgba(19,35,48,.08)}

/* ---- Mobile : overlay latéral ---- */
@media (max-width: 991.98px){
  /* Offcanvas styling overrides for menu */
  .offcanvas-start {
    width: 320px;
    border-right: none;
    box-shadow: var(--shadow-strong);
  }
  
  .offcanvas-body {
    padding: 1rem 1.5rem;
  }

  #mainNav .nav-item { border-bottom: 1px solid var(--color-border); }
  #mainNav .nav-link { padding: .85rem 0; font-size: 1.05rem; font-weight: 500; }
  
  /* Hide native Bootstrap caret on mobile since we have a custom toggle button */
  #mainNav .dropdown-toggle::after {
    display: none !important;
  }
  
  /* Dropdown icons for mobile */
  .dropdown-toggle-icon {
    color: var(--color-ink-soft);
  }
  .dropdown-toggle-icon[aria-expanded="true"] {
    color: var(--color-accent);
    transform: rotate(180deg);
  }
  .dropdown-toggle-icon {
    transition: transform 0.2s ease, color 0.2s ease;
  }

  #mainNav .dropdown-menu { border: none; padding-left: 0; background: transparent; box-shadow: none; margin: 0; }
  #mainNav .dropdown-menu .dropdown-item { padding: .6rem 0 .6rem 1rem; font-size: .95rem; border-radius: 0; color: var(--color-ink-soft); border-bottom: none; }
  #mainNav .dropdown-menu .dropdown-item:hover { background: transparent; color: var(--color-accent); }
  #mainNav .dropdown-menu .dropdown-divider { margin: .2rem 0; border-color: var(--color-border); }
  #mainNav .dropdown-menu .fw-bold { color: var(--color-accent)!important; font-size: .88rem; letter-spacing: .02em; }

  /* ---- Footer du menu mobile ---- */
  #mainNav .nav-footer { border-top: 1px solid var(--color-border); }
  #mainNav .nav-footer .btn-devis { border-radius: 100px; padding: .7rem; }
  .nav-footer .lang-list a { font-size: .82rem; font-weight: 600; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: .06em; padding: .4rem .6rem; border-radius: 6px; border: 1px solid var(--color-border); }
  .nav-footer .lang-list a.active { color: var(--color-accent); background: var(--color-sand); border-color: var(--color-sand); }
}

/* ---- Desktop ---- */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{display:block; opacity:0; animation:fadeIn .2s forwards}
  @keyframes fadeIn{to{opacity:1}}
  .navbar .dropdown-menu{border:1px solid var(--color-border); border-radius:14px; padding:.6rem; box-shadow:var(--shadow-strong); margin-top:.4rem; min-width:240px}
  .navbar .dropdown-menu .dropdown-item{border-radius:8px; padding:.5rem .9rem; transition:background .15s}
  .navbar .dropdown-menu .dropdown-item:hover{background:var(--color-sand)}
  .navbar .dropdown-menu .dropdown-divider{margin:.4rem 0}
  .lang-switch-desktop{flex-shrink:0}
}

.navbar .dropdown-toggle::after{vertical-align:middle; border-top-color:var(--color-ink)}

/* ---------- WhatsApp flottant ---------- */
.whatsapp-float{
  position:fixed; bottom:24px; left:24px; z-index:1050;
  background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-strong);
  font-size:1.6rem; text-decoration:none;
}
.whatsapp-float:hover{background:#1EBE5A; color:#fff}

/* ---------- Sélecteur de langue ---------- */
.lang-switch{border:1px solid var(--color-border); border-radius:100px; padding:.3rem .7rem; font-size:.85rem; background:#fff}
.lang-switch:hover{border-color:var(--color-accent)}

/* ---------- Calculateur de budget ---------- */
.calc-box{background:#fff; border:1px solid var(--color-border); border-radius:20px; padding:2rem; box-shadow:var(--shadow-soft)}
.calc-result{background:var(--color-sand); border-radius:16px; padding:1.5rem; text-align:center}
.calc-result .amount{font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:var(--color-primary-dark)}

/* ---------- Cartes ville / pays ---------- */
.card-ville{border-radius:16px; overflow:hidden; border:1px solid var(--color-border); background:#fff; height:100%}
.card-ville img{height:160px; object-fit:cover; width:100%}

/* ---------- Résumé GEO en tête de page ---------- */
.geo-summary{
  background:var(--color-sand); border-left:4px solid var(--color-accent); border-radius:0 16px 16px 0;
  padding:1.25rem 1.5rem; font-size:.98rem;
}
.geo-summary strong{color:var(--color-primary-dark)}

/* ---------- Checklist ---------- */
.checklist{list-style:none; padding-left:0}
.checklist li{padding-left:1.8rem; position:relative; margin-bottom:.5rem}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--color-sage); font-weight:700}

/* ---------- Support RTL Global & Devis ---------- */
[dir="rtl"] {
  text-align: right;
}
[dir="rtl"] .step-item {
  padding-left: 0 !important;
  padding-right: 3.2rem !important;
}
[dir="rtl"] .step-item .step-num {
  left: auto !important;
  right: 0 !important;
}
[dir="rtl"] .geo-summary {
  border-left: 0 !important;
  border-right: 4px solid var(--color-accent) !important;
  border-radius: 16px 0 0 16px !important;
}
[dir="rtl"] .checklist {
  padding-right: 0 !important;
}
[dir="rtl"] .checklist li {
  padding-left: 0 !important;
  padding-right: 1.8rem !important;
}
[dir="rtl"] .checklist li::before {
  left: auto !important;
  right: 0 !important;
}