/* ========================================================================= Allkin — feuille de style unique (site vitrine + espace client) 1. Tokens · 2. Base · 3. Composants · 4. Site vitrine · 5. Espace client ========================================================================= */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Teintes reprises du thème sombre de l'application Allkin (web/style.css) : un site vitrine et le produit qu'il vend doivent montrer la même identité. */ --bg: #1a1c1e; --bg-soft: #1f2123; --panel: #27292c; --panel-2: #2f3133; --line: #393b3e; --line-soft: #2c2e31; --line-strong:#4e5052; --text: #e5e8ec; --text-dim: #a1a5a9; --text-faint: #7d8185; --accent: #83d4c6; --accent-soft: #9feadc; --accent-fg: #10201d; --accent-dim: rgba(131, 212, 198, .16); /* Dégradé de la marque — les quatre arrêts du logo. */ --logo-1: #26fde3; --logo-2: #22ebff; --logo-3: #8090fc; --logo-4: #e659fd; --logo-gradient: linear-gradient(115deg, var(--logo-1), var(--logo-2) 34%, var(--logo-3) 66%, var(--logo-4)); --logo-shadow: rgba(34, 235, 255, .20); --ok: #34d399; --ok-dim: rgba(52, 211, 153, .14); --warn: #fbbf24; --warn-dim:rgba(251, 191, 36, .14); --danger: #f87171; --danger-dim: rgba(248, 113, 113, .14); --info: #38bdf8; --info-dim: rgba(56, 189, 248, .14); --radius: 14px; --radius-sm: 9px; --shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --wrap: 1140px; } /* Thème clair — bascule manuelle (bouton dans la barre latérale de l'espace client, voir .theme-toggle) : l'attribut data-theme est posé sur par le JS et retenu dans le localStorage. Sans lui, le thème sombre ci-dessus reste celui appliqué. */ :root[data-theme="light"] { --bg: #f4f5f6; --bg-soft: #ffffff; --panel: #ffffff; --panel-2: #eef0f1; --line: #dde1e4; --line-soft: #e7eaec; --line-strong:#c2c7cb; --text: #1b1e20; --text-dim: #52575c; --text-faint: #7c8186; /* Plus saturés qu'en sombre : la version claire du même teal a besoin de rester foncée pour rester lisible en texte sur fond blanc. */ --accent: #0d9488; --accent-soft: #0f766e; --accent-fg: #f4fffd; --accent-dim: rgba(13, 148, 136, .12); --logo-shadow: rgba(34, 235, 255, .14); --ok: #059669; --ok-dim: rgba(5, 150, 105, .12); --warn: #b45309; --warn-dim:rgba(180, 83, 9, .12); --danger: #dc2626; --danger-dim: rgba(220, 38, 38, .10); --info: #0284c7; --info-dim: rgba(2, 132, 199, .10); --shadow: 0 18px 40px -22px rgba(20, 22, 25, .22); } /* Quelques couleurs posées en dur pour le seul thème sombre à l'origine : reprises ici pour rester lisibles sur fond clair. */ :root[data-theme="light"] .alert--success { color: #065f46; } :root[data-theme="light"] .alert--error { color: #991b1b; } :root[data-theme="light"] .alert--warning { color: #92400e; } :root[data-theme="light"] .alert--info { color: #075985; } :root[data-theme="light"] .input:focus, :root[data-theme="light"] .select:focus, :root[data-theme="light"] .textarea:focus { background: #ffffff; } :root[data-theme="light"] .btn--primary:hover { background: linear-gradient(180deg, #14b8a6, var(--accent-soft)); } /* --- 2. Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } body.site { background-color: var(--bg); background-image: radial-gradient(46% 46% at 20% 14%, rgba(34, 235, 255, .20), transparent 72%), radial-gradient(42% 42% at 80% 4%, rgba(230, 89, 253, .15), transparent 72%); background-repeat: no-repeat; background-position: top center; background-size: 100% 720px; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.02em; } h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); } h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } a { color: var(--accent-soft); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } code, kbd, pre { font-family: var(--mono); font-size: .875em; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: .6rem 1rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 4px; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .mono { font-family: var(--mono); } .nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .stack > * + * { margin-top: 1rem; } /* --- 3. Composants ------------------------------------------------------ */ /* Boutons */ .btn { --btn-fg: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .66rem 1.15rem; font: inherit; font-weight: 580; line-height: 1.2; color: var(--btn-fg); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .1s ease; } .btn:hover { text-decoration: none; background: rgba(255, 255, 255, .1); border-color: #63676a; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; } /* Bouton principal : la menthe de la marque, encre sombre, et une ombre courte qui le pose sur la page — sans elle il paraissait posé à plat, inachevé. */ .btn--primary { --btn-fg: var(--accent-fg); background: linear-gradient(180deg, var(--accent-soft), var(--accent)); border-color: transparent; box-shadow: 0 8px 18px -12px rgba(131, 212, 198, .95); } .btn--primary:hover { background: linear-gradient(180deg, #b8f5ea, var(--accent-soft)); border-color: transparent; box-shadow: 0 10px 22px -11px rgba(131, 212, 198, 1); } /* Bouton secondaire : une vraie surface, pas juste un filet. */ .btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--line); } .btn--ghost:hover { background: rgba(255, 255, 255, .09); border-color: var(--line-strong); } .btn--soft { background: var(--panel-2); border-color: var(--line); } .btn--soft:hover { background: #3a3d40; border-color: var(--line-strong); } .btn--danger { background: transparent; color: var(--danger); border-color: rgba(248, 113, 113, .38); } .btn--danger:hover { background: var(--danger-dim); border-color: rgba(248, 113, 113, .6); } .btn--sm { padding: .42rem .8rem; font-size: .85rem; border-radius: 8px; } .btn--lg { padding: .85rem 1.6rem; font-size: 1.02rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; } /* Badges et pastilles */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; /* « En service » ne se coupe jamais en deux lignes */ background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--line); } .badge--ok { background: var(--ok-dim); color: var(--ok); border-color: transparent; } .badge--busy { background: var(--info-dim); color: var(--info); border-color: transparent; } .badge--warn { background: var(--warn-dim); color: var(--warn); border-color: transparent; } .badge--danger { background: var(--danger-dim); color: var(--danger); border-color: transparent; } .badge--off { background: var(--panel-2); color: var(--text-faint); } .badge--accent { background: var(--accent-dim); color: var(--accent-soft); border-color: transparent; } .badge--sm { padding: .05rem .4rem; font-size: .7rem; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: none; } .dot--ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-dim); } .dot--busy { background: var(--info); box-shadow: 0 0 0 4px var(--info-dim); animation: pulse 1.4s ease-in-out infinite; } .dot--off { background: var(--text-faint); } .dot--danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-dim); } @keyframes pulse { 50% { opacity: .35; } } /* Cartes et panneaux */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; } .card--pad-lg { padding: 1.8rem; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .card__head h2, .card__head h3 { margin: 0; } /* Un titre de carte n'est pas un titre de page : même taille que .panel-head h2. */ .card h2 { font-size: 1.15rem; } .card__foot { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); } .grid { display: grid; gap: 1.1rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* Alertes */ .alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); margin-bottom: 1.1rem; font-size: .95rem; } .alert--success { background: var(--ok-dim); border-color: rgba(52,211,153,.35); color: #a7f3d0; } .alert--error { background: var(--danger-dim); border-color: rgba(248,113,113,.35); color: #fecaca; } .alert--warning { background: var(--warn-dim); border-color: rgba(251,191,36,.35); color: #fde68a; } .alert--info { background: var(--info-dim); border-color: rgba(56,189,248,.35); color: #bae6fd; } /* Formulaires */ .field { margin-bottom: 1rem; } .field > label, .label { display: block; margin-bottom: .35rem; font-size: .87rem; font-weight: 600; color: var(--text-dim); } .input, .select, .textarea { width: 100%; padding: .7rem .85rem; font: inherit; color: var(--text); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s ease, background .15s ease; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); background: #0d1117; outline: none; } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: right 1.05rem center, right .8rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; } .hint { display: block; margin-top: .35rem; font-size: .82rem; color: var(--text-faint); } .field--inline { display: flex; gap: .6rem; align-items: flex-start; } .field--inline input[type="checkbox"], .field--inline input[type="radio"] { margin-top: .35rem; accent-color: var(--accent); width: 16px; height: 16px; } .field--inline label { margin: 0; font-weight: 450; color: var(--text); font-size: .93rem; } /* Interrupteur : une vraie case à cocher (clavier, formulaire, lecteur d'écran), redessinée en glissière. Le label occupe toute la largeur, texte à gauche, glissière à droite — la ligne entière est cliquable. */ .switch { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .93rem; color: var(--text); cursor: pointer; user-select: none; } .switch__input { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; width: 40px; height: 22px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-strong); cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .switch__input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .2s ease; } .switch:hover .switch__input:not(:checked) { border-color: #63676a; } .switch__input:checked { background: var(--accent); border-color: transparent; box-shadow: 0 0 14px -3px rgba(131, 212, 198, .7); } .switch__input:checked::before { transform: translateX(18px); background: #fff; } .switch__input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; } .form-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Tableaux */ .table { width: 100%; border-collapse: collapse; font-size: .93rem; } .table th { text-align: left; padding: .65rem .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 600; border-bottom: 1px solid var(--line); } .table td { padding: .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: rgba(255, 255, 255, .02); } /* Un tableau plus large que son cadre se signale par une ombre sur le bord qu'il reste à parcourir. Les deux dégradés « local » masquent l'ombre quand on est arrivé au bout — rien à écouter en JavaScript. */ .table-scroll { /* `--scroll-fond` doit valoir la couleur derrière le tableau, sinon les dégradés de masquage laissent une bande visible sur les bords. */ --scroll-fond: var(--panel); overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--scroll-fond) 40%, transparent) left center / 28px 100% no-repeat local, linear-gradient(to left, var(--scroll-fond) 40%, transparent) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .38), transparent) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .38), transparent) right center / 14px 100% no-repeat scroll; } /* Listes clé/valeur */ .deflist { display: grid; gap: .1rem; margin: 0; } .deflist > div { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line-soft); } .deflist > div:last-child { border-bottom: 0; } .deflist dt { color: var(--text-dim); font-size: .9rem; margin: 0; } .deflist dd { margin: 0; font-weight: 560; text-align: right; } /* Bloc terminal */ .terminal { background: #06080b; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .terminal__bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .9rem; background: var(--panel); border-bottom: 1px solid var(--line); } .terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3543; display: block; } .terminal__bar span { margin-left: .5rem; font: 600 .78rem var(--mono); color: var(--text-faint); } .terminal pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; font-family: var(--mono); font-size: .84rem; line-height: 1.85; color: #cbd5e1; } .terminal .c-prompt { color: var(--accent-soft); } .terminal .c-cmd { color: #e7ecf3; } .terminal .c-out { color: var(--text-faint); } .terminal .c-ok { color: var(--ok); } /* Barre de progression */ .meter { height: 7px; border-radius: 99px; background: var(--panel-2); overflow: hidden; } .meter > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; } .meter--ok > span { background: var(--ok); } .meter--warn > span { background: var(--warn); } /* --- 4. Site vitrine ---------------------------------------------------- */ /* En-tête */ .topbar { /* Collant sur toutes les pages, et sans fond : c'est le halo du qui se voit à travers, puisqu'il commence au premier pixel du document et passe donc sous cette barre. `sticky` sert aussi d'ancre au menu déroulant mobile. */ position: sticky; top: 0; z-index: 40; background: transparent; border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; } /* En haut de page l'en-tête est invisible et laisse voir le halo ; dès qu'on défile, il prend un fond très sombre mais translucide (classe posée par main.js) — de quoi rester lisible sans masquer complètement la page. */ .topbar.is-scrolled { background: rgba(14, 16, 18, .82); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border-bottom-color: rgba(255, 255, 255, .07); } .topbar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 66px; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.08rem; color: var(--text); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand img { filter: drop-shadow(0 0 10px var(--logo-shadow)); } .nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; } /* `:not(.btn)` est indispensable : sans lui, `.nav > a` l'emporte en spécificité sur `.btn` et délave à la fois l'encre et le survol des boutons de la barre. */ .nav > a:not(.btn):not(.icon-btn) { position: relative; padding: .5rem .85rem; border-radius: 8px; color: var(--text); font-size: .94rem; font-weight: 520; } .nav > a:not(.btn):not(.icon-btn):hover { background: rgba(255, 255, 255, .07); text-decoration: none; } .nav > a.is-active { color: var(--accent-soft); } .nav > a.is-active::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .22rem; height: 2px; border-radius: 2px; background: var(--accent); } .nav > a.btn { margin-left: .5rem; } /* Boutons carrés de la barre : langue et compte. Même matière que les boutons secondaires, mais dimensionnés autour de leur icône. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; height: 38px; min-width: 38px; padding: 0 .55rem; margin-left: .3rem; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font: inherit; transition: background .15s ease, border-color .15s ease, color .15s ease; } .icon-btn:hover { background: rgba(255, 255, 255, .09); border-color: var(--line-strong); text-decoration: none; } .icon-btn--accent { color: var(--accent-soft); border-color: rgba(131, 212, 198, .4); } .icon-btn__texte { display: none; } .flag { display: block; flex: none; } .chevron { opacity: .6; transition: transform .18s ease; } [aria-expanded="true"] .chevron { transform: rotate(180deg); } /* Choix de la langue */ .lang { position: relative; display: inline-flex; } .lang__menu { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 60; min-width: 200px; margin: 0; padding: .3rem; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .lang__item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 7px; font-size: .92rem; color: var(--text); } a.lang__item:hover { background: rgba(255, 255, 255, .07); text-decoration: none; } .lang__item.is-active { background: var(--accent-dim); color: var(--accent-soft); } .lang__item.is-soon { color: var(--text-faint); cursor: default; } .lang__item.is-soon .flag { opacity: .5; } .lang__item em { margin-left: auto; font-style: normal; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .nav-burger { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; position: relative; } .nav-burger span, .nav-burger span::before, .nav-burger span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--text); border-radius: 2px; content: ""; } .nav-burger span { top: 19px; } .nav-burger span::before { top: -6px; left: 0; } .nav-burger span::after { top: 6px; left: 0; } /* Héros */ .hero { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); } .hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1.05fr .95fr; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .3rem .8rem; border-radius: 999px; background: var(--accent-dim); color: var(--accent-soft); font-size: .82rem; font-weight: 600; } .hero h1 { margin-bottom: .7rem; } .hero h1 em { font-style: normal; background: var(--logo-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Mot tournant du slogan — EN SOMMEIL : aucune page ne contient de [data-rotator] pour l'instant. Voir contenu/mot-tournant.md pour le remettre. Il termine sa ligne dans le titre : sa largeur peut donc changer sans rien déplacer, et il n'y a aucune largeur à gérer. */ .rotator { display: inline-block; white-space: nowrap; } .rotator__mot { display: inline-block; background: var(--logo-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Le mot sortant descend et s'efface ; le suivant arrive d'au-dessus. Les deux vont vers le bas, l'un après l'autre — jamais superposés. */ @keyframes mot-sortie { to { transform: translateY(.4em); opacity: 0; } } @keyframes mot-entree { from { transform: translateY(-.4em); opacity: 0; } } .rotator__mot.sort { animation: mot-sortie .24s ease forwards; } .rotator__mot.entre { animation: mot-entree .32s cubic-bezier(.2, .7, .3, 1); } .hero__lead { font-size: 1.12rem; color: var(--text-dim); max-width: 34em; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.1rem; } .hero__note { font-size: .88rem; color: var(--text-faint); } .hero__grid { align-items: start; } .hero__texte { padding-top: 1.5rem; } /* La console passe au second plan : plus petite, sous le texte, elle sert de preuve et non d'argument principal. */ .terminal--mini { max-width: 420px; margin-top: 2rem; box-shadow: none; } .terminal--mini .terminal__bar { padding: .45rem .75rem; } .terminal--mini .terminal__bar i { width: 8px; height: 8px; } .terminal--mini .terminal__bar span { font-size: .7rem; } .terminal--mini pre { padding: .8rem .95rem; font-size: .76rem; line-height: 1.7; } /* L'en-tête présente les deux formes d'hébergement, au choix. La bascule est faite de deux boutons radio masqués : elle fonctionne sans JavaScript, et le clavier la parcourt comme n'importe quel groupe de radios. */ .offre { position: relative; max-width: 400px; margin-left: auto; padding: 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .offre__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1.2rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 11px; } .bascule label { padding: .5rem .6rem; border-radius: 8px; text-align: center; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--text-dim); transition: background .18s ease, color .18s ease; } .bascule label:hover { color: var(--text); } #heb-mut:checked ~ .bascule label[for="heb-mut"], #heb-ded:checked ~ .bascule label[for="heb-ded"] { background: var(--accent); color: var(--accent-fg); } #heb-mut:focus-visible ~ .bascule label[for="heb-mut"], #heb-ded:focus-visible ~ .bascule label[for="heb-ded"] { outline: 2px solid var(--accent-soft); outline-offset: 2px; } .panneau { display: none; } #heb-mut:checked ~ .panneau--mut, #heb-ded:checked ~ .panneau--ded { display: block; } .panneau__schema { padding: .6rem .4rem; margin-bottom: 1rem; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 10px; } .panneau h2 { font-size: 1.12rem; margin: 0 0 .5rem; } .panneau p { margin: 0; font-size: .89rem; line-height: 1.65; color: var(--text-dim); } .panneau__prix { margin: 1rem 0 !important; font-size: .95rem !important; color: var(--text) !important; } .panneau__prix strong { font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em; } /* Les schémas : la machine et ses unités de ressources. La part mentholée se lit comme une proportion, sans légende à consulter. */ .sch { display: block; width: 100%; height: auto; font-family: inherit; } .sch-machine { fill: var(--bg); stroke: var(--line); stroke-width: 1.2; } .sch-unite { fill: var(--panel-2); } .sch-unite--vous { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 1; } .sch-lisere { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .6; } .sch-pied { font-size: 9.5px; fill: var(--text-dim); } /* Bandeau de chiffres */ .strip { border-block: 1px solid var(--line-soft); background: var(--bg-soft); } .strip__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; padding-block: 1.8rem; } .strip__item strong { display: block; font-size: 1.75rem; font-weight: 680; letter-spacing: -.03em; } .strip__item span { color: var(--text-dim); font-size: .9rem; } /* Sections */ .section { padding: clamp(3rem, 6vw, 4.8rem) 0; } .section--alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); } .section__head { max-width: 46rem; margin-bottom: 2.4rem; } .section__head--center { margin-inline: auto; text-align: center; } .section__head p { color: var(--text-dim); font-size: 1.04rem; margin-bottom: 0; } .eyebrow { display: block; margin-bottom: .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); } /* Cartes de fonctionnalités */ .feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: border-color .2s ease, transform .2s ease; } .feature:hover { border-color: #2e3a4d; transform: translateY(-2px); } .feature__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 11px; background: var(--accent-dim); color: var(--accent-soft); font-size: 1.15rem; } .feature h3 { margin-bottom: .4rem; } .feature p { color: var(--text-dim); font-size: .95rem; margin-bottom: 0; } /* Infographie des services externes : trois rangées reliées par un trait vertical. Pas de positionnement absolu — l'ensemble s'empile tout seul sur un écran étroit, et le trait suit. */ .flux { display: grid; justify-items: center; gap: 0; } .flux__rangee { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; } .tuile { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 132px; padding: 1.1rem .7rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s ease, transform .2s ease; } .tuile:hover { border-color: var(--line-strong); transform: translateY(-2px); } .tuile__logo { display: grid; place-items: center; height: 34px; margin-bottom: .5rem; } .tuile strong { font-size: .93rem; font-weight: 600; } .tuile small { font-size: .76rem; color: var(--text-faint); text-align: center; line-height: 1.35; } /* Le trait qui relie les rangées, avec son étiquette au milieu. */ .flux__lien { display: grid; justify-items: center; gap: .35rem; padding: .9rem 0; width: 100%; } .flux__lien::before, .flux__lien::after { content: ""; width: 1px; height: 18px; background: linear-gradient(var(--line-strong), var(--accent)); } .flux__lien::after { background: linear-gradient(var(--accent), var(--line-strong)); } .flux__lien span { padding: .18rem .6rem; border-radius: 999px; background: var(--accent-dim); color: var(--accent-soft); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .flux__coeur { display: flex; align-items: center; gap: .9rem; max-width: 420px; padding: 1rem 1.3rem; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 0 0 4px var(--accent-dim); } .flux__coeur strong { display: block; font-size: 1.02rem; } .flux__coeur small { display: block; font-size: .8rem; color: var(--text-faint); line-height: 1.45; } .flux__coeur img { filter: drop-shadow(0 0 10px var(--logo-shadow)); } .puce { padding: .38rem .85rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: .88rem; color: var(--text-dim); } .puce--muet { border-style: dashed; color: var(--text-faint); } @media (max-width: 520px) { .tuile { width: calc(50% - .4rem); } } /* Étapes */ .steps { counter-reset: step; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .step { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: .9rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: .9rem; font-weight: 700; } /* --- Schéma d'accès ----------------------------------------------------- Un seul trait de lecture : deux carrés (le choix), un cercle (la machine), quatre cercles (l'usage). Les formes ne portent qu'une étiquette — le détail est renvoyé sous le schéma. */ .schema { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.4rem; } .schema__choix { display: grid; justify-items: center; gap: .5rem; flex: none; } .carre { display: grid; justify-items: center; gap: .1rem; width: 148px; padding: .95rem .7rem .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .carre--accent { border-color: rgba(131, 212, 198, .45); } .carre__icone { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: .45rem; border-radius: 50%; background: var(--panel-2); color: var(--text-dim); } .carre--accent .carre__icone { background: var(--accent-dim); color: var(--accent-soft); } .carre strong { font-size: .95rem; font-weight: 600; } .carre small { font-size: .78rem; color: var(--text-faint); } .carre--accent small { color: var(--accent-soft); } .schema__ou { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } /* Le noyau : Allkin au centre, les services en satellites sur un anneau. Les bulles ont le fond de la section, ce qui découpe l'anneau derrière elles. */ /* Marge négative : la flèche vise l'anneau, pas la boîte carrée qui l'entoure — sans quoi elle s'arrête 48 px trop tôt. */ .noyau { position: relative; width: 240px; height: 240px; flex: none; margin: 0 -14px; } .noyau::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; border: 1px dashed var(--line); } .rond-gros { position: absolute; inset: 56px; display: grid; justify-items: center; align-content: center; gap: .1rem; border-radius: 50%; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 0 0 5px var(--accent-dim); } .bulle { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); } /* Cinq positions sur l'anneau (rayon 96 px), en évitant la gauche et la droite où arrivent les flèches. */ .noyau .bulle:nth-of-type(1) { left: 104px; top: 8px; } .noyau .bulle:nth-of-type(2) { left: 182.6px; top: 48.9px; } .noyau .bulle:nth-of-type(3) { left: 182.6px; top: 159.1px; } .noyau .bulle:nth-of-type(4) { left: 25.4px; top: 159.1px; } .noyau .bulle:nth-of-type(5) { left: 25.4px; top: 48.9px; } .rond-gros img { margin-bottom: .35rem; filter: drop-shadow(0 0 8px var(--logo-shadow)); } .rond-gros strong { font-size: .92rem; } .rond-gros small { font-size: .74rem; color: var(--text-faint); } /* La suite, en une liste claire plutôt qu'en pastilles éparpillées. */ .etapes { flex: 1; max-width: 400px; min-width: 0; list-style: none; margin: 0; padding: 1rem 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); counter-reset: etape; } .etapes li { position: relative; padding: .68rem 0 .68rem 2.3rem; border-top: 1px solid var(--line-soft); } .etapes li:first-child { border-top: 0; } .etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; left: 0; top: .62rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-soft); font: 700 .7rem var(--mono); } .etapes strong { display: block; font-size: .93rem; font-weight: 600; } .etapes small { font-size: .8rem; line-height: 1.5; color: var(--text-faint); } /* Le trait entre deux groupes, avec sa pointe. */ .fleche { position: relative; flex: none; width: 40px; height: 1px; background: var(--line-strong); } .fleche::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); transform: rotate(45deg); } /* --- Sous le schéma : le détail, en deux colonnes brèves --------------- */ .schema__pied { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 820px; margin: 2.4rem auto 0; } .schema__pied-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .73rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); } .carre-mini { width: 10px; height: 10px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line-strong); } .carre-mini--accent { background: var(--accent-dim); border-color: var(--accent); } .schema__pied p:last-child { margin: .7rem 0 0; font-size: .85rem; color: var(--text-faint); } .schema__pied .step__cmd { margin: 0; } .schema__pied .btn-row { margin: 0; } .logos-ligne { display: flex; flex-wrap: wrap; gap: .45rem; } .logo-puce { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); } @media (max-width: 980px) { /* Le schéma se déroule à la verticale, flèches comprises. */ .schema { flex-direction: column; gap: 1.1rem; } .schema__choix { grid-auto-flow: column; align-items: center; gap: .9rem; } .fleche { width: 1px; height: 34px; } .fleche::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); } .etapes { max-width: 100%; width: 100%; } } @media (max-width: 420px) { .schema__choix { grid-auto-flow: row; } .carre { width: 100%; } } /* --- Droits par agent : même sobriété -----------------------------------*/ /* Comparatif des deux voies. La colonne « chez nous » porte un bandeau menthe continu, comme l'offre mise en avant d'une grille tarifaire : c'est lui qui structure le tableau, sans qu'il faille l'enfermer dans un cadre. */ .comparatif { --scroll-fond: var(--bg); max-width: 780px; margin-inline: auto; } .comparatif table { border-collapse: separate; border-spacing: 0; width: 100%; } .comparatif thead th { padding: 0 1.1rem 1rem; vertical-align: bottom; text-transform: none; letter-spacing: 0; border-bottom: 0; } .comparatif thead th:first-child { width: 38%; } .comparatif thead th:last-child { background: var(--accent-dim); border-radius: 12px 12px 0 0; padding-top: 1.1rem; } .comparatif__tete { display: flex; align-items: center; gap: .6rem; text-align: left; } .comparatif__tete > span:last-child { font-size: .95rem; font-weight: 620; color: var(--text); } .comparatif__tete small { display: block; margin-top: .1rem; font-size: .76rem; font-weight: 400; color: var(--text-faint); } .comparatif__icone { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-dim); } .comparatif__icone--accent { background: var(--accent); border-color: transparent; color: var(--accent-fg); } .comparatif tbody th[scope="row"] { padding: .85rem 1.1rem .85rem 0; text-align: left; text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); } .comparatif tbody td { padding: .85rem 1.1rem; font-size: .9rem; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); } .comparatif tbody td:last-child { background: var(--accent-dim); } .comparatif tbody tr:last-child td:last-child { border-radius: 0 0 12px 12px; } .comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; } .comparatif tbody tr:hover th[scope="row"] { color: var(--text); } /* La valeur mise en avant : une coche pleine, pas un caractère perdu. */ .comparatif .oui { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; } .comparatif .oui::before { content: "✓"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: .66rem; font-weight: 700; line-height: 1; } /* Sous 640 px, trois colonnes ne tiennent plus : chaque ligne devient un petit groupe — le critère en titre, les deux réponses dessous, étiquetées. Plus aucun défilement latéral. */ @media (max-width: 640px) { .comparatif { overflow: visible; background: none; } .comparatif table, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; } .comparatif thead { display: none; } .comparatif tbody tr { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); } .comparatif tbody tr:last-child { border-bottom: 0; } .comparatif tbody th[scope="row"] { padding: 0 0 .6rem; border-bottom: 0; font-size: .93rem; font-weight: 600; color: var(--text); } .comparatif tbody td { position: relative; padding: .4rem .8rem .4rem 6.2rem; border-bottom: 0; background: none; border-radius: 8px; } .comparatif tbody td::before { content: attr(data-col); position: absolute; left: .8rem; top: .4rem; font-size: .8rem; color: var(--text-faint); } .comparatif tbody td:last-child { background: var(--accent-dim); } .comparatif tbody td:last-child::before { color: var(--accent-soft); } .comparatif tbody tr:last-child td:last-child { border-radius: 8px; } } .droits { max-width: 720px; margin: 1.8rem auto 2rem; } /* Pastilles d'état du tableau des droits. */ .qui { display: inline-block; min-width: 62px; padding: .16rem .5rem; border-radius: 999px; text-align: center; font-size: .74rem; font-weight: 600; background: var(--panel-2); color: var(--text-faint); border: 1px solid var(--line); } .qui--oui { background: var(--accent-dim); color: var(--accent-soft); border-color: transparent; } .qui--valide { background: var(--warn-dim); color: var(--warn); border-color: transparent; } .droits .table-scroll { --scroll-fond: var(--bg-soft); } .table--droits th { white-space: nowrap; } .table--droits td { padding: .65rem .8rem; } .table--droits td:not(:first-child), .table--droits th:not(:first-child) { text-align: center; } .droits__pied { margin: 1.2rem 0 0; text-align: center; font-size: .84rem; line-height: 1.65; color: var(--text-faint); } @media (max-width: 460px) { .qui { font-size: .71rem; padding: .14rem .4rem; } } .step h3 { font-size: 1.05rem; margin-bottom: .3rem; } .step__label { margin-top: 1.2rem !important; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .liste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; } .liste li { position: relative; padding-left: 1.5rem; font-size: .9rem; line-height: 1.55; color: var(--text-dim); } .liste li::before { position: absolute; left: 0; top: 0; } .liste li strong { color: var(--text); font-weight: 600; } .liste--prerequis li::before { content: "▪"; color: var(--text-faint); } .liste--atouts li::before { content: "✓"; color: var(--ok); font-weight: 700; } .step p { color: var(--text-dim); font-size: .93rem; margin-bottom: 0; } .step p + p { margin-top: .7rem; } /* La commande d'installation, montrée telle qu'on la tape. */ .step__cmd { display: block; margin: .85rem 0; padding: .6rem .75rem; overflow-x: auto; background: #06080b; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .79rem; line-height: 1.5; color: var(--accent-soft); white-space: nowrap; } /* Tarifs */ .pricing { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } .plan { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.5rem; } .plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow); } .plan__tag { position: absolute; top: -11px; left: 1.5rem; padding: .15rem .7rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } /* Le type d'hébergement, au-dessus du nom de l'offre. */ .plan__type { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .plan__type--dedie { color: var(--accent-soft); } .plan--devis { border-style: dashed; } .plan__price--devis strong { font-size: 1.9rem; } .plan h3 { font-size: 1.25rem; margin-bottom: .2rem; } .plan__tagline { color: var(--text-dim); font-size: .92rem; min-height: 2.8em; } .plan__price { display: flex; align-items: baseline; gap: .35rem; margin: 1rem 0 .2rem; } .plan__price strong { font-size: 2.4rem; font-weight: 680; letter-spacing: -.04em; } .plan__price span { color: var(--text-dim); font-size: .95rem; } .plan__save { color: var(--ok); font-size: .85rem; font-weight: 600; min-height: 1.5em; } .plan__specs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; } .plan__specs span { padding: .2rem .6rem; border-radius: 7px; background: var(--panel-2); font: 600 .78rem var(--mono); color: var(--text-dim); } .plan__features { list-style: none; margin: 1.1rem 0 1.6rem; padding: 0; display: grid; gap: .55rem; } .plan__features li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--text-dim); } .plan__features li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; } .plan .btn { margin-top: auto; } .toggle-cycle { display: inline-flex; padding: 4px; margin-bottom: 2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; } .toggle-cycle a { padding: .45rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--text-dim); } .toggle-cycle a:hover { text-decoration: none; color: var(--text); } .toggle-cycle a.is-active { background: var(--accent); color: var(--accent-fg); } /* FAQ */ .faq { display: grid; gap: .7rem; max-width: 48rem; margin-inline: auto; } .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent-soft); font-size: 1.3rem; line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq details[open] summary { margin-bottom: .7rem; } .faq p { color: var(--text-dim); font-size: .95rem; margin: 0; } .faq p + p { margin-top: .7rem; } /* Page FAQ : un sommaire en pastilles, puis les thèmes. */ .faq-sommaire { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.6rem; } .faq-sommaire a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .9rem; color: var(--text-dim); } .faq-sommaire a:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .faq-sommaire a span { min-width: 18px; padding: 0 .3rem; border-radius: 999px; background: var(--accent-dim); color: var(--accent-soft); font-size: .72rem; font-weight: 700; text-align: center; } .faq-theme { margin-bottom: 2.6rem; scroll-margin-top: 5rem; } .faq-theme > h2 { margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); font-size: 1.25rem; } .faq-theme .faq { max-width: none; margin-inline: 0; } /* Appel à l'action */ .cta { text-align: center; padding: clamp(2.4rem, 5vw, 3.6rem) 1.5rem; background: linear-gradient(140deg, rgba(34, 235, 255, .14), rgba(230, 89, 253, .10)); border: 1px solid var(--line); border-radius: 20px; } .cta h2 { margin-bottom: .5rem; } .cta p { color: var(--text-dim); max-width: 40em; margin-inline: auto; } /* Pied de page */ .footer { border-top: 1px solid var(--line-soft); background: var(--bg-soft); padding-top: 3rem; margin-top: 0; } .footer__inner { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; padding-bottom: 2.5rem; } .footer__brand p { color: var(--text-dim); font-size: .92rem; margin-top: .8rem; } .footer__col h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); margin-bottom: .8rem; } .footer__col a { display: block; padding: .22rem 0; color: var(--text-dim); font-size: .93rem; } .footer__col a:hover { color: var(--text); } .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.2rem; border-top: 1px solid var(--line-soft); font-size: .85rem; color: var(--text-faint); } .footer__legal p { margin: 0; } /* Blog : liste des billets */ .posts { display: grid; gap: 1rem; } .post-card { padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s ease; } .post-card:hover { border-color: var(--line-strong); } .post-card__meta { margin: 0 0 .4rem; font-size: .83rem; color: var(--text-faint); } .post-card h2 { font-size: 1.4rem; margin: 0 0 .5rem; } .post-card h2 a { color: var(--text); } .post-card h2 a:hover { color: var(--accent-soft); text-decoration: none; } /* En trois colonnes sur l'accueil, le titre d'un billet est un h3 : la page a déjà son h2 de section, et 1,4 rem serait trop pour une carte étroite. */ .post-card h3 { font-size: 1.1rem; margin: 0 0 .5rem; line-height: 1.3; } .post-card h3 a { color: var(--text); } .post-card h3 a:hover { color: var(--accent-soft); text-decoration: none; } .post-card__chapeau { color: var(--text-dim); margin-bottom: .9rem; font-size: .93rem; } .post-card__lien { font-size: .92rem; font-weight: 560; } .post-head { margin-bottom: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .post-head h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .post-nav a { display: block; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); } .post-nav a:hover { border-color: var(--line-strong); text-decoration: none; } .post-nav a.right { text-align: right; } .post-nav small { display: block; font-size: .78rem; color: var(--text-faint); margin-bottom: .15rem; } .post-nav strong { font-weight: 560; font-size: .95rem; } /* Corps d'un billet : le HTML rendu depuis le Markdown, sans classes à poser. */ .prose { font-size: 1.02rem; line-height: 1.75; color: #d5dae0; } .prose > *:first-child { margin-top: 0; } .prose h2 { margin: 2.2rem 0 .7rem; font-size: 1.5rem; } .prose h3 { margin: 1.8rem 0 .5rem; font-size: 1.2rem; } .prose h4 { margin: 1.5rem 0 .4rem; font-size: 1.02rem; color: var(--text); } .prose p { margin: 0 0 1.1rem; } .prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose li::marker { color: var(--text-faint); } .prose a { text-decoration: underline; text-underline-offset: .18em; } .prose strong { color: var(--text); font-weight: 640; } .prose code { padding: .1rem .35rem; border-radius: 5px; background: var(--panel-2); color: var(--accent-soft); font-size: .88em; } .prose pre { margin: 0 0 1.3rem; padding: 1.1rem 1.2rem; overflow-x: auto; background: #06080b; border: 1px solid var(--line); border-radius: var(--radius); font-size: .86rem; line-height: 1.75; } .prose pre code { padding: 0; background: none; color: #cbd5e1; font-size: inherit; } .prose blockquote { margin: 0 0 1.3rem; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--accent); color: var(--text-dim); } .prose blockquote p { margin: 0; } .prose hr { margin: 2rem 0; } .prose img { border-radius: var(--radius-sm); } .prose figure { margin: 1.6rem 0; } .prose figure img { border: 1px solid var(--line); background: var(--bg-soft); } .prose figcaption { margin-top: .6rem; font-size: .88rem; line-height: 1.6; color: var(--text-faint); text-align: center; } @media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .post-nav a.right { text-align: left; } } /* Pages d'authentification */ /* `padding-block` et non `padding` : la raccourcie remettait les côtés à zéro et écrasait la gouttière de .wrap — sur téléphone, la carte touchait les bords. */ .auth { display: grid; place-items: center; padding-block: clamp(2rem, 6vw, 4rem); } .auth__box { width: 100%; max-width: 460px; } /* L'inscription : assez large pour deux colonnes de champs, pas plus. */ .auth__box--wide { max-width: 560px; } .auth__card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: var(--shadow); } .auth__title { text-align: center; margin-bottom: .3rem; font-size: 1.7rem; } .auth__sub { text-align: center; color: var(--text-dim); margin-bottom: 1.8rem; font-size: .95rem; } .auth__alt { text-align: center; margin-top: 1.4rem; font-size: .92rem; color: var(--text-dim); } /* Connexion : page nue, la carte seule au centre de l'écran. Le logo en tête remplace l'en-tête disparu et reste le chemin du retour vers le site. */ .auth--nue { min-height: 100vh; min-height: 100dvh; } .auth--nue .auth__card { padding-top: clamp(1.8rem, 5vw, 2.6rem); } .auth__logo { display: block; width: 64px; margin: 0 auto 1.8rem; } .auth__logo img { filter: drop-shadow(0 0 18px var(--logo-shadow)); transition: transform .2s ease; } .auth__logo:hover img { transform: scale(1.05); } /* Les deux boutons côte à côte, à parts égales ; padding réduit pour tenir sur un écran de téléphone. */ .auth__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .auth--nue hr { margin: 1.8rem 0 2rem; } .auth__actions--seul { grid-template-columns: 1fr; } /* Lien secondaire sous les boutons (« Mot de passe perdu », « Retour à la connexion »), centré sur toute la largeur de la carte. */ .auth__lien { grid-column: 1 / -1; justify-self: center; margin-top: .2rem; font-size: .95rem; color: var(--text-dim); } .auth__lien:hover { color: var(--accent-soft); text-decoration: underline; } /* Même lien, quand l'action demande un envoi de formulaire (renvoyer un code). */ button.auth__lien { padding: 0; background: none; border: 0; font: inherit; font-size: .95rem; cursor: pointer; } /* Le code à six chiffres : chiffres espacés, lus et recopiés d'un coup d'œil. */ .input--code { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: .5em; text-align: center; text-indent: .5em; padding-block: .6rem; } .auth__note { margin: .2rem 0 0; text-align: center; font-size: .88rem; line-height: 1.55; color: var(--text-faint); } /* Titre et chapeau, sous le logo : pages du mot de passe perdu. */ .auth--nue .auth__title { font-size: 1.4rem; } .auth--nue .auth__sub { margin-bottom: 1.6rem; line-height: 1.55; } .auth__sub strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; } /* Intertitre d'un formulaire long (inscription) : une étiquette, pas un titre. */ .auth__section { margin: 0 0 .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); } .hint--erreur { color: var(--danger); } .auth__note--gauche { text-align: left; margin: .45rem 0 0; } /* Facturation professionnelle : le bloc ne s'ouvre qu'avec l'interrupteur. La règle cible l'état « non coché » : si :has() manque au navigateur, elle est ignorée et les champs restent visibles — jamais inaccessibles. */ .pro-bloc { margin-top: 1rem; } form:has(#pro:not(:checked)) .pro-bloc { display: none; } /* Un interrupteur suivi de son bloc a besoin d'air au-dessus. */ .field + .switch, .form-row + .switch, hr + .switch { margin-top: .4rem; } .auth__actions .btn { padding-inline: 1rem; } /* Machine sur mesure : trois curseurs et le prix qui en découle (commander.php). Sans JavaScript les curseurs restent utilisables et le formulaire part quand même — seul le total en direct manque, et celui du départ reste affiché. */ .sizer { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); padding: 1.1rem 1.2rem; display: grid; gap: 1.1rem; } .sizer__row { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem 3rem; align-items: center; gap: .3rem 1rem; } .sizer__row label { font-weight: 600; } .sizer__row input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; } .sizer__row output { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; } .sizer__unit { color: var(--text-dim); font-size: .85rem; } .sizer__range { grid-column: 2; color: var(--text-dim); font-size: .78rem; margin-top: -.2rem; } .sizer__lines { margin: .2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .35rem; } .sizer__lines > div { display: flex; justify-content: space-between; gap: 1rem; } .sizer__lines dt { color: var(--text-dim); font-size: .88rem; } .sizer__lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .sizer__total { margin-top: .4rem; padding-top: .6rem; border-top: 1px solid var(--line); } .sizer__total dt { color: var(--text); font-weight: 700; font-size: 1rem; } .sizer__total dd { font-weight: 700; font-size: 1.25rem; color: var(--accent); } @media (max-width: 560px) { .sizer__row { grid-template-columns: 1fr auto auto; } .sizer__row input[type="range"] { grid-column: 1 / -1; order: 5; } .sizer__range { grid-column: 1 / -1; order: 6; } } /* Choix d'offre (inscription) */ .picker { display: grid; gap: .7rem; } .picker label { display: flex; align-items: center; gap: .9rem; cursor: pointer; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); transition: border-color .15s ease, background .15s ease; } .picker label:hover { border-color: #33405a; } .picker input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; } .picker input:checked + .picker__body { color: var(--text); } .picker label:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); } .picker__none { border-style: dashed; margin-top: .3rem; } /* Sans `nowrap`, la description plus longue de cette ligne renvoie « Gratuit » à la ligne suivante, désalignant le prix des offres au-dessus. */ .picker__none .picker__body { flex-wrap: nowrap; } .picker__none .picker__body > span:first-child { min-width: 0; } .picker__none .picker__body small { display: block; margin-top: .15rem; } .picker__body { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .picker__body strong { display: block; } .picker__body small { color: var(--text-dim); } /* --- 5. Espace client --------------------------------------------------- */ body.app { display: flex; min-height: 100vh; background: var(--bg); } .side { position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; width: 250px; height: 100vh; flex: none; /* Largeur fixe : rien de ce qu'écrit un client ne doit l'élargir ni déborder. `overflow-x: hidden` ferme la porte aux textes sans espace. */ overflow-y: auto; overflow-x: hidden; padding: 1.1rem .9rem; background: var(--bg-soft); border-right: 1px solid var(--line-soft); } /* En-tête de la barre : la marque, puis à qui appartient le compte et combien de machines il porte. Mène à la page du compte. */ .side__head { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem 1.3rem; color: var(--text); } .side__head:hover { text-decoration: none; } .side__head:hover strong, .side__head.is-active strong { color: var(--accent-soft); } .side__head img { flex: none; filter: drop-shadow(0 0 10px var(--logo-shadow)); } .side__head > span { min-width: 0; } /* autorise la coupure d'un nom trop long */ .side__head strong { display: block; font-size: .95rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; } .side__head small { display: block; font-size: .78rem; color: var(--text-faint); } .side__nav { display: grid; gap: .15rem; min-width: 0; } .side__link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side__link { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 9px; color: var(--text-dim); font-size: .94rem; font-weight: 520; } .side__link:hover { background: var(--panel); color: var(--text); text-decoration: none; } .side__link.is-active { background: var(--accent-dim); color: var(--accent-soft); } .side__icon { width: 1.2em; text-align: center; opacity: .85; } /* Liste des serveurs du compte : un compte peut en louer plusieurs. */ /* `min-height: 0` autorise le rétrécissement de ce bloc flex, `overflow-y` fait alors défiler la liste des machines à l'intérieur : sans lui, sur une fenêtre courte, elle débordait par-dessus le bloc utilisateur. `min-width: 0` joue le même rôle en largeur : sans lui, la largeur minimale d'un élément de grille reste celle de son contenu, et un nom de machine trop long repoussait toute la barre. */ .side__group { margin-top: 1.3rem; display: grid; gap: .3rem; min-height: 0; min-width: 0; overflow-y: auto; align-content: start; } .side__group > * { min-width: 0; } .side__title { display: flex; align-items: center; gap: .45rem; margin: 0 .7rem .3rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .side__empty { margin: .1rem .7rem .3rem; font-size: .82rem; color: var(--text-faint); } .side__add { padding: .4rem .7rem; border-radius: 9px; font-size: .85rem; color: var(--text-faint); } .side__add:hover { color: var(--accent-soft); background: var(--panel); text-decoration: none; } .side__foot { margin-top: auto; flex: none; display: grid; gap: .7rem; padding-top: 1rem; } .side__server { display: flex; align-items: center; gap: .65rem; min-width: 0; color: var(--text); padding: .55rem .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); } .side__server:hover { border-color: var(--line-strong); text-decoration: none; } .side__server.is-active { border-color: var(--accent); background: var(--accent-dim); } .side__server strong { display: block; font-size: .85rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side__server small { display: block; font-size: .76rem; color: var(--text-faint); } .side__server > span:last-child { min-width: 0; overflow: hidden; } .side__logout { display: block; text-align: center; padding: .5rem; font-size: .87rem; color: var(--text-faint); border: 1px solid var(--line); border-radius: 9px; } .side__logout:hover { color: var(--danger); border-color: rgba(248,113,113,.35); text-decoration: none; } /* Bascule thème clair / sombre : même dessin que .toggle-cycle (tarifs), en plus étroit pour tenir dans la barre latérale. */ .theme-toggle { display: flex; gap: 2px; padding: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; } .theme-toggle__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .4rem .5rem; border: 0; border-radius: 7px; font: inherit; font-size: .8rem; font-weight: 600; background: transparent; color: var(--text-faint); cursor: pointer; } .theme-toggle__btn:hover { color: var(--text); } .theme-toggle__btn.is-active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .theme-toggle__icon { font-size: .95rem; line-height: 1; } .app__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Le bouton d'ouverture de la barre latérale, seul rescapé de l'ancien bandeau : invisible tant que la barre est là, il apparaît quand elle s'escamote. */ .nav-burger--app { margin: 1rem 0 0 clamp(1rem, 3vw, 2rem); z-index: 45; background: var(--panel); } .app__content { flex: 1; padding: clamp(1.2rem, 3vw, 2rem); max-width: 1080px; width: 100%; } .app__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 1.2rem clamp(1rem, 3vw, 2rem); margin-top: 2rem; border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: .85rem; } .app__footer p { margin: 0; } .side-toggle, .nav-toggle { display: none; } /* Cartes de chiffres */ .stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.4rem; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .stat__label { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-faint); margin-bottom: .4rem; } .stat__value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; } .stat__hint { font-size: .84rem; color: var(--text-dim); margin-top: .2rem; } .stat a { color: inherit; } /* Une carte de chiffres qui ouvre son détail : elle se comporte comme un bouton. */ a.stat--lien { display: block; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; } a.stat--lien:hover, a.stat--lien:focus-visible { border-color: var(--accent); background: var(--bg-soft); text-decoration: none; } a.stat--lien:hover .stat__action { text-decoration: underline; } .stat__loupe { margin-left: auto; font-size: .95rem; line-height: 1; color: var(--text-faint); } a.stat--lien:hover .stat__loupe { color: var(--accent); } .stat__action { color: var(--accent); } /* Liste des machines : barre de recherche, bascule d'affichage, catégories */ .liste-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .9rem; } .liste-barre__recherche { display: flex; flex: 1; min-width: 260px; gap: .5rem; } .liste-barre__recherche .input { flex: 1; min-width: 0; } /* Deux carrés jumeaux : grille ou liste, l'actif en menthe. */ .liste-vue { display: inline-flex; gap: 4px; padding: 4px; margin-left: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; } .liste-vue a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--text-dim); font-size: 1rem; line-height: 1; } .liste-vue a:hover { background: rgba(255, 255, 255, .06); color: var(--text); text-decoration: none; } .liste-vue a.is-active { background: var(--accent); color: var(--accent-fg); } .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; } /* Les onglets « Actif » / « Inactif » de la liste des machines. */ .onglets { display: flex; gap: .25rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--line); } .onglet { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: -1px; padding: .6rem 1.1rem; border-bottom: 2px solid transparent; color: var(--text-dim); font-weight: 500; } .onglet:hover { color: var(--text); text-decoration: none; } .onglet.is-active { color: var(--accent-soft); border-bottom-color: var(--accent); } .mliste__archive { font-size: .82rem; } .chip { padding: .3rem .75rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .86rem; color: var(--text-dim); } .chip:hover { border-color: var(--line-strong); color: var(--text); text-decoration: none; } .chip.is-active { background: var(--accent-dim); border-color: transparent; color: var(--accent-soft); } /* Intitulé d'un groupe de machines : une étiquette, pas un titre de page. */ .liste-groupe { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .7rem; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .liste-groupe:first-of-type { margin-top: 0; } /* --- Teintes des offres ------------------------------------------------- Chaque gabarit a sa couleur, prise dans le dégradé de la marque : une machine se reconnaît à sa teinte avant même d'en lire le nom. Les composants ne connaissent que `--teinte`, ce qui permet d'ajouter une offre sans toucher à leur style. */ .teinte-menthe { --teinte: 38, 253, 227; } .teinte-cyan { --teinte: 34, 235, 255; } .teinte-indigo { --teinte: 128, 144, 252; } .teinte-magenta { --teinte: 230, 89, 253; } .teinte-neutre { --teinte: 125, 129, 133; } /* Carte d'une machine : la matière ordinaire des cartes. Le fond ne porte plus la couleur de l'offre — la pastille la nomme déjà, en toutes lettres. */ .card--machine { background: var(--panel); border-color: var(--line); } /* L'offre : un aplat plein, encre sombre. C'est le repère de couleur de la page. */ .badge--offre { background: rgb(var(--teinte)); color: #10201d; border-color: transparent; font-weight: 650; letter-spacing: .01em; } /* --- Rien de ce qu'écrit un client ne déforme la mise en page ------------ Nom de machine, catégorie, adresse : au-delà de la place disponible, le texte est coupé par des points de suspension plutôt que de pousser ses voisins. `min-width: 0` est indispensable sur les éléments de grille et de flexbox : sans lui, leur largeur minimale reste celle du contenu, et rien ne se coupe. */ .card--machine .card__head { align-items: flex-start; } .card--machine .card__head > div { min-width: 0; } /* L'état garde sa place entière : c'est au nom de céder, pas à lui. */ .card--machine .card__head > .badge { flex: none; } .card--machine .card__head h3, .machine-sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .machine-offre { max-width: 45%; } .machine-offre > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .liste-groupe { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .liste-groupe .badge { flex: none; } .chip { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Même règle sur la page d'une machine : son nom titre le bandeau et le sélecteur. */ /* Sous le nom, l'adresse — la même ligne pour toutes les machines. */ .machine-sous { margin: .15rem 0 0; font-size: .8rem; color: var(--text-faint); } /* L'offre s'écrit dans le coin de la carte, à même le cadre : les marges négatives annulent le rembourrage, et le coin bas-droit épouse l'arrondi de la carte tandis que le coin haut-gauche l'ouvre comme une étiquette. */ .machine-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: .9rem; } .machine-offre { flex: none; min-height: 38px; margin: 0 -1.4rem -1.4rem 0; padding: .4rem .9rem; border-radius: 10px 0 calc(var(--radius) - 1px) 0; font-size: .8rem; } /* La gestion : un bouton ordinaire, aligné sur le contenu de la carte — l'icône seule, sans libellé, mais avec son intitulé pour l'infobulle et les lecteurs d'écran. */ /* Pas un bouton encadré mais un coin de la carte, jumeau de l'étiquette d'en face : mêmes dimensions, même façon de mordre le cadre, angle intérieur seul arrondi. Sans bordure propre — celle de la carte lui suffit. */ .machine-gerer { display: grid; place-items: center; flex: none; width: 46px; height: 38px; margin: 0 0 -1.4rem -1.4rem; border-radius: 0 10px 0 calc(var(--radius) - 1px); /* Le gris sortait du système de couleurs de la carte : le coin reprend la teinte de l'offre, en retrait, et s'allume en plein au survol. */ background: rgba(var(--teinte), .22); color: rgb(var(--teinte)); transition: background .15s ease, color .15s ease; } .machine-gerer svg { display: block; } .machine-gerer:hover { background: rgb(var(--teinte)); color: #10201d; text-decoration: none; } /* La carte entière mène à l'interface de la machine : un lien étiré par-dessus, sous les deux coins du bas qui gardent leurs propres destinations. */ /* Dans une grille, les cartes s'étirent à la hauteur de la plus haute : sans cela le pied flottait au milieu des cartes courtes, et l'étiquette de l'offre ne touchait le cadre que sur la plus longue. */ .card--machine { position: relative; display: flex; flex-direction: column; } /* Le pied n'a plus de filet : les deux coins suffisent à le détacher. */ .card--machine .card__foot { margin-top: auto; padding-top: .2rem; border-top: 0; } .card--machine:hover { border-color: var(--line-strong); } .card__ouvrir { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card__ouvrir:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -4px; } .machine-pied > * { position: relative; z-index: 2; } /* Lu par les lecteurs d'écran, invisible à l'œil. */ .visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- Jauges de charge --------------------------------------------------- Trois relevés côte à côte, hauts comme deux lignes de texte : sigle et valeur sur la première, piste segmentée sur la seconde. Tout est anguleux et monospacé — l'instrument de mesure, pas la décoration. Le remplissage prend la teinte de l'offre, et bascule vers l'ambre puis le rouge quand ça chauffe. */ .jauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; } .jauge__tete { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; font: 700 .64rem var(--mono); letter-spacing: .14em; color: var(--text-faint); } .jauge__valeur { font: 600 .82rem var(--mono); letter-spacing: 0; color: var(--text); } .jauge__valeur small { font-size: .62rem; color: var(--text-faint); margin-left: 1px; } .jauge__piste { height: 10px; margin-top: .3rem; background: var(--bg-soft); border: 1px solid var(--line-soft); } .jauge__niveau { display: block; height: 100%; background: var(--couleur); /* Le remplissage est débité en barreaux par un masque : des segments nets, sans un élément par cran. Là où le masque manque, la barre reste pleine. */ -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5px); transition: width .3s ease; } /* Les quatre paliers, communs aux deux dessins : la jauge ne connaît qu'une couleur, `--couleur`, et chaque palier la remplace. */ .jauge { --couleur: var(--ok); } .jauge--jaune { --couleur: #facc15; } .jauge--orange { --couleur: #fb923c; } .jauge--rouge { --couleur: var(--danger); } /* Le chiffre ne se colore qu'à partir de l'orange : en deçà, la barre suffit. */ .jauge--orange .jauge__valeur, .jauge--rouge .jauge__valeur { color: var(--couleur); } /* Variante : l'anneau. Même hauteur, même sobriété — un arc de cercle taillé dans un dégradé conique, percé en son milieu par un masque. Le sigle et la valeur se rangent à côté, sur deux lignes. */ .jauges--anneaux .jauge { display: flex; align-items: center; gap: .55rem; } .jauge__anneau { width: 38px; height: 38px; flex: none; border-radius: 50%; background: conic-gradient(var(--couleur) calc(var(--pct) * 1%), var(--panel-2) 0); -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%); mask: radial-gradient(circle, transparent 56%, #000 57%); } .jauge__texte { min-width: 0; } .jauges--anneaux .jauge__sigle { display: block; font: 700 .64rem var(--mono); letter-spacing: .14em; color: var(--text-faint); } .jauges--anneaux .jauge__valeur { display: block; } /* Vue en liste : la valeur seule, sans piste ni anneau — c'est sa couleur qui porte le palier de charge, et la colonne se lit d'un coup d'œil de haut en bas. */ /* Trois colonnes de même largeur et même écart que les en-têtes : chaque valeur tombe sous son sigle. */ .jauges--chiffres { gap: .45rem; margin: 0; } /* Ici, tous les paliers colorent le chiffre — y compris le vert. */ .jauges--chiffres .jauge__valeur { font-size: .86rem; color: var(--couleur); } .jauges--chiffres .jauge__valeur small { color: inherit; opacity: .7; } /* Vue en liste : la grammaire des cartes, mise à plat. Les deux bouts ne sont plus collés au cadre comme dans une carte — sur une bande de 60 px de haut, des blocs pleine hauteur écrasaient la ligne. Ils deviennent un bouton et une pastille, posés dans la marge et centrés avec le reste. */ .mliste { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.1rem; /* Chaque ligne est sa propre grille : sans largeurs fixes, les colonnes se calaient sur le contenu de chaque ligne et ne s'alignaient pas entre elles. Le gabarit est donc défini une fois ici, et l'en-tête s'en sert aussi. */ --colonnes: 34px minmax(0, 1.6fr) minmax(0, 1.15fr) 140px 104px; } .mliste__ligne { position: relative; display: grid; align-items: center; column-gap: 1.2rem; row-gap: .4rem; grid-template-columns: var(--colonnes); min-height: 64px; padding: .8rem 1.2rem; border-top: 1px solid var(--line-soft); color: var(--text); } .mliste__ligne:first-child { border-top: 0; } /* En-tête de colonnes : mêmes colonnes que les lignes, en plus petit, avec les libellés cliquables pour trier. La colonne des charges porte ses trois critères, alignés sur les trois jauges. */ .mliste__entetes { display: grid; align-items: center; column-gap: 1.2rem; grid-template-columns: var(--colonnes); padding: .6rem 1.2rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); } .mliste__entetes-charge { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; } .mliste__tri { color: inherit; white-space: nowrap; } .mliste__tri:hover { color: var(--text); text-decoration: none; } .mliste__tri.is-active { color: var(--accent-soft); } .mliste__ligne:hover { background: rgba(255, 255, 255, .04); } .mliste__ligne > * { min-width: 0; position: relative; z-index: 2; } .mliste__ligne > .badge { min-width: auto; justify-self: start; } /* Le bouton de gestion : carré, dans la teinte en retrait, plein au survol. */ .mliste__gerer { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--teinte), .2); color: rgb(var(--teinte)); transition: background .15s ease, color .15s ease; } .mliste__gerer:hover { background: rgb(var(--teinte)); color: #10201d; text-decoration: none; } .mliste__gerer svg { display: block; } /* L'offre : la même pastille pleine que sur les cartes, taillée pour la ligne. */ .mliste__offre { display: inline-flex; align-items: center; justify-self: start; max-width: 100%; padding: .26rem .7rem; border-radius: 999px; background: rgb(var(--teinte)); color: #10201d; font-size: .78rem; font-weight: 650; white-space: nowrap; } .mliste__offre > span { overflow: hidden; text-overflow: ellipsis; } .mliste__nom strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mliste__nom small { display: block; font-size: .78rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Sur écran étroit : les jauges cèdent la place, le reste tient sur une ligne. */ @media (max-width: 780px) { .mliste { --colonnes: 34px minmax(0, 1fr) 140px 104px; } .mliste__ligne .jauges, .mliste__entetes-charge { display: none; } } @media (max-width: 480px) { /* L'état se lit déjà sur la page de la machine. */ .mliste { --colonnes: 34px minmax(0, 1fr) 96px; } .mliste__ligne { padding-inline: .9rem; column-gap: .8rem; } .mliste__entetes { padding-inline: .9rem; column-gap: .8rem; } .mliste__ligne > .badge, .mliste__entetes > .mliste__tri:nth-last-child(2) { display: none; } }} @media (max-width: 560px) { .liste-vue { margin-left: 0; } .liste-barre__recherche { min-width: 100%; } } /* En-tête de section dans l'app */ .panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .panel-head h2 { margin: 0; font-size: 1.15rem; } /* Page d'une machine : l'identité à gauche, ce que LXD relève à droite. */ .machine-hero { display: grid; gap: 1.4rem 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: start; } .machine-hero__id { min-width: 0; display: grid; gap: .7rem; align-content: start; } .machine-hero__titre { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; } .machine-hero__titre h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .machine-hero__adresse { display: inline-block; max-width: 100%; font-size: .92rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .machine-hero__adresse:hover { color: var(--accent-soft); } /* Le tarif, à côté de l'offre : une pastille sobre, l'offre gardant la couleur. */ .badge--tarif { background: var(--panel-2); color: var(--text); border-color: var(--line); } .badge--tarif svg { display: block; opacity: .8; } /* Les deux commandes de tête : des boutons larges, icône et libellé. */ .machine-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; } .machine-hero__actions .btn { gap: .55rem; } .machine-hero__actions svg { display: block; } /* La colonne de droite : les trois anneaux, puis les repères de la machine. */ .machine-hero__charges { min-width: 0; padding: 1rem 1.1rem; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .machine-hero__charges-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; } .machine-hero__charges-tete .label { margin: 0; } .machine-hero__charges .jauges { margin-bottom: 1rem; } .machine-hero__charges .hint { margin: .7rem 0 0; } @media (max-width: 860px) { .machine-hero { grid-template-columns: 1fr; } } /* Journal d'événements */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 1.1rem 1.5rem; border-left: 1px solid var(--line); } .timeline li:last-child { padding-bottom: 0; border-left-color: transparent; } .timeline li::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line); } .timeline li.is-recent::before { background: var(--accent); border-color: var(--accent); } .timeline strong { display: block; font-weight: 520; font-size: .93rem; } .timeline small { color: var(--text-faint); font-size: .82rem; } /* Actions dangereuses */ .danger-zone { border-color: rgba(248, 113, 113, .3); } .danger-zone h3 { color: var(--danger); } .action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); } .action-row:last-child { border-bottom: 0; padding-bottom: 0; } .action-row:first-child { padding-top: 0; } .action-row__text { flex: 1; min-width: 240px; } .action-row__text strong { display: block; } .action-row__text p { margin: .2rem 0 0; font-size: .89rem; color: var(--text-dim); } /* Carte « ajouter un serveur » : une case vide qui appelle le geste. */ .card--add { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3rem; text-align: center; min-height: 180px; border-style: dashed; color: var(--text-dim); } .card--add:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .card--add__plus { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .4rem; border-radius: 50%; background: var(--accent-dim); color: var(--accent-soft); font-size: 1.3rem; line-height: 1; } .card--add small { color: var(--text-faint); max-width: 24em; } /* En-tête de la page d'une machine : le retour à la liste, puis le sélecteur. */ .machine-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.2rem; } .machine-tete .selecteur { margin-left: auto; } /* Le sélecteur de machine. Un

: il s'ouvre sans JavaScript, et main.js ne fait qu'ajouter la fermeture au clic extérieur et à Échap. */ .selecteur { position: relative; min-width: 0; } .selecteur > summary { display: inline-flex; align-items: center; gap: .55rem; max-width: 20rem; padding: .6rem .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; font-weight: 560; color: var(--text); cursor: pointer; list-style: none; } .selecteur > summary::-webkit-details-marker { display: none; } .selecteur > summary:hover { border-color: var(--line-strong); } .selecteur[open] > summary { border-color: var(--accent); } .selecteur__courant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selecteur .chevron { margin-left: auto; font-size: .8rem; } .selecteur__menu { position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; min-width: 17rem; max-width: min(24rem, 90vw); max-height: 60vh; overflow-y: auto; padding: .3rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .selecteur__item { padding: .2rem; border-radius: 8px; } .selecteur__item:hover { background: rgba(255, 255, 255, .05); } .selecteur__item.is-active { background: var(--accent-dim); } /* Deux liens par entrée : le nom mène à la machine, l'adresse ouvre son interface dans une autre fenêtre. D'où deux liens frères, et non imbriqués. */ .selecteur__machine { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .35rem .45rem .1rem; color: var(--text); font-size: .93rem; font-weight: 560; } .selecteur__machine > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selecteur__machine:hover { text-decoration: none; color: var(--accent-soft); } .selecteur__adresse { display: block; padding: 0 .45rem .35rem 1.45rem; font-size: .78rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .selecteur__adresse:hover { color: var(--accent-soft); } /* Icône d'édition, à côté du nom de la machine. */ .machine-editer { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text-dim); } .machine-editer:hover { background: var(--accent); border-color: transparent; color: var(--accent-fg); text-decoration: none; } .machine-editer svg { display: block; } /* --- Fenêtre modale ----------------------------------------------------- Ouverte par l'ancre (#renommer) : elle fonctionne sans JavaScript, qui ne sert qu'au confort — Échap pour fermer, et la mise au point du champ. */ .modale { display: none; position: fixed; inset: 0; z-index: 100; } .modale:target { display: grid; place-items: center; padding: 1rem; } .modale__fond { position: absolute; inset: 0; background: rgba(8, 10, 12, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modale__boite { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .modale__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .modale__tete h2 { margin: 0 0 .6rem; font-size: 1.15rem; } .modale__fermer { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -.3rem -.3rem 0 0; border-radius: 8px; color: var(--text-dim); font-size: .95rem; } .modale__fermer:hover { background: rgba(255, 255, 255, .07); color: var(--text); text-decoration: none; } .modale__boite .muted { font-size: .9rem; } .modale__boite .btn-row { margin-top: 1.2rem; } /* Boîte de dialogue de confirmation (details/summary) */ .confirm { margin-top: .8rem; } .confirm[open] { padding: 1rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); } .confirm summary { cursor: pointer; } .confirm summary::-webkit-details-marker { display: none; } .confirm summary.btn { display: inline-flex; } /* Facture imprimable */ .invoice { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.4rem); } .invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; } .invoice__head h2 { margin: 0 0 .2rem; } .invoice__parties { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 2rem; } .invoice__parties h4 { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .invoice__parties p { margin: 0; font-size: .93rem; line-height: 1.6; } .invoice__total { margin-left: auto; max-width: 320px; margin-top: 1.4rem; } @media print { body { background: #fff; color: #111; display: block; } .side, .app__footer, .no-print, .topbar, .footer { display: none !important; } .app__content { padding: 0; max-width: none; } .invoice { border: 0; padding: 0; background: #fff; color: #111; } .invoice a, .invoice strong, .invoice h2, .table td, .table th { color: #111 !important; } .table td, .table th { border-color: #ddd !important; } } /* --- Adaptatif ---------------------------------------------------------- */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__texte { padding-top: 0; } .offre { max-width: 420px; margin-inline: auto; } .terminal--mini { max-width: 100%; } .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 780px) { .nav-burger { display: block; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: .2rem; padding: .8rem 20px 1.2rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; } .nav-toggle:checked ~ .nav { display: flex; } .nav > .btn { margin: .3rem 0 0; } /* Dans le panneau mobile, les deux boutons-icônes deviennent des lignes pleine largeur avec leur libellé : une icône seule dans une liste de textes ne dit pas ce qu'elle fait. */ /* Le soulignement de la page active traverserait toute la largeur : la couleur suffit à la signaler dans une liste verticale. */ .nav > a.is-active::after { display: none; } .lang { display: block; margin-top: .3rem; } .icon-btn { width: 100%; justify-content: flex-start; gap: .6rem; margin: .3rem 0 0; padding: 0 .8rem; } .icon-btn__texte { display: inline; font-size: .94rem; font-weight: 520; } .lang__bouton .chevron { margin-left: auto; } .lang__menu { position: static; margin-top: .3rem; min-width: 0; background: var(--bg); box-shadow: none; } /* Espace client : barre latérale escamotable */ body.app { display: block; } .side { position: fixed; z-index: 50; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow); } .side-toggle:checked ~ .side { transform: none; } .nav-burger--app { display: block; margin-left: 0; } .app__main { min-height: 100vh; } } /* Pages d'authentification sur téléphone : tout se resserre d'un cran — carte, logo, titres, traits et boutons. Le texte des champs garde ses 16 px : en dessous, iOS zoome sur le formulaire dès qu'on touche un champ. */ @media (max-width: 560px) { .auth { padding-block: 1.5rem; padding-inline: 16px; } .auth--nue { min-height: 0; } /* plus de centrage forcé sur la hauteur d'écran */ .auth__card { padding: 1.2rem 1.1rem; border-radius: 12px; } .auth__logo { width: 48px; margin-bottom: 1.1rem; } .auth--nue .auth__title { font-size: 1.2rem; } .auth--nue .auth__sub { margin-bottom: 1.1rem; font-size: .9rem; } .auth--nue hr { margin: 1.1rem 0 1.2rem; } .auth__section { margin-bottom: .7rem; } .auth .field { margin-bottom: .8rem; } .auth__actions { gap: .5rem; margin-top: 1rem; } .auth__actions .btn--lg { padding: .7rem 1rem; font-size: .97rem; } .auth__lien, button.auth__lien, .auth__note { font-size: .88rem; } .switch { font-size: .9rem; } .input--code { font-size: 1.15rem; letter-spacing: .4em; text-indent: .4em; } /* Deux boutons côte à côte tiennent encore à 320 px, mais de justesse. */ .auth__actions .btn { padding-inline: .7rem; } } @media (max-width: 560px) { .footer__inner { grid-template-columns: 1fr; } .deflist > div { flex-direction: column; gap: .1rem; } .deflist dd { text-align: left; } .plan__price strong { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Bandeau d'information de l'exploitation (réglé depuis allkin-admin) et messages de suspension (commandes, inscriptions). Contenu en Markdown : voir includes/markdown.php. -------------------------------------------------------------------------- */ .banner { background: var(--info-dim); border-bottom: 1px solid rgba(56,189,248,.35); color: #bae6fd; font-size: .92rem; line-height: 1.45; } :root[data-theme="light"] .banner { color: #075985; } .banner__inner { max-width: 72rem; margin: 0 auto; padding: .55rem 1rem; text-align: center; } .banner__msg { margin: .15rem 0; } .banner a { color: inherit; text-decoration: underline; } .banner code { font-size: .9em; } /* Message de suspension : un bloc de texte mis en forme, pas une simple ligne. */ .notice p, .notice ul, .notice ol { margin: 0 0 .7rem; } .notice > :last-child { margin-bottom: 0; } .notice ul, .notice ol { padding-left: 1.3rem; } .notice h3, .notice h4, .notice h5 { margin: 0 0 .5rem; font-size: 1rem; } .notice a { color: inherit; text-decoration: underline; }