/** * Sections Responsive Styles * * Adaptations responsive complètes de toutes les sections. * Hero, Contenu, Transmission Intro, Carrousels, Articles. * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.1.0 * * @changelog * 0.1.0 — Passage en preprod * 0.0.136 - Transmission Mission toy mobile : suppression scaleX(-1), aligné droite, dirX 3 → -3 * 0.0.135 - Bandeau-transmission mobile : image 100vw, bandeau aligné bas (bottom: -15.8vw) * 0.0.135 - Bandeau-transmission mobile : rotation 90° plein écran, couleurs, image par-dessus * 0.0.134 - Carousel-transmission : supprime nuage vert mobile + descend nuage rose à sa position * 0.0.133 - Carousel-transmission : padding-bottom var(--spacing-xl) + descend nuages rose et vert d'autant * 0.0.132 - Carousel-transmission : réhausse #nuage-or-transmission (top 10vw → 5vw) * 0.0.131 - Carousel-transmission : masque la montgolfière sur mobile * 0.0.130 - Transmission Mission col1 mobile : rehausse les 3 nuages de 10vw * 0.0.129 - Transmission Mission col1 mobile : composition visuelle nuages + jouet * - Stack vertical : col2 texte en order 1, col1 visuels en order 2 * - col1 : height 80vw, position relative, overflow visible * - Ancrage left/top 50% + translateX/Y en vw (conversion depuis vh desktop) * - Rose 25vw / Or 40vw / Vert 80vw / Jouet 40vw + scaleX(-1) * - @keyframes airplane-fly-mobile en px (vh inadaptés mobile) * 0.0.128 - Transmission Hero toy-1/2 : display block !important + height auto (parité intro) * 0.0.127 - Transmission Hero col2 mobile : même pattern que transmission-intro * - .section-column-col2 : position relative + height: 100vw * - .transmission-hero-background-wrap : absolute inset 0, z-index 0 * - .transmission-hero-background + img : 100% width/height, object-fit contain, * transform: rotate(90deg) + transform-origin: center center (même que intro) * - .transmission-hero-toy-1/2 : absolute dans col2, width en vw, z-index 2 * - Séparation des sélecteurs hero/transmission-hero pour col2 * 0.0.126 - E7 : Déduplication CSS FAQ / FAQ Courte (mobile) * - Fusion des deux blocs @media séparés en un seul * - Sélecteurs combinés pour wrapper, .faq-item, ::details-marker, ::after, .faq-answer p, p:last-child * - .faq-question conservé séparé (padding diffère : --spacing-2xs vs --spacing-sm) * 0.0.125 - A2 : Ajout reset parallax (#nuage-or-transmission, #jouet-avion, #jouet-train) dans @media (max-width: 1200px) * (repris depuis le bloc imbriqué impossible dans sections.css) * - E6 : Suppression @keyframes transmissionIntroBounce dupliqué (désormais déclaré globalement dans sections.css) * - E3 : Suppression règle h1 mobile (font-family/size/weight/line-height) — centralisée dans style.css * - E4 : Suppression classes .carousel-bg-* — centralisées dans style.css * 0.0.124 - Remplacement valeurs px hardcodées mobile par unités flexibles * - Image hero max-height: 300px → 40vh * - Slide carousel min-height: 500px → 65vh * - Article colonnes dynamiques margin-bottom: 40px → var(--spacing-xl) * - Image article margin: 20px auto → var(--spacing-sm) auto * - Figure article margin-bottom: 20px → var(--spacing-sm) * - Carte article liste max-width: 325px → min(325px, 90vw) * - Photo équipe max-width: 350px → min(350px, 60vw) * 0.0.123 - Suppression violations opacity (règle no-opacity) * - .section-model-carousel-produits .carousel-dots .dot:active : opacity: 0.7 supprimée * - .carousel-nuage-rose : opacity: 0.7 supprimée (décoratif) * - .carousel-nuage-vert : opacity: 0.6 supprimée (décoratif) * - .section-model-carousel-transmission .carousel-dots .dot:active : opacity: 0.7 supprimée * - .archive-nav-label (mobile) : opacity: 0.5 → color: var(--color-text-light) * 0.0.122 - Section auteur page produit : bandeau en premier sur mobile (column-reverse) * - Aligne le layout avec single.php et author.php (bandeau en haut, texte en bas) * 0.0.119 - Section Contact - Map mobile : dégradé droit supprimé (::after background: none) * - Canvas hauteur 100vw * - .contact-map-inner remplace canvas comme cible Google Maps (no inline CSS) * 0.0.118 - Section Contact - Map mobile : dégradé bas du canvas (transparent → background) * 0.0.117 - Section Contact - Map : .contact-map-content mobile (position relative, pleine largeur) * 0.0.116 - Section Contact - Map mobile : canvas hauteur fixe (60vw, min 250px), adresse en dessous * 0.0.115 - Section FAQ mobile : icône +/× agrandie (text-size-xl) * 0.0.114 - Section FAQ : mobile stack vertical (flex-direction column) — sélecteurs [open] et padding answer déplacés en partagé * 0.0.113 - Section Équipe mobile : border-left: none → border-left-width: 0 (préserve la couleur JS) * 0.0.112 - Section Équipe mobile : equipe-person-role margin-top -spacing-2xs (rapproché du nom) * 0.0.111 - Section Équipe mobile : equipe-person-role font-style italic * 0.0.110 - Section Équipe mobile : equipe-person-wrapper display flex column gap sm * 0.0.109 - Section Équipe mobile : border-left-width/style au lieu du shorthand (préserve la couleur JS) * 0.0.108 - Section Équipe mobile : override alignement gauche pour fiche dans wrapper * 0.0.107 - Section Équipe mobile : bordure gauche sur impairs, droite sur pairs * 0.0.106 - Section Équipe mobile : zigzag contenu (impairs gauche, pairs droite) * 0.0.105 - Section Équipe mobile : border-right-color dans les classes equipe-color-* * 0.0.104 - Section Équipe mobile : border-right border-thick * 2 solid color-text * 0.0.103 - Section Équipe mobile : border-radius border-thick * 2 * 0.0.102 - Section Équipe mobile : border-left border-thick → border-thick * 2 * 0.0.101 - Section Équipe mobile : gap entre fiches spacing-md → spacing-lg * 0.0.100 - Section Équipe mobile : padding lg → md + classes couleurs équipe-color-{green/blue/pink/gold} * 0.0.99 - Section Équipe mobile : border-left thick solid color-text + padding md → lg * 0.0.98 - Section Équipe mobile : photo alignée à gauche, 60% de largeur * 0.0.97 - Section Équipe mobile : gap identity spacing-xs → spacing-2xs * 0.0.96 - Section Équipe mobile : .equipe-persons-grid display: flex (gap était sans effet) * 0.0.95 - Section Équipe mobile : mise en forme complète des fiches * + column-model-page-hero : gap var(--spacing-lg) * - .equipe-persons-grid : gap entre les fiches * - .equipe-person : flex row, padding md, gap sm, align-items center * - .equipe-person-photo : 40%, aspect-ratio 3/4, overflow hidden * - .equipe-person-photo img : 100% width/height, object-fit cover * - .equipe-person-identity : flex column, gap xs, align-self center * - .equipe-person-catchphrase : bold * - .equipe-person-description : small-text * 0.0.94 - Section Équipe mobile : reset du zigzag * - .equipe-person : transform none !important * 0.0.93 - Section Équipe mobile : empilement vertical * - .equipe-persons-grid : flex-direction column * - .equipe-person : width 100%, min-width 0 * 0.0.92 - .main-section-demi : height: 50vh → min-height: 50vh (mobile) * 0.0.91 - Phases 2+3+4 refacto : consolidation CSS * - Phase 2 : suppression bloc .section-cta (déplacé dans components-responsive.css v0.0.30) * - Conflits de cascade éliminés (components-responsive chargé en dernier était source de vérité) * - Phase 3 : vérification — .section-column h2/h3[style*="width"] déjà absent (déplacé en v0.0.86) * - Phase 4 : 8 blocs @media → 4 blocs (fusion RESET+HERO+CONTENU+TRANSMISSION, DERNIERS+Carousel) * 0.0.90 - .author-other-publications mobile : margin-top md + p/ul/ol adaptés (pas desktop-only) * 0.0.89 - .author-page-intro-section mobile : gaps verticaux * - .section-columns → flex column, gap xl (deux colonnes empilées) * - .author-page-intro-col-text → flex column, gap md (éléments internes) * 0.0.88 - .author-section .section-columns mobile : gap var(--spacing-md) → var(--spacing-xl) * 0.0.87 - .section-cta mobile : copie des styles desktop, height::after 0.5vh → 3px * - Couleurs .section-cta-* et animation ::after identiques desktop * 0.0.86 - Déplacement règles globales vers components-responsive.css * - html/body overflow-x + .main-section padding → components-responsive.css v0.0.22 * - Ces règles doivent être actives sur toutes les pages (y compris page produit) * 0.0.85 - Archive section demi mobile * - Masquage image à la une (.archive et .blog) * - height: auto sur .main-section-demi (contenu variable) * - Styles complets : archive-header, archive-count, archive-cat-nav/list/item * - Variables CSS adaptées automatiquement (même déclarations que desktop) * 0.0.84 - Archive articles mobile : stack vertical * - .archive-articles-row : flex column, gap md * - .article-loop-item : width 100%, margin 0, transform none * - .archive-nav-card : width 100%, flex row centré * - .archive-nav-label masqué sur mobile * 0.0.83 - Article horizontal layout mobile : support Imagify picture * - Ajout styles pour balises sur mobile * - picture et img : display flex, max-height 60vh * - picture img : width/height 100%, object-fit contain * - figure : flex column, align/justify center * 0.0.82 - Article horizontal layout mobile : annulation horizontalité * - Styles mobiles pour .article-contenu-horizontal * - Conteneur et colonnes passent en display: block (empilement vertical) * - Images centrées avec max-height 60vh * - Fond décoratif masqué (display: none) * - Marges entre colonnes adaptées (40px) * 0.0.81 - Image à la une mobile : ajout classe post-featured-image * - Nouvelle classe .post-featured-image (width 100%, height 33.33vh) * - Object-fit cover, object-position center * - Cohérence avec desktop * 0.0.80 - Extrait article mobile : augmentation font-size * - .post-excerpt : font-size --font-small-text-italic-size → --text-size-cta (14px inchangé) * - Cohérence avec desktop (--text-size-cta) * 0.0.79 - Extrait article mobile : augmentation interligne * - .post-excerpt : line-height --line-height-medium → --line-height-comfortable (1.25em → 1.4em) * - Cohérence avec desktop, meilleure lisibilité * 0.0.78 - Extrait article mobile : ajout classe post-excerpt * - Nouvelle classe .post-excerpt avec variables --font-small-text-italic-* * - Font-size 14px, style italic, line-height medium * - Cohérence avec desktop (variables small-text-italic) * 0.0.77 - Icônes post-meta mobile : taille relative en em * - .post-meta-icon : width et height 16px → 0.75em * - Taille proportionnelle au texte des métadonnées * - Cohérence avec desktop (0.75em) * 0.0.76 - Post-meta mobile gap : ajustement à --spacing-sm * - .post-meta : gap --spacing-xs → --spacing-sm (8px → 16px) * - Cohérence avec desktop (2vh = --spacing-sm) * - Espacement plus confortable entre les items de métadonnées * 0.0.75 - Ajustement gap section demi mobile * - .main-section-demi : gap --spacing-md → --spacing-sm (24px → 16px) * - Cohérence avec desktop (2vh = --spacing-sm) * - Espacement plus compact entre H1 et métadonnées * 0.0.74 - Post-meta mobile : réduction du gap * - Changement gap: var(--spacing-sm) → var(--spacing-xs) (16px → 8px) * - Métadonnées article plus compactes sur mobile * 0.0.73 - Section demi mobile : alignement flex-start * - Changement align-items: center → flex-start * - H1 et post-meta alignés à gauche dans la section * 0.0.72 - Classe .text-meta mobile : utilisation variables CSS existantes * - Refactorisation avec --font-small-text-accent-* (au lieu de valeurs hardcodées) * - Family, size, weight, text-transform, line-height = système unifié * - Cohérence avec système typographique global du thème * 0.0.71 - Post-meta texte mobile : majuscules et couleur uniforme * - Création classe .text-meta (remplacement .post-meta-text) * - Ajout text-transform: uppercase * - Suppression opacity 0.6 sur .post-meta-label * - Suppression font-weight 500 sur .post-meta-value * - Tous les textes en majuscules, même couleur * 0.0.70 - Post-meta avatar mobile : force border-radius rond * - Ajout !important sur border-radius 50% * - Ajout display block * - Assure rendu rond même avec styles WordPress par défaut * 0.0.69 - Post-meta mobile : utilisation variables --font-small-text-* * - Remplacement propriétés individuelles par système unifié * - Family, size, weight, line-height = font-small-text * 0.0.68 - Métadonnées article mobile (post-meta) pour single post * - .post-meta : flex vertical (column), gap sm, full width * - .post-meta-item : auteur (avatar 32px), date (icône 16px), catégories (icône 16px) * - Texte size-xs, labels opacity 0.6, values weight 500 * - Section demi : flex-direction column + gap md pour H1 + meta * 0.0.67 - Suppression styles center/margin sur .main-section-demi h1 mobile * - H1 hérite uniquement de la règle générale h1 (pas de surcharge) * - Plus de text-align center ni margin 0 * 0.0.66 - Simplification : h1-standard sur TOUS les H1 mobile par défaut * - h1 : h1-standard (règle générale simple) * - .home h1 : h1-home (surcharge page d'accueil uniquement) * - Plus besoin de contexte .main-section, règle universelle * 0.0.65 - H1 standard par défaut sur tout le site mobile (sauf home page) * - .main-section h1 : h1-standard par défaut (62px) * - .home .main-section h1 : h1-home spécifique page d'accueil (62px) * - .main-section-demi h1 : simplifié (héritage + text-align/margin) * - Identique sur mobile (62px) mais séparation logique maintenue * 0.0.64 - H1 section demi : utilisation variables h1-standard * - Remplacement h1-home par h1-standard (62px mobile = h1-home) * - Typographie dédiée aux articles et pages (pas home) * 0.0.63 - Section demi-hauteur mobile pour single post * - Ajout .main-section-demi : height 50vh, flex centered * - H1 centré avec text-size-2xl mobile (plus compact que desktop) * - Padding horizontal spacing-md pour respiration * - Pour template single.php (articles de blog) * 0.0.62 - Hero mobile : ajout text-wrap balance sur sous-titre * - .section-model-hero .section-subtitle : text-wrap: balance * - Améliore équilibrage lignes pour sous-titre mobile * - Montgolfière carousel-transmission : z-index 2 → 0, width 28vw → 25.2vw (-10%) * - Montgolfière derrière les livres, plus petite de 10% * - Suppression transition translate et règle .carousel-track.dragging .carousel-montgolfiere * - Suppression z-index 3 du .carousel-track (plus besoin de rivaliser) * 0.0.61 - Carousel-transmission mobile : éléments décoratifs visibles + carousel swipe * - Section : position relative, overflow hidden, padding 0 horizontal * - Wrapper : position static pour que les éléments absolute s'échappent vers la section * - Nuage Or : z-index 10, top -5vw, left -8vw, width 55vw, will-change transform (parallax JS) * - Nuage Rose : z-index 0, bottom 8vw, right -10vw, width 35vw, opacity 0.7, animation flottement * - Nuage Vert : z-index 0, bottom -3vw, left -6vw, width 30vw, opacity 0.6, animation flottement * - Montgolfière : z-index 4, top 2vw, right 3vw, width 18vw, animation flottement + rotation * - Track flex horizontal avec slides 100%, transition 0.8s, drag support * - Images : principale 55% z-index 3 + secondaire 45% absolute z-index 1 * - Dots navigation : z-index 15, centrés en bas * - 3 keyframes simplifiés : rose-mobile-float, vert-mobile-float, mtg-mobile-float * 0.0.60 - Transmission-intro mobile : image de fond + jouets positionnés * - Image de fond : rotation 90° horaire, top -5%, height 100vw, visible sur mobile * - Section : position relative pour contenir les absolute * - Columns : margin-top 50vw pour décaler contenu sous l'image * - Jouets activés sur mobile : avion (top 5vw, right 5vw, width 20vw), train (top 30vw, left 5vw, width 25vw) * - Position absolute avec z-index 2 pour être au-dessus de l'image de fond * 0.0.59 - Carousel articles mobile : fix peek asymétrique + espacement * - .derniers-articles-mobile : full-width breakout (width: 100vw + left: 50% + margin-left: -50vw) * - .articles-carousel-track : ajout gap var(--spacing-md) (24px) entre slides * - Carousel produits mobile : pleine largeur avec gap entre slides * - Section : padding horizontal 0 (images bord-à-bord) * - Titre H2 + colonne texte : padding horizontal var(--spacing-md) (texte indenté) * - Suppression padding-right sur slide-content (plus de peek) * - .carousel-track : ajout gap var(--spacing-md) pour espacement slides * - Section contenu : gap var(--spacing-xl) → var(--spacing-lg) (48px → 32px) * 0.0.58 - Carousel mobile : fix peek asymétrique (full-width breakout) * - .derniers-articles-mobile : width: 100vw + left: 50% + margin-left: -50vw * - Conteneur sort du padding parent pour être aligné au viewport * - Peek 64px parfaitement symétrique des deux côtés * - Suppression max-width: 100% inutile sur le wrapper * 0.0.57 - Carousel mobile : fix peek asymétrique * - Suppression full-width breakout complexe sur .derniers-articles-mobile * - Wrapper centré avec margin: 0 auto (symétrique) * - 64px de peek maintenant égal des deux côtés * 0.0.56 - Carousel mobile : refonte système de positionnement * - Wrapper largeur fixe = calc(100vw - 128px) avec overflow: visible * - Slides 100% du wrapper (permet système translateX en %) * - Classe .dragging pour désactiver transition pendant drag * - Architecture cohérente avec carousel-section.js * 0.0.55 - Carousel mobile : ajustement peek et full-width * - Peek augmenté : 64px de chaque côté (au lieu de 7.5vw) * - Slides : width: calc(100vw - 128px) * - Full-width breakout avec left: 50% + margin-left: -50vw (plus robuste) * - Fix padding asymétrique gauche/droite * 0.0.54 - Fix carousel mobile : centrage et effet peek * - Slides à 85vw (au lieu de calc complexe) * - Suppression padding track (centrage géré par JS) * - Permet de voir slides précédent/suivant (effet peek) * 0.0.53 - Carousel mobile pour derniers-articles-homepage * - Desktop : grid 2 colonnes conservé (wrappé dans .derniers-articles-desktop) * - Mobile : carousel horizontal avec effet peek * - Slides 80% de la largeur (on voit ~10% de chaque côté) * - Navigation par dots avec active state * - Full-width avec annulation padding .main-section * - Transition smooth 0.8s cubic-bezier * 0.0.52 - Hero CTAs mobile : réduction gap d'un cran * - gap: var(--spacing-md) → var(--spacing-sm) (24px → 16px) * - Espacement entre les 2 CTAs réduit pour interface plus compacte * 0.0.51 - Carousel-produits mobile : décalages images augmentés * - Image 1 : translateX(-15%) au lieu de -10% (+5% vers gauche) * - Image 2 : translateX(calc(-50% + 30%)) au lieu de +20% (+10% vers droite) * - Superposition plus dynamique et écartée * 0.0.50 - Carousel-produits mobile : décalage deuxième image doublé * - translateX(calc(-50% + 20%)) au lieu de +10% * - Superposition plus prononcée à droite * 0.0.49 - Carousel-produits mobile : ajustement fond coloré * - width: 100% (au lieu de 95%) * - height: 45% (au lieu de 35%) * - bottom: 15% (au lieu de 10%) * 0.0.48 - Carousel-produits mobile : fond coloré proportionnel * - height: 35% au lieu de 125px * - bottom: 10% au lieu de 35px * - S'adapte automatiquement à toutes tailles d'écran * 0.0.47 - Carousel-produits mobile : dots positionnés tout en bas * - bottom: 0 au lieu de var(--spacing-md) * 0.0.46 - Carousel-produits mobile : suppression padding-bottom wrapper * 0.0.45 - Carousel-produits mobile : tailles images proportionnelles * - Première image : 58% du conteneur (au lieu de 220px) * - Deuxième image : 46% du conteneur (au lieu de 176px) * - Décalages : -10% et +10% (au lieu de -35px et +35px) * - aspect-ratio: 1 pour format carré * - Images s'adaptent automatiquement à toutes tailles d'écran * 0.0.44 - Carousel-produits mobile : transition plus douce et élégante * - Durée transition : 0.8s au lieu de 0.3s * - Plus cohérent avec desktop (1.5s) pour expérience fluide * 0.0.43 - Carousel-produits mobile : alignement gauche dans .lvl-2 * - align-items: flex-start pour éviter que CTA prenne 100% largeur * 0.0.42 - Carousel-produits mobile : ajout gap vertical sur .lvl-2 * - display: flex, flex-direction: column, gap: var(--spacing-md) * - Espace entre texte descriptif et CTA * 0.0.41 - Carousel-produits mobile : espacement images augmenté * - Première image : translateX(-35px) au lieu de -25px * - Deuxième image : translateX(calc(-50% + 35px)) au lieu de +25px * - Décalage total augmenté de 20px (10px par image) * 0.0.40 - Carousel-produits mobile : fond coloré aligné à gauche * - left: 0 au lieu de right: 0 * 0.0.39 - Carousel-produits mobile : fix espace transitions * - padding-right sur carousel-slide-content au lieu du slide * - box-sizing: border-box pour inclure padding dans les 100% * - Contenu légèrement plus étroit, espace visible pendant transitions * 0.0.38 - Carousel-produits mobile : espace transitions sans réduire slides * - padding-right: var(--spacing-lg) sur slides * - box-sizing: content-box (padding s'ajoute aux 100%) * - Slides gardent 100% visible, espace uniquement pendant transitions * 0.0.37 - Carousel-produits mobile : ajout gap entre slides * - gap: var(--spacing-lg) sur carousel-track * - Espace visible lors des transitions * 0.0.36 - Carousel-produits mobile : largeur fond coloré 95% (right: 0) * 0.0.35 - Carousel-produits mobile : hauteur fond coloré augmentée à 125px * 0.0.34 - Carousel-produits mobile : ajustement fond coloré * - bottom: 35px (au lieu de 50px) * - width: 100% (au lieu de 95%) * - left: 0 (au lieu de right: 0) * 0.0.33 - Carousel-produits mobile : ajustement position fond coloré * - bottom: 50px au lieu de 0 (remonté de 50px) * 0.0.32 - Carousel-produits mobile : ajout classes couleurs fond * - Classes .carousel-bg-* (green, blue, pink, gold, text) * - Nécessaire car carousel.css est desktop only * - Couleurs maintenant appliquées sur mobile * 0.0.31 - Carousel-produits mobile : fix couleur fond visible * - z-index: 0 au lieu de -1 (était derrière le conteneur parent) * - Fond maintenant visible avec couleur appliquée * 0.0.30 - Refactoring : renommage classe carousel-pink-background → carousel-color-background * 0.0.29 - Carousel-produits mobile : fix visibilité fond coloré * - z-index: -1 au lieu de 0 (derrière tout) * - height: 100px au lieu de 50px * - width: 95%, right: 0 (aligné droite comme desktop) * - Suppression border-radius * 0.0.28 - Carousel-produits mobile : suppression min-height carousel-images-container * - Hauteur naturelle déterminée par le contenu * 0.0.27 - Carousel-produits mobile : ajustements finaux images et fond coloré * - Décalages réduits à 25px (au lieu de 50px) * - Sélecteurs :first-child:not(:only-child) pour ne pas décaler image unique * - Image unique : transform none, reste centrée * - carousel-pink-background : height 50px au lieu de 100%, bottom 0 * - carousel-image-wrapper : suppression min-height 240px * 0.0.26 - Carousel-produits mobile : fix décalages avec transform * - Première image : transform translateX(-50px) au lieu de margin-left * - Deuxième image : transform translateX(calc(-50% + 50px)) pour décalage exact 50px droite * - Décalages maintenant effectifs (pas annulés par justify-content center) * 0.0.25 - Carousel-produits mobile : ajustement décalages et alignement * - Première image : margin-left 50px (décalage gauche) * - Deuxième image : left calc(50% + 50px) (décalage 50px droite), bottom 0 (aligné bas) * - Conteneur : align-items flex-end (alignement bas des 2 images) * - Image unique reste centrée * 0.0.24 - Carousel-produits mobile : superposition identique desktop * - Première image : 220px, margin-left 40px, z-index 1 (arrière) * - Deuxième image : 176px (80% de 220px), centrée + offset (40px droite, -10px bas), z-index 2 (devant) * - Image unique : 220px, centrée (margin-left 0) * - Transform translateX(-50%) sur deuxième image pour centrage exact * 0.0.23 - Carousel-produits mobile : refonte layout images * - Première image : 220px, alignée gauche avec padding-left * - Deuxième image : 160px, centrée + offset (30px droite, -20px bas) * - Image unique : 220px, margin-left pour décalage * - Conteneur : min-height 280px, justify-content flex-start * 0.0.22 - Carousel-produits mobile : fix dots visibilité et H3 * - Dots positionnés à l'intérieur du wrapper (bottom: var(--spacing-md)) * - Margin-bottom sur track pour espacement slides/dots * - H3 titre produit : variables H3 globales (font-size, line-height) * 0.0.21 - Carousel-produits mobile : amélioration dots et boucle infinie * - Dots sous les slides (position: absolute, bottom) * - Style dots identique desktop (opacity, border) * - Padding-bottom wrapper pour espace dots * - Support boucle infinie via clones (géré en JS) * 0.0.20 - Carousel-produits mobile : carousel horizontal avec swipe * - BREAKING : Refonte complète en vrai carousel horizontal * - Architecture : track flex avec slides côte à côte (flex: 0 0 100%) * - Transition : transform 0.3s var(--ease-smooth) * - Touch-action : pan-y pour permettre scroll vertical * - Classe .dragging : désactive transition pendant drag * - Will-change: transform pour performance * - Swipeable au doigt (nécessite JS) * - Navigation dots conservée * 0.0.19 - Carousel-produits mobile : refonte complète du carousel * - BREAKING : Reprise intégrale du carousel mobile * - Carousel fonctionnel avec slides qui défilent (position absolute/relative) * - Layout vertical : image en haut, texte en bas * - Images superposées optimisées : 240px (grande) + 140px (petite, coin bas droit) * - Conteneur wrapper : min-height 500px pour transitions fluides * - Transitions opacity 800ms pour changements de slide * - Navigation dots uniquement (10px, scale 1.2 actif) * - Gap var(--spacing-lg) entre image et texte * - Tailles texte adaptées : H3 → var(--text-size-xl), texte → var(--text-size-cta) * 0.0.18 - Carousel-produits mobile : fix largeur images = hauteur (format carré) * - Première image : width: 280px (au lieu de auto) * - Deuxième image : width: 225px (au lieu de auto) * - Fix Imagify : largeur forcée sur img et picture * - Correction taille images pour proportions cohérentes * 0.0.17 - Carousel-produits mobile : décalage deuxième image droite et bas * - Deuxième image : décalage +32px vers la droite (left: calc(50% + 32px)) * - Deuxième image : décalage +16px vers le bas (bottom: -16px) * - Valeurs proportionnelles à desktop (10vh → 32px, 5vh → 16px) * 0.0.16 - Carousel-produits mobile : ajustement positionnement et taille images * - Première image : décalage +32px vers la droite (proportionnel à 10vh desktop) * - Deuxième image : augmentation taille +25% (180px → 225px, soit 80% de 280px) * - Deuxième image : alignement en bas (bottom: 0) * - Cohérence avec le design desktop * 0.0.15 - Carousel-produits mobile : centrage de la deuxième image * - Deuxième image centrée : left 50%, transform translateX(-50%) * - Cohérence avec le design desktop * 0.0.14 - Carousel-produits mobile : design superposé pour 2 variations * - Première image : 280px (au lieu de 50vh) * - Deuxième image : 180px (64% de 280px) * - Décalage right : -8px (proportionnel à desktop) * - Min-height conteneur : 280px * 0.0.13 - Carousel-produits mobile : support images multiples pour produits variables * - Réduction gap : 3vh → var(--spacing-sm) (8px) pour mobile * - Limite 2 images visibles sur mobile (au lieu de 3 desktop) pour économiser l'espace * - Adaptation responsive des largeurs max * 0.0.12 - UX : augmentation espacement entre colonnes hero mobile * - Row-gap : var(--spacing-lg) → var(--spacing-xl) (16px → 32px) * - Meilleure séparation texte/image sur mobile (stack vertical) * 0.0.11 - UX : augmentation espacement vertical CTAs hero sur mobile * - Gap : var(--spacing-xs) → var(--spacing-md) (4px → 12px) * - Améliore la respiration et facilite le tap sur mobile * 0.0.10 - Fix : fusion des 2 blocs transmission-intro (tablette + mobile) en 1 seul ≤1200px * - Vestige de l'ancien breakpoint tablette (768-1200px) supprimé * - Utilise valeurs mobiles compactes (width: 100%) * 0.0.9 - BREAKING CHANGE : Suppression breakpoint tablette (768-1200px) * - Fusion tablette + mobile → 1 seul breakpoint ≤1200px pour chaque section * - Hero : stack vertical systématique, image 300px * - Contenu : stack vertical systématique * - Carousel Produits : stack vertical (image → texte), 350px (au lieu de 400px tablette) * - Carousel Transmission : stack vertical, 300px (au lieu de 400px tablette) * - Derniers Articles : 1 colonne (au lieu de 2 colonnes tablette) * - Utilisation valeurs mobiles compactes * - Simplification maintenance : ~322 lignes CSS supprimées (12 blocs → 6 blocs) * 0.0.8 - Migration système de line-height unifié * - 1.5 → var(--line-height-comfortable) * - Cohérence avec système à 3 valeurs sémantiques * 0.0.7 - Migration système de typographie unifié * - Carousel H2 : 48px/32px → var(--font-h2-large-size) * - Carousel h3 : 24px/20px → var(--text-size-xl) * - Carousel p : 15px/14px → var(--text-size-cta) * - Suppression toutes valeurs hardcodées * - Cohérence avec système à 6 tailles sémantiques * 0.0.6 - Fix sous-titre hero : ajout toutes les propriétés manquantes * - Ajout font-family, font-weight, letter-spacing, text-transform * - Correction nom classe : .hero-subtitle → .section-subtitle (cohérence avec desktop) * - Garantit style complet sur tablette et mobile * 0.0.5 - Correction finale : 3 padding mobile oubliés migrés vers variables * - transmission-intro, carousel-produits, carousel-transmission mobile * - padding: 40px 20px → var(--spacing-xl) var(--spacing-lg) * 0.0.4 - Migration complète vers variables d'espacement sémantiques * - Tous les espacements (padding, margin, gap) utilisent var(--spacing-*) * - Suppression des valeurs en px en dur * - Adaptation automatique selon breakpoint (tablette/mobile) * 0.0.3 - Doublement du padding vertical des sections * - Tablette : padding: 80px 40px (vertical double de l'horizontal) * - Mobile : padding: 40px 20px (vertical double de l'horizontal) * - Plus d'espace vertical pour respiration du contenu * 0.0.2 - Uniformisation padding sections (carré) * - Tablette : padding: 40px (au lieu de 60px 40px) * - Mobile : padding: 20px (au lieu de 40px 20px) * - Padding identique tout autour pour cohérence visuelle * - Alignement avec header (40px tablette, 20px mobile) * 0.0.1 - Version initiale complète du responsive des sections * - Hero : stack vertical mobile, 2 col tablette * - Contenu : stack vertical mobile, adaptation tablette * - Transmission Intro : colonne centrée adaptée, images masquées * - Carrousels : slides en stack vertical, navigation adaptée * - Articles : animation désactivée, grid/stack adapté */ /* ============================================================================ RESET & GLOBAL (Tablette + Mobile) ========================================================================== */ @media (max-width: 1200px) { /* Reset padding/indent des niveaux sur tablette et mobile */ .lvl-0 { text-indent: 0; padding-left: 0; } .lvl-0-5 { text-indent: 0; padding-left: 0; } .lvl-1 { padding-left: 0; } .lvl-2 { padding-left: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; } /* Reset optimisations parallax sur mobile (désactive will-change + force visibilité) */ #nuage-or-transmission, #jouet-avion, #jouet-train { will-change: auto; opacity: 1 !important; } /* ----------------------------------------------------------------------- HERO - Mobile et Tablette fusionnés (≤1200px) ----------------------------------------------------------------------- */ /* Section Hero (accueil + transmission) */ /* Stack vertical : Texte → Image */ .section-model-hero .section-columns, .section-model-transmission-hero .section-columns { display: flex; flex-direction: column; column-gap: 0; row-gap: var(--spacing-xl); /* 32px mobile - Double espacement pour meilleure séparation texte/image */ } /* Colonne 1 : Texte */ .section-model-hero .section-column-col1, .section-model-transmission-hero .section-column-col1 { display: flex; flex-direction: column; gap: var(--spacing-md); order: 1; } /* Titre Hero */ .section-model-hero h1, .section-model-transmission-hero h1 { font-family: var(--font-h1-home-family); font-size: var(--font-h1-home-size); font-weight: var(--font-h1-home-weight); line-height: var(--font-h1-home-line-height); } /* Sous-titre Hero */ .section-model-hero .section-subtitle, .section-model-transmission-hero .section-subtitle { font-family: var(--font-subtitle-hero-family); font-size: var(--font-subtitle-hero-size); font-weight: var(--font-subtitle-hero-weight); line-height: var(--font-subtitle-hero-line-height); letter-spacing: var(--font-subtitle-hero-letter-spacing); text-transform: var(--font-subtitle-hero-text-transform); text-wrap: balance; } /* Texte Hero */ .section-model-hero .hero-text p, .section-model-transmission-hero .hero-text p { font-size: var(--font-text-size); } /* CTAs en colonne */ .section-model-hero .hero-ctas, .section-model-transmission-hero .hero-ctas { display: flex; flex-direction: column; gap: var(--spacing-sm); /* 16px mobile pour meilleure respiration et facilité tap */ align-items: flex-start; } /* Colonne 2 : Image (hero standard) */ .section-model-hero .section-column-col2 { order: 2; } .section-model-hero .section-column-col2 img { max-height: 40vh; width: 100%; object-fit: cover; } /* Colonne 2 : Transmission Hero — même pattern que transmission-intro */ .section-model-transmission-hero .section-column-col2 { order: 2; position: relative; height: 100vw; /* Hauteur définie = référence pour les enfants absolus */ } /* Wrapper du fond : dépasse col2 pour absorber le padding horizontal de .main-section */ .section-model-transmission-hero .transmission-hero-background-wrap { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--spacing-md)); right: calc(-1 * var(--spacing-md)); overflow: hidden; z-index: 0; } /* Image de fond : pleine surface du wrapper */ .section-model-transmission-hero .transmission-hero-background, .section-model-transmission-hero .transmission-hero-background img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; display: block; } /* Rotation 90° horaire sur le conteneur uniquement (pas sur l'img enfant Imagify) */ .section-model-transmission-hero .transmission-hero-background { transform: rotate(90deg); transform-origin: center center; } /* Jouets : positionnement absolu dans col2 — même logique que transmission-intro */ .section-model-transmission-hero .transmission-hero-toy { position: absolute; z-index: 2; } /* Jouet 1 (avion) : coin supérieur droit, comme #jouet-avion dans intro */ .section-model-transmission-hero .transmission-hero-toy-1 { display: block !important; right: -25vw; top: -10vw; width: 40vw; height: auto; } .section-model-transmission-hero .transmission-hero-toy-1 img { width: 100%; height: auto; display: block; } /* Jouet 2 (sous-marin) : coin inférieur gauche, comme #jouet-train dans intro */ .section-model-transmission-hero .transmission-hero-toy-2 { display: block !important; left: -25vw; bottom: 10vw; width: 50vw; height: auto; } .section-model-transmission-hero .transmission-hero-toy-2 img { width: 100%; height: auto; display: block; } /* ----------------------------------------------------------------------- CONTENU (générique) - Mobile et Tablette fusionnés (≤1200px) ----------------------------------------------------------------------- */ .section-model-contenu { padding: var(--spacing-xl) var(--spacing-lg); } /* Stack vertical systématique */ .section-model-contenu .section-columns { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Ordre inversé si mirror */ .section-model-contenu.section-mirrored .section-column-1 { order: 2; } .section-model-contenu.section-mirrored .section-column-2 { order: 1; } /* ----------------------------------------------------------------------- TRANSMISSION INTRO - Mobile et Tablette fusionnés (≤1200px) ----------------------------------------------------------------------- */ .section-model-transmission-intro { position: relative; padding: var(--spacing-xl) var(--spacing-lg); } /* Stack vertical - décalage sous l'image de fond */ .section-model-transmission-intro .section-columns { display: flex; flex-direction: column; margin-top: 60vw; } /* Colonne pleine largeur - au-dessus de l'image de fond */ .section-model-transmission-intro .section-column-col1 { width: 100%; position: relative; z-index: 1; } /* Image de fond : rotation 90° horaire, pleine largeur, alignée en haut */ .transmission-intro-background { display: block !important; position: absolute; top: -5%; left: 0; width: 100%; height: 100vw; /* Hauteur = largeur viewport pour la rotation 90° */ transform: rotate(90deg); transform-origin: center center; background-size: contain; background-position: center top; background-repeat: no-repeat; z-index: 0; } /* Jouets décoratives : positionnement mobile pour parallax vertical */ #jouet-avion { display: block !important; position: absolute; top: -15vw; right: 5vw; width: 20vw; height: auto; z-index: 2; } #jouet-train { display: block !important; position: absolute; top: 20vw; left: 5vw; width: 25vw; height: auto; z-index: 2; } /* Images des jouets : pleine largeur */ #jouet-avion img, #jouet-train img { width: 100%; height: auto; display: block; } /* Titres H2/H3 largeurs 100% */ .section-model-transmission-intro h2, .section-model-transmission-intro h3 { width: 100% !important; max-width: 100% !important; } /* Gap du modèle de colonne titres-texte-cta */ .column-model-titres-texte-cta { display: flex; flex-direction: column; gap: var(--spacing-md); align-items: flex-start; } /* ------------------------------------------------------------------------- Bandeau Transmission — mobile Rotation 90° horaire, plein écran (annulation padding .main-section), image par-dessus au centre bas SVG viewBox 532×778 → tourné : hauteur visuelle = 532/778 × 100vw ≈ 68.4vw ------------------------------------------------------------------------- */ /* Couleurs — répétées ici car les classes desktop sont dans @media (min-width: 1201px) */ .bandeau-transmission-svg.bt-color-green { color: var(--color-green); } .bandeau-transmission-svg.bt-color-blue { color: var(--color-blue); } .bandeau-transmission-svg.bt-color-pink { color: var(--color-pink); } .bandeau-transmission-svg.bt-color-gold { color: var(--color-gold); } .column-model-bandeau-transmission { position: relative; height: 100vw; margin-left: calc(-1 * var(--spacing-md)); margin-right: calc(-1 * var(--spacing-md)); overflow: hidden; } /* SVG tourné 90° horaire, aligné en bas avec l'image CSS box: 68.4vw × 100vw → visuel: 100vw large, 68.4vw haut Pour bas visuel = bas conteneur : bottom = CSS_height/2 - CSS_width/2 = 50vw - 34.2vw = -15.8vw */ .bandeau-transmission-svg { display: block; position: absolute; bottom: -15.8vw; left: 50%; width: 68.4vw; /* hauteur visuelle après rotation */ height: 100vw; /* largeur visuelle après rotation */ transform: translateX(-50%) rotate(90deg); transform-origin: center center; } /* Image : par-dessus le SVG, centrée en bas */ .bandeau-transmission-image { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; } .bandeau-transmission-image picture { display: contents; } .column-model-bandeau-transmission .bandeau-transmission-image img { display: block; width: auto; height: 100vw; max-width: none; } /* Animation Transmission dans H2 - Mobile uniquement */ .section-model-transmission-intro .transmission-intro-char-anim { display: inline-block; padding-right: 0.15em; margin-right: -0.15em; transition: color 0.15s ease-out, transform 0.4s; transform-origin: center bottom; } /* @keyframes transmissionIntroBounce supprimé — déclaré globalement dans sections.css */ .transmission-intro-bounce-active { animation: transmissionIntroBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } } /* ============================================================================ TRANSMISSION MISSION - Mobile et Tablette fusionnés (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* Supprime le margin-right desktop */ .section-model-transmission-mission { margin-right: 0; } /* Icône inline dans le titre : 1em (pas 1.1em) pour rester dans le line box, vertical-align négatif pour centrage visuel sans débordement sous la baseline */ .section-model-transmission-mission .mission-icon-svg { width: 1em; height: 1em; vertical-align: -0.1em; } /* Stack vertical : col2 (texte) en premier, col1 (visuels) en dessous */ .section-model-transmission-mission .section-columns { display: flex; flex-direction: column; gap: var(--spacing-xl); } /* Col2 : texte en premier */ .section-model-transmission-mission .section-column-col2 { order: 1; } /* Col1 : composition visuelle en dessous */ .section-model-transmission-mission .section-column-col1 { order: 2; position: relative; height: 80vw; overflow: visible; } /* Chaque élément : ancré au centre de la colonne (même approche que desktop) */ .section-model-transmission-mission .mission-cloud { position: absolute; left: 50%; top: 50%; } .section-model-transmission-mission .mission-cloud img, .section-model-transmission-mission .mission-cloud picture img { height: auto; display: block; } /* Nuage Rose — petit, haut gauche */ .section-model-transmission-mission .mission-cloud-pink { z-index: 1; transform: translateX(calc(-50% - 15vw)) translateY(calc(-50% - 30vw)); } .section-model-transmission-mission .mission-cloud-pink img, .section-model-transmission-mission .mission-cloud-pink picture img { width: 25vw; } /* Nuage Or — moyen, haut droite */ .section-model-transmission-mission .mission-cloud-gold { z-index: 2; transform: translateX(calc(-50% + 8vw)) translateY(calc(-50% - 20vw)); } .section-model-transmission-mission .mission-cloud-gold img, .section-model-transmission-mission .mission-cloud-gold picture img { width: 40vw; } /* Nuage Vert — dominant, centre bas */ .section-model-transmission-mission .mission-cloud-green { z-index: 3; transform: translateX(calc(-50% - 15vw)) translateY(calc(-50% - 2vw)); } .section-model-transmission-mission .mission-cloud-green img, .section-model-transmission-mission .mission-cloud-green picture img { width: 80vw; } /* Jouet (avion) — inversé horizontal, décalé bas gauche, animation vol */ .section-model-transmission-mission .mission-toy { z-index: 4; transform: translateX(calc(-50% + 30vw)) translateY(calc(-50% + 8vw)); } .section-model-transmission-mission .mission-toy img, .section-model-transmission-mission .mission-toy picture img { width: 40vw; animation: airplane-fly-mobile 4.2s ease-in-out infinite; } /* Animation vol avion — valeurs px pour mobile (vh du desktop inadaptées) */ @keyframes airplane-fly-mobile { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-2deg); } 55% { transform: translateY(-1px) rotate(1.5deg); } 80% { transform: translateY(-4px) rotate(-1deg); } 100% { transform: translateY(0) rotate(0deg); } } } /* ============================================================================ CAROUSEL PRODUITS - Mobile (≤1200px) - Carousel horizontal avec swipe ========================================================================== */ @media (max-width: 1200px) { /* Section - pas de padding horizontal pour que le carousel tape les bords */ .section-model-carousel-produits { padding: var(--spacing-xl) 0; } /* Titre H2 - padding horizontal identique à .main-section */ .section-model-carousel-produits .carousel-main-title { font-size: var(--font-h2-large-size); line-height: var(--line-height-tight); margin: 0 0 var(--spacing-lg) 0; width: 100%; padding: 0 var(--spacing-md); } /* Conteneur carousel avec overflow hidden pour slide horizontal */ .section-model-carousel-produits .uav-carousel-wrapper { position: relative; width: 100%; overflow: hidden; } /* Track qui contient tous les slides côte à côte */ .section-model-carousel-produits .carousel-track { display: flex; width: 100%; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); /* Espace entre slides et dots */ transition: transform 0.8s var(--ease-smooth); will-change: transform; } /* Pendant le drag, désactiver la transition pour suivre le doigt */ .section-model-carousel-produits .carousel-track.dragging { transition: none; } /* Chaque slide prend 100% de la largeur */ .section-model-carousel-produits .uav-carousel-slide { flex: 0 0 100%; width: 100%; min-height: 65vh; } /* Contenu du slide : layout vertical (image → texte) */ .section-model-carousel-produits .carousel-slide-content { display: flex; flex-direction: column; gap: var(--spacing-lg); width: 100%; } /* Colonne image (en haut) */ .section-model-carousel-produits .carousel-slide-right { order: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } /* Conteneur image-wrapper */ .section-model-carousel-produits .carousel-image-wrapper { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } /* Images superposées pour produits variables */ .section-model-carousel-produits .carousel-images-container { position: relative; width: 100%; display: flex; align-items: flex-end; /* Alignement bas pour les 2 images */ justify-content: center; } /* Première variation : grande image à gauche (arrière-plan) */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:first-child:not(:only-child) { position: relative; width: 58%; aspect-ratio: 1; transform: translateX(-15%); /* Décalage proportionnel vers la gauche augmenté */ z-index: 1; } .section-model-carousel-produits .carousel-images-container .carousel-product-image:first-child:not(:only-child) img, .section-model-carousel-produits .carousel-images-container picture:first-child:not(:only-child) img { width: 100%; height: 100%; object-fit: cover; } /* Deuxième variation : petite image à droite (premier plan) */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:last-child:not(:only-child) { position: absolute; width: 46%; /* 80% de 58% */ aspect-ratio: 1; left: 50%; bottom: 0; /* Aligné sur le bas */ transform: translateX(calc(-50% + 30%)); /* Centré + décalage proportionnel droite augmenté */ z-index: 2; } .section-model-carousel-produits .carousel-images-container .carousel-product-image:last-child:not(:only-child) img, .section-model-carousel-produits .carousel-images-container picture:last-child:not(:only-child) img { width: 100%; height: 100%; object-fit: cover; } /* Image unique (produit simple ou 1 seule variation) - centrée */ .section-model-carousel-produits .carousel-images-container .carousel-product-image:only-child { position: relative; width: 58%; aspect-ratio: 1; transform: none; /* Pas de décalage, reste centrée */ z-index: 1; } .section-model-carousel-produits .carousel-images-container .carousel-product-image:only-child img, .section-model-carousel-produits .carousel-images-container picture:only-child img { width: 100%; height: 100%; object-fit: cover; } /* Conteneur coloré derrière l'image */ .section-model-carousel-produits .carousel-color-background { position: absolute; width: 100%; height: 45%; bottom: 15%; left: 0; z-index: 0; } /* .carousel-bg-* supprimées — centralisées dans style.css */ /* Colonne texte (en bas) - padding horizontal identique à .main-section */ .section-model-carousel-produits .carousel-slide-left { order: 2; width: 100%; display: flex; flex-direction: column; gap: var(--spacing-md); padding: 0 var(--spacing-md); box-sizing: border-box; } /* Titre produit - utiliser les variables H3 globales */ .section-model-carousel-produits .carousel-slide-title { font-family: var(--font-h3-family); font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); margin: 0; width: 100%; } /* Texte produit */ .section-model-carousel-produits .carousel-slide-text { font-family: var(--font-body-family); font-size: var(--text-size-cta); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); margin: 0; width: 100%; } /* CTA */ .section-model-carousel-produits .carousel-slide-cta { margin-top: var(--spacing-sm); } /* Navigation : dots uniquement */ .section-model-carousel-produits .carousel-arrow { display: none !important; } /* Dots - positionnés tout en bas du wrapper */ .section-model-carousel-produits .carousel-dots { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-xs); z-index: 10; } .section-model-carousel-produits .carousel-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text); opacity: 0.4; cursor: pointer; transition: opacity var(--transition-normal) ease; border: var(--border-thin) solid transparent; } .section-model-carousel-produits .carousel-dots .dot.active { opacity: 1; border-color: var(--color-text); } } /* ============================================================================ CAROUSEL TRANSMISSION - Mobile et Tablette fusionnés (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* ---- Section : conteneur principal ---- */ /* Pas d'overflow: hidden ici pour que le nuage or ne soit pas coupé en haut. Le body a déjà overflow-x: hidden (global reset) pour éviter la scrollbar. */ .section-model-carousel-transmission { position: relative; padding: var(--spacing-xl) 0; } /* ---- Wrapper : position static pour libérer les éléments absolute ---- overflow: hidden clippe le track mais PAS les enfants absolute car position: static ne crée pas de containing block */ .section-model-carousel-transmission .uav-carousel-wrapper { position: static; width: 100%; overflow-x: clip; overflow-y: visible; } /* ---- Éléments décoratifs : visibles et positionnés ---- */ /* Nuage Or - Premier plan, grand, parallax JS */ .carousel-nuage-or { display: block !important; position: absolute; top: 5vw; left: -40vw; z-index: 10; pointer-events: none; will-change: transform; } .carousel-nuage-or .carousel-nuage-image { display: block; width: 55vw; height: auto; } /* Nuage Rose - Arrière-plan, bas droite, animation flottement */ .carousel-nuage-rose { display: block !important; position: absolute; bottom: calc(-3vw - var(--spacing-xl)); right: -10vw; z-index: 0; pointer-events: none; animation: rose-mobile-float 8s ease-in-out infinite alternate; } .carousel-nuage-rose .carousel-nuage-image { display: block; width: 35vw; height: auto; } /* Nuage Vert - Masqué sur mobile */ .section-model-carousel-transmission .carousel-nuage-vert { display: none !important; } /* Nuage Vert - Arrière-plan, bas gauche, animation flottement */ .carousel-nuage-vert { display: block !important; position: absolute; bottom: calc(-3vw - var(--spacing-xl)); left: -6vw; z-index: 0; pointer-events: none; animation: vert-mobile-float 10s ease-in-out infinite alternate; } .carousel-nuage-vert .carousel-nuage-image { display: block; width: 30vw; height: auto; } /* Montgolfière - Masquée sur mobile */ .section-model-carousel-transmission .carousel-montgolfiere { display: none !important; } /* Montgolfière - Derrière les livres (z-index 0) */ .carousel-montgolfiere { display: block !important; position: absolute; top: -18vw; right: 3vw; z-index: 0; pointer-events: none; animation: mtg-mobile-float 12s ease-in-out infinite alternate; } .carousel-montgolfiere .carousel-nuage-image { display: block; width: 25.2vw; /* 28vw - 10% */ height: auto; } /* ---- Keyframes simplifiés (transform simple, pas de @property) ---- */ @keyframes rose-mobile-float { 0% { transform: translate(0, 0); } 50% { transform: translate(-2vw, -3vw); } 100% { transform: translate(1vw, -1vw); } } @keyframes vert-mobile-float { 0% { transform: translate(0, 0); } 50% { transform: translate(2vw, -2vw); } 100% { transform: translate(-1vw, -3vw); } } @keyframes mtg-mobile-float { 0% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-3vw, 2vw) rotate(-2deg); } 66% { transform: translate(1vw, -1vw) rotate(1.5deg); } 100% { transform: translate(-2vw, 3vw) rotate(-1deg); } } /* ---- Track : carousel horizontal ---- */ .section-model-carousel-transmission .carousel-track { display: flex; width: 100%; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); transition: transform 0.8s var(--ease-smooth); will-change: transform; } .section-model-carousel-transmission .carousel-track.dragging { transition: none; } /* ---- Slides : 100% largeur, layout vertical ---- */ .section-model-carousel-transmission .uav-carousel-slide { flex: 0 0 100%; width: 100%; } .section-model-carousel-transmission .carousel-slide-content { display: flex; flex-direction: column; gap: 0; width: 100%; } /* ---- Images : en haut du slide ---- */ .section-model-carousel-transmission .carousel-slide-left { order: 1; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .section-model-carousel-transmission .carousel-image-wrapper, .section-model-carousel-transmission .carousel-images-dual { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: auto; } /* Image principale : 65% largeur, décalée gauche, premier plan */ .section-model-carousel-transmission .carousel-image-item:first-child:not(:only-child) { position: relative; width: 65%; z-index: 3; transform: translateX(-8%); } .section-model-carousel-transmission .carousel-image-item:first-child:not(:only-child) .carousel-product-image, .section-model-carousel-transmission .carousel-image-item:first-child:not(:only-child) img { width: 100%; height: auto; max-height: none; object-fit: contain; filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, 0.25)); } /* Image secondaire : 45% largeur, arrière-plan, décalée droite */ .section-model-carousel-transmission .carousel-image-item:last-child:not(:only-child) { position: absolute; width: 45%; z-index: 1; right: 5%; top: 50%; transform: translateY(-50%); } .section-model-carousel-transmission .carousel-image-item:last-child:not(:only-child) .carousel-product-image, .section-model-carousel-transmission .carousel-image-item:last-child:not(:only-child) img { width: 100%; height: auto; max-height: none; object-fit: contain; filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, 0.12)); } /* Image unique : légèrement décalée gauche */ .section-model-carousel-transmission .carousel-image-item:only-child { position: relative; width: 65%; z-index: 3; transform: translateX(-8%); } .section-model-carousel-transmission .carousel-image-item:only-child .carousel-product-image, .section-model-carousel-transmission .carousel-image-item:only-child img { width: 100%; height: auto; max-height: none; object-fit: contain; filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, 0.25)); } /* ---- Texte : en bas du slide ---- */ .section-model-carousel-transmission .carousel-slide-right { order: 2; width: 100%; display: flex; flex-direction: column; gap: var(--spacing-md); padding: 0 var(--spacing-md); box-sizing: border-box; } /* Titre produit */ .section-model-carousel-transmission .carousel-slide-title { font-family: var(--font-h3-family); font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); margin: 0; width: 100%; } /* Texte produit */ .section-model-carousel-transmission .carousel-slide-text { font-family: var(--font-body-family); font-size: var(--text-size-cta); font-weight: var(--font-text-weight); line-height: var(--line-height-comfortable); margin: 0; width: 100%; } /* CTA */ .section-model-carousel-transmission .carousel-slide-cta { margin-top: var(--spacing-sm); } /* ---- Navigation : flèches masquées, dots uniquement ---- */ .section-model-carousel-transmission .carousel-arrow { display: none !important; } .section-model-carousel-transmission .carousel-dots { position: absolute; bottom: var(--spacing-sm); left: 50%; transform: translateX(-50%); display: flex; gap: var(--spacing-xs); z-index: 15; } .section-model-carousel-transmission .carousel-dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text); opacity: 0.4; cursor: pointer; transition: opacity var(--transition-normal) ease; border: var(--border-thin) solid transparent; } .section-model-carousel-transmission .carousel-dots .dot.active { opacity: 1; border-color: var(--color-text); } } /* ============================================================================ DERNIERS ARTICLES - Mobile et Tablette fusionnés (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* Section */ .section-column.column-model-derniers-articles-homepage { padding: 0; } /* 1 colonne */ .derniers-articles-columns { display: flex; flex-direction: column; gap: var(--spacing-lg); } .derniers-articles-column { width: 100%; height: auto; overflow: visible; } /* Désactiver vertical-track transform */ .vertical-track { transform: none !important; } /* Limite 6 articles max pour performance */ .derniers-articles-column .article-loop-item:nth-child(n+7) { display: none; } /* ----------------------------------------------------------------------- Carousel Articles - Mobile uniquement (≤1200px) ----------------------------------------------------------------------- */ /* Mobile : masquer grid desktop, afficher carousel */ .derniers-articles-desktop { display: none; } .derniers-articles-mobile { display: block; width: 100vw; position: relative; left: 50%; margin-left: -50vw; } /* Wrapper du carousel - largeur = un slide (pour système %) */ .articles-carousel-wrapper { position: relative; width: calc(100vw - 128px); /* Un slide = 100vw - 128px (64px peek de chaque côté) */ margin: 0 auto; overflow: visible; /* Permet de voir les slides adjacents (peek) */ padding: var(--spacing-lg) 0; } /* Track qui contient tous les slides */ .articles-carousel-track { display: flex; flex-direction: row; gap: var(--spacing-md); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } /* Désactiver la transition pendant le drag */ .articles-carousel-track.dragging { transition: none !important; } /* Chaque slide - 100% du wrapper (système de % pour translateX) */ .articles-carousel-slide { flex-shrink: 0; width: 100%; } /* Article loop item dans le carousel (override margin) */ .articles-carousel-slide .article-loop-item { margin: 0; height: 100%; } /* Navigation dots */ .articles-carousel-nav { display: flex; justify-content: center; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-md) 0 0 0; } .articles-carousel-nav .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-text); border: none; padding: 0; cursor: pointer; opacity: 0.3; transition: opacity var(--transition-normal) var(--ease-standard); } .articles-carousel-nav .carousel-dot.active { opacity: 1; } /* h1 standard mobile supprimé — centralisé dans style.css */ /* --- H1 HOME PAGE MOBILE (surcharge page d'accueil uniquement) --- */ .home h1 { font-family: var(--font-h1-home-family); font-size: var(--font-h1-home-size); font-weight: var(--font-h1-home-weight); line-height: var(--font-h1-home-line-height); } /* --- SECTION AUTEUR (single post) --- */ .author-section .section-columns { display: flex; flex-direction: column; gap: var(--spacing-xl); } /* --- PAGE AUTEUR : autres publications (mobile) --- */ .author-other-publications { margin-top: var(--spacing-md); } .author-other-publications p { margin-bottom: 0; margin-top: 1em; } .author-other-publications ul, .author-other-publications ol { padding-left: var(--spacing-md); } /* --- PAGE AUTEUR : section intro (archive auteur) --- */ .author-page-intro-section .section-columns { display: flex; flex-direction: column; gap: var(--spacing-xl); } .author-page-intro-col-text { display: flex; flex-direction: column; gap: var(--spacing-md); } /* --- SECTION DEMI-HAUTEUR (single post) --- */ .main-section-demi { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md) var(--spacing-md); } /* --- POST META MOBILE (métadonnées article) --- */ .post-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); width: 100%; } .post-meta-item { display: flex; align-items: center; gap: var(--spacing-xs); } .post-meta-avatar { width: 32px; height: 32px; border-radius: 50% !important; object-fit: cover; overflow: hidden; display: block; } .post-meta-icon { width: 0.75em; height: 0.75em; fill: var(--color-text); flex-shrink: 0; } .text-meta { font-family: var(--font-small-text-accent-family); font-size: var(--font-small-text-accent-size); font-weight: var(--font-small-text-accent-weight); text-transform: var(--font-small-text-accent-text-transform); line-height: var(--font-small-text-accent-line-height); color: var(--color-text); } /* --- EXTRAIT ARTICLE MOBILE (excerpt) --- */ .post-excerpt { font-family: var(--font-small-text-italic-family); font-size: var(--text-size-cta); font-weight: var(--font-small-text-italic-weight); font-style: var(--font-small-text-italic-style); line-height: var(--line-height-comfortable); color: var(--color-text); } /* --- IMAGE À LA UNE MOBILE (featured image) --- */ .post-featured-image { width: 100%; object-fit: cover; object-position: center center; } /* --- ARCHIVE / BLOG : SECTION DEMI MOBILE --- */ /* Image masquée dans la section demi sur les pages archive et blog */ .archive .main-section-demi .post-featured-image, .blog .main-section-demi .post-featured-image { display: none; } /* Hauteur auto car le contenu est variable (description + nav catégories) */ .archive .main-section-demi, .blog .main-section-demi { height: auto; } /* En-tête titre + décompte */ .archive-header { display: flex; flex-direction: column; gap: var(--spacing-xs); } /* Décompte publications */ .archive-count { font-family: var(--font-h4-family); font-size: var(--font-h4-size); font-weight: var(--font-h4-weight); line-height: var(--line-height-medium); color: var(--color-text); } /* Navigation catégories */ .archive-cat-nav { display: flex; flex-direction: column; gap: var(--spacing-xs); margin: var(--spacing-sm) 0 0; } .archive-cat-nav-title { font-family: var(--font-h4-family); font-size: var(--font-h4-size); font-weight: var(--font-h4-weight); line-height: var(--line-height-medium); color: var(--color-text); } .archive-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--spacing-xs) var(--spacing-sm); } .archive-cat-item { display: flex; align-items: center; font-family: var(--font-cta-family); font-size: var(--text-size-cta); font-weight: var(--font-cta-weight); color: var(--color-text); } .archive-cat-item a { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline; } .archive-cat-item a:hover { text-decoration: none; } .archive-cat-count { font-weight: 400; margin-left: var(--spacing-2xs); } /* Séparateur entre items - masqué sur mobile */ .archive-cat-item:not(:last-child)::after { display: none; } .archive-articles-section { padding-top: 0; } /* ======================================================================== ARTICLE HORIZONTAL LAYOUT MOBILE (< 1200px) Annule l'horizontalité et empile les colonnes verticalement ======================================================================== */ /* Conteneur principal : devient vertical */ .article-contenu-horizontal { display: block !important; flex-wrap: wrap !important; height: auto !important; width: 100% !important; overflow-x: hidden !important; overflow-y: visible !important; } /* Les colonnes générées par le JS : deviennent des blocs empilés */ .article-contenu-horizontal .dynamic-column { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-bottom: var(--spacing-xl) !important; flex: none !important; } /* Images sur mobile : centrées, taille normale (support Imagify picture) */ .article-contenu-horizontal picture, .article-contenu-horizontal img { max-height: 60vh !important; width: auto !important; max-width: 100% !important; height: auto !important; display: flex !important; margin: var(--spacing-sm) auto !important; } .article-contenu-horizontal picture img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .article-contenu-horizontal figure { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-bottom: var(--spacing-sm) !important; } /* Le fond coloré derrière l'image (masqué sur mobile) */ .article-contenu-horizontal figure::before { display: none !important; } /* Espacement sous les titres dans le contenu article */ .article-contenu-horizontal h2 { margin-bottom: var(--spacing-md); } .article-contenu-horizontal h3 { margin-bottom: var(--spacing-sm); } /* =========================== Archive articles - Mobile : stack vertical =========================== */ .archive-articles-row { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md) 0; } .archive-articles-row .article-loop-item { width: 100%; max-width: min(325px, 90vw); margin-left: auto; margin-right: auto; transform: none !important; } /* Cartes navigation : ligne horizontale avec flèche et texte */ .archive-nav-card { width: 100%; transform: none !important; } .archive-nav-card a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-xs); text-decoration: none; color: var(--color-text); padding: var(--spacing-sm) 0; min-height: 0; } .archive-nav-label { font-family: var(--font-cta-family); font-size: var(--text-size-cta); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text-light); } .archive-nav-arrow { font-size: var(--text-size-2xl); line-height: 1; } .archive-nav-text { font-family: var(--font-cta-family); font-size: var(--text-size-cta); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); } /* Note : .section-cta et ses variantes sont définis dans components-responsive.css (v0.0.30) Ce fichier est chargé après sections-responsive.css → source unique de vérité pour les CTAs */ } /* ============================================================================ SECTION ÉQUIPE — Mobile (≤1200px) — empilement vertical ========================================================================== */ @media (max-width: 1200px) { /* Modèle de colonne "Page - Hero column" */ .column-model-page-hero { display: flex; flex-direction: column; gap: var(--spacing-lg); } .page-hero-ctas { display: flex; flex-direction: column; gap: var(--spacing-sm); } /* Wrapper première fiche : flex column pour H2 au-dessus */ .section-model-equipe .equipe-person-wrapper { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Empilement vertical avec gap entre les fiches */ .section-model-equipe .equipe-persons-grid { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Fiche : empilement vertical, reset zigzag */ .section-model-equipe .equipe-person { width: 100%; min-width: 0; transform: none !important; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); align-items: stretch; border-left: calc(var(--border-thick) * 2) solid var(--color-text); border-right: calc(var(--border-thick) * 2) solid var(--color-text); border-radius: calc(var(--border-thick) * 2); } /* Couleurs aléatoires des bordures gauche et droite (assignées par JS au chargement) */ .section-model-equipe .equipe-person.equipe-color-green { border-left-color: var(--color-green); border-right-color: var(--color-green); } .section-model-equipe .equipe-person.equipe-color-blue { border-left-color: var(--color-blue); border-right-color: var(--color-blue); } .section-model-equipe .equipe-person.equipe-color-pink { border-left-color: var(--color-pink); border-right-color: var(--color-pink); } .section-model-equipe .equipe-person.equipe-color-gold { border-left-color: var(--color-gold); border-right-color: var(--color-gold); } /* Photo : alignée à gauche, 60% de largeur, max min(350px, 60vw), format 3/4 */ .section-model-equipe .equipe-person-photo { width: 60%; max-width: min(350px, 60vw); flex-shrink: 0; align-self: flex-start; aspect-ratio: 3 / 4; overflow: hidden; display: block; object-fit: cover; object-position: top; } .section-model-equipe .equipe-person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } /* Textes sous la photo */ .section-model-equipe .equipe-person-identity { display: flex; flex-direction: column; gap: var(--spacing-2xs); } /* Zigzag : fiches impaires → bordure gauche uniquement */ .section-model-equipe .equipe-person:nth-child(odd) { border-right: none; } /* Zigzag : fiches paires → contenu aligné à droite, bordure droite uniquement border-left-width: 0 au lieu du shorthand border-left: none pour préserver border-left-color (classes JS) */ .section-model-equipe .equipe-person:nth-child(even) { border-left-width: 0; } .section-model-equipe .equipe-person:nth-child(even) .equipe-person-photo { align-self: flex-end; } .section-model-equipe .equipe-person:nth-child(even) .equipe-person-identity { text-align: right; } /* Première fiche (dans wrapper) : forcer alignement gauche malgré nth-child(even) On restaure border-left sans toucher border-left-color (géré par les classes JS) */ .section-model-equipe .equipe-person-wrapper > .equipe-person { border-right: none; border-left-width: calc(var(--border-thick) * 2); border-left-style: solid; } .section-model-equipe .equipe-person-wrapper > .equipe-person .equipe-person-photo { align-self: flex-start; } .section-model-equipe .equipe-person-wrapper > .equipe-person .equipe-person-identity { text-align: left; } /* Rôle en italique, rapproché du nom */ .section-model-equipe .equipe-person-role { font-style: italic; margin-top: calc(var(--spacing-2xs) * -1); } /* Accroche en gras */ .section-model-equipe .equipe-person-catchphrase { font-weight: bold; } /* Description en small-text */ .section-model-equipe .equipe-person-description, .section-model-equipe .equipe-person-description p { font-family: var(--font-small-text-family); font-size: calc((var(--font-small-text-size) + var(--font-text-size)) / 2); font-weight: var(--font-small-text-weight); line-height: var(--font-small-text-line-height); } } /* ============================================================================ SECTION FAQ + FAQ COURTE — Mobile (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* FAQ + FAQ Courte — règles communes */ .section-model-faq, .section-model-faq-courte { display: flex; flex-direction: column; gap: var(--spacing-lg); } .section-model-faq .faq-categories { display: flex; flex-direction: column; gap: var(--spacing-lg); } .section-model-faq .faq-category { display: flex; flex-direction: column; gap: var(--spacing-sm); } .section-model-faq .faq-column { width: 100%; display: flex; flex-direction: column; gap: var(--spacing-md); } .section-model-faq .faq-items { display: flex; flex-direction: column; gap: 0; } .section-model-faq .faq-category-title { margin-bottom: 0; } .section-model-faq-courte .faq-courte-items { display: flex; flex-direction: column; gap: 0; } /* FAQ + FAQ Courte — règles communes */ .section-model-faq .faq-item, .section-model-faq-courte .faq-item { border-bottom: var(--border-thin) solid var(--color-text); } .section-model-faq .faq-items .faq-item:first-child { border-top: var(--border-thin) solid var(--color-text); } .section-model-faq-courte .faq-courte-items .faq-item:first-child { border-top: var(--border-thin) solid var(--color-text); } .section-model-faq .faq-question { cursor: pointer; padding: var(--spacing-2xs) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-xs); user-select: none; } .section-model-faq-courte .faq-question { cursor: pointer; padding: var(--spacing-sm) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-xs); user-select: none; } /* FAQ + FAQ Courte — règles communes */ .section-model-faq .faq-question::-webkit-details-marker, .section-model-faq-courte .faq-question::-webkit-details-marker { display: none; } /* FAQ + FAQ Courte — règles communes */ .section-model-faq .faq-question::after, .section-model-faq-courte .faq-question::after { content: '+'; flex-shrink: 0; font-size: var(--text-size-xl); line-height: 1; } /* FAQ + FAQ Courte — règles communes */ .section-model-faq .faq-answer p, .section-model-faq-courte .faq-answer p { margin: 0 0 var(--spacing-3xs); } /* FAQ + FAQ Courte — règles communes */ .section-model-faq .faq-answer p:last-child, .section-model-faq-courte .faq-answer p:last-child { margin-bottom: var(--spacing-2xs); } } /* ============================================================================ SECTION CONTACT - MAP — Mobile (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* Stack vertical : map au-dessus, adresse en dessous — dégradé droit désactivé */ .section-model-contact-map { display: flex; flex-direction: column; } .section-model-contact-map::after { background: none; } /* Canvas : hauteur fixe (la section devient height: auto via la règle universelle) */ .contact-map-canvas { position: relative; width: 100%; height: 120vw; min-height: 250px; } /* Dégradé bas : transparent en haut → background en bas */ .contact-map-canvas::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 40%, var(--color-background) 90% ); pointer-events: none; } /* Adresse : sortie du flux absolu, pleine largeur, padding section */ .contact-map-address { position: relative; left: auto; top: auto; transform: none; max-width: 100%; padding: var(--spacing-md); border-top: none; } /* Contenu texte : sortie du flux absolu, pleine largeur, remonte sur la carte */ .contact-map-content { position: relative; right: auto; top: auto; transform: none; max-width: 100%; padding: var(--spacing-md); margin-top: -12.5vw; } }