/* ============================================================
   Infopixel UI — Apple-like / Premium / Performant
   Palette stricte : blanc / noir / gris / orange (accent)
   ============================================================ */

/* ------------------------------------------------------------
   1) Design tokens (variables)
   ------------------------------------------------------------ */
:root{
  --ip-orange:#F15D24;
  --ip-black:#0B0B0C;

  --ip-gray-900:#111113;
  --ip-gray-800:#1B1B1E;
  --ip-gray-700:#2A2A2E;
  --ip-gray-600:#3A3A40;
  --ip-gray-500:#5A5A63;
  --ip-gray-400:#8A8A95;
  --ip-gray-300:#B7B7C1;
  --ip-gray-200:#D9D9E0;
  --ip-gray-150:#E7E7EC;
  --ip-gray-100:#F2F2F5;

  --ip-white:#FFFFFF;

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;

  --shadow-1:0 10px 30px rgba(0,0,0,.06);
  --shadow-2:0 2px 12px rgba(0,0,0,.06);

  --container:1200px;
  --gutter:20px;

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  --lh:1.55;

  --transition:180ms cubic-bezier(.2,.8,.2,1);

  /* Spacing (tuning) */
  --section-pad:44px;
  --section-pad-sm:28px;
}

/* ------------------------------------------------------------
   2) Base / layout
   ------------------------------------------------------------ */
html{scroll-behavior:smooth}
body{
  font-family:var(--font)!important;
  line-height:var(--lh);
  color:var(--ip-gray-900);
  background:var(--ip-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{max-width:100%;height:auto}
img[width][height]{height:auto}

.container{
  max-width:var(--container)!important;
  padding-left:var(--gutter)!important;
  padding-right:var(--gutter)!important;
}

/* Sections (respirant mais maîtrisé) */
/* Sections standard (mais PAS le header) */
section:not(.header-wrapper),
.section,
.section-content,
.section-padding,
.promo-block{
  padding-top:var(--section-pad)!important;
  padding-bottom:var(--section-pad)!important;
}
/* Header compact */
.header-wrapper{
  padding-top:12px !important;
  padding-bottom:12px !important;
}


@media(max-width:767px){
  section,
  .section,
  .section-content,
  .section-padding,
  .promo-block{
    padding-top:var(--section-pad-sm)!important;
    padding-bottom:var(--section-pad-sm)!important;
  }
}

/* ------------------------------------------------------------
   3) Typo
   ------------------------------------------------------------ */
h1,h2,h3,h4{letter-spacing:-.02em}

h1{
  font-size:clamp(32px,3.6vw,54px);
  line-height:1.08;
  font-weight:700;
  margin:0 0 14px;
}

h2{
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.18;
  font-weight:650;
  margin:0 0 12px;
}

h3{
  font-size:18px;
  font-weight:650;
  margin:0 0 10px;
}

p{margin:0 0 14px;color:var(--ip-gray-700)}
.lead{font-size:18px;color:var(--ip-gray-600)}
.small,small{color:var(--ip-gray-600)}

a{
  color:var(--ip-black);
  text-decoration:none;
  transition:color var(--transition),opacity var(--transition);
}
a:hover{color:var(--ip-black);opacity:.85}

/* Focus visible (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(241,93,36,.35);
  outline-offset:2px;
  border-radius:10px;
}

/* ------------------------------------------------------------
   4) Buttons / badges
   ------------------------------------------------------------ */
.btn,
.btn-default,
.btn-primary,
.btn-info,
.btn-success{
  border-radius:999px!important;
  padding:12px 18px!important;
  font-weight:650!important;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

.btn-primary,
.btn-info{
  background:var(--ip-orange)!important;
  border-color:var(--ip-orange)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(241,93,36,.18);
}
.btn-primary:hover,
.btn-info:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(241,93,36,.22);
}

.btn-default{
  background:transparent!important;
  border:1px solid var(--ip-gray-200)!important;
  color:var(--ip-gray-900)!important;
}
.btn-default:hover{
  background:var(--ip-gray-100)!important;
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0)}

.label,
.badge{
  border-radius:999px!important;
  padding:6px 10px!important;
  font-weight:650;
}

/* ------------------------------------------------------------
   5) Cards / panels
   ------------------------------------------------------------ */
.panel,
.service-item,
.feature-box,
.pricing-table,
.well,
.thumbnail,
.box,
.card{
  background:#fff!important;
  border:1px solid var(--ip-gray-150)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-2);
}

.panel-heading{
  background:transparent!important;
  border:0!important;
  padding:18px 20px 0!important;
}
.panel-body{padding:18px 20px 22px!important}

.panel-footer{
  background:transparent!important;
  border-top:1px solid var(--ip-gray-150)!important;
  border-bottom-left-radius:var(--radius-lg);
  border-bottom-right-radius:var(--radius-lg);
}

/* Hover lift subtil (respect motion) */
@media(prefers-reduced-motion:no-preference){
  .panel,
  .service-item,
  .feature-box,
  .thumbnail,
  .pricing-table{
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  }
  .panel:hover,
  .service-item:hover,
  .feature-box:hover,
  .thumbnail:hover,
  .pricing-table:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-1);
    border-color:rgba(0,0,0,.08);
  }
}

/* ------------------------------------------------------------
   6) Tables
   ------------------------------------------------------------ */
.table,
table{
  background:#fff;
  border:1px solid var(--ip-gray-150);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
table{width:100%}

.table>thead>tr>th,
table th{
  background:var(--ip-gray-100);
  color:var(--ip-gray-900);
  border-bottom:1px solid var(--ip-gray-150)!important;
}

.table>tbody>tr>td,
.table>thead>tr>th,
table td,
table th{
  padding:14px 16px!important;
}

/* ------------------------------------------------------------
   7) Forms
   ------------------------------------------------------------ */
.form-control,
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea,
select{
  border-radius:14px!important;
  border:1px solid var(--ip-gray-150)!important;
  box-shadow:none!important;
  padding:12px 14px!important;
  height:auto!important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(241,93,36,.55)!important;
  box-shadow:0 0 0 4px rgba(241,93,36,.12)!important;
}

/* ------------------------------------------------------------
   8) Navbar + dropdown (z-index + click + no clipping)
   ------------------------------------------------------------ */
.navbar{
  background:rgba(255,255,255,.82)!important;
  border:0!important;
  margin:0!important;
  border-bottom:1px solid rgba(0,0,0,.06)!important;
  backdrop-filter:blur(10px);
  position:relative;
  z-index:9990;
}

.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.navbar-nav>li>a{
  padding-top:12px!important;
  padding-bottom:12px!important;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--ip-gray-900)!important;
}
.navbar-nav>li>a:hover{opacity:.75}

.navbar-toggle{
  border:1px solid var(--ip-gray-150)!important;
  border-radius:12px!important;
  margin-top:10px!important;
}
.navbar-toggle .icon-bar{background:var(--ip-gray-900)!important}

.navbar.is-scrolled{box-shadow:var(--shadow-2)}

.navbar-collapse,
.navbar-nav,
.navbar-header,
.navbar .container{
  overflow:visible!important;
}

.dropdown-menu,
.drop-down{
  z-index:9999;
  border-radius:var(--radius-md);
  border:1px solid var(--ip-gray-150);
  box-shadow:var(--shadow-1);
  overflow:auto;
  max-height:calc(100vh - 90px);
}

/* Assure que les zones hero/slider ne recouvrent pas les dropdowns */
.hero,
.main-banner,
#home,
.slider,
.page-head,
.inner-banner,
.slider-wrap{
  position:relative;
  z-index:1;
}

/* Header/Topbar compact */
header,
.header,
.header-v6,
.header-v7,
.header-v8{
  padding-top:10px!important;
  padding-bottom:10px!important;
}

.header .topbar,
.header .top-bar,
.topbar,
.top-bar{
  padding-top:6px!important;
  padding-bottom:6px!important;
}

/* ------------------------------------------------------------
   9) Ajustement du “grand vide” entre cartes et section suivante
   ------------------------------------------------------------ */

/* Unify: content-* trop généreux */
.content-lg{padding-top:40px!important;padding-bottom:40px!important}
.content-md{padding-top:34px!important;padding-bottom:34px!important}
.content-sm{padding-top:24px!important;padding-bottom:24px!important}

/* Titres de section : éviter margin/padding top énorme */
.headline-center,
.title-v1,
.title-v2,
.title-v3,
.heading,
.heading-v1,
.heading-v2{
  margin-top:0!important;
  padding-top:0!important;
}

/* Helpers margin (souvent présents dans le thème) */
.margin-top-60,.margin-top-80,.margin-top-100{margin-top:24px!important}
.margin-bottom-60,.margin-bottom-80,.margin-bottom-100{margin-bottom:24px!important}

/* Réduire l’espace autour des séparateurs */
.divider,.devider,.hr,hr{margin-top:24px!important;margin-bottom:24px!important}

/* Cohérence scroll */
h1,h2{scroll-margin-top:90px}
h2{margin-top:0!important}
h2 + p,
h2 + .lead,
h2 + .sub-title,
.title-v1 p,
.headline-center p{margin-top:10px!important}

/* ------------------------------------------------------------
   10) Accueil — Cartes “À la une”
   ------------------------------------------------------------ */
.section--highlights{
  padding-top:24px!important;
  padding-bottom:36px!important;
}

/* Grille : mobile 1, tablette 2, desktop 3 */
.highlights-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:640px){
  .highlights-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .highlights-grid{grid-template-columns:repeat(3,1fr)}
}

.highlight-card{
  display:flex;
  flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.06);
  text-decoration:none;
  color:inherit;
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.highlight-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 70px rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce){
  .highlight-card{transition:none}
  .highlight-card:hover{transform:none}
}

.highlight-card:focus{outline:none}
.highlight-card:focus-visible{
  box-shadow:0 0 0 4px rgba(241,93,36,.25), 0 18px 55px rgba(0,0,0,.06);
  border-color:rgba(241,93,36,.35);
}

.highlight-media{
  height:160px;
  background:rgba(0,0,0,.04);
}
@media (min-width:1024px){
  .highlight-media{height:180px}
}

.highlight-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.highlight-body{padding:12px 14px 14px}
.highlight-title{
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 4px;
  font-size:14px;
}
.highlight-text{
  margin:0;
  color:rgba(0,0,0,.72);
  font-size:13px;
  line-height:1.45;
}

/* ------------------------------------------------------------
   11) (Option) Carrousel Owl (si utilisé)
   ------------------------------------------------------------ */
.ipx-highlights-slider{
  padding-top:26px!important;
  padding-bottom:36px!important;
}

.ipx-highlights-head{
  margin-bottom:14px!important;
  text-align:left;
}
.ipx-highlights-title{margin:0 0 6px!important}
.ipx-highlights-sub{
  margin:0!important;
  color:rgba(0,0,0,.68);
}

.ipx-highlights-carousel .owl-stage-outer{
  padding:8px 2px 18px!important;
}

.ipx-hc-item{padding:0 6px!important}

.ipx-highlights-carousel .highlight-card{height:100%}

/* Dots sobres */
.ipx-highlights-carousel .owl-dots .owl-dot span{
  width:7px;
  height:7px;
  margin:5px 4px;
  background:rgba(0,0,0,.18);
}
.ipx-highlights-carousel .owl-dots .owl-dot.active span{
  background:rgba(0,0,0,.55);
}

/* ------------------------------------------------------------
   12) Boutique en iframe (si utilisé)
   ------------------------------------------------------------ */
.shop-frame-wrapper{
  position:relative;
  width:100%;
  height:calc(100vh - 120px);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.08);
}
.shop-frame-wrapper iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ------------------------------------------------------------
   13) Footer
   ------------------------------------------------------------ */
footer,
.footer{
  border-top:1px solid var(--ip-gray-150);
  padding-top:40px;
  padding-bottom:40px;
  background:#fff;
}
footer a{color:var(--ip-gray-700)}
footer a:hover{color:var(--ip-gray-900)}

.ip-muted{color:var(--ip-gray-600)}
.ip-divider{height:1px;background:var(--ip-gray-150);margin:22px 0}

/* ------------------------------------------------------------
   14) Responsive spacing adjustments
   ------------------------------------------------------------ */
@media (max-width:768px){
  .content-lg{padding-top:28px!important;padding-bottom:28px!important}
  .content-md{padding-top:24px!important;padding-bottom:24px!important}
}
/* =========================================================
   HOME — force remove the gap above highlights/cards
   (ultra ciblé : uniquement les blocs de cartes)
   ========================================================= */

/* Si tu utilises .section--highlights (grid) */
.section--highlights{
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Si tu utilises .ipx-highlights-slider (owl) */
.ipx-highlights-slider{
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Le conteneur interne qui peut pousser vers le bas */
.section--highlights .container,
.ipx-highlights-slider .container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Le grid/carrousel ne doit pas rajouter de marge */
.highlights-grid,
.ipx-highlights-carousel{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Si le thème met un “bloc invisible” avant les cartes */
.section--highlights:before,
.ipx-highlights-slider:before{
  display:none !important;
  content:none !important;
}