/* LES NEUF PAGES DE RAYON — huiles, priere, enfants, livres, parfums, soins, alimentaire, vetements, femme (zamzam retire le 18/08). Chargee APRES socle.css, jamais seule : tout l'en-tete (.tete, .menu, .cherche), le tiroir du panier, la grille (.grille, .produit, .cadre, .infos, .bas, .prix, .badge) et la typographie (.geant, .titre-rayon, .sur, .mot, .coquille) viennent de la. On n'ajoute ici que ce que le socle ne connait pas : l'en-tete de rayon, la navigation entre rayons, et les deux morceaux de carte que peignait accueil.css — qui, lui, n'est PAS charge sur ces pages. AUCUNE COULEUR EN DUR. Les cinq univers sont deja poses par body[data-univers=…] dans socle.css : --u1 le fond, --u2 l'accent, --u3 le clair, --u2f l'ombre pleine. Ecrire un brun ici, c'est le voir survivre au prochain changement de palette. */ /* ══ 1. LA PAGE ENTIERE PREND LA COULEUR DE SON RAYON ══ Sur l'accueil, cinq sections se partagent la page et chacune peint SON fond (.rayon{background:var(--u1)}). Ici la page ne contient qu'un rayon : c'est donc le qui porte la couleur, sinon on arriverait sur du noir et le rayon n'aurait plus d'identite. Le halo reprend celui de .rayon::before, meme geometrie. */ body{background:var(--u1)} body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(60% 50% at 18% 0%, color-mix(in oklab,var(--u2) 20%,transparent) 0%,transparent 65%); } /* ══ 1 bis. LA COLONNE DE LECTURE ══ Tout ce qui est aligne sur cette page l'est sur min(94vw,1280px) : le fil (.fil), la navigation entre rayons (.rnav), le bas de page (.rfin) et le pied (.ppied) portent deja cette largeur dans socle.css. Il fallait la MEME pour l'en-tete de rayon et pour la grille, sinon le titre et les vignettes touchaient les bords de l'ecran pendant que le fil juste au-dessus restait rentre — un desalignement visible au premier coup d'oeil. Pourquoi pas .coquille du socle : elle mesure 1320 px avec son propre rembourrage, donc ses bords ne tombent pas au meme endroit que ceux du fil et de la navigation. Deux largeurs voisines qui ne coincident pas se voient plus qu'une seule largeur assumee. */ .rcoq{width:min(94vw,1280px);margin-inline:auto} /* ══ 2. LE FIL, ET LE NOM DU RAYON QUI N'EST PAS UN LIEN ══ La derniere marche du fil est la page courante : elle s'ecrit, elle ne se clique pas. aria-current le dit aux lecteurs d'ecran. */ .fil [aria-current="page"]{opacity:.85} /* ══ 3. LA NAVIGATION ENTRE RAYONS ══ Elle est la RAISON du chantier : passer des huiles a la priere sans repasser par l'accueil. Servie deux fois — en haut, avant la liste, et en bas, la ou l'on finit de parcourir les articles. Elle defile horizontalement sous 700 px : cinq pastilles ne tiennent pas sur une largeur de telephone, et les casser sur deux lignes ferait perdre la lecture du rang. */ .rnav{ width:min(94vw,1280px);margin:14px auto 0; display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding:2px 0 8px; } .rnav::-webkit-scrollbar{display:none} .rnav a{ flex:0 0 auto;display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:0 16px;border-radius:999px; text-decoration:none;color:var(--encre); background:rgba(0,0,0,.26);box-shadow:inset 0 0 0 1px var(--b20); font-size:.86rem;white-space:nowrap; transition:background var(--t-survol) var(--e-doux), box-shadow var(--t-survol) var(--e-doux), transform var(--t-micro) var(--e-doux); } .rnav a .num{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em; color:var(--u3);opacity:.9} .rnav a .cpt{font-family:var(--f-mono);font-size:.68rem;opacity:.55} @media (hover:hover) and (pointer:fine){ .rnav a:hover{background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px var(--b50)} } .rnav a:active{transform:scale(.97)} .rnav a:focus-visible{outline:3px solid var(--u3);outline-offset:3px} /* La page ou l'on est : pleine, dans l'accent du rayon. Le contraste avec les quatre autres doit se voir d'un coup d'oeil — c'est le seul reperage dont dispose quelqu'un qui arrive par Google. */ .rnav a[aria-current="page"]{ background:var(--u2);color:var(--nuit);box-shadow:none;font-weight:700; } .rnav a[aria-current="page"] .num, .rnav a[aria-current="page"] .cpt{color:var(--nuit);opacity:.7} /* ══ 4. L'EN-TETE DE RAYON ══ Le mot geant (RAYONS[].geant dans socle.js) passe derriere le titre, coupe par overflow:clip. Meme traitement que sur l'accueil : il donne son identite au rayon avant qu'on ait lu une ligne. */ .rtete{ position:relative;overflow:clip;isolation:isolate; padding:clamp(26px,5vh,58px) 0 clamp(18px,3vh,30px); } .rtete__mur{ position:absolute;z-index:-1;top:0;left:50%;translate:-50% 0; font-family:var(--f-titre);font-size:clamp(3.2rem,13vw,10rem);line-height:.94; letter-spacing:.01em;text-transform:uppercase;white-space:nowrap; pointer-events:none;user-select:none; color:color-mix(in oklab,var(--u3) 14%,transparent); } .rtete__ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .rtete__num{ font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em; padding:7px 12px;border-radius:999px; background:rgba(0,0,0,.28);color:var(--u3);box-shadow:inset 0 0 0 1px var(--b20); } .rtete__cpt{ font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;font-weight:700; padding:7px 12px;border-radius:999px;background:var(--u2);color:var(--nuit); } .rtete h1{margin:0 0 14px} .rtete__mot{margin:0 0 16px} /* LE DELAI EST ECRIT ICI, AU-DESSUS DE LA LISTE, ET PAS SEULEMENT SUR LA FICHE. Le paiement est integral a la commande : la date doit se lire avant qu'on ait choisi, pas apres. La pastille reprend le marqueur de .pdelai des fiches — meme signe, meme sens. */ .rtete__delai{ display:flex;gap:11px;align-items:flex-start; margin:0;max-width:56ch;font-size:.92rem;line-height:1.55;color:var(--encre2); } .rtete__delai::before{ content:"";flex:none;width:9px;height:9px;margin-top:.52em;border-radius:50%; background:var(--u2);box-shadow:0 0 0 4px color-mix(in oklab,var(--u2) 26%,transparent); } /* ══ 5. LA LISTE ══ */ .rliste{padding:clamp(10px,2vh,20px) 0 clamp(40px,7vh,80px)} /* LE SURVOL DU SOCLE EST RENDU AU LIEN, PAS A LA CARTE. socle.css met cursor:pointer sur .produit entiere — vrai sur l'accueil, ou la carte s'ouvrait au clic. Ici la carte contient DEUX cibles distinctes (le lien vers la fiche, le bouton d'ajout) : un curseur de main sur toute la boite promet un clic qui n'existe pas entre les deux. */ .produit{cursor:default} /* LA REVELATION EST ETEINTE PAR DEFAUT, ET C'EST VOLONTAIRE. socle.css pose .produit{opacity:0} en attendant qu'un script ajoute .visible — sur l'accueil c'est accueil.js qui le fait. Ces pages ne le chargent pas : sans cette remise a zero, un visiteur sans JavaScript (ou un script casse par une erreur en amont) verrait un rayon VIDE. La classe .grille--anime est posee par rayon.js, donc uniquement quand le script tourne pour de bon. */ .produit{opacity:1;transform:none} .grille--anime .produit{opacity:0;transform:translateY(18px)} .grille--anime .produit.visible{opacity:1;transform:none} /* Le lien couvre la photo et le texte : les 45 fiches doivent rester atteignables par un vrai lien. Le bouton d'ajout est son VOISIN — un