/* Cru « Nuance » — une maison qui se compose pour chaque visiteur. Deux lumières (craie de jour, encre de soir), quatre teintes (safran, sauge, argile, prune) choisies au rituel d'arrivée et posées sur . Literata (titres, optical size) + Geist. Mécanismes : le fil cousu au défilement, la grille qui se tisse, la cabine qui pivote, la matière qui prend la lumière, le portant, le miroir qui dessine la silhouette, le passeport en frise. */ @font-face { font-family: "Literata"; src: url("../fonts/literata.0654051d6f2d.woff2") format("woff2"); font-weight: 200 900; font-display: swap; } @font-face { font-family: "Literata"; src: url("../fonts/literata-italic.26dffc89e686.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/geist.f4634c3bc1fa.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @property --tisse { syntax: ""; inherits: false; initial-value: 0; } @property --trace { syntax: ""; inherits: false; initial-value: 0; } @view-transition { navigation: auto; } :root { --craie: #F4F1EA; --craie-2: #ECE7DD; --encre-0: #15161A; --encre-2: #1D1F25; --safran: #D98C2E; --sauge: #7F8F6E; --argile: #B4664A; --prune: #5B3A5C; --serif: "Literata", Georgia, serif; --sans: "Geist", system-ui, sans-serif; --rayon: 2px; --sortie: cubic-bezier(0.16, 1, 0.3, 1); --marge: clamp(20px, 3vw, 48px); --entete: 68px; --largeur: 1320px; --accent: var(--safran); } html[data-teinte="sauge"] { --accent: var(--sauge); } html[data-teinte="argile"] { --accent: var(--argile); } html[data-teinte="prune"] { --accent: var(--prune); } html, html[data-lumiere="jour"] { --fond: var(--craie); --fond-2: var(--craie-2); --encre: var(--encre-0); --clair: #FFFFFF; --doux-85: rgba(21,22,26,0.85); --doux-80: rgba(21,22,26,0.8); --doux-60: rgba(21,22,26,0.62); --doux-50: rgba(21,22,26,0.5); --doux-40: rgba(21,22,26,0.4); --doux-30: rgba(21,22,26,0.3); --doux-20: rgba(21,22,26,0.18); --doux-10: rgba(21,22,26,0.1); --doux-08: rgba(21,22,26,0.07); --fond-95: rgba(244,241,234,0.94); --trait: rgba(21,22,26,0.14); --accent-texte: color-mix(in srgb, var(--accent) 85%, var(--encre-0)); color-scheme: light; } html[data-lumiere="soir"] { --fond: var(--encre-0); --fond-2: var(--encre-2); --encre: var(--craie); --clair: var(--craie); --doux-85: rgba(244,241,234,0.85); --doux-80: rgba(244,241,234,0.8); --doux-60: rgba(244,241,234,0.62); --doux-50: rgba(244,241,234,0.5); --doux-40: rgba(244,241,234,0.4); --doux-30: rgba(244,241,234,0.3); --doux-20: rgba(244,241,234,0.2); --doux-10: rgba(244,241,234,0.12); --doux-08: rgba(244,241,234,0.08); --fond-95: rgba(21,22,26,0.94); --trait: rgba(244,241,234,0.16); --accent-texte: color-mix(in srgb, var(--accent) 70%, var(--craie)); color-scheme: dark; } :root { --accent-15: color-mix(in srgb, var(--accent) 15%, transparent); --accent-20: color-mix(in srgb, var(--accent) 22%, transparent); --accent-30: color-mix(in srgb, var(--accent) 32%, transparent); } html.nuance-en-cours body, html.nuance-en-cours body *, html.nuance-en-cours body *::before, html.nuance-en-cours body *::after { transition: background-color 900ms ease, color 900ms ease, border-color 900ms ease, fill 900ms ease, stroke 900ms ease, box-shadow 900ms ease !important; } /* ---------- socle ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background: var(--fond); } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.6; overflow-x: hidden; font-optical-sizing: auto; } body.menu-ouvert, body.tiroir-ouvert { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, select, textarea { font: inherit; color: inherit; } select option { background: var(--fond-2); color: var(--encre); } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; } ul, ol { list-style: none; } fieldset { border: 0; min-width: 0; } legend { padding: 0; } s { color: var(--doux-40); } svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } ::selection { background: var(--accent); color: var(--clair); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--fond); } ::-webkit-scrollbar-thumb { background: var(--doux-20); border-radius: 3px; } .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .evitement { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--clair); padding: 8px 14px; z-index: 1000; } .evitement:focus { left: 8px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } main { padding-top: var(--entete); position: relative; } body.accueil main, body.page-commander main, body.page-paiement main, body.page-merci main { padding-top: 0; } .conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); } .conteneur-large { max-width: 1600px; margin: 0 auto; padding: 0 var(--marge); } .conteneur-etroit { max-width: 1000px; margin: 0 auto; padding: 48px var(--marge); } .petit { font-size: 0.78rem; } .mono { font-variant-numeric: tabular-nums; } .centre { text-align: center; display: block; } /* ---------- typographie ---------- */ .titre-ouverture, .titre-page, .titre-section, .titre-produit, .titre-bloc, .titre-geant, .titre-article, .titre-rituel { font-family: var(--serif); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; font-optical-sizing: auto; } .titre-ouverture { font-size: clamp(44px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.02em; } .titre-page { font-size: clamp(36px, 5vw, 68px); } .titre-section { font-size: clamp(30px, 4vw, 54px); } .titre-geant { font-size: clamp(40px, 6vw, 88px); } .titre-produit { font-size: clamp(32px, 4vw, 52px); } .titre-bloc { font-size: 1.6rem; } .titre-rituel { font-size: clamp(28px, 3.5vw, 44px); } .titre-ouverture em, .titre-page em, .titre-section em, .titre-rituel em, .titre-produit em { font-style: italic; color: var(--accent-texte); font-weight: 400; } .titre-clair { color: var(--craie); } .surtitre { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--accent-texte); margin-bottom: 10px; } .surtitre-clair { color: rgba(255,255,255,0.8); } .etiquette-doux, .etiquette { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--doux-50); display: flex; gap: 8px; align-items: baseline; } .etiquette b, .etiquette-doux b { font-weight: 500; color: var(--encre); } .etiquette-ligne { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 12px; } .texte-doux { font-size: 0.95rem; color: var(--doux-60); line-height: 1.75; } .texte-doux b, .texte-doux strong { color: var(--encre); font-weight: 500; } .page-tete { padding: 48px 0 28px; } .page-tete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .page-texte { max-width: 60ch; margin-top: 16px; } .retour { display: inline-block; margin-bottom: 24px; } .section-tete { padding-top: 96px; margin-bottom: 40px; } .section-tete-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .section-tete-centre { text-align: center; } .section-tete .surtitre { margin-bottom: 8px; } .section-note { max-width: 40ch; } .filet-or { display: block; width: 40px; height: 1px; background: var(--accent); margin-bottom: 16px; } .lien, .lien-souligne, .lien-fleche { position: relative; font-size: 0.86rem; font-weight: 500; display: inline-block; letter-spacing: 0.01em; } .lien-souligne::after, .lien::after, .lien-fleche::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0.4); transform-origin: left; opacity: 0.5; transition: transform 450ms var(--sortie), opacity 450ms; } .lien-souligne:hover::after, .lien:hover::after, .lien-fleche:hover::after, .lien-souligne:focus-visible::after { transform: scaleX(1); opacity: 1; } .lien-accent { color: var(--accent-texte); } .lien-clair { color: var(--craie); } .prose { font-size: 1rem; line-height: 1.85; color: var(--doux-80); } .prose p + p { margin-top: 1em; } .prose h2 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; color: var(--encre); margin: 1.6em 0 0.5em; } .prose ul { list-style: disc; padding-left: 1.2em; margin: 0.6em 0; } .prose strong { color: var(--encre); font-weight: 500; } .prose a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; } .a-completer { border-bottom: 1px dashed var(--accent); } .legale { max-width: 72ch; padding-bottom: 100px; } /* ---------- boutons, champs ---------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--sans); font-weight: 500; font-size: 0.86rem; letter-spacing: 0.01em; border: 1px solid var(--encre); background: transparent; color: var(--encre); border-radius: var(--rayon); transition: background 300ms, color 300ms, border-color 300ms, transform 300ms var(--sortie); text-align: center; white-space: nowrap; } .bouton:hover { background: var(--encre); color: var(--fond); transform: translateY(-1px); } .bouton-plein, .bouton-creme { background: var(--encre); color: var(--fond); border-color: var(--encre); } .bouton-plein:hover, .bouton-creme:hover { background: var(--accent); border-color: var(--accent); color: var(--clair); } .bouton-contour, .bouton-secondaire { background: transparent; } .bouton-clair { background: var(--craie); color: var(--encre-0); border-color: var(--craie); } .bouton-clair:hover { background: var(--accent); border-color: var(--accent); color: var(--clair); } .bouton-laiton, .bouton.ajoute { background: var(--accent); border-color: var(--accent); color: var(--clair); } .bouton-petit { padding: 8px 16px; font-size: 0.78rem; } .bouton-large { width: 100%; } .bouton:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .bouton-danger { border-color: #b3403a; color: #b3403a; } .champ-sombre, .champ input:not([type="checkbox"]):not([type="radio"]), .champ textarea, .champ select, .formulaire-champ input:not([type="checkbox"]), .formulaire-champ textarea, .formulaire-champ select, .espace-form input, .promo-ligne input, .conseil-champs input, .conseil-champs select, .retour-form input, .retour-form textarea, .recherche input, .lettre-form input, .rituel-tailles select, .rituel-tailles input, .personnalisation input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--doux-30); color: var(--encre); font-family: var(--sans); font-size: 0.95rem; padding: 10px 0; outline: none; transition: border-color 300ms; border-radius: 0; } .champ input::placeholder, .formulaire-champ input::placeholder, .champ-sombre::placeholder, .recherche input::placeholder, .lettre-form input::placeholder { color: var(--doux-40); } .champ input:focus, .champ textarea:focus, .champ select:focus, .formulaire-champ input:focus, .formulaire-champ textarea:focus, .champ-sombre:focus, .recherche input:focus, .lettre-form input:focus { border-bottom-color: var(--accent); } .champ, .formulaire-champ { display: grid; gap: 6px; } .champ label, .champ > span, .formulaire-champ label, .champ-libelle { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doux-50); font-weight: 500; } .champ label small, .champ > span small, .formulaire-champ label small { text-transform: none; letter-spacing: 0; color: var(--doux-40); font-weight: 400; } .champ textarea, .formulaire-champ textarea { min-height: 80px; resize: vertical; } .champ.en-erreur input, .formulaire-champ.en-erreur input { border-color: #b3403a; } .errorlist, .formulaire-erreur { font-size: 0.78rem; color: #b3403a; } .champ-case label, .formulaire-case { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--doux-60); font-weight: 400; } .champ-case input, .formulaire-case input { position: absolute; opacity: 0; } .formulaire-case .case { display: none; } .formulaire-case input { position: static; opacity: 1; width: 14px; height: 14px; accent-color: var(--accent); } .case { width: 18px; height: 18px; border: 1px solid var(--doux-30); border-radius: 3px; display: inline-grid; place-items: center; flex: none; position: relative; transition: background 200ms, border-color 200ms; } .case::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--clair); border-bottom: 2px solid var(--clair); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } input:checked + .case { background: var(--accent); border-color: var(--accent); } input:checked + .case::after, .case-cochee::after { opacity: 1; } .form-erreurs { border: 1px solid #b3403a; padding: 12px 16px; color: #b3403a; font-size: 0.82rem; margin-bottom: 20px; border-radius: var(--rayon); } .pastille { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--clair); font-size: 10px; font-weight: 600; display: grid; place-items: center; } .pastille.saute { animation: sauter 400ms var(--sortie); } @keyframes sauter { 50% { transform: scale(1.4); } } .pastille-couleur { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 1px solid var(--doux-20); display: inline-block; transition: transform 200ms, outline-color 200ms; outline: 2px solid transparent; outline-offset: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); } .pastille-couleur:hover { transform: scale(1.15); } .pastille-couleur.actif { outline-color: var(--accent); } .pastille-mini { width: 12px; height: 12px; margin-right: 8px; vertical-align: middle; } /* ---------- en-tête, menu, recherche, messages ---------- */ .entete { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--fond-95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); transition: background 600ms, border-color 600ms, color 600ms; } .entete.sur-image:not(.defile) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; color: var(--craie); } body.menu-ouvert .entete { background: var(--fond); } .entete-interieur { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--marge); height: var(--entete); } .marque { display: flex; align-items: center; gap: 12px; flex: none; } .marque-nom { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; transition: letter-spacing 500ms var(--sortie); } .marque:hover .marque-nom { letter-spacing: 0.08em; } .marque-logo { height: 28px; width: auto; } .marque-logo:not([src]), .marque-logo[src=""] { display: none; } .salut { font-size: 0.8rem; color: inherit; opacity: 0.75; display: flex; gap: 10px; align-items: baseline; white-space: nowrap; } .salut-bouton { font-weight: 500; color: var(--accent-texte); position: relative; } .entete.sur-image:not(.defile) .salut-bouton { color: var(--craie); text-decoration: underline; text-underline-offset: 3px; } .navigation { display: flex; align-items: center; gap: 28px; } .nav-lien { position: relative; font-size: 0.86rem; font-weight: 500; white-space: nowrap; padding: 4px 0; } .nav-lien::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--sortie); } .nav-lien:hover::after, .nav-lien[aria-current="page"]::after { transform: scaleX(1); } .entete-icones { display: flex; align-items: center; gap: 6px; } .icone { display: inline-grid; place-items: center; width: 36px; height: 36px; position: relative; border-radius: 50%; transition: background 300ms; } .icone:hover { background: var(--doux-08); } .icone svg { width: 20px; height: 20px; } .burger { display: none; flex-direction: column; gap: 6px; width: 36px; height: 36px; place-items: center; justify-content: center; } .burger span { display: block; height: 1.5px; background: currentColor; width: 20px; } .recherche { display: flex; gap: 16px; align-items: center; padding: 8px var(--marge) 16px; border-top: 1px solid var(--trait); max-width: 1600px; margin: 0 auto; } .recherche input { flex: 1; } .menu-plein { position: fixed; inset: 0; z-index: 200; background: var(--fond); display: flex; flex-direction: column; justify-content: center; padding: 80px var(--marge) 48px; animation: fondu 400ms; } .menu-plein-nav { display: grid; gap: 6px; } .menu-plein-nav a { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: 1.15; transition: color 300ms, transform 300ms; animation: lever 600ms var(--sortie) both; } .menu-plein-nav a:nth-child(1) { animation-delay: 60ms; } .menu-plein-nav a:nth-child(2) { animation-delay: 110ms; } .menu-plein-nav a:nth-child(3) { animation-delay: 160ms; } .menu-plein-nav a:nth-child(4) { animation-delay: 210ms; } .menu-plein-nav a:nth-child(5) { animation-delay: 260ms; } .menu-plein-nav a:nth-child(6) { animation-delay: 310ms; } .menu-plein-nav a:nth-child(7) { animation-delay: 360ms; } .menu-plein-nav a:hover { color: var(--accent-texte); transform: translateX(8px); } .menu-plein-liens { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 20px 28px; font-size: 0.9rem; color: var(--doux-60); animation: fondu 600ms 400ms ease both; } .menu-plein-fermer { position: absolute; top: 22px; right: var(--marge); } @keyframes fondu { from { opacity: 0; } } @keyframes lever { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .messages { position: fixed; top: calc(var(--entete) + 8px); left: 50%; transform: translateX(-50%); z-index: 95; display: grid; gap: 6px; width: min(520px, calc(100vw - 32px)); } .message { background: var(--encre); color: var(--fond); padding: 12px 18px; font-size: 0.86rem; border-left: 3px solid var(--accent); border-radius: var(--rayon); animation: descend 400ms var(--sortie); } .message-error { border-left-color: #b3403a; } @keyframes descend { from { opacity: 0; transform: translateY(-10px); } } .message-plein { display: flex; gap: 12px; align-items: center; padding: 16px 20px; background: var(--fond-2); border: 1px solid var(--trait); font-size: 0.9rem; margin-bottom: 24px; border-radius: var(--rayon); } .message-plein svg { color: var(--accent); width: 16px; height: 16px; flex: none; } .mot-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; background: var(--encre); color: var(--fond); padding: 12px 20px; border-radius: 999px; font-size: 0.86rem; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 40px rgba(0,0,0,0.18); animation: monter 500ms var(--sortie); } .mot-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } @keyframes monter { from { opacity: 0; transform: translate(-50%, 16px); } } /* ---------- le rituel ---------- */ .rituel { border: 0; padding: 0; background: transparent; max-width: min(760px, calc(100vw - 32px)); width: 100%; margin: auto; color: var(--encre); } .rituel::backdrop { background: color-mix(in srgb, var(--encre-0) 55%, transparent); backdrop-filter: blur(8px); animation: fondu 500ms; } .rituel[open] { animation: rituel-entree 700ms var(--sortie); } @keyframes rituel-entree { from { opacity: 0; transform: translateY(24px) scale(0.98); } } .rituel-corps { position: relative; background: var(--fond); border: 1px solid var(--trait); border-radius: 6px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.25); } .rituel-plus-tard { position: absolute; top: 20px; right: 24px; color: var(--doux-50); font-size: 0.8rem; } .rituel-etapes { display: flex; gap: 8px; } .rituel-etapes li { width: 28px; height: 3px; background: var(--doux-10); border-radius: 2px; transition: background 400ms; } .rituel-etapes li.actif, .rituel-etapes li.faite { background: var(--accent); } .rituel-etape { display: none; gap: 20px; } .rituel-etape.actif { display: grid; animation: lever 500ms var(--sortie); } .rituel-etape .surtitre { margin: 0; } .rituel-choix { display: grid; gap: 14px; } .rituel-choix-2 { grid-template-columns: 1fr 1fr; } .rituel-choix-4 { grid-template-columns: repeat(4, 1fr); } .choix { display: grid; gap: 10px; justify-items: start; text-align: left; padding: 16px; border: 1px solid var(--trait); border-radius: 6px; transition: border-color 300ms, transform 300ms var(--sortie), background 300ms; } .choix:hover { border-color: var(--doux-40); transform: translateY(-2px); } .choix.actif { border-color: var(--accent); background: var(--accent-15); } .choix b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; } .choix small { font-size: 0.82rem; color: var(--doux-60); line-height: 1.5; } .choix-apercu { width: 100%; height: 88px; border-radius: 4px; position: relative; overflow: hidden; border: 1px solid var(--trait); } .apercu-jour { background: linear-gradient(135deg, #FBF9F4, #ECE7DD); } .apercu-soir { background: linear-gradient(135deg, #1D1F25, #101115); } .choix-apercu i { position: absolute; left: 14px; bottom: 12px; width: 44px; height: 6px; border-radius: 3px; background: var(--accent); } .choix-apercu::after { content: "Aa"; position: absolute; right: 14px; top: 10px; font-family: var(--serif); font-size: 1.6rem; font-weight: 300; } .apercu-jour::after { color: #15161A; } .apercu-soir::after { color: #F4F1EA; } .choix-pastille { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } .rituel-tailles { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; } .rituel-actions { display: flex; gap: 12px; justify-content: flex-end; } .rituel-note { color: var(--doux-40); } /* ---------- l'ouverture ---------- */ .ouverture { position: relative; height: 100svh; min-height: 620px; max-height: 960px; overflow: hidden; background: var(--encre-0); color: var(--craie); } .ouverture-image, .ouverture-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ouverture-image { transition: opacity 1200ms ease; } .ouverture-soir { opacity: 0; } html[data-lumiere="soir"] .ouverture-jour { opacity: 0; } html[data-lumiere="soir"] .ouverture-soir { opacity: 1; } html.js:not([data-revu]) body:not(.mode-edition) .ouverture-image img { animation: developper 2600ms var(--sortie) both; } @keyframes developper { from { filter: blur(14px) saturate(0.4) brightness(1.3); transform: scale(1.06); } to { filter: blur(0) saturate(1) brightness(1); transform: scale(1); } } .ouverture-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,12,0.75), rgba(10,10,12,0.15) 55%, rgba(10,10,12,0.25)); } .ouverture-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(32px, 6vw, 80px) var(--marge); max-width: 1100px; display: grid; gap: 22px; z-index: 2; } .ouverture-para { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.8); max-width: 54ch; } .ouverture-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .titre-ouverture .mot { display: inline-block; overflow: hidden; vertical-align: bottom; } .titre-ouverture .mot > span { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--sortie); transition-delay: calc(var(--m, 0) * 70ms + 300ms); } .titre-ouverture.mots-visibles .mot > span, body.mode-edition .titre-ouverture .mot > span { transform: none; } .ouverture-etat { position: absolute; right: var(--marge); bottom: 28px; z-index: 2; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; gap: 10px; } .ouverture-etat::before { content: ""; width: 40px; height: 1px; background: currentColor; } /* ---------- le fil ---------- */ .page-fil { position: relative; } .fil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } .fil path { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.85; transition: stroke-dashoffset 80ms linear; } .page-fil > section, .page-fil > .conteneur { position: relative; z-index: 1; } .noeud { position: relative; } .noeud::before { content: ""; position: absolute; left: -22px; top: 0.9em; width: 9px; height: 9px; border-radius: 50%; background: var(--fond); border: 1.5px solid var(--accent); transform: scale(0); transition: transform 500ms var(--sortie) 200ms; } .noeud.visible::before, body.mode-edition .noeud::before { transform: scale(1); } /* ---------- le métier : la grille qui se tisse ---------- */ .metier { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 28px 20px; grid-auto-flow: dense; padding-bottom: 8px; } .metier-4 { grid-auto-rows: 200px; } .carte { position: relative; display: flex; flex-direction: column; grid-column: span 1; grid-row: span 2; } .carte-moyen { grid-row: span 3; } .carte-grand { grid-column: span 2; grid-row: span 3; } .carte-haut { grid-row: span 4; } .carte-photo { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--rayon); background: var(--fond-2); display: block; --tisse: 0; clip-path: inset(calc((1 - var(--tisse)) * 100%) 0 0 0); transition: --tisse 1100ms var(--sortie); } .carte-photo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--fond) 0 1.5px, transparent 1.5px 9px); opacity: calc(1 - var(--tisse)); pointer-events: none; } .carte.visible .carte-photo, body.mode-edition .carte-photo, html:not(.js) .carte-photo { --tisse: 1; } @supports (animation-timeline: view()) { html.js body:not(.mode-edition) .carte-photo { animation: tisser linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; transition: none; } } @keyframes tisser { from { --tisse: 0; } to { --tisse: 1; } } .carte-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sortie), opacity 500ms; } .carte:hover .carte-img { transform: scale(1.04); } .carte-img-2 { opacity: 0; } .carte:hover .carte-img-2 { opacity: 1; } .epuisee .carte-img { opacity: 0.5; } .carte .etiquette { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-block; background: var(--fond); color: var(--encre); font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; } .carte .etiquette-taille { left: auto; right: 12px; background: var(--accent); color: var(--clair); } .coeur { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--fond); opacity: 0; transition: opacity 300ms, transform 300ms; } .carte .etiquette-taille:not([hidden]) ~ * .coeur, .carte:has(.etiquette-taille:not([hidden])) .coeur { top: 44px; } .coeur svg { width: 16px; height: 16px; } .carte:hover .coeur, .coeur[aria-pressed="true"] { opacity: 1; } .coeur[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); } .coeur-carre { position: static; opacity: 1; width: 50px; height: 50px; border: 1px solid var(--doux-20); border-radius: var(--rayon); background: transparent; flex: none; } .coeur-carre:hover { border-color: var(--accent); } .carte-corps { padding: 12px 2px 0; display: grid; gap: 2px; position: relative; } .carte-categorie { font-size: 0.74rem; color: var(--doux-50); letter-spacing: 0.04em; } .carte-nom { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; line-height: 1.2; } .carte-prix { font-size: 0.9rem; color: var(--doux-80); } .rapide { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; opacity: 0; transform: translateY(4px); transition: opacity 300ms, transform 300ms var(--sortie); } .carte:hover .rapide, .rapide:focus-within { opacity: 1; transform: none; } .rapide-titre { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doux-50); margin-right: 4px; } .rapide-taille { min-width: 30px; height: 26px; padding: 0 7px; border: 1px solid var(--doux-20); border-radius: 999px; font-size: 0.74rem; transition: background 200ms, color 200ms, border-color 200ms; } .rapide-taille:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); } .rapide-taille.votre { border-color: var(--accent); color: var(--accent-texte); font-weight: 600; } .rapide-taille:disabled { opacity: 0.35; text-decoration: line-through; } .carte-editoriale { grid-row: span 3; background: var(--fond-2); border-radius: var(--rayon); overflow: hidden; } .carte-editoriale .carte-img { position: absolute; inset: 0; } .carte-editoriale .carte-corps { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: #fff; } .carte-editoriale .carte-corps .surtitre { color: #fff; opacity: 0.8; } .grille { display: grid; gap: 20px; } .grille-2 { grid-template-columns: repeat(2, 1fr); } .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-4 { grid-template-columns: repeat(4, 1fr); } .carte-liee { display: block; height: 380px; overflow: hidden; border-radius: var(--rayon); background: var(--fond-2); } .carte-liee .carte-corps { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); color: #fff; } .carte-liee .carte-nom, .carte-liee .carte-prix, .carte-liee .carte-categorie { color: #fff; } .carte-basse { height: 280px; } .carte-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%); pointer-events: none; } .etiquette-or { display: inline-block; font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: var(--fond); color: var(--encre); } /* ---------- pour vous, nuancier, tenues, passeport, miroir, chiffres ---------- */ .pour-vous .metier { margin-bottom: 32px; } .pour-vous .carte.a-votre-taille .carte-photo { box-shadow: 0 0 0 2px var(--accent-30); } .nuancier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .echantillon { display: grid; gap: 14px; border-radius: var(--rayon); } .echantillon-tissu { display: block; aspect-ratio: 4 / 3; border-radius: var(--rayon); background-color: var(--c); background-image: radial-gradient(circle at var(--x, 30%) var(--y, 30%), rgba(255,255,255,0.45), transparent 42%), repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px); transition: transform 700ms var(--sortie); } .echantillon:hover .echantillon-tissu { transform: scale(1.02); } .echantillon-corps { display: grid; gap: 4px; } .echantillon b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; } .echantillon small { font-size: 0.86rem; color: var(--doux-60); line-height: 1.6; } .silhouettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .silhouette { display: grid; gap: 12px; } .silhouette-photo { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--rayon); background: var(--fond-2); display: block; } .silhouette-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sortie); } .silhouette:hover .silhouette-photo img { transform: scale(1.03); } .silhouette-corps { display: grid; gap: 4px; } .silhouette-corps .surtitre { margin: 0; } .silhouette-texte { font-family: var(--serif); font-size: 1.05rem; } .repere { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; border-radius: 50%; background: var(--fond); border: 2px solid var(--accent); transform: translate(-50%, -50%); z-index: 2; } .repere::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0.7; animation: pulser 2.4s ease-out infinite; } @keyframes pulser { to { transform: scale(2.2); opacity: 0; } } .repere span { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: var(--encre); color: var(--fond); padding: 5px 10px; border-radius: 999px; font-size: 0.74rem; opacity: 0; pointer-events: none; transition: opacity 300ms; } .silhouette:hover .repere span, .repere:hover span { opacity: 1; } .passeport-accueil { margin-top: 96px; padding: 96px 0; background: var(--fond-2); } .passeport-accueil-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; } .passeport-accueil .noeud { display: grid; gap: 20px; justify-items: start; } .frise-passeport { position: relative; display: grid; gap: 32px; padding-left: 36px; } .frise-passeport::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--doux-10); } .frise-passeport::after { content: ""; position: absolute; left: 6px; top: 8px; width: 1px; height: calc(var(--trace, 0) * (100% - 16px)); background: var(--accent); transition: height 1200ms var(--sortie); } .frise-etape { position: relative; display: grid; gap: 4px; } .frise-point { position: absolute; left: -36px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--fond-2); border: 1.5px solid var(--doux-30); transition: border-color 400ms, background 400ms, transform 400ms var(--sortie); z-index: 1; } .frise-etape.visible .frise-point { border-color: var(--accent); background: var(--accent); transform: scale(1.15); } .frise-etape b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; } .frise-etape .surtitre { margin: 0; } .frise-passeport-page { padding: 32px 0 96px 36px; max-width: 720px; gap: 44px; } .frise-passeport-page .frise-etape b { font-size: 1.7rem; } .frise-passeport-page .frise-point { background: var(--fond); } .frise-etape-fin b { color: var(--accent-texte); } .passeport-tete { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; } .passeport-photo img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); } .passeport-identite { display: grid; gap: 18px; justify-items: start; } .passeport-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; width: 100%; border-top: 1px solid var(--trait); padding-top: 18px; } .passeport-fiche dt { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doux-50); } .passeport-fiche dd { font-size: 0.95rem; } .passeport-mini { display: grid; gap: 8px; margin-bottom: 12px; } .passeport-mini li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .passeport-mini b { font-weight: 500; } .passeport-mini .surtitre { margin: 0; } .miroir-accueil { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 96px; padding-bottom: 96px; } .miroir-accueil-photo { position: relative; border-radius: var(--rayon); overflow: hidden; } .miroir-accueil-photo img { aspect-ratio: 4 / 5; object-fit: cover; } .miroir-trace { position: absolute; inset: 10%; width: 80%; height: 80%; opacity: 0.9; } .miroir-trace path { fill: rgba(255,255,255,0.08); stroke: var(--craie); stroke-width: 1.4; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2400ms var(--sortie); } .miroir-accueil.visible .miroir-trace path, body.mode-edition .miroir-trace path { stroke-dashoffset: 0; } .miroir-accueil-texte { display: grid; gap: 20px; justify-items: start; } .chiffres { padding-top: 24px; padding-bottom: 24px; } .chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 48px 0; } .chiffre b { display: block; font-family: var(--serif); font-weight: 300; font-size: 3rem; color: var(--accent-texte); line-height: 1; } .chiffre span, .chiffre p { display: block; font-size: 0.8rem; color: var(--doux-50); margin-top: 8px; } .journal-accueil { padding-bottom: 96px; } .journal-accueil .section-tete { padding-top: 96px; } /* ---------- fiche : la cabine, la matière, l'achat ---------- */ .fil-ariane { display: flex; gap: 8px; align-items: center; padding: 20px 0; font-size: 0.78rem; color: var(--doux-50); } .fil-ariane span { color: var(--doux-20); } .fil-ariane b { font-weight: 500; color: var(--doux-80); } .produit { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: 48px; } .cabine { position: sticky; top: calc(var(--entete) + 16px); display: grid; gap: 14px; } .cabine-scene { position: relative; aspect-ratio: 3 / 4; max-height: 82vh; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); cursor: ew-resize; touch-action: pan-y; user-select: none; } .cabine-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 260ms ease; } .cabine-image.actif { opacity: 1; } .cabine-lumiere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--x, 50%) var(--y, 40%), rgba(255,255,255,0.22), transparent 38%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 500ms; } .cabine-scene:hover .cabine-lumiere { opacity: 1; } .cabine-aide { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(21,22,26,0.7); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 0.76rem; display: flex; gap: 8px; align-items: center; transition: opacity 600ms; backdrop-filter: blur(4px); } .cabine-aide svg { width: 16px; height: 16px; } .cabine-aide.efface { opacity: 0; } .cabine-points { display: flex; gap: 8px; justify-content: center; } .cabine-point { width: 28px; height: 3px; border-radius: 2px; background: var(--doux-20); transition: background 300ms; } .cabine-point.actif { background: var(--accent); } .matiere-lumiere { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color 300ms; } .matiere-lumiere:hover { border-color: var(--accent); } .matiere-tissu { width: 84px; height: 84px; flex: none; border-radius: var(--rayon); background-color: var(--c); background-image: radial-gradient(circle at var(--x, 30%) var(--y, 30%), rgba(255,255,255,0.5), transparent 45%), repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 4px); } .matiere-corps { display: grid; gap: 2px; } .matiere-corps .surtitre { margin: 0; } .matiere-corps b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; } .matiere-corps small { font-size: 0.82rem; color: var(--doux-60); } .matiere-corps .lien-souligne { margin-top: 6px; font-size: 0.8rem; } .produit-info { padding-top: 8px; } .produit-info > .surtitre { margin-bottom: 10px; } .produit-accroche { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--doux-60); margin: 10px 0 16px; } .produit-prix { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--trait); padding-bottom: 22px; margin-bottom: 26px; } .produit-prix span { font-size: 1.35rem; font-weight: 500; } .produit-prix small { font-size: 0.76rem; color: var(--doux-40); letter-spacing: 0.04em; } .achat { display: grid; gap: 22px; } .choix-couleur .etiquette-doux { margin-bottom: 12px; } .couleurs { display: flex; gap: 12px; } .choix-taille legend { margin-bottom: 12px; } .choix-taille legend b::before { content: " — "; } .choix-taille legend b:empty::before { content: ""; } .tailles { display: flex; gap: 8px; flex-wrap: wrap; } .taille { position: relative; } .taille input { position: absolute; opacity: 0; } .taille span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 42px; padding: 0 12px; font-size: 0.86rem; border: 1px solid var(--doux-20); border-radius: var(--rayon); cursor: pointer; transition: all 250ms var(--sortie); position: relative; } .taille:hover span { border-color: var(--encre); transform: translateY(-1px); } .taille input:checked + span { background: var(--encre); color: var(--fond); border-color: var(--encre); } .taille input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .taille.votre span::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .taille.epuise span { opacity: 0.35; text-decoration: line-through; cursor: default; } .taille-alerte { font-size: 0.78rem; color: var(--accent-texte); margin-top: 10px; } .taille-alerte.cache { visibility: hidden; } .taille-note { font-size: 0.82rem; color: var(--accent-texte); margin-top: 10px; display: flex; gap: 8px; align-items: center; animation: lever 500ms var(--sortie); } .conseil { background: var(--fond-2); border-radius: var(--rayon); padding: 20px; display: grid; gap: 14px; } .conseil .surtitre { margin: 0; } .conseil-champs { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; } .conseil-champs label { display: grid; gap: 4px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doux-50); } .conseil-resultat { font-size: 0.9rem; } .conseil-resultat b { color: var(--accent-texte); font-weight: 500; } .conseil-note { font-size: 0.82rem; color: var(--doux-50); line-height: 1.6; } .guide-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .guide-table th, .guide-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--trait); } .guide-table th { font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; color: var(--doux-50); } .guide-table tr.conseillee td { background: var(--accent-15); color: var(--accent-texte); } .achat-boutons { display: flex; gap: 12px; } .achat-boutons .bouton-large { flex: 1; } .achat-ok { display: inline-flex; align-items: center; gap: 8px; } .personnalisation { background: var(--fond-2); border-radius: var(--rayon); padding: 22px; display: grid; gap: 12px; animation: lever 400ms var(--sortie); } .personnalisation-apercu { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 2.4rem; color: var(--accent-texte); letter-spacing: 0.08em; line-height: 1; } .produit-services { display: grid; border-top: 1px solid var(--trait); } .service-ligne { display: flex; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--trait); transition: background 300ms; } .service-ligne:hover { background: var(--fond-2); } .service-ligne svg { width: 22px; height: 22px; flex: none; color: var(--accent-texte); } .service-ligne span { display: grid; gap: 1px; } .service-ligne b { font-weight: 500; font-size: 0.92rem; } .service-ligne small { font-size: 0.8rem; color: var(--doux-50); } .produit-texte { margin-top: 28px; border-top: 1px solid var(--trait); } .pli { border-bottom: 1px solid var(--trait); } .pli summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .pli summary::-webkit-details-marker { display: none; } .pli summary::after { content: "+"; font-size: 1.1rem; color: var(--accent-texte); transition: transform 300ms; } .pli[open] summary::after { transform: rotate(45deg); } .pli-corps { padding-bottom: 18px; font-size: 0.92rem; line-height: 1.75; color: var(--doux-80); display: grid; gap: 10px; animation: lever 400ms var(--sortie); } .dispo { display: grid; gap: 6px; } .dispo li { display: flex; justify-content: space-between; gap: 12px; } .dispo b { font-weight: 500; } .porte-avec { padding: 64px 0 96px; } .porte-avec .section-tete { padding-top: 0; } /* ---------- collection : pilules, bascule, filtres ---------- */ .compte-pieces { font-size: 0.82rem; color: var(--doux-50); } .barre-filtres { position: sticky; top: var(--entete); z-index: 30; background: var(--fond-95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; margin-bottom: 32px; } .pilules { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; } .pilules::-webkit-scrollbar { display: none; } .pilule { flex: none; font-size: 0.84rem; font-weight: 500; padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; color: var(--doux-60); transition: color 300ms, background 300ms, border-color 300ms; } .pilule:hover { color: var(--encre); border-color: var(--doux-40); } .pilule[aria-current="page"] { background: var(--encre); color: var(--fond); border-color: var(--encre); } .pilule-univers { color: var(--accent-texte); border-color: var(--accent-30); } .pilule small { font-size: 0.7rem; opacity: 0.7; } .pilules-archive { margin-top: 24px; flex-wrap: wrap; } .barre-outils { display: flex; align-items: center; gap: 20px; flex: none; } .bascule { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; font-weight: 500; cursor: pointer; } .bascule input { position: absolute; opacity: 0; } .bascule-piste { width: 36px; height: 20px; border-radius: 10px; background: var(--doux-20); position: relative; transition: background 300ms; } .bascule-piste i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--fond); transition: transform 300ms var(--sortie); } .bascule input:checked + .bascule-piste { background: var(--accent); } .bascule input:checked + .bascule-piste i { transform: translateX(16px); } .tri select { background: transparent; border: 0; font-size: 0.84rem; font-weight: 500; color: var(--doux-60); outline: none; cursor: pointer; } .filtres-ouvrir { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 500; } .filtres-ouvrir svg { width: 18px; height: 18px; } .resultats-vide { padding: 32px 0 96px; color: var(--doux-60); } .filtres-plein { position: fixed; inset: 0; z-index: 150; background: var(--fond); overflow-y: auto; animation: fondu 300ms; } .filtres-plein-corps { max-width: 700px; margin: 0 auto; padding: 80px var(--marge); display: grid; gap: 44px; } .filtres-plein-tete { display: flex; justify-content: space-between; align-items: flex-start; } .filtre-groupe legend { margin-bottom: 16px; } .filtre-groupe legend b { color: var(--encre); font-weight: 500; } .jetons { display: flex; flex-wrap: wrap; gap: 10px; } .jeton { position: relative; } .jeton input { position: absolute; opacity: 0; } .jeton span { display: inline-flex; align-items: center; font-size: 0.86rem; padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; color: var(--doux-60); transition: all 250ms var(--sortie); cursor: pointer; } .jeton:hover span { border-color: var(--doux-40); color: var(--encre); transform: translateY(-1px); } .jeton input:checked + span { border-color: var(--accent); color: var(--accent-texte); background: var(--accent-15); } .jeton input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .curseur { width: 100%; accent-color: var(--accent); } .curseur-bornes { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.74rem; color: var(--doux-40); } .filtres-plein-actions { display: flex; gap: 16px; padding-top: 16px; } .filtres-plein-actions .bouton-plein { flex: 1; } /* ---------- le miroir ---------- */ .miroir { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; padding-bottom: 96px; } .miroir-etages { display: grid; gap: 28px; } .etage { border-top: 1px solid var(--trait); padding-top: 14px; } .etage-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .etage-piste { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 8px; scroll-snap-type: x proximity; } .etage-piece { flex: none; width: 140px; display: grid; gap: 8px; text-align: left; border-radius: var(--rayon); padding: 4px; outline: 2px solid transparent; outline-offset: 0; transition: outline-color 300ms, transform 300ms var(--sortie); scroll-snap-align: start; } .etage-piece img { aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--rayon); background: var(--fond-2); width: 100%; } .etage-piece b { font-family: var(--serif); font-weight: 400; font-size: 0.98rem; display: block; line-height: 1.2; } .etage-piece .petit { display: block; color: var(--doux-50); } .etage-piece:hover { transform: translateY(-2px); } .etage-piece[aria-pressed="true"] { outline-color: var(--accent); } .miroir-cadre { position: sticky; top: calc(var(--entete) + 20px); background: var(--fond-2); border-radius: 6px; padding: 28px; display: grid; gap: 18px; justify-items: center; } .miroir-silhouette { width: 100%; max-width: 230px; height: auto; } .miroir-silhouette .couche { fill: transparent; stroke: var(--doux-30); stroke-width: 1.2; stroke-dasharray: 3 4; transition: fill 900ms ease, stroke 600ms ease; } .miroir-silhouette .couche-corps { fill: var(--doux-08); stroke: none; } .miroir-silhouette .couche.dessine { stroke: var(--accent); stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dessiner 1400ms var(--sortie) forwards; fill: var(--teinte, var(--accent)); fill-opacity: 0.85; } @keyframes dessiner { to { stroke-dashoffset: 0; } } .miroir-mot { color: var(--doux-50); text-align: center; } .miroir-pile { width: 100%; display: grid; gap: 8px; } .miroir-piece { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--trait); animation: descend 400ms var(--sortie); } .miroir-piece img { aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; } .miroir-piece b { font-family: var(--serif); font-weight: 400; font-size: 0.98rem; display: block; } .miroir-piece select { width: 100%; border: 0; border-bottom: 1px solid var(--doux-20); background: transparent; font-size: 0.8rem; padding: 3px 0; margin-top: 2px; } .miroir-piece .petit { color: var(--doux-50); } .miroir-retirer { font-size: 1.1rem; color: var(--doux-40); width: 28px; height: 28px; border-radius: 50%; } .miroir-retirer:hover { background: var(--doux-08); color: var(--encre); } .miroir-pied { width: 100%; display: grid; gap: 12px; border-top: 1px solid var(--trait); padding-top: 14px; } /* ---------- le portant (tiroir) ---------- */ .tiroir-voile { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(3px); z-index: 190; animation: fondu 300ms; } .tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--fond); z-index: 200; transform: translateX(100%); transition: transform 500ms var(--sortie); display: flex; flex-direction: column; border-left: 1px solid var(--trait); } .tiroir.ouvert { transform: none; } .tiroir-tete { padding: 22px 28px; border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: center; } .tiroir-titre { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; } .tiroir-compte { font-size: 0.78rem; color: var(--doux-50); margin-top: 2px; } .tringle { padding: 18px 28px 0; } .tringle i { display: block; height: 3px; border-radius: 2px; background: var(--doux-30); position: relative; } .tringle i::before, .tringle i::after { content: ""; position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--doux-30); } .tringle i::before { left: -3px; } .tringle i::after { right: -3px; } .tiroir-corps { flex: 1; overflow-y: auto; padding: 8px 28px 24px; display: grid; gap: 20px; align-content: start; } .tiroir-vide { text-align: center; padding: 40px 0; display: grid; gap: 16px; justify-items: center; } .cintre-vide { width: 96px; height: 60px; stroke: var(--doux-20); stroke-width: 1.5; } .tiroir-vide p { font-size: 0.9rem; color: var(--doux-50); } .cintres { display: grid; gap: 0; } .cintres li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 22px 0 18px; border-bottom: 1px solid var(--trait); animation: accrocher 700ms var(--sortie) both; transform-origin: 40px -18px; } @keyframes accrocher { 0% { opacity: 0; transform: translateX(60px) rotate(6deg); } 60% { transform: translateX(0) rotate(-3deg); } 100% { opacity: 1; transform: none; } } .cintres li::before { content: ""; position: absolute; left: 30px; top: -2px; width: 14px; height: 14px; border: 1.5px solid var(--doux-40); border-bottom: 0; border-radius: 8px 8px 0 0; } .cintres li.retiree { animation: decrocher 350ms var(--sortie) forwards; } @keyframes decrocher { to { opacity: 0; transform: translateY(24px) rotate(-4deg); } } .ticket-photo { width: 72px; height: 96px; object-fit: cover; background: var(--fond-2); display: block; border-radius: 2px; } .ticket-nom { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.2; } .ticket-detail { font-size: 0.78rem; color: var(--doux-50); margin-top: 3px; } .ticket-ref { font-size: 0.76rem; color: var(--doux-40); margin: 2px 0 10px; } .ticket-outils { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ticket-prix { font-weight: 500; font-size: 0.95rem; } .quantite { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--trait); border-radius: 999px; padding: 2px 10px; } .quantite button { font-size: 0.95rem; color: var(--doux-60); width: 18px; } .quantite input { width: 24px; text-align: center; border: 0; background: transparent; font-size: 0.82rem; appearance: textfield; -moz-appearance: textfield; } .quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { appearance: none; } .ticket-alerte { grid-column: 1 / -1; font-size: 0.76rem; color: var(--accent-texte); } .coffret { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--fond-2); border-radius: var(--rayon); cursor: pointer; } .coffret input { position: absolute; opacity: 0; } .coffret-texte { display: grid; gap: 2px; } .coffret-texte b { font-weight: 500; font-size: 0.9rem; } .coffret-texte small { font-size: 0.78rem; color: var(--doux-50); } .tiroir-pied { padding: 20px 28px 24px; border-top: 1px solid var(--trait); display: grid; gap: 12px; } .ticket-total, .ticket-remise { display: flex; justify-content: space-between; align-items: baseline; } .ticket-total b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; } .ticket-remise { color: var(--accent-texte); font-size: 0.86rem; } .jauge-port { display: grid; gap: 8px; } .jauge-port-texte { font-size: 0.8rem; color: var(--doux-50); } .jauge-port-texte b { color: var(--accent-texte); font-weight: 500; } .jauge-port-barre { height: 2px; background: var(--doux-10); position: relative; border-radius: 1px; } .jauge-port-barre i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p, 0) * 1%); background: var(--accent); transition: width 700ms var(--sortie); } .chiffre-vivant { display: inline-block; transition: transform 300ms var(--sortie); } .chiffre-vivant.bouge { animation: tinter 400ms var(--sortie); } @keyframes tinter { 30% { transform: translateY(-4px); color: var(--accent-texte); } } /* ---------- pied ---------- */ .pied { margin-top: 64px; border-top: 1px solid var(--trait); background: var(--fond-2); } .pied-interieur { max-width: var(--largeur); margin: 0 auto; padding: 72px var(--marge) 40px; } .pied-haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 56px; } .pied-nom { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin-bottom: 12px; } .pied-texte { font-size: 0.86rem; color: var(--doux-60); line-height: 1.7; margin-bottom: 14px; } .pied-titre { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--doux-50); margin-bottom: 18px; font-weight: 500; } .pied-nav a { display: block; font-size: 0.9rem; color: var(--doux-80); padding: 4px 0; transition: color 300ms; position: relative; width: fit-content; } .pied-nav a:hover { color: var(--accent-texte); } .lettre-form { display: flex; gap: 8px; align-items: flex-end; } .lettre-form .icone { flex: none; } .pied-bas { border-top: 1px solid var(--trait); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; } .pied-copyright { font-size: 0.8rem; color: var(--doux-50); } .pied-copyright a { color: var(--doux-60); text-decoration: underline; text-underline-offset: 3px; } .pied-liens { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; } .pied-liens a, .pied-liens select { font-size: 0.8rem; color: var(--doux-50); background: transparent; border: 0; } .pied-liens a:hover { color: var(--encre); } .pied-reseaux { display: flex; gap: 12px; } /* ---------- apparitions ---------- */ html.js body:not(.mode-edition) main { animation: fondu 500ms ease both; } [data-apparition] { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--sortie), transform 900ms var(--sortie); transition-delay: calc(var(--i, 0) * 60ms); } [data-apparition].visible, body.mode-edition [data-apparition], html:not(.js) [data-apparition] { opacity: 1; transform: none; } html.js body:not(.mode-edition) img[loading="lazy"]:not(.carte-img):not(.cabine-image) { opacity: 0; transition: opacity 700ms ease; } html.js body:not(.mode-edition) img[loading="lazy"].chargee:not(.carte-img):not(.cabine-image) { opacity: 1; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 450ms; } ::view-transition-group(*) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .marque .ed-vide { height: 24px; width: auto; min-width: 0; padding: 0 8px; font-size: 9px; white-space: nowrap; } body.mode-edition .entete { position: sticky; } /* ---------- journal ---------- */ .journal-accueil { padding-bottom: 96px; } .articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .articles-grille-2 { grid-template-columns: 1fr 1fr; } .article-carte { height: 360px; } .article-carte .article-carte-corps { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 6px; z-index: 2; } .article-carte .surtitre { font-size: 0.78rem; margin: 0; } .article-carte-titre { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; } .article-carte-chapo { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--doux-50); line-height: 1.6; } .rubriques { display: flex; gap: 4px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; } .rubriques a { padding: 8px 16px; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--doux-50); white-space: nowrap; transition: color 300ms, background 300ms; } .rubriques a[aria-current="page"] { background: var(--accent); color: var(--fond); } .une { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; margin: 40px 0 56px; } .une img { aspect-ratio: 16 / 10; object-fit: cover; background: var(--fond-2); } .une-texte { display: grid; gap: 12px; padding-bottom: 12px; } .une-titre { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.05; } .une-chapo { color: var(--doux-60); font-size: 0.85rem; line-height: 1.8; max-width: 48ch; } .journal-liste { padding-bottom: 96px; } .article { max-width: 820px; margin: 0 auto; padding: 48px 0 96px; } .article-tete { display: grid; gap: 18px; text-align: center; margin-bottom: 40px; justify-items: center; } .titre-article { font-size: clamp(2.2rem, 5vw, 4rem); } .article-chapo { font-size: 0.95rem; color: var(--doux-60); max-width: 54ch; line-height: 1.8; } .article-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .prose-editoriale { font-family: var(--serif); font-size: 1.25rem; line-height: 1.8; max-width: 640px; margin: 48px auto 0; color: var(--doux-85); } .prose-editoriale p + p { margin-top: 1.3em; } .prose-editoriale > p:first-child::first-letter { font-size: 3.4em; float: left; line-height: 0.85; margin: 0.06em 0.12em 0 0; color: var(--accent); } .prose-editoriale h2 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--accent); margin: 2.4em 0 0.8em; font-weight: 400; } .article-pieces { margin-top: 64px; border-top: 1px solid var(--accent-15); padding-top: 32px; } .journal-suite { padding-bottom: 96px; } .journal-suite .section-tete { padding-top: 0; } /* ---------- Shop the Look ---------- */ .looks-grille { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 12px; grid-auto-flow: dense; padding-bottom: 80px; } .look-carte .carte-corps { padding: 20px; } .look-numero { position: absolute; top: 8px; right: 16px; font-family: var(--serif); font-weight: 300; font-size: 5rem; line-height: 1; color: var(--encre); opacity: 0.08; z-index: 1; } .point { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: rgba(184,150,86,0.9); border: 2px solid var(--encre); transform: translate(-50%, -50%); transition: transform 300ms; animation: pulser 2s ease infinite; z-index: 5; } .point:hover, .point.actif { transform: translate(-50%, -50%) scale(1.3); } .point-fixe { width: 12px; height: 12px; border-width: 1px; animation: none; pointer-events: none; } @keyframes pulser { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,150,86,0.4); } 50% { box-shadow: 0 0 0 12px rgba(184,150,86,0); } } .look-scene { display: flex; min-height: 80vh; } .look-image { flex: 1; position: relative; overflow: hidden; background: var(--fond-2); min-height: 70vh; } .look-image > img { width: 100%; height: 100%; min-height: 70vh; object-fit: cover; filter: saturate(0.9) contrast(1.1); } .look-image .carte-voile { background: linear-gradient(to top, rgba(0,0,0,0.25), transparent 40%); } .look-numero-geant { position: absolute; top: 32px; right: 32px; font-family: var(--serif); font-weight: 300; font-size: 120px; line-height: 1; color: var(--encre); opacity: 0.06; } .point-bulle { position: absolute; width: 208px; background: var(--fond-95); backdrop-filter: blur(4px); border: 1px solid var(--accent-30); padding: 16px; z-index: 20; display: grid; gap: 4px; animation: fondu 300ms; } .point-bulle .surtitre { font-size: 0.78rem; margin: 0; } .point-bulle-nom { font-family: var(--serif); font-size: 1.15rem; } .point-bulle .bouton { margin-top: 8px; } .look-panneau { width: 384px; flex: none; background: var(--fond-2); border-left: 1px solid var(--accent-15); overflow: hidden; transition: width 500ms var(--sortie); } .look-panneau.ferme { width: 0; border: 0; } .look-panneau-corps { padding: 32px; min-width: 320px; display: grid; gap: 24px; } .look-pieces-liste { display: grid; gap: 12px; } .look-piece { display: flex; gap: 16px; padding: 12px; background: var(--fond-2); border-left: 2px solid transparent; transition: background 300ms, border-color 300ms; } .look-piece.actif { background: var(--accent-15); border-left-color: var(--accent); } .look-piece-photo { width: 64px; height: 80px; flex: none; background: var(--fond-2); overflow: hidden; } .look-piece-photo img { width: 100%; height: 100%; object-fit: cover; } .look-piece-corps { flex: 1; min-width: 0; display: grid; gap: 2px; } .look-piece-corps .surtitre { font-size: 0.78rem; margin: 0; } .look-piece-nom { font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .look-piece-ligne { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .look-total { border-top: 1px solid var(--doux-10); padding-top: 24px; display: grid; gap: 12px; } .look-total-ligne { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .look-total-ligne b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; } .autres-looks { padding: 64px var(--marge) 32px; } .autres-looks .titre-bloc { font-size: 2rem; margin-bottom: 32px; } .collection-pieces { padding-bottom: 64px; } .collection-pieces .section-tete { padding-top: 0; } /* ---------- Maison, boutiques, carrières ---------- */ .histoire { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding-top: 96px; padding-bottom: 96px; } .histoire-texte { display: grid; gap: 24px; } .histoire-photo img { aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.85); } .manifeste { padding: 96px 0; background: var(--fond-2); } .manifeste .section-tete { padding-top: 0; margin-bottom: 56px; } .principes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; counter-reset: principe; } .principe { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--accent-15); padding-top: 20px; } .principe::before { counter-increment: principe; content: "0" counter(principe); font-family: var(--serif); font-size: 2rem; color: var(--accent); line-height: 1; } .ateliers { padding-bottom: 96px; } .ateliers-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .atelier-carte { display: grid; gap: 14px; } .atelier-carte img { aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(0.15) contrast(1.05); } .atelier-carte figcaption { display: grid; gap: 6px; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--doux-50); line-height: 1.7; } .atelier-carte b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--encre); } .maison-boutiques { padding: 96px var(--marge) 64px; } .maison-boutiques .section-tete { padding-top: 0; } .boutiques-liste { display: grid; padding-bottom: 96px; } .boutique-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px 0; border-top: 1px solid var(--accent-15); } .boutique-fiche:nth-child(even) figure { order: 2; } .boutique-fiche img { aspect-ratio: 16 / 10; object-fit: cover; background: var(--fond-2); } .boutique-fiche-texte { display: grid; gap: 12px; font-size: 0.85rem; line-height: 1.8; color: var(--doux-60); } .boutique-fiche-texte .titre-bloc, .boutique-fiche-texte h2 { color: var(--encre); } .boutique-horaires { color: var(--doux-40); font-size: 0.78rem; } .boutique-liens { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .carrieres { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding-bottom: 96px; align-items: start; } .postes { margin-top: 32px; border-top: 1px solid var(--accent-15); } .poste { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--doux-08); } .poste b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; } .carrieres-cote { background: var(--fond-2); border: 1px solid var(--accent-20); padding: 32px; display: grid; gap: 16px; justify-items: start; } /* ---------- panier (page), tunnel, suivi ---------- */ .panier-page { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; padding-bottom: 96px; } .ticket-lignes-page li { grid-template-columns: 120px 1fr; } .ticket-lignes-page .ticket-photo { width: 120px; height: 160px; } .promo { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--doux-08); margin-top: 8px; } .promo-ligne { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; } .promo-ligne input { letter-spacing: 0.06em; } .promo-erreur { font-size: 0.76rem; color: #e88; letter-spacing: 0.02em; } .promo-ok { font-size: 0.76rem; color: var(--accent); letter-spacing: 0.02em; } .promo-ok button { color: inherit; font-size: inherit; text-decoration: underline; } .panier-liste .cadeau, .panier-liste .coffret { margin: 24px 0 8px; } .cadeau { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--doux-60); } .cadeau input { position: absolute; opacity: 0; } .cadeau-icone { width: 14px; height: 14px; color: var(--accent); } .commande-tete { text-align: center; margin-bottom: 56px; display: grid; gap: 40px; justify-items: center; padding-top: 48px; } .commande-tete .marque { justify-content: center; } .etapes { display: flex; justify-content: center; } .etapes li { display: flex; align-items: center; gap: 10px; } .etapes li::after { content: ""; width: 64px; height: 1px; background: var(--doux-20); margin: 0 8px; } .etapes li:last-child::after { display: none; } .etapes li.faite::after { background: var(--accent); } .etape-carre { width: 24px; height: 24px; border: 1px solid var(--doux-20); display: grid; place-items: center; font-size: 0.6rem; color: var(--doux-40); } .etape-carre svg { width: 12px; height: 12px; color: var(--fond); } .etapes li.courante .etape-carre { border-color: var(--accent); color: var(--accent); } .etapes li.faite .etape-carre { background: var(--accent); border-color: var(--accent); } .etape-nom { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--doux-40); white-space: nowrap; } .etapes li.courante .etape-nom, .etapes li.faite .etape-nom { color: var(--encre); } .commander, .paiement { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; } .commander-form { display: grid; gap: 48px; } .bloc-form { display: grid; gap: 28px; } .bloc-form .titre-bloc { font-size: 1.8rem; } .champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .champs-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; } .invite { display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--accent-20); background: var(--fond-2); } .invite-titre { font-size: 0.8rem; letter-spacing: 0.06em; } .invite-texte { font-size: 0.78rem; color: var(--doux-40); margin-top: 4px; } .modes-choix { display: grid; gap: 12px; } .mode-choix { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--doux-20); cursor: pointer; transition: border-color 300ms; } .mode-choix:has(input:checked) { border-color: var(--accent); } .mode-choix input { accent-color: var(--accent); margin-right: 8px; } .mode-choix-corps { font-size: 0.8rem; letter-spacing: 0.02em; display: flex; flex-direction: column; gap: 2px; flex: 1; } .mode-choix-corps b { font-weight: 400; letter-spacing: 0.06em; } .mode-choix-corps small { font-size: 0.78rem; color: var(--doux-40); } .mode-choix-prix { font-family: var(--serif); font-size: 1.1rem; color: var(--accent); } .adresse { display: grid; gap: 24px; } .retrait-note { font-size: 0.75rem; color: var(--doux-40); line-height: 1.7; } .recap { background: var(--fond-2); border: 1px solid var(--accent-15); padding: 32px; display: grid; gap: 12px; position: sticky; top: 24px; } .recap .etiquette { margin-bottom: 12px; letter-spacing: 0.14em; color: var(--accent); } .recap-lignes { display: grid; gap: 16px; } .recap-lignes li { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--doux-08); } .recap-lignes img { width: 56px; height: 72px; object-fit: cover; flex: none; } .recap-lignes li > span { display: grid; gap: 4px; flex: 1; } .recap-lignes b { font-family: var(--serif); font-weight: 400; font-size: 1rem; } .recap-lignes small { font-size: 0.74rem; color: var(--doux-40); letter-spacing: 0.02em; } .recap-ligne { display: flex; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--doux-40); padding-top: 4px; } .recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--doux-10); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--doux-60); } .recap-total b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--encre); } .recap-note { font-size: 0.6rem; color: var(--doux-30); letter-spacing: 0.02em; } .recap-services { display: grid; gap: 6px; font-size: 0.74rem; letter-spacing: 0.05em; color: var(--doux-40); padding-top: 8px; border-top: 1px solid var(--doux-08); } .recap-services li { display: flex; justify-content: space-between; gap: 12px; } .paiement-form { display: grid; gap: 28px; } .paiement-note { padding: 20px; background: var(--fond-2); border: 1px solid var(--accent-15); display: flex; gap: 16px; align-items: center; font-size: 0.8rem; color: var(--doux-50); line-height: 1.6; } .paiement-note svg { width: 14px; height: 14px; color: var(--accent); flex: none; } .paiement-boutons { display: flex; gap: 12px; flex-wrap: wrap; } .paiement-refus { font-size: 0.74rem; color: var(--doux-40); } .confirmation { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 0; display: grid; gap: 16px; justify-items: center; } .confirmation-icone { width: 56px; height: 56px; border: 1px solid var(--accent); display: grid; place-items: center; margin-bottom: 16px; } .confirmation-icone svg { width: 22px; height: 22px; color: var(--accent); } .confirmation-attente { border-style: dashed; animation: tourner 3s linear infinite; } @keyframes tourner { to { transform: rotate(360deg); } } .confirmation-ref { font-size: 0.78rem; color: var(--doux-40); letter-spacing: 0.06em; } .confirmation-texte { font-size: 0.8rem; color: var(--doux-60); line-height: 1.8; } .confirmation-boutons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; } .confirmation-rdv { padding: 40px 0 96px; } .merci-corps { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: 48px; padding-bottom: 96px; align-items: start; } .merci-suite { display: grid; gap: 22px; justify-items: start; } .ticket { position: relative; background: var(--fond-2); border: 1px solid var(--accent-15); padding: 32px; display: grid; gap: 14px; max-width: 420px; } .ticket-titre { font-size: 0.74rem; letter-spacing: 0.14em; text-align: center; line-height: 1.8; border-bottom: 1px solid var(--doux-10); padding-bottom: 12px; color: var(--accent); } .ticket-numero { text-align: center; font-size: 0.76rem; color: var(--doux-40); letter-spacing: 0.03em; } .ticket-numero b { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; color: var(--encre); display: block; margin-bottom: 4px; } .ticket-lignes-fixe li { grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: baseline; padding-bottom: 12px; } .ticket-qte { font-size: 0.76rem; color: var(--doux-40); } .ticket-lignes-fixe .ticket-nom { font-size: 1rem; margin: 0; } .ticket-lignes-fixe .ticket-nom small { display: block; font-family: var(--sans); font-style: normal; font-size: 0.74rem; color: var(--doux-40); margin-top: 2px; letter-spacing: 0.03em; } .ticket-lignes-fixe b { font-size: 0.8rem; font-weight: 400; } .ticket-grand-total { border-top: 1px solid var(--doux-10); padding-top: 12px; margin-top: 4px; font-size: 0.8rem; letter-spacing: 0.06em; } .ticket-grand-total b { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; } .ticket-adresse { font-size: 0.78rem; color: var(--doux-40); line-height: 1.7; border-top: 1px solid var(--doux-10); padding-top: 12px; } .ticket-tva { font-size: 0.6rem; color: var(--doux-30); text-align: right; letter-spacing: 0.02em; } .tampon, .estampe { position: absolute; top: 16px; right: 16px; font-size: 0.6rem; letter-spacing: 0.03em; color: var(--accent); border: 1px solid var(--accent); padding: 2px 8px; } .tampon-paye, .estampe-paye { top: auto; bottom: 100px; right: 24px; background: var(--accent); color: var(--fond); transform: rotate(-6deg); animation: estamper 600ms var(--sortie) both; } @keyframes estamper { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } } .pas { display: grid; border-top: 1px solid var(--accent-15); width: 100%; } .pas li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--doux-08); font-size: 0.8rem; color: var(--doux-60); } .pas b { font-family: var(--serif); color: var(--accent); font-weight: 300; font-size: 1.2rem; } .frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; } .frise li { display: grid; gap: 6px; padding-top: 18px; position: relative; border-top: 1px solid var(--doux-20); } .frise li.faite { border-top-color: var(--accent); } .frise li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; background: var(--fond); border: 1px solid var(--doux-20); } .frise li.faite::before { background: var(--accent); border-color: var(--accent); } .frise b { color: var(--doux-40); font-size: 0.78rem; letter-spacing: 0.03em; font-weight: 400; } .frise span { font-size: 0.78rem; letter-spacing: 0.06em; } .frise small { font-size: 0.74rem; color: var(--doux-40); } .suivi-colis, .retour-note { font-size: 0.78rem; color: var(--doux-60); line-height: 1.7; } .retour { border-top: 1px solid var(--accent-15); padding-top: 16px; width: 100%; } .retour summary { cursor: pointer; list-style: none; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--accent); } .retour-form { display: grid; gap: 20px; padding-top: 20px; } .retour-note { background: var(--fond-2); padding: 16px 20px; } /* ---------- espace client, rendez-vous, silhouette, services, contact ---------- */ .espace-entree { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding-bottom: 96px; } .espace-entree-texte { display: grid; gap: 28px; } .espace-entree-texte > p { font-size: 0.85rem; color: var(--doux-60); line-height: 1.8; max-width: 52ch; } .espace-form { display: grid; gap: 24px; justify-items: start; max-width: 420px; } .espace-form .champ { width: 100%; } .espace-photo img { aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.8); } .espace { display: grid; grid-template-columns: 220px 1fr; gap: 64px; padding-bottom: 96px; align-items: start; } .espace-nav { display: grid; } .espace-nav a { display: block; font-size: 0.78rem; letter-spacing: 0.03em; padding: 14px 0; border-bottom: 1px solid var(--doux-08); color: var(--doux-40); transition: color 300ms; } .espace-nav a[aria-current="page"] { color: var(--accent); } .espace-quitter { border-bottom: 0 !important; margin-top: 24px; } .espace-corps { display: grid; gap: 16px; align-content: start; } .espace-corps > .etiquette { letter-spacing: 0.14em; margin-bottom: 16px; color: var(--accent); } .commande-carte { border: 1px solid var(--doux-10); background: var(--fond-2); padding: 24px; display: grid; gap: 20px; justify-items: start; } .commande-carte-ligne { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 24px; } .commande-ref { font-size: 0.76rem; color: var(--doux-40); letter-spacing: 0.06em; } .commande-date { font-size: 0.78rem; margin-top: 4px; } .commande-statut { font-size: 0.76rem; letter-spacing: 0.06em; color: var(--accent); margin-top: 8px; } .commande-carte-droite { text-align: right; font-size: 0.78rem; color: var(--doux-40); } .commande-total { font-family: var(--serif); font-size: 1.3rem; color: var(--encre); margin-top: 4px; } .adresses-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .adresse-carte { border: 1px solid var(--doux-10); padding: 24px; font-size: 0.78rem; line-height: 1.8; color: var(--doux-60); } .adresse-principale { border-color: var(--accent); } .adresse-ajout { border-style: dashed; display: grid; place-items: center; text-align: center; gap: 12px; color: var(--doux-40); } .adresse-ajout > span:first-child { font-size: 1.6rem; color: var(--doux-20); } .rdv-carte { border: 1px solid var(--doux-10); background: var(--fond-2); padding: 32px; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 8px; } .rdv-type { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; } .rdv-detail { font-size: 0.8rem; color: var(--doux-40); margin-top: 4px; } .badge-statut { display: inline-block; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--accent); border: 1px solid var(--accent); padding: 2px 8px; height: fit-content; } .badge, .badge-fixe { display: inline-block; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--fond); background: var(--accent); padding: 2px 8px; margin-bottom: 16px; } .vide { font-size: 0.8rem; color: var(--doux-40); line-height: 1.7; } .rdv { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; padding-bottom: 96px; align-items: start; } .rdv-form { display: grid; gap: 28px; justify-items: start; } .rdv-form .champs-2, .rdv-form .champ { width: 100%; } .rdv-piece { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--accent-20); background: var(--fond-2); width: 100%; } .rdv-piece img { width: 56px; height: 72px; object-fit: cover; } .rdv-piece > span { display: grid; gap: 2px; } .rdv-piece b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; } .rdv-piece small { font-size: 0.78rem; color: var(--doux-40); } .rdv-cote { display: grid; gap: 24px; } .rdv-cote img { aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.8); } .rdv-boutiques { display: grid; gap: 12px; } .rdv-boutiques li { display: grid; gap: 2px; font-size: 0.8rem; color: var(--doux-40); padding-bottom: 12px; border-bottom: 1px solid var(--doux-08); } .rdv-boutiques b { font-weight: 400; color: var(--encre); font-size: 0.78rem; } .services { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; padding-bottom: 96px; } .service-bloc { display: grid; gap: 16px; align-content: start; justify-items: start; } .service-bloc .titre-moyen { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; } .modes-liste { border-top: 1px solid var(--accent); width: 100%; } .modes-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--doux-08); font-size: 0.78rem; } .modes-liste b { font-weight: 400; letter-spacing: 0.04em; font-size: 0.78rem; } .modes-liste small { grid-column: 1 / -1; font-size: 0.78rem; color: var(--doux-40); } .faq { grid-column: 1 / -1; } .faq-item { border-top: 1px solid var(--doux-10); width: 100%; } .faq-item summary { cursor: pointer; padding: 16px 0; font-size: 0.78rem; letter-spacing: 0.06em; list-style: none; display: flex; justify-content: space-between; gap: 20px; } .faq-item summary::after { content: "+"; color: var(--accent); } .faq-item[open] summary::after { content: "−"; } .faq-item p { padding-bottom: 18px; color: var(--doux-60); font-size: 0.8rem; line-height: 1.8; max-width: 70ch; } .accordeons { border-bottom: 1px solid var(--doux-10); } .accordeons details { border-top: 1px solid var(--doux-10); } .accordeons summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 0.78rem; letter-spacing: 0.03em; cursor: pointer; } .accordeons summary::after { content: "+"; color: var(--accent); } .accordeons details[open] summary::after { content: "−"; } .accordeon-corps { padding-bottom: 20px; font-size: 0.8rem; line-height: 1.8; color: var(--doux-60); } .guides { display: grid; gap: 40px; padding-bottom: 96px; } .guide-bloc { display: grid; gap: 14px; } .guide-bloc .titre-moyen { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; } .table-defile { overflow-x: auto; } .contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; padding-bottom: 96px; align-items: start; } .contact-cote { display: grid; gap: 14px; border-top: 1px solid var(--accent); padding-top: 20px; font-size: 0.8rem; line-height: 1.8; color: var(--doux-60); } .contact-boutiques li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--doux-08); } .contact-boutiques b { font-weight: 400; color: var(--encre); } .formulaire-bloc { display: grid; gap: 18px; } .formulaire-titre { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; } .formulaire-intro { color: var(--doux-60); font-size: 0.85rem; line-height: 1.8; max-width: 60ch; } .formulaire { display: grid; gap: 24px; } .formulaire-aide { font-size: 0.78rem; color: var(--doux-40); } .formulaire-merci { font-family: var(--serif); font-size: 1.8rem; } .formulaire-piege { position: absolute; left: -9999px; } .formulaire-actions { justify-self: start; } .formulaire-actions .bouton { background: var(--encre); color: var(--fond); } .mes-commandes { padding-bottom: 96px; max-width: 520px; } .marque .ed-vide { height: 24px; width: auto; min-width: 0; padding: 0 8px; font-size: 0.78rem; white-space: nowrap; } body.mode-edition .entete { position: sticky; } /* ---------- mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } .carte-photo { --tisse: 1 !important; clip-path: none !important; } .titre-ouverture .mot > span { transform: none !important; } } /* ---------- points de rupture ---------- */ @media (max-width: 1180px) { .salut { display: none; } .metier { grid-template-columns: repeat(3, 1fr); } .silhouettes { grid-template-columns: repeat(2, 1fr); } .pied-haut { grid-template-columns: 1fr 1fr 1fr; } .grille-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .navigation { display: none; } .burger { display: flex; } .produit, .passeport-accueil-grille, .miroir-accueil, .passeport-tete, .miroir, .histoire, .espace-entree, .espace, .rdv, .commander, .paiement, .panier-page, .merci-corps, .services, .contact, .une, .boutique-fiche, .adresses-grille, .carrieres, .atelier-galerie, .look-scene { grid-template-columns: 1fr; } .cabine, .produit-info, .miroir-cadre, .recap { position: static; } .nuancier, .articles-grille, .principes, .etapes-grille, .ateliers-grille, .grille-3 { grid-template-columns: 1fr 1fr; } .chiffres-grille { grid-template-columns: 1fr 1fr; } .rituel-choix-4 { grid-template-columns: 1fr 1fr; } .rituel-tailles { grid-template-columns: 1fr 1fr; } .metier { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; gap: 20px 12px; } .carte-grand { grid-column: span 2; } .noeud::before { display: none; } .fil { display: none; } .rapide { opacity: 1; transform: none; } .coeur { opacity: 1; } .barre-filtres { flex-wrap: wrap; } .pied-bas { flex-direction: column; align-items: flex-start; } .espace-nav { display: flex; flex-wrap: wrap; gap: 0 20px; } .espace-nav a { border-bottom: 0; } .etapes li::after { width: 24px; } .look-scene { flex-direction: column; } .look-panneau { width: 100%; border-left: 0; border-top: 1px solid var(--trait); } .look-panneau.ferme { width: 100%; height: 0; } .look-panneau-corps { min-width: 0; } .atelier-galerie { grid-template-rows: 300px 220px 220px; } .atelier-galerie-grande { grid-row: auto; } } @media (max-width: 600px) { .grille-2, .grille-3, .grille-4, .nuancier, .articles-grille, .ateliers-grille, .principes, .champs-2, .champs-3, .conseil-champs, .chiffres-grille, .pied-haut, .etapes-grille, .rituel-choix-2, .rituel-choix-4, .rituel-tailles, .silhouettes { grid-template-columns: 1fr; } .metier { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 16px 10px; } .carte-haut { grid-row: span 3; } .ouverture { min-height: 560px; } .titre-ouverture { font-size: 2.6rem; } .ouverture-etat { display: none; } .rapide { display: none; } .etapes { flex-wrap: wrap; gap: 12px; } .etapes li::after { display: none; } .frise { grid-template-columns: 1fr 1fr; } .conteneur-etroit { padding: 32px var(--marge); } .ticket-lignes-page li { grid-template-columns: 80px 1fr; } .ticket-lignes-page .ticket-photo { width: 80px; height: 110px; } .achat-boutons { flex-wrap: wrap; } .rituel-corps { padding: 24px 20px; } .article-carte { height: 280px; } }