/* ========================================================================= Coffee Crush — adaptation mobile / tablette ------------------------------------------------------------------------- La page d'origine ne contient AUCUNE media query : la typographie s'adapte via clamp()/vw, mais toutes les grilles restent multi-colonnes quelle que soit la largeur d'écran. Ce fichier ajoute la couche responsive manquante. Les styles de la page sont en inline, donc plus prioritaires qu'une feuille externe : chaque règle ci-dessous doit être en !important et cibler les éléments par sélecteur d'attribut sur leur style inline. Fichier volontairement séparé : il peut être désactivé en retirant une seule ligne dans le , et il ne touche ni au bloc pré-rendu ni au bloc source (pas de double édition à maintenir). ========================================================================= */ /* ---------- Garde-fous généraux, tous écrans ---------- */ html, body { max-width: 100%; overflow-x: hidden; } /* overflow:hidden crée un conteneur de défilement, ce qui peut neutraliser le position:sticky de l'en-tête sur iOS Safari. overflow:clip coupe le débordement sans créer ce conteneur : même effet, sans l'effet de bord. */ @supports (overflow: clip) { html, body { overflow-x: clip; } } img, video, iframe { max-width: 100%; } /* ========================================================================= TABLETTE ET EN DESSOUS (<= 900px) ========================================================================= */ @media (max-width: 900px) { /* --- Grilles : passage sur une colonne --- Couvre 1fr 1fr, 1.05fr 1fr, 1.1fr 1fr, 1fr 1.05fr, 340px 1fr, repeat(12,1fr). La variante repeat(4,1fr) est traitée plus bas. */ [style*="grid-template-columns:1fr"], [style*="grid-template-columns: 1fr"], [style*="grid-template-columns:1.05fr"], [style*="grid-template-columns: 1.05fr"], [style*="grid-template-columns:1.1fr"], [style*="grid-template-columns: 1.1fr"], [style*="grid-template-columns:340px"], [style*="grid-template-columns: 340px"], [style*="grid-template-columns:repeat(12"], [style*="grid-template-columns: repeat(12"] { grid-template-columns: 1fr !important; } /* Cartes recettes : 4 colonnes -> 2, encore lisibles sur tablette */ [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } /* --- Colonne collante : inutile sur une seule colonne --- */ [style*="position:sticky"][style*="top:96px"], [style*="position: sticky"][style*="top: 96px"] { position: static !important; } /* --- Lame « points d'intérêt » : schéma interactif -> liste --- Sur grand écran, cinq points sont posés en absolu sur l'image de la machine et leur bulle apparaît au survol. Sur écran tactile il n'y a pas de survol et les bulles (250-270px de large) ne tiennent pas à côté des points. On démonte donc entièrement le dispositif : l'image repasse en flux normal, et chaque point devient une ligne « pastille + texte » lisible sans interaction. Ne pas réinitialiser .cc-hs en même temps que .cc-tip était le défaut de la version précédente : les bulles passaient en flux normal à l'intérieur de conteneurs de 34px de large, toujours en absolu. */ [style*="aspect-ratio: 5/4"] { aspect-ratio: auto !important; display: flex !important; flex-direction: column !important; padding: 0 0 20px !important; background: none !important; } [style*="aspect-ratio: 5/4"] > img { position: static !important; transform: none !important; height: auto !important; width: min(72%, 300px) !important; margin: 0 auto 6px !important; } .cc-hs { position: static !important; display: flex !important; align-items: flex-start !important; gap: 14px !important; margin-top: 16px !important; } .cc-hs > button { flex: 0 0 34px !important; } .cc-tip { position: static !important; width: auto !important; max-width: 100% !important; left: auto !important; right: auto !important; top: auto !important; margin-top: 0 !important; flex: 1 1 auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; /* le point n°4 est aligné à droite avec sa bordure à droite : on rétablit l'alignement commun */ text-align: left !important; border-right: 0 !important; border-left: 3px solid #EE7A2B !important; } } /* ========================================================================= MOBILE (<= 620px) ========================================================================= */ @media (max-width: 620px) { /* --- En-tête --- Le logo, 5 liens d'ancre et le sélecteur de langue tiennent sur une seule ligne flex avec un gap de 32px : largement au-delà des 393px d'un iPhone 14 Pro. On passe sur deux lignes, la barre de navigation devenant défilable horizontalement. */ #cc-header { flex-wrap: wrap !important; gap: 8px !important; padding: 8px 16px !important; /* opacité renforcée : le fond translucide est illisible sur petit écran */ background: rgba(251, 243, 234, .92) !important; } #cc-header > a:first-child { flex: 0 0 auto !important; } #cc-header > div { flex: 1 1 100% !important; justify-content: space-between !important; gap: 12px !important; min-width: 0 !important; } #cc-header nav { gap: 18px !important; font-size: 13px !important; min-width: 0 !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; } #cc-header nav::-webkit-scrollbar { display: none !important; } #cc-header nav a { white-space: nowrap !important; } /* --- Toutes les grilles sur une colonne, y compris les recettes --- */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* --- Cibles tactiles : minimum 44px de haut (recommandation Apple) --- Portée volontairement restreinte aux vrais boutons d'action et aux onglets. La version précédente ciblait tout élément dont le style inline contenait « border-radius », ce qui attrapait aussi : - les deux liens FR/NL de l'en-tête, gonflant celui-ci de 17px et faisant passer les ancres derrière le header au clic ; - le bouton du carrousel de nettoyage, déclaré en display:block / width:100% et forcé en inline-flex, ce qui déformait son image. On ne force plus non plus display:inline-flex : tous les CTA concernés le déclarent déjà en inline. */ a[style*="border-radius"][style*="padding"]:not(#cc-header a), button[data-drink-tab] { min-height: 44px !important; align-items: center !important; justify-content: center !important; } /* --- Hero --- L'en-tête est en position:sticky : il occupe une place réelle dans le flux. Additionné aux 92vh du hero, le contenu de celui-ci (aligné en bas) passait sous la ligne de flottaison : le titre et le CTA n'étaient pas visibles au chargement. On retire la hauteur du header. svh = « small viewport height » : la hauteur écran barres de navigation déployées, la seule stable sur iOS. */ #accueil { min-height: calc(100vh - 88px) !important; } @supports (height: 100svh) { #accueil { min-height: calc(100svh - 88px) !important; } } /* --- Vidéo du hero : 134% de hauteur crée un débordement vertical --- */ video[data-parallax] { height: 112% !important; } /* --- Indicateur « Faites défiler » --- Positionné en absolu à 20px du bas du hero, il chevauche la note et le nombre d'avis depuis que la hauteur du hero est ajustée à l'écran. Sans valeur d'usage sur mobile : on le masque plutôt que de sacrifier un argument de vente. Sélecteur sur son animation, qui est unique. */ [style*="ccbob"] { display: none !important; } /* --- Machine en découpe de la lame « citation » --- Son margin-top négatif la fait remonter dans la bande sombre : c'est l'effet recherché en desktop, où l'image est placée À CÔTÉ de la citation. En mobile les deux blocs s'empilent, la citation passe au-dessus, et tout retrait négatif superpose l'image au texte. On l'annule donc entièrement. */ [style*="clamp(-280px"] { margin-top: 8px !important; width: 160px !important; } /* --- Ancres du menu --- Les sections déclarent scroll-margin-top:78px en inline, calibré sur un header d'une seule ligne. En mobile il en fait deux. */ section[id] { scroll-margin-top: 92px !important; } /* --- Débordement horizontal des cartes produit --- Un élément de grille ne descend jamais sous la largeur minimale de son contenu (min-width:auto par défaut). Les CTA « Acheter maintenant sur le shop Tefal.be » sont des conteneurs flex sans retour à la ligne : leur largeur incompressible élargissait la carte entière au-delà de l'écran, poussant tout son contenu hors champ à droite. Trois verrous : on autorise les éléments de grille et de flex à se réduire, on autorise les CTA à passer sur deux lignes, et on autorise les lignes de caractéristiques à se comprimer. Le premier verrou vise les enfants de grille et les conteneurs à ratio fixe : ces derniers sont des éléments flex dont la largeur minimale automatique est calculée sur la taille intrinsèque de l'image qu'ils contiennent (480px), ce qui les faisait déborder de la carte. Ne surtout pas étendre ce verrou à tous les enfants de conteneurs flex : les éléments en white-space:nowrap (liens du menu, onglets boissons, liens légaux) se comprimeraient alors sous la largeur de leur texte, qui déborderait sur l'élément voisin. */ [style*="display: grid"] > *, [style*="display:grid"] > *, [style*="aspect-ratio"], [style*="aspect-ratio"] > img { min-width: 0 !important; } /* Les liens du menu gardent leur largeur naturelle : c'est le