/* =========================================================
   Laboratoire IBNSINA — version 2 du site (01/10/2026)
   Couleur de marque choisie : #7FE4D3 (menthe médicale claire)
   Sur cette couleur, le texte est toujours foncé (--encre) ;
   pour les liens sur fond blanc : --sarcelle (même teinte, lisible).
   ========================================================= */
:root{
  --menthe:#7FE4D3;      /* couleur de marque : bandeau, boutons, bande qualité */
  --menthe-fonce:#5ED3BF;/* survol des boutons */
  --menthe-pale:#ECFAF7; /* fonds de sections */
  --sarcelle:#11786A;    /* liens, icônes, chiffres sur fond blanc */
  --encre:#13302B;       /* texte */
  --gris:#4D6862;        /* texte secondaire */
  --trait:#CDEDE6;       /* filets, bordures */
  --blanc:#FFFFFF;
  --rayon:10px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:'Public Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--encre);background:var(--blanc)}
a{color:var(--sarcelle)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sarcelle);outline-offset:2px}
img{max-width:100%;display:block}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.15;margin:0;color:var(--encre)}
h2{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.01em}
.intro{color:var(--gris);max-width:62ch;margin:10px 0 0}
section{padding:72px 0}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border-radius:var(--rayon);padding:13px 22px;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.btn-plein{background:var(--menthe);color:var(--encre)}
.btn-plein:hover{background:var(--menthe-fonce)}
.btn-contour{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-contour:hover{background:var(--menthe-pale)}

/* Bandeau pratique */
.bandeau{background:var(--menthe);color:var(--encre);font-size:14px}
.bandeau .conteneur{display:flex;gap:22px;flex-wrap:wrap;align-items:center;min-height:38px;padding-top:6px;padding-bottom:6px}
.bandeau a{color:var(--encre);text-decoration:none;font-weight:700}
.bandeau .urgence{margin-left:auto}
.bandeau i{margin-right:6px}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.entete .conteneur{display:flex;align-items:center;gap:28px;min-height:74px;position:relative}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--encre)}
.croix{width:40px;height:40px;flex:none;position:relative;border-radius:8px;background:var(--menthe)}
.croix::before,.croix::after{content:"";position:absolute;background:var(--encre);border-radius:2px}
.croix::before{left:17px;top:8px;width:6px;height:24px}
.croix::after{left:8px;top:17px;width:24px;height:6px}
.marque strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
.marque span{display:block;font-family:'Noto Kufi Arabic',sans-serif;font-size:13px;color:var(--gris);line-height:1.3}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{color:var(--encre);text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:8px}
.menu a:hover,.menu a[aria-current]{background:var(--menthe-pale);color:var(--sarcelle)}
.menu .btn{padding:9px 16px;font-size:15px;margin-left:8px;color:var(--encre)}
.menu .btn:hover{background:var(--menthe-fonce);color:var(--encre)}
.burger{display:none;margin-left:auto}
.burger summary{list-style:none;cursor:pointer;font-weight:700;color:var(--encre);padding:8px 12px;border:2px solid var(--trait);border-radius:8px}
.burger summary::-webkit-details-marker{display:none}
.burger nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--trait);padding:8px 16px 18px;display:grid}
.burger nav a{padding:12px 0;border-bottom:1px solid var(--menthe-pale);color:var(--encre);text-decoration:none;font-weight:600}

/* Héros de l'accueil : vidéo, voile clair à gauche, texte foncé */
.heros{position:relative;min-height:min(78vh,720px);display:flex;align-items:center;overflow:hidden}
.heros video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.heros::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.78) 32%,rgba(236,250,247,.25) 55%,rgba(236,250,247,0) 72%)}
.heros .conteneur{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center;width:100%;padding-top:56px;padding-bottom:56px}
.heros h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.02em;max-width:15ch}
.heros p{font-size:19px;color:#2E4A44;max-width:46ch;margin:18px 0 30px}
.heros .actions{display:flex;gap:12px;flex-wrap:wrap}
.specialites{margin-top:28px;color:var(--gris);font-size:15px}

/* Enseigne « ouvert » */
.enseigne{background:#fff;border-radius:14px;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(19,48,43,.18);border-top:6px solid var(--menthe)}
.enseigne .etat{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px}
.enseigne .feu{width:14px;height:14px;border-radius:50%;background:var(--menthe-fonce);box-shadow:0 0 0 6px rgba(127,228,211,.35);animation:pouls 2.4s ease-in-out infinite}
@keyframes pouls{50%{box-shadow:0 0 0 11px rgba(127,228,211,.08)}}
.enseigne .sous{color:var(--gris);margin:4px 0 16px 26px;font-size:15px}
.enseigne ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.enseigne li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--trait);font-size:15px}
.enseigne li span{color:var(--gris)}
.enseigne li a{font-weight:800;font-size:17px;color:var(--sarcelle);text-decoration:none;white-space:nowrap}
.enseigne .itin{display:flex;gap:8px;align-items:center;margin-top:16px;font-weight:700;text-decoration:none;font-size:15px}

/* Préparer sa venue : séquence en 3 étapes */
.pale{background:var(--menthe-pale)}
.etapes{list-style:none;counter-reset:e;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--menthe)}
.etapes li{counter-increment:e;padding:26px 28px 6px 0}
.etapes li+li{padding-left:28px;border-left:1px solid var(--trait)}
.etapes li::before{content:counter(e);display:block;font-size:44px;font-weight:800;color:var(--sarcelle);line-height:1;margin-bottom:12px}
.etapes h3{font-size:20px;margin-bottom:8px}
.etapes p{margin:0;color:var(--gris);font-size:16px}

/* Informations pratiques : photos */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.info{text-decoration:none;color:inherit;display:block}
.info img{aspect-ratio:2/1;object-fit:cover;width:100%;height:auto;border-radius:var(--rayon);background:var(--menthe-pale)}
.info h3{font-size:20px;margin:16px 0 6px}
.info p{margin:0;color:var(--gris);font-size:16px}
.info .lire{display:inline-block;margin-top:10px;font-weight:700;color:var(--sarcelle)}
.info:hover h3{color:var(--sarcelle);text-decoration:underline;text-underline-offset:4px}

/* Analyses : liste chiffrée */
.analyses{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.liste-analyses{list-style:none;margin:0;padding:0;border-top:3px solid var(--menthe)}
.liste-analyses li{border-bottom:1px solid var(--trait)}
.liste-analyses a{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:20px 4px;text-decoration:none;color:inherit}
.liste-analyses a:hover{background:#fff}
.liste-analyses strong{font-size:21px}
.liste-analyses .nb{font-size:21px;font-weight:800;color:var(--sarcelle);text-align:right;white-space:nowrap}
.liste-analyses .nb small{font-size:14px;font-weight:600;color:var(--gris)}
.liste-analyses p{grid-column:1/-1;margin:0;color:var(--gris);font-size:15.5px;max-width:64ch}
.catalogue{margin-top:24px}

/* Qualité : la bande menthe de la page */
.qualite{background:var(--menthe)}
.qualite .grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.qualite .intro{color:#21443D}
.qualite ul{margin:20px 0 0;padding:0;list-style:none}
.qualite li{padding:15px 0 15px 34px;border-bottom:1px solid rgba(19,48,43,.15);position:relative}
.qualite li::before{content:"\f00c";font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:16px;color:var(--encre)}
.qualite a{color:var(--encre);font-weight:700}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--rayon);overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(19,48,43,.2)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Accès : photo du plan */
.acces{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
.plan{display:block;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait)}
.plan img{width:100%;height:auto}
.plan span{display:block;padding:10px 14px;font-size:14px;font-weight:600;background:var(--menthe-pale);color:var(--sarcelle)}
.coord dl{margin:18px 0 0}
.coord dt{font-size:14px;color:var(--gris);margin-top:14px}
.coord dd{margin:2px 0 0;font-weight:700;font-size:18px}
.coord dd a{color:var(--encre);text-decoration:none}
.coord dd a:hover{color:var(--sarcelle)}
.coord .boutons{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* Espace professionnel */
.blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
.bloc{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--menthe);border-radius:var(--rayon);padding:22px}
.bloc h3{font-size:18px;margin-bottom:8px}
.bloc p{margin:0 0 10px;color:var(--gris);font-size:15.5px}
.bloc a{font-weight:700}

/* En-tête des pages intérieures */
.tete-page{position:relative;background:var(--menthe-pale) center/cover no-repeat;border-bottom:1px solid var(--trait)}
.tete-page::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.88) 45%,rgba(236,250,247,.35) 100%)}
.tete-page .conteneur{position:relative;padding-top:52px;padding-bottom:46px}
.fil{font-size:14px;color:var(--gris);margin-bottom:14px}
.fil a{color:var(--gris)}
.tete-page h1{font-size:clamp(30px,3.8vw,46px);font-weight:800;letter-spacing:-.015em;max-width:22ch}
.tete-page p{color:#2E4A44;max-width:60ch;margin:14px 0 0;font-size:18px}
.onglets{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.onglets a{padding:8px 14px;border-radius:999px;border:1.5px solid var(--encre);color:var(--encre);text-decoration:none;font-weight:600;font-size:15px;background:#fff}
.onglets a[aria-current]{background:var(--menthe);border-color:var(--menthe)}

/* Contenu des rubriques */
.page{padding:56px 0 72px}
.texte{max-width:72ch}
.texte p,.texte li{color:#2B4741}
.texte h2,.texte h3,.texte h4{margin:28px 0 10px}
.elements{display:grid;gap:0;margin-top:8px;border-top:3px solid var(--menthe)}
.element{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;padding:28px 0;border-bottom:1px solid var(--trait)}
.element.sans-image{grid-template-columns:minmax(0,1fr)}
.element img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--menthe-pale);border-radius:var(--rayon)}
.element h2{font-size:22px;margin-bottom:8px}
.element .corps{color:#2B4741;max-width:75ch}
.element .corps p{margin:0 0 10px}
.fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
.fiche{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--trait);border-radius:var(--rayon);text-decoration:none;color:inherit;background:#fff}
.fiche:hover{border-color:var(--menthe-fonce);background:var(--menthe-pale)}
.fiche i{font-size:26px;color:#C2453A;margin-top:2px}
.fiche strong{display:block}
.fiche span{font-size:14px;color:var(--gris)}
.vide{padding:40px 0;color:var(--gris)}

/* Tableaux d'analyses */
.outils{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.recherche{flex:1 1 320px;display:flex;align-items:center;gap:10px;border:2px solid var(--trait);border-radius:var(--rayon);padding:0 14px;background:#fff}
.recherche:focus-within{border-color:var(--sarcelle)}
.recherche i{color:var(--gris)}
.recherche input{flex:1;border:0;outline:0;font:inherit;padding:12px 0;background:transparent;color:var(--encre)}
.compteur{color:var(--gris);font-size:15px}
.tableau{width:100%;border-collapse:collapse;font-size:15.5px}
.tableau th{text-align:left;font-size:14px;font-weight:700;color:var(--gris);padding:10px 12px;border-bottom:3px solid var(--menthe);white-space:nowrap}
.tableau td{padding:14px 12px;border-bottom:1px solid var(--trait);vertical-align:top}
.tableau tr:hover td{background:var(--menthe-pale)}
.tableau .nom{font-weight:700}
.tableau .delai{white-space:nowrap;font-weight:700;color:var(--sarcelle)}
.tableau .tech,.tableau .pre{color:var(--gris)}
.tableau .g a{color:var(--gris);font-size:18px}
.tableau .g a:hover{color:var(--sarcelle)}
.etiquette{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-top:6px}
.etiquette.nouveau{background:var(--menthe);color:var(--encre)}
.etiquette.rupture{background:#FCE8E6;color:#9B2C22}
.pagination{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.pagination button{font:inherit;font-size:15px;min-width:40px;padding:8px 12px;border:1.5px solid var(--trait);border-radius:8px;background:#fff;color:var(--encre);cursor:pointer}
.pagination button[aria-current]{background:var(--menthe);border-color:var(--menthe);font-weight:700}
.pagination button:disabled{opacity:.4;cursor:default}
.defile{overflow-x:auto}

/* Formulaire de contact */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start}
.champ{display:grid;gap:6px;margin-bottom:18px}
.champ label{font-weight:700;font-size:15px}
.champ input,.champ textarea{font:inherit;color:var(--encre);padding:12px 14px;border:2px solid var(--trait);border-radius:var(--rayon);background:#fff;width:100%}
.champ input:focus,.champ textarea:focus{border-color:var(--sarcelle);outline:0}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alerte{padding:14px 16px;border-radius:var(--rayon);margin-bottom:20px;font-weight:600}
.alerte.erreur{background:#FCE8E6;color:#8A2419}
.carte-coord{background:var(--menthe-pale);border-radius:var(--rayon);padding:26px;border-top:6px solid var(--menthe)}
.carte-coord h2{font-size:22px}
.merci{text-align:left;background:#fff;border:1px solid var(--trait);border-top:6px solid var(--menthe);border-radius:var(--rayon);padding:34px}
.merci .ok{width:56px;height:56px;border-radius:50%;background:var(--menthe);display:grid;place-items:center;font-size:26px;margin-bottom:16px}
.merci h2{font-size:30px;margin-bottom:12px}
.merci p{color:#2B4741;margin:0 0 12px;max-width:56ch}

/* Formulaire de contact en bas de l'accueil */
.bande-contact{background:#fff;border-top:6px solid var(--menthe)}
.bande-contact .merci h2{font-size:28px}

/* Pied de page (clair) */
.pied{background:var(--menthe-pale);color:var(--gris);padding:52px 0 28px;font-size:15px;border-top:6px solid var(--menthe)}
.pied .grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
.pied h3{font-size:16px;margin-bottom:12px}
.pied a{color:var(--encre);text-decoration:none}
.pied a:hover{color:var(--sarcelle);text-decoration:underline}
.pied ul{list-style:none;margin:0;padding:0;line-height:2}
.reseaux{display:flex;gap:16px;margin-top:14px;font-size:20px}
.pied .bas{border-top:1px solid var(--trait);margin-top:36px;padding-top:18px;font-size:13.5px}

/* WhatsApp */
.whatsapp{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;background:#1C8C4E;color:#fff;text-decoration:none;font-weight:700;padding:13px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.whatsapp i{font-size:22px}
.whatsapp:hover{background:#167540}

/* Fenêtre prélèvement à domicile */
dialog{border:0;border-radius:14px;padding:0;max-width:520px;width:calc(100% - 32px);color:var(--encre)}
dialog::backdrop{background:rgba(19,48,43,.55)}
dialog .tete{background:var(--menthe);padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
dialog .tete h2{font-size:21px}
dialog .tete button{background:none;border:0;color:var(--encre);font-size:28px;cursor:pointer;line-height:1}
dialog .corps{padding:8px 24px 22px}
dialog .inf{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--trait)}
dialog .inf span{color:var(--gris);font-size:14px;display:block}
dialog .inf a{font-weight:800;color:var(--sarcelle);text-decoration:none;white-space:nowrap}
dialog .note{color:var(--gris);font-size:14.5px;margin:14px 0 0}
#whatsapp-qr{max-width:600px}
#whatsapp-qr .tete h2 i{color:#1C8C4E}
.qr-corps{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding-top:22px!important}
.qr-code{width:236px;height:236px;padding:8px;background:#fff;border:2px solid var(--menthe);border-radius:var(--rayon);display:grid;place-items:center;font-size:14px;color:var(--gris);text-align:center}
.qr-code img,.qr-code canvas{display:block}
@media (max-width:560px){.qr-corps{grid-template-columns:1fr;justify-items:center}}

/* Tablettes et mobiles */
@media (max-width:1000px){
  .menu{display:none}.burger{display:block}
  .heros .conteneur,.analyses,.qualite .grille,.acces,.contact{grid-template-columns:1fr}
  .heros h1{max-width:20ch}
  .heros::before{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.85))}
  .infos,.blocs{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:52px 0}
  .conteneur{padding:0 16px}
  .bandeau .urgence{margin-left:0}
  .etapes,.infos,.blocs,.pied .grille,.deux{grid-template-columns:1fr}
  .etapes li+li{padding-left:0;border-left:0;border-top:1px solid var(--trait)}
  .element{grid-template-columns:1fr}
  .element img{max-width:280px}
  .tableau .tech,.tableau .pre,.tableau .g,.tableau th.tech,.tableau th.pre,.tableau th.g{display:none}
  .whatsapp span{display:none}
  .whatsapp{padding:14px}
}