/* ==========================================================================
Navigation mobile globale (toutes pages FO) : tabbar basse, burger, menu
accordéon, panneau compte, footer empilé.
Le markup cible (#header_bandeau, #front_menu .titre_menu,
#footer_menus_content) est rendu par $frontDisplay dans le layout partagé,
donc présent sur toutes les pages FO.
Chargé avec media="(max-width: 768px)" — aucun @media ici.
L'habillage des panneaux (#m-nav, #mon_compte_detail) vient de .m-panel
dans base.css ; on ne trouve ci-dessous que leur contenu propre.
========================================================================== */
/* --- Tabbar : tout le bandeau descend en bas d'écran (maquette client) --- */
#header {
position: static;
height: auto;
background: transparent;
}
#header_bandeau {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
z-index: var(--m-z-tabbar);
display: flex;
align-items: center;
gap: 14px;
width: auto;
height: var(--m-tabbar-h);
padding: 0 var(--m-space-4);
padding-bottom: var(--m-safe-b);
background: var(--m-bg);
border-top: 1px solid var(--m-line);
box-shadow: 0 -2px 10px var(--m-shadow);
box-sizing: border-box;
}
#header_bandeau #nom_societe {
display: flex;
align-items: center;
gap: var(--m-space-2);
margin: 0 auto 0 0;
padding: 0;
float: none;
min-width: 0;
overflow: hidden;
}
/* Le logo est le seul contenu du lien de retour à l'accueil : c'est LUI qui
porte la cible, et 36px n'y suffisent pas. On élargit le lien plutôt que
l'image, qui garderait sinon une marge visible. */
#header_bandeau #nom_societe > a,
#header_bandeau #nom_societe {
display: inline-flex;
align-items: center;
min-height: var(--m-tap);
min-width: var(--m-tap);
}
#header_bandeau #nom_societe_img,
#header_bandeau .img_logo_ce {
width: 36px;
height: 36px;
min-width: 36px;
margin: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#header_bandeau #nom_societe p {
margin: 0;
font-size: var(--m-fs-sm);
font-weight: bold;
color: var(--m-ink);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#header_bandeau #nom_societe p.locales {
display: none;
}
/* Bannières de rôle (Agent / Administration) : encombreraient la tabbar */
#bloc_admin,
#bloc_guichet {
display: none;
}
/* Menu desktop remplacé par le burger */
#barre_menu,
#menu_expand,
.spacer {
display: none;
}
/* #bloc_principal réserve en desktop l'espace du menu absolu : inutile ici.
En revanche on réserve l'espace EN BAS pour la tabbar fixe, sinon le
contenu et le footer passent dessous. */
#bloc_principal {
margin-top: 0;
}
body {
padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-b));
}
/* --- Compte / panier / burger : simples enfants flex de la tabbar --- */
#mon_compte,
#cart,
#m-burger {
position: static;
flex: 0 0 auto;
height: var(--m-tap);
margin: 0;
}
#mon_compte {
position: relative;
width: auto;
max-width: 110px;
min-width: var(--m-tap);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
font-size: var(--m-fs-xs);
}
/* #cart porte en desktop width:268px + float:right (littlecart.css), pensés
pour un dropdown : compacté en simple icône dans la tabbar.
Pas de `display` ici, et c'est délibéré : le gabarit en pose un en attribut
— `block` ou `none` selon que la page affiche le panier — qu'aucune règle ne
bat sans !important, lequel forcerait l'affichage sur les pages qui le
masquent. La déclaration `flex` qui vivait ici, et les propriétés
d'alignement qui l'accompagnaient, n'ont donc jamais rien fait. Le centrage
de l'icône vient de la tabbar, qui aligne ses propres enfants. */
#cart {
width: auto;
cursor: pointer;
}
#synthese_petit_panier {
width: auto;
height: var(--m-tap);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 10px;
border: 0;
}
/* Panier dessiné, pas agrandi.
*
* /modules/order/cart/images/cart.png mesure 24x20 et n'a aucune variante haute
* densité. Affiché à 30x30 sur un écran qui compte 3 pixels physiques pour 1
* pixel CSS, il est agrandi d'un facteur 4,5 : le flou est celui de
* l'agrandissement. S'y ajoutait une déformation indépendante de la densité —
* un ratio 24/20 contraint en carré, donc une largeur étirée de 1,25 et une
* hauteur de 1,5.
*
* `content` remplace ce que l'image REND, sans toucher au gabarit qui pose son
* `src` : le fichier d'origine n'est plus téléchargé, et le tracé porte son
* propre ratio, ce qui règle la déformation en même temps que la netteté.
* Couleur relevée sur le fichier d'origine : #FFBF00 sur 90 % des pixels
* opaques. */
#img_synthese_petit_panier {
width: 30px;
height: 30px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 2.6h2.3a1 1 0 0 1 .98.8L5.3 5.4'/%3E%3Cpath d='M5.3 5.4h16.1l-1.7 9.1a1.8 1.8 0 0 1-1.77 1.47H8.6a1.8 1.8 0 0 1-1.77-1.47z'/%3E%3Cpath d='M6.3 8.9h14.2M6.95 12.2h13'/%3E%3Ccircle cx='9.6' cy='19.7' r='1.5' fill='%23FFBF00' stroke='none'/%3E%3Ccircle cx='17.6' cy='19.7' r='1.5' fill='%23FFBF00' stroke='none'/%3E%3C/svg%3E");
}
/* Le compte à rebours du panier se réécrit chaque seconde et sa largeur
varie avec le texte (« 9 min 55s » puis « 19 min 43s », et le passage de
deux chiffres à un). Comme la tabbar est un flex, cette variation
décalait l'icône et tout le groupe en permanence.
Largeur réservée pour la forme la plus longue, et chiffres à chasse fixe
pour que même les secondes ne fassent pas trembler le libellé. */
#compteur_panier {
display: inline-block;
min-width: 58px;
margin-left: var(--m-space-1);
font-size: var(--m-fs-xs);
font-variant-numeric: tabular-nums;
text-align: left;
}
/* --- Petit panier : contenu du panneau ------------------------------------
Échelle de texte : rien sous 13px, et aucun gris sous le seuil AA. Mesuré
sur le rendu : le nom du catalogue et la quantité étaient en #777 sur blanc,
soit 4.48 pour 4.5 requis, et « Vider » à 4.29 sur le socle du pied. Ils
passent en --m-ink-2. Le corps de liste monte de 13 à 15px : la densité
gagnée sur la mise en page n'a pas à être reprise sur la lisibilité.
Le panneau lui-même est habillé par .m-panel--anchored (base.css). Ne restent
ici que les écarts du contenu legacy, dessiné pour un dropdown de 268px.
Parti pris : la table de commande devient une LISTE. Les gabarits rendent
deux par article — produit d'un côté, déclinaison et suppression de
l'autre — et sur 268px de dropdown cette grille tenait. Étirée à la largeur
d'un écran, elle laissait une bande vide de 69px sous chaque article, la
croix seule à droite. La table passe donc en blocs et chaque rangée en
ligne flex : un article = une ligne de produit, puis une ligne de détail
compacte. Rien n'est retiré — quantité, libellé, prix, déclinaison et
suppression sont tous rendus, ils cessent seulement d'être des colonnes.
Le display du nœud n'est plus déclaré ici : .m-panel le gouverne, et son
!important bat déjà le display:block INLINE que cart.js pose en rappelant
.show() après chaque AJAX. */
#resume_petit_panier {
margin-top: 0;
}
/* Barre de défilement fine plutôt que masquée : le panneau est plafonné à
70vh et déborde dès qu'il y a plus de trois articles. Sans elle, rien ne
dirait qu'il reste de la sélection à voir. */
#resume_petit_panier {
scrollbar-width: thin;
scrollbar-color: var(--m-line-4) transparent;
}
#resume_petit_panier::-webkit-scrollbar {
width: 4px;
}
#resume_petit_panier::-webkit-scrollbar-thumb {
border-radius: 2px;
background: var(--m-line-4);
}
/* Les deux bandeaux d'en-tête sont des images de 239 et 268px — la largeur du
dropdown. Sur un panneau qui suit celle de l'écran, elles laissaient un
liseré à droite. Le chapeau n'est que décoratif : il disparaît. Le bandeau
de titre redevient un aplat, et porte le libellé « Ma sélection ». */
#resume_petit_panier #header_little_cart_top {
display: none;
}
#resume_petit_panier #header_little_cart_bottom {
width: auto;
height: auto;
padding: var(--m-space-3) var(--m-space-4);
background-image: none;
background-color: var(--m-navy);
font-family: var(--m-font-bold);
font-size: var(--m-fs);
}
/* La bordure du bloc de détail doublait celle du panneau, et son fond gris
faisait lire la liste comme une table de back-office. */
#resume_petit_panier #little_cart_details {
border: 0;
}
#resume_petit_panier #little_cart_details_table {
display: block;
width: auto;
background: var(--m-bg);
color: var(--m-ink);
}
/* Le corps de table devient une grille souple, et chaque
une tuile. C'est
ce qui permet de REMETTRE ENSEMBLE les deux rangées d'un même article — le
gabarit rend le produit et sa suppression dans deux
frères, et aucune
règle ne peut les reparenter. Posées côte à côte plutôt qu'empilées, la
bande vide de 44px sous chaque article disparaît sans qu'on retire quoi que
ce soit. */
#resume_petit_panier #little_cart_details_table > tbody {
display: flex;
flex-wrap: wrap;
background: var(--m-bg);
color: var(--m-ink);
}
#resume_petit_panier #little_cart_details_table > tbody > tr {
display: flex;
align-items: center;
gap: var(--m-space-2);
padding: 0 var(--m-space-4);
}
/* Les intitulés d'offre et de catalogue ouvrent leur propre ligne. */
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_align_line_offre),
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_align_line_catalogue) {
flex: 1 1 100%;
}
/* L'article et son détail se partagent la leur. La déclinaison se dimensionne
à son texte — « Pour Léa », le nom d'une déclinaison — et se réduit à la
seule croix quand le gabarit ne la renseigne pas. */
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_details_product_name),
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_details_product_name_imposed) {
flex: 1 1 55%;
padding-right: 0;
}
#resume_petit_panier .little_cart_declination_tr {
flex: 0 1 auto;
max-width: 40%;
margin-left: auto;
padding-left: 0;
}
/* Les deux moitiés d'un article portent le même filet : mises bout à bout,
elles n'en dessinent qu'un, sur toute la largeur. align-self les met à la
même hauteur, sinon le filet se casse en marches. */
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_details_product_name),
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_details_product_name_imposed),
#resume_petit_panier .little_cart_declination_tr {
align-self: stretch;
min-height: var(--m-tap);
border-bottom: 1px solid var(--m-line-3);
}
/* Nom de l'offre : l'échelon le plus haut de la liste. En capitales espacées
plutôt qu'en bandeau plein — deux aplats gris empilés (offre puis catalogue)
se disputaient l'attention avec le titre du panneau juste au-dessus. */
#resume_petit_panier .little_cart_align_line_offre {
flex: 1 1 auto;
padding: var(--m-space-4) 0 var(--m-space-1);
background: none;
color: var(--m-navy);
font-family: var(--m-font-bold);
font-size: var(--m-fs-sm);
letter-spacing: .06em;
text-transform: uppercase;
}
/* Catalogue : second échelon, en retrait. */
#resume_petit_panier .little_cart_align_line_catalogue {
flex: 1 1 auto;
padding: 0 0 var(--m-space-2);
background: none;
color: var(--m-ink-2);
font-size: var(--m-fs-sm);
}
/* Ligne de produit : quantité, libellé, prix. */
#resume_petit_panier .little_cart_details_quantity,
#resume_petit_panier .little_cart_details_quantity_imposed {
flex: 0 0 auto;
width: auto;
min-width: 14px;
color: var(--m-ink-2);
font-size: var(--m-fs);
font-variant-numeric: tabular-nums;
text-align: right;
}
#resume_petit_panier .little_cart_details_product_name,
#resume_petit_panier .little_cart_details_product_name_imposed {
flex: 1 1 auto;
width: auto;
min-width: 0;
font-size: var(--m-fs);
line-height: 1.35;
white-space: normal;
}
/* Le prix est la donnée que l'on vient vérifier : chasse fixe pour que les
montants s'alignent d'un article à l'autre malgré l'absence de colonnes. */
#resume_petit_panier #little_cart_details_table .little_cart_align_right {
flex: 0 0 auto;
width: auto;
color: var(--m-navy);
font-family: var(--m-font-bold);
font-size: var(--m-fs);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* Ligne de détail : déclinaison à gauche, suppression à droite, et le filet
qui sépare deux articles. */
/* Le gabarit ouvre cette rangée par une cellule de calage vide ( ) qui
tenait lieu de colonne de quantité. Sans colonnes, elle ne cale plus rien. */
#resume_petit_panier .little_cart_declination_tr > td:first-child {
display: none;
}
#resume_petit_panier .little_cart_details_declination_name,
#resume_petit_panier .little_cart_details_declination_name_imposed {
flex: 1 1 auto;
width: auto;
min-width: 0;
color: var(--m-ink-2);
font-size: var(--m-fs-sm);
}
/* La croix faisait la taille de son image, et occupait seule une bande de
69px. Elle garde sa cible de 44px — c'est la seule action destructive de la
liste — mais la partage désormais avec la ligne de déclinaison. */
#resume_petit_panier .cart_declinations_delete {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
width: auto;
min-width: var(--m-tap);
height: var(--m-tap);
padding: 0;
}
/* L'image du legacy est une croix cerclée de rouge vif. Répétée à chaque
article, elle attirait l'œil avant le libellé et avant la validation, alors
qu'elle sert à défaire. Elle s'éteint au repos et reprend sa couleur sous le
doigt, où le rouge redevient le bon signal. */
#resume_petit_panier .cart_declinations_delete img {
filter: grayscale(1);
opacity: .45;
}
#resume_petit_panier .cart_declinations_delete:active img {
filter: none;
opacity: 1;
}
/* --- Catalogue imposé (« panier de Noël ») -------------------------------
Tant que la sélection n'est pas complète, ce gabarit ne rend ni produit ni
prix : la ligne est une QUESTION posée au bénéficiaire, et le choix se fait,
se refuse ou se refait par des actions posées DANS la cellule du libellé.
Une question a besoin de plus de place qu'un article : elle prend tout ce
que la croix ne réclame pas, au lieu des 55% d'une ligne de produit.
min-width: 0 est indispensable : les libellés sont du texte libre saisi en
base par le CE (msg_ok, msg_ko), leur largeur minimale dépasse vite la
rangée. Sans lui, min-width:auto empêche la case de rétrécir, la croix ne
tient plus à côté et repart à la ligne — une bande vide de 44px par
question, exactement ce que ce fichier vient de supprimer ailleurs. */
#resume_petit_panier #little_cart_details_table > tbody > tr:has(> .little_cart_details_product_name_imposed) {
flex: 1 1 0;
min-width: 0;
align-items: flex-start;
padding-top: var(--m-space-2);
}
#resume_petit_panier .little_cart_details_product_name_imposed {
display: flex;
flex-direction: column;
gap: var(--m-space-2);
min-width: 0;
}
/* La quantité d'une question vaut toujours zéro : elle se cale sur la première
réponse plutôt que de flotter au milieu de la hauteur des deux. */
#resume_petit_panier .little_cart_details_quantity_imposed {
align-self: flex-start;
line-height: var(--m-tap);
}
/* Le legacy peint l'acceptation en vert olive plein et le refus en rouge
sombre plein, sur 1px de rembourrage. Portés à la cible tactile, ces deux
aplats saturés devenaient l'élément le plus fort du panneau — plus fort que
la validation de la commande, pour une question à laquelle on peut répondre
plus tard.
Ils reprennent la hiérarchie de la maquette : l'acceptation poursuit
l'achat, elle est pleine en bleu nuit ; le refus est un chemin légitime mais
secondaire, il est en contour. Le rouge cesse d'annoncer un danger là où il
n'y en a pas. Écart assumé à faire valider — la couleur venait du CE. */
#resume_petit_panier .little_cart_msg_ok,
#resume_petit_panier .little_cart_msg_ko,
#resume_petit_panier .little_cart_details_product_name_imposed a {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
margin: 0;
padding: 0 var(--m-space-3);
border-radius: var(--m-radius-sm);
font-size: var(--m-fs);
line-height: 1.25;
text-align: center;
}
#resume_petit_panier .little_cart_msg_ok {
background: var(--m-navy);
color: var(--m-bg);
}
/* Contour par ombre interne plutôt que par bordure, comme .m-action--secondary :
il ne modifie pas la géométrie et n'entre pas en conflit avec les bordures du
legacy. */
#resume_petit_panier .little_cart_msg_ko {
background: transparent;
color: var(--m-navy);
box-shadow: inset 0 0 0 1px var(--m-line-4);
}
/* « Sélection à faire » n'est pas une réponse mais un renvoi vers le catalogue :
il se lit comme un lien, pas comme un troisième bouton. */
#resume_petit_panier .little_cart_details_product_name_imposed a {
justify-content: flex-start;
padding: 0;
color: var(--m-navy);
text-decoration: underline;
}
/* --- Pied ---------------------------------------------------------------
Le fond ardoise du legacy pesait autant que le bandeau de titre, en bas de
panneau et sous la ligne de flottaison. Il devient un simple socle séparé
par un filet. */
#resume_petit_panier #footer_little_cart {
padding: var(--m-space-3) var(--m-space-4);
border-top: 1px solid var(--m-line-3);
border-bottom-left-radius: var(--m-radius);
border-bottom-right-radius: var(--m-radius);
background: var(--m-bg-alt);
}
#resume_petit_panier #footer_little_cart_table {
width: 100%;
}
/* Le chemin structurel est repris de la primitive, et non raccourci en
`#resume_petit_panier #price_little_cart` : à deux ID contre deux, ce sont
les sélecteurs de type qui départagent, et la primitive en compte trois de
plus. Mesuré : sans cela, ses `flex: 1 1 0` gagnaient, les trois cellules se
partageaient la rangée en tiers et « Valider ma sélection » passait à la
ligne dans 105px. Ni « Vider » ni le prix ne sont des actions : ils se
dimensionnent à leur texte, le bouton prend le reste. */
#resume_petit_panier #footer_little_cart_table > tbody > tr > #delete_little_cart,
#resume_petit_panier #footer_little_cart_table > tbody > tr > #price_little_cart {
flex: 0 0 auto;
width: auto;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
padding: 0 var(--m-space-2);
}
/* « Vider » vide le panier entier : action rare et destructive, elle ne doit
pas se lire comme le pendant de la validation. En lien souligné plutôt qu'en
second bouton. */
#resume_petit_panier #delete_little_cart {
color: var(--m-ink-2);
font-size: var(--m-fs);
text-decoration: underline;
}
/* Le total est la donnée de sortie du panneau : il porte l'accent que le
bouton n'a plus besoin de prendre tout seul. */
#resume_petit_panier #price_little_cart {
color: var(--m-navy);
font-family: var(--m-font-bold);
font-size: var(--m-fs-lg);
font-variant-numeric: tabular-nums;
}
/* Sur une offre à souhaits, le prix n'est pas rendu : la cellule reste dans la
table et laisserait une gouttière à droite du « Vider ». */
#resume_petit_panier #footer_little_cart_table > tbody > tr > #price_little_cart:empty {
display: none;
}
/* Sur un catalogue imposé dont la sélection n'est pas complète, little_cart.phtml
ne rend PAS le bouton de validation (declinationsRemaining != 0). « Vider » et
le prix, dimensionnés à leur texte, se tassaient alors à gauche en laissant
les deux tiers de la rangée vides. Sans action principale, ils se répartissent
sur toute la largeur. */
#resume_petit_panier #footer_little_cart_table > tbody > tr:not(:has(#button_little_cart)) {
justify-content: space-between;
}
#resume_petit_panier #button_little_cart {
padding: 0 var(--m-space-3);
font-size: var(--m-fs);
}
#m-burger {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: var(--m-tap);
border: 0;
background: transparent;
cursor: pointer;
}
#m-burger .m-burger-bars {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 30px;
height: 30px;
padding: var(--m-space-1);
}
/* Sélecteur enfant : le conteneur .m-burger-bars est lui-même un , une
règle `#m-burger span` peindrait aussi le conteneur. */
#m-burger .m-burger-bars > span {
display: block;
width: 100%;
height: 3px;
background: var(--m-brand);
border-radius: 3px;
transition: transform .25s, opacity .2s;
}
body.m-nav-open #m-burger .m-burger-bars > span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
body.m-nav-open #m-burger .m-burger-bars > span:nth-child(2) {
opacity: 0;
}
body.m-nav-open #m-burger .m-burger-bars > span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* Le nom ne s'affiche pas dans la tabbar (elle doit rester compacte) mais
dans le panneau. Enfant direct : ne doit pas masquer la copie du panneau. */
#mon_compte > #nom_utilisateur {
display: none;
}
#mon_compte > p {
margin: 0;
font-size: var(--m-fs-xs);
}
/* Icône dessinée, pas découpée dans le sprite.
*
* /images/sprite_menu_connexion.png fait 90x30 pour trois icônes de 30x30, et
* il n'en existe aucune variante @2x ou @3x. Affiché à 30x30 CSS px sur un
* téléphone qui compte 3 pixels physiques pour 1 pixel CSS, le navigateur
* agrandit ce bitmap d'un facteur 3 : le flou est celui de l'agrandissement,
* aucun réglage de taille ou de netteté ne le rattrape.
*
* Un tracé vectoriel reste net à toutes les densités. Il est posé en noir
* plutôt qu'en gris clair — le sprite était pensé pour le header sombre du
* bureau, la tabbar mobile est blanche — ce qui rend du même coup inutile le
* filtre d'assombrissement, et avec lui la précaution de tenir le badge
* d'alerte hors de cet élément.
*
* Le badge reste néanmoins ancré sur #mon_compte : il y est positionné, pas
* seulement à l'abri du filtre. */
#mon_compte_img {
position: relative;
float: none;
margin: 0;
width: 30px;
height: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='7.6' r='4.1'/%3E%3Cpath d='M12 13.6c-4.42 0-8 2.78-8 6.2 0 .11.09.2.2.2h15.6c.11 0 .2-.09.2-.2 0-3.42-3.58-6.2-8-6.2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 26px 26px;
opacity: .8;
}
/* Badge « profil incomplet » : 25x25 en float:right dans un bloc de 200px en
desktop, il recouvrait quasiment l'icône compte de 30x30. Réduit en badge
ancré, hors de l'élément filtré. */
#mon_compte > #picto_warning_img {
position: absolute;
top: 0;
right: 0;
float: none;
margin: 0;
width: 14px;
height: 14px;
}
/* --- Contenu du panneau compte (l'habillage vient de .m-panel) --- */
#mon_compte_detail {
padding: 0;
border-radius: 0;
box-shadow: none;
width: auto;
height: auto;
}
#mon_compte_entete {
position: static;
width: auto;
height: auto;
padding: var(--m-space-4) var(--m-space-5);
display: flex;
align-items: center;
gap: var(--m-space-3);
border-bottom: 0;
background: var(--m-bg-alt);
}
/* Le message du badge ne vit que dans son attribut title (tooltip desktop),
invisible au tap : le JS l'extrait et l'affiche en clair ici. */
.m-warning-text {
margin: 0;
padding: 0 var(--m-space-5) var(--m-space-4);
border-bottom: 1px solid var(--m-line);
background: var(--m-bg-alt);
color: var(--m-warn);
font-size: var(--m-fs-sm);
line-height: 1.4;
}
#mon_compte_entete #nom_utilisateur {
display: block;
font-family: var(--m-font-bold);
font-weight: bold;
font-size: var(--m-fs-field);
}
/* Sprite : sa fenêtre de découpe fait 30x30 à background-position 0 5px
(layout.css). L'agrandir à 34x34 ne grossit pas l'icône, ça laisse
apparaître 4px du sprite voisin — une barre parasite à droite de
l'icône, visible en état connecté. On respecte la fenêtre d'origine. */
#mon_compte_detail_img {
float: none;
margin: 0;
width: 30px;
height: 30px;
}
/* Le nom est stylé blanc en desktop (entête bleu marine) et #mon_compte_detail
p est en gris clair : invisibles sur notre entête claire. */
#mon_compte_entete #nom_utilisateur p,
#mon_compte_entete #nom_utilisateur p span {
float: none;
margin: 0;
color: var(--m-ink);
}
#mon_compte_menu {
position: static;
width: auto;
margin: 0;
background: none;
border-bottom: 0;
}
#mon_compte_menu a {
display: block;
}
#mon_compte_menu span {
display: flex;
align-items: center;
min-height: var(--m-tap);
margin: 0;
padding: 13px var(--m-space-5);
border: 0;
border-bottom: 1px solid var(--m-line);
background: var(--m-bg);
color: var(--m-ink-2);
font-size: var(--m-fs);
text-align: left;
}
/* Le survol desktop change AUSSI le padding (5px 20px au lieu de 5px 10px)
et la marge : la ligne se rétractait sous le doigt, le contenu sautait.
On fige donc la géométrie et on ne laisse varier que le fond. */
#mon_compte_menu span:hover,
#mon_compte_menu span:active {
background: var(--m-line-2);
padding: 13px var(--m-space-5);
margin: 0;
}
/* Ces libellés sont calés à la main pour le dropdown du bureau (float et
décalage en pourcentage). Sans neutralisation, « Mes demandes » atterrit à
x=-24px, tronqué hors écran, et les deux autres sont décalés de 25%.
!important : ce calage vit dans l'attribut style de Header.phtml, où il doit
rester — le gabarit est partagé, et une feuille du front ne le suit pas
partout. Aucune règle ne bat un attribut style autrement. */
#mon_compte_menu span p.mon_compte_libelle,
#mon_compte_menu span p.mon_compte_libelle_droite {
position: static !important;
left: auto !important;
float: none !important;
}
#mon_compte_menu span p {
color: var(--m-ink-2);
}
/* Icônes sprite : cadres positionnés au pixel près en desktop, retaillés hors
de leur fenêtre de crop ici donc illisibles. Masqués plutôt que réparés,
le libellé texte suffit (retour client). */
#mon_compte_menu span img,
#mon_compte_menu span div {
display: none;
}
/* --- Menu burger : accordéon (habillage .m-panel) --- */
#m-nav {
padding: var(--m-space-1) 0 24px;
}
#m-nav .m-nav-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--m-space-4) var(--m-space-5);
border: 0;
border-bottom: 1px solid var(--m-line);
border-left: 5px solid var(--m-rule);
background: var(--m-bg);
font-size: var(--m-fs-lg);
text-align: left;
cursor: pointer;
}
#m-nav .m-nav-label {
font-family: var(--m-font-bold);
font-weight: bold;
text-transform: uppercase;
}
#m-nav .m-nav-caret {
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-left: 10px;
border-right: 2px solid var(--m-caret);
border-bottom: 2px solid var(--m-caret);
transform: rotate(45deg);
transition: transform .2s;
}
#m-nav .m-nav-item.open .m-nav-caret {
transform: rotate(-135deg);
}
#m-nav .m-nav-sub {
display: none;
padding: var(--m-space-1) 0 var(--m-space-3);
background: var(--m-bg-alt);
}
#m-nav .m-nav-item.open .m-nav-sub {
display: block;
}
#m-nav .m-nav-sub .rubrique {
margin: var(--m-space-3) var(--m-space-5) 2px;
font-family: var(--m-font-bold);
font-weight: bold;
text-transform: uppercase;
font-size: var(--m-fs-sm);
color: var(--m-ink-2);
}
#m-nav .m-nav-sub .sous_rubrique {
margin: 0;
}
#m-nav .m-nav-sub .sous_rubrique a {
display: flex;
align-items: center;
min-height: var(--m-tap);
padding: var(--m-space-3) 22px;
box-sizing: border-box;
color: var(--m-ink-2);
font-size: var(--m-fs);
text-decoration: none;
border-bottom: 1px solid var(--m-line-2);
}
#m-nav .m-nav-sub .sous_rubrique a:active {
background: var(--m-line-2);
}
/* --- Footer empilé ---
`float: none` compte autant que le reste : le plan du site, déplié par le
bouton du pied de page, reste flottant à gauche et se dimensionne donc à son
contenu — mesuré, 232px pour 375 disponibles, tout le plan du site rangé
dans une colonne étroite avec du vide à droite. Ses enfants avaient bien été
déflottés, lui non.
Le `display` n'est volontairement pas déclaré : `.btn_plan_site` pilote
l'affichage de ce bloc par `toggle()`, donc en attribut, et le forcer
empêcherait de le replier. */
#footer {
position: static;
width: auto;
left: auto;
float: none;
}
#footer_menus,
#footer_infos {
width: auto;
margin: 0;
padding: 0;
float: none;
}
/* Le bouton de repli du plan du site est calé à `right: -23px`, en débord
volontaire du conteneur — une convention de bureau, où la gouttière laisse
la place. Le footer occupant désormais toute la largeur, il sortait de
l'écran de 8px et y ramenait une barre de défilement horizontale. */
#footer #footer-fold {
right: var(--m-space-2);
}
#footer_menus_head {
display: none;
}
#footer_menus_content .bloc_footer_menu {
display: block;
width: auto;
float: none;
box-sizing: border-box;
padding: 10px var(--m-space-4);
}
#footer_infos {
display: flex;
flex-wrap: wrap;
gap: var(--m-space-1) 14px;
justify-content: center;
padding: 14px var(--m-space-3);
}
/* Conteneur fixe en desktop. float:left + width:auto = dimensionnement au
contenu : une fois les liens empilés, le bloc s'effondrait à la largeur du
plus long lien. */
#footer_container {
position: static;
float: none;
width: auto;
max-width: 100%;
left: auto;
right: auto;
bottom: auto;
background: var(--m-bg-footer);
border-top: 1px solid var(--m-line-3);
}
#footer_container #footer_menu,
#footer_container #footer_menu ul {
display: block;
width: auto;
height: auto;
padding: 0;
margin: 0;
}
/* Liens empilés, une ligne par lien. Le rendu desktop (liens en ligne séparés
par un border-left sur `li + li`) casse mal ici : passages à la ligne
imprévisibles, séparateur orphelin en début de 2e ligne, et zones tactiles
de 15px de haut. */
#footer_container #footer_menu ul li,
#footer_container #footer_menu ul li + li {
display: block;
float: none;
width: auto;
padding: 0;
border-left: 0;
border-bottom: 1px solid var(--m-line-3);
}
#footer_container #footer_menu ul li:last-child {
border-bottom: 0;
}
/* « Plan du site » n'a pas de (c'est un piloté en JS) : on cible
aussi le pour lui donner la même zone tactile. */
#footer_container #footer_menu ul li a,
#footer_container #footer_menu ul li > h3 {
display: flex;
align-items: center;
justify-content: center;
min-height: var(--m-tap);
margin: 0;
padding: 0 var(--m-space-4);
box-sizing: border-box;
color: var(--m-navy);
font-size: var(--m-fs);
}
/* Choix de la langue, repris du bandeau dans le panneau de menu : il n'y a
pas la place de le porter dans une barre de 64px, et le masquer sans le
reprendre retirait le seul point de bascule de langue du front. */
#m-nav .m-nav-locales {
display: flex;
flex-wrap: wrap;
gap: var(--m-space-2);
padding: var(--m-space-4);
border-top: 1px solid var(--m-line);
}
#m-nav .m-nav-locales a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--m-tap);
min-height: var(--m-tap);
padding: 0 var(--m-space-3);
border: 1px solid var(--m-line-4);
border-radius: var(--m-radius-sm);
color: var(--m-ink-2);
font-size: var(--m-fs);
text-decoration: none;
}