/* EC5PE-GUIDECSS-VERSION: 11 */
/* ===== EC5PE Guides — v1 (autonome, palette du site) ===== */
:root{
  --accent:#d35400; --accent-hover:#e67e22; --accent-soft:#fff5e6;
  --primary:#2c3e50; --bg:#12151f; --surface:#1a1e2c; --surface-2:#20263a;
  --text:#e8eaf2; --text-dim:#a9b0c3; --line:rgba(255,255,255,0.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#0d1117}
body{margin:0;background:linear-gradient(180deg,#12151f 0%,#171b29 100%);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.55;font-size:16px}
a,a:visited{color:var(--accent-hover);text-decoration:none}
a:hover{text-decoration:underline}
.g-nav{position:sticky;top:0;z-index:50;background:rgba(18,21,31,0.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.g-nav-inner{max-width:1060px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.g-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;text-decoration:none}
.g-brand img{width:34px;height:34px;border-radius:8px}
.g-brand small{display:block;font-weight:500;color:var(--text-dim);font-size:0.7rem;letter-spacing:0.02em}
.g-nav-spacer{flex:1}
.g-nav a.g-link{color:var(--text-dim);font-size:0.88rem;padding:6px 10px;border-radius:8px}
.g-nav a.g-link:hover{color:var(--text);text-decoration:none;background:rgba(255,255,255,0.06)}
.g-cta{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;font-weight:600;
  padding:9px 16px;border-radius:10px;font-size:0.88rem;white-space:nowrap}
.g-cta:hover{text-decoration:none;filter:brightness(1.08)}
main{max-width:840px;margin:0 auto;padding:34px 22px 70px}
.g-breadcrumb{font-size:0.8rem;color:var(--text-dim);margin-bottom:22px}
.g-breadcrumb a{color:var(--text-dim)}
h1{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15;letter-spacing:-0.02em;margin:0 0 14px;color:#fff}
.g-lede{font-size:1.08rem;color:var(--text-dim);margin:0 0 30px}
h2{font-size:1.42rem;margin:44px 0 12px;color:#fff;letter-spacing:-0.01em}
h3{font-size:1.08rem;margin:26px 0 8px;color:#fff}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:6px}
strong{color:#fff}
code,.g-formula{font-family:'JetBrains Mono',ui-monospace,monospace}
code{background:var(--surface-2);padding:2px 6px;border-radius:6px;font-size:0.86em}
.g-formula{display:block;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 18px;margin:18px 0;font-size:0.95rem;overflow-x:auto;color:#fff}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:0.9rem}
th,td{padding:9px 12px;border:1px solid var(--line);text-align:left}
th{background:var(--surface-2);color:#fff;font-weight:600}
tr:nth-child(even) td{background:rgba(255,255,255,0.02)}
.g-table-wrap{overflow-x:auto;margin:18px 0}
.g-note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:20px 0;
  font-size:0.92rem;color:var(--text-dim)}
.g-note strong{color:var(--accent-hover)}
.g-cta-box{background:linear-gradient(135deg,rgba(211,84,0,0.14),rgba(243,156,18,0.08));
  border:1px solid rgba(230,126,34,0.35);border-radius:16px;padding:24px 26px;margin:38px 0}
.g-cta-box h3{margin-top:0;font-size:1.15rem}
.g-cta-box p{color:var(--text-dim);font-size:0.94rem}
.g-cta-box .g-cta{display:inline-block;margin-top:6px}
figure{margin:24px 0}
figure svg{width:100%;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
figcaption{font-size:0.8rem;color:var(--text-dim);text-align:center;margin-top:8px}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:10px 0}
summary{cursor:pointer;font-weight:600;color:#fff}
details p{margin:12px 0 0;font-size:0.94rem;color:var(--text-dim)}
.g-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:20px 0}
.g-footer{border-top:1px solid var(--line);margin-top:30px}
.g-footer-inner{max-width:1060px;margin:0 auto;padding:26px 22px;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;font-size:0.82rem;color:var(--text-dim)}
.g-footer a{color:var(--text-dim)}
.g-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin:30px 0}

/* ===== Cartes (hub + guides liés) — design page principale ===== */
/* v213 (constat Jerlo : « on pourrait ne pas comprendre que ce sont des boutons ») —
   AU REPOS, une carte du hub ne se distinguait pas d'un simple encadre : la seule
   affordance etait une fleche a 45 % d'opacite, et tout le reste (elevation, bordure
   orange, ombre) n'apparaissait QU'AU SURVOL — invisible au tactile, invisible pour qui
   ne promene pas sa souris. Ajoute AU REPOS, sans rien retirer du survol : le curseur
   main (`cursor:pointer` — un <a> ne l'a pas toujours si son contenu est en blocs), un
   libelle d'action « Lire le guide → » sous le texte, et une ombre douce qui decolle la
   carte du fond. */
.g-hub a,.g-related a{position:relative;display:flex;align-items:flex-start;gap:14px;
  background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:16px;
  padding:20px 44px 20px 20px;color:var(--text);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.16);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  backdrop-filter:blur(6px)}
/* le libelle d'action : c'est lui qui dit « ceci s'ouvre », meme sans souris.
   ⚠️ il se pose sur .g-card-txt, PAS sur le <a> : le lien est en `display:flex`, un
   ::after sur lui deviendrait un ITEM FLEX place A DROITE du texte, pas dessous —
   la carte se serait deformee. */
.g-hub .g-card-txt::after,.g-related .g-card-txt::after{content:"Lire le guide \2192";
  display:block;margin-top:12px;font-size:0.78rem;font-weight:700;letter-spacing:0.02em;
  color:var(--accent-hover);opacity:0.9}
.g-hub a:hover .g-card-txt::after,.g-related a:hover .g-card-txt::after,
.g-hub a:focus-visible .g-card-txt::after,.g-related a:focus-visible .g-card-txt::after{opacity:1}
/* le focus clavier doit se voir autant que le survol */
.g-hub a:focus-visible,.g-related a:focus-visible{outline:2px solid var(--accent-hover);
  outline-offset:3px;transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(211,84,0,0.22)}
.g-hub a:hover,.g-related a:hover{text-decoration:none;transform:translateY(-3px);
  border-color:var(--accent-hover);border-left-color:var(--accent-hover);
  box-shadow:0 14px 34px rgba(211,84,0,0.22)}
.g-ico-box{flex:0 0 44px;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),#f39c12);box-shadow:0 4px 12px rgba(211,84,0,0.35)}
.g-ico{width:28px;height:auto;display:block}
.g-card-txt{flex:1;min-width:0}
.g-hub h3,.g-related .g-card-txt strong{display:block;margin:0 0 6px;font-size:1.02rem;line-height:1.3;color:#fff;font-weight:700}
.g-hub p,.g-related .g-card-txt span{display:block;margin:0;font-size:0.85rem;line-height:1.5;color:var(--text-dim);font-weight:400}
.g-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(230,126,34,0.55);background:rgba(230,126,34,0.12);
  font-size:0.95rem;line-height:1;color:var(--accent-hover);
  opacity:1;transition:opacity .22s ease,transform .22s ease,background .22s ease}
.g-hub a:hover .g-arrow,.g-related a:hover .g-arrow{background:var(--accent);color:#fff}
.g-hub a:hover .g-arrow,.g-related a:hover .g-arrow{opacity:1;transform:translateY(-50%) translateX(4px)}
@media(max-width:640px){ .g-nav a.g-link-faq{display:none} .g-nav a.g-link{font-size:0.8rem;padding:6px 7px} .g-cta{padding:8px 11px;font-size:0.8rem} }
figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;display:block}

/* ===== v4 — Fond design (grille + orbes + particles, comme la home) ===== */
.g-bg{position:fixed;inset:0;z-index:0;pointer-events:none;color:rgba(230,126,34,0.55);opacity:0.10}
.g-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(90px)}
.g-orb-1{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(211,84,0,0.22),transparent 70%)}
.g-orb-2{width:460px;height:460px;bottom:-140px;left:-140px;background:radial-gradient(circle,rgba(243,156,18,0.14),transparent 70%)}
#particles-js{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.5;mix-blend-mode:screen}
#particles-js canvas{width:100%!important;height:100%!important}
.g-nav,main,.g-footer{position:relative;z-index:2}
@media(max-width:768px){ #particles-js{display:none} .g-orb{filter:blur(60px)} }

/* Polish : sélection, scrollbar, liens */
::selection{background:rgba(230,126,34,0.35);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#12151f}
::-webkit-scrollbar-thumb{background:#2c3446;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
article a:not(.g-cta){text-underline-offset:3px}
figure img{transition:transform .3s ease,box-shadow .3s ease}
figure img:hover{transform:scale(1.012);box-shadow:0 16px 44px rgba(0,0,0,0.35)}
.g-formula{box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}

/* ===== v5 — Images étroites : taille naturelle, centrées ===== */
.g-fig-narrow img{max-width:min(520px,100%);margin:0 auto;display:block}
.g-fig-narrow figcaption{max-width:520px;margin-left:auto;margin-right:auto}

/* ===== v5b — Glossaire ===== */
.g-gloss{margin:0 0 8px}
.g-gloss dt{font-weight:700;color:#fff;font-size:1.02rem;margin:22px 0 6px;padding-left:14px;border-left:3px solid var(--accent);scroll-margin-top:80px}
.g-gloss dd{margin:0 0 4px;color:var(--text-dim);font-size:0.95rem;line-height:1.65}

/* ============================================================
   v191 — L'EFFET « TEXTE QUI MONTE » SUR LES TITRES (demande Jerlo :
   « tous les gros titres blancs auront le meme effet que "Essayez EC5
   Poutre Express gratuitement" », mobile ET ordinateur).

   ⛔ PIEGE MESURE AVANT DE LIVRER : les 17 sous-pages ne chargent NI
   `styles.css` NI `site.js` — elles n'ont que cette feuille et leurs
   blocs inline. Poser la classe `reveal-cut` sur leurs titres sans
   porter ces regles ici n'aurait strictement RIEN fait. Meme famille
   que la tabbar (v181), qui est dupliquee page par page pour la meme
   raison. Les regles ci-dessous sont RECOPIEES de styles.css.
   ⚠️ Toute retouche de l'effet doit etre reportee AUX DEUX endroits.
   ============================================================ */
.reveal-cut { display: inline-block; white-space: pre-wrap; }
.reveal-cut .cut-word { display: inline-flex; white-space: pre; }
.reveal-cut .cut-char { display: inline-block; overflow: hidden; line-height: 1.1; }
.reveal-cut .cut-char > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.2, 0.85, 0.2, 1);
  transition-delay: var(--char-delay, 0s);
}
.reveal-cut.is-revealed .cut-char > span { transform: translateY(0); }
/* Filet : tant que le script n'a pas decoupe le titre, il reste LISIBLE.
   Un titre absent serait bien pire qu'un titre sans animation. */
.reveal-cut:not(.is-cut) .cut-char > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-cut .cut-char > span { transition: none; transform: none; }
}

/* v198 — liens juridiques du pied de page. `.g-footer a` (0,1,1) et `a:visited`
   (0,1,1) sont a EGALITE de specificite : c'est l'ordre qui tranche, un equilibre
   trop fragile pour des liens qu'on veut lisibles. On nomme donc `:visited`
   explicitement — regle posee en v189 : tout lien a qui j'impose une couleur
   doit declarer son etat visite, sinon le defaut ne se revele qu'apres un clic. */
.g-footer a, .g-footer a:visited { color: #c4ccd6; }
.g-footer a:hover { color: #e8934a; }