/* ============================================================================ EL MODE — le rayon « Article simple personnalisé » CE FICHIER NE REDÉFINIT RIEN. Les trois pages sont des pages de collection : elles portent css/pack.css, dont elles reprennent la grille, la sélection, le bloc CCP, le récapitulatif et la barre flottante. Ne vivent ici que les trois choses qu'un article personnalisé ajoute — les tailles sur la ligne, le champ du logo, le champ de la phrase — plus la vitrine à trois tuiles de /personnalise.html. AUCUNE COULEUR EN DUR (règle n°3 du socle) : tout passe par css/tokens.css. ========================================================================== */ /* ========================================================================== /personnalise.html — trois produits, pas des articles La tuile reprend .bloc-rayon de css/site-1.2.css, dans son allure « vitrine » : la photo entière, centrée sur le fond, et le nom à l'encre dessous. C'est exactement le cas qu'elle traite — un visuel carré, pas une bannière. On ne lui ajoute qu'une ligne : ce que la page permet de faire, qui n'existe pas sur une tuile de rayon. ========================================================================== */ /* ICI LA PHOTO ET LE TEXTE NE SE SUPERPOSENT PAS, ET C'EST LA DIFFÉRENCE AVEC UNE TUILE DE RAYON. .bloc-rayon empile les deux : la photo occupe tout le cadre et le nom se pose par-dessus, en bas. Ça marche pour un mot. Ici chaque tuile porte trois lignes — le nom, ce qu'on personnalise, le mot d'action — et la hauteur qu'elles prennent dépend de la largeur de l'écran ET de la langue : la même note fait deux lignes en français et trois en arabe. Toute réserve en pixels (on avait essayé 88) est donc juste sur un écran et fausse sur le suivant, où le nom passe sur la photo. On rend donc la photo au flux : elle occupe une bande en haut, le texte vient DESSOUS, et la tuile grandit de ce dont le texte a besoin. */ .perso-tuile.bloc-rayon{aspect-ratio:auto;} /* LA HAUTEUR EST PORTEE PAR LA PHOTO, PAS PAR SON CADRE, ET C'EST TOUT L'INVERSE DU SOCLE. .bloc-rayon-vitrine pose son img en height:100% dans un cadre en position:absolute : le 100% se resout sur une hauteur connue d'avance. Ici le cadre est au flux ; sa hauteur viendrait de son contenu et celle du contenu de son cadre. Le pourcentage est alors cyclique, le navigateur retombe sur la hauteur intrinseque de l'image, et on obtient ce qui a ete mesure : 383 px d'image dans un cadre de 340. On donne donc la hauteur a l'image et on laisse le cadre la suivre. */ .perso-tuile .bloc-rayon-image{ position:relative;inset:auto;height:auto; } .perso-tuile .bloc-rayon-image img{ width:auto;height:clamp(170px,30vw,280px);max-width:100%; } /* La grande tuile est deux fois plus large : sa photo a le droit d'etre plus haute, sinon elle flotte, perdue au milieu d'une bande vide. */ .perso-tuile.bloc-rayon-large .bloc-rayon-image img{height:clamp(200px,34vw,340px);} /* height:100% servait a coller le texte au bas d'une photo qui remplissait le cadre. La photo n'y est plus : le bloc reprend la hauteur de son texte. */ .perso-tuile .bloc-rayon-corps{height:auto;} .bloc-rayon-note{ margin:6px 0 0;max-width:34ch; color:var(--texte-3);font-size:.85rem;line-height:1.5; } /* La tuile est un lien : le mot d'action évite qu'on la prenne pour une illustration. Il reste discret — la photo fait le travail. */ .bloc-rayon-action{ margin:10px 0 0; color:var(--orange-vif);font-size:.74rem; letter-spacing:.18em;text-transform:uppercase; } :root[lang="ar"] .bloc-rayon-action{letter-spacing:0;text-transform:none;font-size:.86rem;} /* ========================================================================== Les tailles, sur la ligne de la sélection POURQUOI LA RANGÉE PREND TOUTE LA LARGEUR. .pack-choix est une ligne en flex : nom, prix, retirer. Quatre boutons de plus dedans auraient écrasé le nom sur deux mots. flex-basis:100% avec flex-wrap sur le parent les fait tomber SOUS la ligne, où ils ont la place d'être cliquables au pouce. ========================================================================== */ .pack-choix{flex-wrap:wrap;} .perso-tailles{ flex:0 0 100%; display:flex;align-items:center;flex-wrap:wrap;gap:6px; margin-top:8px; } .perso-tailles-titre{ margin-inline-end:4px; color:var(--texte-3);font-size:.72rem; letter-spacing:.14em;text-transform:uppercase; } :root[lang="ar"] .perso-tailles-titre{letter-spacing:0;text-transform:none;font-size:.84rem;} /* 44 px de côté : c'est la taille d'une cible tactile tenable. En dessous, on choisit L en voulant M, et la commande part fausse. */ .perso-taille{ min-width:44px;min-height:38px;padding:0 10px; background:var(--fond-2);color:var(--texte-1); border:1px solid var(--ligne);border-radius:var(--radius); font:inherit;font-size:.86rem;letter-spacing:.06em; cursor:pointer; transition:background .18s,border-color .18s,color .18s; } .perso-taille:hover{border-color:var(--orange-vif);color:var(--texte-0);} .perso-taille:focus-visible{outline:2px solid var(--orange-vif);outline-offset:2px;} /* LE CHOIX SE VOIT SANS LIRE. Un simple changement de nuance ne se distingue pas au soleil sur un téléphone : fond plein et texte inversé. */ .perso-taille-choisie, .perso-taille-choisie:hover{ background:var(--orange-vif);color:var(--sur-orange); border-color:var(--orange-vif);font-weight:600; } .perso-aide{ margin:8px 0 0; color:var(--texte-3);font-size:.84rem;line-height:1.5; } /* ========================================================================== Le logo ========================================================================== */ /* LE BLOC EST LE REPÈRE DE POSITIONNEMENT DE SON INPUT, ET C'EST VITAL. .perso-fichier est en position:absolute sur 1 px : sans repère ici, il se cale sur le premier ancêtre positionné, quelque part plus haut dans la page. Le refus d'envoi de js/perso.js fait alors un scrollIntoView sur un point invisible, ailleurs — la cliente lit « joignez votre logo » et la page ne bouge pas vers le champ à remplir. */ .perso-logo-bloc{position:relative;} /* L'INPUT NATIF EST MASQUÉ, PAS SUPPRIMÉ. Son bouton « Parcourir… » n'est stylable dans aucun navigateur et s'affiche dans la langue du système, donc en anglais sur la moitié des téléphones. Le