/* * Styles responsives de la plateforme Inkwell * Couvre tous les paliers d'écran : desktop large, desktop, tablette (paysage/portrait), mobile, petit mobile * Ce fichier doit TOUJOURS être chargé en dernier dans le , après tous les autres CSS * (y compris les fichiers de composants), car il a le dernier mot sur l'affichage selon la taille d'écran */ /* ========================================================================== DESKTOP LARGE — au-delà de 1440px ========================================================================== */ @media (min-width: 1441px) { .conteneur { max-width: 1360px; } .hero__decor { width: 260px; height: 440px; } } /* ========================================================================== DESKTOP STANDARD — 1200px ========================================================================== */ @media (max-width: 1200px) { .conteneur { padding: 0 28px; } .hero__decor { width: 200px; height: 360px; } .hero__decor--gauche { left: -18px; } .hero__decor--droite { right: -18px; } } /* ========================================================================== PALIER INTERMÉDIAIRE — 1100px Le header desktop porte maintenant beaucoup d'éléments (langue, thème, menu utilisateur) : on masque la recherche en premier pour désencombrer, avant que le burger ne prenne totalement le relais à 768px ========================================================================== */ @media (max-width: 1100px) { .entete__recherche { display: none; } .entete__navigation { gap: 14px; } .entete__actions { gap: 12px; } } /* ========================================================================== TABLETTE PAYSAGE — 992px ========================================================================== */ @media (max-width: 992px) { .conteneur { padding: 0 24px; } /* --- Grilles de cartes histoires --- */ .grille-cartes, .grille-cartes--quatre { grid-template-columns: repeat(2, 1fr); } /* --- Hero --- */ .hero__decor { display: none; } .hero { min-height: auto; padding: 56px 0 64px; } .hero__titre { font-size: clamp(2.4rem, 5vw, 3.2rem); } /* --- Sections --- */ .section--beige { padding-top: 72px; padding-bottom: 72px; } /* --- Pied de page --- */ .pied-de-page__entete { flex-direction: column; align-items: flex-start; gap: 8px; } .pied-de-page__grille { grid-template-columns: 1fr 1fr; row-gap: 32px; } .pied-de-page__marque { grid-column: span 2; border-left: none; padding-right: 0; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .pied-de-page__communaute, .pied-de-page__legal, .pied-de-page__newsletter-colonne { border-left: none; padding: 0; } } /* ========================================================================== TABLETTE PORTRAIT / MOBILE LARGE — 768px Bascule vers le menu burger ========================================================================== */ @media (max-width: 768px) { .conteneur { padding: 0 20px; } /* --- En-tête --- */ .entete__interieur { height: 60px; } .entete__navigation, .entete__recherche, .entete__actions { display: none; } .bouton-burger { display: flex; margin-left:12px; } .bouton-theme--mobile { display:flex; margin-left:auto; } /* --- Hero --- */ .hero { padding: 48px 0 56px; } .hero__titre { font-size: clamp(2rem, 7vw, 2.6rem); letter-spacing: -0.04em; } .hero__titre-ligne:nth-child(2) { white-space: normal; } .etiquette-vous { top: -10px; right: -10px; font-size: 0.65rem; } .hero__texte { font-size: 1rem; } .hero__actions { flex-direction: column; gap: 12px; } .hero__actions .bouton { width: 100%; } .hero__statistiques { flex-direction: column; align-items: center; gap: 18px; } /* --- Sections --- */ .section { padding: 48px 0; } .section--beige { padding-top: 56px; padding-bottom: 56px; } .section__entete { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; } .section__entete h2 { font-size: 1.5rem; } /* --- Cartes histoires --- */ .grille-cartes, .grille-cartes--quatre { grid-template-columns: 1fr; max-width: 480px; } /* --- CTA communauté --- */ .cta-communaute__titre { font-size: 1.7rem; } .badge-store { width: 46px; height: 46px; font-size: 1.2rem; } /* -------------------------------------------------------------------- PIED DE PAGE MOBILE — mise en page dédiée, pas une compression du desktop. Logo/tagline en carte compacte, colonnes de liens en accordéon repliable, newsletter simplifiée en pleine largeur. -------------------------------------------------------------------- */ .pied-de-page__entete { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 28px 0 20px; } .pied-de-page__grille { grid-template-columns: 1fr; row-gap: 0; padding: 0; text-align: left; } .pied-de-page__grille > div { grid-column: auto; /* réinitialise le "grid-column: span 2" hérité du palier 992px (.pied-de-page__marque), qui créait une colonne implicite et faisait chevaucher/écraser les colonnes du footer */ padding: 0; border-left: none; } /* --- Bloc marque : carte compacte en haut, tagline raccourcie visuellement --- Sélecteur renforcé (.pied-de-page__grille .pied-de-page__marque au lieu de .pied-de-page__marque seul) pour que ce padding batte bien la règle générique ".pied-de-page__grille > div { padding: 0 }" plus haut, qui avait une spécificité supérieure et écrasait silencieusement cet espacement */ .pied-de-page__grille .pied-de-page__marque { padding: 24px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .pied-de-page__tagline { font-size: 1rem; max-width: 320px; margin-bottom: 18px; } .pied-de-page__reseaux { justify-content: flex-start; } /* --- Colonnes en accordéon : titre cliquable avec chevron, contenu replié par défaut --- */ .pied-de-page__grille .pied-de-page__communaute, .pied-de-page__grille .pied-de-page__legal { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .pied-de-page__titre-colonne[data-accordeon] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding: 18px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pied-de-page__icone-accordeon { font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); transition: transform 0.2s ease; } [data-colonne-pied].pied-de-page__colonne--ouverte .pied-de-page__icone-accordeon { transform: rotate(180deg); } .pied-de-page__communaute nav, .pied-de-page__legal nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-height: 0; overflow: hidden; padding-bottom: 0; transition: max-height 0.3s ease, padding-bottom 0.3s ease; } /* Valeur volontairement généreuse (couvre jusqu'à ~8 liens) plutôt qu'une mesure exacte du contenu — la technique grid-template-rows précédente ne fonctionnait qu'avec un enfant unique, ici nav contient plusieurs liens directs et se comportait mal (jamais vraiment fermé) */ [data-colonne-pied].pied-de-page__colonne--ouverte nav { max-height: 320px; padding-bottom: 18px; } /* --- Newsletter : plus de titre de colonne séparé, intégrée en pleine largeur simplifiée --- Même correctif de spécificité que pour .pied-de-page__marque ci-dessus */ .pied-de-page__grille .pied-de-page__newsletter-colonne { padding: 24px 0 8px; } .pied-de-page__newsletter-colonne .pied-de-page__titre-colonne { margin-bottom: 12px; } .pied-de-page__newsletter-texte { font-size: 0.85rem; max-width: 320px; } .pied-de-page__newsletter-champ { max-width: none; margin: 0 0 14px; } .pied-de-page__newsletter-consentement { max-width: none; margin: 0; } /* Zones tactiles conformes (44×44px minimum, WCAG 2.5.5) */ @media (pointer: coarse) { .pied-de-page__reseau { width: 42px; height: 42px; } .pied-de-page__titre-colonne[data-accordeon] { min-height: 44px; } .pied-de-page__newsletter-champ button { min-height: 44px; } } /* --- Notifications : décalées sous le header réduit --- */ .notifications-conteneur { top: 72px; } } /* ========================================================================== MOBILE — 576px ========================================================================== */ @media (max-width: 576px) { .conteneur { padding: 0 16px; } .entete__logo-image { height: 20px; } /* --- Hero --- */ .hero__accroche { font-size: 0.72rem; letter-spacing: 1px; } .hero__titre { font-size: clamp(1.7rem, 8vw, 2.1rem); } .hero__titre-exergue { padding: 0.02em 0.1em 0.08em; border-width: 1.5px; } .etiquette-vous { display: none; } .hero__texte { font-size: 0.92rem; } .hero__separateur { width: 80%; } /* --- Cartes histoires --- */ .carte-histoire__contenu h3 { font-size: 0.95rem; } .carte-histoire__contenu p { font-size: 0.82rem; } /* --- CTA communauté --- */ .cta-communaute__titre { font-size: 1.4rem; } .cta-communaute__icone { height: 40px; } .cta-communaute__badges { gap: 12px; } /* --- Pied de page --- */ .pied-de-page__statistiques { font-size: 0.8rem; } .pied-de-page__copyright { font-size: 0.72rem; } } /* ========================================================================== PETIT MOBILE — 400px Derniers ajustements pour les écrans très étroits (iPhone SE et similaires) ========================================================================== */ @media (max-width: 400px) { .conteneur { padding: 0 14px; } .entete__interieur { height: 56px; } /* --- Hero --- */ .hero { padding: 40px 0 48px; } .hero__titre { font-size: clamp(1.5rem, 9vw, 1.85rem); letter-spacing: -0.03em; } .hero__actions .bouton { padding: 12px 20px; font-size: 0.88rem; } .hero__statistiques strong { font-size: 1.1rem; } .hero__statistiques span { font-size: 0.78rem; } /* --- Sections --- */ .section__entete h2 { font-size: 1.3rem; } /* --- CTA communauté --- */ .cta-communaute__titre { font-size: 1.25rem; } .badge-store { width: 42px; height: 42px; font-size: 1.1rem; } /* --- Notifications --- */ .notifications-conteneur { top: 68px; } } /* ========================================================================== AJUSTEMENT ORIENTATION — mobile en mode paysage Évite un hero trop haut quand la hauteur d'écran est réduite ========================================================================== */ @media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) { .hero { padding: 32px 0 40px; min-height: auto; } .hero__statistiques { flex-direction: row; gap: 24px; } .hero__separateur { margin-bottom: 24px; } } /* ========================================================================== PAGES LÉGALES — bascule entre le sommaire desktop (barre latérale) et le sommaire mobile (accordéon), jamais implémentée jusqu'ici malgré le commentaire dans page-legales.css qui l'annonçait ========================================================================== */ @media (max-width: 992px) { .page-legale-mise-en-page { grid-template-columns: 1fr; gap: 0; } .page-legale-barre-laterale { display: none; } .page-legale-sommaire-mobile { display: block; } }