/* ========================================================================== Artaun Hosting — feuille de style Mode clair par défaut. Mode sombre via [data-theme="dark"]. Principe : un dégradé mesh violet occupe le fond de TOUTE la page, en position fixe. Les sections sont translucides et le laissent transparaître. Il n'y a donc jamais de rupture entre le hero et la suite. ========================================================================== */ /* --------------------------------------------------------------- Tokens */ :root { color-scheme: light; --paper: #ffffff; --paper-2: #f7f4ff; --paper-3: #ede7ff; --ink: #16132e; --ink-soft: #34305a; --muted: #625e83; --line: rgba(22, 19, 46, .11); --line-soft: rgba(22, 19, 46, .06); --brand: #6d28d9; --brand-hi: #9333ea; --brand-2: #4338ca; --aqua: #0891b2; --pink: #db2777; --gold: #d97706; --brand-ink: #ffffff; --brand-wash: rgba(109, 40, 217, .08); --surface: #ffffff; --surface-2: #faf8ff; --ok: #15803d; --warn: #b45309; --bad: #be123c; --shadow-sm: 0 1px 2px rgba(22, 19, 46, .07); --shadow: 0 14px 38px -16px rgba(55, 20, 130, .32); --shadow-lg: 0 38px 80px -32px rgba(55, 20, 130, .48); --r-sm: 13px; --r: 20px; --r-lg: 28px; --r-pill: 999px; --f-display: "Space Grotesk", system-ui, sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --wrap: 1180px; --wrap-hdr: 1480px; --gut: 24px; --hdr-h: 74px; --mesh-opacity: 1; } [data-theme="dark"] { color-scheme: dark; /* Gris neutre (pas de teinte violette dans les fonds) */ --paper: #18191c; --paper-2: #1e1f23; --paper-3: #27282d; --ink: #f2f2f3; --ink-soft: #d4d4d8; --muted: #9a9aa2; --line: rgba(255, 255, 255, .10); --line-soft: rgba(255, 255, 255, .06); --brand: #8b7ae0; --brand-hi: #a695ea; --brand-2: #6d78d1; --aqua: #22d3ee; --pink: #d68fe0; --brand-ink: #12091f; --brand-wash: rgba(139, 122, 224, .10); --surface: #1e1f23; --surface-2: #27282d; --ok: #4ade80; --warn: #fbbf24; --bad: #fb7185; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 12px 34px -14px rgba(0, 0, 0, .8); --shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, .95); /* Le gris reste réservé à la barre du haut (--paper, via le header) : le fond de page, lui, garde le dégradé mesh (juste retimbré en sombre), volontairement moins saturé qu'en clair pour ne pas noyer l'interface de violet, sans retomber dans l'effet "tout gris / morgue". */ --mesh-opacity: .32; } /* ----------------------------------------------------------------- Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); background: var(--paper); } body { margin: 0; min-height: 100dvh; position: relative; color: var(--ink); font: 400 16px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Pas de fond ici : il masquerait la couche .ambient (z-index: -1). Le fond de page est porté par . */ background: transparent; } /* --- Le fond irisé, commun à toute la page ------------------------------ */ /* Peint en radial-gradient : le navigateur le rasterise une fois et n'y revient jamais. La dérive est portée par une seule couche composée (transform pur, aucun filtre), donc elle tourne sur le GPU. */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--mesh-opacity); overflow: hidden; contain: strict; } .ambient::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58vmax 58vmax at 2% -14%, color-mix(in srgb, var(--brand) 72%, transparent) 0%, color-mix(in srgb, var(--brand) 48%, transparent) 40%, transparent 72%), radial-gradient(50vmax 50vmax at 98% -10%, color-mix(in srgb, var(--pink) 62%, transparent) 0%, color-mix(in srgb, var(--pink) 38%, transparent) 42%, transparent 74%), radial-gradient(46vmax 46vmax at 46% 4%, color-mix(in srgb, var(--brand-2) 52%, transparent) 0%, color-mix(in srgb, var(--brand-2) 30%, transparent) 44%, transparent 76%), radial-gradient(38vmax 38vmax at 92% 40%, color-mix(in srgb, var(--aqua) 26%, transparent) 0%, transparent 70%); /* La dérive reste sous l'échelle de départ : aucun bord ne peut entrer dans le cadre. */ animation: drift 48s ease-in-out infinite alternate; will-change: transform; } @keyframes drift { from { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.2) translate3d( 1.5%, 2%, 0); } } /* Voile qui fond la couleur dans la page sans jamais l'éteindre d'un coup */ .ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 0%, transparent 38%, color-mix(in srgb, var(--paper) 62%, transparent) 72%, var(--surface) 100% ); } /* Au-delà du premier écran, .ambient (fixed) ne suit plus le contenu : sans rien d'autre, tout redevient un aplat plat et la page paraît coupée nette d'une section à l'autre. Ce second calque, lui, défile AVEC le document (pas fixed) et répète un motif doux de très grande taille : la couleur continue de vivre, discrètement, jusqu'en bas de la page. */ .ambient-trail { position: absolute; inset: 0; top: 100vh; bottom: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: calc(var(--mesh-opacity) * .6); } .ambient-trail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2600px; background: radial-gradient(46vmax 40vmax at 6% 12%, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 68%), radial-gradient(40vmax 36vmax at 96% 46%, color-mix(in srgb, var(--pink) 42%, transparent) 0%, transparent 70%), radial-gradient(44vmax 38vmax at 14% 82%, color-mix(in srgb, var(--brand-2) 45%, transparent) 0%, transparent 70%); background-repeat: repeat-y; background-size: 100% 2600px; } img, svg, canvas { max-width: 100%; } svg { display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--brand); } h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin: 0; } h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.2rem); letter-spacing: -.04em; } h2 { font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem); } h3 { font-size: 1.08rem; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { left: 12px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap-narrow { max-width: 840px; } .center { text-align: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------- Micro-éléments */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aqua) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 500 .8rem/1 var(--f-body); color: var(--ink-soft); box-shadow: var(--shadow-sm); } .pill svg { width: 15px; height: 15px; color: var(--brand); } .badge { display: inline-block; font: 500 .6rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-style: normal; margin-left: 8px; vertical-align: middle; } .badge-brand { background: var(--brand); color: #fff; border-color: transparent; } /* -------------------------------------------------------------- Boutons */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 .93rem/1 var(--f-body); padding: 12px 20px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease; overflow: hidden; } .btn svg { width: 16px; height: 16px; } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } } .btn:active { transform: scale(.96); transition-duration: .06s; } /* Onde au clic : un dégradé radial qu'on fait grandir. Aucun JS, aucun élément ajouté au DOM. */ .btn::after, .tabs button::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, currentColor 12%, transparent 12.5%) center / 14000% no-repeat; opacity: 0; transition: background-size .55s ease-out, opacity .7s ease-out; } .btn:active::after, .tabs button:active::after { background-size: 0%; opacity: .28; transition: none; } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand) 70%, transparent); } .btn-primary:hover { box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--brand) 75%, transparent); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-dark { background: var(--ink); color: var(--paper); } .btn-dark:hover { background: var(--ink-soft); } .btn-sm { padding: 9px 15px; font-size: .85rem; } .btn-lg { padding: 15px 26px; font-size: 1rem; } .btn-block { display: flex; width: 100%; } .link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: 500 .85rem/1.4 var(--f-body); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { opacity: .78; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .18s ease, color .18s ease; } .icon-btn:hover { border-color: var(--brand); color: var(--brand); } .icon-btn svg { width: 17px; height: 17px; } .ext { width: 13px !important; height: 13px !important; display: inline-block; margin-left: 5px; opacity: .5; vertical-align: -1px; } .tick { width: 15px; height: 15px; color: var(--brand); flex: none; margin-top: 4px; } .chev { width: 15px; height: 15px; transition: transform .2s ease; opacity: .6; } /* --------------------------------------------------------------- Header */ .hdr { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } @supports (backdrop-filter: blur(1px)) { .hdr { backdrop-filter: blur(14px) saturate(1.4); } } /* Décollé du haut : le bandeau se détache. Piloté par un IntersectionObserver, jamais par un écouteur de scroll. */ .hdr.is-stuck { background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom-color: var(--line-soft); box-shadow: 0 8px 24px -18px rgba(22, 19, 46, .6); } /* Repère de 1px posé en haut du document : quand il sort du champ, on sait que la page a défilé. */ .scroll-top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; } .hdr-inner { max-width: var(--wrap-hdr); margin-inline: auto; padding: 0 var(--gut); height: var(--hdr-h); display: flex; align-items: center; gap: 22px; } .brand { display: inline-flex; align-items: center; gap: 12px; flex: none; } .brand:hover { color: inherit; } .brand-mark { width: 44px; height: 44px; border-radius: 12px; display: block; object-fit: cover; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font: 700 1.34rem/1 var(--f-display); letter-spacing: -.02em; } .brand-sub { font: 500 .68rem/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .nav { flex: 1; min-width: 0; } .nav-list { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: nowrap; } .nav-trigger, .nav-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; font: 500 .94rem/1 var(--f-body); color: var(--ink-soft); padding: 10px 16px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; transition: color .16s ease, background .16s ease; } .nav-trigger:hover, .nav-link:hover, .nav-link.is-current, .nav-item.is-open .nav-trigger { color: var(--brand); background: var(--brand-wash); } .nav-item.is-open .chev { transform: rotate(180deg); } /* Mega-menu */ .mega { position: absolute; left: 0; right: 0; top: calc(var(--hdr-h) - 1px); padding: 0 var(--gut) 22px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: megaIn .18s ease-out; } @keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } } .mega[hidden] { display: none; } .mega-inner { max-width: var(--wrap); margin-inline: auto; padding-top: 24px; display: grid; grid-template-columns: 260px 1fr; gap: 30px; } .mega-side { border-right: 1px solid var(--line-soft); padding-right: 26px; } .mega-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 12px; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); margin-bottom: 12px; } .mega-icon svg { width: 19px; height: 19px; } .mega-side h2 { font-size: 1.02rem; margin-bottom: 8px; } .mega-side p { font-size: .85rem; color: var(--muted); margin-bottom: 14px; } .mega-all { display: inline-flex; align-items: center; gap: 6px; font: 500 .84rem/1 var(--f-body); color: var(--brand); } .mega-all svg { width: 15px; height: 15px; transition: transform .16s ease; } .mega-all:hover svg { transform: translateX(3px); } .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .mega-grid a { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: var(--r-sm); transition: background .16s ease; } .mega-grid a:hover { background: var(--brand-wash); color: inherit; } .mega-ic { display: inline-flex; width: 34px; height: 34px; flex: none; border-radius: 10px; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); color: var(--brand); border: 1px solid var(--line-soft); } /* Logos de marque (brand-*) : couleurs propres, on ne les tache pas de violet au survol comme les icônes-trait maison. */ .mega-grid a:hover .mega-ic { background: var(--brand); color: #fff; border-color: transparent; } .mega-ic svg { width: 19px; height: 19px; border-radius: 6px; } .mega-txt { min-width: 0; } .mega-name { display: block; font-weight: 500; font-size: .89rem; } .mega-desc { display: block; font-size: .75rem; color: var(--muted); line-height: 1.4; margin-top: 2px; } .mega-from { margin-left: auto; font: 500 .73rem/1 var(--f-mono); color: var(--muted); padding-top: 8px; white-space: nowrap; } .mega-grid a.is-soon { opacity: .75; } /* Mega-menu "Jeux" catégorisé : un groupe replié par thème, avec compteur. Réutilise .mega-ic/.mega-txt/.mega-name/.mega-desc/.mega-from pour les jeux à l'intérieur (mêmes styles que la grille plate des autres menus). */ .mega-cats, .drawer-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mega-cat details, .drawer-cats details { border-radius: var(--r-sm); } .mega-cat summary, .drawer-cats summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; list-style: none; user-select: none; transition: background .16s ease; } .mega-cat summary::-webkit-details-marker, .drawer-cats summary::-webkit-details-marker { display: none; } .mega-cat summary:hover, .drawer-cats summary:hover { background: var(--brand-wash); } .mega-cat-ic { display: inline-flex; width: 30px; height: 30px; flex: none; border-radius: 9px; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); } .mega-cat-ic svg { width: 17px; height: 17px; } .mega-cat-name { flex: 1; font-weight: 600; font-size: .91rem; } .mega-cat-count { font: 700 .72rem/1 var(--f-mono); color: var(--brand); background: var(--brand-wash); padding: 4px 9px; border-radius: var(--r-pill); flex: none; } .mega-cat summary .chev, .drawer-cats summary .chev { width: 15px; height: 15px; flex: none; transition: transform .16s ease; color: var(--muted); } .mega-cat details[open] summary .chev, .drawer-cats details[open] summary .chev { transform: rotate(180deg); } .mega-cats .mega-cat ul, .drawer-cats .mega-cat ul { list-style: none; margin: 0; padding: 4px 4px 10px 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } .drawer-cats .mega-cat ul { grid-template-columns: 1fr; padding-left: 30px; } .mega-cats .mega-cat a, .drawer-cats .mega-cat a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: inherit; transition: background .16s ease; } .mega-cats .mega-cat a:hover, .drawer-cats .mega-cat a:hover { background: var(--brand-wash); } /* Logos réels (PNG déposés par l'utilisateur) : mêmes gabarits que les icônes SVG qu'ils remplacent, jamais déformés. */ .mega-ic img, .mega-cat-ic img, .tile-ic img { width: 19px; height: 19px; object-fit: contain; border-radius: 6px; } .card-ic img { width: 20px; height: 20px; object-fit: contain; border-radius: 6px; } .page-hero-logo { display: inline-flex; margin-bottom: 14px; } .page-hero-logo-img, .page-hero-logo svg { width: 56px; height: 56px; padding: 11px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-soft); object-fit: contain; } .hdr-actions { display: flex; align-items: center; gap: 10px; flex: none; } .picker { position: relative; } .picker-btn { font: 500 .76rem/1 var(--f-mono); } .flag { width: 17px; height: 12px; border-radius: 2px; flex: none; } .picker-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 172px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); } .picker-menu[hidden] { display: none; } .picker-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); font-size: .87rem; } .picker-menu a:hover { background: var(--brand-wash); color: inherit; } .picker-menu a[aria-current] { color: var(--brand); font-weight: 500; } [data-theme-toggle] .theme-moon { display: none; } [data-theme="dark"] [data-theme-toggle] .theme-sun { display: none; } [data-theme="dark"] [data-theme-toggle] .theme-moon { display: block; } .burger { display: none; } /* --------------------------------------------------------- Tiroir mobile */ .drawer { position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(400px, 90vw); height: 100dvh; background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s cubic-bezier(.3,.8,.3,1); overflow-y: auto; overscroll-behavior: contain; } .drawer[hidden] { display: none; } .drawer.is-open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: inherit; z-index: 2; } .drawer-nav { padding: 12px 14px; flex: 1; } .drawer-group summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 10px; border-radius: var(--r-sm); font-weight: 500; cursor: pointer; list-style: none; } .drawer-group summary::-webkit-details-marker { display: none; } .drawer-group summary span { display: inline-flex; align-items: center; gap: 10px; } .drawer-group summary svg { width: 17px; height: 17px; color: var(--brand); } .drawer-group[open] summary { color: var(--brand); } .drawer-group[open] .chev { transform: rotate(180deg); } .drawer-group ul { padding: 2px 0 10px 40px; } .drawer-group li a { display: block; padding: 10px 0; font-size: .9rem; color: var(--ink-soft); } .drawer-all { color: var(--brand) !important; font-weight: 500; } .drawer-link { display: flex; align-items: center; gap: 10px; padding: 14px 10px; border-top: 1px solid var(--line-soft); font-weight: 500; color: var(--ink); } .drawer-link svg { width: 17px; height: 17px; color: var(--brand); flex: none; } .drawer-link .ext { width: 13px; height: 13px; margin-left: auto; color: var(--muted); } .drawer-group li a { color: var(--ink-soft); } .drawer-foot { padding: 16px 20px 32px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; } .drawer-langs { display: flex; gap: 6px; margin-top: 6px; } .drawer-langs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font: 500 .74rem/1 var(--f-mono); } .drawer-langs a.is-current { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); } .drawer-veil { position: fixed; inset: 0; z-index: 110; background: rgba(10, 8, 24, .5); opacity: 0; transition: opacity .3s ease; } .drawer-veil[hidden] { display: none; } .drawer-veil.is-open { opacity: 1; } /* ----------------------------------------------------------------- Hero */ .hero { position: relative; padding: clamp(52px, 9vw, 108px) 0 clamp(40px, 6vw, 76px); text-align: center; } .hero-inner { display: flex; flex-direction: column; align-items: center; } .hero h1 { max-width: 16ch; margin: 22px 0 0; } /* Mot qui change toutes les deux secondes */ .rotator { position: relative; display: inline-grid; vertical-align: bottom; } .rotator-sizer { visibility: hidden; grid-area: 1 / 1; white-space: nowrap; } .rotator-word { grid-area: 1 / 1; white-space: nowrap; display: inline-flex; color: var(--brand); pointer-events: none; } .rotator-word i { display: inline-block; font-style: normal; white-space: pre; opacity: 0; transform: translateY(.8em) rotate(7deg); transition: opacity .3s ease, transform .5s cubic-bezier(.22, .9, .28, 1); } .rotator-word.is-active i { opacity: 1; transform: none; } .rotator-word.is-out i { opacity: 0; transform: translateY(-.8em) rotate(-7deg); } .hero h1 .rotator { display: grid; justify-items: center; } .hero-lead { max-width: 56ch; margin: 22px auto 0; font-size: clamp(1rem, .95rem + .4vw, 1.15rem); color: var(--ink-soft); } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .hero-micro { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px; } .hero-micro li { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--ink-soft); } .hero-micro svg { width: 17px; height: 17px; color: var(--brand); } /* ---------------------------------------------------------- Bande techno */ .trust { padding: 26px 0 10px; } .trust-label { text-align: center; margin-bottom: 18px; } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; } .trust-row li { padding: 9px 16px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 500 .82rem/1 var(--f-mono); color: var(--ink-soft); letter-spacing: -.01em; } /* -------------------------------------------------------------- Sections */ .sec { padding: clamp(48px, 7vw, 88px) 0; position: relative; } .sec-head { max-width: 58ch; margin-bottom: 36px; } .sec-head.is-center { margin-inline: auto; text-align: center; } .sec-head h2 { margin-bottom: 12px; } .sec-lead { color: var(--muted); margin: 0; } /* Panneau de verre : remplace les anciens fonds pleins, laisse voir le mesh */ .panel { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px); } /* --------------------------------------------------- Explorateur à onglets */ .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 28px; } .tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 500 .88rem/1 var(--f-body); color: var(--ink-soft); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .tabs button svg { width: 16px; height: 16px; } @media (hover: hover) { .tabs button:hover { transform: translateY(-1px); color: var(--brand); } } .tabs button:active { transform: scale(.96); transition-duration: .06s; } .tabs button.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent); } .tab-panel[hidden] { display: none; } .tab-panel { animation: fadeUp .35s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } } /* auto-fit : la grille trouve elle-même son nombre de colonnes, aucun point de rupture à maintenir pour les tailles intermédiaires. */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; } .tile { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s ease, box-shadow .22s ease; } .tile:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand) 34%, transparent), var(--shadow); color: inherit; } .tile-ic { display: inline-flex; width: 40px; height: 40px; flex: none; border-radius: 12px; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--brand-wash), transparent); border: 1px solid var(--line-soft); color: var(--brand); } .tile-ic svg { width: 19px; height: 19px; } .tile-txt { min-width: 0; flex: 1; } .tile-txt strong { display: block; font: 600 .98rem/1.3 var(--f-display); } .tile-txt span { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; line-height: 1.45; } .tile-price { font: 500 .78rem/1 var(--f-mono); color: var(--brand); white-space: nowrap; padding-top: 11px; } .tile.is-soon { opacity: .72; } .tile.is-soon .tile-ic { color: var(--muted); } /* ------------------------------------------------------------- Offres */ .billing { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .billing-note { font: 400 .77rem/1.4 var(--f-mono); color: var(--muted); } .toggle { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);} .toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); cursor: pointer; font: 500 .85rem/1 var(--f-body); transition: background .2s ease, color .2s ease; } .toggle button.is-active { background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; box-shadow: var(--shadow-sm); } .toggle em { font: 500 .66rem/1 var(--f-mono); font-style: normal; } .toggle button.is-active em { color: #fff; } .toggle button:not(.is-active) em { color: var(--brand); } .toggle-4 { flex-wrap: wrap; justify-content: center; } .toggle-4 button { padding: 9px 14px; } /* Bascule de prix : léger effet de "pop" au changement de période, pour que le nouveau montant ne remplace pas l'ancien à la façon d'un simple changement de texte. */ .amount { display: inline-block; transition: opacity .16s ease, transform .16s ease; } .amount.is-swapping { opacity: 0; transform: translateY(3px) scale(.97); } /* Carrousel d'offres : au-delà de 4 paliers, plutôt que de tasser les cartes, on glisse horizontalement avec deux flèches. */ .plans-carousel { position: relative; } .plans-carousel.has-nav .plans { display: flex; flex-wrap: nowrap; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; padding: 22px 6px 16px; gap: 18px; } .plans-carousel.has-nav .plans::-webkit-scrollbar { display: none; } .plans-carousel.has-nav .plan { flex: 0 0 250px; scroll-snap-align: start; } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--brand); cursor: pointer; transition: background .18s ease, transform .18s ease, color .18s ease; } .carousel-nav:hover { background: var(--brand); color: #fff; transform: translateY(-50%) scale(1.07); } .carousel-nav svg { width: 18px; height: 18px; } .carousel-prev { left: -4px; } .carousel-next { right: -4px; } .carousel-prev .rot { transform: rotate(180deg); } @media (max-width: 700px) { .carousel-nav { display: none; } } .plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); align-items: start; } .plans-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); } .plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s ease, box-shadow .22s ease; } .plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--brand) 38%, transparent), var(--shadow); border-color: var(--brand); } .plan.is-popular { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: var(--shadow); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); } .plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; font: 500 .63rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); white-space: nowrap; animation: tagGlow 2.8s ease-in-out infinite; } @keyframes tagGlow { 0%, 100% { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); } 50% { box-shadow: 0 6px 22px -4px color-mix(in srgb, var(--brand) 95%, transparent); } } .plan-tag-trial { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 65%, var(--brand)), var(--aqua)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ok) 55%, transparent); } .plan-tag-trial svg { width: 11px; height: 11px; } .plan-cat { font: 500 .65rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .plan-name { font-size: 1.18rem; margin-bottom: 14px; } .plan-price { margin-bottom: 20px; } .plan-price .amount, .row-price .amount { font: 600 2rem/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(120deg, var(--brand), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-price .per, .row-price .per { display: block; font: 400 .72rem/1 var(--f-mono); color: var(--muted); margin-top: 6px; } .plan-specs { display: grid; gap: 10px; margin-bottom: 24px; flex: 1; } .plan-specs li { display: flex; gap: 9px; font-size: .87rem; color: var(--ink-soft); line-height: 1.45; } .plan-specs li span { min-width: 0; overflow-wrap: break-word; word-break: break-word; } /* ------------------------------------------------------------ Bento atouts */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .bento article { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .22s ease, border-color .22s ease; } .bento article:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--brand) 30%, transparent); } .bento .wide { grid-column: span 2; } .bento h3 { margin-bottom: 8px; font-size: 1.05rem; } .bento p { margin: 0; font-size: .89rem; color: var(--muted); } .bento .card-ic { margin-bottom: 16px; } .bento .big { grid-column: span 2; grid-row: span 2; justify-content: flex-end; position: relative; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%), var(--surface); } .bento .big h3 { font-size: 1.5rem; font-family: var(--f-display); } .bento .big p { font-size: .95rem; color: var(--ink-soft); } .bento .big .card-ic { width: 52px; height: 52px; } .bento .big .card-ic svg { width: 25px; height: 25px; } .card-ic { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent); border: 1px solid var(--line-soft); color: var(--brand); } .card-ic svg { width: 20px; height: 20px; } /* Cartes génériques (pages catégories, produits, contact) */ .cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: 16px; } .card { display: flex; flex-direction: column; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } a.card:hover, .card-lift:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--brand) 32%, transparent), var(--shadow); color: inherit; } .card h2, .card h3 { font-size: 1.05rem; margin-bottom: 8px; } .card p { font-size: .89rem; color: var(--muted); margin: 0; } .card .card-ic { margin-bottom: 16px; } .card-from { margin-top: 16px; font: 400 .8rem/1 var(--f-mono); color: var(--muted); } .card-from b { color: var(--brand); font-weight: 500; } .card-soon .card-ic { color: var(--muted); } /* Le survol n'existe pas au doigt : sur écran tactile, l'appui remplace le soulèvement (qui autrement restait « collé » après le tap). */ @media (hover: none) { .tile:hover, .plan:hover, .bento article:hover, a.card:hover, .card-lift:hover, .qa-tile:hover, .side-card:hover { transform: none; } } .tile:active, .plan:active, a.card:active, .card-lift:active, .qa-tile:active, .side-card:active, .quote:active, .faq-item summary:active, .mega-grid a:active, .picker-menu a:active, .drawer-link:active, .chat-quick button:active { transform: scale(.985); transition-duration: .08s; } /* Pas de flash bleu au tap sur mobile */ a, button, summary, [role="tab"] { -webkit-tap-highlight-color: transparent; } /* ------------------------------------------------------ Avis en défilement */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 16px; width: max-content; animation: slide 42s linear infinite; } /* Le défilement s'arrête au survol, et aussi quand la bande sort de l'écran : une animation invisible fait quand même travailler le compositeur. */ .marquee:hover .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .quote { width: 340px; flex: none; padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s ease, box-shadow .22s ease; } .quote:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--brand) 30%, transparent); } .quote blockquote { margin: 0 0 16px; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); } .stars { display: flex; gap: 3px; color: #f5a524; margin-bottom: 14px; } .stars svg { width: 15px; height: 15px; } .quote-who { display: flex; align-items: center; gap: 12px; } .quote-who span { display: flex; flex-direction: column; } .quote-who strong { font-size: .89rem; font-weight: 600; } .quote-who em { font-style: normal; font-size: .77rem; color: var(--muted); } .avatar { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--brand), var(--pink)); color: #fff; font: 500 .76rem/1 var(--f-mono); } /* ------------------------------------------------------------------ FAQ */ .faq { display: grid; gap: 10px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } .faq-item:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 500; font-size: .95rem; list-style: none; transition: color .18s ease, background .18s ease, transform .18s ease; } @media (hover: hover) { .faq-item summary:hover { background: var(--brand-wash); color: var(--brand); } } .faq-item summary::-webkit-details-marker { display: none; } .faq-item[open] summary { color: var(--brand); } .faq-item[open] .chev { transform: rotate(180deg); } .faq-a { padding: 0 22px 20px; } .faq-a p { margin: 0; font-size: .91rem; color: var(--muted); } /* -------------------------------------------------------------- Bande CTA */ .cta-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px; padding: clamp(30px, 4vw, 48px); border-radius: var(--r-lg); background: linear-gradient(125deg, var(--brand), var(--brand-hi) 45%, var(--brand-2), var(--brand) 100%); background-size: 220% 220%; animation: ctaFlow 12s ease-in-out infinite; color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } @keyframes ctaFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .cta-card::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); filter: blur(50px); animation: ctaBlob 10s ease-in-out infinite alternate; } @keyframes ctaBlob { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } } .cta-card > * { position: relative; z-index: 1; } .cta-card h2 { margin-bottom: 8px; } .cta-card p { margin: 0; max-width: 54ch; opacity: .92; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } .center-actions { justify-content: center; } .cta-card .btn-primary { background: #fff; color: var(--brand); box-shadow: 0 10px 26px -10px rgba(0,0,0,.4); } .cta-card .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); } .cta-card .btn-ghost:hover { background: rgba(255,255,255,.24); border-color: #fff; color: #fff; } /* --------------------------------------------------------- Hero de page */ .page-hero { position: relative; padding: clamp(34px, 5vw, 62px) 0 clamp(26px, 4vw, 42px); } .page-hero h1 { max-width: 20ch; margin-bottom: 16px; } .page-lead { max-width: 66ch; color: var(--ink-soft); font-size: 1.02rem; } .page-from { font: 400 .84rem/1 var(--f-mono); color: var(--muted); margin: 0; } .page-from b { color: var(--brand); font-weight: 500; } /* Titre + description centrés (plus de fil d'ariane) */ .page-hero-center { text-align: center; } .page-hero-center h1, .page-hero-center .page-lead, .page-hero-center .page-from { margin-inline: auto; } .page-hero-center .page-from { margin-top: 10px; } /* --------------------------------------------------------- Accès rapide */ .qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; } .qa-tile { display: flex; align-items: flex-start; gap: 14px; padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .qa-tile:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow); color: inherit; } .qa-tile.is-primary { border-color: color-mix(in srgb, var(--brand) 50%, transparent); background: linear-gradient(160deg, var(--brand-wash), var(--surface)); } .qa-ic { display: inline-flex; width: 42px; height: 42px; flex: none; border-radius: 13px; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); } .qa-ic svg { width: 20px; height: 20px; } .qa-txt { display: flex; flex-direction: column; min-width: 0; } .qa-txt strong { font: 600 1rem/1.3 var(--f-display); margin-bottom: 5px; } .qa-txt span { font-size: .85rem; color: var(--muted); line-height: 1.5; } .qa-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 .73rem/1 var(--f-mono); color: var(--brand); white-space: nowrap; padding-top: 12px; } .qa-go svg { width: 13px; height: 13px; } .qa-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 28px; padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);} .qa-help h2 { font-size: 1.12rem; margin-bottom: 6px; } .qa-help p { margin: 0; color: var(--muted); font-size: .9rem; } /* -------------------------------------------------------------- Statut */ .status-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--r); margin-bottom: 20px; border: 1px solid var(--line); background: var(--surface);} .status-banner strong { font: 600 1.05rem/1 var(--f-display); } .status-banner .pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); flex: none; } .status-banner.is-ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .status-banner.is-ok .pulse { background: var(--ok); animation: pulse 2.4s ease-out infinite; } .status-banner.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .status-banner.is-warn .pulse { background: var(--warn); } .status-banner.is-down { border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .status-banner.is-down .pulse { background: var(--bad); } .status-updated { margin-left: auto; font: 400 .76rem/1 var(--f-mono); color: var(--muted); } .status-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-bottom: 28px; } .stat { padding: 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .stat-k { display: block; font: 500 .67rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .stat b { font: 600 1.55rem/1 var(--f-display); font-variant-numeric: tabular-nums; } .status-group { margin-bottom: 24px; } .status-group h2 { font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .status-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface);} .status-row { display: grid; grid-template-columns: 14px 1fr auto auto auto; align-items: center; gap: 14px; padding: 15px 22px; border-bottom: 1px solid var(--line-soft); } .status-row:last-child { border-bottom: 0; } .status-led { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .status-row.is-up .status-led { background: var(--ok); } .status-row.is-warn .status-led { background: var(--warn); } .status-row.is-down .status-led { background: var(--bad); } .status-name { font-size: .92rem; font-weight: 500; } .status-spark { display: flex; align-items: flex-end; gap: 2px; height: 20px; } .status-spark i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 45%, transparent); display: block; } .status-ms { font: 400 .8rem/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; } .status-state { font: 500 .69rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 92px; text-align: right; } .status-row.is-up .status-state { color: var(--ok); } .status-row.is-warn .status-state { color: var(--warn); } .status-row.is-down .status-state { color: var(--bad); } .status-note { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--muted); } .status-note svg { width: 17px; height: 17px; flex: none; } .status-note a { color: var(--brand); } /* ----------------------------------------------------------- Documents */ .doc-layout { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; } .doc-toc { position: sticky; top: calc(var(--hdr-h) + 24px); } .doc-toc ol { display: grid; gap: 3px; } .doc-toc a { display: block; padding: 8px 11px; border-radius: var(--r-sm); font-size: .81rem; color: var(--muted); border-left: 2px solid transparent; } .doc-toc a:hover { color: var(--brand); background: var(--brand-wash); border-left-color: var(--brand); } .doc-meta { font: 400 .79rem/1 var(--f-mono); color: var(--muted); } .doc-note { display: flex; align-items: flex-start; gap: 9px; padding: 13px 17px; border-radius: var(--r-sm); margin-top: 16px; background: var(--surface); border: 1px solid var(--line); font-size: .84rem; color: var(--muted); max-width: 70ch; } .doc-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; } .doc-sec { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line-soft); } .doc-sec:last-of-type { border-bottom: 0; } .doc-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: 1.22rem; margin-bottom: 14px; } .doc-n { font: 500 .77rem/1 var(--f-mono); color: var(--brand); } .doc p { color: var(--ink-soft); font-size: .94rem; } .doc ul { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 20px; list-style: disc; color: var(--ink-soft); font-size: .94rem; } .def { display: grid; gap: 1px; margin: 0 0 1em; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line-soft); } .def > div { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 13px 18px; background: var(--surface); } .def dt { font: 500 .77rem/1.4 var(--f-mono); color: var(--muted); } .def dd { margin: 0; font-size: .91rem; } .doc-contact { font-size: .89rem; color: var(--muted); } .doc-contact a { color: var(--brand); } /* ------------------------------------------------------------ Formulaires */ .form-layout { display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: start; } .card-form { padding: 30px; border-radius: var(--r-lg); display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line);} .field { display: grid; gap: 7px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label { font-size: .85rem; font-weight: 500; } .req { color: var(--brand); } .field input, .field textarea, .field select { width: 100%; padding: 12px 15px; font: 400 .93rem/1.5 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .16s ease, box-shadow .16s ease; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); } .field textarea { resize: vertical; min-height: 110px; } .field .is-error { border-color: var(--bad); } .fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; display: grid; gap: 16px; margin: 0; } .fieldset legend { padding: 0 8px; font: 500 .77rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-msg { margin: 0; font-size: .86rem; min-height: 1.2em; } .form-msg.is-error { color: var(--bad); } .form-msg.is-ok { color: var(--ok); } .form-side { display: grid; gap: 12px; } .form-side h2 { font-size: 1rem; margin-bottom: 4px; } .side-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); transition: border-color .18s ease, transform .18s ease; } .side-card:hover { border-color: var(--brand); transform: translateY(-2px); color: inherit; } .side-card .card-ic { margin-bottom: 0; width: 38px; height: 38px; flex: none; } .side-card span span { display: flex; flex-direction: column; } .side-card strong { font-size: .92rem; font-weight: 600; } .side-card em { font-style: normal; font-size: .81rem; color: var(--muted); line-height: 1.5; margin-top: 3px; } .side-mail { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--muted); } .side-mail svg { width: 16px; height: 16px; flex: none; } .side-mail a { color: var(--brand); min-width: 0; overflow-wrap: break-word; word-break: break-word; } .form-done { padding: clamp(48px, 7vw, 88px) 0; } .form-done[hidden] { display: none; } .done-card { max-width: 560px; margin-inline: auto; text-align: center; padding: 46px 34px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .done-ic { display: inline-flex; width: 56px; height: 56px; margin-bottom: 18px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .done-ic svg { width: 26px; height: 26px; } .done-card h2 { margin-bottom: 10px; } .done-card p { color: var(--muted); margin-bottom: 22px; } .soon-card { text-align: center; padding: 46px 34px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .soon-card .card-ic { margin-inline: auto; margin-bottom: 18px; } .soon-card h2 { margin-bottom: 10px; } .soon-card p { color: var(--muted); max-width: 52ch; margin-inline: auto; margin-bottom: 24px; } .soon-card .cta-actions { justify-content: center; } /* -------------------------------------------------------------- Footer */ .ftr { margin-top: 40px; padding: clamp(40px, 5vw, 64px) 0 0; position: relative; } .ftr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); } .ftr-inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .ftr-about { font-size: .87rem; color: var(--muted); max-width: 42ch; margin: 16px 0 12px; } .ftr-loc { display: flex; align-items: center; gap: 8px; font: 400 .75rem/1 var(--f-mono); color: var(--muted); margin: 0; } .ftr-loc svg { width: 15px; height: 15px; } .ftr-col h2 { font: 500 .71rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .ftr-col ul { display: grid; gap: 10px; } .ftr-col a { font-size: .88rem; color: var(--ink-soft); } .ftr-col a:hover { color: var(--brand); } .ftr-bottom { max-width: var(--wrap); margin: 42px auto 0; padding: 20px var(--gut) 28px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .ftr-bottom p { margin: 0; font-size: .79rem; color: var(--muted); } .ftr-tm { display: block; opacity: .75; margin-top: 4px; } .ftr-legal { display: flex; flex-wrap: wrap; gap: 18px; } .ftr-legal a { font-size: .79rem; color: var(--muted); } .ftr-legal a:hover { color: var(--brand); } /* ------------------------------------------------------ Bandeau cookies */ /* Sur grand écran : bandeau plein largeur collé en bas. Sur mobile (voir media query) : carte compacte, posée en bas. */ .cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 130; padding: var(--gut); } .cookie[hidden] { display: none; } .cookie-card { display: flex; align-items: center; gap: 16px; width: 100%; max-width: none; margin-inline: 0; padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: popIn .45s cubic-bezier(.2,.8,.3,1) both; } @keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(.97); } } .cookie-ic { display: inline-flex; width: 38px; height: 38px; flex: none; border-radius: 12px; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); } .cookie-ic svg { width: 19px; height: 19px; } .cookie-text { flex: 1 1 auto; min-width: 0; } .cookie-text p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.5; } .cookie-more { color: var(--brand); font-weight: 600; text-decoration: underline; white-space: nowrap; } .cookie-actions { display: flex; align-items: center; gap: 10px; flex: none; } /* --------------------------------------- Proposition de mode sombre */ /* Toast compact, en bas d'écran, à côté du bandeau cookies. */ .theme-ask { position: fixed; right: var(--gut); left: auto; bottom: 18px; z-index: 128; width: min(300px, calc(100vw - 2 * var(--gut))); padding: 16px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: popIn .45s cubic-bezier(.2,.8,.3,1) .8s both; } .theme-ask[hidden] { display: none; } /* Quand le bandeau cookies est affiché, il occupe déjà le bas de l'écran : la proposition de thème attend son tour. */ html.is-cookie-open .theme-ask { display: none; } .theme-ask-close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; } .theme-ask-close svg { width: 14px; height: 14px; } .theme-ask-close:hover { color: var(--fg); } .theme-ask-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 20px; } .theme-ask-ic { display: inline-flex; width: 38px; height: 38px; flex: none; border-radius: 50%; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand); } .theme-ask-ic svg { width: 18px; height: 18px; } .theme-ask-head h2 { font-size: .95rem; margin: 0; line-height: 1.35; } .theme-ask .btn { width: 100%; } /* ---------------------------------------------------- Révélation scroll */ /* opacity + transform seulement : ces deux propriétés sont animées par le compositeur, elles ne déclenchent ni layout ni repaint. --i porte le décalage d'une carte à l'autre, posé par app.js. */ .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); } .reveal.is-in { opacity: 1; transform: none; } /* pas de will-change ici : une page en compte des dizaines, autant de couches GPU réservées pour une animation qui ne joue qu'une fois. */ /* --------------------------------------------- Dépliage natif
*/ /* interpolate-size + ::details-content : l'ouverture s'anime sans JS et sans mesurer de hauteur. Les navigateurs qui ne connaissent pas la règle ouvrent d'un coup, comme avant. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .faq-item::details-content, .drawer-group::details-content, .mega-cat details::details-content, .drawer-cats details::details-content { block-size: 0; overflow: hidden; transition: block-size .32s cubic-bezier(.2, .8, .3, 1), content-visibility .32s allow-discrete; } .faq-item[open]::details-content, .drawer-group[open]::details-content, .mega-cat details[open]::details-content, .drawer-cats details[open]::details-content { block-size: auto; } } /* ------------------------------------------------------------ Responsive */ /* Les grilles de cartes (.tiles, .plans, .cards-3, .qa-grid, .status-summary) sont en auto-fit : elles n'ont aucune règle ici, elles se replient seules. */ @media (max-width: 1260px) { .nav { display: none; } .burger { display: inline-flex; } /* .nav portait flex:1 et poussait .hdr-actions à droite ; une fois masqué, on doit reproduire cet espacement nous-mêmes. */ .hdr-actions { margin-left: auto; } .bento { grid-template-columns: repeat(2, 1fr); } .bento .big, .bento .wide { grid-column: span 2; grid-row: auto; } .ftr-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .doc-layout { grid-template-columns: 1fr; } .doc-toc { display: none; } .form-layout { grid-template-columns: 1fr; } } @media (max-width: 860px) { .hide-sm { display: none; } .def > div { grid-template-columns: 1fr; gap: 4px; } .hero h1 { max-width: 100%; } .mega-inner { grid-template-columns: 1fr; } } @media (max-width: 620px) { :root { --gut: 16px; --hdr-h: 64px; } .hdr-inner { gap: 10px; } .brand-mark { width: 36px; height: 36px; border-radius: 10px; } .brand-name { font-size: 1.05rem; } .brand-sub { display: none; } .picker-code { display: none; } .hdr-actions .picker-btn { min-width: 34px; padding: 0 8px; } .bento, .field-row, .ftr-inner { grid-template-columns: 1fr; } .bento .big, .bento .wide { grid-column: span 1; } .hero { padding-top: 40px; } .hero-micro { gap: 8px 18px; } .hero-micro li { font-size: .8rem; } .hero-cta .btn { flex: 1; min-width: 140px; } .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs button { flex: none; } /* Toutes les offres restent joignables : bande horizontale au lieu d'un empilement vertical géant. touch-action: pan-x évite que le geste soit intercepté par le zoom du navigateur. Le padding-top laisse la place au badge (plan-tag) qui dépasse au-dessus de la carte : comme overflow-x devient "auto" ici, overflow-y l'est implicitement aussi et coupait le haut du badge sans cette marge. */ .plans, .plans-wide { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gut) * -1); padding: 22px var(--gut) 14px; gap: 14px; } .plans::-webkit-scrollbar, .plans-wide::-webkit-scrollbar { display: none; } .plans .plan, .plans-wide .plan { flex: 0 0 82%; scroll-snap-align: center; } @media (min-width: 420px) { .plans .plan, .plans-wide .plan { flex-basis: 72%; } } .quote { width: 280px; } .marquee-track { animation-duration: 34s; } .status-row { grid-template-columns: 12px 1fr auto; row-gap: 6px; padding: 14px 16px; } .status-spark { display: none; } .status-state { grid-column: 2 / -1; text-align: left; min-width: 0; } .cookie { left: 0; right: 0; bottom: 0; padding: 12px; } .cookie-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; } .cookie-actions { flex-direction: row-reverse; } .cookie-actions .btn { flex: 1; } .theme-ask { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 16px 18px; } .cta-card { flex-direction: column; align-items: flex-start; } .cta-actions { width: 100%; } .cta-actions .btn { flex: 1; } .ftr-bottom { flex-direction: column; align-items: flex-start; } /* Le tiroir et les panneaux fixes respectent la barre système iOS. */ .drawer-foot { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } .cookie { bottom: calc(12px + env(safe-area-inset-bottom)); } .theme-ask { bottom: calc(12px + env(safe-area-inset-bottom)); } } /* Au doigt, tout ce qui se touche fait au moins 44px de haut. */ @media (pointer: coarse) { .icon-btn { min-width: 44px; height: 44px; } .btn { padding: 14px 22px; } .btn-sm { padding: 11px 16px; } .nav-link, .drawer-group summary, .drawer-link, .faq-item summary { min-height: 44px; } .picker-menu a, .mega-grid a { min-height: 44px; } } /* Sur mobile le fond ne bouge plus : il est peint une fois, point final. */ @media (max-width: 620px), (pointer: coarse) { .ambient::before { animation: none; will-change: auto; } } /* ------------------------------------------------- Mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } .rotator-word { transition: opacity .2s linear; transform: none !important; } .ambient::before { animation: none; } .faq-item::details-content, .drawer-group::details-content { transition: none; } } /* ---------------------------------------------------------- Impression */ @media print { .hdr, .ftr, .cookie, .drawer, .drawer-veil, .ambient, .cta-card, .theme-ask, .chat-launcher, .chat-panel { display: none !important; } body { background: #fff; color: #000; } .sec { padding: 12px 0; } } /* ========================================================================== Assistant Artaun ========================================================================== */ .chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 125; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border: 1px solid transparent; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; font: 500 .9rem/1 var(--f-body); cursor: pointer; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--brand) 75%, transparent); transition: transform .24s cubic-bezier(.2,.8,.3,1), opacity .24s ease; } .chat-launcher:hover { transform: translateY(-3px); } .chat-launcher.is-hidden { opacity: 0; transform: scale(.85); pointer-events: none; } .chat-launcher-ic svg { width: 19px; height: 19px; } .chat-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bad); color: #fff; font: 500 .7rem/20px var(--f-mono); text-align: center; } .chat-badge[hidden] { display: none; } /* Le bandeau cookies occupe le bas de l'écran : on remonte le bouton. */ html.is-cookie-open .chat-launcher { bottom: 190px; } .chat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 126; display: flex; flex-direction: column; width: min(388px, calc(100vw - 28px)); height: min(620px, calc(100dvh - 44px)); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.3,1); } .chat-panel[hidden] { display: none; } .chat-panel.is-open { opacity: 1; transform: none; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex: none; } .chat-avatar svg { width: 34px; height: 34px; border-radius: 11px; } .chat-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .chat-id strong { font: 600 .95rem/1.2 var(--f-display); } .chat-id em { display: flex; align-items: center; gap: 6px; font: 400 .73rem/1.4 var(--f-mono); font-style: normal; color: var(--muted); } .chat-id em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; } .chat-close { width: 32px; min-width: 32px; height: 32px; } .chat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: grid; gap: 12px; align-content: start; } .chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; } .chat-msg.is-user { margin-left: auto; align-items: flex-end; } .chat-msg.is-system { max-width: 100%; align-items: center; } .chat-bubble { padding: 11px 14px; border-radius: 16px; font-size: .88rem; line-height: 1.55; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; } .chat-msg.is-user .chat-bubble { background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; border-color: transparent; border-bottom-right-radius: 6px; } .chat-msg.is-bot .chat-bubble { border-bottom-left-radius: 6px; } .chat-msg.is-staff .chat-bubble { background: color-mix(in srgb, var(--aqua) 14%, transparent); border-color: color-mix(in srgb, var(--aqua) 35%, transparent); border-bottom-left-radius: 6px; } .chat-msg.is-system .chat-bubble { background: none; border: 0; padding: 4px 0; font: 400 .75rem/1.5 var(--f-mono); color: var(--muted); text-align: center; } .chat-bubble a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .chat-msg.is-user .chat-bubble a { color: inherit; } .chat-bubble code { font: 400 .84em/1.4 var(--f-mono); background: var(--paper-3); padding: 1px 5px; border-radius: 5px; } .chat-who { font: 500 .69rem/1 var(--f-mono); color: var(--muted); padding-left: 4px; } .chat-typing .chat-bubble { display: flex; gap: 4px; padding: 14px; } .chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.3s ease-in-out infinite; } .chat-typing i:nth-child(2) { animation-delay: .18s; } .chat-typing i:nth-child(3) { animation-delay: .36s; } @keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } .chat-quick { display: flex; flex-wrap: wrap; gap: 6px; } .chat-quick[hidden] { display: none; } .chat-quick button { padding: 8px 13px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font: 400 .79rem/1.3 var(--f-body); color: var(--ink-soft); cursor: pointer; text-align: left; transition: border-color .16s ease, color .16s ease; } .chat-quick button:hover { border-color: var(--brand); color: var(--brand); } .chat-escalate { padding: 18px 16px; border-top: 1px solid var(--line-soft); display: grid; gap: 12px; flex: none; } .chat-escalate[hidden] { display: none; } .chat-escalate h2 { font-size: .97rem; } .chat-escalate p { margin: 0; font-size: .83rem; color: var(--muted); } .chat-field { display: grid; gap: 5px; } .chat-field span { font-size: .78rem; font-weight: 500; } .chat-field input { padding: 10px 13px; font: 400 .88rem/1.4 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); } .chat-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); } .chat-escalate-actions { display: flex; justify-content: flex-end; gap: 8px; } .chat-composer { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 12px 12px 8px; border-top: 1px solid var(--line-soft); } .chat-composer[hidden] { display: none; } .chat-composer textarea { flex: 1; resize: none; max-height: 120px; padding: 11px 14px; border-radius: 15px; font: 400 .89rem/1.5 var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); } .chat-composer textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); } .chat-send { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-hi)); color: #fff; cursor: pointer; transition: transform .16s ease; } .chat-send:hover { transform: scale(1.07); } .chat-send svg { width: 17px; height: 17px; } .chat-legal { margin: 0; padding: 0 16px 12px; flex: none; font: 400 .67rem/1.5 var(--f-mono); color: var(--muted); text-align: center; } @media (max-width: 620px) { .chat-launcher { right: 14px; bottom: 14px; padding: 12px 16px; } .chat-launcher-label { display: none; } html.is-cookie-open .chat-launcher { bottom: 14px; opacity: 0; pointer-events: none; } .chat-panel { inset: 0; right: auto; bottom: auto; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; } .chat-composer textarea { font-size: 16px; } /* évite le zoom auto au focus sur iOS Safari */ } /* ------------------------------------------------------------------ Filet de sécurité anti-chevauchement de texte. Un enfant de conteneur flex a un min-width:auto par défaut : au lieu de passer à la ligne, un mot trop long déborde et vient chevaucher les éléments voisins de la carte. On force le retour à la ligne et on laisse les éléments flex se réduire correctement partout où du texte peut être long (cartes, tuiles, offres, mega-menu…). ------------------------------------------------------------------- */ .card, .tile, .plan, .bento article, .qa-tile, .side-card, .mega-grid a, .plan-specs li, .tile-txt, .mega-txt, .qa-txt, .side-mail, .status-state { min-width: 0; } .card h2, .card h3, .card p, .card span, .tile-txt strong, .tile-txt span, .plan-name, .plan-cat, .plan-specs li span, .mega-name, .mega-desc, .qa-txt strong, .qa-txt span, .bento h3, .bento p, .side-mail a { overflow-wrap: break-word; word-break: break-word; } /* ---------------------------------------------------- Recherche de domaine */ .domain-search-sec { padding-top: 0; } .domain-box { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; } .domain-search-form { width: 100%; } .domain-search-row { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 6px 6px 18px; box-shadow: var(--shadow-sm); transition: border-color .16s ease, box-shadow .16s ease; } .domain-search-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); } .domain-search-icon { display: flex; color: var(--muted); flex: 0 0 auto; } .domain-search-icon svg { width: 18px; height: 18px; } .domain-search-row input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 12px 6px; font: 400 .96rem/1.4 var(--f-body); color: var(--ink); } .domain-search-row input:focus { outline: none; } .domain-search-row input::placeholder { color: var(--muted); } .domain-search-row .btn { flex: 0 0 auto; white-space: nowrap; border-radius: var(--r-pill); } .domain-result { display: grid; gap: 10px; text-align: left; max-width: 640px; margin: 0 auto; width: 100%; } .domain-msg { margin: 0; font-size: .92rem; font-weight: 500; display: flex; align-items: center; gap: 8px; } .domain-msg.is-ok { color: var(--ok); } .domain-msg.is-error { color: var(--bad); } .domain-msg.is-neutral { color: var(--ink-soft); } .domain-price { margin: 0; font-size: .87rem; color: var(--muted); } .domain-price strong { color: var(--ink); font-size: 1rem; } .domain-popular { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .domain-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font: 600 .85rem/1 var(--f-body); color: var(--ink); cursor: pointer; transition: border-color .16s ease, transform .16s ease; } .domain-pill:hover { border-color: var(--brand); transform: translateY(-1px); } .domain-pill span { font-weight: 400; color: var(--muted); font-size: .8rem; } .domain-see-all { display: inline-flex; align-items: center; gap: 6px; font: 500 .85rem/1 var(--f-body); color: var(--brand); text-decoration: none; } .domain-see-all svg { width: 15px; height: 15px; transition: transform .16s ease; } .domain-see-all:hover svg { transform: translateX(3px); } @media (max-width: 560px) { .domain-search-row { flex-wrap: wrap; border-radius: var(--r-lg); padding: 12px; } .domain-search-row input { flex: 1 1 100%; order: 1; padding: 10px 8px; } .domain-search-icon { order: 0; } .domain-search-row .btn { flex: 1 1 100%; order: 2; justify-content: center; } } /* ------------------------------------------------------ Page /domaines/ */ .domains-page-hero { text-align: center; padding-bottom: 8px; } .domains-page-hero h1 { margin-bottom: 10px; } .domains-page-hero .page-lead { max-width: 560px; margin: 0 auto 30px; color: var(--muted); } .domains-list-sec { padding-top: 10px; } .domains-list-title { font: 600 .8rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .domains-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .domains-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); } .domains-row:last-child { border-bottom: 0; } .domains-row.is-featured { background: var(--brand-wash); } .domains-row-ext { font: 700 1.02rem/1 var(--f-body); color: var(--ink); min-width: 64px; } .domains-row-price { flex: 1 1 auto; font-size: .87rem; color: var(--muted); } .domains-row-price strong { color: var(--ink); font-size: .98rem; } .domains-row-renew { display: block; font-size: .8rem; margin-top: 2px; } .domains-row-btn { flex: 0 0 auto; } @media (max-width: 560px) { .domains-row { padding: 14px 16px; } .domains-row-btn { width: 100%; justify-content: center; } }