/* ========================================================================== La Casia — lacasia.fr Intégration du onepage d'après la maquette pen.dev ========================================================================== */ :root { --noir: #0d0d0d; --gris-texte: rgba(13, 13, 13, .64); --gris-lead: rgba(0, 0, 0, .54); --gris-sous: #7a7a7a; --beige: #f2f0ed; --beige-bloc: #f2f1ed; --gris-showcase: #f4f4f5; --blanc: #fff; --jaune: rgba(252, 193, 43, .5); --bleu: rgba(50, 94, 227, .75); --violet: rgba(208, 164, 224, .5); --contenu: 1296px; --gouttiere: 24px; --radius-carte: 8px; --radius-bloc: 20px; --section-y: 120px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* Le blanc est porté par pour que le voile animé posé sur puisse se glisser entre ce fond et le contenu. */ html { background: var(--blanc); } body { margin: 0; color: var(--noir); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Voile de couleur : trois halos très dilués, repris des accents des citations, qui dérivent lentement derrière la page. Pas de filter: blur, trop coûteux en plein écran — les dégradés radiaux sont déjà diffus. L'animation est neutralisée par le bloc prefers-reduced-motion. */ body::before { content: ""; position: fixed; inset: -30%; z-index: -1; background: radial-gradient(38% 42% at 24% 26%, rgba(252, 193, 43, .38), transparent 66%), radial-gradient(34% 38% at 76% 34%, rgba(50, 94, 227, .28), transparent 66%), radial-gradient(42% 40% at 52% 78%, rgba(208, 164, 224, .34), transparent 66%); animation: derive 34s ease-in-out infinite; will-change: transform; pointer-events: none; } @keyframes derive { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.22); } 100% { transform: rotate(360deg) scale(1); } } img, video, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, p, figure, ul { margin: 0; } ul { padding: 0; list-style: none; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--noir); color: var(--blanc); text-decoration: none; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; } /* --------------------------------------------------------------- Structure */ .wrap { width: 100%; max-width: var(--contenu); margin-inline: auto; padding-inline: var(--gouttiere); } .wrap--narrow { max-width: 1044px; } .section { padding-block: var(--section-y); } .section__head { text-align: center; } /* ------------------------------------------------------------------ Header */ /* Barre transparente : seul le bouton de rendez-vous reste visible et suit la page. `pointer-events` évite que la bande invisible intercepte les clics destinés au contenu situé dessous. */ .site-header { position: sticky; top: 0; z-index: 20; pointer-events: none; } .site-header__inner { display: flex; align-items: center; justify-content: flex-end; max-width: 1560px; margin-inline: auto; padding: 20px var(--gouttiere); } .site-header .btn { pointer-events: auto; } /* ----------------------------------------------------------------- Boutons */ .btn { display: inline-block; padding: 13px 20px; border-radius: 9999px; font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: -.32px; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease; } .btn--dark { position: relative; isolation: isolate; background: #000; color: var(--blanc); } /* Un dégradé ne s'interpole pas en CSS : on le pose en couche séparée et on anime son opacité, puis on le fait glisser. Les teintes reprennent les accents des citations, assombries pour que le blanc reste lisible dessus — le jaune d'origine ne passait pas. */ .btn--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(100deg, #2b51c9, #8b4fd8 46%, #e08a15); background-size: 220% 100%; background-position: 0 0; opacity: 0; transition: opacity .3s ease, background-position .7s ease; } .btn--dark:hover::before { opacity: 1; background-position: 100% 0; } .btn--dark:hover { box-shadow: 0 8px 22px rgba(43, 81, 201, .26); } .btn--lg { padding: 13px 29px; } /* -------------------------------------------------------------------- Hero */ /* Le bas du hero portait 0 : la citation suivante n'était séparée de la vidéo que par les 120 px de la section, contre 240 px entre deux sections. */ .hero { padding-block: 16px 104px; } .hero__title { font-size: 32px; line-height: 36px; font-weight: 300; letter-spacing: -.64px; text-align: center; } .hero__lead { margin-top: 26px; color: var(--gris-sous); font-size: 16px; line-height: 24px; letter-spacing: -.3px; text-align: center; } .hero__lead--strong { margin-top: 25px; } .showcase { position: relative; margin-top: 72px; border-radius: var(--radius-bloc); background: var(--gris-showcase); overflow: hidden; aspect-ratio: 1920 / 992; } /* La vidéo du hero est en 16/9 : on cale le cadre dessus plutôt que de la rogner */ .showcase--video { aspect-ratio: 16 / 9; } /* Le média est calé en absolu sur le cadre plutôt que posé dans le flux : en flux, la hauteur du conteneur venant d'un aspect-ratio tombe souvent sur une valeur fractionnaire et il restait, selon la largeur de fenêtre, un filet du fond noir du lecteur sous la vidéo. */ .showcase__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--gris-showcase); /* Le rognage du conteneur ne s'applique pas exactement à une couche vidéo composée par le GPU : il affleurait, selon la largeur, un filet du fond noir du lecteur. On la fait déborder d'un pixel, que overflow coupe. */ bottom: -1px; border-radius: inherit; } /* ------------------------------------------------------------- Citations */ .quote { position: relative; display: inline-block; margin-bottom: 16px; padding-inline: 34px; font-size: 22px; line-height: 25px; letter-spacing: -.5px; } .quote__text { position: relative; z-index: 1; } .quote__stroke { position: absolute; left: 50%; top: -24px; z-index: 0; width: 108%; height: 60px; overflow: visible; transform: translateX(-50%) rotate(1deg); pointer-events: none; } .quote__stroke--blue path { stroke: var(--bleu); } .quote__stroke--yellow path { stroke: var(--jaune); } .quote__stroke--purple path { stroke: var(--violet); } /* -------------------------------------------------------------- Titres */ .section__title { font-size: 32px; line-height: 36px; font-weight: 300; letter-spacing: -.64px; text-wrap: balance; } .section__title--lg { font-size: 38px; line-height: 43px; } .section__lead { margin-top: 22px; color: var(--gris-lead); font-size: 17px; line-height: 25px; letter-spacing: -.2px; text-wrap: pretty; } .section__head + .wrap { margin-top: 56px; } /* -------------------------------------------------------------- Grille */ .grid { display: grid; gap: 8px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* -------------------------------------------------------------- Cartes */ .card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 20px; min-height: 440px; padding: 32px; border-radius: var(--radius-carte); text-align: center; overflow: hidden; } /* Verre dépoli, commun aux cartes et au bloc manifeste : le voile de couleur du fond transparaît au travers. Le blanc reste assez opaque pour que le texte gris tienne le contraste. -webkit- reste nécessaire pour Safari. */ .card, .manifesto { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 1px 3px rgba(13, 13, 13, .04); } /* Repli là où backdrop-filter n'existe pas : un blanc franc plutôt qu'un voile translucide illisible. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card, .manifesto { background: rgba(255, 255, 255, .88); } } .card--compact { min-height: 236px; } .card__title { width: 100%; font-size: 18px; line-height: 27px; font-weight: 400; letter-spacing: -.16px; text-wrap: balance; } .card__title--eyebrow { font-size: 16px; line-height: 24px; letter-spacing: .06em; text-transform: uppercase; } /* La largeur est bridée autant que la hauteur : à 150 px de haut, une icône large comme l'œil du tableau de bord s'étalait sur 277 px, contre 150 pour les icônes carrées — d'où une présence très inégale d'une carte à l'autre. */ .card__img { flex: 0 0 auto; width: auto; height: auto; max-height: 150px; max-width: 168px; object-fit: contain; } .card__img--deco { max-height: 132px; } .card__text { color: var(--gris-texte); font-size: 14px; line-height: 21px; letter-spacing: -.1px; text-wrap: pretty; } /* ----------------------------------------------------------- Manifeste */ .manifesto { padding: 92px 100px; border-radius: var(--radius-carte); } .manifesto__title { max-width: 982px; font-size: 38px; line-height: 43px; font-weight: 300; letter-spacing: -.64px; text-wrap: pretty; } .manifesto__text { max-width: 1036px; margin-top: calc(3 * 43px); color: var(--gris-lead); font-size: 20px; line-height: 24px; letter-spacing: -.2px; text-wrap: pretty; } /* ------------------------------------------------------------- Démarrer */ .start { position: relative; overflow: hidden; } /* Le texte de cette section est court : on le resserre pour dégager des marges où poser les photos sans jamais empiéter dessus. */ .start__inner { position: relative; z-index: 1; max-width: 700px; text-align: center; } /* Photos d'atelier. La rotation vit dans une variable et le défilement ne pilote que --py : sans ça, le script écraserait l'inclinaison en réécrivant transform. */ .start__photos { position: absolute; inset: 0; pointer-events: none; } .start__photo { position: absolute; height: auto; border-radius: 6px; box-shadow: 0 6px 20px rgba(13, 13, 13, .13); transform: rotate(var(--rot, 0deg)) translate3d(0, var(--py, 0px), 0); will-change: transform; } .start__photo--1 { left: 1.5%; top: 4%; width: 185px; --rot: -5deg; } .start__photo--2 { left: 5%; top: 46%; width: 150px; --rot: 3deg; } .start__photo--3 { right: 1.5%; top: 10%; width: 195px; --rot: 4deg; } .start__photo--4 { right: 6%; top: 54%; width: 160px; --rot: -3deg; } .start__photo--5 { left: 9%; top: 80%; width: 140px; --rot: 6deg; } /* En dessous de cette largeur, les marges ne suffisent plus : les photos viendraient buter sur le texte. */ @media (max-width: 1150px) { .start__photos { display: none; } .start__inner { max-width: 1044px; } } .start__deco { position: absolute; right: -40px; top: -96px; z-index: -1; width: 323px; height: auto; transform: rotate(58deg); opacity: .9; pointer-events: none; } .start__title { font-size: 60px; line-height: 68px; font-weight: 700; letter-spacing: -1px; } .start__cta { margin-top: 44px; } .start__note { margin-top: 16px; color: var(--gris-lead); font-size: 12px; } /* Mention de référence : discrète, et nettement détachée de la note OPCO pour qu'on ne la lise pas comme sa suite. */ .reference { margin-top: 76px; } .reference__texte { color: var(--gris-lead); font-size: 13px; line-height: 20px; text-wrap: pretty; } .reference__logos { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 18px; } /* Logos partenaires : simplement atténués. Pas de passage en gris — l'un des deux est un aplat bleu plein, qui virerait au gris sale. */ .reference__logos img { height: 34px; width: auto; opacity: .78; transition: opacity .2s ease; } .reference__logos img:hover { opacity: 1; } /* --------------------------------------------------------------- Footer */ .site-footer { padding-block: 64px 56px; } .site-footer__inner { text-align: center; } /* Le nom de marque garde sa graisse d'origine : en 300 il se diluait. */ .site-footer__brand { font-size: 32px; line-height: 36px; font-weight: 400; letter-spacing: -.64px; } .site-footer__contact { margin-top: 26px; color: var(--gris-lead); font-size: 20px; line-height: 24px; letter-spacing: -.2px; } .site-footer__contact a { text-decoration: none; } .site-footer__contact a:hover { text-decoration: underline; } .site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; font-size: 16px; } .site-footer__legal a { text-decoration: none; } .site-footer__legal a:hover { text-decoration: underline; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1100px) { :root { --section-y: 96px; } .grid--3 { grid-template-columns: repeat(2, 1fr); } .card { min-height: 0; } .manifesto { padding: 64px 56px; } .start__deco { right: -80px; width: 240px; } } @media (max-width: 760px) { :root { --section-y: 72px; --gouttiere: 20px; } .site-header__inner { padding-block: 16px; } .btn { padding: 11px 16px; font-size: 15px; } .hero { padding-top: 8px; padding-bottom: 56px; } .hero__title { font-size: 28px; line-height: 33px; } .hero__lead { font-size: 15px; line-height: 22px; } .showcase { margin-top: 48px; border-radius: 12px; } .quote { padding-inline: 20px; font-size: 19px; line-height: 23px; } .quote__stroke { top: -20px; height: 48px; } .section__title, .section__title--lg { font-size: 27px; line-height: 32px; } .section__lead { font-size: 15px; line-height: 23px; } .section__head + .wrap { margin-top: 40px; } .grid--3 { grid-template-columns: 1fr; } .card { padding: 28px 24px; } .manifesto { padding: 44px 28px; } .manifesto__title { font-size: 26px; line-height: 32px; } .manifesto__text { margin-top: calc(3 * 32px); font-size: 17px; line-height: 23px; } .start__title { font-size: 40px; line-height: 46px; } .start__deco { right: -70px; top: -60px; width: 180px; } .site-footer__brand { font-size: 26px; } .site-footer__contact { font-size: 17px; line-height: 23px; } .site-footer__legal { flex-direction: column; gap: 10px; font-size: 15px; } } /* --------------------------------------------------- Confort & impression */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== Pages de texte (mentions légales) ========================================================================== */ .page-texte { padding-block: 80px 96px; } .page-texte h1 { font-size: 38px; line-height: 43px; font-weight: 300; letter-spacing: -.64px; } .page-texte h2 { margin-top: 48px; font-size: 20px; line-height: 27px; font-weight: 400; letter-spacing: -.16px; } .page-texte p { margin-top: 16px; max-width: 68ch; color: var(--gris-texte); font-size: 16px; line-height: 26px; text-wrap: pretty; } .page-texte a { color: var(--noir); } .page-texte .a-completer { padding: 16px 20px; border-left: 3px solid var(--jaune); border-radius: 0 var(--radius-carte) var(--radius-carte) 0; background: var(--beige); color: var(--noir); font-size: 15px; } .page-texte .retour { margin-top: 56px; font-size: 16px; } @media (max-width: 760px) { .page-texte { padding-block: 48px 64px; } .page-texte h1 { font-size: 28px; line-height: 34px; } .page-texte h2 { margin-top: 36px; font-size: 18px; } } /* ========================================================================== Apparitions ========================================================================== */ /* L'état masqué n'est posé que si JavaScript est actif : sans lui, la page reste entièrement lisible. */ .js [data-anim] { opacity: 0; transform: translateY(16px); } .js [data-anim].est-vu { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); } /* Citations : les lettres se posent une à une, le trait vient barrer ensuite. Le bloc garde sa place dès le départ — seules les lettres sont masquées — pour que rien ne saute pendant la frappe. */ .quote__lettres { white-space: pre-wrap; } .js .quote__lettre { opacity: 0; } .js .quote__lettre.est-ecrite { opacity: 1; transition: opacity .09s linear; } .js [data-citation] .quote__stroke { opacity: 0; } .js [data-citation].est-ecrit .quote__stroke { opacity: 1; }