/* ------------------------------------------------------------------
   Hex4link — habillage « annuaire du web », repris de hex4link.html.
   Fond blanc par défaut ; le noir ne s'active qu'au clic sur le bouton
   en bas à droite (aucune bascule automatique selon le système).
   Une seule feuille pour les trois pages.
------------------------------------------------------------------ */

:root{
  --bg:#ffffff; --bg2:#f6f6f6;
  --ink:#222222; --ink-soft:#666666;
  --line:#cccccc;
  --red:#d2232a; --blue:#1a5fb4; --green:#18702f;
  --purple:#7b2fbe; --orange:#b35900; --yellow:#f2b705;
  --yellow-edge:#c99a00; --yellow-ink:#3a2a00;
  --link:#1a0dab; --visited:#551a8b;
  --on-band:#ffffff;    /* texte posé sur une bande de couleur */
  --shadow:rgba(0,0,0,.4);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#17191c; --bg2:#1e2024;
  --ink:#e2e2e2; --ink-soft:#a0a0a0;
  --line:#3a3d42;
  --red:#e8585e; --blue:#5a8fd6; --green:#4fae67;
  --purple:#a76fdc; --orange:#e5983f; --yellow:#d9a50a;
  --yellow-edge:#8a6b00; --yellow-ink:#f6e6bd;
  --link:#8ea7f2; --visited:#c7a6e8;
  --on-band:#17191c;    /* les bandes s'éclaircissent en sombre : encre foncée */
  --shadow:rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box;}
/* doit passer avant les display:block/flex des cartes, sinon la recherche
   compte juste mais ne masque rien */
[hidden]{display:none!important;}
html,body{margin:0;}
body{
  font:13px/1.5 Arial,Helvetica,sans-serif;
  color:var(--ink);background:var(--bg);
}
a{color:var(--link);text-decoration:underline;}
a:visited{color:var(--visited);}
a:hover{color:var(--red);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
img{max-width:100%;}
p{margin:0 0 9px;}
p:last-child{margin-bottom:0;}

.wrap{
  max-width:980px;margin:0 auto;padding-block:10px 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* ---------- barre du haut ---------- */
.microbar{
  font-size:11px;color:var(--ink-soft);padding:5px 2px;border-bottom:1px solid var(--line);
  display:flex;gap:6px 14px;flex-wrap:wrap;justify-content:space-between;
}
.microbar a{text-decoration:none;color:var(--ink-soft);font-weight:bold;margin-right:10px;}
.microbar a:hover{color:var(--red);}
.microbar a[aria-current="page"]{color:var(--blue);}

/* ---------- logo ---------- */
.logo{text-align:center;padding:22px 0 10px;}
.logo .word{
  font:bold 48px/1 "Comic Sans MS","Trebuchet MS",Arial,sans-serif;letter-spacing:-1px;
  text-decoration:none;display:inline-block;
}
.logo a.word:hover span{filter:brightness(1.15);}
.logo .word span:nth-child(1){color:var(--red);}
.logo .word span:nth-child(2){color:var(--blue);}
.logo .word span:nth-child(3){color:var(--yellow);}
.logo .word span:nth-child(4){color:var(--blue);}
.logo .word span:nth-child(5){color:var(--green);}
.logo .word span:nth-child(6){color:var(--red);}
.logo .word span:nth-child(7){color:var(--purple);}
.logo .word span:nth-child(8){color:var(--orange);}
.logo .sub{font:italic 13px Georgia,"Times New Roman",serif;color:var(--ink-soft);margin-top:4px;}

/* ---------- boîte de recherche ---------- */
.searchbox{text-align:center;margin:10px 0 18px;}
.searchbox input[type=search]{
  font:13px Arial;padding:6px 8px;width:320px;max-width:70%;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
}
.searchbox button{
  font:bold 12px Arial;padding:6px 14px;background:var(--yellow);
  border:1px solid var(--yellow-edge);color:var(--yellow-ink);cursor:pointer;
}
.searchbox .hint{display:block;font-size:10px;color:var(--ink-soft);margin-top:4px;}

/* ---------- la promesse, visible dès l'ouverture ---------- */
.promesse{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:2px solid var(--yellow);background:var(--bg2);margin:6px 0 5px;
}
@media (max-width:620px){.promesse{grid-template-columns:1fr;}}
.pcell{padding:9px 13px;border-right:1px solid var(--line);min-width:0;}
.pcell:last-child{border-right:0;}
@media (max-width:620px){
  .pcell{border-right:0;border-bottom:1px solid var(--line);}
  .pcell:last-child{border-bottom:0;}
}
.pcell b{display:block;font:bold 15px Arial;letter-spacing:-.2px;}
.pcell span{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;}
.pcell.c1 b{color:var(--blue);} .pcell.c2 b{color:var(--green);} .pcell.c3 b{color:var(--red);}
.promesse-note{font-size:11px;color:var(--ink-soft);text-align:center;margin:0 0 14px;}

/* ---------- titres de section ---------- */
h2.hdr{
  font:bold 17px Arial;margin:22px 0 10px;padding-bottom:4px;
  border-bottom:3px solid var(--blue);color:var(--blue);text-wrap:balance;
}
h2.hdr .count{font:normal 11px Arial;color:var(--ink-soft);}

/* ---------- le répertoire ---------- */
.dirgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:6px;}
@media (max-width:760px){.dirgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:400px){.dirgrid{grid-template-columns:1fr;}}
.dirbox{border:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg2);min-width:0;}
.dirbox .dh{color:var(--on-band);font:bold 11px Arial;padding:6px 8px;}
.dirbox .db{padding:7px 8px;font-size:11px;flex:1;}
.dirbox .db a{display:block;margin:0;padding:6px 0;text-decoration:none;}
.dirbox .db a:hover{text-decoration:underline;}
.dc-vente .dh{background:var(--red);}  .dc-livr .dh{background:var(--blue);}
.dc-fich  .dh{background:var(--green);} .dc-com  .dh{background:var(--purple);}
.dc-serv  .dh{background:var(--orange);}
.dirbox.vide{opacity:.35;}
.noresult{font-size:12px;color:var(--ink-soft);font-style:italic;margin:8px 0 0;}

/* ---------- les deux rayons ---------- */
.rayons{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:680px){.rayons{grid-template-columns:1fr;}}
.rayon{border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-width:0;}
.rayon .rh{color:var(--on-band);font:bold 13px Arial;padding:7px 10px;}
.rayon.r-wp .rh{background:var(--blue);}
.rayon.r-srv .rh{background:var(--orange);}
.rayon .rb{padding:10px 12px;display:flex;flex-direction:column;gap:7px;flex:1;}
.rayon .big{font:bold 30px/1 Arial;color:var(--ink);font-variant-numeric:tabular-nums;}
.rayon .big small{font:normal 12px Arial;color:var(--ink-soft);display:block;margin-top:3px;}
.rayon ul{margin:0;padding-left:17px;font-size:12px;}
.rayon li{margin:4px 0;}
.rayon .go{margin-top:auto;padding-top:4px;}

/* ---------- encart mis en avant ---------- */
.featured{
  border:2px solid var(--yellow);background:var(--bg2);padding:14px 16px;
  margin:16px 0;position:relative;
}
.featured .burst{
  position:absolute;top:-14px;right:14px;background:var(--red);color:var(--on-band);font:bold 11px Arial;
  padding:6px 10px;border-radius:50%;transform:rotate(8deg);box-shadow:0 1px 3px var(--shadow);
  text-align:center;line-height:1.2;
}
.featured .burst + p{padding-right:92px;}
@media (max-width:520px){
  .featured .burst{font-size:10px;padding:5px 8px;top:-12px;right:10px;}
  .featured .burst + p{padding-right:74px;}
}
table.svc{border-collapse:collapse;width:100%;font-size:12px;margin-top:8px;}
table.svc th,table.svc td{border:1px solid var(--line);padding:5px 7px;text-align:left;vertical-align:top;}
table.svc th{background:var(--bg);font-weight:bold;}
table.svc td.price,table.svc th.price{
  text-align:right;font-weight:bold;color:var(--red);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
table.svc .det{display:block;font-size:11px;color:var(--ink-soft);font-weight:normal;}
.tscroll{overflow-x:auto;}

/* ---------- bandes de catégorie + fiches ---------- */
.catband{color:var(--on-band);font:bold 13px Arial;padding:6px 10px;margin:22px 0 10px;}
.catband .cnt{font-weight:normal;font-size:11px;opacity:.85;}
.cb-vente{background:var(--red);} .cb-livr{background:var(--blue);} .cb-fich{background:var(--green);}
.cb-com{background:var(--purple);} .cb-serv{background:var(--orange);}

.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:680px){.cardgrid{grid-template-columns:1fr;}}
.card{
  border:1px solid var(--line);background:var(--bg2);padding:10px 12px;
  display:flex;flex-direction:column;min-width:0;
}
.card h3{margin:0;font-size:13px;}
.card h3 .ver{font:normal 10px Arial;color:var(--ink-soft);}
.card .tag{font-size:12px;color:var(--ink-soft);font-style:italic;margin:3px 0 6px;}
.card ul{margin:0 0 8px;padding-left:16px;font-size:11.5px;}
.card li{margin:3px 0;}
.badge-new{background:var(--red);color:var(--on-band);font:bold 9px Arial;padding:1px 4px;vertical-align:2px;}
/* ---------- bandeau d'introduction du catalogue ---------- */
.nowrap{white-space:nowrap;}
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);background:var(--bg2);margin:0 0 12px;
}
.facts p{
  margin:0;padding:9px 12px;font-size:12px;line-height:1.45;color:var(--ink-soft);
  border-right:1px solid var(--line);
}
.facts p:last-child{border-right:0;}
.facts b{color:var(--ink);}
@media (max-width:680px){
  .facts{grid-template-columns:1fr;}
  .facts p{border-right:0;border-bottom:1px solid var(--line);}
  .facts p:last-child{border-bottom:0;}
}

/* ---------- captures : galerie par fiche et visionneuse ---------- */

/* Gabarit, tant qu'un module n'a pas sa capture. */
.shot{
  margin-top:auto;border:1px dashed var(--line);background:var(--bg);padding:12px 8px;
  text-align:center;color:var(--ink-soft);font-size:11px;
}
.shot .cam{font-size:18px;display:block;margin-bottom:3px;}

.gal{margin-top:auto;}
.galmain{
  display:block;width:100%;padding:0;border:1px solid var(--line);background:var(--bg);
  cursor:zoom-in;position:relative;line-height:0;
}
.galmain img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left;
}
.galzoom{
  position:absolute;right:6px;bottom:6px;background:var(--ink);color:var(--bg);
  font:bold 9px Arial;letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;opacity:0;
  transition:opacity .12s;line-height:1.4;
}
.galmain:hover .galzoom,.galmain:focus-visible .galzoom{opacity:.9;}
.galmain:hover,.galmain:focus-visible{border-color:var(--blue);}
.galcap{margin:5px 0 6px;font-size:11px;line-height:1.35;color:var(--ink-soft);min-height:30px;}
.galstrip{display:flex;gap:4px;flex-wrap:wrap;}
.galthumb{
  flex:0 0 auto;width:62px;padding:0;border:1px solid var(--line);background:var(--bg);
  cursor:pointer;line-height:0;
}
.galthumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left;}
.galthumb.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);}
.galthumb:hover{border-color:var(--ink-soft);}

/* Visionneuse : même fenêtre, fermeture par la croix, Échap ou le fond. */
#shotview[hidden]{display:none;}
#shotview{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);
  display:flex;flex-direction:column;padding:10px 12px 12px;
}
#shotview .svtop{
  display:flex;align-items:center;gap:10px;color:#fff;font-size:12px;flex:0 0 auto;margin-bottom:8px;
}
#shotview .svtitle{flex:1;min-width:0;line-height:1.35;}
#shotview .svcount{font:bold 11px Arial;color:#bdbdbd;white-space:nowrap;}
#shotview button{
  background:transparent;border:1px solid #777;color:#fff;font:bold 13px Arial;
  width:30px;height:28px;cursor:pointer;flex:0 0 auto;line-height:1;
}
#shotview button:hover{background:#fff;color:#000;border-color:#fff;}
#shotview .svclose{font-size:16px;}
#shotview .svbody{
  flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;
  background:#0c0c0c;padding:10px;
}
#shotview .svbody img{max-width:100%;height:auto;display:block;}
#shotview .svnav{display:flex;gap:6px;align-items:center;}
@media (max-width:680px){
  #shotview .svtop{flex-wrap:wrap;}
  #shotview .svtitle{flex:1 0 100%;order:3;}
  .galthumb{width:44px;}
}

/* ---------- listes et étapes ---------- */
.plain{font-size:12.5px;padding-left:18px;margin:0 0 9px;}
.plain li{margin:5px 0;}
.etapes{counter-reset:e;list-style:none;padding:0;margin:0;}
.etapes li{counter-increment:e;position:relative;padding-left:30px;margin:0 0 9px;font-size:12.5px;}
.etapes li::before{
  content:counter(e);position:absolute;left:0;top:1px;width:20px;height:20px;
  background:var(--blue);color:var(--on-band);font:bold 12px/20px Arial;text-align:center;border-radius:50%;
}

/* ---------- pied ---------- */
.foot{
  text-align:center;font-size:10.5px;color:var(--ink-soft);
  margin-top:30px;padding-top:12px;border-top:1px solid var(--line);
}
.foot .badges{margin-top:5px;}
.foot .badges span{display:inline-block;border:1px solid var(--line);padding:2px 6px;margin:2px;}

/* ---------- bouton de thème ---------- */
.themebtn{
  position:fixed;right:12px;bottom:12px;
  right:calc(12px + env(safe-area-inset-right,0px));
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  font:bold 10px Arial;padding:6px 10px;background:var(--bg2);
  border:1px solid var(--line);cursor:pointer;color:var(--ink);
}
.themebtn:hover{border-color:var(--blue);color:var(--blue);}

/* ---------- formulaire ---------- */
.formbox{border:1px solid var(--line);background:var(--bg2);padding:14px 16px;max-width:520px;}
.formbox .fnote{font-size:11px;color:var(--ink-soft);margin-top:0;}
.frow{margin:9px 0;display:flex;flex-direction:column;gap:3px;}
.frow label{font-size:11.5px;font-weight:bold;}
.frow input,.frow textarea{
  font:13px Arial;padding:6px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);width:100%;max-width:100%;
}
.frow input.court{width:90px;}
.hp{position:absolute;left:-9999px;top:-9999px;}
.ferr{color:var(--red);font-size:11.5px;margin:6px 0;min-height:15px;font-weight:bold;}
.fok{color:var(--green);font-size:11.5px;margin:6px 0;font-weight:bold;}
.fsend{
  font:bold 12px Arial;padding:7px 16px;background:var(--yellow);
  border:1px solid var(--yellow-edge);color:var(--yellow-ink);cursor:pointer;
}
.fout{margin-top:10px;border:1px solid var(--line);background:var(--bg);padding:10px;}
.fout textarea{
  width:100%;font:11.5px "Courier New",monospace;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);padding:6px;
}
.fbtn{
  font:bold 11px Arial;padding:5px 11px;background:var(--bg2);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block;margin:6px 6px 0 0;
}
.fbtn:hover{border-color:var(--blue);color:var(--blue);}
.mailaddr{font:bold 13px "Courier New",monospace;color:var(--ink);user-select:all;}

/* ---------- tarifs : les formules ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 6px;}
@media (max-width:860px){.plans{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.plans{grid-template-columns:1fr;}}
.plan{border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;min-width:0;}
.plan.mis{border:2px solid var(--yellow);}
.plan .ph{color:var(--on-band);font:bold 12px Arial;padding:6px 9px;background:var(--blue);}
.plan.mis .ph{background:var(--red);}
.plan .pb{padding:10px 11px;display:flex;flex-direction:column;gap:6px;flex:1;}
.plan .amount{font:bold 26px/1 Arial;color:var(--ink);font-variant-numeric:tabular-nums;}
.plan .amount small{font:normal 11px Arial;color:var(--ink-soft);display:block;margin-top:3px;}
.plan .renew{font-size:11px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:6px;}
.plan ul{margin:0;padding-left:16px;font-size:11.5px;}
.plan li{margin:3px 0;}
.plan .buy{margin-top:auto;padding-top:6px;}
.plan .buy a{
  display:block;text-align:center;font:bold 12px Arial;padding:7px 10px;
  background:var(--yellow);border:1px solid var(--yellow-edge);color:var(--yellow-ink);text-decoration:none;
}
.plan .buy a:hover{filter:brightness(.95);color:var(--yellow-ink);}

/* ---------- prix sur une fiche de module ---------- */
.card .prix{
  font:bold 13px Arial;color:var(--red);margin:0 0 6px;
  font-variant-numeric:tabular-nums;
}
.card .prix small{font:normal 10.5px Arial;color:var(--ink-soft);display:block;font-weight:normal;}
.card h3 .en{font:normal 10px Arial;color:var(--ink-soft);display:block;margin-top:2px;}

/* ---------- encart « ce qui se passe à l'échéance » ---------- */
.keepbox{border:2px solid var(--green);background:var(--bg2);padding:12px 14px;margin:14px 0;}
.keepbox b{color:var(--green);}

/* ---------- pages légales ---------- */
.legal{font-size:12.5px;}
.legal h2{font:bold 14px Arial;margin:20px 0 6px;color:var(--blue);}
.legal h3{font:bold 12.5px Arial;margin:14px 0 4px;}
.legal p,.legal li{font-size:12.5px;}
.legal ul{padding-left:18px;}
.legal li{margin:4px 0;}
.todo{
  background:var(--yellow);color:var(--yellow-ink);border:1px solid var(--yellow-edge);
  padding:0 4px;font:bold 11.5px "Courier New",monospace;white-space:nowrap;
}
:root[data-theme="dark"] .todo{color:#f6e6bd;}
.todonote{
  border:2px dashed var(--red);background:var(--bg2);padding:10px 12px;margin:0 0 16px;font-size:12px;
}
.todonote b{color:var(--red);}
.construction{
  border:1px solid var(--yellow-edge);background:var(--yellow);color:var(--yellow-ink);
  padding:10px 12px;margin:0 0 16px;font-size:12.5px;
}
:root[data-theme="dark"] .construction{color:#f6e6bd;}


/* ---------- outils maison, non vendus ---------- */
.toolrow{border:1px solid var(--line);background:var(--bg2);padding:9px 11px;margin:6px 0;font-size:12px;}
.toolrow b{font-size:12.5px;}
.toolrow span{display:block;color:var(--ink-soft);font-size:11.5px;margin-top:2px;}

/* ---------- barre de langues ---------- */
.microbar .langs a{font-weight:normal;margin-right:7px;}
.microbar .langs a:last-child{margin-right:0;}
.microbar .langs a.on{color:var(--ink);font-weight:bold;text-decoration:underline;}

/* ---------- note d'interface non traduite ---------- */
.uinote{
  margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--ink-soft);
  background:#fffbe6;border:1px solid #e8d98a;border-radius:3px;padding:4px 7px;
}
:root[data-theme="dark"] .uinote{background:#2d2a1c;border-color:#5c5330;color:#d8cfa8;}

/* ---------- barre du haut sur mobile : une seule ligne, défilable, jamais coupée en plein mot ---------- */
.microbar a{white-space:nowrap;}
@media (max-width:760px){
  .microbar{display:block;}
  .microbar > span{display:block;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px 0;}
  .microbar > span::-webkit-scrollbar{display:none;}
  .microbar > span:nth-child(2){display:none;}
}