cliquable, le tap
remonte à lui : la cible s'élargit sans rien changer au comportement.
Ne pas toucher au `background-repeat` : la croix n'est PAS dessinée par le
décalage déclaré, c'est une répétition de la planche qui l'amène dans la
boîte. Passé en `no-repeat`, le bouton devient invisible — mesuré. */
.close_popin,
.close_popin_alert {
position: relative;
}
.close_popin::after,
.close_popin_alert::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: var(--m-tap);
height: var(--m-tap);
transform: translate(-50%, -50%);
}
/* Boutons des popins alert / confirm : dimensionnés sobrement pour la souris
dans layout.css, relevés ici à la cible tactile et empilables. */
.popup_panel {
flex-wrap: wrap;
}
.popup_panel input[type="button"] {
flex: 1 1 auto;
min-height: var(--m-tap);
padding: 10px 18px;
}
.popup_content input[type="text"] {
min-height: var(--m-tap);
}
/* Habillage de ces mêmes popins. Il vit ici et non dans layout.css : cette
feuille-là sert aussi le bureau, où le rendu par défaut du navigateur est
celui d'avant le ticket, et le ticket ne porte que sur le petit écran. */
.popup_content {
color: var(--m-ink-2);
font-family: "klavika_regular";
font-size: var(--m-fs);
line-height: 1.4;
}
.popup_message {
margin-bottom: 18px;
}
.popup_panel {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.popup_panel input[type="button"] {
padding: 7px 18px;
border: 1px solid var(--m-navy);
border-radius: var(--m-radius-sm);
background: var(--m-navy);
color: var(--m-bg);
font-family: "klavika_regular";
font-size: var(--m-fs-sm);
cursor: pointer;
}
/* Le second bouton d'un confirm est l'action d'abandon : elle ne doit pas
peser autant que la validation. */
.popup_panel input[type="button"] + input[type="button"] {
background: var(--m-bg);
color: var(--m-navy);
}
.popup_panel input[type="button"]:hover {
opacity: .85;
}
/* Le champ de saisie d'un jPrompt porte un size=30 en dur dans le plugin */
.popup_content input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
}
/* Certaines popins ne portent pas leurs actions en
dans des cellules de tableau, avec un
rembourrage de 10px posé en attribut inline. Mesurés sur la confirmation
d'abandon du panier : « CONFIRMER » et « ANNULER » à 34px de haut, sous le
seuil — sur la popin qui décide de vider un panier. */
.ui-dialog .bouton_validation {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
box-sizing: border-box;
}
/* Zones de saisie d'une popin : le legacy les dimensionne par `cols`/`size`,
attributs de présentation que le CSS de la page ne couvre pas puisque
jQuery UI déplace la popin sur , hors de tout conteneur stylé. Mesuré
sur le commentaire de commande : `cols="60"` donne 501px de champ dans une
popin de 366 — le contenu débordait de 165px et la popin s'ouvrait avec une
barre de défilement horizontale, le texte saisi partant hors écran. */
.ui-dialog textarea,
.ui-dialog input[type="text"],
.ui-dialog input[type="email"],
.ui-dialog input[type="password"],
.ui-dialog input[type="number"],
.ui-dialog select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Actions d'une popin : la géométrie et la gouttière viennent de la primitive
.m-actions / .m-action, à laquelle cette structure est branchée plus haut.
Ne reste ici que la
qui les porte : centrée et dimensionnée à son
contenu par le gabarit, elle doit sortir de sa mise en page de tableau pour
que la rangée puisse s'exprimer. */
.ui-dialog .corps_popin > table,
.ui-dialog .corps_popin > table > tbody {
display: block;
width: 100%;
}
/* Titre d'une popin : le bouton de fermeture est un flottant à droite, donc
hors flux — le libellé passait dessous dès qu'il tenait sur deux lignes,
ce qui est systématique à 390px. */
.ui-dialog .titre_popin {
display: flex;
align-items: flex-start;
gap: var(--m-space-2);
}
.ui-dialog .titre_popin > .close_popin {
flex: 0 0 auto;
float: none;
margin-left: auto;
}
/* --------------------------------------------------------------------------
Sélecteur de date jQuery UI
Les champs date du tunnel sont en lecture seule : le calendrier est le SEUL
moyen de les renseigner, donc un passage obligé du parcours. Mesuré en
390px : cellules de jour à 39x26, sélecteur de mois à 25px, flèches à 29px
— on vise à côté au doigt.
-------------------------------------------------------------------------- */
#ui-datepicker-div {
max-width: calc(100vw - 2 * var(--m-space-3));
box-sizing: border-box;
}
#ui-datepicker-div table {
width: 100%;
}
#ui-datepicker-div td a,
#ui-datepicker-div td span {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
padding: 0;
text-align: center;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
width: var(--m-tap);
height: var(--m-tap);
}
#ui-datepicker-div .ui-datepicker-title select {
min-height: var(--m-tap);
font-size: var(--m-fs-field);
}
/* --------------------------------------------------------------------------
Boutons générés par LogiCE\Helper\Html::getBtn
L'helper écrit une largeur en dur dans l'attribut style
(``), donc inatteignable autrement
qu'avec !important. Une seule règle couvre tous les boutons de toute
l'application — les 200px des popins d'assurance comme les autres — sans
toucher au PHP.
-------------------------------------------------------------------------- */
.btnconteneur {
float: none !important;
width: 100% !important;
}
.btnconteneur .btn > div[style] {
width: auto !important;
min-width: 0 !important;
box-sizing: border-box;
}
/* Sous 16px, Safari iOS zoome au focus et ne dézoome jamais. Le legacy est en
12-15px un peu partout : on relève tous les champs du FO d'un coup. */
input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=hidden]),
select,
textarea {
font-size: var(--m-fs-field);
}
/* --------------------------------------------------------------------------
Confirmation d'ajout au panier
Le socle la pose en `position: absolute` à left:42% / top:20% de la PAGE :
elle est calée sur le document et non sur l'écran, donc selon l'endroit où
l'on a défilé elle atterrit à cheval sur le bandeau de subvention, voire
hors du champ de vision. Sur un écran de 390, ses 268px de large laissent
par ailleurs le contenu à l'étroit.
Traité ici et non dans applicatif/produit.css : cette feuille-là sert aussi
le bureau, où le placement d'origine reste celui du ticket précédent.
Le voile passe par une ombre portée démesurée plutôt que par un élément
supplémentaire — produit.js appelle bien $("#flou").show(), mais aucun
élément #flou n'existe dans le socle, l'assombrissement n'a donc jamais eu
lieu. Cette forme évite d'ajouter du DOM et de toucher au script.
-------------------------------------------------------------------------- */
/* Le placement — ancrage à l'écran, centrage, voile — vaut pour les deux
rendus et vit dans applicatif/produit.css. Ne reste ici que ce qui tient au
petit écran : 268px y laissent le libellé à l'étroit.
`min()` et non une largeur nue : la borne doit être là où est la valeur.
applicatif/produit.css pose bien un max-width, mais dans une autre feuille
— la popin ne débordait que parce que celle-là était chargée. Mesuré à
trois largeurs après correction : 280 rend 248, 390 rend 358, 768 rend 380. */
#add_to_cart {
width: min(380px, calc(100vw - 2 * var(--m-space-4)));
border-radius: var(--m-radius);
}
/* Voile. Obtenu par une ombre portée démesurée plutôt que par un élément
supplémentaire : produit.js appelle bien $("#flou").show(), mais aucun
élément #flou n'existe dans le socle — l'assombrissement n'a donc jamais eu
lieu. Cette forme évite d'ajouter du DOM et de toucher au script.
Mobile seulement : c'est de l'habillage, pas du placement. Au bureau la
popin n'assombrissait rien, et une ombre n'intercepte pas les clics — elle
laisserait croire à une page bloquée qui ne l'est pas.
Le conteneur est rendu VIDE dans la page produit et rempli plus tard par
l'AJAX : sans la garde de vacuité, l'ombre assombrirait tout l'écran dès le
chargement, pour une popin inexistante. */
#add_to_cart:not(:empty) {
box-shadow: 0 10px 40px var(--m-shadow-panel), 0 0 0 100vmax rgba(0, 0, 0, .45);
}
#add_to_cart_header {
padding: var(--m-space-3) var(--m-space-4);
font-size: var(--m-fs);
}
/* Libellé de l'offre ajoutée : c'est l'information de la popin, elle doit se
lire avant l'action. */
.add_to_cart_produit {
color: var(--m-navy);
font-size: var(--m-fs-field);
font-weight: bold;
line-height: 1.35;
}
#add_to_cart_details {
border-bottom: 0;
background: var(--m-bg);
padding: var(--m-space-5) var(--m-space-5) 0;
}
#footer_add_to_cart {
padding: var(--m-space-5);
}
#footer_add_to_cart_table {
width: 100%;
border-spacing: var(--m-space-2) 0;
}
/* Les actions faisaient 5px de rembourrage : injouables au doigt. */
.button_add_to_cart {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 7px 14px;
border-radius: var(--m-radius-sm);
}
/* Confirmation d'ajout au panier, variante subvention : le gabarit y liste
une quantité codée en dur à 1, qui n'a pas de sens pour une demande de
subvention, suivie de deux cellules vides. Sur 390px, ce « 1 » orphelin et
ses colonnes fantômes prennent la moitié de la ligne au libellé. Le tableau
reste tel quel côté bureau : c'est le rendu d'avant le ticket. */
#add_to_cart .m-cart-subsidy .add_to_cart_details_quantity,
#add_to_cart .m-cart-subsidy td.add_to_cart_details_product_name + td.add_to_cart_details_product_name,
#add_to_cart .m-cart-subsidy td.little_cart_align_right {
display: none;
}
/* La ligne restante n'a plus qu'une cellule utile : elle prend la largeur. */
#add_to_cart .m-cart-subsidy td.add_to_cart_details_product_name {
width: auto;
}
/* --------------------------------------------------------------------------
Pages offre et produit : contenu réduit à la largeur de l'écran
Le template d'une offre ou d'un produit, et le panneau d'achat qui le
flanque, sont mis en page pour le bureau sur 1000px. Le cadre de page
quitte ses 1000px pour que le bandeau de l'offre tienne dans l'écran ;
scripts/mobile/produit.js regroupe les blocs du contenu dans
.m-produit-reduit, qui garde les 1000px et que le script réduit (zoom) à
la largeur disponible — le rendu qu'avaient ces pages avant la version
mobile. Le bandeau de l'offre est ramené à l'écran lui aussi : des
templates lui imposent 1000px dans leur propre