/* =====================================================================
   LE LAB · feuille de style commune des pages de contenu
   Design system clair (papier crème, cartes blanches, accents jaune/ambre)
   ===================================================================== */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}

:root{
  --papier:#faf8f2; --carte:#ffffff; --bord:#ece7db;
  --encre:#171512; --doux:#6f6a60;
  --jaune:#FFC600; --ambre:#a37f00;
  --vert:#25623b;
  --ombre:0 14px 40px rgba(70,58,20,.09), 0 2px 8px rgba(70,58,20,.05);
  --ombre-sm:0 6px 18px rgba(70,58,20,.07);
  --display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation:none!important;transition:none!important;}}
body{
  background:radial-gradient(1200px 620px at 72% -12%, #fffdf4 0%, var(--papier) 55%);
  background-attachment:fixed;
  color:var(--encre); font-family:var(--body); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ambre);}
.wrap{width:min(1080px,100% - 2.6rem);margin-inline:auto;}
.narrow{width:min(820px,100% - 2.6rem);margin-inline:auto;}

/* ---------- En-tête ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,248,242,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bord);}
.site-header .inner{width:min(1080px,100% - 2.6rem);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;}
.brand{font-family:var(--display);font-size:1.7rem;letter-spacing:.06em;color:var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;}
.brand strong{font-weight:400;}
.brand .sines{font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.09em;background:var(--jaune);color:#171512;border-radius:999px;padding:.18rem .55rem;}
/* Pastille PRO de l'identité LE LAB (nav, titres, boutons) */
.pro-pill{display:inline-block;font-family:var(--body);font-size:.58rem;font-weight:800;letter-spacing:.04em;line-height:1;background:var(--jaune);color:#191919;border-radius:999px;padding:.16rem .42rem;margin-left:.3rem;vertical-align:middle;text-transform:none;}
.hnav .pro-pill{font-size:.52rem;padding:.13rem .36rem;margin-left:.26rem;}
/* liste de contenu dans un bloc fonction (coches, même esprit que les cartes d'offres) */
.fonction-liste{list-style:none;margin:.7rem 0 .8rem;display:grid;gap:.45rem;}
.fonction-liste li{display:flex;align-items:flex-start;gap:.5rem;color:var(--doux);font-size:.92rem;}
.fonction-liste svg{width:16px;height:16px;flex:none;margin-top:.22rem;stroke:var(--ambre);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
/* pastille grossie uniquement dans le grand titre (h1) */
h1 .pro-pill{font-size:clamp(.9rem,2vw,1.15rem);padding:.3rem .75rem;margin-left:.45rem;vertical-align:.4em;}
.hnav{display:flex;align-items:center;gap:.3rem;flex-wrap:nowrap;}
.hnav a{white-space:nowrap;}
.hnav a{color:var(--doux);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:.5rem .7rem;border-radius:9px;transition:color .18s,background .18s;}
.hnav a:hover{color:var(--ambre);background:#fff7db;}
.hnav a.plain[aria-current="page"]{color:var(--ambre);background:#fff7db;}
/* Bouton session (02/08/2026), repris de la page d'accueil : une pastille ronde en
   bout de barre, dorée dès qu'une session pro est ouverte. Il remplace l'ancien
   bouton « Dimensionner mon projet », qui n'avait pas sa place dans une barre de
   navigation. Le libellé est porté par aria-label : l'icône se suffit à elle-même
   et l'en-tête reste lisible même en allemand ou en néerlandais. */
.hnav .account-btn{width:34px;height:34px;flex:0 0 auto;padding:0;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--bord);background:var(--carte);color:var(--doux);
  transition:color .18s,border-color .18s,background .18s;}
.hnav .account-btn:hover,.hnav .account-btn:focus-visible{color:var(--ambre);border-color:var(--jaune);background:#fff7db;}
.hnav .account-btn.connecte{color:#171512;background:var(--jaune);border-color:var(--jaune);}
.hnav .account-btn svg{flex:0 0 auto;}
@media (max-width:640px){
  .brand{font-size:1.45rem;}
  .hnav{gap:.15rem;}
  .hnav a{padding:.38rem .45rem;font-size:.66rem;}
  /* le logo fait office d'Accueil : le lien du même nom a été retiré de la barre le
     02/08/2026, il n'y a donc plus rien à masquer ici. */
  .hnav .account-btn{width:30px;height:30px;padding:0;}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(1.6rem,4vw,2.6rem);}
.kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ambre);background:#fff8e0;border:1.5px solid #ffe9a3;border-radius:999px;padding:.34rem .8rem;}
.kicker svg{width:14px;height:14px;stroke:var(--ambre);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,6.4vw,4.1rem);letter-spacing:.02em;line-height:1.02;margin-top:1rem;}
h1 em{font-style:normal;color:var(--ambre);}
.hero .lead{color:var(--doux);font-size:clamp(1rem,2.2vw,1.18rem);max-width:60ch;margin-top:1rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.7rem;}

/* ---------- Boutons ---------- */
.btn{border:none;cursor:pointer;font-family:var(--body);font-weight:700;font-size:.94rem;letter-spacing:.02em;border-radius:999px;padding:.95rem 1.7rem;transition:transform .15s,background .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;}
.btn svg{width:18px;height:18px;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.btn .btn-sous{display:block;text-align:left;line-height:1.25;}
.btn .btn-sous small{display:block;font-size:.74em;font-weight:600;opacity:.85;letter-spacing:.01em;}
.btn-or{background:var(--jaune);color:#171512;box-shadow:0 8px 22px rgba(255,198,0,.32);}
.btn-or svg{stroke:#171512;}
.btn-or:hover{transform:translateY(-2px);background:#ffd233;}
.btn-wa{background:var(--vert);color:#fff;box-shadow:0 8px 22px rgba(37,98,59,.24);}
.btn-wa svg{stroke:#fff;}
.btn-wa:hover{transform:translateY(-2px);}
/* Bouton vert plein (02/08/2026) : l'essai gratuit sur la couverture fonctionnelle.
   Même vert que .btn-wa mais classe distincte : .btn-wa désigne WhatsApp, la
   confondre avec un appel à l'action rendrait la feuille illisible à la relecture. */
.btn-vert{background:var(--vert);color:#fff;box-shadow:0 8px 22px rgba(37,98,59,.24);}
.btn-vert svg{stroke:#fff;}
.btn-vert:hover{transform:translateY(-2px);background:#2e7a4a;}
.btn-ligne{background:#fff;color:var(--encre);border:1.5px solid var(--bord);}
/* La couleur du trait des icônes se pose par variante de bouton (.btn svg ne fixe que
   la taille). Elle manquait ici : les 48 boutons bordés du site dessinaient leur icône
   en stroke:none, invisible, tout en lui réservant ses 18 px, ce qui décentrait le
   libellé. Constat du 02/08/2026, le défaut existait aussi en ligne. */
.btn-ligne svg{stroke:var(--encre);}
.btn-ligne:hover{transform:translateY(-2px);border-color:#dcd4c2;}

/* ---------- Sections ---------- */
section{padding:clamp(1.6rem,4vw,2.6rem) 0;}
.sec-head{max-width:64ch;margin-bottom:clamp(1.6rem,4vw,2.4rem);}
.sec-head .over{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ambre);}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.6vw,2.9rem);letter-spacing:.02em;line-height:1.06;margin-top:.35rem;}
h2 em{font-style:normal;color:var(--ambre);}
.sec-head p{color:var(--doux);margin-top:.7rem;}
h3{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.03em;}

/* ---------- Carte générique ---------- */
.card{background:var(--carte);border:1px solid var(--bord);border-radius:var(--radius);box-shadow:var(--ombre);padding:1.5rem 1.6rem;}

/* ---------- Liste « ce que l'étude fournit » ---------- */
.livrables{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.livrable{background:var(--carte);border:1px solid var(--bord);border-radius:18px;box-shadow:var(--ombre-sm);padding:1.3rem 1.35rem;}
.livrable .ic{width:42px;height:42px;border-radius:12px;background:#fff8e0;display:grid;place-items:center;margin-bottom:.8rem;}
.livrable .ic svg{width:22px;height:22px;stroke:var(--ambre);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.livrable b{display:block;font-size:1rem;font-weight:700;margin-bottom:.25rem;}
.livrable p{color:var(--doux);font-size:.9rem;}

/* ---------- Mini manuel : étapes ---------- */
.etape{display:grid;grid-template-columns:1fr;gap:1.2rem;background:var(--carte);border:1px solid var(--bord);border-radius:var(--radius);box-shadow:var(--ombre-sm);padding:1.5rem 1.6rem;margin-bottom:1.4rem;}
@media (min-width:820px){.etape{grid-template-columns:minmax(0,420px) 1fr;align-items:center;gap:2rem;}.etape.rev{grid-template-columns:1fr minmax(0,420px);}.etape.rev .etape-shot{order:2;}}
.etape-shot{border-radius:14px;overflow:hidden;border:1px solid var(--bord);background:#111;box-shadow:0 10px 26px rgba(70,58,20,.14);}
.etape-shot img{width:100%;display:block;}
.etape-txt .num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--jaune);color:#171512;font-weight:800;font-size:.95rem;}
.etape-txt h3{margin:.6rem 0 .4rem;font-size:1.55rem;}
.etape-txt p{color:var(--doux);font-size:.94rem;}
.etape-txt p + p{margin-top:.5rem;}

/* capture pleine largeur (résultats) */
.shot-large{border-radius:16px;overflow:hidden;border:1px solid var(--bord);background:#111;box-shadow:var(--ombre);margin:1rem 0;}
.shot-large img{width:100%;display:block;}
.shot-legende{color:var(--doux);font-size:.85rem;margin:.5rem 0 1.6rem;}

/* capture sur fond clair (blocs isolés) */
.shot-clair{border-radius:16px;overflow:hidden;border:1px solid var(--bord);background:#faf8f2;box-shadow:var(--ombre-sm);}
.shot-clair img{width:100%;display:block;}

/* ---------- Fonction pro (page mode-pro) ---------- */
.fonction{background:var(--carte);border:1px solid var(--bord);border-radius:var(--radius);box-shadow:var(--ombre-sm);padding:1.5rem 1.6rem;margin-bottom:1.4rem;display:grid;gap:1.3rem;grid-template-columns:1fr;}
@media (min-width:840px){.fonction{grid-template-columns:1fr minmax(0,460px);align-items:center;gap:2rem;}.fonction.rev{grid-template-columns:minmax(0,460px) 1fr;}.fonction.rev .fonction-shot{order:-1;}}
.fonction-shot{border-radius:14px;overflow:hidden;border:1px solid var(--bord);box-shadow:0 8px 22px rgba(70,58,20,.12);}
.fonction-shot.sombre{background:#111;}
.fonction-shot.clair{background:#faf8f2;}
.fonction-shot img{width:100%;display:block;}
.fonction h3{font-size:1.6rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.pro-tag{font-family:var(--body);font-size:.62rem;font-weight:800;letter-spacing:.08em;background:var(--jaune);color:#171512;border-radius:999px;padding:.2rem .5rem;}
.fonction p{color:var(--doux);font-size:.94rem;margin-top:.6rem;}

/* ---------- pastille destinataires ---------- */
.publics{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.public{display:flex;gap:.8rem;align-items:flex-start;background:var(--carte);border:1px solid var(--bord);border-radius:16px;padding:1.1rem 1.2rem;box-shadow:var(--ombre-sm);}
.public svg{flex:0 0 auto;width:24px;height:24px;stroke:var(--ambre);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;margin-top:.15rem;}
.public b{display:block;font-size:.98rem;}
.public span{color:var(--doux);font-size:.88rem;}

/* ---------- Tableau comparatif ---------- */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;background:var(--carte);border:1px solid var(--bord);border-radius:var(--radius);overflow:hidden;box-shadow:var(--ombre);}
.compare th,.compare td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--bord);vertical-align:top;font-size:.92rem;}
.compare thead th{font-family:var(--display);font-weight:400;letter-spacing:.04em;font-size:1.35rem;background:#fbf8ee;}
.compare thead th.pro{background:linear-gradient(135deg,#fffdf4,#fff1c4);}
.compare tbody th{font-weight:600;color:var(--encre);}
.compare td.oui{color:var(--vert);font-weight:600;}
.compare td.non{color:#b0a99a;}
.compare .ic-oui{display:inline-flex;width:18px;height:18px;vertical-align:-3px;margin-right:.35rem;}
.compare .ic-oui svg{stroke:var(--vert);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:none;}
.col-pro{background:#fffdf6;}

/* offre / prix */
.offre-grid{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:1.4rem;}
@media (min-width:760px){.offre-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1020px){.offre-grid.trois{grid-template-columns:1fr 1fr 1fr;}
.offre-grid.trois .offre-notes{min-height:4.9em;}}
.offre{background:var(--carte);border:1px solid var(--bord);border-radius:var(--radius);box-shadow:var(--ombre-sm);padding:1.6rem 1.7rem;}
.offre.pro{background:linear-gradient(160deg,#fffdf4,#fff6d6);border-color:#ffe9a3;}
.offre .tag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ambre);}
.offre .prix{font-family:var(--display);font-weight:400;font-size:2.6rem;letter-spacing:.02em;line-height:1;margin:.4rem 0 .2rem;}
.offre .prix small{font-family:var(--body);font-size:.9rem;color:var(--doux);font-weight:600;}
.offre p{color:var(--doux);font-size:.92rem;margin-top:.4rem;}
.offre ul{list-style:none;margin:1rem 0 0;display:grid;gap:.5rem;}
.offre li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;}
.offre li svg{flex:0 0 auto;width:17px;height:17px;stroke:var(--vert);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:.2rem;}

/* étapes de souscription */
.parcours{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.4rem;}
.parc{background:var(--carte);border:1px solid var(--bord);border-radius:18px;box-shadow:var(--ombre-sm);padding:1.3rem 1.35rem;}
.parc .num{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:50%;background:#fff8e0;color:var(--ambre);font-weight:800;font-size:.9rem;border:1.5px solid #ffe9a3;}
.parc b{display:block;margin:.6rem 0 .25rem;font-size:1rem;}
.parc p{color:var(--doux);font-size:.9rem;}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;}
.faq details{background:var(--carte);border:1px solid var(--bord);border-radius:16px;box-shadow:var(--ombre-sm);overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--ambre);border-bottom:2px solid var(--ambre);transform:rotate(45deg);transition:transform .2s;margin-top:-4px;}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px;}
.faq .rep{padding:0 1.3rem 1.2rem;color:var(--doux);font-size:.94rem;}
.faq .rep p + p{margin-top:.6rem;}

/* ---------- bandeau CTA ---------- */
.cta-band{background:linear-gradient(135deg,#fffdf4,#fff2c6);border:1.5px solid #ffe9a3;border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.4rem);text-align:center;box-shadow:var(--ombre-sm);}
.cta-band h2{margin-bottom:.5rem;}
.cta-band p{color:#6b5d2e;max-width:52ch;margin:0 auto 1.3rem;}
.cta-band .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;}

/* note discrète */
.note{color:var(--doux);font-size:.86rem;}
.aconf{background:#ffe1e1;color:#8a1f1f;border-radius:5px;padding:0 .3rem;font-weight:600;}

/* ---------- Pied ---------- */
.site-foot{border-top:1px solid var(--bord);margin-top:2.4rem;background:#fbf9f3;}
.site-foot .inner{width:min(1080px,100% - 2.6rem);margin-inline:auto;padding:2.2rem 0;display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media (min-width:720px){.site-foot .inner{grid-template-columns:1.4fr 1fr 1fr;}}
.site-foot .brand{font-size:1.5rem;margin-bottom:.5rem;}
.site-foot p{color:var(--doux);font-size:.88rem;}
.site-foot h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--encre);margin-bottom:.7rem;}
.site-foot ul{list-style:none;display:grid;gap:.5rem;}
.site-foot a{color:var(--doux);text-decoration:none;font-size:.9rem;}
.site-foot a:hover{color:var(--ambre);}
.site-foot .contact a{color:var(--ambre);font-weight:600;}
.foot-bas{border-top:1px solid var(--bord);}
.foot-bas .inner{width:min(1080px,100% - 2.6rem);margin-inline:auto;padding:1.1rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--doux);font-size:.82rem;}
.foot-bas a{font-size:inherit;}
.foot-bas span[aria-hidden]{color:var(--bord);}

/* pastille dans un bouton plein jaune/orange : inversion pour rester lisible */
.btn-or .pro-pill, .btn-main .pro-pill { background: #191919; color: #FFC600; }

/* ---------- Selecteur de langue de l'en-tete : de vrais liens, sans JavaScript ---------- */
.lang-pick{position:relative;}
.lang-pick>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.34rem;
  color:var(--doux);font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:.5rem .7rem;border-radius:9px;transition:color .18s,background .18s;}
.lang-pick>summary::-webkit-details-marker{display:none;}
.lang-pick>summary::marker{content:"";}
.lang-pick>summary:hover,.lang-pick[open]>summary{color:var(--ambre);background:#fff7db;}
.lang-pick>summary svg{flex:0 0 auto;}
.lang-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:60;min-width:10.5rem;
  background:var(--carte);border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre);
  padding:.3rem;display:flex;flex-direction:column;}
.hnav .lang-menu a{display:block;text-align:left;text-transform:none;letter-spacing:0;
  font-size:.82rem;font-weight:500;color:var(--encre);padding:.45rem .6rem;border-radius:8px;}
.hnav .lang-menu a:hover{background:var(--papier);color:var(--ambre);}
.hnav .lang-menu a[aria-current]{color:var(--ambre);font-weight:700;background:#fff7db;}
@media (max-width:640px){
  .lang-pick>summary{padding:.38rem .45rem;font-size:.66rem;gap:.25rem;}
  .lang-menu{min-width:9.5rem;}
}

/* ---------- En-tête sur téléphone étroit (02/08/2026) ----------
   Depuis que la barre porte le bouton session, elle compte quatre éléments là où
   l'ancien bouton « Dimensionner mon projet » la faisait déjà déborder sur trois
   lignes. Mesures faites sur la version allemande, la plus longue : à 390 px il
   manquait 13 px, à 360 px il en manquait 43. On les récupère sur les marges, la
   taille de la marque et les libellés, jamais en masquant un lien : la navigation
   reste entière jusqu'au plus petit écran. Deux paliers plutôt qu'un, pour que la
   marque ne se ratatine pas d'un coup au passage de la frontière. Ce bloc ferme la
   feuille pour passer après le palier 640 px du sélecteur de langue. */
@media (max-width:430px){
  .site-header .inner{width:min(1080px,100% - 1.9rem);gap:.5rem;}
  .brand{font-size:1.32rem;gap:.4rem;}
  .brand .sines{font-size:.55rem;padding:.15rem .45rem;letter-spacing:.07em;}
  .hnav{gap:.1rem;}
  .hnav a{padding:.36rem .34rem;font-size:.63rem;letter-spacing:.03em;}
  .hnav .pro-pill{font-size:.48rem;padding:.11rem .3rem;margin-left:.2rem;}
  .lang-pick>summary{padding:.36rem .34rem;font-size:.63rem;gap:.22rem;}
  .hnav .account-btn{width:30px;height:30px;padding:0;}
}
@media (max-width:370px){
  .site-header .inner{width:min(1080px,100% - 1.2rem);gap:.35rem;}
  .brand{font-size:1.15rem;gap:.3rem;}
  .brand .sines{font-size:.48rem;padding:.12rem .34rem;letter-spacing:.05em;}
  .hnav{gap:.02rem;}
  .hnav a{padding:.32rem .24rem;font-size:.58rem;letter-spacing:.01em;}
  .hnav .pro-pill{font-size:.43rem;padding:.09rem .24rem;margin-left:.14rem;}
  .lang-pick>summary{padding:.32rem .24rem;font-size:.58rem;gap:.18rem;}
  .hnav .account-btn{width:28px;height:28px;padding:0;}
}

/* ---------- Header mobile (03/08/2026) : une seule ligne, jamais de repli ----------
   Sous 640 px le lien « LE LAB PRO » se réduit à la pastille jaune PRO : la pastille
   est l'identité pro partout sur le site, elle se suffit. Le préfixe revient dès
   qu'il y a la place. Le lien de la page courante, lui, n'est pas rendu du tout
   (règle éditoriale : on ne propose pas la page où on est). */
@media (max-width:640px){
  .hnav .nav-pro .lelab-prefix{display:none;}
  .hnav .nav-pro{padding:.3rem .2rem;}
  .hnav .nav-pro .pro-pill{font-size:.62rem;padding:.34rem .6rem;margin-left:0;}
}

/* ---------- Footer mobile (03/08/2026) : la barre basse tient sur une ligne ----------
   Sous 640 px, le lien SINES Export et son séparateur s'effacent (décision Nicolas :
   « on retire SINES Export si ça déborde ») ; il reste © + Mentions + SINES. */
@media (max-width:640px){
  .foot-bas .inner{flex-wrap:nowrap;white-space:nowrap;font-size:.78rem;}
  .foot-bas a[href*="sines-export"]{display:none;}
  .foot-bas span[aria-hidden]:last-of-type{display:none;}
}