/* ========================================================================== SOCLE 1.4 — la feuille de la 1.4 -------------------------------------------------------------------------- Chargée après css/site-1.2.css et AVANT css/marque.css. Comme site-1.2.css, c'est une feuille de SURCHARGE du socle : elle porte ce que la 1.4 a ajouté au balisage — l'en-tête à logo centré, le logo en image, le bouton d'appel du pied de page, la grille de rayon à deux colonnes dès le téléphone. CE N'EST PAS LA CHARTE D'UNE BOUTIQUE. Les polices, les couleurs, les angles, les signatures graphiques vivent dans css/marque.css, chargée après celle-ci. Ici il n'y a que ce qui serait cassé sans elle : une règle retirée d'ici laisse un élément du HTML 1.4 sans mise en forme du tout. AUCUNE VALEUR HEX ICI. Tout passe par les jetons de css/tokens.css. ========================================================================== */ :root{ /* Le socle 1.0 pose une photo d'ambiance derrière toute la page, très atténuée. Une boutique qui vend des photos de produits détourées sur fond uni n'en veut pas : une texture derrière elles les salit. La variable est vidée plutôt que la règle supprimée — l'Éditeur du dashboard peut toujours reposer une image, et une charte peut la remettre dans marque.css. */ --fond-image:none; } /* ========================================================================== L'en-tête — trois colonnes, le logo au centre -------------------------------------------------------------------------- La 1.4 déplace le menu de langue à gauche et centre le logo. Le panier, lui, a quitté la barre pour devenir un bouton flottant (css/panier.css) : sans cette grille, le logo se retrouve collé au bord gauche sous le menu. ========================================================================== */ .header-inner{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:12px;padding:18px 0; } .header-avant{display:flex;align-items:center;gap:10px;justify-self:start;} .header-actions{justify-self:end;} /* ========================================================================== Le logo en image -------------------------------------------------------------------------- Le socle 1.0 dessine le logo en texte + SVG. La 1.4 sert un FICHIER, parce qu'un logo de client est un tracé, pas une police. Le balisage garde les deux : `data-logo-dessin` porte l'image livrée, et `data-logo` reçoit celle que le propriétaire envoie depuis le dashboard (js/page.js). LE FICHIER EST UN TRACÉ NOIR SUR TRANSPARENT. Sur le thème sombre on l'inverse : du noir pur devient du blanc pur, sans halo ni contour gris. C'est plus fidèle que de servir deux fichiers, qui finiraient par diverger au premier changement de logo. Les hauteurs sont écrites ici pour que la ligne de l'en-tête ne saute pas quand l'image arrive. ========================================================================== */ .logo{display:block;gap:0;} .logo-marque{height:22px;width:auto;display:block;filter:none;} :root:not([data-theme="light"]) .logo-marque{filter:invert(1);} @media (min-width:720px){ .logo-marque{height:26px;} } /* Le menu de langue a changé de côté : le socle le posait à droite de l'en-tête, et sa liste s'ouvrait donc alignée à DROITE. Ici il ouvre la ligne — alignée à droite, la liste sortait de l'écran par la gauche et on ne lisait plus les noms de langues. Elle s'aligne désormais sur le bord de départ, qui suit le sens de lecture : à gauche en français, à droite en arabe. */ .header-avant .langue-liste{inset-inline-end:auto;inset-inline-start:0;} /* Le lien « Accueil » s'efface tôt : le logo mène déjà à l'accueil, et à l'étroit il poussait le logo hors du centre. */ @media (max-width:560px){ .lien-accueil{display:none;} } /* ========================================================================== La grille d'un rayon -------------------------------------------------------------------------- Le bouton de la carte ne s'affiche pas : la carte entière est déjà un lien, et une grille de neuf boutons mange les neuf photos. Il reste dans le HTML pour les lecteurs d'écran, qui annoncent alors l'action du lien. ========================================================================== */ .carte-cta{ position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; } /* ========================================================================== Le pied de page de la 1.4 -------------------------------------------------------------------------- Il porte le logo et le NUMÉRO QU'ON APPELLE. Le numéro sortait à la taille du texte de pied de page et se perdait entre deux lignes grises : il est là pour être composé, donc il se lit de loin. ========================================================================== */ .footer-logo{margin:0 0 16px;} .footer-logo .logo-marque{height:28px;margin-inline:auto;} @media (min-width:720px){ .footer-logo .logo-marque{height:32px;} } .footer-contact{ margin:18px 0 0; display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center; gap:6px 18px; } .footer-tel{ font-size:1.35rem;letter-spacing:.06em; color:var(--texte-0);text-decoration:none; } .footer-tel:hover{text-decoration:underline;} @media (min-width:720px){ .footer-tel{font-size:1.5rem;} } /* ========================================================================== Le téléphone -------------------------------------------------------------------------- Deux colonnes dès 380 px. Le socle 1.0 passe à une colonne sous 640 : c'est ce qu'il faut quand chaque carte porte un argumentaire. Une carte de rayon porte une photo, un nom et un prix — à une colonne, il faut huit écrans pour voir huit articles, et on n'en voit jamais huit. ========================================================================== */ @media (max-width:639px){ .grille-produits{grid-template-columns:repeat(2,1fr);gap:22px 12px;} .carte-corps{padding-top:10px;} /* L'accroche saute : à 170 px de large elle prend trois lignes et repousse le prix, qui est ce qu'on vient chercher. Elle reste sur la page de l'article, où il y a la place de la lire. */ .carte-accroche{display:none;} .rayon + .rayon{margin-top:44px;} .accueil-hero{padding:32px 0 22px;} } /* ========================================================================== Le bouton WhatsApp sans numéro -------------------------------------------------------------------------- Il reste à l'écran sur un socle neuf, pour qu'on voie le composant — voir poserWhatsApp() dans js/boutique.js et son jumeau dans js/main.js. Sans numéro il n'a pas de href : il est donc inerte, et il doit AVOIR L'AIR inerte, sinon il part en ligne sans que personne le remarque. ========================================================================== */ .wa-float[aria-disabled="true"]{ opacity:.45;cursor:not-allowed; box-shadow:0 2px 6px rgba(0,0,0,.12); } .wa-float[aria-disabled="true"]:hover{ transform:none; box-shadow:0 2px 6px rgba(0,0,0,.12); }