/* Le pied de page — GÉNÉRÉ, ne pas modifier à la main. La source est script/piede.py. Régénérer avec footer_sito.py. */ /* Il rimbalzo elastico di macOS scopre lo sfondo del DOCUMENTO quando si spinge oltre il fondo: era bianco, e sotto il piede nero compariva una banda chiara. Nero sull'`html`, bianco sul `body`: il contenuto resta chiaro, il rimbalzo diventa continuo col piede — e in cima con la fascia d'annuncio, anch'essa nera. */ html{background:#000} body{background:#fff} .pie{background:#000;color:#fff;margin-top:clamp(40px,5vw,70px)} .pie a{color:inherit;text-decoration:none} .pie ul{list-style:none;margin:0;padding:0} .pie h3,.pie h4,.pie p{margin:0} /* ---- 1. la newsletter, en tête et sur toute la largeur ---- C'est le changement d'ordre demandé : sur autry-usa.com l'inscription est un bloc à part, pas une colonne parmi d'autres. Le texte est centré et la largeur bornée à 620px — au-delà, les lignes deviennent trop longues pour être lues confortablement. */ .pie__nl{border-bottom:1px solid #242424;padding:clamp(46px,5.5vw,74px) clamp(15px,3vw,40px)} .pie__nlin{max-width:620px;margin:0 auto;text-align:center} /* `color` explicite : sans elle, le titre heritait du theme de la page. Sur les fiches produit le theme donne du blanc, sur l'accueil et les 41 collections il donne du NOIR — sur le fond noir du pied. Le titre « Registrati alla newsletter » etait donc invisible sur 42 pages sur 43, a toutes les largeurs, ordinateur compris : contraste mesure 1.00. L'element occupait bien sa place, ce qui explique qu'on ne voyait qu'un blanc inexplicable au-dessus du formulaire. */ .pie__nlin h3{font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.2;letter-spacing:.01em;color:#fff} .pie__nltxt{font-size:14px;color:#b0b0b0;line-height:1.65;margin-top:14px} /* Le champ et le bouton partagent une seule bordure : deux bordures côte à côte donnaient un trait double au milieu. */ .pie__form{display:flex;border-bottom:1px solid #4a4a4a;margin:30px auto 0;max-width:430px;transition:border-color .2s} .pie__form:focus-within{border-bottom-color:#fff} .pie__form input{flex:1;min-width:0;background:none;border:none;color:#fff;padding:13px 2px;font-family:inherit;font-size:14px;outline:none} .pie__form input::placeholder{color:#7a7a7a} .pie__form button{background:none;border:none;color:#fff;font-family:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;padding:0 4px 0 18px;cursor:pointer;white-space:nowrap;transition:opacity .2s} .pie__form button:hover{opacity:.6} .pie__privacy{font-size:12px;color:#767676;line-height:1.6;margin-top:22px} /* ---- 2. les menus, en dessous ---- */ .pie__wrap{max-width:var(--maxw,1500px);margin:0 auto;padding:clamp(40px,4.5vw,60px) clamp(15px,3vw,40px) 30px} .pie__cols{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;gap:40px;padding-bottom:44px} .pie__logo{display:inline-block} .pie__logo svg{height:30px;width:auto;margin-bottom:16px;fill:#fff} .pie__blurb{font-size:13px;color:#969696;max-width:34ch;line-height:1.75} /* Réseaux : le texte au-dessus dit « seguici », les icônes doivent suivre immédiatement. Trait fin blanc, pas d'aplat : sur le noir du pied de page un rond plein ferait tache à côté du lettrage. */ .pie__social{display:flex;gap:10px;margin-top:20px} /* 34px de boite pour 18px de dessin (avant: 30 et 15), a la demande du client. L'ecart entre deux boutons reste 34+10=44px, donc la cible tactile de 40px posee plus bas ne deborde toujours pas sur sa voisine. */ .pie__social a{display:flex;width:34px;height:34px;align-items:center;justify-content:center;color:#fff;opacity:.7;transition:.2s} .pie__social a:hover{opacity:1;transform:translateY(-1px)} .pie__social svg{width:18px;height:18px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block} /* `color:#fff` EXPLICITE : le theme impose `color:#000` a tous les h4, et sur le fond noir du pied de page les titres de colonne etaient donc invisibles — on ne les voyait qu'en selectionnant le texte a la souris. Le defaut existait avant la reprise des libelles du site v2. */ .pie__col h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;font-weight:500;color:#fff} .pie__col li{margin-bottom:2px} /* `display:block` + padding : le lien couvre toute la ligne au lieu des 19px de son texte. Sur un téléphone, une cible de 19px se rate une fois sur deux ; ici elle atteint 40px sans que l'écart visuel change. */ .pie__col a{display:block;padding:9px 0;font-size:13px;color:#b0b0b0;transition:color .2s} /* La colonne de texte du v2 (« Chi siamo ») : même gris et même corps que les liens voisins, pour qu'une colonne de menu et une colonne de texte se lisent au même niveau. L'interligne est plus large, c'est de la prose et non une liste. */ .pie__testo{font-size:13px;color:#b0b0b0;line-height:1.75;max-width:34ch} /* La colonne d'inscription, a droite comme sur le v2. Son texte n'a pas de `max-width` : la colonne est deja etroite, le limiter a 34ch creuserait un vide a sa droite. Le champ prend toute la largeur disponible. */ .pie__nlcol .pie__testo{max-width:none;margin-bottom:18px} .pie__nlcol .pie__nlmini{max-width:none;width:100%} .pie__col a:hover{color:#fff} /* ---- 3. la ligne du bas ---- */ .pie__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid #242424;flex-wrap:wrap;gap:14px} /* Reseaux et moyens de paiement forment un seul groupe a droite de la barre du bas : deux series de petites marques, elles se lisent ensemble. */ /* Les reseaux se calent a droite, AU-DESSUS du filet ; les moyens de paiement restent dessous avec le copyright. Le filet a donc quitte `.pie__cols` pour devenir le bord haut de `.pie__bottom` : sans ce deplacement, tout ce qu'on ajoute apres les colonnes tombe sous la ligne. */ /* Les reseaux calent leur bord droit sur celui des cartes bancaires, a la demande du client (1 aout 2026). Le `padding-right:52px` d'avant reservait la place du bouton « remonter en haut » du theme, qui flotte a droite ; il creait un decrochage de ~58px, visible a l'oeil nu entre les deux series. Le bouton est `fixed` : il suit la fenetre, il ne croise donc cette ligne que sur une plage de defilement etroite, et il passe par-dessus comme sur n'importe quel site. `margin-right:-8px` : les boutons de 34px portent un dessin de 18px, donc 8px de blanc de chaque cote. Les cartes bancaires, elles, sont des visuels pleins. Sans ce rattrapage, les reseaux s'arreteraient 8px trop tot — cale sur la boite, pas sur le dessin. */ .pie__socialriga{display:flex;justify-content:flex-end;padding-bottom:18px; padding-right:0} .pie__socialriga .pie__social{margin-top:0;margin-right:-8px} .pie__bottom p{font-size:13px;color:#8a8a8a} .pie__pays{display:flex;gap:7px;align-items:center;flex-wrap:wrap} /* Stessa misura del carrello: i loghi devono leggersi ovunque. */ .pie__pays{gap:8px} .pie__pays svg{height:30px;width:47px;display:block;border-radius:4px} /* ---- 5. la newsletter n'est pas au même endroit selon l'écran ---- Su PC vale autryofficial.com: il modulo sta nella colonna del logo, e la fascia larga in cima NON esiste. Su telefono vale autry-usa.com: la fascia in cima, prima dei menu. Il modulo è scritto due volte, se ne mostra uno. ------------------------------------------------------------------- */ .pie__nl{display:none} /* la fascia: solo su telefono */ /* Il modulo nella colonna del logo: bordo bianco sottile, bottone pieno a destra — è così su autryofficial.com. Senza di lui il piede non mostrava NESSUNA iscrizione su PC, perché la fascia larga è nascosta qui. */ .pie__nlmini{display:flex;border:1px solid #3a3a3a;margin-top:22px;max-width:430px} .pie__nlmini input{flex:1;min-width:0;background:none;border:none;color:#fff; padding:15px 16px;font-family:inherit;font-size:14px;outline:none} .pie__nlmini input::placeholder{color:#7a7a7a} .pie__nlmini:focus-within{border-color:#6a6a6a} .pie__nlmini button{background:#fff;color:#000;border:none;padding:0 22px; font-family:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.1em; font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s} .pie__nlmini button:hover{background:#d9d9d9} @media(max-width:900px){ .pie__cols{grid-template-columns:1fr 1fr;gap:30px} .pie__brand{grid-column:1 / -1} /* Le copyright reste a gauche, paiements et reseaux se serrent a droite. Centres, les trois blocs s'empilaient au milieu. */ .pie__bottom{justify-content:space-between;text-align:left;gap:14px} /* Le bloc logo + accroche disparaît : sur un écran étroit il repoussait la newsletter sous la ligne de flottaison alors que c'est elle qu'on veut faire remplir. Il reste sur ordinateur, où la place ne manque pas. */ .pie__brand{display:none} /* La newsletter passe en tête, dépliée. Le reste se replie en accordéons : six liens et deux paragraphes empilés font un pied de page interminable au doigt. */ .pie__cols{display:flex;flex-direction:column;gap:0;padding-bottom:8px} .pie__nlcol{order:-1;padding-bottom:26px} .pie__col:not(.pie__nlcol){border-top:1px solid #242424} .pie__col:not(.pie__nlcol) h4{ display:flex;align-items:center;justify-content:space-between; margin:0;padding:18px 0;cursor:pointer;user-select:none} /* Le chevron tourne à l'ouverture : c'est le seul signe que le bloc se déplie, il doit être là avant qu'on ait touché. */ .pie__col:not(.pie__nlcol) h4::after{ content:'';width:8px;height:8px;flex:0 0 auto;margin-left:14px; border-right:1.5px solid #b0b0b0;border-bottom:1.5px solid #b0b0b0; transform:rotate(45deg) translateY(-2px);transition:transform .25s} .pie__col--ouvert h4::after{transform:rotate(-135deg) translateY(-2px)} .pie__col:not(.pie__nlcol) ul, .pie__col:not(.pie__nlcol) .pie__testo{ max-height:0;overflow:hidden;margin:0; transition:max-height .3s ease,padding-bottom .3s ease} /* `.pie__col.pie__col--ouvert` et non `.pie__col--ouvert` seul : la règle qui replie porte sur `.pie__col:not(.pie__nlcol)`, plus spécifique. À spécificité égale, c'est l'ordre qui tranche — et celle-ci vient après. */ .pie__col.pie__col--ouvert ul, .pie__col.pie__col--ouvert .pie__testo{max-height:420px;padding-bottom:16px} /* Reseaux et moyens de paiement calent leur bord droit sur la gouttiere, comme le copyright cale le sien a gauche. Meme rattrapage qu'en bureau, recalcule sur les boutons de 34px : (34-18)/2 = 8px de blanc autour du dessin. Sans lui les reseaux s'arretent 8px avant les cartes bancaires, qui sont des visuels pleins. */ .pie__socialriga{justify-content:flex-end;padding-right:0} .pie__socialriga .pie__social{margin-right:-8px} /* `flex-basis:100%` : les cinq cartes (267px) et le copyright (~148px) ne tiennent pas cote a cote dans 360px. Sans cette ligne le retour a la ligne se fait quand meme, mais la bande reste large comme son contenu et `flex-end` n'a plus rien a pousser — les logos restaient colles a gauche. */ .pie__pays{flex:1 1 100%;justify-content:flex-end} /* si scambiano: la fascia compare, il modulo nella colonna sparisce */ .pie__nl{display:block} .pie__nlmini{display:none} } @media(max-width:600px){ .pie__cols{grid-template-columns:1fr;gap:26px} .pie__form{max-width:none} } /* ===================================================================== ZONES TACTILES — agrandies sans qu'un seul pixel ne bouge a l'ecran ===================================================================== Ces regles ne concernent pas le pied de page. Elles vivent ici parce que `piede.css` est la seule feuille maison chargee sur les 817 pages du site : l'en-tete a `testa.css` mais seulement sur l'accueil et les collections, les fiches ont `scheda.css`. Poser ces regles une fois ici evite de les tripler et de les desynchroniser. MESURE. Un scanner passe sur 34 pages a 320/375/390/430/768px a releve 804 cibles sous le seuil de 44px, pour seulement une dizaine de causes distinctes. Les voici, avec leur taille reelle : .hdr__logo 208x22 le logo, cliquable (retour accueil) .pref__btn 28x28 le coeur des favoris .pie__social a 30x30 les icones de reseaux .slide__block-link 178x39 le bouton des bannieres .sf__sortmb-icon 124x24 le bouton de tri des collections .snav 38x38 les fleches des carrousels (`.iconbtn` et `.burger` sont deja a 44x44 : rien a faire.) METHODE. On n'agrandit PAS l'element : le client a valide le rendu et a demande qu'on n'y touche pas. On pose un pseudo-element centre, sans fond, qui etend la surface qui recoit le doigt. Le dessin ne bouge pas, la mise en page non plus — un `::after` en `position:absolute` est hors du flux. `position:relative` n'est ajoute QUE sur les elements mesures `static`. L'ajouter sur `.pref__btn` ou `.snav`, deja `absolute`, les ferait sauter de leur place — c'est le genre de correction qui repare une cible tactile et casse la mise en page. Les reseaux recoivent 40px et non 44 : leurs boutons font 30px et sont espaces de 10, donc 40px de zone remplit exactement l'intervalle. A 44px, deux zones voisines se chevaucheraient et un appui a la frontiere activerait le mauvais lien. */ @media(max-width:1023px){ .hdr__logo, .pie__social a, .slide__block-link, .sf__sortmb-icon{position:relative} .hdr__logo::after, .pref__btn::after, .slide__block-link::after, .sf__sortmb-icon::after, .snav::after{content:'';position:absolute;left:50%;top:50%; width:max(100%,44px);height:max(100%,44px); transform:translate(-50%,-50%)} .pie__social a::after{content:'';position:absolute;left:50%;top:50%; width:40px;height:40px;transform:translate(-50%,-50%)} /* `intestazione.py` porte deja `.iconbtn{width:44px}` sous 1023px, mais cette regle vit dans `testa.css`, qui n'est liee qu'a l'accueil et aux collections. Sur les 760 fiches produit, la feuille est `scheda.css` et les boutons y restaient a 40x40 (recherche, panier) et 42x42 (menu). `min-*` plutot que `width` : les trois sont en `display:flex` avec leur icone centree, donc la boite grandit de 2 a 4px sans que l'icone bouge. */ .iconbtn,.burger{min-width:44px;min-height:44px} /* Les liens des colonnes faisaient 38px de haut, et le fil d'Ariane 39. Ici on agrandit pour de bon, au lieu de poser un pseudo-element : dans une liste verticale, deux zones de 44px posees sur des lignes espacees de 38 se chevaucheraient, et un appui a la frontiere ouvrirait le mauvais lien — l'inverse de ce qu'on cherche. Le cout visuel est nul la ou ca compte : sous 900px ces colonnes sont des accordeons replies, donc la hauteur gagnee ne se voit qu'une fois le bloc ouvert, ou elle est la bienvenue. */ .pie__col ul a, .bread-crumb__item{display:flex;align-items:center;min-height:44px} }