/*
Theme Name: nuub-vitrine
Theme URI: https://www.nuub.be/
Author: CorrectoNET
Description: Thème de nuub.be — page d'attente « console », trilingue FR/NL/EN, gabarits de pages légales. Aucune dépendance à un plugin payant : rien d'Advanced Custom Fields, tout passe par l'écran « Options du site ». Compatible Polylang lorsqu'il est installé.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nuub-vitrine
Tags: one-column, custom-colors, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════════════
   Repris tel quel de la maquette validée le 11/09/2026.
   Les polices sont chargées par functions.php, pas par un @import : un @import
   dans une feuille bloque le rendu jusqu'à ce qu'il soit résolu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   Page d'attente « console », trilingue FR / NL / EN.
   Le journal existe en trois exemplaires complets dans le HTML —
   une console qu'on traduit chaîne par chaîne finit désalignée.
   Le reste du texte porte ses trois versions sur l'élément.
   Sans JavaScript, la page reste lisible en français.
   ============================================================ */
:root{
 --ground:#F1F4F2;--surface:#FFFFFF;
 --line:#D6DFDB;--line-soft:#E7EDEA;
 --ink:#0C1513;--ink-2:#47554F;--ink-3:#78877F;
 --accent:#0E6B5E;--ochre:#A8672A;
 --night:#071411;--night-2:#0E2320;--on-night:#E9F2EF;--on-night-2:#9FB5AE;
 --glow:#55C9B4;
 --term:#03100C;--term-tete:#0A1D19;--term-txt:#BFD8D1;--term-dim:#7E958E;
 --ok:#6FE0BF;--wait:#E9B36A;--rouge:#FF6B5E;
 --r:4px;
 --disp:"Rubik","Trebuchet MS",system-ui,sans-serif;
 --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  --ground:#071411;--surface:#0F1F1C;
  --line:#223833;--line-soft:#1A2C29;
  --ink:#E9F2EF;--ink-2:#A6BAB4;--ink-3:#7B8F89;
  --accent:#55C9B4;--ochre:#D79B5E;
 }
}
:root[data-theme="dark"]{
  --ground:#071411;--surface:#0F1F1C;
  --line:#223833;--line-soft:#1A2C29;
  --ink:#E9F2EF;--ink-2:#A6BAB4;--ink-3:#7B8F89;
  --accent:#55C9B4;--ochre:#D79B5E;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
 font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2{margin:0;font-family:var(--disp);font-weight:600;text-wrap:balance;letter-spacing:-.022em}
a{color:var(--accent)}
img{max-width:100%}
:where(a,button):focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.wrap{max-width:1000px;margin:0 auto;padding-inline:20px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-3);margin:0}

/* ---------- barre ---------- */
.bar{background:var(--night);color:var(--on-night);border-bottom:1px solid rgba(255,255,255,.08)}
.bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:10px;
 font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--on-night-2)}
.bar .baseline{text-transform:none;letter-spacing:.02em;font-size:12px;font-style:italic;
 color:var(--on-night);opacity:.9}
.bar .sp{flex:1 1 auto}
.bar a{color:var(--glow);text-decoration:none}
.bar a:hover{text-decoration:underline}

/* le sélecteur de langue : trois boutons, pas un menu déroulant —
   à trois entrées, un menu cache l'information qu'il devrait montrer */
.langues{display:flex;gap:1px;background:rgba(233,242,239,.18);border:1px solid rgba(233,242,239,.18);
 border-radius:var(--r);overflow:hidden;flex:none}
.langues button{font:inherit;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
 text-transform:uppercase;border:0;cursor:pointer;padding:5px 10px;
 background:var(--night-2);color:var(--on-night-2)}
.langues button:hover{color:var(--on-night)}
.langues button[aria-current="true"]{background:var(--glow);color:#04100D;font-weight:600}

/* ---------- la scène ---------- */
.scene{background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.scene::before{content:"";position:absolute;inset:-35% -15% auto 25%;height:130%;
 background:radial-gradient(closest-side,rgba(85,201,180,.14),transparent 70%);pointer-events:none}
.scene .wrap{position:relative;padding-block:44px 56px}
.logo-nuub{width:min(220px,52vw);height:auto;display:block;margin:0 auto 30px}

/* ---------- la console ---------- */
.term{background:var(--term);border:1px solid rgba(233,242,239,.18);border-radius:7px;
 overflow:hidden;box-shadow:0 30px 80px -34px rgba(0,0,0,.95)}
.term .tete{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--term-tete);
 border-bottom:1px solid rgba(233,242,239,.12);font-family:var(--mono);font-size:11.5px;
 color:var(--term-dim)}
.term .pts{display:flex;gap:5px;flex:none}
.term .pts i{width:9px;height:9px;border-radius:50%;display:block;background:rgba(233,242,239,.2)}
.term .titre{flex:1;text-align:center;letter-spacing:.02em;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.term .horloge{flex:none;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.term pre{margin:0;padding:20px 18px 18px;font-family:var(--mono);font-size:13px;line-height:1.85;
 color:var(--term-txt);white-space:pre-wrap;overflow-wrap:anywhere;
 font-variant-numeric:tabular-nums;-webkit-font-smoothing:auto}
.term pre[hidden]{display:none}
.term .p{color:var(--glow)}
.term .c{color:#EAF6F2;font-weight:500}
.term .ok{color:var(--ok)}
.term .wt{color:var(--wait)}
.term .dim{color:var(--term-dim)}
.term .fort{color:var(--rouge);font-weight:600}
.cur{display:inline-block;width:8px;height:1.05em;vertical-align:-.18em;background:var(--glow);
 animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* jauge indéterminée : un pourcentage inventé serait une promesse
   qu'on ne tient pas */
.jauge{display:block;height:9px;margin:6px 0 2px;border:1px solid rgba(233,242,239,.22);
 border-radius:2px;overflow:hidden;background:rgba(233,242,239,.05);max-width:340px}
.jauge i{display:block;height:100%;width:38%;background:var(--glow);opacity:.85;
 animation:balaye 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes balaye{0%{transform:translateX(-105%)}100%{transform:translateX(275%)}}

.term .pied{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;background:rgba(255,255,255,.03);
 border-top:1px solid rgba(233,242,239,.1);font-family:var(--mono);font-size:11px;
 letter-spacing:.05em;color:var(--term-dim)}
.term .pied .sp{flex:1 1 auto}

@media (prefers-reduced-motion:reduce){
 .cur{animation:none}
 .jauge i{animation:none;width:100%;opacity:.5}
}

/* ---------- message et actions ---------- */
.dessous{margin-top:38px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
.dessous h1{font-size:clamp(27px,4vw,40px);line-height:1.06;max-width:16ch;font-weight:700}
.dessous h1 em{font-style:italic;color:var(--glow)}
.dessous .lead{margin-top:16px;color:var(--on-night-2);font-size:16px;max-width:48ch;line-height:1.65}
.dessous .eyebrow{color:var(--on-night-2)}
.acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.cta{background:var(--glow);color:#04100D;text-decoration:none;padding:11px 19px;
 border-radius:var(--r);font-size:15px;font-weight:600;white-space:nowrap}
.cta:hover{background:#79DBC9}
.ghost{border:1px solid rgba(233,242,239,.3);color:var(--on-night);text-decoration:none;
 padding:11px 18px;border-radius:var(--r);font-size:15px;white-space:nowrap;
 font-variant-numeric:tabular-nums}
.ghost:hover{border-color:var(--glow);color:var(--glow)}

.coord{display:flex;flex-direction:column;gap:1px;background:rgba(233,242,239,.14);
 border:1px solid rgba(233,242,239,.14);border-radius:6px;overflow:hidden}
.coord div{background:var(--night-2);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.coord .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--glow)}
.coord .v{font-size:15px}
.coord .v a{color:var(--on-night);text-decoration:none}
.coord .v a:hover{color:var(--glow)}
.coord .d{font-size:12.5px;color:var(--on-night-2)}

/* ---------- agréments ---------- */
.agrements{background:var(--surface);border-block:1px solid var(--line)}
.agrements .wrap{padding-block:34px 38px}
.groupe + .groupe{margin-top:30px;padding-top:28px;border-top:1px solid var(--line-soft)}
.groupe > .titre{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.groupe > .sous{font-size:14px;color:var(--ink-2);max-width:60ch;margin-bottom:18px}
.agr{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* fond blanc sous chaque marque quel que soit le thème : ces logos sont
   dessinés pour du papier et se perdraient sur le fond sombre */
.a{background:#FFFFFF;min-height:104px;display:flex;align-items:center;justify-content:center;
 padding:18px 20px}
.a img{max-height:56px;max-width:150px;width:auto;height:auto;display:block}

footer{border-top:1px solid var(--line);padding-block:24px 38px;font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
footer .sp{flex:1 1 auto}
footer a{text-decoration:none}

@media (max-width:760px){
 .dessous{grid-template-columns:1fr;gap:28px}
 .term pre{font-size:11.5px;padding:15px 13px}
 .term .titre{display:none}
 .a{border-right:0;border-bottom:1px solid var(--line-soft)}
 .a:last-child{border-bottom:0}
}
@media (max-width:400px){
 .term pre{font-size:10.5px;line-height:1.8}
 .bar .wrap{font-size:10px;gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ajouts propres au thème : ce que la maquette n'avait pas à porter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le lien d'évitement : invisible jusqu'à ce qu'on tabule dessus. Sans lui,
   qui navigue au clavier retraverse la barre à chaque page. */
.saut{position:absolute;left:-9999px;top:0;z-index:99;background:var(--glow);color:#04100D;
 padding:10px 16px;border-radius:0 0 var(--r) 0;font-weight:600;text-decoration:none}
.saut:focus{left:0}

/* Le sélecteur de langue sous Polylang : des liens, pas des boutons. */
.langues a{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
 padding:5px 10px;background:var(--night-2);color:var(--on-night-2);text-decoration:none}
.langues a:hover{color:var(--on-night)}
.langues a[aria-current="page"]{background:var(--glow);color:#04100D;font-weight:600}

.bar .client{white-space:nowrap}

/* Le pied de la fenêtre de console porte sa propre classe : `.pied` sert
   maintenant au pied de page du site, et deux règles homonymes finissent
   toujours par se marcher dessus. */
.term .pied-term{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;
 background:rgba(255,255,255,.03);border-top:1px solid rgba(233,242,239,.1);
 font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--term-dim)}
.term .pied-term .sp{flex:1 1 auto}

/* ---------- le pied de page du site ---------- */
.pied{border-top:1px solid var(--line);padding-block:24px 38px;font-size:13px;color:var(--ink-3)}
.pied .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.pied .sp{flex:1 1 auto}
.pied a{text-decoration:none;color:var(--ink-3)}
.pied a:hover{color:var(--accent)}

/* ---------- les pages simples : CGV, RGPD, 404 ---------- */
.page-simple{padding-block:56px 64px}
.page-simple .wrap{max-width:760px}
.tete-page{margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.tete-page h1{font-size:clamp(28px,4.2vw,40px);line-height:1.1;font-weight:700}
.tete-page .eyebrow{margin-bottom:8px}
.tete-page .maj{margin-top:10px;font-family:var(--mono);font-size:11.5px;
 letter-spacing:.06em;color:var(--ink-3)}

/* La colonne de lecture est bornée à ~68 caractères : au-delà, l'œil perd la
   ligne suivante en revenant à la marge. */
.prose{font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:68ch}
.prose > * + *{margin-top:16px}
.prose h2{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink);
 margin-top:38px;letter-spacing:-.018em}
.prose h3{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--ink);margin-top:28px}
.prose a{color:var(--accent);text-underline-offset:2px}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:7px}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--accent);
 color:var(--ink);font-style:italic}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-2,rgba(0,0,0,.05));
 padding:2px 5px;border-radius:3px}
.prose img{height:auto;border-radius:6px}
/* Un tableau plus large que l'écran défile dans son propre cadre, jamais en
   poussant la page entière de côté. */
.prose figure.wp-block-table,.prose .table-wrap{overflow-x:auto}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.prose th{background:var(--surface);font-weight:600;color:var(--ink)}

.acts-clair .ghost{border-color:var(--line);color:var(--ink-2)}
.acts-clair .ghost:hover{border-color:var(--accent);color:var(--accent)}
.retour{margin-top:38px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:14px}
.retour a{color:var(--accent);text-decoration:none}
.retour a:hover{text-decoration:underline}

/* ---------- l'éditeur de WordPress ---------- */
.alignleft{float:left;margin:6px 22px 14px 0}
.alignright{float:right;margin:6px 0 14px 22px}
.aligncenter{display:block;margin-inline:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 clip-path:inset(50%);white-space:nowrap}

/* ---------- la barre d'administration ---------- */
.admin-bar .bar{top:32px}
@media screen and (max-width:782px){.admin-bar .bar{top:46px}}

@media print{
 .bar,.langues,.saut,.term,.acts{display:none}
 body{background:#fff;color:#000}
}


/* ═══════════════════════════════════════════════════════════════════════════
   La page support & téléchargements
   ═══════════════════════════════════════════════════════════════════════════ */

.support-tete{background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.support-tete::before{content:"";position:absolute;inset:-40% -20% auto 35%;height:140%;
 background:radial-gradient(closest-side,rgba(85,201,180,.14),transparent 70%);pointer-events:none}
.support-tete .wrap{position:relative;padding-block:52px 48px}
.support-tete .eyebrow{color:var(--on-night-2)}
.support-tete h1{font-size:clamp(30px,4.6vw,44px);line-height:1.06;margin-top:10px;
 max-width:15ch;font-weight:700}
.support-tete .lead{margin-top:16px;color:var(--on-night-2);font-size:16.5px;max-width:58ch;
 line-height:1.65}

/* Les deux portes. Le téléphone d'abord : quelqu'un qui arrive ici a une panne,
   et la panne se raconte plus vite qu'elle ne s'écrit. */
.support-portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
 margin-top:32px}
.support-portes .porte{background:var(--night-2);border:1px solid rgba(233,242,239,.16);
 border-radius:6px;padding:18px 20px 20px;text-decoration:none;color:inherit;
 display:flex;flex-direction:column;gap:4px}
.support-portes .porte:hover{border-color:var(--glow);background:#123029}
.support-portes .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--glow)}
.support-portes .v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;
 color:var(--on-night)}
.support-portes .d{font-size:13px;color:var(--on-night-2)}
.support-portes .porte-tel .v{font-family:var(--mono);letter-spacing:-.01em}

.support-mot{background:var(--surface);border-bottom:1px solid var(--line)}
.support-mot .wrap{padding-block:30px}

.telechargements{padding-block:52px 64px}
.telechargements h2{font-size:clamp(23px,3vw,30px);font-weight:600}
.telechargements .sous{margin-top:9px;color:var(--ink-2);max-width:62ch}
.telechargements .vide{margin-top:22px;color:var(--ink-3);font-style:italic}

.dl-groupe{margin-top:34px}
.dl-titre{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink-3);margin-bottom:12px}
.dl-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px}

/* Une tuile de téléchargement, pas une ligne de liste : la cible est large,
   ce qui compte quand on guide quelqu'un au téléphone. */
/* Les titres s'alignent en haut : centrés, une tuile à description courte
   faisait flotter son titre plus bas que ses voisines. La flèche, elle, reste
   au milieu de la hauteur de la tuile. */
.dl{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:14px;row-gap:3px;
 background:var(--surface);border:1px solid var(--line);border-radius:6px;
 padding:15px 17px;text-decoration:none;color:var(--ink)}
.dl:hover{border-color:var(--accent);background:var(--accent-soft)}
.dl-nom{font-weight:600;font-size:15.5px}
.dl-desc{grid-column:1;font-size:13px;color:var(--ink-2)}
.dl-fleche{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--mono);font-size:19px;
 color:var(--ink-3);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;
 display:flex;align-items:center;justify-content:center;flex:none}
.dl:hover .dl-fleche{color:var(--accent);border-color:var(--accent)}

/* L'avertissement. Encadré, parce que c'est la phrase qui protège le client
   d'un faux support qui l'appellerait pour lui faire lancer RustDesk. */
.avert{margin-top:40px;padding:15px 18px;border:1px solid var(--ochre);border-radius:6px;
 background:color-mix(in srgb, var(--ochre) 8%, transparent);
 color:var(--ink);font-size:14.5px;max-width:76ch;line-height:1.6}

@media (max-width:640px){
 .support-tete .wrap{padding-block:40px 38px}
 .telechargements{padding-block:40px 52px}
 .dl-liste{grid-template-columns:1fr}
}