:root{
  --teal:#16657F; --teal-dark:#0C3B4C; --teal-light:#2FA8C4;
  --tint:#E8F2F5; --bg:#fff; --ink:#12313C; --muted:#5B7580; --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.15}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-light);margin-bottom:14px}
.btn{display:inline-block;padding:15px 32px;border-radius:12px;font-weight:600;font-size:.95rem;transition:.25s}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--teal)}
.btn-white:hover{transform:translateY(-2px)}
.img{background-size:cover;background-position:center;background-color:var(--tint)}

/* NAV */
/* NAV */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;background:linear-gradient(180deg,rgba(12,59,76,.6),transparent)}
header.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(12,59,76,.08)}

/* ⬇️ CES 4 LIGNES MANQUAIENT : elles mettent le menu en ligne */
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;font-family:'Sora';font-weight:700;color:#fff;font-size:1rem;letter-spacing:.05em}
.logo svg{width:75px;height:75px}
.nav ul{display:flex;gap:30px;list-style:none;font-weight:500;font-size:.92rem}

header.solid .logo{color:var(--teal)}
.nav ul a{color:rgba(255,255,255,.85);position:relative;text-decoration:none;padding-bottom:4px}
header.solid .nav ul a{color:var(--muted)}
.nav ul a:hover{color:var(--teal-light)!important}
.nav ul a.active{color:#fff;font-weight:700}
header.solid .nav ul a.active{color:var(--teal)}
.burger{display:none;background:none;border:none;font-size:1.7rem;color:#fff;cursor:pointer}
header.solid .burger{color:var(--teal)}

/* Pages internes : le menu est blanc en permanence */
header.always-solid .logo{color:var(--teal)}
header.always-solid .nav ul a{color:var(--muted)}
header.always-solid .nav ul a.active{color:var(--teal)}
header.always-solid .burger{color:var(--teal)}

/* Le trait sous le lien : animé au survol, fixe sur la page en cours */
.nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}

/* HERO plein écran */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;color:#fff;
  background-image:linear-gradient(100deg,rgba(12,59,76,.94) 20%,rgba(12,59,76,.55) 65%,rgba(12,59,76,.35));
  background-size:cover;background-position:center;background-color:var(--teal-dark)}
.hero-inner{padding-top:120px;padding-bottom:80px}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;max-width:16ch}
.hero h1 span{color:var(--teal-light)}
.hero p{margin:22px 0 34px;font-size:1.12rem;color:#D9EEF4;max-width:44ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;flex-wrap:wrap;gap:40px;align-items:center;margin-top:40px}
.hb{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600;color:#fff}
.hb-icon{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;
         justify-content:center;border-radius:12px;background:rgba(255,255,255,.07);
         box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff}
.hb-icon svg{width:23px;height:23px;display:block}

section{padding:30px 20px}
.sec-head{max-width:600px;margin-bottom:48px;margin-top:20px}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.3rem);color:var(--teal-dark)}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}

/* PRESENTATION — collage d'images */
.pres-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:16px}
.collage .img{border-radius:var(--radius)}
.collage .img:first-child{grid-row:1/3;border-radius:var(--radius)}
.pres-txt h2{font-size:2rem;color:var(--teal-dark);margin-bottom:18px}
.pres-txt p{color:var(--muted);font-size:1.02rem;margin-bottom:24px}
.pres-stats{display:flex;gap:0;border-top:1px solid #E3EDF1;padding-top:24px}
.ps{flex:1}
.ps b{display:block;font-family:'Sora';font-size:1.7rem;color:var(--teal)}
.ps small{color:var(--muted);font-size:.8rem}

/* DOMAINES — grandes cartes images */
.domains{background:#F7FAFB}
.dom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dom{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;transition:.35s}
.dom:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(12,59,76,.18)}
.dom .img{position:absolute;inset:0;transition:.5s}
.dom:hover .img{transform:scale(1.06)}
.dom::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,59,76,.9))}
.dom .cap{position:relative;z-index:2;padding:26px;color:#fff}
.dom .cap h3{font-size:1.2rem;margin-bottom:4px}
.dom .cap small{color:#BFE3ED;font-size:.85rem}

/* SERVICES — bandeau image + 3 points */
.svc-band{position:relative;border-radius:24px;overflow:hidden;min-height:460px;display:flex;align-items:center;color:#fff;
  background-image:linear-gradient(100deg,rgba(12,59,76,.94) 30%,rgba(12,59,76,.62));
  background-size:cover;background-position:center;background-color:var(--teal-dark)}
.svc-inner{padding:60px;max-width:640px}
.svc-item{display:flex;gap:18px;margin-top:26px}
.svc-item span{width:50px;height:50px;flex:none;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.svc-item h3{font-size:1.08rem;margin-bottom:4px}
.svc-item p{font-size:.9rem;color:#C8DFE8}

/* GALERIE PRODUITS */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal{position:relative;height:220px;border-radius:14px;overflow:hidden}
.gal .img{position:absolute;inset:0;transition:.4s}
.gal:hover .img{transform:scale(1.07)}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,59,76,.85))}
.gal b{position:absolute;bottom:16px;left:16px;right:16px;z-index:2;color:#fff;font-size:.88rem;font-weight:600}

/* SHOP teaser + BLOG compacts */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tease{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff}
.tease .img{position:absolute;inset:0}
.tease::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,59,76,.2),rgba(12,59,76,.9))}
.tease .cap{position:relative;z-index:2;padding:32px}
.tease h3{font-size:1.4rem;margin:6px 0 10px}
.tease p{font-size:.92rem;color:#CFE7EF;margin-bottom:18px;max-width:40ch}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{border-radius:var(--radius);overflow:hidden;border:1px solid #E3EDF1;background:#fff;transition:.3s}
.post:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(12,59,76,.12)}
.post .img{height:190px;position:relative}
.post .tag{position:absolute;top:14px;left:14px;background:#fff;color:var(--teal);font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.post .body{padding:22px}
.post time{font-size:.78rem;color:var(--muted)}
.post h3{font-size:1.05rem;margin:8px 0 8px;color:var(--teal-dark)}
.post p{font-size:.9rem;color:var(--muted)}

/* CONTACT */
.contact{background:var(--teal-dark);color:#fff;text-align:center}
.contact h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:16px}
.contact p{color:#A9C7D2;max-width:50ch;margin:0 auto 34px}
.c-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.c-row a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:13px 24px;border-radius:12px;font-size:.92rem;font-weight:500;transition:.2s}
.c-row a:hover{background:var(--teal-light);border-color:var(--teal-light)}
footer{background:#082735;color:#7FA2AF;text-align:center;padding:30px 0;font-size:.84rem}

@media(max-width:960px){
  .pres-grid,.duo{grid-template-columns:1fr}
  .dom-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
  .nav ul{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;padding:24px;gap:18px;box-shadow:0 20px 40px rgba(12,59,76,.12)}
  .nav ul.open{display:flex}
  .nav ul a{color:var(--muted)!important}
  .burger{display:block}
  .svc-inner{padding:40px 28px}

  /* ⬇️ Les 2 lignes à ajouter : trait à gauche sur téléphone */
  .nav ul a::after{display:none}
  .nav ul a.active{color:var(--teal)!important;border-left:3px solid var(--teal);padding-left:12px}
}
@media (max-width:640px){
    .hero-badges{flex-direction:column;align-items:flex-start;gap:22px}
}
@media(max-width:600px){
  .dom-grid,.gal-grid{grid-template-columns:1fr}
  section{padding:60px 20px}
  .collage{grid-template-rows:160px 160px}
}

/* Apparition en douceur des sections (gérée par js/script.js) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* =========================================================
   PAGES INTERNES (entreprise, boutique, blog, etc.)
   ========================================================= */
header.always-solid{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(12,59,76,.08)}
header.always-solid .logo{color:var(--teal)}
header.always-solid .nav ul a{color:var(--muted)}
header.always-solid .burger{color:var(--teal)}
.icons{display:flex;gap:10px;align-items:center}
.icon-link{position:relative;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.05rem;transition:.2s}
.icon-link:hover{transform:translateY(-2px)}
header.solid .icon-link,header.always-solid .icon-link{background:var(--tint)}
.icon-link b{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:999px;background:#E4572E;color:#fff;font-size:.66rem;font-family:'Inter';display:flex;align-items:center;justify-content:center;padding:0 4px}

.page-hero{background:linear-gradient(120deg,var(--teal-dark),var(--teal));color:#fff;padding:150px 0 64px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-80px;top:-60px;width:340px;height:340px;background:#fff;opacity:.06;clip-path:polygon(0 0,100% 0,100% 100%)}
.page-hero .crumb{font-size:.84rem;color:#BFE3ED;margin-bottom:10px}
.page-hero .crumb a:hover{color:#fff;text-decoration:underline}
.page-hero h1{font-family:'Sora';font-size:clamp(1.8rem,4vw,2.6rem)}
.page-hero p{color:#D9EEF4;max-width:60ch;margin-top:10px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:30px}
.card h3{font-size:1.15rem;color:var(--teal-dark);margin-bottom:10px}
.card p{font-size:.93rem;color:var(--muted)}

/* Formulaires */
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px;color:var(--teal-dark)}
.input{width:100%;padding:13px 16px;border:1.5px solid #D5E5EB;border-radius:10px;font:inherit;font-size:.95rem;background:#fff;transition:.2s}
.input:focus{outline:none;border-color:var(--teal)}
textarea.input{min-height:130px;resize:vertical}
.radio-row{display:flex;gap:12px;flex-wrap:wrap}
.radio-card{flex:1;min-width:150px;border:1.5px solid #D5E5EB;border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;cursor:pointer;font-size:.9rem;font-weight:500;transition:.2s}
.radio-card:hover{border-color:var(--teal)}
.radio-card input{accent-color:var(--teal)}
.msg{padding:14px 18px;border-radius:12px;font-size:.9rem;margin-bottom:20px;display:none}
.msg.ok{display:block;background:#E7F6EC;color:#1B7A3D;border:1px solid #BFE5CC}
.msg.err{display:block;background:#FCECEA;color:#B3352C;border:1px solid #F2C9C4}

/* Boutique */
.shop-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:32px}
.pill{padding:9px 18px;border-radius:999px;border:1.5px solid #D5E5EB;background:#fff;font:inherit;font-size:.86rem;font-weight:500;color:var(--muted);cursor:pointer;transition:.2s}
.pill.on,.pill:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.search{flex:1;min-width:200px;max-width:320px;margin-left:auto}
.prod{background:#fff;border:1px solid #E3EDF1;border-radius:16px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.prod:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(12,59,76,.12)}
.prod .ph{height:180px;background:linear-gradient(135deg,var(--tint),#CDE5EC);display:flex;align-items:center;justify-content:center;font-size:3rem;background-size:cover;background-position:center}
.prod .body{padding:18px;display:flex;flex-direction:column;flex:1}
.prod .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-light);font-weight:600}
.prod h3{font-size:1rem;margin:6px 0 10px;color:var(--teal-dark);font-family:'Sora'}
.prod .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.prod .price{font-family:'Sora';font-weight:700;color:var(--teal)}
.prod .add{width:40px;height:40px;border-radius:10px;background:var(--tint);border:none;color:var(--teal);font-size:1.25rem;cursor:pointer;transition:.2s}
.prod .add:hover{background:var(--teal);color:#fff}

/* Fiche produit */
.prod-page{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.prod-page .photo{height:420px;border-radius:20px;background:linear-gradient(135deg,var(--tint),#CDE5EC);display:flex;align-items:center;justify-content:center;font-size:6rem;background-size:cover;background-position:center}
.prod-page .price{font-family:'Sora';font-size:1.9rem;font-weight:800;color:var(--teal);margin:16px 0}
.qty{display:inline-flex;align-items:center;border:1.5px solid #D5E5EB;border-radius:12px;overflow:hidden}
.qty button{width:42px;height:44px;border:none;background:#fff;font-size:1.2rem;color:var(--teal);cursor:pointer}
.qty button:hover{background:var(--tint)}
.qty input{width:52px;height:44px;border:none;text-align:center;font:inherit;font-weight:600}

/* Panier */
.cart-line{display:grid;grid-template-columns:80px 1fr auto auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid #E3EDF1}
.cart-line .ph{width:80px;height:80px;border-radius:12px;background:linear-gradient(135deg,var(--tint),#CDE5EC);display:flex;align-items:center;justify-content:center;font-size:2rem;background-size:cover;background-position:center}
.cart-line h3{font-size:.98rem;color:var(--teal-dark)}
.cart-line .sup{background:none;border:none;color:#B3352C;cursor:pointer;font-size:1.1rem}
.totaux{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:28px;position:sticky;top:100px}
.totaux .ligne{display:flex;justify-content:space-between;padding:10px 0;font-size:.94rem;color:var(--muted)}
.totaux .ligne.total{border-top:1px solid #E3EDF1;margin-top:8px;padding-top:16px;font-family:'Sora';font-weight:700;font-size:1.1rem;color:var(--teal-dark)}
.vide{text-align:center;padding:60px 20px;color:var(--muted)}
.vide span{font-size:3rem;display:block;margin-bottom:14px}

/* Compte / commandes */
.tabs{display:flex;gap:10px;margin-bottom:26px}
.tab{padding:10px 22px;border-radius:999px;border:1.5px solid #D5E5EB;background:#fff;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer}
.tab.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.commande{border:1px solid #E3EDF1;border-radius:14px;padding:20px;margin-bottom:16px;background:#fff}
.commande .haut{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.commande .num{font-family:'Sora';font-weight:700;color:var(--teal-dark)}
.badge{font-size:.74rem;font-weight:600;padding:5px 12px;border-radius:999px;background:#FFF4E0;color:#9A6B00}
.commande ul{list-style:none;font-size:.88rem;color:var(--muted)}

/* Blog interne */
.article-corps{max-width:760px;margin:0 auto;font-size:1.02rem;color:#3A5560}
.article-corps p{margin-bottom:18px}
.article-corps h2{color:var(--teal-dark);font-size:1.4rem;margin:28px 0 12px}
.article-img{height:380px;border-radius:20px;background-size:cover;background-position:center;margin-bottom:34px}

@media(max-width:960px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .prod-page{grid-template-columns:1fr}
  .prod-page .photo{height:300px}
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cart-line{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
  .cart-line .ph{width:64px;height:64px}
  .search{max-width:none;margin-left:0}
}

/* =========================================================
   COMPLEMENTS (pagination, alertes, formulaires)
   ========================================================= */
.flash{position:relative}
.alert{padding:14px 18px;border-radius:12px;font-size:.92rem;margin-bottom:18px;border:1px solid transparent}
.alert-success{background:#E7F6EC;color:#1B7A3D;border-color:#BFE5CC}
.alert-error{background:#FCECEA;color:#B3352C;border-color:#F2C9C4}
.alert ul{margin:6px 0 0 18px}
.error-text{display:block;color:#B3352C;font-size:.84rem;margin-top:6px}
.input.is-invalid{border-color:#B3352C}
.form-hint{display:block;color:var(--muted);font-size:.82rem;margin-top:6px}
.required{color:#B3352C}

.pagination{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:40px;list-style:none}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:10px;border:1px solid #D5E5EB;background:#fff;color:var(--muted);font-size:.9rem;font-weight:600}
.pagination a:hover{border-color:var(--teal);color:var(--teal)}
.pagination .is-current span{background:var(--teal);border-color:var(--teal);color:#fff}
.pagination .is-disabled span{opacity:.45}

.badge-soft{display:inline-block;font-size:.74rem;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--tint);color:var(--teal)}
.badge-orange{background:#FFF4E0;color:#9A6B00}
.badge-blue{background:#E4EFFB;color:#1F5FA8}
.badge-purple{background:#EFE6FB;color:#5B34A0}
.badge-green{background:#E7F6EC;color:#1B7A3D}
.badge-red{background:#FCECEA;color:#B3352C}

.prod .ph a{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.stock-out{color:#B3352C;font-size:.82rem;font-weight:600}
.btn-block{display:block;width:100%;text-align:center}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-line{border:2px solid var(--teal);color:var(--teal);background:#fff}
.btn-line:hover{background:var(--tint)}
.btn-danger{background:#B3352C;color:#fff}
.link{color:var(--teal);text-decoration:underline}
.text-muted{color:var(--muted)}
.mt-2{margin-top:14px}
.mt-3{margin-top:22px}
.center{text-align:center}
.inline-form{display:inline}

.social-links{display:flex;gap:12px;justify-content:center;margin-top:18px}
.social-links a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff}
.social-links a:hover{background:var(--teal-light)}
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:40;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.whatsapp-float:hover{transform:translateY(-3px)}
.map-embed iframe{width:100%;height:320px;border:0;border-radius:16px}
.pill{display:inline-block;text-decoration:none}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B7580' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.qty input[type=number]{-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* =========================================================
   VIDEOS
   ========================================================= */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--teal-dark)}
.video-wrap iframe,.video-wrap .video-el{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.video-lite{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background-color:var(--teal-dark);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;transition:.3s}
.video-lite::after{content:"";position:absolute;inset:0;background:rgba(12,59,76,.35);transition:.3s}
.video-lite:hover::after{background:rgba(12,59,76,.15)}
.video-play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:1.5rem;padding-left:5px;box-shadow:0 10px 30px rgba(12,59,76,.3);transition:.3s}
.video-lite:hover .video-play{transform:scale(1.08);background:#fff}
.video-section{background:var(--teal-dark);color:#fff}
.video-section .sec-head h2{color:#fff}
.video-section .sec-head p{color:#A9C7D2}
.video-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:960px){.video-grid{grid-template-columns:1fr}}
.post .tag-video{left:auto;right:14px;background:var(--teal);color:#fff}

/* =========================================================
   IMAGES (chargement differe, sans saut de mise en page)
   ========================================================= */
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
img.img{display:block;width:100%;height:100%;object-fit:cover}
.prod .ph,.post .img,.cart-line .ph,.prod-page .photo,.article-img,.svc .img{position:relative;overflow:hidden}
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(12,59,76,.88) 20%,rgba(12,59,76,.35) 65%,rgba(12,59,76,.15))}
.hero-inner{position:relative;z-index:2}
.collage{position:relative}
.cover{transition:transform .5s ease}
.dom:hover .cover,.gal:hover .cover,.tease:hover .cover,.prod:hover .ph .cover{transform:scale(1.06)}
.post .tag,.post .tag-video{z-index:3}
.svc-band{position:relative;overflow:hidden}
.svc-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(12,59,76,.92) 30%,rgba(12,59,76,.5))}
.svc-inner{position:relative;z-index:2}

/* =========================================================
   VIDEOS (v2)
   ========================================================= */
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--teal-dark);box-shadow:0 18px 44px rgba(12,59,76,.18)}
.video-wrap iframe,.video-wrap .video-el{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.video-wrap .video-el{object-fit:contain}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-lite{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--teal-dark);display:flex;align-items:center;justify-content:center;overflow:hidden}
.video-lite::after{content:"";position:absolute;inset:0;background:rgba(12,59,76,.35);transition:.3s}
.video-lite:hover::after{background:rgba(12,59,76,.12)}
.video-play{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(12,59,76,.35);transition:transform .3s ease,background .3s ease}
.video-lite:hover .video-play{transform:scale(1.1);background:#fff}
.video-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;font-size:.92rem}
.video-fallback a{color:var(--teal-light);text-decoration:underline}
.video-warning{background:#FFF4E0;color:#9A6B00;border:1px solid #F3D9A6;border-radius:12px;padding:14px 18px;font-size:.9rem}
.video-warning code{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px}

/* =========================================================
   ASSISTANT DE DISCUSSION (chatbot)
   ========================================================= */
/* Un element portant l'attribut « hidden » doit toujours rester cache,
   meme lorsqu'une regle lui donne display:flex ou display:block. */
[hidden]{display:none!important}

.chat{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:.92rem}

.chat-toggle{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(12,59,76,.32);transition:transform .25s ease,background .25s ease;align-self:flex-end}
.chat-toggle:hover{transform:translateY(-3px);background:var(--teal-dark)}
.chat-icon-close{display:none;font-size:1.9rem;line-height:1}
.chat.is-open .chat-icon-open{display:none}
.chat.is-open .chat-icon-close{display:block}

.chat-teaser{position:relative;background:#fff;border:1px solid #E3EDF1;border-radius:16px 16px 4px 16px;padding:14px 40px 14px 16px;max-width:260px;box-shadow:0 14px 34px rgba(12,59,76,.16);animation:chatPop .35s ease}
.chat-teaser p{margin:0;color:var(--ink);line-height:1.45}
.chat-teaser-close{position:absolute;top:6px;right:8px;border:none;background:none;font-size:1.2rem;color:var(--muted);cursor:pointer;line-height:1}
.chat-teaser-close:hover{color:var(--teal)}

.chat-box{width:330px;max-width:calc(100vw - 40px);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(12,59,76,.28);animation:chatPop .3s ease;display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 130px))}
@keyframes chatPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.chat-head{background:var(--teal);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-head-info{display:flex;align-items:center;gap:11px;min-width:0}
.chat-head b{display:block;font-family:'Sora',sans-serif;font-size:.98rem}
.chat-head small{color:rgba(255,255,255,.8);font-size:.76rem}
.chat-avatar{width:40px;height:40px;flex:none;border-radius:50%;background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.86rem;overflow:hidden}
.chat-avatar img{max-width:30px;max-height:30px;object-fit:contain}
.chat-close{border:none;background:none;color:#fff;font-size:1.7rem;cursor:pointer;line-height:1;opacity:.85}
.chat-close:hover{opacity:1}

.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;background:#F7FAFB;flex:1}
.chat-msg{max-width:85%;padding:11px 14px;border-radius:14px;line-height:1.5;animation:chatPop .25s ease}
.chat-msg--bot{background:#fff;border:1px solid #E3EDF1;border-bottom-left-radius:4px;align-self:flex-start;color:var(--ink)}
.chat-msg--user{background:var(--teal);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.chat-typing{display:flex;gap:4px;align-items:center;padding:13px 16px}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:chatDot 1.1s infinite}
.chat-typing span:nth-child(2){animation-delay:.18s}
.chat-typing span:nth-child(3){animation-delay:.36s}
@keyframes chatDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

.chat-choices{display:flex;flex-wrap:wrap;gap:7px;padding:12px 16px;border-top:1px solid #E3EDF1;background:#fff}
.chat-choice{border:1.5px solid #D5E5EB;background:#fff;color:var(--teal);border-radius:999px;padding:8px 14px;font:inherit;font-size:.84rem;font-weight:500;cursor:pointer;transition:.2s}
.chat-choice:hover{background:var(--teal);color:#fff;border-color:var(--teal)}

.chat-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #E3EDF1;background:#fff}
.chat-action{flex:1;text-align:center;padding:9px 8px;border-radius:10px;background:var(--tint);color:var(--teal);font-size:.83rem;font-weight:600;transition:.2s}
.chat-action:hover{background:var(--teal);color:#fff}
.chat-action--wa{background:#E7F8ED;color:#128C4A}
.chat-action--wa:hover{background:#25D366;color:#fff}

/* La bulle WhatsApp flottante se décale pour ne pas gêner l'assistant */
.whatsapp-float{bottom:92px}

@media(max-width:600px){
  .chat{right:14px;bottom:14px}
  .chat-box{width:calc(100vw - 28px)}
  .chat-teaser{max-width:calc(100vw - 90px)}
}

/* =========================================================
   PARTENAIRES
   ========================================================= */
.partners-section{padding:80px 0;position:relative}
.partners-section.is-dark{background:var(--teal-dark)}
.partners-section.is-dark .sec-head h2{color:#fff}
.partners-section.is-dark .sec-head p{color:#A9C7D2}

.partners-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.partner-card{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:.3s}
.partner-card:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(12,59,76,.12);border-color:var(--teal-light)}
.partner-logo{height:56px;display:flex;align-items:center;justify-content:center;width:100%}
.partner-logo img{max-height:56px;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s ease}
.partner-card:hover .partner-logo img{transform:scale(1.06)}
.partner-initials{width:54px;height:54px;border-radius:14px;background:var(--tint);color:var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem}
.partner-name{font-size:.86rem;font-weight:600;color:var(--teal-dark);line-height:1.3}
.partner-country{font-size:.74rem;color:var(--muted)}

.partners-grid--large{grid-template-columns:repeat(3,1fr);gap:24px}
.partner-detail{background:#fff;border:1px solid #E3EDF1;border-radius:18px;padding:28px;text-align:center}
.partner-detail .partner-logo{height:80px;margin-bottom:16px}
.partner-detail .partner-logo img{max-height:80px}
.partner-detail h3{font-family:'Sora',sans-serif;font-size:1.1rem;color:var(--teal-dark);margin-bottom:4px}
.partner-detail p{font-size:.9rem;color:var(--muted);margin:12px 0}

/* =========================================================
   HISTORIQUE DE L'ENTREPRISE (frise)
   ========================================================= */
.history-section{padding:90px 0;background:#F7FAFB}
.timeline{position:relative;max-width:900px;margin:0 auto;padding-left:0}
.timeline::before{content:"";position:absolute;left:78px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--teal-light),var(--tint))}
.timeline-item{position:relative;display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:start;padding-bottom:38px}
.timeline-item:last-child{padding-bottom:0}
.timeline-marker{position:relative;display:flex;justify-content:flex-end;padding-right:0}
.timeline-year{position:relative;z-index:2;background:var(--teal);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem;padding:9px 16px;border-radius:999px;box-shadow:0 6px 18px rgba(12,59,76,.2);white-space:nowrap}
.timeline-content{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:24px;transition:.3s}
.timeline-item:hover .timeline-content{box-shadow:0 16px 38px rgba(12,59,76,.1);transform:translateY(-3px)}
.timeline-content h3{font-family:'Sora',sans-serif;font-size:1.1rem;color:var(--teal-dark);margin-bottom:8px}
.timeline-content p{color:var(--muted);font-size:.94rem}
.timeline-img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:16px;display:block}

/* =========================================================
   SECTIONS AVEC PHOTO DE FOND
   ========================================================= */
.bg-section{position:relative;padding:20px 0;overflow:hidden}
.bg-section-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bg-section-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,59,76,.92),rgba(12,59,76,.82))}
.bg-section>.wrap{position:relative;z-index:2}
.bg-section.has-bg .sec-head h2{color:#fff}
.bg-section.has-bg .sec-head p{color:#C6DEE7}
.bg-section.has-bg .eyebrow{color:var(--teal-light)}
.bg-section.has-bg .btn-primary{background:#fff;color:var(--teal)}
.bg-section.has-bg .btn-primary:hover{background:var(--tint)}
.bg-section.has-bg .partner-card{background:rgba(255,255,255,.96)}

@media(max-width:1100px){
  .partners-grid{grid-template-columns:repeat(4,1fr)}
  .partners-grid--large{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .partners-grid{grid-template-columns:repeat(3,1fr)}
  .partners-grid--large{grid-template-columns:1fr}
  .timeline::before{left:12px}
  .timeline-item{grid-template-columns:1fr;gap:12px;padding-left:40px}
  .timeline-marker{justify-content:flex-start}
  .timeline-year{margin-left:-28px}
}
@media(max-width:480px){
  .partners-grid{grid-template-columns:repeat(2,1fr)}
  .bg-section{padding:60px 0}
}

/* =========================================================
   PRIX ET PROMOTIONS
   ========================================================= */
.price-block{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.price--promo{color:#C0392B}
.price-old{font-size:.82rem;color:var(--muted);text-decoration:line-through;font-weight:500}
.promo-badge{position:absolute;top:12px;left:12px;z-index:3;background:#C0392B;color:#fff;font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(192,57,43,.32);letter-spacing:.02em}

/* Sur la fiche produit, l'ancien prix est affiché à côté du nouveau */
.prod-page .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.prod-page .price-old{font-size:1.05rem}
.prod-page .promo-tag{background:#C0392B;color:#fff;font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:999px}

/* =========================================================
   PAGE NOS SERVICES
   ========================================================= */
.services-page{padding-bottom:20px}

/* Sommaire en haut de page */
.svc-summary{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:50px}
.svc-summary-item{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E3EDF1;border-radius:999px;padding:11px 20px;font-size:.9rem;font-weight:600;color:var(--teal-dark);transition:.25s}
.svc-summary-item:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,59,76,.08)}
.svc-summary-icon{font-size:1.05rem}

/* Un service par rangée, image et texte alternés */
.svc-rows{display:flex;flex-direction:column;gap:60px}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;scroll-margin-top:110px}
.svc-row.is-reversed .svc-row-media{order:2}

.svc-row-media{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(140deg,var(--tint),#CDE5EC);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.svc-row-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.svc-row:hover .svc-row-media img{transform:scale(1.04)}
.svc-row-icon{font-size:4.5rem}
.svc-row-number{position:absolute;top:18px;left:18px;z-index:2;background:rgba(255,255,255,.94);color:var(--teal);font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(12,59,76,.18)}

.svc-row-text h2{font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--teal-dark);margin:10px 0 16px;line-height:1.2}
.svc-row-text p{color:var(--muted);font-size:1.02rem;line-height:1.7}
.svc-row-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Bandeau de chiffres */
.svc-facts{background:var(--teal-dark);padding:52px 0;margin-top:70px}
.svc-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.svc-fact b{display:block;font-family:'Sora',sans-serif;font-size:2rem;color:#fff;line-height:1.1}
.svc-fact span{display:block;margin-top:6px;color:#A9C7D2;font-size:.88rem}

/* Les 4 étapes */
.svc-steps{padding:80px 0 60px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:etape}
.steps li{position:relative;background:#fff;border:1px solid #E3EDF1;border-radius:18px;padding:30px 24px 26px;transition:.3s}
.steps li:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(12,59,76,.1);border-color:var(--teal-light)}
.step-num{position:absolute;top:-18px;left:24px;width:38px;height:38px;border-radius:12px;background:var(--teal);color:#fff;font-family:'Sora',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(12,59,76,.22)}
.steps h3{font-family:'Sora',sans-serif;font-size:1.02rem;color:var(--teal-dark);margin:12px 0 8px}
.steps p{font-size:.9rem;color:var(--muted);line-height:1.6}

@media(max-width:960px){
  .svc-row{grid-template-columns:1fr;gap:26px}
  .svc-row.is-reversed .svc-row-media{order:0}
  .svc-facts-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .svc-rows{gap:44px}
  .svc-facts-grid,.steps{grid-template-columns:1fr}
  .svc-summary{gap:8px}
  .svc-summary-item{padding:9px 15px;font-size:.84rem}
}

/* =========================================================
   DOMAINES D'INTERVENTION (pages détaillées)
   ========================================================= */
.domain-list{display:flex;flex-direction:column;gap:26px}
.domain-card{display:grid;grid-template-columns:340px 1fr;gap:0;background:#fff;border:1px solid #E3EDF1;border-radius:20px;overflow:hidden;transition:.3s}
.domain-card:hover{border-color:var(--teal-light)}
.domain-card-visual{position:relative;min-height:240px;overflow:hidden;background:var(--tint)}
.domain-count{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(255,255,255,.94);color:var(--teal);font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(12,59,76,.18)}
.domain-card-body{padding:28px}
.domain-card-body h2{font-family:'Sora',sans-serif;font-size:1.3rem;color:var(--teal-dark);margin-bottom:6px}
.domain-subtitle{color:var(--teal-light);font-weight:600;font-size:.9rem;margin-bottom:10px}
.domain-text{color:var(--muted);font-size:.93rem;margin-bottom:18px}

.domain-products{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.domain-products a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;border:1px solid #EDF4F6;transition:.2s}
.domain-products a:hover{border-color:var(--teal-light);background:var(--tint)}
.domain-product-img{width:46px;height:46px;flex:none;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden}
.domain-product-img img{width:100%;height:100%;object-fit:cover}
.domain-product-info{min-width:0}
.domain-product-info b{display:block;font-size:.85rem;color:var(--teal-dark);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.domain-product-info small{color:var(--muted);font-size:.75rem}

/* Page d'un domaine */
.domain-intro{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.domain-intro-text p{color:var(--muted);font-size:1.02rem;margin-bottom:22px}
.domain-intro-img{width:100%;height:auto;border-radius:20px;display:block}
.domain-facts{display:flex;gap:34px;padding:20px 0;border-top:1px solid #E3EDF1;border-bottom:1px solid #E3EDF1;margin-bottom:24px}
.domain-fact b{display:block;font-family:'Sora',sans-serif;font-size:1.8rem;color:var(--teal)}
.domain-fact small{color:var(--muted);font-size:.82rem}
.domain-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Marque du produit */
.prod-brand{display:inline-block;font-size:.72rem;font-weight:600;color:var(--muted);background:#F2F7F9;padding:2px 9px;border-radius:999px;margin-left:6px}
.brand-badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.brand-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E3EDF1;border-radius:999px;padding:7px 16px;font-size:.86rem;color:var(--teal-dark)}
.brand-badge img{max-height:22px;width:auto;object-fit:contain}
.brand-badge--link:hover{border-color:var(--teal);color:var(--teal)}

@media(max-width:900px){
  .domain-card{grid-template-columns:1fr}
  .domain-card-visual{min-height:220px}
  .domain-intro{grid-template-columns:1fr;gap:28px}
}
@media(max-width:560px){
  .domain-products{grid-template-columns:1fr}
  .domain-card-body{padding:22px}
  .domain-facts{gap:22px}
}

/* =========================================================
   DOMAINES — bandeau de résumé et accès rapide
   ========================================================= */
.dom-overview{padding-bottom:0}
.dom-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:linear-gradient(120deg,var(--teal-dark),var(--teal));border-radius:20px;padding:28px 32px;color:#fff}
.dom-stat b{display:block;font-family:'Sora',sans-serif;font-size:1.9rem;line-height:1.1;margin-bottom:4px}
.dom-stat small{color:#BFE3ED;font-size:.82rem;display:block;line-height:1.4}

.dom-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.dom-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #E3EDF1;border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:500;color:var(--teal-dark);transition:.2s}
.dom-chip span{font-size:1rem;line-height:1}
.dom-chip:hover{border-color:var(--teal);background:var(--tint);color:var(--teal);transform:translateY(-2px)}

/* Carte de domaine enrichie */
.domain-card-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(140deg,var(--tint),#DCEBF0)}
.domain-card-emoji{font-size:1.15rem;margin-right:6px}
.domain-card-body h2{display:flex;align-items:center;flex-wrap:wrap}

.domain-tags-block{margin-bottom:0}
.domain-tags-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);margin-bottom:9px}
.domain-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.domain-tags li{background:var(--tint);color:var(--teal-dark);font-size:.78rem;font-weight:500;padding:5px 12px;border-radius:8px}
.domain-tags .domain-tag-more{background:none;color:var(--muted);font-style:italic;padding-left:2px}



/* Services rappelés sous la liste */
.dom-services{background:#F7FAFB}
.dom-services .sec-head p{color:var(--muted);margin-top:12px;font-size:.98rem;max-width:60ch}
.dom-services .center .btn{margin:0 5px}

/* =========================================================
   PAGE D'UN DOMAINE
   ========================================================= */










@media(max-width:960px){
  .dom-stats{grid-template-columns:1fr 1fr;padding:24px}
}
@media(max-width:700px){
  .dom-stats{grid-template-columns:1fr 1fr;gap:14px}
  .dom-stat b{font-size:1.5rem}
}


/* Marques référencées sur la carte d'un domaine */
.domain-brands{margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--tint)}
.domain-brand-list{list-style:none;display:grid;gap:9px;margin-top:4px}
.domain-brand-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font-size:.82rem;line-height:1.5}
.domain-brand-name{flex:0 0 auto;background:var(--teal-dark);color:#fff;font-family:'Sora',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.domain-brand-ranges{color:var(--muted);flex:1 1 220px;min-width:0}

/* Domaines couverts par une marque, sur la page Partenaires */
.partner-scope-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);margin:16px 0 8px}
.partner-domains{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.partner-domains a{display:inline-block;background:var(--tint);color:var(--teal-dark);font-size:.75rem;font-weight:500;padding:5px 11px;border-radius:8px;transition:.2s}
.partner-domains a:hover{background:var(--teal);color:#fff}
.partner-ranges{margin-top:10px;font-size:.78rem;color:var(--muted);line-height:1.6}
@media(max-width:700px){
  .domain-brand-ranges{flex-basis:100%}
}

/* =========================================================
   TÉLÉPHONE — corrections de mise en page
   ========================================================= */

/* Rien ne doit dépasser la largeur de l'écran */
img,video,iframe{max-width:100%}
body{overflow-wrap:break-word}

/* Panier et commande : deux colonnes sur ordinateur, une seule en dessous */
.shop-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}

@media(max-width:900px){
  .shop-layout{grid-template-columns:1fr;gap:20px}
  /* Le récapitulatif passe au-dessus : on voit ce qu'on paie avant de saisir */
  .shop-layout .totaux{order:-1;position:static;top:auto}
}

@media(max-width:600px){
  /* Plus de largeur utile pour le contenu */
  .wrap{padding:0 16px}
  section{padding:52px 0}
  

  /* Les boutons d'appel à l'action prennent toute la largeur */
  /* .dom-services .center .btn impose « margin:0 5px » : il faut le citer
     en entier, sinon les boutons se retrouvent collés l'un à l'autre. */
  .center .btn,.dom-services .center .btn,.domain-actions .btn,.form-actions .btn{display:block;width:100%;margin:0 0 12px;text-align:center}
  .center .btn:last-child,.dom-services .center .btn:last-child{margin-bottom:0}

  /* La bande illustrée des cartes de domaine mangeait un écran entier */
  .domain-card-visual{min-height:150px}
  .domain-card-icon{font-size:2.6rem}
  .domain-card-body{padding:20px}

  /* Récapitulatif de commande : libellé et montant ne se collent plus */
  .totaux{padding:20px}
  .totaux .ligne{gap:16px}
  .totaux .ligne span:last-child{white-space:nowrap;text-align:right}

  /* Formulaires plus confortables au pouce */
  .radio-card{min-width:100%}
  .qty{width:100%;justify-content:space-between}
  .prod .ph{height:160px}
}

/* Mode de paiement unique, affiché sans case à cocher */
.pay-single{display:flex;align-items:center;gap:10px;background:var(--tint);border:1.5px solid #CDE5EC;border-radius:12px;padding:14px 16px;font-size:.92rem;font-weight:500;color:var(--teal-dark)}

/* =========================================================
   PARTENARIATS EXCLUSIFS
   ========================================================= */
.exclusive-band{background:linear-gradient(160deg,#0C3B4C,#16657F);color:#fff;padding:80px 0}
.exclusive-band .sec-head h2{color:#fff}
.exclusive-band .sec-head p{color:#BFE0EA}
.exclusive-band .eyebrow{color:#7FD4EC}
.exclusive-band .btn-primary{background:#fff;color:var(--teal)}
.exclusive-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.exclusive-chip{position:relative;background:rgba(255,255,255,.96);border-radius:16px;padding:26px 18px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.3s}
.exclusive-chip:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.exclusive-star{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 4px 12px rgba(12,59,76,.25)}
.exclusive-chip-logo{height:52px;display:flex;align-items:center;justify-content:center}
.exclusive-chip-logo img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.exclusive-chip-logo b{font-family:'Sora',sans-serif;color:var(--teal-dark);font-size:1rem}
.exclusive-chip small{color:var(--teal);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}

.exclusive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.exclusive-card{position:relative;background:#fff;border:2px solid var(--tint);border-radius:20px;padding:38px 26px 26px;text-align:center;transition:.3s}
.exclusive-card:hover{border-color:var(--teal-light);box-shadow:0 18px 44px rgba(12,59,76,.12);transform:translateY(-4px)}
.exclusive-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:.74rem;font-weight:800;padding:6px 16px;border-radius:999px;white-space:nowrap}
.exclusive-logo{height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.exclusive-logo img{max-height:80px;max-width:100%;width:auto;object-fit:contain}
.exclusive-card h3{font-family:'Sora',sans-serif;font-size:1.15rem;color:var(--teal-dark)}
.exclusive-card p{color:var(--muted);font-size:.92rem;margin:12px 0}

/* =========================================================
   RÉFÉRENCES (établissements équipés)
   ========================================================= */
.ref-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;padding:28px;background:var(--tint);border-radius:20px}
.ref-stat{text-align:center}
.ref-stat b{display:block;font-family:'Sora',sans-serif;font-size:2.1rem;color:var(--teal)}
.ref-stat small{color:var(--muted);font-size:.85rem}

.ref-flagships{display:flex;flex-direction:column;gap:26px}
.ref-card{display:grid;grid-template-columns:360px 1fr;background:#fff;border:1px solid #E3EDF1;border-radius:22px;overflow:hidden;transition:.3s}
.ref-card:hover{box-shadow:0 22px 50px rgba(12,59,76,.13);transform:translateY(-3px)}
.ref-card-visual{position:relative;min-height:260px;background:var(--tint);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ref-card-visual img{width:100%;height:100%;object-fit:cover}
.ref-flag{position:absolute;left:16px;bottom:16px;background:var(--teal);color:#fff;font-size:.74rem;font-weight:700;padding:6px 14px;border-radius:999px}
.ref-placeholder{font-family:'Sora',sans-serif;font-weight:700;font-size:1.6rem;color:var(--teal);background:var(--tint);width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center}
.ref-card-body{padding:30px}
.ref-card-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.ref-logo{max-height:54px;max-width:120px;width:auto;object-fit:contain}
.ref-card-body h3{font-family:'Sora',sans-serif;font-size:1.25rem;color:var(--teal-dark)}
.ref-card-head small{color:var(--muted);font-size:.86rem}
.ref-card-body p{color:var(--muted);font-size:.95rem;margin-bottom:16px}
.ref-equipments{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ref-equipments li{position:relative;padding-left:24px;font-size:.9rem;color:var(--teal-dark)}
.ref-equipments li::before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}

.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ref-mini{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.3s}
.ref-mini:hover{border-color:var(--teal-light);transform:translateY(-4px);box-shadow:0 14px 34px rgba(12,59,76,.1)}
.ref-mini-logo{height:56px;display:flex;align-items:center;justify-content:center}
.ref-mini-logo img{max-height:56px;max-width:100%;width:auto;object-fit:contain}
.ref-mini b{font-size:.92rem;color:var(--teal-dark);line-height:1.3}
.ref-mini small{color:var(--muted);font-size:.78rem}

/* =========================================================
   FORMATIONS
   ========================================================= */
.training-section{background:#F7FAFB;padding:80px 0}
.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.training-card{background:#fff;border:1px solid #E3EDF1;border-radius:20px;overflow:hidden;transition:.3s}
.training-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(12,59,76,.12)}
.training-visual{position:relative;height:190px;background:linear-gradient(140deg,var(--teal),var(--teal-light));display:flex;align-items:center;justify-content:center;overflow:hidden}
.training-visual img{width:100%;height:100%;object-fit:cover}
.training-icon{font-size:2.6rem}
.training-country{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.95);color:var(--teal-dark);font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:999px}
.training-body{padding:24px}
.training-body time{font-size:.78rem;font-weight:700;color:var(--teal-light);letter-spacing:.08em}
.training-body h3{font-family:'Sora',sans-serif;font-size:1.08rem;color:var(--teal-dark);margin:6px 0 8px}
.training-organism{color:var(--teal);font-weight:600;font-size:.88rem;margin-bottom:10px}
.training-body p{color:var(--muted);font-size:.9rem}
.training-badge{display:inline-block;margin-top:14px;background:var(--tint);color:var(--teal);font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px}

/* =========================================================
   DÉVELOPPEMENT / AGENCES
   ========================================================= */
.expansion-section{padding:80px 0;background:linear-gradient(180deg,#fff,#F2F8FA)}
.expansion-stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.expansion-stat{text-align:center}
.expansion-stat b{display:block;font-family:'Sora',sans-serif;font-size:2.2rem;color:var(--teal)}
.expansion-stat small{color:var(--muted);font-size:.85rem}
.expansion-title{font-family:'Sora',sans-serif;font-size:1.15rem;color:var(--teal-dark);margin:34px 0 18px}
.expansion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.agency-card{background:#fff;border:1px solid #E3EDF1;border-radius:18px;padding:24px;border-left:4px solid var(--teal-light);transition:.3s}
.agency-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(12,59,76,.1)}
.agency-card.is-ouverte{border-left-color:#1B7A3D}
.agency-card.is-en-cours{border-left-color:#E8940C}
.agency-card.is-projet{border-left-color:var(--teal-light);border-style:dashed;border-left-style:solid}
.agency-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.agency-pin{font-size:1.3rem}
.agency-head h4{font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--teal-dark)}
.agency-head small{color:var(--muted);font-size:.83rem}
.agency-year{display:inline-block;margin-left:8px;font-size:.8rem;color:var(--muted);font-weight:600}
.agency-card p{color:var(--muted);font-size:.9rem;margin-top:12px}
.agency-contact{margin-top:12px;font-size:.84rem;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.agency-contact a{color:var(--teal);font-weight:600}

/* =========================================================
   LE GROUPE
   ========================================================= */
.group-parent{background:linear-gradient(140deg,var(--teal-dark),var(--teal));color:#fff;border-radius:24px;padding:44px;text-align:center;position:relative}
.group-parent-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:14px}
.group-parent h2{font-family:'Sora',sans-serif;font-size:2rem;margin-bottom:12px}
.group-parent p{color:#CFE7EF;max-width:60ch;margin:0 auto}
.group-branches{width:2px;height:44px;background:linear-gradient(180deg,var(--teal),transparent);margin:0 auto}
.group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.group-card{background:#fff;border:1px solid #E3EDF1;border-top:4px solid var(--marque,var(--teal));border-radius:20px;overflow:hidden;transition:.3s}
.group-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(12,59,76,.13)}
.group-card-visual{height:190px;overflow:hidden}
.group-card-visual img{width:100%;height:100%;object-fit:cover}
.group-card-body{padding:28px}
.group-card-logo{height:56px;display:flex;align-items:center;margin-bottom:14px}
.group-card-logo img{max-height:56px;max-width:150px;width:auto;object-fit:contain}
.group-initials{width:54px;height:54px;border-radius:14px;background:var(--marque,var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700}
.group-card h3{font-family:'Sora',sans-serif;font-size:1.2rem;color:var(--teal-dark)}
.group-tagline{color:var(--marque,var(--teal));font-weight:600;font-size:.92rem;margin:4px 0 12px}
.group-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.group-card p{color:var(--muted);font-size:.92rem;margin-bottom:12px}

.group-teaser{background:#F7FAFB}
.group-teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.group-chip{background:#fff;border:1px solid #E3EDF1;border-top:3px solid var(--marque,var(--teal));border-radius:16px;padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.3s}
.group-chip:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(12,59,76,.1)}
.group-chip img{max-height:50px;max-width:100%;width:auto;object-fit:contain}
.group-chip b{font-family:'Sora',sans-serif;font-size:.98rem;color:var(--teal-dark)}
.group-chip small{color:var(--muted);font-size:.8rem}

/* =========================================================
   GALERIE PHOTOS
   ========================================================= */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.photo-item{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1;cursor:zoom-in;background:var(--tint)}
.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.photo-item:hover img{transform:scale(1.07)}
.photo-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,transparent,rgba(12,59,76,.9));color:#fff;opacity:0;transition:opacity .3s ease}
.photo-item:hover figcaption,.photo-item:focus figcaption{opacity:1}
.photo-item figcaption b{display:block;font-size:.88rem;line-height:1.3}
.photo-item figcaption small{font-size:.76rem;color:#C6DEE7}

.lightbox{position:fixed;inset:0;z-index:120;background:rgba(8,42,56,.94);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lightbox-caption{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;padding:0 30px}
.lightbox-caption b{display:block;font-family:'Sora',sans-serif;font-size:1.05rem}
.lightbox-caption small{color:#BFE0EA}
.lightbox-close{position:absolute;top:20px;right:26px;background:rgba(255,255,255,.15);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.3)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lightbox-nav:hover{background:rgba(255,255,255,.3)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

@media(max-width:1000px){
  .exclusive-strip,.ref-grid,
  .exclusive-grid,.training-grid,.expansion-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .group-grid{grid-template-columns:1fr}
  .ref-card{grid-template-columns:1fr}
}
@media(max-width:640px){
  .exclusive-strip,.ref-grid,.group-teaser-grid,.exclusive-grid,.training-grid,.expansion-grid{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .ref-equipments{grid-template-columns:1fr}
  .ref-stats,.expansion-stats{gap:24px}
  .group-parent{padding:30px 22px}
}

/* =========================================================
   AMBITION RÉGIONALE (ce qui est prévu, clairement annoncé)
   ========================================================= */
.ambition-block{background:#fff;border:2px dashed #CDE3EA;border-radius:22px;padding:34px;margin-top:40px}
.ambition-head{text-align:center;margin-bottom:26px}
.ambition-label{display:inline-block;background:var(--tint);color:var(--teal);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:999px;margin-bottom:12px}
.ambition-head h3{font-family:'Sora',sans-serif;font-size:1.4rem;color:var(--teal-dark)}
.ambition-horizon{display:block;font-size:.95rem;font-weight:400;color:var(--teal-light);margin-top:4px}
.ambition-head p{color:var(--muted);max-width:60ch;margin:12px auto 0}
.ambition-lists{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ambition-col h4{font-family:'Sora',sans-serif;font-size:1rem;color:var(--teal-dark);margin-bottom:12px}
.ambition-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.ambition-list li{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#F7FAFB;border-radius:12px;border-left:3px solid var(--teal-light)}
.ambition-list b{font-size:.92rem;color:var(--teal-dark)}
.ambition-list small{color:var(--muted);font-size:.8rem}
.ambition-list span{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--teal-light);background:#fff;padding:3px 10px;border-radius:999px}
.ambition-note{text-align:center;color:var(--muted);font-size:.84rem;font-style:italic;margin-top:22px}

.ambition-band{background:linear-gradient(120deg,var(--teal-dark),var(--teal));color:#fff;padding:70px 0}
.ambition-band-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:44px;align-items:center}
.ambition-band h2{font-family:'Sora',sans-serif;font-size:1.9rem;margin-bottom:12px}
.ambition-band p{color:#CFE7EF}
.ambition-band .eyebrow{color:#7FD4EC}
.ambition-figures{display:flex;gap:18px}
.ambition-figure{flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:24px 16px;text-align:center}
.ambition-figure b{display:block;font-family:'Sora',sans-serif;font-size:2.2rem}
.ambition-figure small{color:#CFE7EF;font-size:.82rem;line-height:1.3;display:block;margin-top:4px}
.ambition-figure.is-goal{background:rgba(255,255,255,.06);border-style:dashed}

/* Galerie sur l'accueil et les références */
.home-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.home-gallery-item{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;display:block;background:var(--tint)}
.home-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.home-gallery-item:hover img{transform:scale(1.08)}
.home-gallery-item span{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;background:linear-gradient(180deg,transparent,rgba(12,59,76,.9));color:#fff;font-size:.76rem;font-weight:600;opacity:0;transition:opacity .3s ease}
.home-gallery-item:hover span{opacity:1}

/* Formations en version compacte (accueil) */
.training-mini{position:relative;border-top:3px solid var(--teal-light)}
.training-mini-flag{display:inline-block;background:var(--tint);color:var(--teal);font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:10px}

@media(max-width:1000px){
  .home-gallery{grid-template-columns:repeat(3,1fr)}
  .ambition-band-inner,.ambition-lists{grid-template-columns:1fr}
}
@media(max-width:600px){
  .home-gallery{grid-template-columns:repeat(2,1fr)}
  .ambition-block{padding:24px 18px}
  .ambition-figures{flex-direction:column}
}

/* =========================================================
   BOUTONS — système unique
   Placé en fin de fichier : ces règles font autorité et
   remplacent les définitions dispersées plus haut.
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:0 28px;
  border-radius:12px;
  border:2px solid transparent;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--teal-light);outline-offset:3px}

/* Bouton principal — une seule action forte par section */
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(22,101,127,.22)}
.btn-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;box-shadow:0 12px 26px rgba(22,101,127,.3)}

/* Bouton secondaire */
.btn-line{background:transparent;border-color:#CFE2E9;color:var(--teal)}
.btn-line:hover{background:var(--tint);border-color:var(--teal);color:var(--teal-dark)}

/* Sur fond blanc, bouton blanc = même dimension que les autres */
.btn-white{background:#fff;border-color:#fff;color:var(--teal);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.btn-white:hover{background:var(--tint);border-color:var(--tint);color:var(--teal-dark)}

/* Bouton discret sur fond foncé */
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

.btn-sm{min-height:42px;padding:0 20px;font-size:.88rem;border-radius:10px}
.btn-lg{min-height:56px;padding:0 34px;font-size:1rem}
.btn-block{display:flex;width:100%}

/* --- Sur les sections foncées, les rôles s'inversent automatiquement --- */
.is-dark .btn-primary,
.exclusive-band .btn-primary,
.ambition-band .btn-primary,
.svc-band .btn-primary,
.contact .btn-primary,
.bg-section.has-bg .btn-primary{
  background:#fff;border-color:#fff;color:var(--teal);box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.is-dark .btn-primary:hover,
.exclusive-band .btn-primary:hover,
.ambition-band .btn-primary:hover,
.svc-band .btn-primary:hover,
.contact .btn-primary:hover,
.bg-section.has-bg .btn-primary:hover{background:var(--tint);border-color:var(--tint);color:var(--teal-dark)}

.is-dark .btn-line,
.exclusive-band .btn-line,
.ambition-band .btn-line,
.svc-band .btn-line,
.contact .btn-line,
.bg-section.has-bg .btn-line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.is-dark .btn-line:hover,
.exclusive-band .btn-line:hover,
.ambition-band .btn-line:hover,
.svc-band .btn-line:hover,
.contact .btn-line:hover,
.bg-section.has-bg .btn-line:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* Groupe de boutons : alignement et espacement toujours identiques */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-row.center{justify-content:center}
@media(max-width:520px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
}

/* =========================================================
   RYTHME DE LA PAGE D'ACCUEIL
   Alternance claire → blanche → foncée, jamais deux fonds
   identiques à la suite : le regard progresse naturellement.
   ========================================================= */
.band-white{background:#fff}
.band-soft{background:#F7FAFB}
.band-tint{background:linear-gradient(180deg,#F7FAFB,#EAF3F6)}
.band-dark{background:linear-gradient(150deg,var(--teal-dark),var(--teal));color:#fff}
.band-dark .sec-head h2{color:#fff}
.band-dark .sec-head p{color:#CFE7EF}
.band-dark .eyebrow{color:#7FD4EC}

/* Numéro de chapitre : donne le fil de lecture */
.chapter{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--teal);font-size:.72rem;font-weight:800;margin-right:9px;letter-spacing:0}
.band-dark .chapter,.exclusive-band .chapter{background:rgba(255,255,255,.2);color:#fff}
.eyebrow{display:inline-flex;align-items:center}

/* Liaison douce entre deux sections de tons proches */
.band-dark + .band-dark{padding-top:0}
.band-dark + .band-dark::before{content:"";display:block;height:1px;background:rgba(255,255,255,.15);margin-bottom:70px}


/* Photos des formations (page publique) */
.training-photos{display:flex;gap:8px;margin-top:14px;align-items:center;flex-wrap:wrap}
.training-photo{position:relative;width:60px;height:60px;border-radius:10px;overflow:hidden;margin:0;cursor:zoom-in;background:var(--tint);aspect-ratio:auto}
.training-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.training-photo:hover img{transform:scale(1.12)}
.training-photos-more{width:60px;height:60px;border-radius:10px;background:var(--tint);color:var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.86rem}

/* =========================================================
   PARTENARIATS EXCLUSIFS — palette du site
   Placé en fin de fichier : remplace la version dorée.
   La section reste claire (elle suit le bandeau des services,
   déjà foncé), et la mise en valeur vient des cartes et du
   ruban, pas d'une couleur de fond différente.
   ========================================================= */
.exclusive-band,
.exclusive-band.is-light{
  background:#F7FAFB;
  color:var(--ink);
  padding:80px 0;
}
.exclusive-band .sec-head h2,
.exclusive-band.is-light .sec-head h2{color:var(--teal-dark)}
.exclusive-band .sec-head p,
.exclusive-band.is-light .sec-head p{color:var(--muted)}
.exclusive-band .eyebrow,
.exclusive-band.is-light .eyebrow{color:var(--teal-light)}

/* Les cartes ressortent par le relief, pas par la couleur */
.exclusive-band .exclusive-chip,
.exclusive-band.is-light .exclusive-chip{
  background:#fff;
  border:1px solid #E3EDF1;
  box-shadow:0 6px 20px rgba(12,59,76,.07);
}
.exclusive-band .exclusive-chip:hover{
  border-color:var(--teal-light);
  box-shadow:0 16px 38px rgba(12,59,76,.13);
}
.exclusive-band .exclusive-chip small{color:var(--teal)}

/* L'étoile et le ruban adoptent le bleu du site */
.exclusive-star{background:var(--teal);color:#fff}
.exclusive-ribbon{
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
  color:#fff;
  box-shadow:0 6px 16px rgba(22,101,127,.28);
}

/* Boutons : règles normales (fond clair) */
.exclusive-band .btn-primary,
.exclusive-band.is-light .btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.exclusive-band .btn-primary:hover,
.exclusive-band.is-light .btn-primary:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff}
.exclusive-band .btn-line{background:transparent;border-color:#CFE2E9;color:var(--teal)}
.exclusive-band .btn-line:hover{background:var(--tint);border-color:var(--teal);color:var(--teal-dark)}

/* Numéros de chapitre supprimés du site */
.chapter{display:none}

/* =========================================================
   PARCOURS D'ACCOMPAGNEMENT
   Étapes reliées par un trait : le besoin devient une solution.
   ========================================================= */
.process-section{background:#F7FAFB;padding:84px 0}
.process-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:etape;margin-top:8px}
.process-step{position:relative;padding:0 16px}
.process-marker{position:relative;display:flex;align-items:center;margin-bottom:18px}
.process-number{position:relative;z-index:2;flex:none;width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;box-shadow:0 8px 20px rgba(22,101,127,.25)}
.process-line{position:absolute;left:52px;right:-32px;height:2px;background:linear-gradient(90deg,var(--teal-light),#CFE2E9)}
.process-content h3{font-family:'Sora',sans-serif;font-size:1.05rem;color:var(--teal-dark);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.process-icon{font-size:1.1rem}
.process-subtitle{color:var(--teal);font-weight:600;font-size:.92rem;margin-bottom:8px;line-height:1.4}
.process-text{color:var(--muted);font-size:.88rem;line-height:1.55}
.process-step:hover .process-number{background:var(--teal-dark);transform:scale(1.06);transition:.25s}

.process-conclusion{
  margin:48px auto 0;
  max-width:70ch;
  text-align:center;
  font-family:'Sora',sans-serif;
  font-size:1.15rem;
  line-height:1.6;
  color:var(--teal-dark);
  background:#fff;
  border-left:4px solid var(--teal);
  border-radius:16px;
  padding:26px 30px;
  box-shadow:0 10px 30px rgba(12,59,76,.07);
}

@media(max-width:1100px){
  .process-steps{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .process-line{display:none}
}
@media(max-width:600px){
  .process-steps{grid-template-columns:1fr;gap:0}
  .process-step{padding:0 0 26px 0;display:grid;grid-template-columns:52px 1fr;gap:16px}
  .process-marker{margin-bottom:0;align-items:flex-start}
  .process-line{display:block;left:25px;top:52px;bottom:-26px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--teal-light),#CFE2E9)}
  .process-step:last-child{padding-bottom:0}
  .process-conclusion{font-size:1.02rem;padding:22px}
}

/* =========================================================
   ALTERNANCE DES MISES EN PAGE
   Une section sur deux inverse image et texte : le regard
   zigzague au lieu de descendre en ligne droite.
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split-media{position:relative}
.split-media img{width:100%;height:auto;border-radius:22px;display:block}
.split-media .cover{position:relative;border-radius:22px}

.split-text .eyebrow{margin-bottom:12px}
.split-text h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--teal-dark);margin-bottom:16px}
.split-text p{color:var(--muted);margin-bottom:16px}

/* Sens inversé : le texte à gauche, l'image à droite */
.split.is-reversed .split-media{order:2}
.split.is-reversed .split-text{order:1}

/* Chiffres clés en colonne, à côté du texte */
.split-figures{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.split-figure{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:20px}
.split-figure b{display:block;font-family:'Sora',sans-serif;font-size:1.8rem;color:var(--teal);line-height:1}
.split-figure small{display:block;color:var(--muted);font-size:.82rem;margin-top:6px;line-height:1.35}

/* Réalisation mise en avant : grande photo + détails du projet */
.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:#fff;border:1px solid #E3EDF1;border-radius:24px;overflow:hidden;box-shadow:0 18px 46px rgba(12,59,76,.09)}
.showcase-media{position:relative;min-height:340px;background:var(--tint)}
.showcase-media img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-tag{position:absolute;top:18px;left:18px;background:rgba(255,255,255,.95);color:var(--teal);font-size:.76rem;font-weight:700;padding:6px 14px;border-radius:999px}
.showcase-body{padding:38px}
.showcase-body .eyebrow{margin-bottom:10px}
.showcase-body h3{font-family:'Sora',sans-serif;font-size:1.45rem;color:var(--teal-dark);margin-bottom:6px}
.showcase-place{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.showcase-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.showcase-row{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:start;padding-bottom:14px;border-bottom:1px solid #EDF4F6}
.showcase-row:last-child{border-bottom:none;padding-bottom:0}
.showcase-row dt{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-light)}
.showcase-row dd{font-size:.93rem;color:var(--teal-dark)}
.showcase-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.showcase-list li{background:var(--tint);color:var(--teal);font-size:.82rem;padding:4px 12px;border-radius:999px}

@media(max-width:960px){
  .split,.showcase{grid-template-columns:1fr;gap:32px}
  .split.is-reversed .split-media{order:1}
  .split.is-reversed .split-text{order:2}
  .showcase-body{padding:28px}
  .showcase-media{min-height:240px}
}
@media(max-width:520px){
  .split-figures{grid-template-columns:1fr}
  .showcase-row{grid-template-columns:1fr;gap:4px}
}

/* =========================================================
   CARTES DES DOMAINES — version plus parlante
   La carte annonce concrètement ce qu'on trouve dans le domaine.
   ========================================================= */
.dom{position:relative;display:block;border-radius:20px;overflow:hidden;min-height:400px;background:var(--teal-dark)}
.dom .cover{transition:transform .6s ease}
.dom:hover .cover{transform:scale(1.06)}

/* Voile plus marqué en bas pour que le texte reste lisible */
.dom::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,59,76,0) 30%,rgba(12,59,76,.55) 58%,rgba(12,59,76,.94) 100%);
  transition:background .35s ease;
}
.dom:hover::after{background:linear-gradient(180deg,rgba(12,59,76,.1) 20%,rgba(12,59,76,.7) 55%,rgba(12,59,76,.97) 100%)}

.dom .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px;color:#fff}
.dom-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(4px);
  font-size:1.2rem;margin-bottom:12px;
}
.dom .cap h3{font-family:'Sora',sans-serif;font-size:1.2rem;line-height:1.25;margin-bottom:4px}
.dom .cap small{display:block;color:#BFE0EA;font-size:.86rem}

/* Les équipements du domaine : c'est ce qui rend la carte concrète */
.dom-tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  margin-top:14px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease,opacity .3s ease,margin .35s ease;
}
.dom-tags li{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.76rem;padding:4px 11px;border-radius:999px;
  white-space:nowrap;
}
.dom:hover .dom-tags,.dom:focus-visible .dom-tags{max-height:120px;opacity:1}

.dom-more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  font-size:.84rem;font-weight:700;color:#7FD4EC;
  transition:gap .25s ease;
}
.dom:hover .dom-more{gap:11px;color:#fff}

/* Sur mobile, pas de survol : les équipements sont toujours visibles */
@media(hover:none){
  .dom-tags{max-height:120px;opacity:1}
}
@media(max-width:600px){
  .dom{min-height:340px}
  .dom .cap{padding:20px 18px}
}

/* =========================================================
   WHATSAPP — choix du service
   ========================================================= */
.whatsapp-zone{position:fixed;right:20px;bottom:92px;z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.whatsapp-zone .whatsapp-float{position:static;border:none;cursor:pointer}
.whatsapp-zone.is-open .whatsapp-float{transform:scale(1.06)}

.whatsapp-menu{background:#fff;border:1px solid #E3EDF1;border-radius:16px;padding:14px;width:250px;box-shadow:0 18px 44px rgba(12,59,76,.2);animation:waPop .25s ease}
@keyframes waPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.whatsapp-menu-title{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.whatsapp-choice{display:block;padding:11px 13px;border-radius:11px;background:#F7FAFB;margin-bottom:8px;transition:.2s}
.whatsapp-choice:last-child{margin-bottom:0}
.whatsapp-choice:hover{background:#E7F8ED}
.whatsapp-choice b{display:block;font-size:.87rem;color:var(--teal-dark);line-height:1.3}
.whatsapp-choice small{color:#128C4A;font-size:.78rem;font-weight:600}

@media(max-width:600px){
  .whatsapp-zone{right:14px;bottom:80px}
  .whatsapp-menu{width:calc(100vw - 40px);max-width:270px}
}

/* La marque exclusive du domaine, sur la carte */
.dom-brands{display:block;margin-top:10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);padding:4px 11px;border-radius:999px;width:fit-content}

/* =========================================================
   SÉLECTEUR DE LANGUE
   Pas de drapeau : « FR | EN » convient à tous les pays.
   ========================================================= */
.lang-switch{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;margin-right:6px}
.lang-option{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:32px;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.85);transition:.2s}
.lang-option:hover{background:rgba(255,255,255,.14);color:#fff}
.lang-option.on{background:#fff;color:var(--teal)}

/* Sur les pages à en-tête clair */
header.solid .lang-switch,
header.always-solid .lang-switch{border-color:#CFE2E9}
header.solid .lang-option,
header.always-solid .lang-option{color:var(--muted)}
header.solid .lang-option:hover,
header.always-solid .lang-option:hover{background:var(--tint);color:var(--teal)}
header.solid .lang-option.on,
header.always-solid .lang-option.on{background:var(--teal);color:#fff}

@media(max-width:960px){
  .lang-switch{margin-right:4px}
  .lang-option{min-width:34px;height:30px;font-size:.74rem}
}

/* Photos d'un service (réalisations) */
.service-photos{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.service-photo{position:relative;width:66px;height:66px;border-radius:10px;overflow:hidden;margin:0;cursor:zoom-in;background:var(--tint);aspect-ratio:auto}
.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.service-photo:hover img{transform:scale(1.12)}

/* =========================================================
   MENU — tenue sur une seule ligne
   Le menu compte 8 liens plus le sélecteur de langue : sans
   ces règles, « Nos domaines » et « Services & expertise »
   se coupent en deux et le logo est écrasé.
   ========================================================= */
.nav{gap:20px}

/* Le logo ne se comprime jamais */
.logo{flex:0 0 auto;white-space:nowrap;gap:10px}
.logo svg{flex:none}

/* Les liens restent sur une ligne, l'espacement s'adapte à la largeur */
.nav ul{
  gap:clamp(14px, 1.8vw, 30px);
  flex:1 1 auto;
  justify-content:center;
  flex-wrap:nowrap;
  min-width:0;
}
.nav ul li{white-space:nowrap}
.nav ul a{white-space:nowrap;display:inline-block}

/* Les icônes et le sélecteur de langue gardent leur taille */
.icons{flex:0 0 auto;display:flex;align-items:center;gap:8px}

/* Entre 1100 et 1300 px, on resserre un peu plutôt que de couper */
@media(max-width:1300px){
  .nav ul{font-size:.86rem}
  .lang-option{min-width:34px;height:30px;font-size:.74rem}
}
@media(max-width:1150px){
  .nav ul{font-size:.82rem;gap:12px}
  .logo{font-size:.92rem}
  .logo svg{width:32px;height:32px}
}

/* En dessous, le menu déroulant prend le relais.
   L'ancien seuil (960 px) laissait le menu déborder entre les deux. */
@media(max-width:1080px){
  .burger{display:block}
  .nav ul{
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:#fff;
    flex-direction:column;
    padding:24px;
    gap:18px;
    box-shadow:0 20px 40px rgba(12,59,76,.12);
    font-size:.95rem;
    justify-content:flex-start;
  }
  .nav ul.open{display:flex}
  .nav ul a{color:var(--muted)!important}
  .nav ul a::after{display:none}
  .nav ul a.active{color:var(--teal)!important;border-left:3px solid var(--teal);padding-left:12px}
}

/* =========================================================
   BOUTONS SUR FOND FONCÉ — le hero manquait à l'appel
   Sur une photo, un bouton au contour clair devient illisible :
   les deux boutons prennent donc un fond plein.
   ========================================================= */
.hero .btn-primary,
.page-hero .btn-primary,
.video-section .btn-primary{
  background:#fff;
  border-color:#fff;
  color:var(--teal);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.hero .btn-primary:hover,
.page-hero .btn-primary:hover,
.video-section .btn-primary:hover{
  background:var(--tint);
  border-color:var(--tint);
  color:var(--teal-dark);
}

/* Le bouton secondaire garde un fond blanc, mais discret :
   fond légèrement voilé pour le distinguer du principal. */
.hero .btn-line,
.page-hero .btn-line,
.video-section .btn-line{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.92);
  color:var(--teal-dark);
  backdrop-filter:blur(4px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.hero .btn-line:hover,
.page-hero .btn-line:hover,
.video-section .btn-line:hover{
  background:#fff;
  border-color:#fff;
  color:var(--teal);
}

/* =========================================================
   MARQUES SUR LES CARTES DE DOMAINE
   Le logo remplace le nom quand il est disponible.
   ========================================================= */
.dom-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;background:none;border:none;padding:0;width:auto}
.dom-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:5px 12px;
  border-radius:8px;
  background:rgba(255,255,255,.94);
  box-shadow:0 3px 10px rgba(12,59,76,.18);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--teal-dark);
}
.dom-brand img{
  max-height:24px;
  max-width:78px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Quatre domaines par ligne */
.dom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1200px){.dom-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dom-grid{grid-template-columns:1fr}}

/* =========================================================
   RÉFÉRENCES SUR L'ACCUEIL — quatre cartes qui remplissent la ligne
   ========================================================= */
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.ref-mini{height:100%;justify-content:flex-start;padding:28px 18px}
.ref-mini-logo{height:64px;margin-bottom:6px}
.ref-mini-logo img{max-height:64px}
.ref-mini b{font-size:.95rem}

@media(max-width:1100px){.ref-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ref-grid{grid-template-columns:1fr}}

/* =========================================================
   CARTE GOOGLE MAPS EN BAS DE PAGE
   ========================================================= */
.map-section{padding:0}
.map-wrap{position:relative;width:100%;height:420px;overflow:hidden;background:var(--tint)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:grayscale(.25)}

/* Encart des coordonnées, posé sur la carte */
.map-card{
  position:absolute;
  left:max(24px,calc((100% - 1200px) / 2));
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  background:#fff;
  border-radius:18px;
  padding:26px 28px;
  max-width:330px;
  box-shadow:0 18px 44px rgba(12,59,76,.2);
}
.map-card .eyebrow{margin-bottom:8px}
.map-card h3{font-family:'Sora',sans-serif;font-size:1.15rem;color:var(--teal-dark);margin-bottom:12px}
.map-card p{color:var(--muted);font-size:.92rem;margin-bottom:6px;line-height:1.5}
.map-card a:not(.btn){color:var(--teal);font-weight:600}
.map-card .btn{margin-top:16px}

@media(max-width:860px){
  .map-wrap{height:auto;display:flex;flex-direction:column}
  .map-wrap iframe{position:relative;height:300px}
  .map-card{position:relative;left:0;top:0;transform:none;max-width:none;border-radius:0;box-shadow:none}
}


/* =========================================================
   GRILLES QUI REMPLISSENT TOUJOURS LA LIGNE
   Avec un nombre fixe de colonnes, trois cartes sur quatre
   laissaient un vide à droite. « auto-fit » répartit
   l'espace quel que soit le nombre d'éléments.
   ========================================================= */
.group-teaser-grid,
.exclusive-strip,
.ref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;
  align-items:stretch;
}

.dom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

/* Au-delà de quatre colonnes, on force le retour à la ligne :
   des cartes trop étroites deviennent illisibles. */
@media(min-width:1400px){
  .dom-grid,.ref-grid{grid-template-columns:repeat(4,1fr)}
}

/* =========================================================
   RÈGLE DES BOUTONS — une seule logique sur tout le site
   ---------------------------------------------------------
   Sur fond clair (blanc ou gris)  : bouton principal BLEU plein
   Sur fond foncé (photo ou bleu)  : bouton principal BLANC plein
   Le bouton secondaire n'apparaît qu'à côté d'un principal.
   ========================================================= */
.band-white .btn-primary,
.band-soft .btn-primary,
.domains .btn-primary,
.exclusive-band .btn-primary,
.map-card .btn-primary,
.training-section .btn-primary,
.process-section .btn-primary{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
  box-shadow:0 8px 20px rgba(22,101,127,.22);
}
.band-white .btn-primary:hover,
.band-soft .btn-primary:hover,
.domains .btn-primary:hover,
.exclusive-band .btn-primary:hover,
.map-card .btn-primary:hover,
.training-section .btn-primary:hover,
.process-section .btn-primary:hover{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:#fff;
}

/* Un bouton reste toujours lisible, quelle que soit la couleur héritée */
.btn-primary{color:#fff}
.hero .btn-primary,
.page-hero .btn-primary,
.video-section .btn-primary,
.ambition-band .btn-primary,
.contact .btn-primary,
.bg-section.has-bg .btn-primary{color:var(--teal)}

/* =========================================================
   RÉALISATION MISE EN AVANT — libellés sur une seule ligne
   « ACCOMPAGNEMENT » se coupait en deux : la colonne était
   trop étroite pour un mot en majuscules espacées.
   ========================================================= */
.showcase-rows{display:flex;flex-direction:column;gap:16px}
.showcase-row{grid-template-columns:170px 1fr;gap:18px;align-items:start}
.showcase-row dt{
  white-space:nowrap;
  letter-spacing:.04em;
  font-size:.72rem;
  line-height:1.4;
  padding-top:2px;
}
.showcase-row dd{margin:0;line-height:1.5}

/* Le bouton de la fiche projet suit la règle générale */
.showcase-body .btn{margin-top:4px}

@media(max-width:1100px){
  .showcase-row{grid-template-columns:150px 1fr;gap:14px}
  .showcase-row dt{font-size:.68rem}
}
@media(max-width:640px){
  .showcase-row{grid-template-columns:1fr;gap:4px}
  .showcase-row dt{white-space:normal}
}

/* Icônes vectorielles : alignement avec le texte */
.ic-svg{flex:none;vertical-align:-.18em}
.svc-icon,.dom-icon,.process-icon{display:inline-flex;align-items:center;justify-content:center}
.svc-icon{margin-right:9px;color:var(--teal)}
h3 .ic-svg,h2 .ic-svg{vertical-align:-.12em}
.btn .ic-svg{margin-right:2px}

/* Icônes des blocs « aucun contenu » : centrées et discrètes */
.vide span{display:flex;align-items:center;justify-content:center;color:var(--teal-light);margin-bottom:10px}
.empty span,.empty-page span{display:flex;align-items:center;justify-content:center;color:var(--teal-light)}

/* =========================================================
   COULEUR DES ICÔNES
   Par défaut, elles prennent le bleu de la marque plutôt que
   la couleur du texte : moins sévère qu'un trait noir.
   ========================================================= */
.ic-svg{color:var(--teal-light)}

/* Sauf lorsqu'elles sont posées sur une couleur : elles suivent
   alors le texte qui les entoure, pour rester lisibles. */
.btn .ic-svg,
.tag .ic-svg,
.badge-soft .ic-svg,
.alert .ic-svg,
.exclusive-ribbon .ic-svg,
.exclusive-star .ic-svg,
.training-country .ic-svg,
.training-badge .ic-svg,
.dom-brand .ic-svg,
.showcase-tag .ic-svg,
.chat .ic-svg,
.whatsapp-float .ic-svg,
.icon-link .ic-svg,
.burger .ic-svg,
.hero .ic-svg,
.page-hero .ic-svg,
.video-section .ic-svg,
.ambition-band .ic-svg,
.contact .ic-svg,
.band-dark .ic-svg,
.group-parent .ic-svg,
.bg-section.has-bg .ic-svg{color:inherit}

/* Dans les titres, l'icône est légèrement plus foncée */
h1 .ic-svg,h2 .ic-svg,h3 .ic-svg,h4 .ic-svg{color:var(--teal)}

/* Icônes des blocs vides et des pages d'erreur : discrètes mais visibles */
.vide .ic-svg,.empty .ic-svg,.empty-page .ic-svg{color:var(--teal-light);opacity:.85}

/* Trait un peu plus fin quand l'icône est grande */
.ic-svg[width="48"],.ic-svg[width="56"],.ic-svg[width="64"],.ic-svg[width="70"]{stroke-width:1.4}

/* =========================================================
   ALIGNEMENTS DEMANDÉS
   ---------------------------------------------------------
   Les entreprises du groupe, les services et les partenariats
   exclusifs tiennent chacun sur une seule ligne.
   ========================================================= */

/* Les 3 entreprises du groupe, côte à côte */
.group-grid{grid-template-columns:repeat(3,1fr)}

/* Les 4 services, côte à côte */


/* Les autres grilles de trois remplissent la ligne quel que soit
   le nombre d'éléments (valeurs, formations…). */
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Les 4 partenariats exclusifs, côte à côte */
.exclusive-grid{grid-template-columns:repeat(4,1fr)}

/* Les cartes gardent la même hauteur */
.group-grid > *,
.grid-3 > *,
.services-grid > *,
.exclusive-grid > *{height:100%}

@media(max-width:1200px){
  .exclusive-grid{grid-template-columns:repeat(2,1fr)}
  .group-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .services-grid,.exclusive-grid,.group-grid,.grid-3{grid-template-columns:1fr}
}

/* =========================================================
   LOGOS DES MARQUES SUR LA PAGE DES DOMAINES
   ========================================================= */
.domain-brand-name{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:4px 10px;background:#fff;border:1px solid #E3EDF1;border-radius:8px}
.domain-brand-name img{max-height:30px;max-width:104px;width:auto;height:auto;object-fit:contain;display:block}
.domain-brand-name b{font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--teal-dark);text-transform:uppercase}
.domain-brand-list li{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* =========================================================
   CARTES DE SERVICE — image à gauche, texte à droite
   Quatre colonnes rendaient les titres illisibles et le texte
   entassé. Deux cartes larges par ligne laissent respirer.
   ========================================================= */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.service-card{
  display:grid;
  grid-template-columns:200px 1fr;
  background:#fff;
  border:1px solid #E3EDF1;
  border-radius:20px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(12,59,76,.12);
  border-color:var(--teal-light);
}

.service-card-media{position:relative;min-height:210px;background:var(--tint)}
.service-card-media img{width:100%;height:100%;object-fit:cover;display:block}

.service-card-body{padding:26px 28px}

.service-card-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Sora',sans-serif;
  font-size:1.12rem;
  line-height:1.3;
  color:var(--teal-dark);
  margin-bottom:12px;
}
.service-card-icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--tint);
  color:var(--teal);
}
.service-card-text{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}

@media(max-width:1100px){
  .services-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .service-card{grid-template-columns:1fr}
  .service-card-media{min-height:180px}
  .service-card-body{padding:22px}
}

/* =========================================================
   CONDITIONNEMENT (vente au carton)
   ========================================================= */
.pack-label{
  display:inline-block;
  background:var(--tint);
  color:var(--teal);
  font-size:.74rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  margin-left:8px;
  white-space:nowrap;
}
.pack-detail{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.pack-detail b{font-size:.92rem;color:var(--teal-dark)}
.pack-detail small{color:var(--muted);font-size:.85rem}

/* =========================================================
   MARQUES D'UN DOMAINE — mise en page compacte
   La liste était en grille, à l'intérieur d'une carte dont la
   hauteur est imposée par la photo : les lignes s'étiraient pour
   remplir l'espace. En flex avec « align-items:flex-start »,
   chaque ligne garde sa hauteur naturelle.
   ========================================================= */
.domain-brands{display:block;height:auto}

.domain-brand-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-content:flex-start;
  gap:14px;
  margin-top:8px;
}

.domain-brand-list li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-height:0;
  height:auto;
  flex:0 0 auto;
  width:100%;
}

.domain-brand-name{
  flex:0 0 auto;
  min-height:0;
  height:40px;
  padding:5px 12px;
}
.domain-brand-name img{max-height:28px;max-width:110px}

.domain-brand-ranges{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.5;
}

/* La carte ne s'étire plus non plus */
.domain-card-body{align-self:start}

/* =========================================================
   FINITIONS TÉLÉPHONE
   Corrections issues de l'audit d'affichage mobile.
   ========================================================= */

/* Le titre de la maison mère était en taille fixe : il débordait
   sur les petits écrans. */
.group-parent h2{font-size:clamp(1.5rem,5vw,2rem)}

/* Rien ne dépasse jamais de l'écran */
img,svg,video,iframe{max-width:100%}
.wrap,section{max-width:100vw}

/* Les longues adresses email et les noms d'établissements
   passent à la ligne au lieu d'élargir la page. */
.map-card p,
.map-card a,
.ref-mini b,
.partner-name,
.domain-brand-ranges,
.showcase-row dd,
.trad-source p{overflow-wrap:anywhere}

@media(max-width:600px){
  /* Zones tactiles : 36 px minimum pour le sélecteur de langue */
  .lang-option{min-width:40px;height:36px;font-size:.78rem}

  /* Les bandeaux respirent moins haut sur téléphone */
  
  .hero-actions{gap:10px}

  /* Les grands chiffres restent lisibles sans déborder */
  .ref-stat b,.expansion-stat b,.dom-stat b{font-size:1.7rem}
  .split-figure b{font-size:1.5rem}

  /* Les deux boutons flottants ne se chevauchent pas */
  .whatsapp-zone{bottom:84px}
  .chat{bottom:14px}

  /* Les tableaux de la boutique défilent au lieu de déborder */
  .cart-line{gap:10px}
}

@media(max-width:380px){
  /* Très petits téléphones : une seule colonne partout */
  .home-gallery,.photo-grid,.partners-grid,.dom-stats{grid-template-columns:repeat(2,1fr)}
  .collage{grid-template-columns:1fr}
  .btn{padding:0 20px;font-size:.9rem}
}

/* =========================================================
   SAISIE SUR IPHONE
   Safari zoome automatiquement dès qu'un champ affiche du texte
   sous 16 px, et la page reste décalée après la saisie.
   On force donc 16 px sur les champs, uniquement sur téléphone.
   ========================================================= */
@media(max-width:768px){
  .input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea{
    font-size:16px;
  }
}

/* =========================================================
   CORRECTIONS TÉLÉPHONE (constatées à l'écran)
   ========================================================= */

/* --- 1. Le texte du bandeau d'accueil passait sous l'en-tête ---
   Sur téléphone, le logo tient sur deux lignes et l'en-tête est
   plus haut que les 76 px prévus. On lui laisse la place. */
@media(max-width:900px){
  .nav{height:auto;min-height:72px;padding:10px 0;gap:12px}
  .hero-inner{padding-top:118px;padding-bottom:52px}
  .page-hero{padding-top:126px;padding-bottom:42px}
}
@media(max-width:600px){
  .hero-inner{padding-top:60px;padding-bottom:44px}
  
  
}

/* --- 2. Les cartes de domaine masquaient leur photo ---
   Les étiquettes, affichées en permanence faute de survol sur
   téléphone, remplissaient toute la carte. On empile plutôt :
   photo en haut, texte en dessous. */
@media(max-width:760px){
  .dom{
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    background:var(--teal-dark);
  }

  /* La photo occupe une bande fixe, entièrement visible */
  .dom .cover{position:relative;height:190px;flex:none}

  /* Plus de voile : il n'y a plus de texte par-dessus */
  .dom::after{display:none}

  .dom .cap{position:static;padding:20px}
  .dom .cap h3{font-size:1.05rem}

  /* Les étiquettes restent visibles, sous le texte */
  .dom-tags{max-height:none;opacity:1;margin-top:12px}
  .dom-brands{margin-top:12px}
  .dom-more{margin-top:14px}
}

/* Bandeau des pages internes : place garantie sous l'en-tête fixe */
@media(max-width:900px){ .page-hero{padding-top:126px;padding-bottom:42px} }
@media(max-width:600px){ .page-hero{padding-top:112px;padding-bottom:36px} }

/* =========================================================
   EN-TÊTE SUR TÉLÉPHONE — moins chargé
   Le sélecteur de langue et le compte rejoignent le menu
   déroulant : il ne reste que le logo, le panier et le menu.
   ========================================================= */
.nav-mobile-only{display:none}

@media(max-width:1080px){
  .lang-switch--header,
  .icons .icon-link[href*="connexion"],
  .icons .icon-link[href*="compte"]{display:none}

  .nav-mobile-only{display:block}

  /* Le sélecteur, dans le menu déroulant */
  .lang-switch--menu{border-color:#CFE2E9;margin-top:6px}
  .lang-switch--menu .lang-option{min-width:52px;height:38px;color:var(--muted)}
  .lang-switch--menu .lang-option.on{background:var(--teal);color:#fff}

  /* Le logo tient sur une seule ligne */
  
  .logo span{white-space:nowrap}

  .icons{gap:6px}
  .burger{padding:4px}
}

@media(max-width:420px){
  .logo{font-size:17px;letter-spacing:.03em}
  
}

/* Le nom du site est coupé en deux lignes par défaut (AVENIR / MEDICAL).
   Sur téléphone, une seule ligne tient mieux dans l'en-tête. */
@media(max-width:1080px){
  .logo br{display:none}
  .logo span{line-height:1.1}
}

/* Un bouton isolé reste centré et ne dépasse jamais de l'écran */
.center .btn{max-width:100%}
@media(max-width:600px){
  .center .btn{width:auto;text-align:center}
  .btn{white-space:normal;line-height:1.25;padding-top:12px;padding-bottom:12px;min-height:48px}
}

/* =========================================================
   SÉLECTEUR DE LANGUE DANS LE MENU DÉROULANT
   Les liens du menu imposent une couleur « !important » et un
   affichage en bloc : le sélecteur en héritait et s'affichait
   de travers. On rétablit ses propres styles.
   ========================================================= */
@media(max-width:1080px){
  .nav ul .lang-switch--menu{
    display:inline-flex;
    align-items:stretch;
    border:1.5px solid #CFE2E9;
    border-radius:999px;
    overflow:hidden;
    margin:4px 0;
    background:#fff;
  }

  .nav ul .lang-switch--menu .lang-option{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    height:42px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--muted) !important;
    background:transparent;
  }

  .nav ul .lang-switch--menu .lang-option.on{
    background:var(--teal);
    color:#fff !important;
    border-left:0;
    padding-left:0;
  }

  /* Pas de trait animé ni de bordure d'élément actif ici */
  .nav ul .lang-switch--menu .lang-option::after{display:none}
}

/* =========================================================
   CHARGEMENT DES PAGES
   Une fine barre en haut de l'écran pendant la navigation :
   le visiteur voit que quelque chose se passe.
   ========================================================= */
.page-loader{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.page-loader.is-active{opacity:1}
.page-loader span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
  box-shadow:0 0 12px rgba(47,168,196,.8);
  transition:width .2s ease;
}

/* Le contenu apparaît en douceur au premier affichage,
   plutôt que d'un coup après un écran blanc. */
main{animation:pageIn .35s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* Respecte le réglage « animations réduites » du téléphone */
@media(prefers-reduced-motion:reduce){
  main{animation:none}
  .page-loader span{transition:none}
}

/* =========================================================
   LOGO SUR TÉLÉPHONE
   L'en-tête ne contient plus que le logo, le panier et le menu :
   le logo peut donc être nettement plus grand.
   Tailles calculées pour tenir jusqu'à 320 px de large.
   ========================================================= */
@media(max-width:1080px){
  .logo{white-space:nowrap;font-size:1.15rem;gap:11px}
  .logo svg{width:48px;height:48px}
  .logo br{display:none}
  .logo span{line-height:1.1}
}

@media(max-width:400px){
  .logo{font-size:1.05rem;gap:9px}
  .logo svg{width:44px;height:44px}
}

@media(max-width:340px){
  .logo{font-size:.95rem;gap:8px}
  .logo svg{width:38px;height:38px}
}

/* =========================================================
   RUBAN D'EXCLUSIVITÉ — ne dépasse plus de la carte
   Le ruban était en une seule ligne insécable : un texte long
   comme « Exclusivité Afrique de l'Ouest » débordait sur les
   cartes voisines. Il se replie désormais dans la largeur.
   ========================================================= */
.exclusive-card{padding-top:44px}

.exclusive-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:calc(100% - 24px);
  white-space:normal;
  text-align:center;
  line-height:1.25;
  font-size:.7rem;
  letter-spacing:.02em;
  padding:6px 14px;
  box-sizing:border-box;
}

/* L'étoile ne se déforme pas quand le texte passe sur deux lignes */
.exclusive-ribbon .ic-svg,
.exclusive-star .ic-svg{flex:none;width:15px;height:15px}

/* Les cartes gardent la même hauteur malgré un ruban à deux lignes */
.exclusive-grid{align-items:stretch}
.exclusive-card{display:flex;flex-direction:column;height:100%}

@media(max-width:760px){
  .exclusive-ribbon{font-size:.66rem;padding:5px 11px;max-width:calc(100% - 16px)}
  .exclusive-card{padding-top:40px}
}

/* Sur l'accueil, le prix est remplacé par une invitation à la boutique */
.price-hidden{font-size:.9rem;font-weight:700;color:var(--teal);letter-spacing:.01em}

/* =========================================================
   RÉALISATION PHARE — plusieurs photos et une vidéo
   ========================================================= */

/* Les vignettes, posées en bas de la grande photo */
.showcase-thumbs{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  z-index:2;
}
.showcase-thumb{
  position:relative;
  width:62px;
  height:62px;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  cursor:zoom-in;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px rgba(12,59,76,.28);
  background:var(--tint);
  aspect-ratio:auto;
}
.showcase-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.showcase-thumb:hover img{transform:scale(1.12)}

.showcase-thumb-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 10px;
  border-radius:10px;
  background:rgba(12,59,76,.82);
  color:#fff;
  font-weight:800;
  font-size:.82rem;
}

/* La vidéo, sous la fiche projet */
.showcase-video{margin:18px 0 6px;border-radius:14px;overflow:hidden}
.showcase-video .video-lite{border-radius:14px}

@media(max-width:760px){
  .showcase-thumbs{position:static;padding:12px 16px 0;left:auto;right:auto;bottom:auto}
  .showcase-thumb{width:54px;height:54px;border-width:1px}
}

/* =========================================================
   PAGE RÉFÉRENCES — photos et vidéo d'une réalisation
   ========================================================= */
.ref-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.ref-photo{
  position:relative;
  width:66px;
  height:66px;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--tint);
  aspect-ratio:auto;
}
.ref-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ref-photo:hover img{transform:scale(1.12)}

.ref-video{margin-top:18px;border-radius:14px;overflow:hidden}
.ref-video .video-lite{border-radius:14px}

@media(max-width:600px){
  .ref-photo{width:58px;height:58px}
}

/* =========================================================
   AGRANDISSEMENT — navigation au doigt
   ========================================================= */
.lightbox img{
  touch-action:pan-y pinch-zoom;   /* le pincement pour zoomer reste possible */
  user-select:none;
  -webkit-user-drag:none;
}

/* Repère de position : « 3 / 12 » */
.lightbox-count{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(12,59,76,.72);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:5px 14px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}

@media(max-width:820px){
  /* Sur téléphone, les flèches gênent plus qu'elles n'aident :
     le geste du doigt les remplace. */
  .lightbox-nav{display:none}

  .lightbox-count{top:14px;font-size:.78rem}

  /* Indication au premier affichage, puis effacement */
  .lightbox.is-open::after{
    content:'‹  Glissez pour changer de photo  ›';
    position:absolute;
    bottom:88px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(12,59,76,.72);
    color:#fff;
    font-size:.76rem;
    font-weight:600;
    padding:6px 14px;
    border-radius:999px;
    white-space:nowrap;
    animation:indiceGlisser 3.4s ease forwards;
    pointer-events:none;
  }
}

@keyframes indiceGlisser{
  0%{opacity:0}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;visibility:hidden}
}

@media(prefers-reduced-motion:reduce){
  .lightbox img{transition:none !important}
  .lightbox.is-open::after{animation:none;opacity:0}
}