/* ========================================================================== DarDZ — la feuille de la marque (socle 2.1) -------------------------------------------------------------------------- Chargée EN DERNIER : après tokens.css, palettes.css, styles.css, site-1.2.css, site-1.4.css, panier.css, pack.css et catalogue.css. C'est une feuille de SURCHARGE — elle ne contient que ce qui distingue DarDZ du socle. AUCUNE VALEUR HEX ICI. Les couleurs vivent dans css/tokens.css, et les six palettes du dashboard réécrivent ces mêmes jetons. Une couleur écrite en dur ici gagnerait sur la palette choisie par le propriétaire, sans qu'on sache pourquoi. Tout ce qui suit s'exprime en var(--…). ========================================================================== */ /* ========================================================================== 1. LES PICTOGRAMMES DES RAYONS -------------------------------------------------------------------------- Posés en MASQUE et non en . Un arrive avec ses couleurs et ne sait rien du thème ; un masque ne porte qu'une forme, et c'est le `background` qui donne la couleur — donc `currentColor`, donc le thème. Un seul fichier SVG sert en clair et en sombre. Le `--icone` est posé en style inline par js/vitrine-dardz.js. Sans lui, le span reste vide et la tuile garde son nom et son filigrane : une icône manquante ne casse jamais une tuile. ========================================================================== */ .tuile-icone{ display:block; width:34px;height:34px; background:currentColor; -webkit-mask:var(--icone) center/contain no-repeat; mask:var(--icone) center/contain no-repeat; opacity:.92; } .tuile:hover .tuile-icone{opacity:1;} /* ========================================================================== 2. CE QUI DÉFILE TOUT SEUL -------------------------------------------------------------------------- Une seule mécanique pour les deux rangées de produits et pour le mur des marques : le contenu est posé DEUX FOIS côte à côte, et la piste glisse de la moitié de sa largeur. Arrivée au bout du premier groupe, le second est exactement à la place du premier — la boucle ne se voit pas, et il n'y a aucun JavaScript d'animation. ELLE S'ARRÊTE AU SURVOL ET AU CLAVIER, et ce n'est pas une politesse : ces cartes portent un bouton « Ajouter au panier ». Une cible qui bouge pendant qu'on la vise, c'est un clic à côté, et un panier faux. `prefers-reduced-motion` ne met pas l'animation en pause : il la retire, et la piste redevient une rangée qu'on fait défiler au doigt. Une animation en pause laisserait la moitié des articles hors de l'écran, inatteignables. ========================================================================== */ /* CE N'EST PLUS UNE ANIMATION CSS, C'EST UN VRAI DÉFILEMENT. La première version translatait la piste : ça avançait tout seul, mais la rangée devenait un objet mort — impossible de la pousser à la main, parce qu'une `transform` n'a rien à voir avec la position de défilement. Maintenant la piste défile pour de vrai (`scrollLeft`), poussée image par image par js/vitrine-dardz.js. Conséquence : le doigt, la molette, le pavé tactile et les deux flèches agissent dessus directement, et le mouvement reprend tout seul quand on lâche. C'est la seule façon d'avoir les deux à la fois. La barre de défilement est masquée : elle doublerait les flèches et couperait le bas des cartes. Le contenu reste atteignable au doigt, à la molette, au clavier et par les flèches. */ .defile{ overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none; overscroll-behavior-x:contain; } .defile::-webkit-scrollbar{display:none;} .defile-piste{display:flex;width:max-content;} .defile-groupe{display:flex;gap:12px;padding-inline-end:12px;} /* La rangée du socle défilait nativement ; ici elle ne fait plus que contenir la piste animée. On lui retire son scroll et son accrochage, sinon les deux mécaniques se marchent dessus. */ .rangee-defilante{ display:block;overflow:visible; scroll-snap-type:none;padding:4px 0 14px; } /* LA VIGNETTE DES RANGEES : TOUT SE POSE SUR LA PHOTO. En pile — photo, puis nom, puis prix, puis deux boutons pleine largeur — une vignette faisait 330 px de haut pour 150 px de photo : la moitie de la carte servait a ecrire ce que la photo montrait deja. Le nom, le prix et les deux boutons passent donc PAR-DESSUS l'image, sur un voile degrade, et la carte tombe a 150x200. La photo est en `contain` et non en `cover` : ce sont des boites photographiees au comptoir, souvent verticales. Recadrees pour remplir, on leur coupait le nom du produit — c'est-a-dire la seule chose qui permet de la reconnaitre. */ .rangee-defilante .carte-piece{ flex:0 0 150px;width:150px; position:relative;overflow:hidden; border-radius:var(--radius-bloc); background:var(--fond-2); } .rangee-defilante .carte-piece-lien{display:block;} .rangee-defilante .carte-image{aspect-ratio:3/4;width:100%;height:auto;} .rangee-defilante .carte-image img{ width:100%;height:100%;object-fit:contain;background:var(--fond-2); } .rangee-defilante .carte-corps{ position:absolute;inset-inline:0;bottom:0; padding:28px 46px 9px 10px; background:linear-gradient(to top, color-mix(in srgb, var(--bande) 96%, transparent) 0%, color-mix(in srgb, var(--bande) 74%, transparent) 55%, transparent 100%); } .rangee-defilante .carte-nom{ margin:0 0 2px;font-size:.72rem;line-height:1.2;color:var(--sur-bande); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } .rangee-defilante .carte-prix{margin:0;} .rangee-defilante .carte-prix-val{ font-size:.95rem;font-weight:800;color:var(--sur-bande); } .rangee-defilante .carte-prix-ancien{color:var(--texte-3);font-size:.72rem;} /* L'etiquette de gamme garde l'angle haut, la ou rien ne passe. */ .rangee-defilante .carte-etiquette, .rangee-defilante .etiquette-gamme{ position:absolute;top:7px;inset-inline-start:7px;z-index:2; } .rangee-defilante .carte-actions{ position:absolute;inset-inline-end:8px;bottom:9px;z-index:3; display:flex;flex-direction:column;gap:6px; } /* LES DEUX PASTILLES. Trente-quatre pixels, c'est la plus petite cible qu'on vise sans se tromper au pouce — en dessous on appuie entre les deux. */ .btn-picto{ width:34px;height:34px;min-width:0;padding:0; display:inline-flex;align-items:center;justify-content:center; border-radius:50%; } .btn-picto .ico{ width:17px;height:17px;background:currentColor; -webkit-mask:var(--icone) center/contain no-repeat; mask:var(--icone) center/contain no-repeat; } /* ========================================================================== 3. LE MUR DES MARQUES -------------------------------------------------------------------------- Quatre rangs qui glissent en sens alternés et à des vitesses différentes. Alignés, ils avanceraient comme un seul bloc ; en sens opposés, le mur a du relief et on lit chaque rang séparément. Ce que contient chaque rang est en section 12 : un carré par marque, sans un mot écrit. ========================================================================== */ .mur-marques{display:grid;gap:10px;} /* ========================================================================== 4. LE LOGO -------------------------------------------------------------------------- Il porte sa propre plaque bleu nuit — c'est le dessin que le client a fourni, et c'est aussi ce qui lui permet de se lire sur les deux thèmes sans qu'on en livre deux fichiers. On lui laisse donc sa hauteur et on ne lui met pas de filtre. ========================================================================== */ .logo-marque{height:40px;width:auto;display:block;} .footer-logo .logo-marque{height:36px;} /* ========================================================================== 5. LA BANDE ROULANTE, LÀ OÙ ELLE EST MAINTENANT -------------------------------------------------------------------------- Elle a quitté l'accueil pour le catalogue et la fiche produit. Elle y arrive juste sous l'en-tête, avant le fil d'Ariane : c'est le moment où l'on compare un prix, donc le moment où « paiement à la livraison » sert. ========================================================================== */ .marquee{margin-bottom:0;} /* ========================================================================== 6. LE PIED DE PAGE — IL ÉTAIT ILLISIBLE, ET VOICI POURQUOI -------------------------------------------------------------------------- css/charte.css peint le pied avec la paire --bande / --sur-bande : un aplat sombre, une écriture claire. Mais css/styles.css porte, lui, une règle `:root[data-theme="light"] .site-footer{background:var(--fond-1)}` — deux classes contre une, elle gagne. En thème clair, le fond repassait donc au papier pendant que l'écriture restait blanche : blanc sur blanc. On rend au pied son aplat dans les deux thèmes, avec la même spécificité que la règle qui le lui prenait. C'est aussi ce qui est juste à l'œil : un pied sombre ferme la page claire au lieu de s'y dissoudre. ========================================================================== */ :root[data-theme="light"] .site-footer, .site-footer{background:var(--bande);color:var(--sur-bande);} /* charte.css inverse le logo du pied, parce que le socle livrait un logo monochrome foncé. Le nôtre porte sa propre plaque bleu nuit : l'inverser le repeindrait en blanc. */ .pied .logo-marque{filter:none;} /* ========================================================================== 7. LES TITRES DE SECTION, SANS LEUR NUMÉRO -------------------------------------------------------------------------- charte.css numérote les sections de l'accueil (01, 02, 03…) avec un compteur CSS. Sur un catalogue, ce numéro n'aide personne à choisir : il dit dans quel ordre on a rangé la page, ce dont le client n'a rien à faire. ========================================================================== */ .section-titre::before{content:none;} /* ========================================================================== 8. LES RAYONS, EN BANDE QU'ON POUSSE -------------------------------------------------------------------------- Le socle remplissait la largeur (`auto-fill`), ce qui donnait deux tuiles sur un téléphone et six sur un grand écran — donc une grille qui change de rythme d'un appareil à l'autre. Trois partout : quatorze rayons tiennent en cinq rangées, et la tuile reste assez grande pour qu'on lise son nom. ========================================================================== */ /* UNE BANDE QU'ON POUSSE, ET QUI N'AVANCE PAS TOUTE SEULE. Quatorze rayons en grille, c'est cinq rangees qui repoussent le catalogue d'un ecran entier avant qu'on ait vu un prix. En bande, ils tiennent sur une ligne et on les parcourt du pouce. RIEN NE BOUGE SANS QU'ON LE DEMANDE, contrairement aux deux rangees de produits. Un rayon, on le CHERCHE — on sait ce qu'on veut réparer ou acheter. Une rangee de nouveautes, on la REGARDE passer. Les deux ne demandent pas le meme geste, donc pas la meme mecanique. La barre de defilement reste VISIBLE et fine : c'est le seul indice qu'il y a quelque chose a droite. Sur les rangees animees elle etait inutile — le mouvement le disait tout seul. */ .grille-tuiles{ display:flex; grid-template-columns:none; gap:10px; overflow-x:auto; padding-block-end:10px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--ligne) transparent; } .grille-tuiles .tuile{ flex:0 0 clamp(132px,40vw,168px); scroll-snap-align:start; min-height:122px; } .tuile-nom{overflow-wrap:anywhere;hyphens:auto;} @media (max-width:620px){ .tuile-nom{font-size:.78rem;line-height:1.22;letter-spacing:0;} .tuile-icone{width:26px;height:26px;} .tuile-filigrane{font-size:2.4rem;} } /* ========================================================================== 9. LA FICHE PRODUIT — L'ORDRE DE LECTURE -------------------------------------------------------------------------- Ce qu'on veut voir, dans l'ordre où on le veut : la photo, le PRIX en grand, le bouton, puis seulement ce que c'est, puis le bon de commande. Le socle mettait le descriptif et les modèles compatibles avant le prix — juste pour une pièce détachée, où l'on vérifie la compatibilité avant de regarder le tarif ; faux pour un chargeur à 500 DA, où le prix EST la décision. Tout se joue avec `order` : rien n'est déplacé dans le HTML, donc l'ordre de lecture d'un lecteur d'écran et celui du clavier restent ceux du document — on ne réordonne que l'affichage. ========================================================================== */ .fiche-infos > .fiche-etiquettes{order:1;} .fiche-infos > .fiche-nom{order:2;} .fiche-infos > .fiche-prix{order:3;} .fiche-infos > .fiche-rupture{order:4;} .fiche-infos > .fiche-panier{order:5;} .fiche-infos > .fiche-detail{order:6;} .fiche-infos > .fiche-bloc{order:7;} .fiche-infos > .fiche-reference{order:8;} /* UN BOGUE DU SOCLE QUE NOS PHOTOS RÉVÈLENT. `.diaporama` est en `position:absolute; inset:0`, mais `.fiche-visuel` est resté en `position:static` : le diaporama ne se cale donc pas sur son cadre, il se cale sur le bloc englobant le plus proche qui soit positionné — très au-dessus. Résultat, la photo prend sa hauteur naturelle, déborde du cadre (que `overflow:hidden` ne clippe pas, faute d'être positionné) et vient se peindre PAR-DESSUS le prix et les boutons. On ne le voyait pas tant que le socle était livré sans photo. Une ligne suffit : rendre le cadre positionné. */ .fiche-visuel{position:relative;} /* CADRE CARRÉ ET PHOTO ENTIÈRE. Le socle cadre en 4/3 et recadre en `cover` : juste pour une pièce détachée photographiée à plat, faux ici, où les photos de Lamine sont des boîtes verticales prises au comptoir — en 4/3 recadré, on n'en voit qu'une bande au milieu, sans le nom du produit. */ .fiche-visuel{aspect-ratio:1/1;} .fiche-image, .diapo{object-fit:contain;background:var(--fond-2);} /* LE PRIX, EN GRAND. C'est la première chose qu'on cherche sur une fiche d'accessoire, et 1,8 rem le noyait entre le titre et le bouton. */ .fiche-prix-val{ font-size:clamp(2.2rem,8vw,3.1rem); line-height:1.05;letter-spacing:-.02em; color:var(--orange-vif); } .fiche-prix{margin-block:2px 4px;} /* Les deux boutons, l'un sous l'autre : côte à côte sur un téléphone, ils font deux cibles de 45 % de largeur et on appuie entre les deux. */ .fiche-panier{display:flex;flex-direction:column;gap:9px;} .fiche-panier .btn{margin:0;} /* Le descriptif passe sous le bouton : ce n'est plus une légende de titre, c'est la réponse à « c'est quoi, exactement ». On lui donne le corps de texte courant plutôt que le gris des mentions. */ .fiche-detail{ color:var(--texte-2);font-size:1rem;line-height:1.55; padding-top:6px;border-top:1px solid var(--ligne); } /* LE DESCRIPTIF LONG REMONTE AVANT LE BON DE COMMANDE. Il était livré après : on demandait de remplir un formulaire, puis on expliquait ce qu'on vendait. */ #pieceContenu{display:flex;flex-direction:column;} #pieceContenu > .fiche-tete{order:1;} #pieceContenu > #blocDescription{order:2;} #pieceContenu > #commande{order:3;} #pieceContenu > #sectionSimilaires{order:4;} /* ========================================================================== 10. L'EN-TÊTE PREND L'APLAT DU PIED -------------------------------------------------------------------------- Les deux aplats sombres encadrent alors le catalogue, exactement comme le dit le commentaire du socle à propos du pied : « un bord haut et un bord bas ». Avec la bande roulante juste en dessous sur le catalogue et la fiche, l'en-tête, la bande et le pied forment une seule famille. On retire le `backdrop-filter` : il servait à laisser deviner la page qui passe sous un en-tête translucide. Sur un aplat opaque il ne fait plus rien qu'un calcul de flou à chaque image défilée. Le champ de recherche garde SON fond clair : c'est une zone de saisie, elle doit avoir l'air d'un creux où l'on écrit, pas d'un bouton de plus. ========================================================================== */ .site-header{ background:var(--bande); backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom:1px solid color-mix(in srgb, var(--sur-bande) 12%, transparent); } /* On n'éclaircit QUE ce qui se pose directement sur l'aplat. Le sélecteur de langue porte sa propre pastille blanche : lui donner la couleur du texte de l'aplat écrivait blanc sur blanc. Il garde donc la sienne, comme le champ de recherche. */ .site-header .logo, .site-header .entete-icone, .site-header .entete-lien{color:var(--sur-bande);} .site-header .entete-icone:hover{color:var(--orange-vif);} .site-header .logo-marque{filter:none;} /* ========================================================================== 11. LES TUILES DE RAYON, ILLUSTRÉES -------------------------------------------------------------------------- Chaque rayon porte la photo d'une de ses références — une vraie photo du magasin, prise par Lamine. Le socle la posait à 55 % d'opacité derrière le nom : sur un fond clair, ça donnait une image délavée qui n'aidait ni à reconnaître le rayon ni à lire le nom. Ici la photo est pleine, et c'est un voile dégradé qui porte le texte. Le voile est tiré de --bande, donc il reste le même en clair et en sombre : une tuile illustrée est un objet sombre, quel que soit le thème. ========================================================================== */ .tuile-photo{overflow:hidden;} .tuile-photo .tuile-image{opacity:1;} .tuile-photo::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top, color-mix(in srgb, var(--bande) 92%, transparent) 0%, color-mix(in srgb, var(--bande) 62%, transparent) 42%, color-mix(in srgb, var(--bande) 22%, transparent) 100%); } .tuile-photo .tuile-nom, .tuile-photo .tuile-icone{position:relative;z-index:1;color:var(--sur-bande);} .tuile-photo .tuile-icone{opacity:1;} /* ========================================================================== 12. LES MARQUES : UN PETIT RECTANGLE, LE NOM DEDANS -------------------------------------------------------------------------- On a essayé le carré au seul logo. Sept marques sur cinquante-six en ont un ; les autres tombaient sur un monogramme, et un mur où neuf vignettes sur dix sont des initiales ne dit rien à personne. Le nom écrit, lui, se lit toujours — et c'est ce qu'un client cherche quand il veut « du Starsat » ou « du Robuste ». Les sept fichiers de /images/marques/ restent en place : ils resserviront le jour où le propriétaire voudra les afficher. Un logo envoyé depuis le dashboard prend la place du nom. ========================================================================== */ .plaque-marque{ flex:0 0 auto; display:flex;align-items:center;justify-content:center; min-width:116px;height:50px;padding:0 16px; border:1px solid var(--ligne);border-radius:var(--radius); background:var(--fond-2); text-decoration:none; transition:border-color .18s,transform .18s,box-shadow .18s; } .plaque-marque:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--ombre-douce); } .plaque-nom{ font-family:var(--police-titre); font-size:.84rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;white-space:nowrap; color:var(--texte-1); } .plaque-marque:hover .plaque-nom{color:var(--orange-vif);} .plaque-logo img{max-width:100%;max-height:30px;object-fit:contain;} /* L'arabe est une écriture liée : l'espacer coupe les liaisons, et les capitales n'y existent pas. */ :root[lang="ar"] .plaque-nom{letter-spacing:0;text-transform:none;} /* ========================================================================== 13. L'EN-TÊTE : LE LOGO À GAUCHE, PLUS DE BOUTON MENU -------------------------------------------------------------------------- Le bouton à trois barres ouvrait le panneau de navigation (rayons, marques, modèles). Il disparaît, et le logo prend sa place tout à gauche. CE QUE ÇA COÛTE, ET C'EST À SAVOIR : sur le catalogue et la fiche produit, il n'y a plus de menu de navigation — il reste la recherche, le logo qui ramène à l'accueil, et le fil d'Ariane. Depuis l'accueil, les rayons sont la première chose qu'on voit, donc le parcours tient. Pour rétablir le menu, il suffit de retirer la règle ci-dessous. ========================================================================== */ #menuBouton{display:none;} .entete-ligne{grid-template-columns:auto 1fr auto;} .entete-logo{justify-content:flex-start;} @media (max-width:700px){ .entete-ligne{ grid-template-columns:1fr auto; grid-template-areas:"logo actions" "recherche recherche"; } .entete-logo{grid-area:logo;justify-content:flex-start;} } /* ========================================================================== 14. LE SÉLECTEUR DE LANGUE : UNE PASTILLE SOMBRE, SANS DRAPEAU -------------------------------------------------------------------------- Les drapeaux partent. Un drapeau dit un PAYS, pas une langue : l'arabe n'est pas le drapeau d'un État et le français n'est pas celui de la France pour un client algérien. Les deux lettres suffisent, et elles se lisent sans couleur. La pastille reprend l'aplat de l'en-tête pour s'y fondre, et le chevron disparaît : à cette taille il ajoutait du bruit sans rien dire que l'`aria-expanded` ne dise déjà. ========================================================================== */ .langue-bouton{ width:34px;height:34px;padding:0;gap:0; border-radius:50%; background:var(--bande); color:var(--sur-bande); border:1px solid color-mix(in srgb, var(--sur-bande) 22%, transparent); justify-content:center; font-size:.76rem;letter-spacing:.02em; } .langue-bouton:hover{border-color:var(--orange);color:var(--orange-vif);} .langue-bouton .drapeau, .langue-bouton .langue-fleche{display:none;} /* Dans le menu déroulant aussi : on a retiré les drapeaux, pas seulement celui du bouton. */ .langue-liste .drapeau{display:none;} /* ========================================================================== 15. LE FOND DE PAGE : UN MOTIF, PLUTÔT QU'UN APLAT -------------------------------------------------------------------------- Le papier clair du socle était juste, mais nu : sur un téléphone, entre l'en-tête sombre et la première tuile, on traversait un grand vide blanc. LE MOTIF EST DESSINÉ EN CSS, PAS CHARGÉ. Trois dégradés superposés — une trame de points, et deux halos très dilués dans les deux couleurs de la marque. Zéro octet téléchargé, et comme tout est tiré des jetons, le motif suit la charte et les six palettes du dashboard sans qu'on y retouche. `background-attachment: fixed` sur les halos : ils restent en place pendant qu'on fait défiler, ce qui donne de la profondeur sans distraire. La trame, elle, défile avec la page — sinon elle glisse sous le contenu et ça tangue. ========================================================================== */ body{ background-color:var(--fond-0); background-image: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--signal) 13%, transparent) 0%, transparent 42%), radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--orange) 11%, transparent) 0%, transparent 38%), radial-gradient( color-mix(in srgb, var(--texte-0) 9%, transparent) 1px, transparent 1px); background-size:auto, auto, 22px 22px; background-attachment:fixed, fixed, scroll; background-repeat:no-repeat, no-repeat, repeat; } /* Les grands blocs posés dessus gardent leur fond plein : le motif est un fond de page, pas une texture de carte. */ .site-header,.pied,.marquee,.carte-piece,.tuile,.plaque-marque, .form-carte,.pack-bloc,.fiche-visuel{background-clip:padding-box;} /* ========================================================================== 16. LE LOGO NE S'INVERSE PLUS, ET IL GARDE SES PROPORTIONS -------------------------------------------------------------------------- Le socle livrait un mot-symbole monochrome foncé : il l'inversait donc en thème sombre (`site-1.4.css`) et dans le pied (`charte.css`), sans quoi il aurait disparu sur l'aplat. Le nôtre porte sa propre plaque bleu nuit et ses deux couleurs de marque — l'inverser le repeignait en blanc avec un « D » rose. On annule les deux, à spécificité suffisante. Et on lui rend son rapport : `max-height:24px` seul, face à des attributs width/height de 88×40 dans le HTML, l'étirait à 126×24. On fixe la hauteur et on laisse la largeur suivre. ========================================================================== */ :root:not([data-theme="light"]) .logo-marque, :root .pied .logo-marque{filter:none;} .entete-logo .logo-marque, .footer-logo .logo-marque, .admin-logo .logo-marque{ height:34px;width:auto;max-height:none;max-width:100%; } .footer-logo .logo-marque{height:34px;} /* ========================================================================== 17. LE HEADER ANIMÉ : LA VIDÉO, SON VOILE, ET LE LOGO INCRUSTÉ -------------------------------------------------------------------------- LE VOILE N'EST PAS DÉCORATIF. Sur une vidéo, la luminosité change d'une image à l'autre : un titre blanc lisible à la seconde 2 disparaît à la seconde 6 quand le plan s'éclaircit. Le dégradé fixe le contraste une fois pour toutes, quoi que fasse l'image en dessous. Il est tiré de `--bande`, donc il reste le même en clair et en sombre : un cadre vidéo est un objet sombre, quel que soit le thème de la page. LE LOGO EST POSÉ EN HTML, PAS GRAVÉ DANS LA VIDÉO. Une incrustation au montage se regrave à chaque retouche du logo et sort floue dès que le cadre s'agrandit. Ici il reste net à toutes les tailles, et le jour où Lamine envoie sa propre vidéo il n'y a rien à refaire. ========================================================================== */ .hero-cadre{position:relative;overflow:hidden;} .hero-cadre::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to top, color-mix(in srgb, var(--bande) 92%, transparent) 0%, color-mix(in srgb, var(--bande) 55%, transparent) 46%, color-mix(in srgb, var(--bande) 18%, transparent) 100%), linear-gradient(to right, color-mix(in srgb, var(--bande) 60%, transparent) 0%, transparent 62%); } .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .hero-texte{position:relative;z-index:2;} .hero-texte h1,.hero-sub{color:var(--sur-bande);} .hero-logo{ position:absolute;z-index:2; inset-block-start:16px;inset-inline-end:18px; height:26px;width:auto; opacity:.95; filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); } @media (max-width:620px){ .hero-logo{height:21px;inset-block-start:12px;inset-inline-end:13px;} } /* ========================================================================== 18. LE HEADER EN PLEIN CADRE : LOGO EN HAUT, TROIS MOTS EN BAS -------------------------------------------------------------------------- La vidéo sort du conteneur et va d'un bord à l'autre. Un plan de circuit imprimé n'a pas de sujet au centre : réduit à la largeur d'une colonne, on n'en voit plus qu'un bout de cuivre ; en pleine largeur, il devient une matière, et c'est ce qu'on lui demande. LE TITRE EST RETIRÉ DE L'ŒIL, PAS DE LA PAGE. Le `h1` reste dans le HTML, masqué à la manière de `.sr-only` : une page sans `h1` n'a pas de titre pour Google ni pour un lecteur d'écran, et c'est la vitrine du magasin — la page qui doit sortir en premier sur « électroménager Alger ». On ne la prive pas de son titre pour un effet visuel. Il reste donc trois mots, posés en bas au centre : c'est l'enseigne, pas un argumentaire. Qui veut savoir ce qu'on vend le lit sur les rayons, juste en dessous. ========================================================================== */ /* Le conteneur du socle tient le hero par une MARGE laterale, pas par un remplissage : remettre le padding a zero ne suffisait pas. */ /* Le conteneur du socle tient le hero par une MARGE laterale, pas par un remplissage : remettre le padding a zero ne suffisait pas. Et la section porte un padding-haut de 26 px — c'est le filet de papier qu'on voyait entre l'aplat de l'en-tete et la video. La video doit toucher l'en-tete : deux aplats sombres qui se suivent font un seul bloc, un liseré clair entre les deux fait un defaut. */ .hero{padding-block-start:0;} .hero .container{max-width:none;padding-inline:0;margin-inline:0;width:100%;} .hero-cadre{ border-radius:0; aspect-ratio:auto; min-height:clamp(330px,58vh,520px); display:flex;flex-direction:column; align-items:center;justify-content:space-between; padding-block:clamp(20px,5vw,40px); box-shadow:none; } @media (min-width:760px){ .hero-cadre{aspect-ratio:auto;} } /* Le logo passe en haut au centre. */ .hero-logo{ position:static; height:clamp(26px,5.2vw,40px);width:auto; opacity:1; filter:drop-shadow(0 3px 14px rgba(0,0,0,.6)); } /* Les trois mots, en bas au centre, toujours dans l'image. */ .hero-texte{ position:static;z-index:2; display:flex;justify-content:center; padding-inline:16px;text-align:center; } .hero-texte h1,.hero-texte .hero-sub{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .hero-eyebrow{ margin:0; font-size:clamp(.66rem,2.1vw,.82rem); letter-spacing:.16em; text-shadow:0 2px 12px rgba(0,0,0,.65); } /* Le filet du socle précédait le texte ; centré, il déséquilibre la ligne. */ .hero-eyebrow::before{display:none;}