/* ═══════════════════════════════════════════════════════════════════════ LE DESIGN DU SITE AK CENTER — reparti de zéro le 19/08/2026. La mise en page suit la maquette validée (boutique de meubles) : ses proportions, ses espacements, ses formes. Les COULEURS, elles, sont celles d'AK — décision du 19/08 : « la structure, mais aux couleurs AK ». Le design arrive SECTION PAR SECTION. Chaque section a son bloc ci-dessous, dans l'ordre de la page, et rien n'est écrit d'avance. ═══════════════════════════════════════════════════════════════════════ */ /* ═══ JETONS ═════════════════════════════════════════════════════════════ ── LA TRADUCTION DES COULEURS DE LA MAQUETTE ── La maquette pose un vert forêt (boutons, pied, titres) et un jaune ambre (accents, badges, bannière promotionnelle) sur fond crème. Le vert devient une ENCRE chaude, presque noire. Pas un orange foncé : deux oranges de valeurs différentes se disputeraient l'attention, et l'accent perdrait exactement ce qui en fait un accent. C'est le parti déjà pris dans l'application — neutre partout, orange à un seul endroit à la fois. Le jaune ambre devient l'ORANGE AK, #F85000, sans transiger : c'est la couleur de la maison, la même que l'application et l'ERP. ═══════════════════════════════════════════════════════════════════════ */ :root { /* L'accent, et lui seul. */ --orange: #F85000; --orange-fonce: #D14400; /* survol, état pressé */ --orange-doux: #FFF1EA; /* aplats très clairs, pastilles */ /* L'encre — remplace le vert forêt de la maquette. Chaude, jamais bleutée : un gris neutre à côté d'un orange saturé paraît sale. */ --encre: #1A1512; --encre-2: #4A413C; --g1: #6B615B; --g2: #9A918B; --g3: #C4BCB6; /* Les fonds. Le crème de la maquette, réchauffé du côté de l'orange. */ --creme: #F8F5F2; --blanc: #FFFFFF; --trait: #ECE6E1; /* Le trait APPUYÉ — bordures de boutons creux, séparateurs à souligner. Il manquait : `.ak-cta--creux` le demandait, et une variable inconnue invalide TOUTE la déclaration `border`. Le bouton n'avait donc aucune bordure, sans la moindre erreur pour le dire. Vu sur la capture. */ --trait-fort: #D6CEC7; /* LE BLANC QUI NE BASCULE JAMAIS. `--blanc` est une SURFACE : en mode sombre elle devient sombre. Mais le texte posé sur l'orange, sur l'encre ou sur une photo doit rester blanc dans les deux modes — sinon le bouton « Faire réparer » écrirait en noir sur orange la nuit. Deux rôles, deux jetons : c'est le piège numéro un d'un thème sombre, et il ne se voit qu'une fois les deux modes côte à côte. */ --sur-couleur: #FFFFFF; /* LA SURFACE QUI RESTE SOMBRE DANS LES DEUX MODES. Symétrique du piège précédent : `--encre` est une ENCRE, et plusieurs éléments s'en servaient comme d'un FOND — le bandeau de contact, les pastilles de qualité, les numéros d'étapes, le bouton « Ajouter ». En mode sombre l'encre devient claire : ces fonds seraient passés au blanc, avec leur texte blanc dessus. Ils prennent donc un jeton qui ne bascule pas. */ --fond-sombre: #1A1512; --fond-sombre-2: #4A413C; /* Le verre dépoli des cartouches flottantes et de la barre au défilement. Écrit en dur, il restait blanc la nuit — avec du texte clair dessus, donc illisible. */ --verre: rgba(255, 255, 255, .94); /* La hauteur de la barre de navigation. Nommée parce que le héros doit remonter dessous d'exactement cette valeur. */ --h-entete: 84px; /* ── LE MOUVEMENT ──────────────────────────────────────────────────── Trois durées, deux courbes, et rien d'autre. La feuille en comptait DOUZE de durée et deux écritures de la même courbe : un site animé au coup par coup, où deux gestes identiques ne durent pas pareil. L'œil ne sait pas nommer ce défaut, mais il le sent — c'est ce qui sépare « ça bouge » de « c'est réglé ». · vif — ce qu'on déclenche soi-même et qui doit répondre tout de suite : survol, pression, changement de couleur. · moyen — ce qui se déplace ou change de taille : cartes qui se soulèvent, panneaux qui s'ouvrent. · ample — ce qui entre en scène : révélations au défilement, zooms d'images. Les deux courbes disent la direction : ce qui ARRIVE décélère (on le rattrape du regard), ce qui PART accélère (on le laisse filer). */ --t-vif: 160ms; --t-moyen: 260ms; --t-ample: 420ms; --t-lent: 700ms; /* révélations et zooms d'images */ /* ⚠ Ces deux valeurs ne doivent JAMAIS passer par un remplacement en masse : un `var(--e-sortie)` dans sa propre déclaration se référence lui-même, la variable devient vide, et toutes les transitions retombent silencieusement sur `ease`. Constaté à la mesure : la courbe calculée valait « ease » partout. */ --e-sortie: cubic-bezier(.22, .7, .24, 1); --e-entree: cubic-bezier(.55, 0, .85, .35); /* LE FOND DES PHOTOS DU CATALOGUE — mesuré, pas choisi. Les quatre coins des photos produit valent #E6E6E6 (230,230,230), identique d'un article à l'autre : elles sont normalisées à la source. Poser cette teinte derrière une photo `contain` rend le remplissage INVISIBLE — c'est ce qui permet un cadre portrait sans rogner le produit. */ --fond-photo: #E6E6E6; /* Les couleurs de sens — distinctes de l'accent, sans quoi « en stock » et « promotion » se ressembleraient. */ --vert: #17803D; --vert-doux: #E8F5EC; --rouge-doux: #FBE9E7; --rouge: #C4322A; /* L'AMBRE — ce qui ATTEND quelque chose : un devis à valider, un règlement à faire. Il manquait : le vert dit « c'est bon », le rouge « c'est refusé », mais rien ne disait « à vous de jouer ». */ --ambre: #9A6700; --ambre-doux: #FFF6E5; /* ── LA TRAME ── 1320 px : la largeur de la maquette une fois ramenée à l'échelle 1. À confirmer sur le fichier source, que je n'ai pas encore. */ --large: 1320px; --gouttiere: 24px; /* ── L'ÉCHELLE D'ESPACEMENT ── Multiples de 4. Une échelle évite les « 13 px ici, 15 px là » qui font qu'une page paraît bricolée sans qu'on sache dire pourquoi. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; /* ── LES ARRONDIS ── La maquette est très arrondie : pastilles pleines sur les boutons, coins généreux sur les cartes. */ --r-carte: 20px; --r-champ: 12px; --r-pastille: 999px; --ombre-carte: 0 1px 2px rgba(26, 21, 18, .04), 0 12px 32px -16px rgba(26, 21, 18, .16); } /* ═══════════════════════════════════════════════════════════════════════ LE MODE SOMBRE — 20/08/2026 ═══════════════════════════════════════════════════════════════════════ Rien n'est repeint : on redéfinit les MÊMES jetons. C'est tout l'intérêt d'avoir posé trente-deux variables plutôt que sept cents couleurs. ── TROIS ÉTATS, PAS DEUX ── Le visiteur peut n'avoir rien choisi : son système décide alors (`prefers-color-scheme`). S'il a choisi, l'attribut `data-theme` sur la racine tranche — et il doit gagner DANS LES DEUX SENS, d'où le `:not([data-theme="light"])` sur la règle du système. Sans lui, un visiteur qui force le mode clair depuis un système sombre resterait sombre. ── CE QUI NE BASCULE PAS, ET POURQUOI ── `--fond-photo` reste clair : les 380 photos du catalogue sont des détourages sur blanc. Une tuile sombre derrière un détourage blanc fait un trou au milieu de la carte — c'est le défaut qu'on a déjà corrigé une fois sur la carte « Écrans & batteries ». Les vraies boutiques gardent leur plaque produit claire de nuit ; ce n'est pas un oubli, c'est la seule façon d'afficher des photos détourées sur blanc. `--orange` ne bouge pas non plus : c'est la marque. Seul `--orange-doux` s'assombrit, sinon les pastilles deviendraient des lampes. ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Les couleurs de SENS s'éclaircissent : #17803D sur du sombre tombe à 3,6:1, mesuré. Un « En stock » qu'on peine à lire est un « En stock » qui ne rassure pas. */ --vert: #4ADE80; --vert-doux: #10291A; --rouge: #FF7A70; --rouge-doux: #2E1512; --ambre: #F5C451; --ambre-doux: #2B2008; --verre: rgba(26, 22, 20, .92); --encre: #F4F0ED; --encre-2: #CFC6C0; --g1: #A79E97; --g2: #7E7570; --g3: #4C443F; --creme: #100D0C; --blanc: #1A1614; --trait: #2B2522; --trait-fort: #3D3531; --orange-doux: #2A1710; } } :root[data-theme="dark"] { /* Les couleurs de SENS s'éclaircissent : #17803D sur du sombre tombe à 3,6:1, mesuré. Un « En stock » qu'on peine à lire est un « En stock » qui ne rassure pas. */ --vert: #4ADE80; --vert-doux: #10291A; --rouge: #FF7A70; --rouge-doux: #2E1512; --ambre: #F5C451; --ambre-doux: #2B2008; --verre: rgba(26, 22, 20, .92); --encre: #F4F0ED; --encre-2: #CFC6C0; --g1: #A79E97; --g2: #7E7570; --g3: #4C443F; --creme: #100D0C; --blanc: #1A1614; --trait: #2B2522; --trait-fort: #3D3531; --orange-doux: #2A1710; } /* ── CE QUE LES JETONS NE SUFFISENT PAS À RÉGLER ── */ /* Les logos des marques sont des tracés SOMBRES sur fond transparent ou blanc : de nuit, ils disparaissent. On les inverse, et on annule la teinte que l'inversion donnerait aux logos en couleur. */ /* ── CE QUE LES JETONS SEULS NE RÈGLENT PAS — corrigé le 20/08 après audit ── Un agent a passé les huit pages dans les deux modes et rapporté douze défauts. Tous relèvent du même malentendu : une valeur choisie pour son RÔLE en mode clair (« un fond sombre », « un vert de validation ») cesse de jouer ce rôle quand tout le reste bascule autour d'elle. Le cas d'école : `.ak-cta--sombre` était un bouton sombre sur page claire. La nuit, la page devient sombre et le bouton garde sa couleur — mesuré à 1,008:1 contre le fond, c'est-à-dire invisible. Un bouton « sombre » ne veut rien dire ; ce qu'on voulait, c'est un bouton CONTRASTÉ. */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="light"] { color-scheme: light; } /* Les surfaces qui doivent RESTER contrastées, et non rester sombres. */ :root[data-theme="dark"] .ak-cta--sombre, :root[data-theme="dark"] .ak-bouton, :root[data-theme="dark"] .ak-etape span, :root[data-theme="dark"] .ak-temoin__petale, :root[data-theme="dark"] .ak-magasin { background: var(--encre); color: var(--creme); } :root[data-theme="dark"] .ak-cta--sombre:hover, :root[data-theme="dark"] .ak-bouton:hover, :root[data-theme="dark"] .ak-magasin:hover { background: var(--encre-2); } /* Le bandeau de contact se confondait avec l'en-tête (1,008:1). Il descend d'un cran sous le fond de page pour retrouver son rôle de bande. */ :root[data-theme="dark"] .ak-bandeau { background: #070505; } /* La frise : les fichiers ont un fond BLANC opaque, et l'inversion le rendait noir. Plutôt qu'inverser, on rend la plaque blanche — la même réponse que pour les photos du catalogue et les pastilles du héros. */ :root[data-theme="dark"] .ak-marques__lot img { filter: none; background: var(--sur-couleur); border-radius: 8px; padding: 4px 8px; opacity: .82; } :root[data-theme="dark"] .ak-marques__lot img:hover { opacity: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ak-cta--sombre, :root:not([data-theme="light"]) .ak-bouton, :root:not([data-theme="light"]) .ak-etape span, :root:not([data-theme="light"]) .ak-temoin__petale, :root:not([data-theme="light"]) .ak-magasin { background: var(--encre); color: var(--creme); } :root:not([data-theme="light"]) .ak-cta--sombre:hover, :root:not([data-theme="light"]) .ak-bouton:hover, :root:not([data-theme="light"]) .ak-magasin:hover { background: var(--encre-2); } :root:not([data-theme="light"]) .ak-bandeau { background: #070505; } :root:not([data-theme="light"]) .ak-marques__lot img { filter: none; background: var(--sur-couleur); border-radius: 8px; padding: 4px 8px; opacity: .82; } :root:not([data-theme="light"]) .ak-marques__lot img:hover { opacity: 1; } } /* ── CE QUE LA PREMIÈRE SÉRIE DE CORRECTIFS A CASSÉ — 20/08, seconde passe ── Une contre-vérification a montré que trois de mes règles de nuit, écrites avec une spécificité plus forte, avaient écrasé des intentions du mode clair : le bouton en attente redevenait actif, l'étape 1 perdait son orange, le survol du bouton ordinaire aussi. Une règle de thème doit redéfinir une COULEUR, jamais annuler une distinction. */ :root[data-theme="dark"] .ak-magasin--attente, :root:not([data-theme="light"]) .ak-magasin--attente { background: transparent; color: var(--g2); border: 1.5px dashed var(--trait-fort); } :root[data-theme="dark"] .ak-magasin--attente:hover, :root:not([data-theme="light"]) .ak-magasin--attente:hover { background: transparent; } :root[data-theme="dark"] .ak-etape:first-child span, :root:not([data-theme="light"]) .ak-etape:first-child span { background: var(--orange); color: var(--sur-couleur); } :root[data-theme="dark"] .ak-bouton:hover, :root:not([data-theme="light"]) .ak-bouton:hover { background: var(--orange); color: var(--sur-couleur); } /* Le bandeau : 1,13:1 contre l'en-tête, c'est mieux que 1,008 mais ça ne fait toujours pas une frontière. Un filet la dessine, lui. */ :root[data-theme="dark"] .ak-bandeau, :root:not([data-theme="light"]) .ak-bandeau { border-bottom: 1px solid var(--trait); } /* La frise garde son geste : gris au repos, couleur au survol — la nuit comme le jour. Elle était restée en couleur au repos. */ :root[data-theme="dark"] .ak-marques__lot img, :root:not([data-theme="light"]) .ak-marques__lot img { filter: grayscale(1); } :root[data-theme="dark"] .ak-marques__lot img:hover, :root:not([data-theme="light"]) .ak-marques__lot img:hover { filter: none; } /* Le chevron du tri est une image écrite en dur, tracée en #1A1512 : elle disparaissait sur un champ sombre. Une seconde image, claire, pour la nuit. */ :root[data-theme="dark"] .ak-tri select, :root:not([data-theme="light"]) .ak-tri select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F0ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* LE LOGO AK CHANGE DE FICHIER, IL NE S'INVERSE PAS. Un `invert()` sur la marque tuerait l'orange. La version blanche existe déjà — elle avait été faite pour l'ancien pied sombre — on s'en sert. */ .ak-logo--nuit { display: none; } :root[data-theme="dark"] .ak-logo--jour { display: none; } :root[data-theme="dark"] .ak-logo--nuit { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ak-logo--jour { display: none; } :root:not([data-theme="light"]) .ak-logo--nuit { display: block; } } /* …sauf au survol de la frise, où la marque reprend ses couleurs : c'est le geste qu'on a construit, il ne doit pas se perdre la nuit. */ /* Le bouton de bascule, dans l'en-tête. */ .ak-theme { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: var(--r-pastille); background: transparent; color: var(--encre); cursor: pointer; transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie); } .ak-theme:hover { background: var(--creme); color: var(--orange); } .ak-theme .ak-lune { display: none; } :root[data-theme="dark"] .ak-theme .ak-lune { display: block; } :root[data-theme="dark"] .ak-theme .ak-soleil { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ak-theme .ak-lune { display: block; } :root:not([data-theme="light"]) .ak-theme .ak-soleil { display: none; } } /* ═══ SOCLE ══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* Autorise l'animation vers une hauteur `auto` — utilisé par le dépliage des questions. Sans effet là où ce n'est pas reconnu. */ :root { interpolate-size: allow-keywords; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; /* URBANIST — une géométrique, comme la maquette. Inter est humaniste : ses titres n'avaient pas la même allure. Le repli reste la police système, affichée le temps du chargement (`font-display: swap`). */ font-family: Urbanist, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased; /* Aucune page ne doit défiler latéralement — c'est le défaut qui se voit le plus sur un téléphone et qu'on remarque le moins en le construisant. * * `clip` ET NON `hidden`, et ce n'est pas un détail : `overflow: hidden` * fait du corps un conteneur de défilement, ce qui CASSE `position: * sticky` sur ses descendants — l'en-tête aurait cessé de tenir en haut * de l'écran, sans rien dans la console pour l'expliquer. `clip` coupe le * débordement sans créer ce conteneur. */ overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* La trame : un seul conteneur, partout. Des largeurs recopiées section par section finissent toujours par diverger d'un pixel ou deux, et les blocs ne s'alignent plus verticalement. */ .ak-large { width: 100%; max-width: calc(var(--large) + var(--gouttiere) * 2); margin-inline: auto; padding-inline: var(--gouttiere); } /* ═══ ACCESSIBILITÉ ══════════════════════════════════════════════════════ */ /* Invisible tant qu'on ne l'atteint pas au clavier. Sans lui, naviguer au clavier oblige à traverser tout le menu à chaque page. */ .saut-au-contenu { position: absolute; left: -9999px; } .saut-au-contenu:focus { left: var(--e4); top: var(--e4); z-index: 999; padding: var(--e3) var(--e5); background: var(--fond-sombre); color: var(--sur-couleur); border-radius: var(--r-champ); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Lu par les lecteurs d'écran, invisible à l'œil. */ .lecture-seule { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ SECTION 1 · LE BANDEAU DE CONTACT ═══════════════════════════════════════════════════════════════════════ Trois zones, comme la maquette : un contact à gauche, un message au centre, un troisième bloc à droite. ── CE QUI CHANGE PAR RAPPORT À LA MAQUETTE, ET POURQUOI ── La maquette met « Sign up and GET 25% OFF your first order » au centre. AK n'a pas cette remise, et ce site a déjà retiré trois éléments du gabarit d'origine parce qu'ils faisaient semblant — un compte à rebours sans échéance, une infolettre qui ne collectait rien. On n'en réintroduit pas un quatrième. Le centre porte donc ce qui est vrai et vaut d'être dit : le diagnostic gratuit et la garantie. À droite, la maquette aligne des icônes de réseaux sociaux. AK n'en a aucun d'enregistré : une icône qui ne mène nulle part est le même défaut. La place tient les HORAIRES, qui occupent le même poids visuel et renseignent vraiment. Les icônes reviendront le jour où les comptes existeront. ═══════════════════════════════════════════════════════════════════════ */ .ak-bandeau { background: var(--fond-sombre); color: var(--sur-couleur); font-size: 13px; line-height: 1.4; } .ak-bandeau > .ak-large { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); min-height: 44px; } .ak-bandeau a { color: inherit; } .ak-bandeau__contact, .ak-bandeau__horaires { display: flex; align-items: center; gap: var(--e2); white-space: nowrap; color: rgba(255, 255, 255, .78); } .ak-bandeau__contact strong { color: var(--sur-couleur); font-weight: 600; } .ak-bandeau__contact svg, .ak-bandeau__horaires svg { flex: none; opacity: .7; } /* Le message du centre. Il disparaît avant les deux autres quand la place manque : le numéro de téléphone est ce qu'on vient chercher en premier. */ .ak-bandeau__mot { display: flex; align-items: center; gap: var(--e3); text-align: center; } .ak-bandeau__mot em { font-style: normal; color: rgba(255, 255, 255, .78); } /* Le seul orange du bandeau — un lien, pas un bouton : à cette taille, un bouton plein ferait une tache et volerait l'attention au menu juste dessous. */ .ak-bandeau__lien { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ak-bandeau__lien:hover { color: var(--sur-couleur); } @media (max-width: 1100px) { .ak-bandeau__horaires { display: none; } } @media (max-width: 760px) { .ak-bandeau > .ak-large { justify-content: center; } .ak-bandeau__mot { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ SECTION 2 · L'EN-TÊTE ═══════════════════════════════════════════════════════════════════════ Refait le 19/08/2026 sur sa demande : « le logo AK sans écriture, l'en-tête pro avec les mêmes icônes que l'image ». Trois zones comme la maquette — la marque, le menu, les quatre actions. Fond blanc, un trait fin en bas, et la barre reste en haut au défilement : sur une boutique, atteindre le panier ne doit jamais demander de remonter. ── LA MARQUE SEULE ── Le logo à texte (620 × 120, « AK CENTER · RÉPARATION · PIÈCES ») est remplacé par la marque nue. Elle est plus lisible à 40 px de haut, elle ne se déforme pas au téléphone, et elle laisse au menu la place qu'il lui faut. Le fichier d'origine pesait 488 Ko : il a été rogné sur ses pixels utiles, recentré dans un carré et décliné en 96 et 192 px. ── LES QUATRE ICÔNES ── Recherche, favoris, panier, compte — les mêmes que la maquette, au même endroit, dans le même style : trait fin, sans cercle autour, sans aplat. Elles sont dessinées dans le HTML : le thème retiré chargeait une police d'icônes entière pour une poignée de glyphes. ═══════════════════════════════════════════════════════════════════════ */ .ak-entete { position: sticky; top: 0; z-index: 100; background: var(--blanc); border-bottom: 1px solid var(--trait); transition: background var(--t-moyen) var(--e-sortie), border-color var(--t-moyen) var(--e-sortie), box-shadow var(--t-moyen) var(--e-sortie); } /* ── TRANSPARENT EN HAUT, BLANC DÈS QU'ON DÉFILE ── Uniquement sur les pages qui commencent par un héros teinté (`ak-corps-heros`) : ailleurs, la barre surplomberait du contenu et deviendrait illisible. La classe `est-defile` est posée par un script de six lignes ; en son absence — script bloqué, navigateur ancien — la barre reste simplement blanche, c'est-à-dire l'état d'avant. Un effet décoratif ne doit jamais pouvoir rendre une navigation invisible. */ body.ak-corps-heros .ak-entete { background: transparent; border-bottom-color: transparent; } /* Transparent ne suffit pas : sous la barre il y avait le fond du corps, blanc, et non le héros — la barre restait donc visiblement plus claire. Le héros est REMONTÉ sous elle, et rend en padding la hauteur qu'il prend en marge. Vu à l'écran ; aucun outil ne l'aurait signalé. */ body.ak-corps-heros .ak-heros { margin-top: calc(var(--h-entete) * -1); padding-top: var(--h-entete); } body.ak-corps-heros .ak-entete.est-defile { background: var(--verre); backdrop-filter: blur(12px); border-bottom-color: var(--trait); box-shadow: 0 6px 24px -18px rgba(26,21,18,.5); } .ak-entete > .ak-large { display: flex; align-items: center; gap: var(--e6); min-height: 84px; } /* ── La marque ── */ .ak-entete__logo { flex: none; display: block; line-height: 0; /* sans quoi la ligne de base ajoute 4 px sous l'image */ } .ak-entete__logo img { /* 56 px dans une barre de 84 : la marque respire sans toucher les bords. Elle était à 42 — trop discrète pour une marque qui porte seule l'identité, puisqu'il n'y a plus de texte à côté d'elle. */ width: 56px; height: 56px; transition: transform var(--t-vif) var(--e-sortie); } .ak-entete__logo:hover img { transform: scale(1.06); } /* ── Le menu ── */ .ak-menu { display: flex; align-items: center; gap: var(--e6); margin-inline: auto; /* centré, quelles que soient les largeurs autour */ } .ak-menu a { position: relative; padding-block: var(--e3); font-size: 15px; font-weight: 500; color: var(--encre-2); white-space: nowrap; transition: color var(--t-vif) var(--e-sortie); } .ak-menu a:hover { color: var(--encre); } /* LA PAGE COURANTE SE SIGNALE PAR SON POIDS, PAS PAR UN TRAIT. * * Elle portait un soulignement orange. Retiré le 19/08/2026 : dans un menu * dont les entrées sont grises, la SEULE qui soit noire et grasse se * distingue déjà sans qu'on ait à tracer quoi que ce soit. Le trait faisait * un second signal pour la même information — et il attirait l'œil sur la * page où l'on est déjà, plutôt que sur celles où l'on peut aller. */ .ak-menu a[aria-current="page"] { color: var(--encre); font-weight: 700; } /* ── Les quatre actions ── Espacées serré, comme la maquette : elles forment un GROUPE, et un écart trop large les ferait lire comme quatre éléments sans rapport. */ .ak-actions { display: flex; align-items: center; gap: var(--e1); flex: none; } .ak-action { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: none; background: transparent; border-radius: var(--r-pastille); color: var(--encre); cursor: pointer; transition: background var(--t-vif) var(--e-sortie), color var(--t-vif) var(--e-sortie); } .ak-action:hover { background: var(--creme); color: var(--orange); } /* Le compteur du panier. Il ne s'affiche QUE s'il y a quelque chose dedans — un « 0 » permanent est du bruit, et il fait douter de ce qu'on a mis. */ .ak-action__compte { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding-inline: 5px; display: grid; place-items: center; background: var(--orange); color: var(--sur-couleur); font-size: 11px; font-weight: 700; line-height: 1; border-radius: var(--r-pastille); border: 2px solid var(--blanc); } /* ── LA RECHERCHE ── Une ICÔNE dans la barre ; le champ se déplie dessous au clic — sa demande du 19/08, après avoir essayé le champ posé en permanence. Le champ garde l'allure de sa capture : pastille grise, loupe dedans à gauche, sans bordure au repos. Ce qui change, c'est OÙ il vit — replié, il ne dispute plus sa place au menu, qui tient alors entier bien plus bas en largeur. Piloté par une case à cocher : aucun JavaScript, donc la recherche s'ouvre même si un script casse plus haut dans la page. */ #ak-recherche-ouverte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); } #ak-recherche-ouverte:focus-visible ~ .ak-entete .ak-recherche__bouton { outline: 2px solid var(--orange); outline-offset: 3px; } .ak-recherche { position: absolute; top: 100%; left: 0; right: 0; /* La gouttière EST portée par le panneau, pas par le formulaire : sans elle, le champ touchait les bords de l'écran dès que la fenêtre passait sous 1 368 px, et ne s'alignait plus sur le logo ni sur le menu. */ padding: var(--e4) var(--gouttiere); background: var(--blanc); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-carte); /* Vraiment fermé : `display:none` le retire de l'ordre de tabulation, ce qu'une simple opacité ne fait pas. */ display: none; } #ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche { display: block; } /* Le formulaire s'aligne sur la trame de la page, pas sur les bords de l'écran : sans ce conteneur, le champ courait d'un bord à l'autre et ne tombait plus sous rien. */ .ak-recherche form { display: flex; align-items: center; gap: var(--e2); width: 100%; max-width: var(--large); margin-inline: auto; height: 52px; padding-inline: var(--e5) var(--e3); background: var(--creme); border: 1.5px solid transparent; border-radius: var(--r-pastille); transition: border-color var(--t-vif) var(--e-sortie), background var(--t-vif) var(--e-sortie); } .ak-recherche form:focus-within { background: var(--blanc); border-color: var(--g3); } /* La loupe est DANS le champ, à gauche. Un repère, pas une commande : le formulaire se valide avec Entrée. */ .ak-recherche__loupe { flex: none; color: var(--g1); display: grid; place-items: center; } .ak-recherche input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; /* 16 px : en dessous, iOS zoome sur le champ à la mise au point. */ font-size: 16px; color: var(--encre); } .ak-recherche input::placeholder { color: var(--g2); } /* Le bouton d'envoi n'existe qu'au clavier : à l'œil, la pastille se valide avec Entrée. Le retirer complètement empêcherait d'envoyer sans souris. */ .ak-recherche button { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); } .ak-recherche button:focus-visible { position: static; width: auto; height: 38px; margin: 0; padding-inline: var(--e5); clip-path: none; border: none; border-radius: var(--r-pastille); background: var(--orange); color: var(--sur-couleur); font-size: 14px; font-weight: 600; cursor: pointer; } /* L'icône bascule : loupe fermée, croix ouverte — on voit comment refermer. */ .ak-recherche__bouton .ak-ico-fermer { display: none; } #ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton .ak-ico-loupe { display: none; } #ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton .ak-ico-fermer { display: block; } #ak-recherche-ouverte:checked ~ .ak-entete .ak-recherche__bouton { color: var(--orange); } /* ── Le menu au téléphone ── */ .ak-burger { display: none; } /* LA CASE QUI PILOTE LE MENU — cachée à l'œil, PAS au clavier. * * Écrite d'abord en `display:none`, ce qui la retirait de l'ordre de * tabulation : un `