/* ============================================================================ home.css — Sagesses Modernes homepage (conversion layout) Self-contained, hp- namespaced. No dependency on / collision with styles.css. Inherits the site's Inter font from . ========================================================================== */ :root { --hp-dark: #0e0f13; --hp-panel: #14161c; --hp-panel-2: #1b1e25; --hp-line-d: #262a33; --hp-ink-d: #e7e9ea; --hp-mut-d: #99a1ad; --hp-ink: #111318; --hp-mut: #52525b; --hp-line: #e4e4e7; --hp-soft: #f6f6f7; --hp-green: #22c55e; --hp-green-deep: #15803d; --hp-red: #ef4444; /* "Enterprise Autonomy" accent — periwinkle purple → sky blue */ --hp-accent: #8f78ea; --hp-accent-2: #5896d8; --hp-grad: linear-gradient(100deg, #8f78ea 0%, #5896d8 100%); /* Palantir-style foggy translucent surfaces */ --hp-fog: rgba(17,19,26,.62); --hp-mono: "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; } .hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .hp-h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } .hp-sub { font-size: 15px; line-height: 1.6; margin: 0 auto 44px; max-width: 42em; } .hp-center { text-align: center; } /* --------------------------------------------------------------- HERO ----- */ .hp-hero { position: relative; margin-top: calc(-1 * var(--hp-navh, 96px)); /* slide photo up behind the fog header */ /* No full-frame dark filter: the photo stays clearly visible on the centre/right. Only a soft left-edge scrim keeps the white headline legible over the bright sky. */ background: linear-gradient(90deg, rgba(6,8,13,.84) 0%, rgba(6,8,13,.62) 30%, rgba(6,8,13,.24) 50%, rgba(6,8,13,0) 66%), url("assets/hero/hero.jpg") center/cover no-repeat; color: var(--hp-ink-d); padding: calc(var(--hp-navh, 96px) + 30px) 0 88px; border-bottom: 1px solid #1b1d23; } .hp-hero__h1, .hp-hero__sub, .hp-hero__micro { text-shadow: 0 2px 16px rgba(0,0,0,.5); } .hp-hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; } /* Un élément de grille vaut `min-width:auto` par défaut : il REFUSE de descendre sous la largeur min-content de son contenu. La console d'agent contient des noms monospace insécables (« Agent Réceptionniste_Vocal_247 ») qui imposaient un plancher de 393 px — la piste de grille, donc .hp-wrap, donc la page, dépassaient les 390 px du viewport : c'est l'origine réelle du défilement horizontal. min-width:0 rend la colonne compressible ; overflow-wrap casse le mot trop long au lieu de le laisser déborder. */ .hp-hero__col { min-width: 0; } .hp-hero__h1 { font-size: clamp(31px, 3.7vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 22px; } .hp-hero__sub { font-size: 16px; line-height: 1.6; color: var(--hp-mut-d); margin: 0 0 30px; max-width: 34em; } .hp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .hp-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em; padding: 14px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .2s ease, border-color .2s ease; } .hp-btn:hover { transform: translateY(-1px); } .hp-btn--primary { background: var(--hp-grad); color: #fff; box-shadow: 0 10px 26px -10px rgba(110,120,230,.55); } .hp-btn--primary:hover { filter: brightness(1.08); } .hp-btn--ghost { background: transparent; color: var(--hp-ink-d); border-color: #3a3f48; } .hp-btn--ghost:hover { border-color: #5a6472; background: rgba(255,255,255,.03); } .hp-hero__micro { font-size: 12.5px; color: #79828f; letter-spacing: .01em; } /* ----------------------------------------------------- AGENT CONSOLE ------ */ /* Frosted-glass body (Palantir-style fog over the hero photo) with a see-through terminal middle so the animated copy reads over the image. */ .hp-console { background: rgba(20,23,31,.46); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05) inset; min-width: 0; max-width: 100%; } .hp-console__tabs { display: flex; gap: 6px; margin-bottom: 14px; } .hp-tab { flex: 1; min-width: 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 9px 4px; border-radius: 8px; color: rgba(231,233,234,.72); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: color .3s, background .3s, border-color .3s; overflow: hidden; text-overflow: ellipsis; } .hp-tab.is-active { color: #fff; background: var(--hp-grad); border-color: transparent; } .hp-term { background: rgba(6,8,13,.40); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 16px 16px 18px; min-height: 236px; min-width: 0; } /* Les noms d'agents (« Orchestrateur_de_Projets ») sont insécables : sans ceci ils débordent du terminal au lieu de passer à la ligne. */ .hp-term__body, .hp-term__init, .hp-term__step, .hp-term__out { overflow-wrap: anywhere; } .hp-term__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .hp-term__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; } .hp-term__bar i:nth-child(1){ background:#ef4444; } .hp-term__bar i:nth-child(2){ background:#f4be4f; } .hp-term__bar i:nth-child(3){ background:var(--hp-accent-2); } .hp-term__bar span { margin-left: auto; font-family: var(--hp-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6a7382; } .hp-term__body { font-family: var(--hp-mono); font-size: 12.4px; line-height: 1.7; } .hp-term__init { color: #bcc6f6; min-height: 1.7em; } .hp-term__init .cur { color: #bcc6f6; margin-left: 1px; animation: hp-blink 1s steps(1) infinite; } @keyframes hp-blink { 50% { opacity: 0; } } .hp-term__steps { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; } .hp-term__step { color: #d6dae2; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; } .hp-term__step.show { opacity: 1; transform: none; } .hp-term__step b { color: #a9b6f5; font-weight: 700; margin-right: 6px; } .hp-term__out { margin-top: 14px; padding: 11px 13px; border: 1px solid rgba(137,150,236,.45); background: rgba(120,138,236,.13); border-radius: 8px; color: #cfd7fa; font-family: var(--hp-mono); font-size: 11.5px; font-weight: 700; opacity: 0; transition: opacity .5s ease; } .hp-term__out.show { opacity: 1; } .hp-console__cap { text-align: center; font-style: italic; font-size: 11px; color: #9aa2b4; margin: 12px 4px 2px; line-height: 1.5; } /* ----------------------------------------------------------- LOGO WALL ---- */ .hp-logos { background: #fff; padding: 46px 0 48px; border-bottom: 1px solid var(--hp-line); overflow: hidden; } .hp-logos__label { text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #70767E; margin-bottom: 26px; font-weight: 700; } .hp-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .hp-marquee + .hp-marquee { margin-top: 14px; } /* Vitesse ~1,8× (46s → 26s, 52s → 30s) : le mur de logos paraissait figé. */ .hp-marquee__track { display: flex; gap: 14px; padding-right: 14px; flex: none; animation: hp-mq-l 26s linear infinite; will-change: transform; } .hp-marquee--rev .hp-marquee__track { animation-name: hp-mq-r; animation-duration: 30s; } .hp-marquee:hover .hp-marquee__track { animation-play-state: paused; } @keyframes hp-mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes hp-mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } } .hp-chip { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border: 1px solid var(--hp-line); border-radius: 11px; background: #fff; white-space: nowrap; box-shadow: 0 1px 2px rgba(30,30,60,.04); } .hp-chip__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0,0,0,.03); } .hp-chip__name { font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; } /* real brand-logo chips: logo on a white rounded square + small dark name caption below */ .hp-chip--img { flex-direction: column; gap: 7px; padding: 0; width: 64px; background: transparent; border: 0; box-shadow: none; align-items: center; } .hp-chip__sq { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--hp-line); border-radius: 15px; box-shadow: 0 2px 6px rgba(30,30,60,.06); } .hp-chip--img img { width: 32px; height: 32px; object-fit: contain; display: block; } .hp-chip__cap { max-width: 64px; font-size: 9.5px; font-weight: 700; line-height: 1.15; color: #4b4b52; text-align: center; letter-spacing: -0.01em; overflow-wrap: break-word; word-break: break-word; } /* ----------------------------------------------------------- ROI GRID ----- */ .hp-roi { background: #E9EAEE; padding: 74px 0; } .hp-roi .hp-h2, .hp-roi .hp-sub { color: var(--hp-ink); } .hp-roi .hp-sub { color: var(--hp-mut); } .hp-roi__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .hp-roi__card { background: #fff; border: 0; border-radius: 0; padding: 15px 14px; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(30,30,60,.05); transition: transform .2s ease, box-shadow .2s ease; } .hp-roi__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(30,30,60,.18); } .hp-roi__ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--hp-soft); border: 1px solid var(--hp-line); color: var(--hp-ink); margin-bottom: 14px; } .hp-roi__ico svg { width: 23px; height: 23px; } .hp-roi__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--hp-ink); } .hp-roi__block { margin-bottom: 12px; } .hp-roi__k { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hp-green-deep); margin-bottom: 4px; } .hp-roi__v { font-size: 12.5px; line-height: 1.55; color: var(--hp-mut); } .hp-roi__roi { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hp-line); } .hp-roi__roi span { display: inline-block; font-size: 14px; font-weight: 800; color: var(--hp-green-deep); line-height: 1.35; } /* ------------------------------------------ SERVICE / METHOD (3-col) ------ */ .hp-svc { background: #fff; padding: 76px 0 82px; border-top: 1px solid var(--hp-line); } .hp-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; } .hp-svc__card { display: flex; flex-direction: column; background: var(--hp-soft); border: 0; border-radius: 0; padding: 26px 24px; box-shadow: 0 1px 3px rgba(30,30,60,.04); transition: border-color .2s ease; } .hp-svc__card:hover { border-color: #d2d4db; } .hp-svc__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--hp-soft); border: 1px solid var(--hp-line); color: var(--hp-ink); margin-bottom: 20px; } .hp-svc__ico svg { width: 23px; height: 23px; } .hp-svc__tag { font-family: var(--hp-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6C707D; margin-bottom: 11px; } .hp-svc__title { font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.28; color: var(--hp-ink); margin: 0 0 12px; } .hp-svc__obj { font-size: 14px; font-weight: 600; line-height: 1.5; color: #33343b; margin: 0 0 12px; } .hp-svc__desc { font-size: 13.5px; line-height: 1.62; color: var(--hp-mut); margin: 0 0 20px; } .hp-svc__list { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--hp-line); display: flex; flex-direction: column; gap: 12px; } .hp-svc__list li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--hp-mut); } .hp-svc__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--hp-accent); } .hp-svc__list strong { color: var(--hp-ink); font-weight: 700; } @media (max-width: 900px) { .hp-svc__grid { grid-template-columns: 1fr; } .hp-svc { padding: 58px 0 64px; } } /* ------------------------------------------------ VISUAL PROOF SECTION ---- */ .hp-proof { background: #0d0f14; color: var(--hp-ink-d); padding: 74px 0 78px; border-top: 1px solid #1b1d23; border-bottom: 1px solid #1b1d23; } .hp-proof .hp-h2 { color: #fff; } .hp-proof .hp-sub { color: var(--hp-mut-d); } .hp-proof__frame { margin: 6px 0 0; padding: 0; } /* Cadre STATIQUE (2026-07-20) : plus de bouton, plus de loupe, plus de lightbox. La capture n8n n'est qu'en 1685 × 934 px — l'agrandir donnait un texte illisible et abîmait la crédibilité recherchée. Le cadre garde son allure (bordure, rayon, ombre) mais ne se présente plus comme cliquable. Le CSS de la lightbox (.hp-lightbox*) a été retiré avec buildProof(). */ .hp-proof__still { display: block; width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: #10131a; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); } .hp-proof__img { display: block; width: 100%; height: auto; } /* --------------------------------------------------------------- TRUST ---- */ .hp-trust { background: var(--hp-dark); color: var(--hp-ink-d); padding: 74px 0; } .hp-trust .hp-h2 { color: #fff; text-align: center; } .hp-trust .hp-sub { color: var(--hp-mut-d); } .hp-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .hp-trust__card { background: var(--hp-panel); border: 1px solid var(--hp-line-d); border-radius: 14px; padding: 28px 24px; } .hp-trust__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: var(--hp-green); margin-bottom: 18px; } .hp-trust__ico svg { width: 24px; height: 24px; } .hp-trust__t { font-size: 17px; font-weight: 800; margin-bottom: 11px; color: #fff; } .hp-trust__p { font-size: 13.5px; line-height: 1.65; color: var(--hp-mut-d); } /* ----------------------------------------------------------------- FAQ ---- */ .hp-faq { background: #fff; padding: 74px 0; } .hp-faq .hp-h2 { color: var(--hp-ink); text-align: center; } .hp-faq__list { max-width: 840px; margin: 8px auto 0; } .hp-faq__item { border-bottom: 1px solid var(--hp-line); } .hp-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 4px; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--hp-ink); } .hp-faq__q .ic { flex: none; width: 22px; height: 22px; position: relative; transition: transform .3s ease; } .hp-faq__q .ic::before, .hp-faq__q .ic::after { content: ""; position: absolute; background: var(--hp-green-deep); border-radius: 2px; } .hp-faq__q .ic::before { top: 10px; left: 3px; right: 3px; height: 2px; } .hp-faq__q .ic::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: opacity .3s ease; } .hp-faq__item.is-open .hp-faq__q .ic::after { opacity: 0; } .hp-faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; } .hp-faq__a p { margin: 0; padding: 0 40px 24px 4px; font-size: 14.5px; line-height: 1.65; color: var(--hp-mut); } /* ----------------------------------------------------------------- CTA ---- */ .hp-cta { background: radial-gradient(120% 140% at 50% 0%, #16181f 0%, var(--hp-dark) 60%); color: #fff; padding: 84px 0; text-align: center; } .hp-cta__h3 { font-size: clamp(24px, 3vw, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; margin: 0 auto 16px; max-width: 20em; } .hp-cta__sub { font-size: 16px; line-height: 1.6; color: var(--hp-mut-d); margin: 0 auto 30px; max-width: 40em; } /* The sticky header is now standardised site-wide in styles.css (foggy dark, light links, gradient CTA, white logo). The homepage only adds the hero-slides-under-nav offset (see .hp-hero margin-top above). */ /* -------------------------------------------------------- RESPONSIVE ------ */ @media (max-width: 980px) { .hp-hero__grid { grid-template-columns: 1fr; gap: 40px; } /* stacked hero: full-width copy needs a top-down scrim instead of the left one */ .hp-hero { background: linear-gradient(180deg, rgba(6,8,13,.8) 0%, rgba(6,8,13,.6) 42%, rgba(6,8,13,.42) 100%), url("assets/hero/hero.jpg") center/cover no-repeat; } .hp-roi__grid { grid-template-columns: repeat(3, 1fr); } .hp-trust__grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .hp-hero { padding: calc(var(--hp-navh, 77px) + 22px) 0 60px; } /* 004 — 3 colonnes donnaient des cartes de 125–133 px : illisible au pouce. 2 colonnes. */ .hp-roi__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hp-roi__card { --notch: 24px; } .hp-tab { font-size: 9px; letter-spacing: .02em; padding: 8px 2px; } .hp-hero__cta { flex-direction: column; align-items: stretch; } .hp-btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hp-marquee__track { animation: none; } .hp-btn:hover, .hp-roi__card:hover { transform: none; } } /* department card bullets — name + 3-4 outcomes (YC: one idea per line) */ .hp-roi__pts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .hp-roi__pts li { position: relative; padding-left: 13px; font-size: 12.5px; line-height: 1.5; color: var(--hp-mut); } .hp-roi__pts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--hp-green-deep); } .hp-svc__cta { margin-top: 18px; align-self: flex-start; } @media (max-width: 620px) { .hp-roi__card { padding: 14px 11px; } .hp-roi__title { font-size: 13px; } .hp-roi__pts li { font-size: 11px; padding-left: 11px; } .hp-roi__ico { width: 32px; height: 32px; margin-bottom: 10px; } } /* ═══ green check marks on department bullets ═══ */ .hp-roi__pts li { padding-left: 17px; } .hp-roi__pts li::before { content: "\2713"; width: auto; height: auto; background: none; border-radius: 0; top: 0; left: 0; color: var(--hp-green); font-weight: 800; font-size: 11.5px; line-height: 1.55; } /* ═══ gradient secondary CTA — gradient text + gradient line, transparent inside ═══ */ .hp-btn--expert { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; border: 1px solid; border-image: var(--hp-grad) 1; border-radius: 0; box-shadow: none; } .hp-btn--expert:hover { filter: brightness(1.12); } .hp-svc__cta { margin-top: auto; align-self: flex-start; } /* ═══ gradient keyword emphasis (Palantir-style) ═══ */ .grad { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ═══ services eyebrow ═══ */ .hp-svc__eyebrow { display: block; text-align: center; font-family: var(--hp-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6C707D; margin-bottom: 10px; } /* ═══ tighter cards — less dead space ═══ */ .hp-roi__ico { width: 34px; height: 34px; margin-bottom: 9px; border-radius: 8px; } .hp-roi__ico svg { width: 19px; height: 19px; } .hp-roi__title { font-size: 15px; margin-bottom: 9px; } .hp-roi__pts { gap: 6px; } .hp-roi__pts li { font-size: 12px; line-height: 1.45; } .hp-roi__grid { gap: 12px; align-items: stretch; } /* ═══ PALANTIR CARD SHAPE v3 — ::before border-triangle (popUp animates clip-path, so we must NOT use it) ═══ */ .hp-roi__card, .hp-svc__card { position: relative; border: 0; border-radius: 0; box-shadow: none; clip-path: none; } .hp-roi__card:hover, .hp-svc__card:hover { transform: none; box-shadow: none; } /* department: white card cut against the darker section */ .hp-roi__card { background: #fff; } .hp-roi__card::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; z-index: 2; border-top: 30px solid #E9EAEE; border-left: 30px solid #fff; } /* services: grey card cut against the white section (Palantir's exact setup) */ .hp-svc__card { background: var(--hp-soft); } .hp-svc__card::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; z-index: 2; border-top: 52px solid #fff; border-left: 52px solid var(--hp-soft); } /* ============================================================ CALIBRAGE MOBILE — ACCUEIL (≤ 860 px) ------------------------------------------------------------ L'accueil ne charge pas styles-solutions.css : ses correctifs mobiles doivent vivre ici, sinon ils ne s'appliquent jamais. Mesures à 390 px : libellés à 9 px, onglets hauts de 29 px. ============================================================ */ @media (max-width:860px){ .hp-chip__cap{ font-size:11px } .hp-term__bar span{ font-size:11px } /* « agent · live » : 9,5 px d'origine */ .hp-console__cap, .hp-logos__label, .hp-svc__eyebrow, .hp-svc__tag{ font-size:12px } .hp-tab{ font-size:11px; letter-spacing:.03em; min-height:44px; padding:8px 4px; display:flex; align-items:center; justify-content:center; } } /* Doit passer APRÈS le bloc 620 px qui redescend .hp-tab à 9 px. */ @media (max-width:620px){ .hp-tab{ font-size:11px; letter-spacing:.02em; padding:8px 3px; min-height:44px } } /* ============================================================ ONGLETS DE LA CONSOLE — LISIBLES EN ENTIER (≤ 720 px) ------------------------------------------------------------ `flex:1` sur 5 onglets donnait ~65 px chacun : « OPÉRATIONS » et « LOGISTIQUE » étaient tronqués par text-overflow:ellipsis. On passe sur DEUX RANGS plutôt qu'un défilement horizontal : les onglets défilent tout seuls (cycle de 4 s) — un onglet hors écran s'activerait sans être vu. Sur deux rangs, les cinq libellés restent visibles et entiers, sans débordement de page. ============================================================ */ @media (max-width:720px){ .hp-console__tabs{ flex-wrap:wrap; justify-content:center; gap:6px; max-width:100%; } .hp-tab{ flex:0 1 auto; /* ne plus écraser : la largeur suit le libellé */ width:auto; white-space:nowrap; overflow:visible; /* annule le text-overflow:ellipsis qui coupait */ text-overflow:clip; padding:8px 11px; font-size:11px; letter-spacing:.02em; min-height:44px; } }