/* ------------------------------------------------------------------
   catalogue.css — utilitaires complémentaires
   Le fichier style.css est le CSS Tailwind compilé du site d'origine :
   il ne contient QUE les classes utilisées par la page d'accueil.
   Toute classe nouvelle doit donc être définie ici.
   Points de rupture : sm 40rem · md 48rem · lg 64rem · xl 80rem
------------------------------------------------------------------- */

/* --- Espacements --- */
.-my-1        { margin-top:-.25rem; margin-bottom:-.25rem }
.mb-5         { margin-bottom:1.25rem }
.mb-9         { margin-bottom:2.25rem }
.pb-14        { padding-bottom:3.5rem }
.py-14        { padding-top:3.5rem; padding-bottom:3.5rem }
.py-20        { padding-top:5rem; padding-bottom:5rem }
.pt-32        { padding-top:8rem }
.pl-9         { padding-left:2.25rem }
.left-3       { left:.75rem }

/* --- Grille & flux --- */
.items-baseline      { align-items:baseline }
.min-h-\[2rem\]      { min-height:2rem }

/* --- Couleurs --- */
.bg-slate-950            { background-color:#020617 }
.bg-slate-950\/70        { background-color:rgba(2,6,23,.7) }
.border-cyan-500\/10     { border-color:rgba(6,182,212,.10) }
.border-cyan-500\/25     { border-color:rgba(6,182,212,.25) }
.border-slate-800\/60    { border-color:rgba(30,41,59,.60) }
.text-cyan-500\/40       { color:rgba(6,182,212,.40) }
.text-cyan-500\/70       { color:rgba(6,182,212,.70) }
.opacity-85              { opacity:.85 }
.via-\[\#030507\]\/30    { --tw-gradient-via:rgba(3,5,7,.3);
                           --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to) }
.bg-\[radial-gradient\(ellipse_at_top\,rgba\(0\,242\,254\,0\.10\)\,transparent_60\%\)\]{
  background-image:radial-gradient(ellipse at top,rgba(0,242,254,.10),transparent 60%) }
.placeholder\:text-slate-600::placeholder { color:#475569 }

/* --- États --- */
.focus\:border-cyan-500\/50:focus  { border-color:rgba(6,182,212,.5) }
.hover\:bg-white:hover             { background-color:#fff }
.hover\:bg-cyan-500\/10:hover      { background-color:rgba(6,182,212,.10) }
.hover\:border-cyan-500\/40:hover  { border-color:rgba(6,182,212,.40) }
.hover\:gap-3:hover                { gap:.75rem }
.hover\:-translate-y-1\.5:hover    { transform:translateY(-.375rem) }
.hover\:shadow-\[0_20px_50px_-12px_rgba\(0\,242\,254\,0\.18\)\]:hover{
  box-shadow:0 20px 50px -12px rgba(0,242,254,.18) }

/* --- ≥ 640px (sm) --- */
@media (min-width:40rem){
  .sm\:pt-40       { padding-top:10rem }
  .sm\:text-3xl    { font-size:1.875rem; line-height:2.25rem }}

/* --- ≥ 1024px (lg) --- */
@media (min-width:64rem){
  .lg\:grid-cols-\[280px_1fr\] { grid-template-columns:280px minmax(0,1fr) }
  .lg\:gap-7   { gap:1.75rem }
  .lg\:gap-14  { gap:3.5rem }
  .lg\:py-20   { padding-top:5rem; padding-bottom:5rem }
  .lg\:sticky  { position:sticky }
  .lg\:top-28  { top:7rem }
  .lg\:text-4xl{ font-size:2.25rem; line-height:2.5rem }
  .lg\:text-6xl{ font-size:3.75rem; line-height:1 }
}

/* --- ≥ 1280px (xl) --- */
@media (min-width:80rem){
  .xl\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
}

/* --- Accordéon du menu latéral --- */
.cat-sub  { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1) }
.cat-open .cat-sub  { max-height:600px }
.cat-chev { transition:transform .3s }
.cat-open .cat-chev { transform:rotate(90deg) }

/* --- Cartes : hauteur homogène, lien aligné en bas --- */
.cat-card       { display:flex; flex-direction:column }
.cat-card .cat-body { flex:1 1 auto; display:flex; flex-direction:column }
.cat-card .cat-more { margin-top:auto; align-self:flex-start }

/* --- Rythme vertical de la page --- */
.cat-section { padding-top:3.5rem; padding-bottom:4.5rem }
.cat-cta     { padding-top:4.5rem; padding-bottom:5rem }
@media (min-width:64rem){ .cat-section{ padding-top:5rem; padding-bottom:5rem } }

/* --- Champ de recherche : icône parfaitement centrée --- */
#cat-search { line-height:1.25rem }


/* --- Logo : hauteurs du pied de page --- */
@media (min-width:40rem){ .sm\:h-16 { height:4rem } }

/* --- Pastille de langue mobile : masquee des que le selecteur complet apparait --- */
@media (min-width:48rem){ .md\:hidden { display:none } }

/* ------------------------------------------------------------------
   Menu mobile plein ecran.
   Il s'appuyait sur z-[60] et bg-[#030507]/97 : deux valeurs Tailwind
   arbitraires ABSENTES du CSS purge. Le panneau s'ouvrait donc sans
   fond ni z-index : invisible et non cliquable.
------------------------------------------------------------------- */
.ih-menu{ position:fixed; inset:0; z-index:9999; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:1.75rem; padding:2rem; background:rgba(3,5,7,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.ih-menu.is-open{ display:flex }
.ih-menu a{ font-family:inherit; font-size:1.5rem; font-weight:600; line-height:1.4;
  color:#e2e8f0; text-decoration:none; transition:color .2s }
.ih-menu a:hover,.ih-menu a:focus{ color:#00F2FE; outline:none }
.ih-menu .ih-menu-cta{ margin-top:1rem; padding:.85rem 1.9rem; border-radius:.75rem;
  background:#00F2FE; color:#000; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em }
.ih-menu .ih-menu-cta:hover{ background:#fff }
.ih-menu .ih-menu-close{ position:absolute; top:1.25rem; right:1.5rem; font-size:2.5rem;
  line-height:1; color:#cbd5e1; background:none; border:0; cursor:pointer; padding:.25rem .75rem }
.ih-menu .ih-menu-close:hover{ color:#00F2FE }
[dir="rtl"] .ih-menu .ih-menu-close{ right:auto; left:1.5rem }
[dir="rtl"] .ih-menu .ih-menu-cta{ text-transform:none; letter-spacing:0 }

/* ------------------------------------------------------------------
   Catalogue produits — styles dedies (aucune dependance a Tailwind,
   dont le CSS purge ne contient que les classes de la page d'accueil)
------------------------------------------------------------------- */
.ih-wrap{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.ih-wrap{padding:0 1.5rem}}
@media(min-width:1024px){.ih-wrap{padding:0 2rem}}

.ih-fil{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.75rem;color:#64748b;margin-bottom:1.5rem}
.ih-fil a{color:#94a3b8;text-decoration:none}
.ih-fil a:hover{color:#00F2FE}
.ih-fil span.sep{color:rgba(6,182,212,.4)}

.ih-grille{display:grid;gap:1.5rem;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.ih-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.ih-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.ih-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}

.ih-carte{display:flex;flex-direction:column;border-radius:1rem;overflow:hidden;
  background:rgba(15,23,42,.4);border:1px solid rgba(30,41,59,.8);text-decoration:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .4s}
.ih-carte:hover{transform:translateY(-6px);border-color:rgba(6,182,212,.4);
  box-shadow:0 20px 50px -12px rgba(0,242,254,.18)}
.ih-vign{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a0e14;
  display:flex;align-items:center;justify-content:center}
.ih-vign img{width:100%;height:100%;object-fit:contain;padding:.75rem;
  opacity:.92;transition:opacity .5s,transform .7s}
.ih-carte:hover .ih-vign img{opacity:1;transform:scale(1.05)}
.ih-vign.cover img{object-fit:cover;padding:0}
.ih-corps{flex:1 1 auto;display:flex;flex-direction:column;padding:1.25rem}
.ih-marque{font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#00F2FE;margin-bottom:.4rem}
.ih-titre{font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;
  color:#fff;line-height:1.35;margin:0 0 .45rem}
.ih-carte:hover .ih-titre{color:#00F2FE}
.ih-ref{font-size:.7rem;color:#64748b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:.5rem}
.ih-res{font-size:.75rem;color:#94a3b8;line-height:1.65;margin:0 0 .9rem}
.ih-plus{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00F2FE}
.ih-carte:hover .ih-plus{gap:.75rem}
.ih-badge{position:absolute;top:.7rem;right:.7rem;padding:.2rem .55rem;border-radius:999px;
  font-size:.6rem;font-weight:700;background:rgba(3,5,7,.8);border:1px solid rgba(6,182,212,.3);color:#67e8f9}
[dir="rtl"] .ih-badge{right:auto;left:.7rem}
[dir="rtl"] .ih-plus{align-self:flex-end}
[dir="rtl"] .ih-plus svg,[dir="rtl"] .ih-fil svg{transform:scaleX(-1)}

.ih-side{border-radius:1rem;background:rgba(15,23,42,.4);border:1px solid rgba(30,41,59,.8);padding:1.5rem}
.ih-side h2{font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 1.1rem;display:flex;align-items:center;gap:.5rem}
.ih-side h2::before{content:"";width:6px;height:6px;border-radius:50%;background:#00F2FE}
.ih-arbre{list-style:none;margin:0;padding:0}
.ih-arbre>li{border-bottom:1px solid rgba(30,41,59,.6)}
.ih-arbre>li:last-child{border-bottom:0}
.ih-ligne{display:flex;align-items:center;gap:.4rem}
.ih-ligne>a{flex:1 1 auto;display:flex;justify-content:space-between;gap:.75rem;padding:.65rem 0;
  font-size:.8rem;color:#cbd5e1;text-decoration:none;transition:color .2s;min-width:0}
.ih-ligne>a:hover,.ih-ligne>a.actif{color:#00F2FE}
.ih-arbre .cpt{font-size:.65rem;color:#475569;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ih-chev{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;padding:0;border:0;border-radius:.35rem;cursor:pointer;
  background:transparent;color:rgba(6,182,212,.7);transition:transform .3s,color .2s,background .2s}
.ih-chev svg{width:.8rem;height:.8rem}
.ih-chev:hover{color:#00F2FE;background:rgba(6,182,212,.1)}
.ih-noeud.ouvert>.ih-ligne>.ih-chev{transform:rotate(90deg)}
[dir="rtl"] .ih-chev{transform:scaleX(-1)}
[dir="rtl"] .ih-noeud.ouvert>.ih-ligne>.ih-chev{transform:scaleX(-1) rotate(90deg)}
/* Replie par defaut.
   Note : grid-template-rows:0fr ne contraint que la PREMIERE ligne, les
   sous-categories suivantes restaient visibles. On revient a max-height,
   dimensionne large (la branche la plus fournie a 7 entrees). */
.ih-arbre .sous{list-style:none;margin:0;padding:0;
  max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1)}
.ih-noeud.ouvert>.sous{max-height:32rem}
.ih-arbre .sous>li:first-child{padding-top:.15rem}
.ih-arbre .sous>li:last-child{padding-bottom:.6rem}
.ih-arbre .sous a{display:flex;justify-content:space-between;gap:.6rem;
  margin-left:.8rem;padding:.32rem 0 .32rem .7rem;border-left:1px solid rgba(6,182,212,.2);
  font-size:.72rem;color:#64748b;text-decoration:none;transition:color .2s}
[dir="rtl"] .ih-arbre .sous a{margin-left:0;margin-right:.8rem;padding:.32rem .7rem .32rem 0;
  border-left:0;border-right:1px solid rgba(6,182,212,.2)}
.ih-arbre .sous a:hover,.ih-arbre .sous a.actif{color:#00F2FE;border-color:rgba(6,182,212,.6)}

.ih-cherche{position:relative;margin-bottom:1.25rem}
.ih-cherche input{width:100%;padding:.65rem .9rem .65rem 2.3rem;border-radius:.5rem;
  background:rgba(2,6,23,.7);border:1px solid #1e293b;color:#e2e8f0;font-size:.78rem;font-family:inherit}
[dir="rtl"] .ih-cherche input{padding:.65rem 2.3rem .65rem .9rem}
.ih-cherche input::placeholder{color:#475569}
.ih-cherche input:focus{outline:none;border-color:rgba(6,182,212,.5)}
.ih-cherche svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#475569}
[dir="rtl"] .ih-cherche svg{left:auto;right:.75rem}

.ih-cols{display:grid;gap:2.5rem;align-items:start;grid-template-columns:1fr}
@media(min-width:1024px){.ih-cols{grid-template-columns:290px minmax(0,1fr);gap:3rem}
  .ih-cols>aside{position:sticky;top:7rem}}
.ih-vide{text-align:center;color:#64748b;font-size:.85rem;padding:4rem 0}
.ih-compte{font-size:.75rem;color:#64748b;margin-bottom:1.5rem}

/* --- fiche produit --- */
.ih-fiche{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:900px){.ih-fiche{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:3.5rem}}
.ih-photo{border-radius:1rem;overflow:hidden;background:#0a0e14;border:1px solid rgba(30,41,59,.8);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.ih-photo img{max-width:100%;max-height:100%;object-fit:contain}
.ih-h1{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.9rem;line-height:1.25;color:#fff;margin:.4rem 0 .8rem}
@media(min-width:640px){.ih-h1{font-size:2.3rem}}
.ih-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.ih-tag{padding:.3rem .7rem;border-radius:999px;font-size:.68rem;font-weight:600;
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);color:#67e8f9}
.ih-tag.gris{background:rgba(30,41,59,.5);border-color:rgba(51,65,85,.8);color:#94a3b8}
.ih-cta{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.8rem;border-radius:.75rem;
  background:#25D366;color:#04140a;font-weight:700;font-size:.8rem;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5);transition:transform .2s,background .2s}
.ih-cta:hover{background:#22c55e;transform:translateY(-2px)}
.ih-desc{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid rgba(30,41,59,.8);
  color:#cbd5e1;font-size:.875rem;line-height:1.8}
.ih-desc h2,.ih-desc h3{font-family:'Outfit',sans-serif;color:#fff;font-weight:700;
  font-size:1.05rem;margin:1.8rem 0 .7rem}
.ih-desc h4{color:#00F2FE;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:1.5rem 0 .5rem}
.ih-desc p{margin:0 0 .9rem}
.ih-desc ul,.ih-desc ol{margin:0 0 1rem;padding-left:1.2rem}
[dir="rtl"] .ih-desc ul,[dir="rtl"] .ih-desc ol{padding-left:0;padding-right:1.2rem}
.ih-desc li{margin-bottom:.4rem}
.ih-desc .spec-key{display:inline-block;min-width:190px;color:#94a3b8;font-weight:600}
.ih-desc .spec-val{color:#e2e8f0}
.ih-desc a.doc-link{color:#00F2FE;text-decoration:none;border-bottom:1px dotted rgba(0,242,254,.4)}
.ih-desc a.doc-link::after{content:" ↗";font-size:.75em;opacity:.7}
.ih-desc a.doc-link:hover{border-bottom-style:solid}
.ih-desc table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.8rem}
.ih-desc td,.ih-desc th{border:1px solid rgba(30,41,59,.8);padding:.5rem .7rem;text-align:left}
[dir="rtl"] .ih-desc td,[dir="rtl"] .ih-desc th{text-align:right}
.ih-note{margin-top:1rem;font-size:.7rem;color:#475569;line-height:1.6}


/* ------------------------------------------------------------------
   Colonne des categories : barre repliable sur mobile.
   En dessous de 1024 px elle s'empilait au-dessus du contenu et il
   fallait faire defiler 18 lignes avant d'atteindre les produits.
------------------------------------------------------------------- */
.ih-side-tog{display:none}

@media (max-width:1023px){
  .ih-side{padding:0;overflow:hidden}
  .ih-side>.ih-side-corps>h2{display:none}
  .ih-side-tog{
    display:flex;align-items:center;gap:.6rem;width:100%;
    padding:.95rem 1.15rem;border:0;background:transparent;cursor:pointer;
    font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:#fff;text-align:left}
  [dir="rtl"] .ih-side-tog{text-align:right;letter-spacing:0;text-transform:none}
  .ih-side-tog>span:first-child{flex:1 1 auto}
  .ih-side-n{flex:0 0 auto;padding:.1rem .5rem;border-radius:999px;font-size:.65rem;
    font-weight:700;letter-spacing:0;background:rgba(6,182,212,.12);
    border:1px solid rgba(6,182,212,.25);color:#67e8f9}
  .ih-side-tog svg{flex:0 0 auto;width:.95rem;height:.95rem;color:rgba(6,182,212,.8);
    transition:transform .3s}
  .ih-aside.ouvert .ih-side-tog svg{transform:rotate(180deg)}
  .ih-side-corps{max-height:0;overflow:hidden;
    transition:max-height .35s cubic-bezier(.22,1,.36,1)}
  .ih-aside.ouvert .ih-side-corps{max-height:70vh;overflow-y:auto;
    padding:0 1.15rem .5rem;border-top:1px solid rgba(30,41,59,.7)}
  /* sur mobile la colonne passe sous la grille : les cartes d'abord */
  .ih-cols{display:flex;flex-direction:column;gap:2rem}
  .ih-cols>aside{order:2}
}

/* ------------------------------------------------------------------
   Mega-menu Catalogue.
   Le panneau est en position:fixed sous l'en-tete, dont la hauteur
   varie au defilement : elle est publiee par le JS dans --ih-hh.
------------------------------------------------------------------- */
:root{--ih-hh:88px}

.ih-mega-wrap{position:relative;display:flex;align-items:center}
.ih-mega-btn,.ih-mega-btn2{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.ih-mega-fleche{width:.8rem;height:.8rem;transition:transform .25s;opacity:.75}
.ih-mega-btn[aria-expanded="true"] .ih-mega-fleche,
.ih-mega-btn2[aria-expanded="true"] .ih-mega-fleche{transform:rotate(180deg)}

.ih-mega{position:fixed;left:0;right:0;top:var(--ih-hh);z-index:45;
  background:rgba(3,5,7,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(6,182,212,.15);border-bottom:1px solid rgba(6,182,212,.15);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.ih-mega.ouvert{opacity:1;transform:none;pointer-events:auto}
.ih-mega[hidden]{display:none}

.ih-mega-in{max-width:1280px;margin:0 auto;padding:2rem 2rem 1.5rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2rem;
  max-height:calc(100vh - var(--ih-hh) - 4.5rem);overflow-y:auto}
.ih-mega-col{display:flex;flex-direction:column;gap:1.25rem}
.ih-mega-bloc{display:flex;flex-direction:column}
.ih-mega-titre{display:flex;align-items:baseline;gap:.5rem;
  font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.82rem;
  color:#fff;text-decoration:none;margin-bottom:.5rem;transition:color .2s}
.ih-mega-titre:hover{color:#00F2FE}
.ih-mega-n{font-size:.6rem;font-weight:600;color:#475569;font-variant-numeric:tabular-nums}
.ih-mega-sub{display:block;font-size:.74rem;line-height:1.9;color:#94a3b8;
  text-decoration:none;transition:color .2s,padding .2s}
.ih-mega-sub:hover{color:#00F2FE;padding-left:.25rem}
[dir="rtl"] .ih-mega-sub:hover{padding-left:0;padding-right:.25rem}

.ih-mega-pied{max-width:1280px;margin:0 auto;padding:.9rem 2rem;
  border-top:1px solid rgba(30,41,59,.7);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;font-size:.72rem;color:#64748b}
.ih-mega-pied a{color:#00F2FE;text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
[dir="rtl"] .ih-mega-pied a{text-transform:none;letter-spacing:0}
.ih-mega-pied a:hover{color:#fff}

@media (max-width:1023px){ .ih-mega{display:none !important} }

/* --- Catalogue deplie dans le menu mobile --- */
.ih-menu-cat{width:100%;max-width:22rem;margin-top:-.4rem}
.ih-menu-cat-liste{display:none;max-height:45vh;overflow-y:auto;
  margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(30,41,59,.8)}
.ih-menu-cat.ouvert .ih-menu-cat-liste{display:block}
.ih-menu-cat-liste a{display:flex;justify-content:space-between;gap:.75rem;
  padding:.5rem .2rem;font-size:.95rem;font-weight:500;color:#94a3b8}
.ih-menu-cat-liste a:hover{color:#00F2FE}
.ih-menu-cat-liste .n{font-size:.7rem;color:#475569}

/* ------------------------------------------------------------------
   Pages services
------------------------------------------------------------------- */
.ih-intro{font-size:1.02rem;line-height:1.9;color:#cbd5e1;max-width:46rem;margin:0 0 2rem}
.ih-h2{font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.35rem;
  color:#fff;margin:3.5rem 0 1.5rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(30,41,59,.8)}
.ih-benefs{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:768px){.ih-benefs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ih-benef{padding:1.35rem 1.5rem;border-radius:.9rem;
  background:rgba(15,23,42,.4);border:1px solid rgba(30,41,59,.8)}
.ih-benef h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;color:#00F2FE;margin:0 0 .5rem}
.ih-benef p{margin:0;font-size:.85rem;line-height:1.75;color:#94a3b8}
.ih-etapes{counter-reset:e;list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ih-etapes li{counter-increment:e;position:relative;padding-left:3.2rem}
[dir="rtl"] .ih-etapes li{padding-left:0;padding-right:3.2rem}
.ih-etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:-.15rem;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.15rem;color:rgba(6,182,212,.45)}
[dir="rtl"] .ih-etapes li::before{left:auto;right:0}
.ih-etapes h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:.92rem;color:#fff;margin:0 0 .25rem}
.ih-etapes p{margin:0;font-size:.83rem;line-height:1.7;color:#94a3b8}
.ih-mat{font-size:.85rem;line-height:1.85;color:#94a3b8;max-width:46rem;margin:0}
.ih-zone{margin:2rem 0 0;font-size:.78rem;color:#64748b;font-style:italic}
.ih-autres{margin-top:.5rem;gap:.5rem}
.ih-autres a{text-decoration:none}
.ih-autres a:hover{color:#00F2FE;border-color:rgba(6,182,212,.4)}

/* ------------------------------------------------------------------
   Cartes produits en blanc.
   Les visuels fournisseurs sont sur fond blanc : une carte sombre
   dessinait un cadre noir disgracieux autour de chaque photo.
------------------------------------------------------------------- */
.ih-carte.ih-produit{background:#fff;border-color:#e2e8f0}
.ih-carte.ih-produit:hover{border-color:#00F2FE;
  box-shadow:0 20px 50px -12px rgba(0,242,254,.28)}
.ih-carte.ih-produit .ih-vign{background:#fff}
.ih-carte.ih-produit .ih-vign img{opacity:1}
.ih-carte.ih-produit .ih-titre{color:#0f172a}
.ih-carte.ih-produit:hover .ih-titre{color:#0369a1}
.ih-carte.ih-produit .ih-marque{color:#0369a1}
.ih-carte.ih-produit .ih-ref{color:#64748b}
.ih-carte.ih-produit .ih-res{color:#475569}
.ih-carte.ih-produit .ih-plus{color:#0369a1}
.ih-carte.ih-produit .ih-badge{background:rgba(255,255,255,.9);
  border-color:#cbd5e1;color:#0f172a}

/* --- Mega-menu Services : liste simple, 4 colonnes --- */
.ih-mega-serv-in{grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem 2rem;
  padding:1.75rem 2rem 1.25rem}
.ih-mega-serv-in .ih-mega-col{gap:0}
.ih-mega-serv-in .ih-mega-sub{font-size:.8rem;line-height:2.1;color:#cbd5e1}
.ih-mega-serv-in .ih-mega-sub:hover{color:#00F2FE}

/* ------------------------------------------------------------------
   Recherche globale : bouton loupe dans l'en-tete + panneau
------------------------------------------------------------------- */
.ih-loupe{display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;padding:0;border-radius:999px;cursor:pointer;
  background:rgba(15,23,42,.8);border:1px solid rgba(6,182,212,.2);color:#cbd5e1;
  transition:color .2s,border-color .2s,background .2s}
.ih-loupe:hover{color:#00F2FE;border-color:rgba(6,182,212,.5);background:rgba(15,23,42,1)}
.ih-loupe svg{width:.95rem;height:.95rem}
.ih-loupe-mob{width:2rem;height:2rem;border-radius:.5rem}

.ih-search{position:fixed;inset:0;z-index:9998;display:flex;justify-content:center;
  padding:6rem 1rem 2rem;background:rgba(3,5,7,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .2s}
.ih-search.ouvert{opacity:1}
.ih-search[hidden]{display:none}
.ih-search-boite{width:100%;max-width:44rem;align-self:flex-start;
  background:#080d14;border:1px solid rgba(6,182,212,.25);border-radius:1rem;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.9);overflow:hidden;
  transform:translateY(-10px);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.ih-search.ouvert .ih-search-boite{transform:none}
.ih-search-haut{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;
  border-bottom:1px solid rgba(30,41,59,.8)}
.ih-search-haut>svg{flex:0 0 auto;width:1.1rem;height:1.1rem;color:#00F2FE}
.ih-search-haut input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
  color:#e2e8f0;font-family:inherit;font-size:1rem}
.ih-search-haut input::placeholder{color:#475569}
.ih-search-haut input::-webkit-search-cancel-button{display:none}
.ih-search-x{flex:0 0 auto;background:none;border:0;color:#64748b;font-size:1.6rem;
  line-height:1;cursor:pointer;padding:0 .3rem}
.ih-search-x:hover{color:#00F2FE}
.ih-search-res{max-height:min(62vh,32rem);overflow-y:auto;padding:.5rem 0 .8rem}
.ih-search-aide,.ih-search-rien{margin:0;padding:1.6rem 1.2rem;text-align:center;
  font-size:.82rem;color:#475569}
.ih-search-groupe{padding:.7rem 1.2rem .35rem;font-size:.62rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#00F2FE}
[dir="rtl"] .ih-search-groupe{letter-spacing:0;text-transform:none}
.ih-search-res a{display:flex;align-items:center;gap:.85rem;padding:.55rem 1.2rem;
  text-decoration:none;color:#cbd5e1;transition:background .15s}
.ih-search-res a:hover,.ih-search-res a.vise{background:rgba(6,182,212,.1);color:#fff}
.ih-search-res a img{flex:0 0 auto;width:2.4rem;height:2.4rem;object-fit:contain;
  background:#fff;border-radius:.4rem;padding:.15rem}
.ih-search-nom{flex:1 1 auto;min-width:0;font-size:.85rem;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-search-sec{flex:0 0 auto;font-size:.68rem;color:#64748b;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media (max-width:640px){
  .ih-search{padding:4.5rem .6rem 1rem}
  .ih-search-res{max-height:70vh}
}

/* ------------------------------------------------------------------
   Carrousel du hero : fondu enchaine entre les visuels
------------------------------------------------------------------- */
.ih-hero{position:absolute;inset:0}
.ih-hero-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;transform:scale(1.06);
  opacity:0;transition:opacity 1.6s ease-in-out;will-change:opacity}
.ih-hero-img.actif{opacity:1}
/* leger mouvement pendant l'affichage : le plan fixe fait carte postale */
@media (prefers-reduced-motion: no-preference){
  .ih-hero-img.actif{animation:ih-zoom 9s ease-out forwards}
}
@keyframes ih-zoom{from{transform:scale(1.06)}to{transform:scale(1.12)}}

.ih-hero-points{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  z-index:12;display:flex;gap:.5rem}
.ih-hero-points button{width:1.6rem;height:.2rem;padding:0;border:0;cursor:pointer;
  border-radius:999px;background:rgba(255,255,255,.28);transition:background .3s,width .3s}
.ih-hero-points button.actif{background:#00F2FE;width:2.4rem}
.ih-hero-points button:hover{background:rgba(0,242,254,.7)}
@media (max-width:640px){ .ih-hero-points{bottom:1rem} }

/* ==================================================================
   Mise en page desktop.
   Le contenu plafonnait a 1280 px alors que l'en-tete Tailwind monte
   a 1536 px : logo et titres n'etaient pas alignes, et les cartes
   tombaient a 202 px de large sur un ecran de 1920.
================================================================== */
.ih-wrap{max-width:1536px}

/* --- colonne laterale plus large quand la place le permet --- */
@media (min-width:1280px){
  .ih-cols{grid-template-columns:320px minmax(0,1fr);gap:3.5rem}
}

/* --- grille : des cartes qui respirent au lieu de se multiplier --- */
@media (min-width:1536px){
  .ih-grille{gap:1.75rem}
}

/* --- confort de lecture : on borne la longueur de ligne, pas la page --- */
.ih-intro{max-width:64ch}
.ih-mat{max-width:72ch}
.ih-desc{max-width:80ch}

/* --- fiches services : 3 colonnes de benefices sur grand ecran --- */
@media (min-width:1400px){
  .ih-benefs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* --- etapes sur deux colonnes : evite une colonne unique interminable --- */
@media (min-width:1024px){
  .ih-etapes{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 3rem}
}

/* --- fiche produit : le visuel profite de la largeur --- */
@media (min-width:1400px){
  .ih-fiche{grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:4.5rem}
}

/* --- titres : un cran au-dessus sur les tres grands ecrans --- */
@media (min-width:1536px){
  .ih-h1{font-size:2.9rem}
  .ih-h2{font-size:1.5rem}
}

/* ==================================================================
   Densite desktop.
   Audit : « un layout mobile agrandi ». Trois corrections — un visuel
   qui ancre le haut des fiches, des grilles plus denses, et des
   elements d'interface ramenes a une taille de souris.
================================================================== */

/* --- fiches services : texte a gauche, visuel a droite --- */
.ih-serv-haut{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
.ih-serv-vis{display:none}
@media (min-width:1024px){
  .ih-serv-haut{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:4rem;
    margin-bottom:1rem}
  .ih-serv-vis{display:block;border-radius:1rem;overflow:hidden;
    border:1px solid rgba(30,41,59,.8);background:#0a0e14;aspect-ratio:4/3}
  .ih-serv-vis img{width:100%;height:100%;object-fit:cover;opacity:.85}
  .ih-serv-haut .ih-intro{max-width:none}
}

/* --- catalogue : plus de colonnes sur les grands ecrans --- */
@media (min-width:1536px){ .ih-grille{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1800px){ .ih-grille{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* --- cartes moins creuses --- */
@media (min-width:1024px){
  .ih-corps{padding:1rem 1.1rem}
  .ih-titre{font-size:.92rem}
  .ih-res{font-size:.72rem;margin-bottom:.7rem}
}

/* --- benefices : 3 puis 4 colonnes, padding resserre --- */
@media (min-width:1280px){ .ih-benefs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1700px){ .ih-benefs{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .ih-benef{padding:1.1rem 1.2rem} }

/* --- interface : taille souris, pas taille pouce --- */
@media (min-width:1024px){
  .ih-cta{padding:.8rem 1.5rem;font-size:.76rem}
  a[aria-label="WhatsApp Contact"],a[aria-label="اتصال واتساب"]{
    width:3rem;height:3rem;bottom:1.25rem;right:1.25rem}
  [dir="rtl"] a[aria-label="اتصال واتساب"]{right:auto;left:1.25rem}
}

/* --- fiches services : sous-titre et phrase de chute --- */
.ih-soustitre{font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:600;
  font-size:1.15rem;line-height:1.5;color:#00F2FE;margin:-.4rem 0 1.2rem;max-width:34ch}
.ih-intro p{margin:0 0 1rem}
.ih-intro p:last-child{margin-bottom:0}
.ih-chute{margin:2.5rem 0 0;padding:1.1rem 1.4rem;border-radius:.8rem;
  background:rgba(6,182,212,.07);border-left:2px solid #00F2FE;
  font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;color:#e2e8f0}
[dir="rtl"] .ih-chute{border-left:0;border-right:2px solid #00F2FE}

/* ------------------------------------------------------------------
   Selecteur de langue a 4 entrees
------------------------------------------------------------------- */
.ih-lang{position:relative;display:inline-flex}
.ih-lang-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.35rem .7rem;border-radius:999px;font-family:inherit;font-size:.72rem;font-weight:700;
  background:rgba(15,23,42,.8);border:1px solid rgba(6,182,212,.2);color:#cbd5e1;
  transition:color .2s,border-color .2s}
.ih-lang-btn:hover,.ih-lang.ouvert .ih-lang-btn{color:#00F2FE;border-color:rgba(6,182,212,.5)}
.ih-globe{width:.9rem;height:.9rem;color:#00F2FE;flex:0 0 auto}
.ih-lang-chev{width:.7rem;height:.7rem;opacity:.7;transition:transform .25s}
.ih-lang.ouvert .ih-lang-chev{transform:rotate(180deg)}
.ih-lang-menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:60;min-width:11rem;
  padding:.35rem;border-radius:.7rem;background:rgba(8,13,20,.98);
  border:1px solid rgba(6,182,212,.25);box-shadow:0 20px 40px -12px rgba(0,0,0,.9);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s}
[dir="rtl"] .ih-lang-menu{right:auto;left:0}
.ih-lang.ouvert .ih-lang-menu{opacity:1;transform:none;pointer-events:auto}
.ih-lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:.45rem;
  font-size:.8rem;color:#cbd5e1;text-decoration:none;transition:background .15s,color .15s}
.ih-lang-menu a:hover{background:rgba(6,182,212,.12);color:#fff}
.ih-lang-menu a.actif{color:#00F2FE}
.ih-lang-court{flex:0 0 auto;width:1.8rem;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  color:#475569}
.ih-lang-menu a.actif .ih-lang-court{color:#00F2FE}
.ih-lang-mob .ih-lang-btn{padding:.3rem .5rem;font-size:.68rem}
.ih-lang-mob .ih-lang-menu{min-width:9.5rem}
@media (min-width:768px){ .ih-lang-mob{display:none} }

/* ==================================================================
   Fond general eclairci.
   #030507 etait quasi noir : les photos du hero disparaissaient sous
   les degrades et les cartes se detachaient mal. On passe a #0a1018,
   toujours sombre mais lisible.
================================================================== */
body,.bg-\[\#030507\]{background-color:#0a1018 !important}
.bg-\[\#020305\]{background-color:#070c13 !important}
.bg-\[\#060B12\]\/80{background-color:rgba(13,20,31,.85) !important}

/* degrades du hero : moins opaques, la photo redevient visible */
.from-\[\#030507\]{--tw-gradient-from:rgba(10,16,24,.92) var(--tw-gradient-from-position) !important}
.via-\[\#030507\]\/90{--tw-gradient-via:rgba(10,16,24,.55) var(--tw-gradient-via-position) !important}
.to-\[\#030507\]\/60{--tw-gradient-to:rgba(10,16,24,.15) var(--tw-gradient-to-position) !important}
.to-\[\#030507\]\/80{--tw-gradient-to:rgba(10,16,24,.7) var(--tw-gradient-to-position) !important}

/* surfaces : cartes, panneaux, menus */
.ih-carte,.ih-side,.ih-benef{background:rgba(21,31,46,.55)}
.ih-carte{border-color:rgba(45,60,82,.85)}
.ih-side,.ih-benef{border-color:rgba(45,60,82,.8)}
.ih-vign{background:#111a26}
.ih-mega,.ih-menu{background:rgba(10,16,24,.97)}
.ih-search{background:rgba(10,16,24,.88)}
.ih-search-boite,.ih-lang-menu{background:#111a26}
.ih-photo{background:#111a26;border-color:rgba(45,60,82,.8)}
.ih-serv-vis{background:#111a26;border-color:rgba(45,60,82,.8)}
.ih-cherche input,.ih-lang-btn,.ih-loupe{background:rgba(17,26,38,.9)}
.ih-h2{border-bottom-color:rgba(45,60,82,.8)}
.ih-desc{border-top-color:rgba(45,60,82,.8)}
.ih-arbre>li{border-bottom-color:rgba(45,60,82,.7)}

/* --- pastilles du hero devenues cliquables --- */
.ih-pastille{text-decoration:none;transition:transform .25s,border-color .25s,background .25s}
.ih-pastille:hover{transform:translateY(-3px);border-color:rgba(6,182,212,.55)}
.ih-pastille:hover h3{color:#00F2FE}

/* --- filtres du portfolio --- */
.ih-filtre{cursor:pointer}
.ih-projet{transition:opacity .3s,transform .3s}
.ih-projet.masque{display:none}

/* --- bloc coordonnees : agrandi et cliquable --- */
.ih-contact-t{font-size:1rem;line-height:1.4}
@media (min-width:768px){ .ih-contact-t{font-size:1.05rem} }
.ih-contact-val{margin-top:.35rem;font-size:.95rem;line-height:1.85;color:#cbd5e1}
@media (min-width:768px){ .ih-contact-val{font-size:1.02rem} }
.ih-contact-val a{color:#cbd5e1;text-decoration:none;transition:color .2s}
.ih-contact-val a:hover{color:#00F2FE}
/* l'adresse postale reste secondaire */
.ih-contact-t + .text-xs{font-size:.85rem;line-height:1.7}

/* --- bloc explicatif des fiches services --- */
.ih-bloc{font-size:.92rem;line-height:1.9;color:#cbd5e1;max-width:72ch;margin:0}

/* ------------------------------------------------------------------
   Fiches services : surtitre, comparatif de technologies, solutions
------------------------------------------------------------------- */
.ih-surtitre{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.6rem;
  font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#00F2FE}
.ih-surtitre::before{content:"";width:1.6rem;height:2px;background:#00F2FE}
[dir="rtl"] .ih-surtitre{letter-spacing:0;text-transform:none}

.ih-technos{display:grid;gap:1.25rem;grid-template-columns:1fr;margin:2.5rem 0 0}
@media (min-width:900px){ .ih-technos{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem} }
.ih-techno{display:flex;flex-direction:column;padding:1.5rem;border-radius:1rem;
  background:rgba(21,31,46,.55);border:1px solid rgba(45,60,82,.85);
  transition:border-color .3s,transform .3s}
.ih-techno:hover{border-color:rgba(6,182,212,.45);transform:translateY(-4px)}
.ih-techno h3{font-family:'Outfit','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;
  color:#fff;margin:0 0 .7rem}
.ih-techno p{flex:1 1 auto;margin:0 0 1.1rem;font-size:.85rem;line-height:1.75;color:#94a3b8}
.ih-techno-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ih-techno-tags span{padding:.25rem .6rem;border-radius:999px;font-size:.66rem;font-weight:600;
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.25);color:#67e8f9}

.ih-solutions{display:flex;flex-wrap:wrap;gap:.6rem}
.ih-solutions span{display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:.7rem;font-size:.85rem;color:#cbd5e1;
  background:rgba(21,31,46,.55);border:1px solid rgba(45,60,82,.85)}
.ih-solutions span::before{content:"";width:.4rem;height:.4rem;border-radius:50%;
  background:#00F2FE;flex:0 0 auto}