/* =========================================================================
DILITECH — feuille de style unique
=========================================================================
IDENTITÉ (charte graphique officielle, février 2025)
Bleu marine #302784 — fiabilité, sécurité, sérieux
Bleu clair #009FE3 — innovation, modernité, high-tech
Typographie Montserrat, en Bold (700/800) ET ExtraLight (200)
L'IDÉE DIRECTRICE
Le logo Dilitech est construit sur un contraste : « DILI » en gras
marine, « TECH » en très maigre. On a fait de ce contraste la règle
typographique de tout le site : chaque grand titre est coupé en deux,
une moitié grasse et une moitié maigre bleu clair. Le site parle donc
la même langue que son logo, à chaque section.
Deuxième reprise du logo : le disque encadré de deux barres. Il devient
le visuel du hero, et le motif des séparateurs.
Troisième : la coupe en diagonale, présente sur tous les supports de la
charte (plaquettes, kakémonos, affichage). Elle ferme ici chaque
surface sombre.
CONTRASTES — vérifiés, pas devinés
#302784 sur blanc ....... 13,0:1 ✔ tout usage
#009FE3 sur blanc ........ 3,0:1 ✘ interdit en petit texte
#00719F sur blanc ........ 5,0:1 ✔ c'est LUI pour les petits labels
#009FE3 sur #302784 ...... 4,4:1 ✔ gros texte et interface seulement
#4FC3F0 sur #302784 ...... 6,4:1 ✔ petits labels sur fond sombre
#545A73 sur blanc ........ 6,8:1 ✔ texte courant secondaire
RYTHME DES PAGES
blanc → brume → blanc → ancre marine → blanc → brume → pied marine.
Jamais plus de trois ancres sombres : elles doivent rester des repères.
========================================================================= */
/* =========================================================================
1. JETONS
========================================================================= */
:root {
/* --- marine --- */
--navy: #302784;
--navy-clair:#3A2F9B;
--navy-2: #241C63;
--navy-3: #1A1247;
--navy-ink: #100B33;
/* --- bleu clair --- */
--cyan: #009FE3;
--cyan-2: #4FC3F0; /* petits labels sur fond sombre */
--cyan-3: #9BDDF7;
--cyan-ink: #00719F; /* petits labels sur fond clair */
/* --- surfaces ---
Site basculé en sombre à la demande du client, sur le modèle du hero
(voir --nuit ci-dessous) : « papier » et « brume » n'écrivent plus du
texte foncé sur fond clair mais des surfaces claires sur fond sombre.
Les jetons gardent leurs noms (repris partout dans le CSS) ; seules
leurs valeurs s'inversent. */
--paper: #12111D; /* cartes, panneaux — la surface « élevée » */
--mist: #0B0A14; /* variante légèrement en retrait de --paper */
--mist-2: #191730; /* variante légèrement au-dessus de --paper */
/* --- encres --- */
--tx-1: #F4F5FA;
--tx-2: #B9BCDA;
--tx-3: #8A8FB5;
--sur-sombre: #FFFFFF;
--sur-sombre-2: #C6C9E4;
--sur-sombre-3: #9296C4;
/* --- traits --- */
--line: rgba(255, 255, 255, .14);
--line-2: rgba(255, 255, 255, .07);
--line-s: rgba(255, 255, 255, .16);
--line-s2:rgba(255, 255, 255, .08);
/* --- signaux --- */
--wa: #25D366;
--wa-ink: #0B7A3B;
--promo: #D6165A;
--promo-clair: #FF7BA8;
--ok: #12885A;
--alerte: #B4560A;
/* Le fond sombre de la marque : halo cyan en haut à droite, halo marine
en bas, sur une base qui va au noir quasi pur plutôt qu'au marine clair
— mis au point sur le hero de l'accueil (le premier essai restait un
dégradé marine/violet trop lumineux, voir claudeprompt.md), puis repris
ici pour que toutes les sections sombres du site s'accordent avec lui. */
--nuit:
radial-gradient(760px 520px at 88% -14%, rgba(0, 159, 227, .16) 0%, transparent 62%),
radial-gradient(620px 460px at 4% 108%, rgba(48, 39, 132, .28) 0%, transparent 60%),
linear-gradient(158deg, #0a0714 0%, #050308 45%, #000000 100%);
/* Fond générique des sections et de la page. Identique à --nuit en mode
nuit (le site reste exactement ce qu'il était) ; seul lui bascule en
mode jour. --nuit, lui, ne change jamais : il reste la couleur des
bandes d'accent (.nuit — hero, « pourquoi », « parc », « comment ça se
passe ») et du pied de page, sombres dans les deux thèmes — le même
parti pris que le catalogue Toguna, qui garde ses panneaux marine
dans ses deux thèmes. */
--fond: var(--nuit);
/* RVB du texte et des traits posés sur fond sombre (voir thème jour). */
--sur-rgb: 255, 255, 255;
/* Voile de la barre de navigation une fois posée (au défilement). */
--nav-fond: rgba(10, 9, 17, .78);
/* --- typographie --- */
--font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* --- métrique --- */
--wrap: 1280px;
--nav-h: 70px;
--pad: clamp(18px, 4.5vw, 40px);
--r: 14px; /* rayon courant */
--r-s: 9px;
--coupe: clamp(28px, 4vw, 62px); /* profondeur des coupes en diagonale */
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-net: cubic-bezier(.65, 0, .35, 1);
/* Courbe « premium » : accélération nette puis arrivée très douce — celle
qu'on retrouve sur les interfaces soignées (Linear, Vercel, Toguna). */
--ease-expo: cubic-bezier(.16, 1, .3, 1);
/* Petit rebond, réservé aux micro-interactions (boutons, pastilles). */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
/* --- lueurs --- */
--glow-cyan: rgba(0, 159, 227, .45);
--glow-cyan-doux: rgba(0, 159, 227, .22);
color-scheme: dark;
}
/* ---------------------------------------------------------------------
Thème jour — posé par `data-theme="light"` sur (script anti-flash
en tête de chaque page + activerBasculeTheme() dans js/core/ui.js).
TOUT passe au clair, hero et bandes d'accent compris (demande du client) :
même --nuit et les jetons « sur fond sombre » (--sur-sombre*, --cyan-2,
--sur-rgb) basculent, donc les composants pensés pour le sombre suivent
sans règle à part. Seuls le marine et le cyan de marque ne bougent pas.
--------------------------------------------------------------------- */
:root[data-theme="light"] {
--fond: #FFFFFF;
--nav-fond: rgba(255, 255, 255, .86);
/* Les anciennes bandes sombres : un blanc à peine teinté, les halos
cyan/marine du mode nuit réduits à une trace — assez pour que le hero
et les bandes d'accent se distinguent encore des sections unies. */
--nuit:
radial-gradient(760px 520px at 88% -14%, rgba(0, 159, 227, .09) 0%, transparent 62%),
radial-gradient(620px 460px at 4% 108%, rgba(48, 39, 132, .07) 0%, transparent 60%),
linear-gradient(158deg, #F8F9FD 0%, #FFFFFF 50%, #F4F6FB 100%);
--paper: #FFFFFF;
--mist: #F4F5FA;
--mist-2: #E9EBF4;
--tx-1: #14131F;
--tx-2: #474A66;
--tx-3: #6B6E8E;
--sur-sombre: #14131F;
--sur-sombre-2: #474A66;
--sur-sombre-3: #6B6E8E;
/* composantes RVB du texte/des traits « sur fond sombre », utilisées en
rgba(var(--sur-rgb), .x) : blanc la nuit, encre marine le jour. */
--sur-rgb: 20, 19, 50;
/* le cyan « petits labels sur fond sombre » devient celui « sur fond
clair » (--cyan-ink, 5:1 sur blanc) */
--cyan-2: #00719F;
--line: rgba(20, 19, 50, .14);
--line-2: rgba(20, 19, 50, .08);
--line-s: rgba(20, 19, 50, .16);
--line-s2:rgba(20, 19, 50, .08);
--glow-cyan: rgba(0, 159, 227, .18);
--glow-cyan-doux: rgba(0, 159, 227, .12);
color-scheme: light;
}
/* Composants dont le fond sombre est écrit en dur (dégradés, voiles
translucides) plutôt qu'en jeton : leur pendant clair, groupé ici pour
qu'on voie d'un coup d'œil tout ce que le mode jour réécrit. */
:root[data-theme="light"] .site-pied { background: var(--mist); }
:root[data-theme="light"] .motif { filter: invert(1); }
:root[data-theme="light"] .halos--hero { mix-blend-mode: normal; opacity: .45; }
:root[data-theme="light"] .hero__media-vignette { display: none; }
:root[data-theme="light"] .hero__media-shadow { opacity: .3; }
:root[data-theme="light"] .cta-pill:hover { background: var(--tx-1); color: #fff; border-color: var(--tx-1); }
:root[data-theme="light"] .bento__tile {
background:
radial-gradient(240px 180px at 88% -12%, rgba(0, 159, 227, .10) 0%, transparent 62%),
linear-gradient(160deg, #FFFFFF 0%, #F5F6FB 100%);
box-shadow: 0 18px 40px -32px rgba(18, 19, 43, .3);
}
:root[data-theme="light"] .bento__tile--d {
background:
radial-gradient(560px 400px at 50% -14%, rgba(0, 159, 227, .26) 0%, rgba(0, 159, 227, .07) 45%, transparent 74%),
linear-gradient(180deg, #FFFFFF 0%, #F3F5FB 100%);
}
:root[data-theme="light"] .bento__badge-nb {
background: linear-gradient(160deg, #FFFFFF 0%, #EEF0F7 100%);
box-shadow: 0 14px 26px -16px rgba(18, 19, 43, .3);
}
:root[data-theme="light"] .bento__recu,
:root[data-theme="light"] .bento__chips span { box-shadow: 0 12px 24px -16px rgba(18, 19, 43, .3); }
:root[data-theme="light"] .bento__carte-pill { background: rgba(255, 255, 255, .88); color: var(--tx-1); }
/* cyan plein au survol : texte blanc plutôt que marine sur le cyan foncé du jour */
:root[data-theme="light"] .bento__tile--a:hover .bento__fleche,
:root[data-theme="light"] .contact-carte:hover .contact-carte__fleche { color: #fff; }
:root[data-theme="light"] .carte__illus { filter: drop-shadow(0 10px 22px rgba(18, 19, 43, .16)); }
:root[data-theme="light"] .siege__stat--large {
background: linear-gradient(135deg, rgba(0, 159, 227, .10), rgba(48, 39, 132, .08));
border: 1px solid rgba(0, 159, 227, .25);
}
:root[data-theme="light"] .contact-carte {
background: var(--paper);
box-shadow: 0 12px 30px -24px rgba(18, 19, 43, .3);
}
:root[data-theme="light"] .pied-contact .contact-carte {
background:
var(--paper) padding-box,
linear-gradient(120deg, rgba(var(--sur-rgb), .12), rgba(var(--sur-rgb), .12)) border-box;
}
:root[data-theme="light"] .pied-contact .contact-carte:hover {
background:
var(--paper) padding-box,
linear-gradient(120deg, var(--cyan), #302784) border-box;
}
:root[data-theme="light"] .pied-contact__form,
:root[data-theme="light"] .contact__form form {
background: var(--paper);
box-shadow: 0 0 0 1px rgba(18, 19, 43, .03), 0 20px 44px -28px rgba(18, 19, 43, .28);
}
:root[data-theme="light"] .arg:hover {
box-shadow: inset 0 1px 0 rgba(var(--sur-rgb), .16), 0 22px 40px -26px rgba(18, 19, 43, .28);
}
/* Motif « circuit » : points aux intersections et amorces de pistes.
Unique ornement des surfaces sombres, posé à très faible opacité. */
.circuit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M0 18h20M28 18h44M18 0v12M18 24v48M54 0v30M54 38v34M0 54h30M38 54h34'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='18' cy='18' r='2.4'/%3E%3Ccircle cx='54' cy='54' r='2.4'/%3E%3Ccircle cx='54' cy='34' r='1.6'/%3E%3Ccircle cx='34' cy='18' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
background-size: 72px 72px;
}
/* Grain fin superposé aux surfaces sombres les plus en vue (hero, appel
final) : bruit fractal en SVG, sans dépendance, quasi imperceptible mais
ce qui casse l'effet « dégradé plat » d'un fond uni et donne la texture
qu'ont les interfaces travaillées. */
.grain { position: relative; }
.grain::after {
content: "";
position: absolute; inset: 0;
/* Doit peindre SOUS le contenu statique (.wrap) : dans l'ordre de
peinture CSS, un élément positionné à z-index:auto passe pourtant
AU-DESSUS du flux statique — seul un z-index négatif le repasse
dessous, comme .motif un peu plus haut. */
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: .05;
pointer-events: none;
}
/* Halos flous en dérive lente : la profondeur des sections sombres vient de
ces taches de lumière qui bougent, pas d'un dégradé figé. Chaque halo est
une simple pastille radiale + flou, animée en transform (peu coûteux). */
.halos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.halo {
position: absolute;
border-radius: 50%;
filter: blur(72px);
opacity: .5;
will-change: transform;
animation: derive 22s var(--ease) infinite alternate;
}
.halo--1 {
width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
top: -14%; right: -8%;
background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
animation-duration: 26s;
}
.halo--2 {
width: 36vw; height: 36vw; max-width: 480px; max-height: 480px;
bottom: -18%; left: -6%;
background: radial-gradient(circle, var(--navy-clair) 0%, transparent 72%);
opacity: .6;
animation-duration: 32s;
animation-delay: -6s;
}
.halo--3 {
width: 24vw; height: 24vw; max-width: 320px; max-height: 320px;
top: 38%; left: 32%;
background: radial-gradient(circle, var(--cyan-2) 0%, transparent 74%);
opacity: .32;
animation-duration: 19s;
animation-delay: -11s;
}
@keyframes derive {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(4%, -6%, 0) scale(1.14); }
}
/* =========================================================================
2. BASES
========================================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* `clip` et non `hidden` : `hidden` créerait un conteneur de défilement et
casserait le `position: sticky` de la barre de navigation. */
overflow-x: clip;
}
body {
font-family: var(--font);
font-size: 16px;
font-weight: 400;
line-height: 1.68;
color: var(--tx-1);
/* Simple filet de sécurité pour les quelques pixels qui ne sont couverts
par aucune section (marges des coupes en diagonale, notamment) : chaque
section peint désormais son propre fond (voir la règle `section` plus
bas), donc pas besoin ici de `background-attachment: fixed` — fragile
sur mobile (Safari iOS en particulier gère mal cette propriété). */
background: var(--fond);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.defilement-bloque { position: fixed; width: 100%; overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--cyan); color: #fff; }
:focus-visible {
outline: 3px solid var(--cyan);
outline-offset: 3px;
border-radius: 3px;
}
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Chaque section peint sa propre instance du dégradé du hero (var(--nuit))
plutôt que de compter sur un fond de page fixe : plus fiable (certains
navigateurs mobiles gèrent mal `background-attachment: fixed`) et surtout
plus riche — chaque section garde son propre halo, pas seulement celle
qui atterrit au bon endroit dans un dégradé figé. `.sec--brume` (fond
légèrement différent) et `.nuit` (déjà ce même dégradé) restent
prioritaires, cette règle ne les concerne pas. */
section {
position: relative; isolation: isolate;
padding-block: clamp(64px, 8.5vw, 122px);
background: var(--fond);
transition: background-color .4s var(--ease);
}
.sec--brume { background: var(--mist); }
.sec--serre { padding-block: clamp(48px, 6vw, 84px); }
/* --- lueur qui suit le curseur, posée sur chaque section --------------
Même mécanique que le spotlight du hero (--mx/--my posés par
activerLueurSections() dans js/core/ui.js), généralisée à tout le site :
survoler n'importe quelle section fait apparaître le même halo cyan
discret. `isolation: isolate` (ci-dessus) garde le z-index négatif
confiné à la section, sans passer sous les sections voisines. */
section::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), var(--glow-cyan-doux), transparent 62%);
opacity: 0; transition: opacity .5s var(--ease);
}
section:hover::before { opacity: 1; }
@media (pointer: coarse) { section::before { display: none; } }
/* --- icônes ------------------------------------------------------------ */
.ic {
display: inline-flex; flex: none;
width: 1.15em; height: 1.15em;
vertical-align: -.22em;
}
.ic svg { width: 100%; height: 100%; }
/* =========================================================================
3. TYPOGRAPHIE ÉDITORIALE
========================================================================= */
/* Le contraste gras / très maigre du logo, appliqué aux titres.
Le bon matériel, pour le bon usage.
*/
.titre {
font-weight: 800;
font-size: clamp(1.95rem, 4.6vw, 3.35rem);
line-height: 1.06;
letter-spacing: -.03em;
color: var(--tx-1);
text-wrap: balance;
}
.titre em {
font-style: normal;
font-weight: 200;
color: var(--cyan-ink);
}
.titre--geant { font-size: clamp(2.4rem, 6.6vw, 4.6rem); }
.titre--petit { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
/* Sur fond sombre : le maigre passe au bleu clair lisible. */
.sur-nuit .titre,
.sur-nuit .titre em { color: var(--sur-sombre); }
.sur-nuit .titre em { color: var(--cyan-2); font-weight: 200; }
.surtitre {
display: inline-flex; align-items: center; gap: 11px;
font-size: .69rem; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--cyan-ink);
margin-bottom: 16px;
}
.surtitre::before {
content: ""; width: 26px; height: 2px;
background: currentColor; opacity: .75;
}
.sur-nuit .surtitre { color: var(--cyan-2); }
.chapeau {
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 400;
color: var(--tx-2);
max-width: 62ch;
margin-top: 18px;
}
.sur-nuit .chapeau { color: var(--sur-sombre-2); }
.tete-sec { margin-bottom: clamp(34px, 4.5vw, 58px); }
.tete-sec--centre { text-align: center; }
.tete-sec--centre .surtitre { justify-content: center; }
.tete-sec--centre .chapeau { margin-inline: auto; }
/* En-tête à deux colonnes : titre à gauche, lien d'action à droite. */
.tete-duo {
display: flex; flex-wrap: wrap; align-items: flex-end;
justify-content: space-between; gap: 22px;
margin-bottom: clamp(30px, 4vw, 52px);
}
/* Séparateur repris du logo : barre · disque · barre. */
.signe-sep {
display: flex; align-items: center; justify-content: center; gap: 9px;
margin: 34px auto;
}
.signe-sep i { display: block; width: 3px; height: 17px; border-radius: 2px; background: var(--cyan); }
.signe-sep b { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); }
/* =========================================================================
4. SURFACES SOMBRES ET COUPES
========================================================================= */
.nuit {
position: relative;
background: var(--nuit);
color: var(--sur-sombre);
isolation: isolate;
}
.nuit > .motif {
position: absolute; inset: 0; z-index: -1;
opacity: .052; pointer-events: none;
}
/* La diagonale de la charte, en bas et/ou en haut des blocs sombres. */
.coupe-bas { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), 0 100%); }
.coupe-haut { clip-path: polygon(0 var(--coupe), 100% 0, 100% 100%, 0 100%); }
.coupe-duo { clip-path: polygon(0 var(--coupe), 100% 0, 100% calc(100% - var(--coupe)), 0 100%); }
/* Un bloc coupé en bas mord sur le suivant : on compense la marge. */
.coupe-bas + * { margin-top: calc(var(--coupe) * -.35); }
/* =========================================================================
5. LOGO
========================================================================= */
.marque { display: inline-flex; align-items: center; gap: 11px; }
.marque__signe {
width: auto; height: 26px;
fill: var(--tx-1);
flex: none;
}
.marque__mot {
font-size: 1.42rem;
letter-spacing: .012em;
line-height: 1;
white-space: nowrap;
}
.marque__mot b { font-weight: 800; color: var(--tx-1); }
.marque__mot i { font-style: normal; font-weight: 200; color: var(--cyan); }
/* Déclinaison sur fond sombre : le signe passe en blanc. */
.nuit .marque__signe, .site-pied .marque__signe { fill: var(--sur-sombre); }
.nuit .marque__mot b, .site-pied .marque__mot b { color: var(--sur-sombre); }
.nuit .marque__mot i, .site-pied .marque__mot i { color: var(--cyan-2); }
/* Logo principal de la charte (février 2025) : oreillettes bleu clair,
tête marine, « DILI » marine gras, « TECH » bleu clair fin. Le site est en
mode jour partout (nav, menu, pied clairs) : il s'applique à tout logo
complet (`.marque`). Le signe seul des avatars, blanc sur pastille marine,
n'est pas dans un `.marque` et garde son `fill` d'ensemble. */
:root[data-theme="light"] .marque .marque__barre { fill: var(--cyan); }
:root[data-theme="light"] .marque .marque__tete { fill: var(--navy); }
:root[data-theme="light"] .marque .marque__mot b { color: var(--navy); }
:root[data-theme="light"] .marque .marque__mot i { color: var(--cyan); }
.marque--pied .marque__signe { height: 30px; }
.marque--pied .marque__mot { font-size: 1.6rem; }
/* =========================================================================
6. BOUTONS
========================================================================= */
/* Coins courts plutôt que la pilule complète, et plus ni reflet balayant
ni lever + ombre colorée ni halo suiveur de curseur au survol (les trois
étaient le même réflexe « gabarit générique » repéré sur le bouton du
hero — voir claudeprompt.md) : un simple éclaircissement, partout. */
.btn {
--btn-fond: var(--navy);
--btn-txt: #fff;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 13px 22px;
border-radius: 8px;
font-size: .89rem; font-weight: 700; letter-spacing: .01em;
background: var(--btn-fond); color: var(--btn-txt);
border: 1.5px solid transparent;
transition: filter .25s var(--ease), background-color .2s var(--ease),
color .2s var(--ease), border-color .2s var(--ease);
white-space: nowrap;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(.96); }
.btn--plein { --btn-fond: var(--navy); }
.btn--cyan { --btn-fond: var(--cyan); --btn-txt: #04263A; }
.btn--wa { --btn-fond: var(--wa); --btn-txt: #042A15; }
.btn--large { width: 100%; padding: 15px 24px; font-size: .95rem; }
.btn--ligne {
--btn-fond: transparent; --btn-txt: var(--navy);
border-color: var(--line);
}
.btn--ligne:hover { filter: none; border-color: var(--navy); background: rgba(48, 39, 132, .05); }
.sur-nuit .btn--ligne, .nuit .btn--ligne {
--btn-txt: var(--sur-sombre); border-color: var(--line-s);
}
.sur-nuit .btn--ligne:hover, .nuit .btn--ligne:hover {
background: rgba(var(--sur-rgb), .1); border-color: rgba(var(--sur-rgb), .45);
}
/* Lien fléché : l'action discrète des en-têtes de section. */
.lien-fleche {
display: inline-flex; align-items: center; gap: 8px;
font-size: .85rem; font-weight: 700;
color: var(--cyan-ink);
border-bottom: 1.5px solid transparent;
padding-bottom: 2px;
transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.lien-fleche:hover { gap: 13px; border-color: currentColor; }
.sur-nuit .lien-fleche { color: var(--cyan-2); }
/* =========================================================================
7. EN-TÊTE
========================================================================= */
/* La nav flotte désormais par-dessus le contenu (position: fixed) plutôt que
de rester dans le flux (sticky) : c'est ce qui permet à une bande sombre
de départ (hero, entête de page) de commencer à y = 0 et de se voir juste
derrière une nav transparente, comme chez VP/EventMotors, au lieu d'être
coupée net par une barre blanche opaque. `#contenu` compense l'espace que
la nav ne réserve plus — sauf quand la première section est justement
cette bande sombre, qui veut occuper tout l'écran depuis le sommet. */
.site-entete {
position: fixed; top: 0; left: 0; right: 0; z-index: 800; display: block;
transition: transform .35s var(--ease-expo);
}
/* Cachée pendant qu'on descend (activerChromeDePage, js/core/ui.js). */
.site-entete.est-cachee { transform: translateY(-100%); }
#contenu { padding-top: var(--nav-h); }
.site-entete--sombre ~ #contenu { padding-top: 0; }
/* --- barre de navigation --- */
.nav {
position: relative; z-index: 810;
background: var(--nav-fond);
backdrop-filter: blur(18px) saturate(1.6);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), box-shadow .4s var(--ease-expo), background-color .3s var(--ease);
}
.site-entete.est-pose .nav {
border-bottom-color: var(--line-2);
box-shadow: 0 20px 40px -28px rgba(18, 19, 43, .4);
}
/* --- nav en surimpression sur une bande sombre --------------------------
Transparente et texte clair tant qu'on n'a pas défilé (la bande sombre se
voit à travers), puis se solidifie exactement comme la nav normale une
fois `.est-pose` posée par activerChromeDePage(). */
.site-entete--sombre .nav {
background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-entete--sombre:not(.est-pose) .nav__liens a,
.site-entete--sombre:not(.est-pose) .nav__ico,
.site-entete--sombre:not(.est-pose) .marque__mot b { color: rgba(var(--sur-rgb), .92); }
.site-entete--sombre:not(.est-pose) .marque__mot i { color: var(--cyan-2); }
.site-entete--sombre:not(.est-pose) .marque__signe { fill: var(--sur-sombre); }
.site-entete--sombre:not(.est-pose) .nav__liens a[aria-current="page"],
.site-entete--sombre:not(.est-pose) .nav__liens a:hover { color: var(--sur-sombre); }
.site-entete--sombre:not(.est-pose) .nav__ico:hover { background: rgba(var(--sur-rgb), .14); color: var(--sur-sombre); }
.site-entete--sombre.est-pose .nav {
background: var(--nav-fond);
backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
transition: background-color .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease);
}
/* Filet dégradé, plus vivant qu'une bordure unie — la même idée que le
soulignement animé des liens, posée une fois pour toute la barre. */
.site-entete.est-pose .nav::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan) 50%, transparent);
opacity: .5;
}
.nav__in {
height: var(--nav-h);
display: flex; align-items: center; gap: 22px;
}
.nav__logo { flex: none; }
.nav__liens {
display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
margin-inline: auto;
}
.nav__liens a {
position: relative;
font-size: .875rem; font-weight: 600;
color: var(--tx-2);
padding-block: 6px;
transition: color .2s var(--ease);
}
.nav__liens a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--cyan);
transform: scaleX(0); transform-origin: left;
transition: transform .28s var(--ease);
}
.nav__liens a:hover { color: var(--tx-1); }
.nav__liens a:hover::after { transform: scaleX(1); }
.nav__liens a[aria-current="page"] { color: var(--tx-1); font-weight: 700; }
.nav__liens a[aria-current="page"]::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 9px; flex: none; }
.nav__ico {
display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 50%;
color: var(--tx-2);
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__ico:hover { background: var(--mist); color: var(--tx-1); }
.nav__ico .ic { width: 20px; height: 20px; }
/* --- bascule jour / nuit : on montre le mode vers lequel on va --------
En nuit, le soleil (« passer en jour ») ; en jour, la lune. Même
principe que le bouton du catalogue Toguna. */
.bascule-theme { position: relative; }
.bascule-theme__lune { display: none; }
:root[data-theme="light"] .bascule-theme__soleil { display: none; }
:root[data-theme="light"] .bascule-theme__lune { display: inline-flex; }
/* `overflow: visible` : la pastille de compte (span positionné hors de la
boîte, top/right négatifs) serait autrement rognée par le `overflow:
hidden` que `.btn` pose pour le reflet au survol. */
.btn--devis { position: relative; overflow: visible; padding: 11px 18px; font-size: .84rem; }
/* Sans le rognage de `.btn`, le reflet en losange dépasserait des coins très
arrondis de cette pilule compacte : on le retire plutôt que de le laisser
déborder en carré. */
.btn--devis::before { content: none; }
.btn--devis .ic { width: 18px; height: 18px; }
.site-entete.a-selection .btn--devis { --btn-fond: var(--cyan); --btn-txt: #04263A; }
.pastille {
position: absolute; top: -5px; right: -5px;
min-width: 21px; height: 21px; padding: 0 6px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--promo); color: #fff;
font-size: .68rem; font-weight: 800; line-height: 1;
border: 2px solid #fff;
animation: pastille-pop .32s var(--ease);
}
/* `display: grid` l'emporterait sur l'attribut `hidden` : on le neutralise. */
.pastille[hidden] { display: none; }
@keyframes pastille-pop { from { transform: scale(.4); } to { transform: scale(1); } }
.nav__burger { display: none; }
/* --- menu mobile --- */
.menu {
position: fixed; inset: 0; z-index: 900;
background: var(--nuit);
color: var(--sur-sombre);
overflow-y: auto;
padding: calc(var(--nav-h) + 24px) var(--pad) 40px;
animation: menu-entre .3s var(--ease);
}
/* Le panneau couvre tout l'écran ; la barre doit rester AU-DESSUS de lui,
sinon le bouton de fermeture devient intouchable au doigt (le panneau
intercepte le clic) et le menu ne se referme plus qu'au clavier. */
.site-entete.menu-ouvert .nav { z-index: 910; background: transparent; backdrop-filter: none; }
.site-entete.menu-ouvert .nav,
.site-entete.menu-ouvert .nav.est-pose { border-color: transparent; box-shadow: none; }
.site-entete.menu-ouvert .marque__signe { fill: var(--sur-sombre); }
.site-entete.menu-ouvert .marque__mot b { color: var(--sur-sombre); }
.site-entete.menu-ouvert .marque__mot i { color: var(--cyan-2); }
.site-entete.menu-ouvert .nav__burger { color: var(--sur-sombre); }
.site-entete.menu-ouvert .nav__burger:hover { background: rgba(var(--sur-rgb), .14); }
.site-entete.menu-ouvert .btn--devis { --btn-fond: rgba(var(--sur-rgb), .14); --btn-txt: var(--sur-sombre); }
@keyframes menu-entre { from { opacity: 0; transform: translateY(-8px); } }
.menu__in { max-width: 520px; margin-inline: auto; display: grid; gap: 30px; }
.menu__liens { display: grid; }
.menu__liens a {
display: flex; align-items: center; justify-content: space-between;
padding: 17px 2px;
font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em;
border-bottom: 1px solid var(--line-s2);
animation: menu-ligne .42s var(--ease) backwards;
animation-delay: calc(var(--i) * 40ms);
}
@keyframes menu-ligne { from { opacity: 0; transform: translateX(-14px); } }
.menu__liens a[aria-current="page"] { color: var(--cyan-2); }
.menu__liens .ic { width: 18px; height: 18px; opacity: .45; }
.menu__titre {
font-size: .69rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--cyan-2); margin-bottom: 12px;
}
.menu__cats { display: flex; flex-wrap: wrap; gap: 9px; }
.menu__cats a {
padding: 9px 15px; border-radius: 999px;
border: 1px solid var(--line-s);
font-size: .82rem; font-weight: 600;
}
.menu__cats a:hover { background: rgba(var(--sur-rgb), .1); }
.menu__pied { display: grid; gap: 14px; margin-top: clamp(40px, 8vh, 72px); }
.menu__tel {
display: inline-flex; align-items: center; gap: 9px; justify-content: center;
font-weight: 700; color: var(--cyan-2);
}
.menu__theme {
display: inline-flex; align-items: center; gap: 9px; justify-content: center;
padding: 12px; border-radius: 999px;
border: 1px solid rgba(var(--sur-rgb), .16);
font-weight: 600; color: var(--sur-sombre-2);
}
.menu__theme:hover { background: rgba(var(--sur-rgb), .08); color: var(--sur-sombre); }
/* =========================================================================
8. HERO
========================================================================= */
/* --- entrée animée, une seule fois au chargement ------------------------
Indépendante du système `.reveal` (qui attend le défilement) : le hero
est déjà visible à l'ouverture de la page, il doit jouer tout de suite. */
.entre {
animation: entree .8s var(--ease-expo) backwards;
animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}
@keyframes entree {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.surtitre__pouls {
position: relative;
display: inline-block;
width: 7px; height: 7px; margin-right: 3px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 var(--glow-cyan);
animation: pouls 2.2s var(--ease) infinite;
}
@keyframes pouls {
0% { box-shadow: 0 0 0 0 var(--glow-cyan); }
70% { box-shadow: 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* =========================================================================
HERO — composition reprise à la lettre depuis la référence STEP SNEAKERS
(Docs/hero, capture « Which one is your favorite… »), à la demande du
client après deux essais jugés insuffisants. Un CSS grid à deux colonnes
porte les cinq blocs de la référence exactement dans les mêmes cases —
titre, paragraphe, puces + CTA, trio icône/libellé, photo produit —
plutôt que la mécanique VP précédente (mot fantôme, libellé vertical,
pagination à points), absente de cette référence.
Couleurs et police ramenées à la charte Dilitech (Montserrat, bleus de
la marque) au lieu du bleu générique de STEP. Voir claudeprompt.md.
========================================================================= */
.hero {
position: relative; isolation: isolate;
overflow: hidden;
color: var(--sur-sombre);
width: 100%;
/* `var(--nuit)` a été assombri jusqu'au noir quasi pur en travaillant ce
hero (voir sa définition) : il sert maintenant de fond ici comme sur
toutes les autres sections sombres du site, plutôt que de garder une
variante locale — c'est ce même dégradé qu'on réutilise pour harmoniser
le reste du site avec le hero. */
background: var(--nuit);
/* Une hauteur ferme (pas seulement un plancher) donne au `1fr` de la
grille interne un espace réel à distribuer — sans elle, la ligne qui
porte la photo se dimensionnait sur le contenu et débordait largement
sous la fenêtre (mesuré : ~1050px pour une fenêtre de 900px). */
height: calc(100vh - var(--nav-h));
min-height: 620px;
}
/* Le fond (ci-dessus) occupe toute la largeur de la fenêtre ; le contenu,
lui, reste cadré à --wrap et centré — sur les écrans plus larges que
--wrap, mettre max-width directement sur .hero aurait aussi rogné son
propre fond, laissant deux bandes blanches (fond de page) de part et
d'autre au lieu du dégradé. */
.hero__grid {
position: relative; z-index: 1; height: 100%;
display: grid;
grid-template-columns: minmax(280px, 1.05fr) minmax(300px, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas:
"headline desc"
"specs media"
"trio media";
column-gap: clamp(24px, 4vw, 60px);
row-gap: 18px;
max-width: var(--wrap); margin: 0 auto;
padding: calc(var(--nav-h) + 30px) clamp(24px, 4vw, 50px) 26px;
}
.hero__frame {
position: absolute; z-index: 2; inset: 18px; border-radius: 20px;
border: 1px solid rgba(var(--sur-rgb), .14); pointer-events: none;
}
@media (max-width: 900px) { .hero__frame { display: none; } }
.halos--hero { position: absolute; inset: 0; z-index: 0; mix-blend-mode: screen; }
.halos--hero .halo--1 { top: -8%; left: auto; right: -6%; opacity: .5; }
.halos--hero .halo--3 { top: auto; bottom: -10%; left: 4%; right: auto; opacity: .32; }
/* Spotlight qui suit le curseur — activerSpotlightHero() dans js/core/ui.js
(mousemove → --mx/--my en %), posé sur le hero entier. */
.hero__spotlight {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 35%), var(--glow-cyan), transparent 62%);
opacity: 0; transition: opacity .5s var(--ease);
}
.hero:hover .hero__spotlight { opacity: 1; }
@media (pointer: coarse) { .hero__spotlight { display: none; } }
/* --- colonne de gauche : titre, paragraphe, puces, trio ---------------- */
.hero__headline { grid-area: headline; position: relative; z-index: 1; align-self: end; }
.hero__title {
font-weight: 700;
font-size: clamp(2.2rem, 3.6vw, 3.2rem);
line-height: 1.08;
letter-spacing: -.03em;
color: var(--sur-sombre);
}
/* Premier mot en accent — italique, gras, souligné cyan — comme « Enjoy »
dans la référence, plutôt que le dégradé gras → maigre de l'ancienne
version. */
.hero__title em {
font-style: italic; font-weight: 800; color: var(--cyan-2);
text-decoration: underline; text-decoration-color: var(--cyan-2);
text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.hero__desc {
grid-area: desc; position: relative; z-index: 1;
justify-self: end; align-self: start; text-align: right;
max-width: 34ch;
}
.hero__desc p { font-size: .88rem; line-height: 1.6; color: rgba(var(--sur-rgb), .62); margin: 0 0 14px; }
.hero__desc p:last-child { margin-bottom: 0; }
.hero__specs { grid-area: specs; position: relative; z-index: 1; align-self: center; }
/* Les puces « marques disponibles » ont été retirées (demande du client) :
cet espace vide garde la hauteur qu'elles occupaient, pour que le CTA ne
remonte pas combler le vide. */
.hero__specs-vide { height: 130px; }
@media (max-width: 900px) { .hero__specs-vide { height: 96px; } }
.hero__specs-label {
font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: rgba(var(--sur-rgb), .55); margin: 0 0 14px;
}
/* Puces façon pointures de la référence, remplies avec de vraies marques
du catalogue (voir hero() dans accueil.js) plutôt que des tailles. */
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; max-width: 360px; padding: 0; list-style: none; }
.hero__chip {
padding: 9px 16px; border: 1px solid rgba(var(--sur-rgb), .22); border-radius: 10px;
background: rgba(var(--sur-rgb), .03);
font-size: .74rem; font-weight: 700; color: var(--sur-sombre);
transition: border-color .3s var(--ease);
}
.hero__chip--plus { color: var(--cyan-2); border-color: rgba(79, 195, 240, .4); }
.hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
/* --- bouton monochrome, coins nets ----------------------------------------
Le premier essai restait un pavé cyan plein — toujours le réflexe
« bouton-couleur-de-marque » des gabarits génériques. Ici, plus aucune
couleur : bordé, transparent, blanc sur noir, comme les cases du compteur
Toguna Motors (Docs/hero) — le cyan n'apparaît nulle part sur le bouton,
seul son inversion (fond blanc, texte noir) marque le survol. */
.cta-pill {
display: inline-flex; align-items: center; gap: 14px;
padding: 15px 26px; border-radius: 6px;
border: 1px solid rgba(var(--sur-rgb), .5);
background: transparent; color: var(--sur-sombre);
font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cta-pill:hover { background: #fff; color: #000; border-color: #fff; }
.cta-pill__fleche {
display: grid; place-items: center; width: 15px; height: 15px; flex-shrink: 0;
}
.cta-pill__fleche svg { width: 100%; height: 100%; }
/* --- lien souligné : l'appel secondaire (absent de la référence, gardé
car « demander un devis » reste un besoin réel du site) -------------- */
.cta-link {
position: relative; display: inline-flex; align-items: center; gap: 10px;
font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(var(--sur-rgb), .8); padding-bottom: 6px; transition: color .35s var(--ease);
}
.cta-link__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); flex-shrink: 0; }
.cta-link::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
background: var(--cyan-2); transform: scaleX(.18); transform-origin: left;
transition: transform .4s var(--ease-expo);
}
.cta-link:hover { color: var(--sur-sombre); }
.cta-link:hover::after { transform: scaleX(1); }
/* --- trio icône/libellé, en cases nettes ---------------------------------
Plus de trait de séparation ni d'icône nue flottante (le style « pack
d'icônes IA ») : chaque icône est posée dans une case bordée à coins
courts, sur le modèle des cases du compte à rebours Toguna Motors
(Docs/hero) — garantie et SAV sont des faits fixes déjà énoncés plus bas
sur la page, le réseau reste calculé (voir hero() dans accueil.js). */
.hero__trio {
grid-area: trio; position: relative; z-index: 1; align-self: end;
display: flex; gap: 22px; padding: 0; margin: 0; list-style: none;
}
.hero__trio li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hero__trio-ic {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 6px;
border: 1px solid rgba(var(--sur-rgb), .22);
background: transparent;
}
.hero__trio-ic .ic { width: 20px; height: 20px; color: var(--sur-sombre); }
.hero__trio span:last-child {
font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: rgba(var(--sur-rgb), .6); text-wrap: balance;
}
/* --- photo produit, pleine colonne de droite ---------------------------
Photo de travail (source Pinterest, sans licence commerciale) — à
remplacer par une vraie photo Dilitech avant mise en ligne. Le
vignettage radial isole l'appareil de son décor (bureau, bokeh) pour se
rapprocher du produit détouré sur fond sombre de la référence. */
.hero__media {
grid-area: media; position: relative; z-index: 1;
border-radius: 24px; overflow: hidden;
min-height: 320px;
}
.hero__media img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
filter: brightness(.94) contrast(1.08) saturate(1.05);
}
.hero__media-vignette {
position: absolute; inset: 0;
background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(6, 5, 20, .55) 78%, rgba(6, 5, 20, .92) 100%);
}
.hero__media-shadow {
position: absolute; left: 10%; right: 10%; bottom: -6%; height: 60px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 72%);
filter: blur(4px);
}
@media (max-width: 900px) {
/* La colonne unique s'empile sur sa hauteur naturelle : la hauteur ferme
du bureau (pensée pour la grille à deux colonnes) n'a plus lieu d'être
ici. */
.hero { height: auto; min-height: auto; }
.hero__grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "headline" "media" "desc" "specs" "trio";
row-gap: 22px;
text-align: center;
padding-top: calc(var(--nav-h) + 34px);
padding-bottom: 40px;
}
.hero__desc { justify-self: center; text-align: center; max-width: 44ch; }
.hero__specs { align-self: auto; }
.hero__chips { justify-content: center; max-width: none; }
.hero__actions { justify-content: center; }
.hero__trio { justify-content: center; flex-wrap: wrap; row-gap: 16px; }
.hero__media { min-height: 320px; order: -1; }
}
/* Simple rangée de boutons — reste utilisée par les en-têtes « introuvable »
(404.html, article.js, produit.js), pas par le hero de l'accueil. */
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* --- bande de preuves, façon fiche technique (reprise sur reseau.html) --
Verre dépoli, séparateurs verticaux entre les chiffres. */
.heros__preuves {
display: flex; flex-wrap: wrap;
margin-top: 40px; padding: 22px 26px;
background: rgba(var(--sur-rgb), .045);
border: 1px solid var(--line-s2);
border-radius: var(--r);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.heros__preuve {
position: relative;
padding-inline: 26px;
flex: 1 1 0;
min-width: 84px;
}
.heros__preuve:first-child { padding-left: 0; }
.heros__preuve:not(:first-child)::before {
content: "";
position: absolute; left: 0; top: 2px; bottom: 2px;
width: 1px; background: var(--line-s);
}
.heros__preuve b {
display: block;
font-size: 1.75rem; font-weight: 800; line-height: 1.1;
color: var(--tx-1);
font-variant-numeric: tabular-nums;
}
.heros__preuve span {
display: block; margin-top: 4px;
font-size: .68rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--tx-3);
}
/* Posée désormais dans une section qui bascule (#reseau), plus sur une
bande sombre : en mode jour, une carte pleine plutôt qu'un verre blanc
invisible sur fond clair. */
:root[data-theme="light"] .heros__preuves { background: var(--paper); }
/* =========================================================================
9. MARQUEE DES MARQUES
========================================================================= */
.marques {
border-block: 1px solid var(--line-2);
padding-block: 22px;
overflow: hidden;
background: var(--paper);
}
.marques__piste {
display: flex; gap: 52px; width: max-content;
animation: defiler 46s linear infinite;
}
.marques:hover .marques__piste { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(-50%); } }
.marques__m {
font-size: 1.02rem; font-weight: 700; letter-spacing: .02em;
color: var(--tx-3);
white-space: nowrap;
transition: color .2s var(--ease);
}
.marques__m:hover { color: var(--tx-1); }
/* =========================================================================
10. BENTO — L'UNIVERS DILITECH
-------------------------------------------------------------------------
Grille reprise À LA LETTRE depuis la référence (Docs/section/univers
(cartes catégories).jfif) : sept tuiles, mêmes proportions — voir le
commentaire dans index.html pour le détail. Contenu réel uniquement,
voir univers() dans accueil.js pour ce qui est calculé.
========================================================================= */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
gap: 12px;
}
.bento__tile {
position: relative;
display: flex; flex-direction: column;
padding: clamp(16px, 2vw, 22px);
border-radius: var(--r);
background:
radial-gradient(240px 180px at 88% -12%, rgba(0, 159, 227, .16) 0%, transparent 62%),
linear-gradient(160deg, #141225 0%, #0c0a17 55%, #050308 100%);
border: 1px solid var(--line-2);
overflow: hidden;
transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.bento__tile:hover {
transform: translateY(-4px);
border-color: rgba(79, 195, 240, .3);
box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .6);
}
.bento__tile--a { grid-column: 1 / span 1; grid-row: 1 / span 1; min-height: 150px; }
.bento__tile--b { grid-column: 2 / span 1; grid-row: 1 / span 1; align-items: center; justify-content: center; }
.bento__tile--c { grid-column: 3 / span 2; grid-row: 1 / span 1; justify-content: space-between; }
.bento__tile--d { grid-column: 1 / span 2; grid-row: 2 / span 2; justify-content: space-between; }
.bento__tile--e { grid-column: 3 / span 1; grid-row: 2 / span 1; justify-content: center; }
.bento__tile--g { grid-column: 4 / span 1; grid-row: 2 / span 1; justify-content: center; }
.bento__tile--f { grid-column: 3 / span 2; grid-row: 3 / span 1; }
/* --- tuile A : garantie, avec un petit « reçu » imbriqué — la carte dans
la carte de la référence (« +$2400 / Has been received at your bank »),
pas juste une icône et du texte à plat. --- */
.bento__eyebrow {
font-size: .74rem; color: var(--tx-3); line-height: 1.4; max-width: 18ch;
}
.bento__recu {
display: flex; align-items: center; gap: 12px;
margin-top: auto; padding: 12px; border-radius: 12px;
background: rgba(var(--sur-rgb), .035); border: 1px solid var(--line-2);
box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .7);
}
.bento__recu-ic {
display: grid; place-items: center; flex: none;
width: 34px; height: 34px; border-radius: 9px;
background: var(--navy); color: var(--cyan-2);
}
.bento__recu-ic .ic { width: 15px; height: 15px; }
.bento__recu-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bento__recu-titre { font-size: 1.05rem; font-weight: 800; color: var(--tx-1); letter-spacing: -.01em; }
.bento__recu-sous { font-size: .7rem; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento__mini { font-size: .72rem; color: var(--tx-3); margin-top: 4px; }
.bento__mini--centre { text-align: center; margin-top: 12px; }
.bento__fleche {
position: absolute; right: 16px; bottom: 16px;
display: grid; place-items: center;
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--line-2); color: var(--tx-2);
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.bento__fleche svg { width: 13px; height: 13px; }
.bento__tile--a:hover .bento__fleche { background: var(--cyan-2); color: var(--navy-ink); border-color: var(--cyan-2); }
.bento__tile--a { padding-bottom: 60px; }
/* --- tuile B : marques, puces empilées en cartes (pas des ronds) --- */
.bento__chips { display: flex; }
.bento__chips span {
display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 11px;
background: var(--mist-2); border: 2px solid var(--paper);
font-size: .62rem; font-weight: 800; color: var(--tx-1);
margin-left: -14px;
transform: rotate(var(--rot, 0deg));
box-shadow: 0 10px 20px -6px rgba(0, 0, 0, .55);
}
.bento__chips span:nth-child(1) { margin-left: 0; --rot: -9deg; z-index: 1; }
.bento__chips span:nth-child(2) { --rot: 0deg; z-index: 2; }
.bento__chips span:nth-child(3) { --rot: 9deg; z-index: 3; background: var(--navy); color: var(--cyan-2); }
/* --- titres : gabarit commun, poussé beaucoup plus grand sur les tuiles
qui portent un vrai titre (C, E, F) — l'écart de taille avec les
libellés .bento__mini est ce qui donne le ton « soigné » de la
référence, pas des tailles toutes proches les unes des autres. --- */
.bento__titre { font-size: .96rem; font-weight: 800; letter-spacing: -.02em; color: var(--tx-1); }
.bento__titre em { font-style: normal; color: var(--cyan-2); }
.bento__titre--grand { font-size: clamp(1.3rem, 1.6vw, 1.55rem); line-height: 1.15; letter-spacing: -.025em; }
/* --- tuile C : réseau / carte, avec la pastille de ville sur le point
du siège — comme le pavé « Argentina » posé sur la carte de la
référence. --- */
/* Hauteur ferme plutôt que `flex: 1` : un