/* ============================================================
   HUB « Aide & conseils » — feuille scopee .am-hub (zero fuite Divi)
   Gabarit am-refonte : hero am-hero2 (var --am-hero-img) + recherche unifiee
   + filtres + tuiles outils + resultats TYPES + FAQ placeholder + CTA.
   Conteneur 1320 · Inter · anthracite #1a1a1a monochrome · hairline #ececec · radius 14.
   Accent porteur de sens UNIQUEMENT sur les cartes resultat (type de contenu).
   ============================================================ */
.am-hub{
  --wide-max:1320px;
  --ink:#0e0f11; --ink-2:#1a1a1a; --text:#16181c;
  --muted:#5f646b; --faint:#8a9099;
  --line:#ececec; --surface-alt:#f6f6f7;
  --radius:14px; --radius-lg:18px;
  --green:#2f855a; --green-bg:#e9f5ee; --green-line:#bfe3ce;
  --amber:#b7791f; --amber-bg:#fbf3e2; --amber-line:#f0dcae;
  --blue:#2b6cb0;  --blue-bg:#e9f1fa;  --blue-line:#cfe0f4;
  --ink-bg:#eceef0; --ink-line:#d9dde1;
  --dur:.30s; --ease:cubic-bezier(.22,.61,.36,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text); background:#fff; line-height:1.5; font-size:16.5px;
}
.am-hub *{box-sizing:border-box}
/* l'attribut [hidden] doit primer sur le section{display:block} du theme (author > UA)
   -> garantit que le bloc Resultats est VRAIMENT masque en etat « parcourir ». */
.am-hub [hidden]{display:none !important}
.am-hub .wrap{max-width:var(--wide-max);margin:0 auto;padding:0 30px}
.am-hub img{max-width:100%;display:block}
.am-hub svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* le template fournit son propre footer (footer du site) : rien a masquer */

/* ============================ HERO ============================ */
.am-hub .am-hub-hero{position:relative;background:var(--ink-2);color:#fff;overflow:hidden;isolation:isolate}
.am-hub .hh-img{position:absolute;inset:0;background-image:var(--am-hero-img);background-size:cover;background-position:center;opacity:.78}
.am-hub .hh-halftone{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:9px 9px;opacity:.4}
/* scrim RENFORCE : voile anthracite dense cote texte (gauche) + assombrissement bas
   -> le H1 blanc ressort franchement quelle que soit la zone de la photo (WCAG AA). */
.am-hub .hh-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,11,13,.97) 0%,rgba(10,11,13,.90) 42%,rgba(10,11,13,.66) 72%,rgba(10,11,13,.50) 100%),
  linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,0) 30%,rgba(10,11,13,.28) 100%)}
.am-hub .hh-vignette{position:absolute;inset:0;box-shadow:inset 0 0 240px 50px rgba(0,0,0,.6)}
.am-hub .am-hub-hero .wrap{position:relative;z-index:2;padding:72px 30px 52px}
.am-hub .eyebrow{display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:12.5px;letter-spacing:2.6px;text-transform:uppercase;color:#d3d6da;margin:0 0 22px}
.am-hub .eyebrow::before{content:"";width:34px;height:1px;background:#8a8e95}
/* H1 : couleur FORCEE en blanc (sinon la 1re ligne nue herite du h1 sombre de Divi).
   L'effet « split » vient du POIDS (800 vs 300), pas d'une teinte sombre. */
.am-hub .am-hub-hero h1{margin:0;font-weight:800;font-size:50px;line-height:1.06;letter-spacing:-1.1px;max-width:20ch;color:#fff !important}
.am-hub .am-hub-hero h1 .thin{font-weight:300;color:#eef0f2 !important}
.am-hub .am-hub-hero .sub{margin:18px 0 0;font-weight:400;font-size:17.5px;color:#dfe2e6;max-width:60ch;line-height:1.6}

/* ---------- barre de recherche (heroine) ---------- */
.am-hub .search{margin:34px 0 0;max-width:820px}
.am-hub .search-box{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:8px 8px 8px 22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55);margin:0}
.am-hub .search-box>svg{width:22px;height:22px;color:#6a6e75;flex:0 0 auto}
.am-hub .search-box input{flex:1;border:0;outline:0;font:500 17px/1.4 'Inter',sans-serif;color:var(--text);background:transparent;padding:14px 0;min-width:0;-webkit-appearance:none}
.am-hub .search-box input::placeholder{color:#9aa0a8;font-weight:400}
.am-hub .search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
.am-hub .search-go{display:inline-flex;align-items:center;gap:9px;background:var(--ink-2);color:#fff;border:0;cursor:pointer;font:600 15px 'Inter',sans-serif;padding:14px 24px;border-radius:11px;white-space:nowrap;transition:background var(--dur),transform var(--dur)}
.am-hub .search-go:hover{background:#000;transform:translateY(-1px)}
.am-hub .search-go svg{width:17px;height:17px;stroke-width:2}

/* ============================ FILTRES ============================ */
.am-hub .filters{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:3}
.am-hub .filters .wrap{padding-top:26px;padding-bottom:24px}
.am-hub .frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.am-hub .flab{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);font-weight:700;flex:0 0 116px}

/* ---------- Appareil : tuiles anthracite en carrousel (miroir /codes-pannes/) ---------- */
.am-hub .fcats{margin-bottom:22px}
.am-hub .fcats .flab{display:block;flex:none;margin:0 0 13px}
.am-hub .acar-track{position:relative;overflow:hidden}
.am-hub .acar-scroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:3px 52px 8px 0;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
.am-hub .acar-scroll::-webkit-scrollbar{display:none}
.am-hub .acar-track.at-start .acar-scroll{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
.am-hub .acar-track.at-end .acar-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%);mask-image:linear-gradient(90deg,transparent 0,#000 8%)}
.am-hub .acar-track.at-start.at-end .acar-scroll{-webkit-mask-image:none;mask-image:none}
.am-hub .acat{flex:0 0 auto;width:152px;min-height:134px;background:#0c0c0c;border:1px solid #1c1c1c;border-radius:18px;padding:18px;display:flex;flex-direction:column;cursor:pointer;text-align:left;font-family:inherit;-webkit-appearance:none;appearance:none;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.am-hub .acat:hover{background:#161616;transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.am-hub .acat.on{background:#1a1a1a;border-color:#fff;box-shadow:0 0 0 1px #fff,0 10px 26px -14px rgba(0,0,0,.5)}
.am-hub .acat-ic{flex:1;display:flex;align-items:center;justify-content:center}
.am-hub .acat-ic svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.6}
.am-hub .acat-n{font-size:14.5px;font-weight:700;color:#fff;line-height:1.2}
.am-hub .acat-c{font-size:12px;color:#9a9a9a;margin-top:3px}
.am-hub .acar-arr{position:absolute;right:0;top:calc(50% - 4px);transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;border:1px solid #1c1c1c;background:#0c0c0c;box-shadow:0 4px 14px rgba(0,0,0,.22);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .15s}
.am-hub .acar-arr:hover{background:#161616}
.am-hub .acar-arr svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2}
.am-hub .acar-arr-prev{right:auto;left:0}
.am-hub .acar-track.at-start .acar-arr-prev{opacity:0;pointer-events:none}
.am-hub .acar-track.at-end .acar-arr-next{opacity:0;pointer-events:none}

/* ---------- Theme : chips fines secondaires ---------- */
.am-hub .frow--theme{gap:8px}
.am-hub .chip{display:inline-flex;align-items:center;gap:8px;font:500 14px 'Inter',sans-serif;color:#2a2d31;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;transition:border-color var(--dur),background var(--dur),color var(--dur)}
.am-hub .chip svg{width:16px;height:16px;color:var(--muted)}
.am-hub .chip:hover{border-color:#c9ccd1}
.am-hub .chip.on{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.am-hub .chip.on svg{color:#fff}
.am-hub .chip--sm{font-size:13px;padding:7px 14px}

/* ============================ SECTIONS ============================ */
.am-hub section{padding:64px 0}
.am-hub .sec--alt{background:var(--surface-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.am-hub .sec-eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.am-hub .sec-eyebrow::before{content:"";width:30px;height:1px;background:#c9ccd1}
.am-hub h2{margin:0;font-weight:800;font-size:31px;line-height:1.14;letter-spacing:-.6px;color:var(--text)}
.am-hub h2 .thin{font-weight:300;color:#4a4e54}
.am-hub .lead{margin:16px 0 0;font-size:17px;color:#3a3d42;line-height:1.62;max-width:66ch}

/* ---------- tuiles OUTILS ---------- */
.am-hub .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.am-hub .tool{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;background:#fff;transition:box-shadow var(--dur),transform var(--dur),border-color var(--dur)}
.am-hub .tool:not(.tool--soon):hover{box-shadow:0 14px 40px -22px rgba(0,0,0,.25);transform:translateY(-3px);border-color:#dfe2e6}
.am-hub .tool--soon{opacity:.72;cursor:default}
.am-hub .tool .tic{width:50px;height:50px;border-radius:13px;background:var(--ink-2);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.am-hub .tool .tic svg{width:25px;height:25px;stroke:#fff}
.am-hub .tool h3{margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.2px;color:var(--text)}
.am-hub .tool p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.58;flex:1}
.am-hub .tool .more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.am-hub .tool .more svg{width:16px;height:16px;stroke-width:2;transition:transform var(--dur)}
.am-hub .tool:not(.tool--soon):hover .more svg{transform:translateX(4px)}
.am-hub .tool .more--soon{color:var(--faint)}
.am-hub .tool .live{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--green);background:var(--green-bg);border:1px solid var(--green-line);border-radius:999px;padding:3px 9px;align-self:flex-start;margin-bottom:14px}
.am-hub .tool .live.soon{color:var(--muted);background:var(--surface-alt);border-color:var(--line)}

/* ---------- RESULTATS unifies types ---------- */
.am-hub .results-sec{padding-top:52px;padding-bottom:60px}
.am-hub .res-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.am-hub .res-head h2{font-size:26px}
.am-hub .res-head .q{font-size:15px;color:var(--muted)}
.am-hub .res-head .q b{color:var(--text);font-weight:700}
.am-hub .res-head .count{font-size:13.5px;color:var(--faint);margin-left:auto}
.am-hub .results{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.am-hub .rcard{display:flex;gap:16px;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#fff;transition:box-shadow var(--dur),transform var(--dur),border-color var(--dur)}
.am-hub .rcard:hover{box-shadow:0 12px 34px -22px rgba(0,0,0,.22);transform:translateY(-2px);border-color:#dfe2e6}
.am-hub .rcard .rti{flex:0 0 42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;border:1px solid}
.am-hub .rcard .rti svg{width:21px;height:21px}
.am-hub .rti.t-conseil{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.am-hub .rti.t-code{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.am-hub .rti.t-faq{background:var(--blue-bg);border-color:var(--blue-line);color:var(--blue)}
.am-hub .rti.t-outil{background:var(--ink-bg);border-color:var(--ink-line);color:var(--ink)}
.am-hub .rcard .rbody{min-width:0}
.am-hub .rtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-bottom:9px}
.am-hub .rtag.t-conseil{color:var(--green);background:var(--green-bg)}
.am-hub .rtag.t-code{color:var(--amber);background:var(--amber-bg)}
.am-hub .rtag.t-faq{color:var(--blue);background:var(--blue-bg)}
.am-hub .rtag.t-outil{color:var(--ink);background:var(--ink-bg)}
.am-hub .rcard h4{margin:0 0 5px;font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.3;color:var(--text)}
.am-hub .rcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.am-hub .rcard .rmeta{margin-top:9px;font-size:12px;color:var(--faint)}
.am-hub .results-empty{margin-top:20px;padding:26px 24px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface-alt);color:var(--muted);font-size:15px;line-height:1.6}
.am-hub .results-empty b{color:var(--text)}
.am-hub .results-empty a{color:var(--ink-2);font-weight:600;text-decoration:underline}

/* ---------- FAQ placeholder (P1 : inactif) ---------- */
.am-hub .faq-soon{margin-top:30px;display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:24px 26px}
.am-hub .faq-soon-badge{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);background:var(--surface-alt);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-top:2px}
.am-hub .faq-soon p{margin:0;color:var(--muted);font-size:15px;line-height:1.62;max-width:78ch}
.am-hub .faq-soon a{color:var(--ink-2);font-weight:600;text-decoration:underline}

/* ---------- CTA anthracite ---------- */
.am-hub .cta{background:var(--ink-2);color:#fff;border-radius:var(--radius);padding:52px 56px;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.am-hub .cta h2{color:#fff}
.am-hub .cta p{margin:12px 0 0;color:#c4c7cc;font-size:16.5px;line-height:1.6;max-width:56ch}
.am-hub .cta-btns{display:flex;flex-direction:column;gap:10px;min-width:250px}
.am-hub .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;transition:transform var(--dur),background var(--dur),border-color var(--dur);white-space:nowrap;margin:0}
.am-hub .btn svg{width:16px;height:16px;stroke-width:2;transition:transform var(--dur)}
.am-hub .btn:hover svg{transform:translateX(4px)}
.am-hub .btn-primary{background:#fff;color:var(--ink-2)}
.am-hub .btn-primary:hover{transform:translateY(-1px)}
.am-hub .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.am-hub .btn-secondary:hover{border-color:#fff}

/* ============================ RESPONSIVE ============================ */
@media(max-width:980px){
  .am-hub .am-hub-hero h1{font-size:38px}
  .am-hub .tools{grid-template-columns:1fr 1fr}
  .am-hub .results{grid-template-columns:1fr}
}
@media(max-width:720px){
  .am-hub .wrap{padding:0 20px}
  .am-hub .am-hub-hero .wrap{padding:52px 20px 44px}
  .am-hub .am-hub-hero h1{font-size:30px}
  .am-hub section{padding:52px 0}
  .am-hub .search-box{flex-wrap:wrap;padding:14px}
  .am-hub .search-box input{width:100%;padding:6px 0}
  .am-hub .search-go{width:100%;justify-content:center}
  .am-hub .tools{grid-template-columns:1fr}
  .am-hub .flab{flex:0 0 100%;margin-bottom:2px}
  .am-hub .acat{width:132px;min-height:118px;padding:15px;border-radius:16px}
  .am-hub .acat-ic svg{width:28px;height:28px}
  .am-hub .acar-scroll{padding-right:20px;-webkit-mask-image:none;mask-image:none}
  .am-hub .acar-arr{display:none}
  .am-hub .cta{grid-template-columns:1fr;padding:36px 26px}
  .am-hub .cta-btns{min-width:0}
  .am-hub .btn{width:100%}
  .am-hub h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .am-hub *{transition:none!important}
}