/* ============================================================ POLICE PERSONNALISÉE @font-face = on "installe" une police depuis un fichier local ============================================================ */ @font-face { font-family: 'Maginia'; src: url('assets/fonts/Maginia.otf') format('opentype'); font-display: swap; /* affiche un texte de secours pendant le chargement */ } /* box-sizing: border-box = le padding est compté DANS la largeur (ça évite plein de surprises de calcul) */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; overflow-x: hidden; } /* Le fond blanc est sur (et pas ) : sinon il se dessinerait PAR-DESSUS la plante du body::before */ html { background-color: #ffffff; overscroll-behavior: none; /* pas d'effet "rebond" en haut/bas de page */ } /* La plante en fond de page (desktop), en bas à gauche, estompée. body::before = un "calque" décoratif qu'on dessine derrière tout, sans avoir besoin d'ajouter une balise dans le HTML. */ body::before { content: ""; position: fixed; /* collé à l'écran, ne bouge pas au scroll */ inset: 0; /* raccourci pour top/right/bottom/left : 0 */ z-index: -1; /* derrière tout le contenu */ background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url('assets/images/plante.jpg'); background-repeat: no-repeat; background-position: left bottom; background-size: 45% auto; /* mask-image = pochoir : visible là où le dégradé est noir, invisible là où il devient transparent. Ça fond les bords dans le blanc. */ -webkit-mask-image: radial-gradient(ellipse 95% 95% at left bottom, black 20%, transparent 55%); mask-image: radial-gradient(ellipse 95% 95% at left bottom, black 20%, transparent 55%); } /* ============================================================ ANIMATIONS D'ENTRÉE @keyframes = on décrit les étapes ; animation = on les joue "both" garde l'état de départ (invisible) ET d'arrivée (visible) ============================================================ */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* "backwards" = l'élément est invisible PENDANT son délai d'attente, puis l'animation rend la main aux styles normaux une fois finie (avec "both", l'état final écraserait le transform du :hover !) */ .titre { animation: fade-up 0.7s ease-out backwards; } .presentation { /* le délai crée un effet "en cascade" : le texte suit le titre */ animation: fade-up 0.7s ease-out 0.15s backwards; } .sheet .bouton { animation: fade-up 0.55s ease-out backwards; } /* Chaque bouton arrive un peu après le précédent. nth-child(2) = le 2e enfant de .sheet (le 1er est la poignée) */ .sheet .bouton:nth-child(2) { animation-delay: 0.30s; } .sheet .bouton:nth-child(3) { animation-delay: 0.40s; } .sheet .bouton:nth-child(4) { animation-delay: 0.50s; } .sheet .bouton:nth-child(5) { animation-delay: 0.60s; } /* Accessibilité : certaines personnes désactivent les animations dans leur système. On respecte ce choix. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================ STRUCTURE GÉNÉRALE : 2 colonnes côte à côte (flexbox) ============================================================ */ .main { display: flex; width: 100%; min-height: 100vh; text-align: center; justify-content: center; } .left { display: flex; width: 50%; flex-direction: column; /* les éléments s'empilent verticalement */ align-items: center; justify-content: center; padding: 40px 20px; } /* ============================================================ TITRE ============================================================ */ .titre { width: 100%; display: flex; text-align: center; justify-content: center; font-family: 'Maginia', serif; } .wear-your { margin: 0 0 10px 0; font-weight: 300; line-height: 1.25; letter-spacing: 0.05em; color: #342619; /* clamp(mini, idéal, maxi) = taille fluide qui suit l'écran */ font-size: clamp(2rem, 3.5vw, 3.2rem); } .couleur { color: #a64e1f; /* le mot CONFIDENCE est plus gros que WEAR YOUR sur la maquette */ font-size: 1.35em; } /* ============================================================ TEXTE DE PRÉSENTATION ============================================================ */ .presentation { display: flex; width: 70%; max-width: 480px; text-align: center; justify-content: center; } .presentation p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #342619; } /* ============================================================ LES BOUTONS (pilule crème + rond doré avec flèche) ============================================================ */ .sheet { display: flex; flex-direction: column; align-items: center; gap: 18px; /* espace régulier entre les boutons */ margin-top: 35px; } /* La petite poignée noire : uniquement pour le mobile */ .handle { display: none; } .bouton { display: flex; align-items: center; justify-content: space-between; width: 230px; padding: 7px 7px 7px 24px; background-color: #f6ebd6; border-radius: 999px; /* très grand rayon = forme de pilule */ text-decoration: none; color: #342619; font-size: 0.82rem; white-space: nowrap; /* le texte reste sur une seule ligne */ box-shadow: 0 6px 18px rgba(52, 38, 25, 0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; } .bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(52, 38, 25, 0.16); } /* :active = pendant le clic. Le bouton "s'enfonce" légèrement. */ .bouton:active { transform: scale(0.97); } /* Le rond doré qui contient la flèche */ .fleche { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background-color: #ab8439; border-radius: 50%; /* 50% sur un carré = un cercle parfait */ flex-shrink: 0; /* le rond ne doit jamais s'écraser */ margin-left: 14px; } .fleche svg { width: 18px; height: 18px; stroke: #ffffff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; } /* Au survol du bouton, la flèche "décolle" vers le haut-droite */ .bouton:hover .fleche svg { transform: translate(3px, -3px); } /* Le 4e bouton n'existe qu'en mobile (comme sur la maquette) */ .bouton-mobile { display: none; } /* ============================================================ COLONNE DROITE : l'arche terracotta + la photo ============================================================ */ .right { position: relative; /* sert de repère aux éléments "absolute" dedans */ width: 50%; } .background { position: absolute; bottom: 0; /* l'arche est collée en bas de l'écran */ left: 50%; transform: translateX(-50%); /* centrée horizontalement */ width: 78%; height: 88%; background-color: #cd8868; /* gros rayons en haut + rien en bas = forme d'arche */ border-radius: 500px 500px 0 0; } .background img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 112%; /* légèrement plus large : elle déborde de l'arche */ max-height: 92vh; object-fit: contain; object-position: bottom center; } /* ============================================================ VERSION MOBILE (écran de 820px de large ou moins) Une media query = "à partir de cette taille, remplace ces règles" ============================================================ */ @media (max-width: 820px) { /* En mobile, la plante n'est plus un fond de page : elle vit DANS la modale (voir .sheet plus bas) */ body::before { content: none; } /* Plus de colonnes : tout s'empile */ .main { display: block; position: relative; } /* -------- La photo de Carine = fond d'écran de la page -------- */ .right { position: absolute; /* prend tout l'écran, derrière le texte */ inset: 0; width: 100%; z-index: 0; } .background { position: absolute; inset: 0; left: 0; transform: none; width: 100%; height: 100%; background-color: transparent; /* plus d'arche terracotta */ border-radius: 0; overflow: hidden; } .background img { bottom: auto; top: 35vh; /* le haut de sa tête apparaît vers 1/3 de l'écran */ width: 160%; max-height: none; /* le bas de la photo s'efface en douceur */ -webkit-mask-image: linear-gradient(180deg, black 42%, transparent 62%); mask-image: linear-gradient(180deg, black 42%, transparent 62%); } /* Le voile blanc : dégradé opaque en haut -> transparent en bas. C'est lui qui crée l'effet "brume" au-dessus de la photo. */ .background::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, #f5f3f0 0%, rgba(248, 247, 245, 0.92) 20%, rgba(254, 254, 254, 0.15) 47% ); } /* -------- Le contenu passe AU-DESSUS de la photo -------- */ .left { position: relative; z-index: 1; width: 100%; min-height: 100vh; padding: 7vh 0 0 0; justify-content: flex-start; } .presentation { width: 80%; } /* ============================================================ LA MODALE (bottom sheet) position: fixed = collée à l'écran. Le JavaScript la déplace avec transform: translateY() quand on la fait glisser. ============================================================ */ .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; width: 100%; max-height: 82vh; padding: 20px 24px 44px 24px; gap: 20px; border-radius: 44px 44px 0 0; /* Fond de la modale : 2 calques. Calque 1 (dessus) : dégradé blanc opaque -> semi-transparent Calque 2 (dessous) : la plante, calée en bas => la plante apparaît "incrustée" dans le bas de la carte */ background-color: #ffffff; background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 38%, rgba(255, 255, 255, 0.85) 62%, rgba(255, 255, 255, 0.30) 100% ), url('assets/images/plante.jpg'); background-repeat: no-repeat, no-repeat; background-position: 0 0, center bottom; background-size: 100% 100%, cover; box-shadow: 0 -14px 34px rgba(52, 38, 25, 0.12); /* Le retour "aimanté" après un glisser (le JS coupe cette transition PENDANT le geste pour suivre le doigt) */ transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1); touch-action: none; /* le navigateur nous laisse gérer le geste */ cursor: grab; will-change: transform; } /* Pendant le glisser : pas de transition, la carte suit le doigt */ .sheet.dragging { transition: none; cursor: grabbing; } /* La poignée noire, comme un tiroir d'application */ .handle { display: block; width: 58px; height: 6px; background-color: #342619; border-radius: 999px; margin-bottom: 28px; flex-shrink: 0; } /* Boutons plus grands en mobile */ .bouton { width: min(300px, 88%); padding: 8px 8px 8px 26px; font-size: 0.95rem; } .fleche { width: 48px; height: 48px; } .fleche svg { width: 20px; height: 20px; } /* Le 4e bouton réapparaît */ .bouton-mobile { display: flex; } }