/* ========================================================================= EMMA DELPORTE ยท Private Animal Osteopath Feuille de style unique. Palette et typographies conformes a la charte graphique de marque (06/08/26). ========================================================================= */ /* ---------------------------------------------------------------- POLICES */ @font-face { font-family: 'Span'; src: url('../fonts/span-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Span'; src: url('../fonts/span-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../fonts/outfit-var.woff2') format('woff2-variations'); font-weight: 200 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Allura'; src: url('../fonts/allura.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------- TOKENS */ :root { /* Palette charte */ --ebene: #1f1d1d; --lin: #efe6e1; --brun: #834f2e; /* Declinaisons */ --ebene-profond: #141212; --ebene-clair: #2b2726; --brun-clair: #a9683d; --brun-lisible: #bb7343; /* meme teinte, portee au seuil AA sur ebene */ --brun-sombre: #5e3821; --lin-sourd: #d8ccc5; --lin-profond: #e7dcd6; /* pied de page et voiles du mode clair */ /* Les encres, les fonds et les bruns lisibles sont poses par theme, juste apres ce bloc. */ /* Typographies */ --titre: 'Span', 'Lora', 'Times New Roman', serif; --corps: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --accent: 'Allura', 'Snell Roundhand', cursive; /* Echelle typographique fluide */ --t-hero: clamp(2.6rem, min(7vw, 10.6vh), 6.6rem); --t-1: clamp(2.1rem, 5vw, 4.25rem); --t-2: clamp(1.5rem, 2.9vw, 2.4rem); --t-3: clamp(1.12rem, 1.5vw, 1.4rem); --t-corps: clamp(1rem, .42vw + .92rem, 1.1rem); /* Sur-titre de section. Retour #74 : la cliente jugeait ces libelles trop petits, le corps passe de .8rem a 1.05rem en grand ecran. La borne basse tient compte du plus long d'entre eux. */ --t-signe: clamp(.9rem, .32vw + .81rem, 1.05rem); --t-petit: .8125rem; --t-micro: .6875rem; /* Rythme */ --section-y: clamp(5.5rem, 11vw, 11rem); --gouttiere: clamp(1.5rem, 5vw, 6.5rem); --largeur: 1560px; /* Mouvement */ --ease: cubic-bezier(.22, 1, .36, 1); --duree: .8s; } /* ========================================================================= THEMES Le site est sombre par nature : le mode sombre reprend exactement la charte, le mode clair bascule toute la page sur lin. L'attribut data-theme est pose sur par un mini script place dans le avant cette feuille, pour eviter le flash. Sans script, la page reste sombre. Les deux familles d'encres (--sur-ebene* et --sur-lin*) gardent leur nom : dans un theme donne elles valent la meme chose, puisque toutes les sections partagent desormais le meme fond. Seule la discretion garde son fond brun et ses encres lin, dans les deux modes : c'est un sceau. ========================================================================= */ /* ----------------------------------------------------------- MODE SOMBRE */ :root, :root[data-theme='dark'] { color-scheme: dark; /* Fonds */ --fond-page: var(--ebene); --fond-page-rvb: 31, 29, 29; --fond-profond: var(--ebene-profond); --voile-nav: rgba(20, 18, 18, .88); /* Encres */ --sur-ebene: #efe6e1; --sur-ebene-70: rgba(239, 230, 225, .70); --sur-ebene-45: rgba(239, 230, 225, .56); --filet-ebene: rgba(239, 230, 225, .16); --sur-lin: var(--sur-ebene); --sur-lin-70: var(--sur-ebene-70); --sur-lin-45: var(--sur-ebene-45); --filet-lin: var(--filet-ebene); --encre-forte: var(--lin); /* Bruns portes au seuil de lisibilite du fond courant */ --brun-encre: var(--brun-lisible); --brun-titre: var(--brun-lisible); /* Details */ --survol-fond: var(--lin); --survol-encre: var(--brun-sombre); --planche: var(--lin-sourd); --planche-vive: var(--lin); --champ-vide: rgba(239, 230, 225, .26); --erreur-filet: #c26a4f; --erreur-encre: #e2b3a2; --filtre-logo: none; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23efe6e1' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ MODE CLAIR */ :root[data-theme='light'] { color-scheme: light; --fond-page: var(--lin); --fond-page-rvb: 239, 230, 225; --fond-profond: var(--lin-profond); --voile-nav: rgba(243, 236, 232, .9); --sur-lin: #1f1d1d; --sur-lin-70: rgba(31, 29, 29, .72); --sur-lin-45: rgba(31, 29, 29, .66); --filet-lin: rgba(31, 29, 29, .16); --sur-ebene: var(--sur-lin); --sur-ebene-70: var(--sur-lin-70); --sur-ebene-45: var(--sur-lin-45); --filet-ebene: var(--filet-lin); --encre-forte: var(--ebene); --brun-encre: var(--brun); --brun-titre: var(--brun-sombre); --survol-fond: var(--ebene); --survol-encre: var(--lin); --planche: var(--ebene-clair); --planche-vive: var(--ebene); --champ-vide: rgba(31, 29, 29, .34); --erreur-filet: #a8452a; --erreur-encre: #8c3b22; /* Le logotype et le monogramme sont dessines en lin : sur fond clair on les eteint jusqu'a l'ebene. Le voile a 88 % pose exactement #1d1c1b. */ --filtre-logo: brightness(0) opacity(.88); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231f1d1d' stroke-width='1.2' opacity='.55'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } body { margin: 0; background: var(--fond-page); color: var(--sur-ebene); font-family: var(--corps); font-size: var(--t-corps); font-weight: 300; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 1px solid var(--brun-encre); outline-offset: 4px; } ::selection { background: var(--brun); color: var(--lin); } /* ------------------------------------------------------------ UTILITAIRES */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); } .section { padding-block: var(--section-y); position: relative; } .sur-lin { background: var(--fond-page); color: var(--sur-lin); } .sur-ebene { background: var(--fond-page); color: var(--sur-ebene); } /* Titres */ .titre-1 { font-family: var(--titre); font-weight: 300; font-size: var(--t-1); line-height: 1.02; letter-spacing: -.018em; text-wrap: balance; } .titre-2 { font-family: var(--titre); font-weight: 300; font-size: var(--t-2); line-height: 1.14; letter-spacing: -.012em; } .chapo { font-family: var(--titre); font-weight: 300; font-size: var(--t-3); line-height: 1.5; letter-spacing: -.005em; color: var(--sur-ebene-70); } .sur-lin .chapo { color: var(--sur-lin-70); } .texte { max-width: 52ch; color: var(--sur-ebene-70); } .sur-lin .texte { color: var(--sur-lin-70); } .texte + .texte { margin-top: 1.35em; } /* Lien souligne qui se trace */ .lien { position: relative; display: inline-block; padding-bottom: .18em; color: inherit; } .lien::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; opacity: .35; transform: scaleX(1); transform-origin: right; transition: transform .5s var(--ease), opacity .5s var(--ease); } .lien:hover::after { opacity: .9; transform: scaleX(1); } /* Bouton principal */ .bouton { --fond: var(--brun); --encre: var(--lin); position: relative; display: inline-flex; align-items: center; gap: .9rem; padding: 1.06rem 2.15rem; border: 1px solid var(--fond); background: var(--fond); color: var(--encre); font-size: var(--t-micro); font-weight: 400; letter-spacing: .24em; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: color .55s var(--ease), border-color .55s var(--ease); } .bouton span { position: relative; z-index: 1; } .bouton::before { content: ''; position: absolute; inset: 0; background: var(--survol-fond); transform: translateY(101%); transition: transform .55s var(--ease); } .bouton:hover { color: var(--survol-encre); border-color: var(--survol-fond); } .bouton:hover::before { transform: translateY(0); } .bouton--fantome { --fond: transparent; --encre: var(--sur-ebene); border-color: var(--filet-ebene); } .bouton--fantome:hover { color: var(--fond-page); } /* Rappel d'appel flottant, mobile uniquement. Il reprend le bouton principal, donc la meme paire brun / lin dans les deux themes. Cache par defaut : c'est le script qui pose la classe .flottant--visible une fois le hero depasse, et la retire des que la section contact entre dans le champ. Sans script, il ne s'affiche pas, le pied et le hero portant deja le meme lien. */ .flottant { display: none; } /* Fleche discrete */ .fleche { width: 1.1em; height: 1.1em; flex: none; } /* Grain argentique tres leger, cale sur tout le document */ .grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Filigrane monogramme */ .filigrane { position: absolute; pointer-events: none; opacity: .032; z-index: 0; } .filigrane img { width: 100%; height: auto; filter: var(--filtre-logo); } /* ================================================================== NAV == */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-block: clamp(1rem, 1.7vw, 1.6rem); transition: background .55s var(--ease), padding .55s var(--ease), box-shadow .55s var(--ease); } .nav::after { content: ''; position: absolute; inset: 0; background: var(--voile-nav); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--filet-ebene); opacity: 0; transition: opacity .55s var(--ease); z-index: -1; } .nav.est-dense { padding-block: .85rem; } .nav.est-dense::after { opacity: 1; } .nav__interieur { display: flex; align-items: center; justify-content: space-between; /* Ecart plancher entre signature, menu et bloc de droite. Ramene de 2rem a 1.5rem pour le neuvieme onglet : c'est la seule marge que la rangee pouvait encore rendre sans toucher au logo. */ gap: 1.5rem; } .nav__logo img { filter: var(--filtre-logo); } .nav__logo { width: clamp(132px, 12vw, 168px); /* La signature ne sert pas de variable d'ajustement : c'est au menu de se resserrer, jamais au logo de maigrir. Sans cette ligne, la rangee saturee reduisait le monogramme a quelques pixels de large. */ flex-shrink: 0; transition: width .55s var(--ease), opacity .4s var(--ease); } .nav__logo:hover { opacity: .78; } .nav.est-dense .nav__logo { width: clamp(118px, 10vw, 142px); } .nav__menu { display: flex; align-items: center; /* Neuf entrees, dont huit visibles en desktop. La largeur utile de la rangee ne depasse jamais 1400 px environ : l'enveloppe cesse de grandir a 1560 px pendant que la gouttiere, elle, continue de s'ouvrir. La gouttiere du menu est donc plafonnee bas, sans quoi elle reprendrait sur les tres larges ecrans la place qu'elle vient d'y perdre. */ gap: clamp(.75rem, .92vw, .95rem); } .nav__lien { position: relative; white-space: nowrap; font-size: var(--t-micro); font-weight: 300; /* Resserre de .14em a .11em avec l'arrivee du neuvieme onglet : c'est le dernier cran qui laisse encore une trentaine de pixels de reserve sur les tres larges ecrans, la ou la rangee est le plus a l'etroit. Le menu deploye garde son interlettrage large, il a toute la hauteur pour lui. */ letter-spacing: .11em; text-transform: uppercase; color: var(--sur-ebene-70); transition: color .4s var(--ease); padding-block: .3rem; } .nav__lien::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--brun-encre); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .nav__lien:hover { color: var(--encre-forte); } .nav__lien:hover::after, .nav__lien.est-actif::after { transform: scaleX(1); } .nav__lien.est-actif { color: var(--encre-forte); } .nav__droite { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); } .langues { display: flex; align-items: center; gap: .55rem; font-size: var(--t-micro); letter-spacing: .16em; color: var(--sur-ebene-45); } .langues a { transition: color .4s var(--ease); } .langues a:hover { color: var(--encre-forte); } .langues [aria-current='true'] { color: var(--encre-forte); } .langues i { font-style: normal; opacity: .35; } /* Bascule clair / sombre, tenue comme la barre des langues : un signe, pas un interrupteur. Une seule des deux icones est visible a la fois. */ .theme { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0; background: none; border: 0; cursor: pointer; color: var(--sur-ebene-70); transition: color .4s var(--ease), transform .5s var(--ease); } .theme:hover { color: var(--encre-forte); transform: rotate(-12deg); } /* Le reset pose display:block sur tout svg : les regles de visibilite des deux icones doivent donc etre au moins aussi specifiques. */ .theme svg { width: 18px; height: 18px; } .theme .theme__lune { display: none; } :root[data-theme='light'] .theme .theme__soleil { display: none; } :root[data-theme='light'] .theme .theme__lune { display: block; } .nav__contact { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--encre-forte); border: 1px solid var(--filet-ebene); padding: .72rem 1.35rem; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } .nav__contact:hover, .nav__contact.est-actif { background: var(--brun); border-color: var(--brun); color: var(--lin); } /* Double du bouton Contact, replie dans le menu mobile, ou le bouton du haut n'a plus sa place. */ .nav__lien--contact { display: none; } /* Bouton burger */ .burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; } .burger span { position: absolute; left: 10px; width: 24px; height: 1px; background: var(--encre-forte); transition: transform .5s var(--ease), opacity .3s var(--ease); } .burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 25px; } .burger.est-ouvert span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .burger.est-ouvert span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ================================================================= HERO == */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr minmax(0, 42%); align-items: stretch; overflow: hidden; } .hero__texte { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(7rem, 12vh, 9.5rem) clamp(2rem, 4vw, 4.5rem) clamp(4.5rem, 9vh, 7rem) var(--gouttiere); max-width: 62rem; } .hero__sur { font-size: clamp(.76rem, .28vw + .7rem, .86rem); letter-spacing: .3em; text-transform: uppercase; color: var(--brun-encre); margin-bottom: clamp(1.6rem, 3vw, 2.5rem); } .hero__titre { font-family: var(--titre); font-weight: 300; font-size: var(--t-hero); line-height: .97; letter-spacing: -.028em; margin-bottom: clamp(1.7rem, 3vw, 2.6rem); } .hero__titre em { display: block; font-style: normal; color: var(--sur-ebene-70); padding-left: clamp(0px, 4vw, 3.6rem); } .hero__chapo { max-width: 41ch; color: var(--sur-ebene-70); margin-bottom: clamp(2.4rem, 4vw, 3.4rem); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(3rem, 7vh, 5.5rem); } .hero__marqueurs { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 3vw, 3.2rem); padding-top: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid var(--filet-ebene); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--sur-ebene-45); } .hero__media { position: relative; z-index: 1; } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } /* Fondu de la photo vers le fond de page sur son bord gauche et en bas. Les composantes du fond sont sorties en variable pour que le degrade suive le theme. */ .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fond-page) 0%, rgba(var(--fond-page-rvb), .86) 14%, rgba(var(--fond-page-rvb), .5) 38%, rgba(var(--fond-page-rvb), .12) 66%, rgba(var(--fond-page-rvb), 0) 84%), linear-gradient(0deg, var(--fond-page) 0%, rgba(var(--fond-page-rvb), .2) 22%, rgba(var(--fond-page-rvb), 0) 42%); } /* Mode clair : la photographie est tres sombre, les fondus vers le lin la salissaient d'un halo. On les coupe et on pose l'image en rectangle net, comme une photographie posee sur la page : elle descend sous la barre de navigation, garde la gouttiere a droite et ne touche plus le bas. */ :root[data-theme='light'] .hero__media::after, :root[data-theme='light'] .hero__media::before { display: none; } :root[data-theme='light'] .hero__media { margin: clamp(6.5rem, 12vh, 9rem) var(--gouttiere) clamp(3rem, 8vh, 6rem) 0; } .hero__filigrane { left: -7%; top: 50%; transform: translateY(-50%); width: clamp(320px, 46vw, 760px); opacity: .03; } .hero__scroll { position: absolute; right: var(--gouttiere); bottom: clamp(1.8rem, 4.5vh, 3.2rem); z-index: 3; display: flex; align-items: center; gap: .85rem; font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--sur-ebene-45); } .hero__scroll i { display: block; width: 42px; height: 1px; background: var(--filet-ebene); position: relative; overflow: hidden; } .hero__scroll i::after { content: ''; position: absolute; inset: 0; background: var(--brun-encre); animation: filer 2.9s var(--ease) infinite; } @keyframes filer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } } /* ========================================================================= ORNEMENTS DE MARQUE Trois signes tires du logotype, et rien d'autre : le double filet du cartouche, le point du sceau, la capitale espacee. ========================================================================= */ /* Libelle de section : capitale espacee soulignee du double filet. Le corps est agrandi (retour #74) et l'interlettrage recule de .34em a .28em : au-dela, les libelles longs (Conciergeries et palaces, Concierge services and palace hotels) se distendaient et cassaient sur mobile. Le retrait droit des filets compense la derniere chasse d'interlettrage, il vaut donc toujours exactement l'interlettrage. Le creux sous le texte est en em pour suivre le corps, le double filet reste un couple de traits d'un pixel, independant de la taille de la capitale. */ .signe { display: inline-block; font-family: var(--titre); font-weight: 300; font-size: var(--t-signe); letter-spacing: .28em; text-transform: uppercase; color: var(--brun-encre); padding-bottom: .95em; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); position: relative; } .signe::before, .signe::after { content: ''; position: absolute; left: 0; right: .28em; height: 1px; background: currentColor; } .signe::before { bottom: 3px; opacity: .9; } .signe::after { bottom: 0; opacity: .45; } /* Point du sceau, employe en separateur et en ponctuation */ .point { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--brun-encre); margin-inline: auto; } /* Cartouche seul, ornement de respiration entre deux mouvements */ .ornement { display: flex; justify-content: center; color: var(--brun-encre); opacity: .5; } .ornement svg, .ornement img { height: clamp(30px, 3.4vw, 44px); width: auto; } .sur-lin .ornement { color: var(--brun-encre); opacity: .42; } /* Colonne de lecture centree dans la page */ .colonne { max-width: 62ch; margin-inline: auto; } .colonne--large { max-width: 44rem; } /* Mentions en ligne, ponctuees du point de marque */ .mentions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55rem 1.4rem; font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--sur-lin-45); } .sur-ebene .mentions { color: var(--sur-ebene-45); } .mentions li { display: flex; align-items: center; gap: 1.4rem; } .mentions li:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--brun-encre); opacity: .8; } /* ============================================================== APPROCHE = Premier mouvement : une page de titre. Colonne unique, marges immenses. ========================================================================= */ .approche__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(1.75rem, 3.45vw, 2.95rem); line-height: 1.17; letter-spacing: -.014em; margin-bottom: clamp(2rem, 3.6vw, 2.9rem); text-wrap: balance; } .approche__prose { max-width: 40rem; } .approche__prose p + p { margin-top: 1.35em; } .signature { margin-top: clamp(2.4rem, 4vw, 3.4rem); display: flex; align-items: baseline; gap: 1.3rem; } .signature span { font-family: var(--accent); font-size: clamp(2.5rem, 4.2vw, 3.5rem); line-height: 1; color: var(--brun-encre); } .signature i { font-style: normal; font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sur-lin-45); } /* Photographie en debord, calee sur la marge droite de la page */ .approche__media { margin-top: clamp(3.5rem, 7vw, 6.5rem); margin-left: auto; width: min(100%, 62rem); } .approche__media img { width: 100%; } .legende { margin-top: 1rem; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--sur-lin-45); } .sur-ebene .legende { color: var(--sur-ebene-45); } .approche__mentions { margin-top: clamp(3.5rem, 6vw, 5.5rem); } /* =============================================================== ESPECES = Deuxieme mouvement : une frise de planches. Aucune boite, aucun cadre. ========================================================================= */ .especes__entree { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(1.5rem, 4vw, 5rem); margin-bottom: clamp(4rem, 8vw, 7rem); } .especes__entree .chapo { max-width: 34ch; } .frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.8rem, 4vw, 4.5rem); } .espece { position: relative; } .espece__planche { position: relative; aspect-ratio: 7 / 5; margin-bottom: clamp(1.7rem, 2.6vw, 2.4rem); background-color: var(--planche); -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; opacity: .58; transition: opacity .8s var(--ease), background-color .8s var(--ease), transform 1s var(--ease); } .espece:hover .espece__planche { opacity: 1; background-color: var(--planche-vive); transform: translateY(-6px); } .espece--cheval .espece__planche { -webkit-mask-image: url('../img/sq-cheval.webp'); mask-image: url('../img/sq-cheval.webp'); } .espece--chien .espece__planche { -webkit-mask-image: url('../img/sq-chien.webp'); mask-image: url('../img/sq-chien.webp'); } .espece--chat .espece__planche { -webkit-mask-image: url('../img/sq-chat.webp'); mask-image: url('../img/sq-chat.webp'); } .espece--vache .espece__planche { -webkit-mask-image: url('../img/sq-vache.webp'); mask-image: url('../img/sq-vache.webp'); } /* Le nom reprend la construction du logotype : capitale espacee, double filet */ .espece__nom { font-family: var(--titre); font-weight: 300; font-size: clamp(.82rem, 1vw, .95rem); letter-spacing: .26em; text-transform: uppercase; padding-bottom: .85rem; margin-bottom: 1.1rem; position: relative; } .espece__nom::before, .espece__nom::after { content: ''; position: absolute; left: 0; height: 1px; background: currentColor; width: 100%; transition: width .9s var(--ease), opacity .7s var(--ease); } .espece__nom::before { bottom: 3px; opacity: .3; } .espece__nom::after { bottom: 0; opacity: .16; } .espece:hover .espece__nom::before { opacity: .75; } .espece:hover .espece__nom::after { opacity: .4; } .espece__note { font-size: var(--t-petit); line-height: 1.72; color: var(--sur-ebene-45); transition: color .7s var(--ease); } .espece:hover .espece__note { color: var(--sur-ebene-70); } /* Les motifs ne changent pas d'une espece a l'autre : le dire une fois, sous la frise, et renvoyer a la section qui les detaille. */ .especes__motifs { margin: clamp(3rem, 5.5vw, 4.6rem) auto 0; max-width: 58ch; text-align: center; font-size: var(--t-corps); line-height: 1.8; color: var(--sur-ebene-70); } .especes__motifs .lien { color: var(--encre-forte); } /* ================================================================ MOTIFS = Troisieme mouvement : une litanie. Le texte coule, ponctue du point de marque, au lieu d'etre range dans une liste numerotee. ========================================================================= */ .motifs { position: relative; } .motifs__grille { display: grid; grid-template-columns: minmax(0, .52fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; } .motifs__media img { width: 100%; } .motifs__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.18; letter-spacing: -.014em; margin-bottom: clamp(1.8rem, 3.2vw, 2.6rem); text-wrap: balance; } .litanie { font-family: var(--titre); font-weight: 300; font-size: clamp(1.18rem, 1.85vw, 1.62rem); line-height: 1.62; letter-spacing: -.004em; color: var(--sur-lin); max-width: 46ch; } .litanie li { display: inline; } .litanie li::after { content: ''; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background: var(--brun-encre); margin: 0 .62em .18em; opacity: .78; } .litanie li:last-child::after { content: none; } /* Le motif qui signe la clientele, sorti de la litanie */ .exergue { margin-top: clamp(2.4rem, 4.4vw, 3.6rem); padding-top: clamp(1.6rem, 2.6vw, 2.2rem); position: relative; max-width: 68ch; /* meme largeur rendue que la litanie, ch calcule sur Outfit */ } .exergue::before, .exergue::after { content: ''; position: absolute; left: 0; width: 4.5rem; height: 1px; background: var(--brun-encre); } .exergue::before { top: 0; opacity: .85; } .exergue::after { top: 3px; opacity: .4; } .exergue b { display: block; font-family: var(--titre); font-weight: 300; font-size: clamp(1.22rem, 1.95vw, 1.7rem); line-height: 1.28; letter-spacing: -.008em; color: var(--brun-titre); margin-bottom: .6rem; } .exergue i { font-style: normal; font-family: var(--titre); font-weight: 300; font-size: clamp(1.18rem, 1.85vw, 1.62rem); line-height: 1.5; letter-spacing: -.004em; color: var(--sur-lin-70); } /* ======================================================= PRISE EN CHARGE = Quatrieme mouvement : une prose en colonne, comme une lettre. Les moments se succedent, separes par le point du sceau. ========================================================================= */ .parcours { position: relative; overflow: hidden; } .parcours__fond { position: absolute; inset: 0; background-image: url('../img/cuir.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .10; pointer-events: none; z-index: 0; } /* Sur fond lin, la texture de cuir marque beaucoup plus : on l'attenue. */ :root[data-theme='light'] .parcours__fond { opacity: .06; } .parcours .enveloppe { position: relative; z-index: 1; } .parcours__entree { text-align: center; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .parcours__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.018em; margin-bottom: clamp(1.4rem, 2.4vw, 2rem); text-wrap: balance; } .parcours__entree .chapo { max-width: 44ch; margin-inline: auto; } .moments { max-width: 60ch; margin-inline: auto; } .moment { text-align: center; } .moment__titre { font-family: var(--titre); font-weight: 300; font-size: clamp(.84rem, 1vw, .96rem); letter-spacing: .3em; text-transform: uppercase; color: var(--brun-encre); margin-bottom: 1.05rem; } .moment__note { color: var(--sur-ebene-70); font-size: var(--t-corps); line-height: 1.78; } .moments .point { margin-block: clamp(2rem, 3.6vw, 3rem); } /* ============================================================ DISCRETION = Cinquieme mouvement : le point culminant. Presque rien, tres grand. ========================================================================= */ .discretion { position: relative; background: var(--brun-sombre); color: var(--lin); overflow: hidden; text-align: center; } .discretion__fond { position: absolute; inset: 0; background-image: url('../img/cuir.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .09; z-index: 0; } .discretion::after { content: ''; position: absolute; inset: 0; background: radial-gradient(115% 85% at 50% 4%, rgba(169,104,61,.28), rgba(169,104,61,.06) 55%, rgba(169,104,61,0) 78%); z-index: 0; pointer-events: none; } .discretion .enveloppe { position: relative; z-index: 1; } .discretion .signe { color: rgba(239,230,225,.68); } .discretion__sceau { display: flex; justify-content: center; margin-bottom: clamp(2.4rem, 4.5vw, 3.8rem); } .discretion__sceau img { width: clamp(64px, 7vw, 96px); height: auto; opacity: .85; } .discretion__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(2rem, 4.8vw, 4.1rem); line-height: 1.06; letter-spacing: -.024em; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); text-wrap: balance; } .discretion__phrase em { font-style: normal; color: rgba(239,230,225,.56); } .discretion__texte { max-width: 52ch; margin-inline: auto; color: rgba(239,230,225,.8); } .discretion__texte + .discretion__texte { margin-top: 1.3em; } .nda { display: inline-flex; align-items: center; gap: .9rem; margin-top: clamp(2.6rem, 4.4vw, 3.6rem); padding-bottom: .8rem; font-size: var(--t-micro); letter-spacing: .28em; text-transform: uppercase; position: relative; } .nda::before, .nda::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; } .nda::before { bottom: 3px; opacity: .55; } .nda::after { bottom: 0; opacity: .25; } .nda svg { width: 1.05em; height: 1.05em; opacity: .8; } /* =============================================================== PAROLES = Deux paroles, au centre et dans le vide, juste avant le contact : elles ferment le parcours sur la voix des familles. Sur fond lin desormais, d'ou les surcharges de couleur plus bas. ========================================================================= */ .paroles { text-align: center; } .paroles__entree { margin-bottom: clamp(1rem, 2vw, 1.6rem); } .parole { margin: 0; } .parole p { margin: 0 auto; max-width: 34ch; font-family: var(--titre); font-weight: 300; font-size: clamp(1.32rem, 2.4vw, 2rem); line-height: 1.34; letter-spacing: -.012em; color: var(--sur-ebene); } .parole cite { display: block; margin-top: clamp(1.1rem, 2vw, 1.6rem); font-family: var(--corps); font-style: normal; font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sur-ebene-45); } .paroles .point { margin: clamp(2.6rem, 5vw, 4.2rem) auto; } .paroles__note { margin: clamp(3.2rem, 6vw, 5rem) auto 0; max-width: 48ch; font-size: var(--t-petit); line-height: 1.7; color: var(--sur-ebene-45); } /* ============================================================ TERRITOIRE = Sixieme mouvement : retour a l'asymetrie, la photographie reprend la main. ========================================================================= */ .territoire__grille, .partenaires__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; } .territoire__phrase, .partenaires__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.014em; margin-bottom: clamp(1.6rem, 3vw, 2.3rem); text-wrap: balance; } .lieux { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.15rem; margin-top: clamp(2.2rem, 3.6vw, 3rem); padding-top: clamp(1.4rem, 2.4vw, 1.9rem); position: relative; font-family: var(--titre); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sur-lin-70); } .lieux::before, .lieux::after { content: ''; position: absolute; top: 0; left: 0; width: 4.5rem; height: 1px; background: var(--brun-encre); } .lieux::before { opacity: .85; } .lieux::after { top: 3px; opacity: .4; } .lieux li { display: flex; align-items: center; gap: 1.15rem; } .lieux li:not(:last-child)::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--brun-encre); opacity: .7; } .territoire__media img, .partenaires__media img { width: 100%; } /* ========================================================= CONCIERGERIES = Septieme mouvement : la meme grille que le territoire, image a gauche, adressee cette fois aux conciergeries, palaces, equipages et regisseurs. Le fond ebene impose de rehausser la liste des lieux et ses filets. ========================================================================= */ .partenaires__action { margin-top: clamp(1.8rem, 3vw, 2.4rem); } /* Paroles portees sur fond lin : les encres claires deviennent sombres. */ .sur-lin .parole p { color: var(--sur-lin); } .sur-lin .parole cite, .sur-lin .paroles__note { color: var(--sur-lin-70); } /* =============================================================== CONTACT = Huitieme mouvement : la demande. Sobriete de la papeterie. ========================================================================= */ .contact { position: relative; overflow: hidden; } .contact__filigrane { right: -3%; bottom: 4%; width: clamp(240px, 26vw, 430px); opacity: .03; } .contact__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); gap: clamp(3rem, 7vw, 7.5rem); align-items: start; } .contact__phrase { font-family: var(--titre); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.14; letter-spacing: -.014em; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .champ { position: relative; margin-bottom: clamp(1.5rem, 2.3vw, 2rem); } .champ label { display: block; font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--sur-ebene-45); margin-bottom: .7rem; } .champ input, .champ select, .champ textarea { width: 100%; padding: .85rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--filet-ebene); color: var(--encre-forte); font-size: 1.02rem; font-weight: 300; border-radius: 0; transition: border-color .5s var(--ease); } .champ textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; } .champ select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: var(--chevron); background-repeat: no-repeat; background-position: right .2rem center; background-size: 12px; } .champ select option { background: var(--fond-profond); color: var(--encre-forte); } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--brun-encre); } .champ input::placeholder, .champ textarea::placeholder { color: var(--champ-vide); } .champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 2.5rem); } .pot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .consentement { display: flex; align-items: flex-start; gap: .85rem; margin-block: clamp(1.4rem, 2.4vw, 2rem); font-size: var(--t-petit); line-height: 1.62; color: var(--sur-ebene-45); cursor: pointer; } .consentement input { flex: none; width: 16px; height: 16px; margin-top: .28rem; accent-color: var(--brun); cursor: pointer; } /* Note de confidentialite, tenue par le double filet et non par un cadre */ .mention-nda { position: relative; padding-top: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: clamp(2.4rem, 4vw, 3.2rem); max-width: 54ch; font-size: clamp(.94rem, .2vw + .89rem, 1rem); line-height: 1.76; color: var(--sur-ebene-70); } .mention-nda::before, .mention-nda::after { content: ''; position: absolute; top: 0; left: 0; width: 4.5rem; height: 1px; background: var(--brun-encre); } .mention-nda::before { opacity: .9; } .mention-nda::after { top: 3px; opacity: .42; } /* Coordonnees : de l'espace, pas de tableau */ .coordonnees { display: grid; gap: clamp(1.6rem, 2.8vw, 2.4rem); } .coordonnee { display: block; transition: transform .6s var(--ease); } a.coordonnee:hover { transform: translateX(6px); } .coordonnee dt { font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--sur-ebene-45); margin-bottom: .55rem; } .coordonnee dd { margin: 0; font-family: var(--titre); font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -.004em; font-feature-settings: 'onum' 1; transition: color .5s var(--ease); } a.coordonnee:hover dd { color: var(--brun-encre); } .contact__portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-top: clamp(2.4rem, 4vw, 3.4rem); } .contact__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } .reponse { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 1px solid var(--brun-encre); font-size: var(--t-petit); line-height: 1.66; color: var(--sur-ebene-70); display: none; } .reponse.est-visible { display: block; } .reponse.est-erreur { border-color: var(--erreur-filet); color: var(--erreur-encre); } /* ================================================================ FOOTER = ========================================================================= */ .pied { background: var(--fond-profond); padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2rem, 3vw, 2.6rem); } .pied__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); } .pied__logo { width: clamp(150px, 15vw, 205px); } .pied__logo img { filter: var(--filtre-logo); } .pied__baseline { margin-top: 1.4rem; font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--sur-ebene-45); line-height: 2; } .pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.8rem, 3vw, 2.6rem); } .pied__titre { font-family: var(--titre); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--sur-ebene-45); margin-bottom: 1.2rem; padding-bottom: .7rem; position: relative; } .pied__titre::before, .pied__titre::after { content: ''; position: absolute; left: 0; width: 2.2rem; height: 1px; background: currentColor; } .pied__titre::before { bottom: 3px; opacity: .6; } .pied__titre::after { bottom: 0; opacity: .28; } .pied__liste li { margin-bottom: .68rem; } .pied__liste a, .pied__liste span { font-size: var(--t-petit); color: var(--sur-ebene-70); transition: color .4s var(--ease); } .pied__liste a:hover { color: var(--encre-forte); } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: clamp(1.6rem, 2.6vw, 2.2rem); border-top: 1px solid var(--filet-ebene); font-size: var(--t-micro); letter-spacing: .13em; color: var(--sur-ebene-45); } .pied__bas a:hover { color: var(--encre-forte); } /* ======================================================= PAGE SECONDAIRE = ========================================================================= */ .page-texte { padding-top: clamp(9rem, 15vh, 12rem); } .page-texte h2 { font-family: var(--titre); font-weight: 300; font-size: clamp(1.28rem, 1.9vw, 1.6rem); letter-spacing: .04em; margin-top: clamp(2.6rem, 4.4vw, 3.6rem); margin-bottom: 1.1rem; } .page-texte p, .page-texte li { color: var(--sur-ebene-70); max-width: 68ch; } .page-texte p { margin-bottom: 1rem; } .page-texte ul { margin-bottom: 1rem; } .page-texte li { padding-left: 1.3rem; position: relative; margin-bottom: .5rem; } .page-texte li::before { content: ''; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--brun-encre); } .page-texte a { color: var(--brun-encre); text-decoration: underline; text-underline-offset: .22em; } /* ============================================================ ANIMATIONS = ========================================================================= */ .js .revele { opacity: 0; transform: translateY(22px); transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease); transition-delay: var(--retard, 0ms); } .js .revele.est-visible { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE = ========================================================================= */ /* Le menu passe au burger avant que les onglets ne se marchent dessus. Neuf entrees, dont huit visibles, ne tiennent plus en ligne sous 1450 px environ : le seuil est remonte de 1400 a 1500 px pour garder une reserve, et reste distinct de celui de la mise en page. Le resserrage des gouttieres, autrefois reserve a la bande etroite qui precedait ce seuil, est passe dans la regle de base : sous le seuil, la barre horizontale n'existe plus, la regle n'avait plus d'objet. */ @media (max-width: 1500px) { .nav__menu { position: fixed; inset: 0; /* Au-dessus de la barre des langues, dont le separateur en opacite reduite passait sinon par-dessus le menu, mais sous le burger et la bascule de theme, qui restent accessibles menu ouvert. */ z-index: 1; flex-direction: column; justify-content: center; gap: 1.6rem; background: var(--fond-profond); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease); } .nav__menu.est-ouvert { opacity: 1; visibility: visible; } .nav__menu .nav__lien { font-size: 1rem; letter-spacing: .18em; } .burger { display: block; z-index: 2; } /* Le bouton ne s'efface que la ou le burger prend le relais : les pages secondaires n'ont pas de menu, elles gardent leur seul acces au contact. */ .nav:not(.nav--simple) .nav__contact { display: none; } .nav__lien--contact { display: block; } } @media (max-width: 1180px) { .hero { grid-template-columns: 1fr minmax(0, 38%); } .frise { grid-template-columns: repeat(2, 1fr); gap: clamp(2.5rem, 5vw, 4rem); } } @media (max-width: 980px) { .hero { grid-template-columns: 1fr; min-height: auto; } /* La photo laisse la place au titre : sur-ligne et titre doivent tenir dans le premier ecran, barre de navigation comprise. La hauteur minimale evite qu'une image lente ne fasse remonter le texte sous la barre. */ .hero__media { grid-row: 1; /* Hauteur posee en clair plutot que deduite d'un rapport : le rapport 4/5 laissait la largeur se calculer sur la hauteur des que celle-ci etait bornee, et la photo ne tenait plus toute la largeur. */ aspect-ratio: auto; width: 100%; height: clamp(15rem, 46svh, 27rem); } .hero__media img { object-position: 58% 32%; } .hero__media::after { background: linear-gradient(0deg, var(--fond-page) 2%, rgba(var(--fond-page-rvb), .35) 45%, rgba(var(--fond-page-rvb), .15) 100%); } /* Clair : meme logique qu'en large, bandeau net sous la barre, gouttiere a gauche et a droite, et le texte ne remonte plus sur l'image. */ :root[data-theme='light'] .hero__media { margin: clamp(5rem, 11vh, 6.5rem) var(--gouttiere) 0; /* La largeur pleine de la regle ci-dessus deborderait de la gouttiere. */ width: auto; } .hero__texte { grid-row: 2; padding: clamp(2.2rem, 5vw, 3.4rem) var(--gouttiere) clamp(4.5rem, 9vw, 6rem); margin-top: -8vh; } :root[data-theme='light'] .hero__texte { margin-top: 0; } .hero__scroll, .hero__filigrane { display: none; } .motifs__grille, .territoire__grille, .partenaires__grille, .contact__grille, .pied__haut { grid-template-columns: 1fr; } .motifs__media, .territoire__media, .partenaires__media { order: -1; } .approche__media { width: 100%; } .especes__entree { display: block; } .especes__entree .chapo { margin-top: 1.6rem; max-width: none; } .flottant { display: flex; justify-content: center; position: fixed; /* Meme marge sur les cotes qu'en bas, pour occuper toute la largeur. */ --marge-flottant: 1.15rem; left: var(--marge-flottant); right: var(--marge-flottant); /* Sous le grain (90) pour garder le voile argentique, au-dessus du reste. */ z-index: 80; bottom: calc(var(--marge-flottant) + env(safe-area-inset-bottom, 0px)); padding: .88rem 1.5rem; gap: .7rem; letter-spacing: .18em; box-shadow: 0 8px 26px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(1.1rem); pointer-events: none; /* La visibilite bascule sans duree, mais seulement une fois l'opacite eteinte : le lien sort ainsi du parcours clavier quand il est cache. */ transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s, color .55s var(--ease), border-color .55s var(--ease); } .flottant--visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } /* Le rappel ne doit pas recouvrir la derniere ligne du pied. */ body:has(.flottant) .pied { padding-bottom: calc(clamp(2rem, 3vw, 2.6rem) + 4.2rem + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 620px) { :root { --t-hero: clamp(2.35rem, 11vw, 3.4rem); } /* Le sur-titre garde sa taille agrandie, c'est l'interlettrage qui cede. Sur 360 px de large, le plus long des libelles francais, Conciergeries et palaces, ne laissait plus qu'une quinzaine de pixels a .28em ; a .24em il tient d'un seul tenant sur toute la gamme des telephones courants. Le retrait du filet suit, comme en grand ecran. */ .signe { letter-spacing: .24em; } .signe::before, .signe::after { right: .24em; } .frise { grid-template-columns: 1fr; gap: clamp(2.2rem, 6vw, 3rem); } .espece__planche { aspect-ratio: 16 / 7; } .champs-2 { grid-template-columns: 1fr; } .hero__marqueurs { gap: .55rem 1.4rem; } .litanie { font-size: 1.12rem; } /* Empilees, les mentions n'ont plus besoin du point de separation : il resterait orphelin en fin de ligne. */ .mentions { display: block; justify-content: flex-start; line-height: 2.1; } .mentions li { display: block; } .mentions li:not(:last-child)::after { display: none; } .lieux { line-height: 2; } } /* =========================================================== A11Y PRINT = ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .revele { opacity: 1; transform: none; } .flottant { transform: translateY(0); transition-delay: 0s; } } @media print { .nav, .grain, .hero__scroll, .parcours__fond, .discretion__fond, .ornement { display: none; } body { background: #fff; color: #000; } }