/* ==========================================================
   EGCM CARAIBES — style.css
   Extrait et nettoyé du widget Elementor d'origine.
   Namespace conservé sous #egcm-root pour compat visuelle,
   mais body en porte directement la classe pour le site indépendant.
   ========================================================== */

body{font-family:'Inter',system-ui,sans-serif;background:#fff;color:#0f0f0f;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* HEADER */
.header-wrapper{padding:12px 0 0 0}
.site-header{background:#111;color:#fff;border-bottom:3px solid #FF8C00;border-radius:12px;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;width:44px;border-radius:50%;background:#fff;padding:2px;object-fit:cover}
.brand b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand b span{color:#FF8C00}
.nav{display:flex;gap:20px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.nav a:hover{color:#FF8C00}

/* HERO */
.hero{padding:56px 0 56px;background:#fff}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
h1{font-size:clamp(32px,4.2vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin-bottom:16px}
h1 span{color:#FF8C00}
.sub{font-size:16px;color:#4b5563;line-height:1.55;max-width:560px;margin-bottom:28px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.btn{padding:13px 22px;border-radius:10px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:.2s;cursor:pointer}
.btn-o{background:#FF8C00;color:#fff;border:1.5px solid #FF8C00}
.btn-o:hover{background:#e67e00;border-color:#e67e00;color:#fff}
.btn-g{background:#fff;border:1.5px solid #FF8C00;color:#FF8C00}
.btn-g:hover{background:#FFF3E0;color:#FF8C00}
.badges{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:600;color:#374151;margin-top:6px}
.badges span{display:flex;align-items:center;gap:5px}

/* SECTIONS */
.section{padding:72px 0;border-top:1px solid #f3f4f6}
.sec-head{max-width:640px;margin-bottom:32px}
.sec-head h2{font-size:clamp(26px,3vw,36px);line-height:1.1;margin-bottom:10px}
.sec-head p{color:#6b7280;font-size:15px}

/* CARDS */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid3-gallery{display:grid;grid-template-columns:repeat(3,1fr)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr)!important;gap:16px}
.card{border:1px solid #e5e7eb;border-radius:16px;padding:22px;background:#fff;position:relative;overflow:hidden;display:block;cursor:pointer;transition:.2s}
.card:hover{border-color:#FF8C00;background:#FFFBF5}
.card.highlight{border-color:#FF8C00;background:#FFFBF5}
.card .ico{min-width:40px;height:40px;padding:0 10px;border-radius:10px;background:#111;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px;gap:2px}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:13px;color:#6b7280;line-height:1.5}

/* TABLE COMPARATIF */
.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:16px;margin-top:20px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid #f3f4f6}
th{background:#111;color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.badge-yes{background:#dcfce7;color:#166534;padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700}

/* PROCESS STEPS */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.process-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:24px}
@media(max-width:1100px){.process-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.process-5{grid-template-columns:1fr}}
.step{position:relative;padding:18px;border:1px dashed #d1d5db;border-radius:16px;background:#fff;overflow:hidden}
.step h3,.step p{position:relative;z-index:1}
.step-num{font-size:60px;font-weight:800;color:#f3f4f6;position:absolute;top:8px;right:12px;z-index:0;pointer-events:none;line-height:1}

/* CTA + FORM */
.cta{background:#111;border-radius:20px;padding:32px;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.cta h3{font-size:clamp(22px,3vw,28px);line-height:1.1;margin-bottom:10px}
.cta p{color:#9ca3af;font-size:14px}
.form{background:#fff;border-radius:14px;padding:18px;color:#111}
.form input,.form textarea{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;font-family:inherit;font-size:13px;margin-bottom:8px}
.form button{width:100%;background:#FF8C00;color:#fff;border:0;padding:12px;border-radius:8px;font-weight:700;cursor:pointer;transition:.2s}
.form button:hover{background:#e67e00}

/* FOOTER */
.footer-mini{padding:18px 0;text-align:center;font-size:11px;color:#9ca3af;border-top:1px solid #f3f4f6;margin-top:20px}

@media(max-width:900px){
  .hero-grid,.grid3,.process,.cta{grid-template-columns:1fr}
  .grid3-gallery{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr!important}
  .grid3 .card{grid-column:span 1!important}
  .gallery4{grid-template-columns:1fr 1fr}
  .thumb-zoom-grid{grid-template-columns:repeat(5,1fr)!important}
  .escalier-2col{grid-template-columns:1fr!important}
  .escalier-4col{grid-template-columns:1fr 1fr!important}
  .nav{position:absolute;top:100%;left:0;right:0;background:#111;border-radius:0 0 12px 12px;flex-direction:column;gap:0;display:none;padding:8px 0;box-shadow:0 12px 24px rgba(0,0,0,.2)}
  .nav.nav-open{display:flex}
  .nav a{padding:12px 20px;border-top:1px solid rgba(255,255,255,.08)}
  .site-header{position:relative}
  #navToggle{display:block!important}
  .site-header{border-radius:0}
  .header-wrapper{padding:0}
  table{min-width:0;width:100%}
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr{display:block;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tr{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;overflow:hidden}
  .table-wrap td{border-bottom:1px solid #f3f4f6;padding:10px 12px 10px 46%;position:relative;text-align:right;font-size:13px}
  .table-wrap td:last-child{border-bottom:0}
  .table-wrap td:before{content:attr(data-label);position:absolute;left:12px;top:10px;width:40%;text-align:left;font-weight:700;color:#111;font-size:11px}
  .table-wrap td:first-child{padding-left:12px;text-align:left;font-weight:700;background:#fafaf9}
  .table-wrap td:first-child:before{content:none}
  .scroll-hint{display:none!important}
}
