/* ========================================================================== CHISOUR — Système éditorial -------------------------------------------------------------------------- Parti pris : une revue imprimée, pas une boutique en ligne générique. Le contenu (une terre, des artisanes, un miel) porte le récit ; la mise en page se contente de lui laisser de la place. • Fond papier crème, encre presque noire → contraste élevé, lecture longue • Cormorant Garamond en display : déliés fins, corps généreux, interlignage serré • Cinzel réservé au logotype et aux petites capitales (c'est la police du logo) • Inter pour le texte courant et l'interface : neutre, il laisse parler le serif • Un seul accent (le vert de la marque). L'or n'existe qu'en filets. • Pas de cartes à bordures : des filets, des blancs, de la typographie. ========================================================================== */ /* Les polices ne sont plus importées ici. Un `@import` place la page à la merci de Google : le navigateur télécharge styles.css, y découvre l'import, puis doit joindre fonts.googleapis.com avant de pouvoir peindre quoi que ce soit. Trois allers-retours en file indienne. Sur une connexion mobile lente — ou quand ce domaine est simplement injoignable — la page reste affichée sans aucun style : texte brut, logo à sa taille d'origine, rien à sa place. C'est ce que voyait le client sur son téléphone. Les pages chargent désormais les polices elles-mêmes, sans bloquer le rendu (voir le des fichiers HTML). Chaque famille déclarée plus bas possède une doublure système : si Google ne répond pas, le site s'affiche entièrement, simplement dans une autre fonte. */ /* -------------------------------------------------------------------------- 1. JETONS -------------------------------------------------------------------------- */ :root { /* Papier et encre */ --paper: #FBF8EF; --paper-warm: #F4EFE1; --paper-deep: #EBE4D2; --ink: #14180C; --ink-soft: #4A4E3C; --ink-faint: #86886F; /* Marque — relevée sur le logo officiel */ --green: #859737; --green-deep: #4E5A1C; /* contraste AA sur crème : utilisé pour liens et boutons */ --green-mist: #EEF1E1; --gold: #DAC857; --gold-deep: #A98F2B; /* Filets */ --rule: rgba(20, 24, 12, 0.13); --rule-strong: rgba(20, 24, 12, 0.28); --rule-gold: rgba(169, 143, 43, 0.45); --danger: #9B3016; /* Typographie */ --display: 'Cormorant Garamond', Georgia, serif; --label: 'Cinzel', Georgia, serif; --body: 'Inter', system-ui, -apple-system, sans-serif; --ar-disp: 'Aref Ruqaa', serif; --ar-body: 'Noto Kufi Arabic', sans-serif; /* Rythme — l'échelle est large exprès : le blanc fait le luxe */ --gutter: clamp(20px, 5vw, 64px); --maxw: 1240px; --measure: 68ch; --bay: clamp(72px, 11vw, 168px); /* respiration entre sections */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t: 0.45s var(--ease); --t-fast: 0.22s var(--ease); --z-header: 40; --z-drawer: 90; --z-toast: 120; /* --- Alias de compatibilité --------------------------------------------- Les pages portent encore des styles en ligne écrits avec l'ancienne nomenclature. On les fait pointer vers les nouveaux jetons plutôt que de les laisser tomber en panne silencieusement (une variable inconnue ne produit aucune erreur : la déclaration est simplement ignorée). */ --color-bg-body: var(--paper); --color-bg-overlay-1: var(--paper-warm); --color-bg-overlay-2: var(--paper-deep); --color-bg-overlay-3: var(--gold-deep); --color-text-primary: var(--ink); --color-text-muted: var(--ink-soft); --color-text-light: var(--paper); --color-accent-coral: var(--green-deep); --color-border-divider: var(--rule); --color-border-selected: var(--ink); --font-heading: var(--display); --font-body: var(--body); --font-nav: var(--label); } /* -------------------------------------------------------------------------- 2. RÉINITIALISATION -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { /* Fond papier semé du signe de la marque : une tuile de 460 px contenant deux marques en demi-décalage, chacune entièrement à l'intérieur de la tuile — aucune ne franchit un bord, la répétition est donc invisible. L'opacité (7 %) est cuite dans le PNG : le filigrane doit se deviner, jamais concurrencer le texte. */ background-color: var(--paper); background-image: url('assets/pattern-mark-2.png'); background-repeat: repeat; background-size: 460px auto; color: var(--ink); font-family: var(--body); font-size: 16px; /* jamais moins : lisibilité mobile */ font-weight: 300; line-height: 1.75; letter-spacing: 0.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } picture { display: contents; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } svg { flex-shrink: 0; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); } h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); } h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); } h4 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); } p { text-wrap: pretty; } ::selection { background: var(--green); color: var(--paper); } :focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; } /* -------------------------------------------------------------------------- 3. GABARIT -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container-narrow { max-width: 860px; } .section-padding { padding-block: var(--bay); } .section-tight { padding-block: calc(var(--bay) * 0.58); } /* Petites capitales : la signature graphique du site. On les emploie pour toutes les étiquettes — jamais pour du texte courant. */ .section-subtitle, .hero-subtitle, .pdp-category, .option-group-title, .footer-heading, .cat-count, .product-card-rating, .results-count, .chip, .nav-link, .announcement-bar, .brand-sub { font-family: var(--label); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1.5; } /* En-tête de section : étiquette, filet, titre, chapô */ .section-header { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 88px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .section-header .section-subtitle { color: var(--green-deep); position: relative; padding-bottom: 20px; } /* filet doré sous l'étiquette — le seul ornement du site */ .section-header .section-subtitle::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 1px; background: var(--rule-gold); } .section-header p { color: var(--ink-soft); font-size: 1.02rem; max-width: 60ch; } /* -------------------------------------------------------------------------- 4. BOUTONS — filets et capitales, aucun remplissage criard -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; /* cible tactile confortable */ padding: 14px 34px; border: 1px solid var(--ink); border-radius: 0; /* l'angle droit, comme un ours de revue */ background: transparent; color: var(--ink); font-family: var(--label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; text-align: center; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .btn:hover { background: var(--ink); color: var(--paper); } .btn-primary, .btn-accent { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); } .btn-primary:hover, .btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn-secondary { background: transparent; border-color: var(--rule-strong); } .btn-secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn-sm { min-height: 44px; padding: 11px 22px; font-size: 0.62rem; } .btn-block, .checkout-btn { width: 100%; } /* -------------------------------------------------------------------------- 5. BANDEAU D'ANNONCE -------------------------------------------------------------------------- */ .announcement-bar { background: var(--ink); color: var(--paper); text-align: center; padding: 11px var(--gutter); font-size: 0.6rem; letter-spacing: 0.24em; position: relative; z-index: calc(var(--z-header) + 1); } /* -------------------------------------------------------------------------- 6. EN-TÊTE -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: 22px; transition: background-color var(--t), border-color var(--t), padding var(--t), box-shadow var(--t), transform var(--t); } .site-header.header-scrolled { padding-block: 13px; } /* ---- En-tête posé sur le héros (accueil) ---- Il flotte au-dessus de l'image tant qu'on n'a pas défilé, puis se détache en barre pleine. `--announce-h` est mesuré par le script : la hauteur du bandeau d'annonce dépend de la langue et de la largeur, on ne peut pas la coder en dur. */ .site-header.header-over-hero { position: absolute; top: var(--announce-h, 40px); inset-inline: 0; background: transparent; border-bottom-color: transparent; padding-block: 26px; } .site-header.header-over-hero .nav-link, .site-header.header-over-hero .header-icon, .site-header.header-over-hero .brand-title-sabers, .site-header.header-over-hero .brand-name, .site-header.header-over-hero .mobile-menu-toggle, .site-header.header-over-hero .cart-count { color: var(--paper); } .site-header.header-over-hero .brand-tag-sabers, .site-header.header-over-hero .brand-sub { color: rgba(251, 248, 239, 0.68); } .site-header.header-over-hero .nav-link::after { background: var(--paper); } .site-header.header-over-hero .mark-light { display: block; } .site-header.header-over-hero .mark-dark { display: none; } .site-header.header-over-hero .lang-btn { color: rgba(251, 248, 239, 0.62); } .site-header.header-over-hero .lang-btn.is-active { color: var(--paper); } /* Au défilement : la barre se fixe et redevient papier, en glissant du haut */ .site-header.header-over-hero.header-scrolled { position: fixed; top: 0; background: var(--paper); border-bottom-color: var(--rule); box-shadow: 0 1px 24px rgba(20, 24, 12, 0.07); padding-block: 13px; } @keyframes headerDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } } .site-header.header-over-hero.header-scrolled .nav-link, .site-header.header-over-hero.header-scrolled .header-icon, .site-header.header-over-hero.header-scrolled .brand-title-sabers, .site-header.header-over-hero.header-scrolled .brand-name, .site-header.header-over-hero.header-scrolled .mobile-menu-toggle, .site-header.header-over-hero.header-scrolled .cart-count { color: var(--ink); } .site-header.header-over-hero.header-scrolled .nav-link { color: var(--ink-soft); } .site-header.header-over-hero.header-scrolled .nav-link:hover, .site-header.header-over-hero.header-scrolled .nav-link.is-active { color: var(--ink); } .site-header.header-over-hero.header-scrolled .brand-tag-sabers, .site-header.header-over-hero.header-scrolled .brand-sub { color: var(--ink-faint); } .site-header.header-over-hero.header-scrolled .nav-link::after { background: var(--ink); } .site-header.header-over-hero.header-scrolled .mark-light { display: none; } .site-header.header-over-hero.header-scrolled .mark-dark { display: block; } .site-header.header-over-hero.header-scrolled .lang-btn { color: var(--ink-faint); } .site-header.header-over-hero.header-scrolled .lang-btn.is-active { color: var(--ink); } .header-container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 28px; } .header-logo, .brand-lockup { display: flex; align-items: center; gap: 12px; } .header-logo img, .brand-lockup img { height: 40px; width: auto; transition: height var(--t); } .site-header.header-scrolled .header-logo img { height: 33px; } .mark-light { display: none; } /* -------------------------------------------------------------------------- Logo complet dans l'en-tête (avec l'écriture CHISOUR · كسرى) -------------------------------------------------------------------------- Le logo officiel est en portrait, plus haut que le simple sigle. Il est volontairement plus grand au-dessus du héros — première rencontre avec la marque — puis reprend une taille compacte dès que la page défile, ce qui dégage la barre de navigation. Le passage se fait sur `height`, déjà animé plus haut. */ .header-logo--full img { height: 52px; } .site-header.header-over-hero .header-logo--full img { height: 78px; } .site-header.header-over-hero.header-scrolled .header-logo--full img { height: 48px; } @media (max-width: 760px) { .header-logo--full img { height: 44px; } .site-header.header-over-hero .header-logo--full img { height: 58px; } .site-header.header-over-hero.header-scrolled .header-logo--full img { height: 42px; } } .brand-text-sabers, .brand-words { display: flex; flex-direction: column; line-height: 1; } .brand-title-sabers, .brand-name { font-family: var(--label); font-size: 1.16rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; } .brand-ar { font-family: var(--ar-disp); font-size: 0.78rem; color: var(--green); margin-bottom: 3px; } .brand-tag-sabers, .brand-sub { font-size: 0.54rem; letter-spacing: 0.24em; color: var(--ink-faint); margin-top: 5px; } .header-nav { display: flex; align-items: center; gap: 34px; } .nav-link { position: relative; padding-block: 6px; color: var(--ink-soft); font-size: 0.62rem; } .nav-link:hover, .nav-link.is-active { color: var(--ink); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ink); transition: width var(--t); } .nav-link:hover::after, .nav-link.is-active::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 18px; } .header-icon { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; transition: opacity var(--t-fast); } .header-icon:hover { opacity: 0.62; } .cart-count { font-family: var(--label); font-size: 0.66rem; font-weight: 600; } .cart-count[data-empty="true"] { opacity: 0.45; } .mobile-menu-toggle { display: none; cursor: pointer; min-height: 44px; align-items: center; } /* Bascule de langue */ .lang-switch { display: flex; align-items: center; gap: 2px; } .lang-btn { font-family: var(--label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; padding: 6px 8px; color: var(--ink-faint); cursor: pointer; transition: color var(--t-fast); } .lang-btn:hover { color: var(--ink); } .lang-btn.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; } .site-header.header-transparent:not(.header-scrolled) .lang-btn { color: rgba(251,248,239,0.6); } .site-header.header-transparent:not(.header-scrolled) .lang-btn.is-active { color: var(--paper); } /* -------------------------------------------------------------------------- 7. HÉROS — une couverture de magazine -------------------------------------------------------------------------- */ .hero-section { position: relative; min-height: min(94vh, 900px); display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; background: var(--ink); } .hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; z-index: -2; } @keyframes heroDrift { from { transform: scale(1.07); } to { transform: scale(1); } } /* Voile régulier : le texte est centré, l'image doit s'assombrir partout également — pas de dégradé latéral qui déséquilibrerait la composition. */ .hero-overlay { position: absolute; inset: 0; z-index: -1; background: radial-gradient(116% 74% at 50% 44%, rgba(14,17,8,0.70) 0%, rgba(14,17,8,0.52) 46%, rgba(14,17,8,0.32) 100%), linear-gradient(180deg, rgba(14,17,8,0.56) 0%, rgba(14,17,8,0.08) 26%, rgba(14,17,8,0.12) 68%, rgba(14,17,8,0.60) 100%); } .hero-content { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; padding: 120px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 26px; color: var(--paper); } .hero-subtitle { color: rgba(251, 248, 239, 0.82); font-size: 0.64rem; letter-spacing: 0.34em; } .hero-title { color: var(--paper); font-size: clamp(2.7rem, 7vw, 5.6rem); font-weight: 300; /* léger et large : le luxe est dans le délié */ line-height: 1.04; text-shadow: 0 2px 40px rgba(10, 13, 5, 0.4); } .hero-description { color: rgba(251, 248, 239, 0.9); font-size: 1.04rem; max-width: 56ch; text-shadow: 0 1px 20px rgba(10, 13, 5, 0.4); } .hero-content .btn { border-color: rgba(251,248,239,0.6); color: var(--paper); } .hero-content .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } .hero-content .btn-accent, .hero-content .btn-primary { background: var(--paper); border-color: var(--paper); color: var(--ink); } .hero-content .btn-accent:hover, .hero-content .btn-primary:hover { background: transparent; color: var(--paper); border-color: var(--paper); } /* -------------------------------------------------------------------------- 8. BANDEAU DÉFILANT — un ours de journal -------------------------------------------------------------------------- */ .ticker-container { background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: 20px; overflow: hidden; } .ticker-wrap { display: flex; width: 100%; } .ticker { display: flex; white-space: nowrap; gap: 68px; animation: tickerRun 46s linear infinite; } .ticker-item { font-family: var(--label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 68px; } .ticker-item::after { content: '✦'; color: var(--gold-deep); font-size: 0.56rem; } @keyframes tickerRun { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } /* -------------------------------------------------------------------------- 9. GRILLE DES GAMMES — index de revue, filets seulement -------------------------------------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); } .cat-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 40px 30px 34px; background: var(--paper); cursor: pointer; transition: background-color var(--t); } .cat-card:hover { background: var(--green-mist); } .cat-icon { color: var(--green-deep); transition: transform var(--t); } .cat-card:hover .cat-icon { transform: translateY(-3px); } .cat-icon svg { width: 30px; height: 30px; } .cat-name { font-family: var(--display); font-size: 1.4rem; line-height: 1.2; } .cat-count { color: var(--ink-faint); margin-top: auto; font-size: 0.58rem; } /* -------------------------------------------------------------------------- 10. PRODUITS — sans cadre : image, filet, typographie -------------------------------------------------------------------------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(20px, 2.6vw, 36px); } .product-card { position: relative; display: flex; flex-direction: column; } .product-card-img-wrap { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-warm); margin-bottom: 20px; } .product-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .product-card:hover .product-card-img-wrap img { transform: scale(1.045); } .product-card-badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; background: var(--paper); color: var(--ink); font-family: var(--label); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; } .product-card-info { display: flex; flex-direction: column; gap: 7px; } .product-card-rating { color: var(--ink-faint); font-size: 0.56rem; } /* porte la gamme */ .product-card-title { font-family: var(--display); font-size: 1.32rem; font-weight: 400; line-height: 1.24; } .product-card-title a:hover { color: var(--green-deep); } .product-card-price { font-family: var(--body); font-size: 0.92rem; font-weight: 400; color: var(--ink-soft); margin-top: 2px; } .product-card-price small { font-family: var(--label); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .product-card-btn { margin-top: 14px; align-self: flex-start; min-height: 44px; padding: 11px 24px; font-size: 0.6rem; background: transparent; border-color: var(--rule-strong); color: var(--ink); } .product-card-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Repli quand une photo manque */ .ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--paper-warm); } .ph svg { width: 34%; height: 34%; color: var(--green); opacity: 0.35; } /* -------------------------------------------------------------------------- 11. RÉCIT — grille asymétrique, lettrine, exergue -------------------------------------------------------------------------- */ .split-story-section { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(36px, 6vw, 96px); padding: var(--bay) var(--gutter); max-width: var(--maxw); margin-inline: auto; } .split-story-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .split-story-content { display: flex; flex-direction: column; gap: 20px; max-width: 56ch; } .split-story-content .section-subtitle { color: var(--green-deep); } .split-story-text { color: var(--ink-soft); font-size: 1.02rem; } /* Lettrine sur le premier paragraphe du récit */ .split-story-content .split-story-text:first-of-type::first-letter { font-family: var(--display); font-size: 3.6em; font-weight: 400; float: inline-start; line-height: 0.82; margin-inline-end: 0.1em; margin-block-start: 0.06em; color: var(--green-deep); } /* Exergue : le slogan de la marque, traité comme une citation de revue */ .banner-overlap { max-width: var(--maxw); margin-inline: auto; padding: clamp(52px, 7vw, 96px) var(--gutter); border-block: 1px solid var(--rule); display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: clamp(28px, 5vw, 72px); } .banner-overlap-info { display: flex; flex-direction: column; gap: 16px; } .banner-overlap-info h3 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); } .banner-overlap-info p { color: var(--ink-soft); max-width: 62ch; } /* Valeurs / témoignages : colonnes de revue séparées par des filets */ .reviews-carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); } .review-card { background: var(--paper); padding: 40px 30px; display: flex; flex-direction: column; gap: 16px; } .review-stars { color: var(--gold-deep); font-size: 0.8rem; letter-spacing: 0.2em; } .review-text { font-family: var(--display); font-size: 1.16rem; line-height: 1.45; color: var(--ink); } .review-author { font-family: var(--label); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: auto; } .review-verified { color: var(--green-deep); } /* -------------------------------------------------------------------------- 12. PAGE PRODUITS — recherche et filtres -------------------------------------------------------------------------- */ .shop-toolbar { border-bottom: 1px solid var(--rule); padding-block: 26px; } .toolbar-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .search-field { position: relative; flex: 1; min-width: 250px; } .search-field > svg { position: absolute; top: 50%; inset-inline-start: 2px; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none; } .search-input { width: 100%; min-height: 48px; padding: 12px 34px; border: none; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; font-family: var(--display); font-size: 1.22rem; transition: border-color var(--t-fast); } .search-input::placeholder { color: var(--ink-faint); font-family: var(--body); font-size: 0.92rem; } .search-input:focus { outline: none; border-bottom-color: var(--ink); } .search-clear { position: absolute; top: 50%; inset-inline-end: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: none; place-items: center; color: var(--ink-faint); cursor: pointer; } .search-clear.is-visible { display: grid; } .search-clear:hover { color: var(--ink); } .select-field { position: relative; } .select-field select { appearance: none; min-height: 48px; padding: 12px 34px 12px 4px; border: none; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; font-family: var(--label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; min-width: 210px; } .select-field select:focus { outline: none; border-bottom-color: var(--ink); } .select-field > svg { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); width: 13px; height: 13px; pointer-events: none; color: var(--ink-faint); } .chip-row { display: flex; gap: 26px; overflow-x: auto; padding-top: 22px; scrollbar-width: none; } .chip-row::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 6px 0; min-height: 44px; background: none; border: none; border-bottom: 1px solid transparent; color: var(--ink-faint); font-size: 0.58rem; cursor: pointer; white-space: nowrap; transition: color var(--t-fast), border-color var(--t-fast); } .chip:hover { color: var(--ink); } .chip.is-active { color: var(--ink); border-bottom-color: var(--ink); } .chip .n { opacity: 0.5; margin-inline-start: 6px; } .results-count { color: var(--ink-faint); margin-block: 34px 30px; font-size: 0.58rem; } .results-count b { color: var(--ink); font-weight: 600; } .empty-state { text-align: center; padding: 100px 20px; } .empty-state svg { width: 46px; height: 46px; color: var(--rule-strong); margin: 0 auto 22px; } .empty-state h3 { margin-bottom: 10px; } /* -------------------------------------------------------------------------- 13. FICHE PRODUIT -------------------------------------------------------------------------- */ .pdp-container { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(34px, 5.5vw, 88px); align-items: start; } .pdp-gallery { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 12px; } .pdp-gallery-main { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-warm); } .pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; } .pdp-gallery-thumbs { display: flex; gap: 12px; } .pdp-gallery-thumb { width: 84px; aspect-ratio: 1; overflow: hidden; cursor: pointer; opacity: 0.5; transition: opacity var(--t-fast); background: var(--paper-warm); } .pdp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .pdp-gallery-thumb:hover { opacity: 0.82; } .pdp-gallery-thumb.active { opacity: 1; outline: 1px solid var(--ink); outline-offset: -1px; } .pdp-details { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; } .pdp-category { color: var(--green-deep); } .pdp-title { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 400; line-height: 1.1; } .pdp-meta { font-family: var(--display); font-size: 1.1rem; color: var(--ink-faint); font-style: italic; } [dir="rtl"] .pdp-meta { font-style: normal; font-family: var(--body); } .pdp-price { font-family: var(--display); font-size: 1.9rem; color: var(--ink); padding-top: 16px; border-top: 1px solid var(--rule); margin-top: 6px; } .pdp-description { color: var(--ink-soft); font-size: 1rem; max-width: 56ch; } .pdp-options { margin-top: 12px; display: flex; flex-direction: column; gap: 13px; } .option-group-title { color: var(--ink-faint); font-size: 0.58rem; } .size-selectors { display: flex; gap: 10px; flex-wrap: wrap; } .size-btn { min-height: 46px; padding: 11px 22px; border: 1px solid var(--rule-strong); background: transparent; font-family: var(--label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; cursor: pointer; transition: all var(--t-fast); } .size-btn:hover { border-color: var(--ink); } .size-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .pdp-actions { display: flex; gap: 12px; align-items: stretch; margin-top: 18px; flex-wrap: wrap; } .qty-selector { display: flex; align-items: center; border: 1px solid var(--rule-strong); padding-inline: 4px; } .qty-btn { width: 40px; min-height: 46px; display: grid; place-items: center; font-size: 1rem; color: var(--ink-soft); cursor: pointer; transition: color var(--t-fast); } .qty-btn:hover { color: var(--ink); } .qty-val { min-width: 34px; text-align: center; font-size: 0.94rem; } .pdp-add-btn { flex: 1; min-width: 200px; } /* -------------------------------------------------------------------------- Barre d'achat mobile -------------------------------------------------------------------------- Réservée au téléphone : sur écran large le bouton principal reste atteignable sans elle. Masquée par défaut, révélée par la classe `is-visible` quand le bouton d'origine quitte l'écran. -------------------------------------------------------------------------- */ .pdp-buybar { display: none; } @media (max-width: 900px) { .pdp-buybar { display: flex; align-items: center; gap: 14px; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule-strong); transform: translateY(110%); transition: transform var(--t); } .pdp-buybar.is-visible { transform: translateY(0); } .pdp-buybar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pdp-buybar-name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdp-buybar-price { font-family: var(--display); font-size: 1.05rem; color: var(--green-deep); } .pdp-buybar-btn { min-height: 46px; padding-inline: 24px; flex-shrink: 0; } /* La barre couvrirait le bas de page : on lui réserve la place. */ body.has-buybar .site-footer { padding-bottom: 84px; } } @media (prefers-reduced-motion: reduce) { .pdp-buybar { transition: none; } } .pdp-accordions { margin-top: 34px; border-top: 1px solid var(--rule); } .accordion-item { border-bottom: 1px solid var(--rule); } .accordion-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; min-height: 48px; cursor: pointer; font-family: var(--label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; transition: color var(--t-fast); } .accordion-title:hover { color: var(--green-deep); } .accordion-icon { transition: transform var(--t); } .accordion-item.active .accordion-icon { transform: rotate(180deg); } .accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--t); } .accordion-content p { padding-bottom: 22px; color: var(--ink-soft); font-size: 0.96rem; max-width: 60ch; } /* -------------------------------------------------------------------------- 14. FORMULAIRES -------------------------------------------------------------------------- */ .form-container, .styled-form { max-width: 680px; } .form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; } .form-label { font-family: var(--label); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .form-input, .form-textarea, .form-group input, .form-group textarea, .form-group select { width: 100%; min-height: 48px; padding: 12px 2px; border: none; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; font-family: var(--body); font-size: 1rem; transition: border-color var(--t-fast); } .form-textarea, .form-group textarea { min-height: 130px; resize: vertical; line-height: 1.7; } .form-input:focus, .form-textarea:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-bottom-color: var(--ink); } /* -------------------------------------------------------------------------- 15. TIROIRS (panier, navigation mobile) -------------------------------------------------------------------------- */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(14, 17, 8, 0.42); z-index: calc(var(--z-drawer) - 1); opacity: 0; pointer-events: none; transition: opacity var(--t); } .drawer-backdrop.active { opacity: 1; pointer-events: all; } .cart-drawer { position: fixed; top: 0; inset-inline-end: 0; width: min(94vw, 430px); height: 100vh; height: 100dvh; background: var(--paper); z-index: var(--z-drawer); transform: translateX(102%); transition: transform var(--t); display: flex; flex-direction: column; } [dir="rtl"] .cart-drawer { transform: translateX(-102%); } .cart-drawer.active { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 26px var(--gutter); border-bottom: 1px solid var(--rule); } .cart-title { font-family: var(--display); font-size: 1.6rem; } .cart-close { font-size: 1.5rem; line-height: 1; min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); } .cart-close:hover { color: var(--ink); } .shipping-progress { padding: 16px var(--gutter); border-bottom: 1px solid var(--rule); background: var(--green-mist); } .shipping-progress-text { font-size: 0.78rem; margin-bottom: 9px; color: var(--ink-soft); } .shipping-bar-bg { height: 2px; background: var(--rule); overflow: hidden; } .shipping-bar-fill { height: 100%; background: var(--green-deep); width: 0; transition: width var(--t); } .cart-items { flex: 1; overflow-y: auto; padding: 22px var(--gutter); } .cart-item { display: flex; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); } .cart-item-img { width: 82px; aspect-ratio: 4/5; flex-shrink: 0; overflow: hidden; background: var(--paper-warm); } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .cart-item-name { font-family: var(--display); font-size: 1.06rem; line-height: 1.25; } .cart-item-price { font-size: 0.85rem; color: var(--ink-soft); } .cart-item-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .cart-item-remove { font-size: 0.56rem; font-family: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); min-height: 44px; cursor: pointer; } .cart-item-remove:hover { color: var(--danger); } .cart-empty-message { text-align: center; padding: 70px 20px; color: var(--ink-faint); } .cart-footer { padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); } .cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 1.32rem; margin-bottom: 8px; } .cart-summary-row.total { font-size: 1.5rem; padding-top: 14px; border-top: 1px solid var(--rule); } .cart-footer-notes { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 18px; } .mobile-nav-drawer { position: fixed; top: 0; inset-inline-start: 0; width: min(90vw, 380px); height: 100vh; height: 100dvh; background: var(--paper); z-index: var(--z-drawer); transform: translateX(-102%); transition: transform var(--t); display: flex; flex-direction: column; } /* `inset-inline-start` bascule déjà tout seul : en arabe le tiroir se place contre le bord droit sans qu'on ait à le dire. Seule la translation qui le met hors champ doit être retournée à la main — une transformation CSS ignore la direction d'écriture. La redéclarer avec `inset-inline-end` ramenait le tiroir à gauche, et le `translateX(+102%)` le poussait alors DANS l'écran : il restait affiché en permanence, impossible à fermer. */ [dir="rtl"] .mobile-nav-drawer { transform: translateX(102%); } .mobile-nav-drawer.active { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 24px var(--gutter); border-bottom: 1px solid var(--rule); } .mobile-nav-links { display: flex; flex-direction: column; padding: 12px var(--gutter); } .mobile-nav-link { padding: 19px 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-size: 1.55rem; min-height: 48px; } .mobile-nav-link:hover { color: var(--green-deep); } .mobile-nav-footer { margin-top: auto; padding: 24px var(--gutter); font-family: var(--label); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* -------------------------------------------------------------------------- 16. PIED DE PAGE -------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: rgba(251, 248, 239, 0.68); padding-block: clamp(60px, 8vw, 104px) 0; margin-top: var(--bay); } .site-footer .container { max-width: var(--maxw); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(30px, 4vw, 60px); padding-bottom: 60px; } .footer-col { display: flex; flex-direction: column; } .footer-col ul { display: flex; flex-direction: column; gap: 12px; } .footer-col li { font-size: 0.9rem; } .footer-col a { display: inline-block; min-height: 24px; } .footer-col a:hover { color: var(--gold); } .footer-logo { height: 54px; width: auto; margin-bottom: 20px; } .footer-desc { font-size: 0.9rem; max-width: 32ch; line-height: 1.8; } .footer-heading { color: var(--paper); margin-bottom: 20px; font-size: 0.58rem; } .footer-links { display: flex; flex-direction: column; gap: 12px; } .footer-link { font-size: 0.9rem; display: inline-block; min-height: 24px; } .footer-link:hover { color: var(--gold); } .footer-newsletter-text { font-size: 0.9rem; line-height: 1.8; } .footer-bottom { border-top: 1px solid rgba(251, 248, 239, 0.13); padding-block: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; } .footer-bottom-links { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--gold); } [dir="rtl"] .footer-bottom-links { font-style: normal; font-family: var(--ar-disp); } /* -------------------------------------------------------------------------- 17. NOTIFICATION -------------------------------------------------------------------------- */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 160%); z-index: var(--z-toast); display: flex; align-items: center; gap: 11px; padding: 15px 26px; background: var(--ink); color: var(--paper); font-size: 0.85rem; transition: transform var(--t); max-width: 92vw; } .toast.is-visible { transform: translate(-50%, 0); } .toast svg { width: 16px; height: 16px; color: var(--gold); } /* -------------------------------------------------------------------------- 18. APPARITIONS AU DÉFILEMENT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } .ticker { animation: none; } } /* -------------------------------------------------------------------------- 19. ARABE / RTL -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Bascule de langue -------------------------------------------------------------------------- Deux caractères seulement : la langue courante puis l'autre, à la manière des sites institutionnels tunisiens. Pas de drapeau — l'arabe et le français ne sont pas des pays ici, mais deux lectures du même site. -------------------------------------------------------------------------- */ .lang-toggle { display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding-inline: 10px; background: none; border: none; cursor: pointer; color: inherit; font-family: var(--label); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; } .lang-toggle .lang-cur { color: inherit; } .lang-toggle .lang-sep { opacity: 0.35; } .lang-toggle .lang-alt { opacity: 0.55; transition: opacity var(--t-fast); } .lang-toggle:hover .lang-alt { opacity: 1; } /* Le glyphe arabe est plus petit à taille égale : on le remonte d'un cran. */ .lang-toggle .lang-cur:not(:empty), .lang-toggle .lang-alt:not(:empty) { font-size: 1em; } [lang="ar"] .lang-toggle { font-family: var(--ar-body); } .lang-toggle-mobile { text-align: start; width: 100%; background: none; border: none; cursor: pointer; } [dir="rtl"] { direction: rtl; } [dir="rtl"] body, [dir="rtl"] .nav-link, [dir="rtl"] .btn, [dir="rtl"] .chip, [dir="rtl"] .section-subtitle, [dir="rtl"] .hero-subtitle, [dir="rtl"] .pdp-category, [dir="rtl"] .option-group-title, [dir="rtl"] .footer-heading, [dir="rtl"] .cat-count, [dir="rtl"] .product-card-rating, [dir="rtl"] .results-count, [dir="rtl"] .accordion-title, [dir="rtl"] .form-label, [dir="rtl"] .announcement-bar, [dir="rtl"] .ticker-item { font-family: var(--ar-body); letter-spacing: 0; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .hero-title, [dir="rtl"] .cat-name, [dir="rtl"] .product-card-title, [dir="rtl"] .cart-item-name, [dir="rtl"] .pdp-title, [dir="rtl"] .review-text, [dir="rtl"] .cart-title, [dir="rtl"] .mobile-nav-link, [dir="rtl"] .pdp-price { font-family: var(--ar-disp); line-height: 1.55; letter-spacing: 0; } [dir="rtl"] .brand-title-sabers, [dir="rtl"] .brand-name { font-family: var(--label); } [dir="rtl"] .hero-title { font-size: clamp(2.1rem, 5vw, 4rem); } /* La lettrine ne se prête pas à l'écriture arabe : on la neutralise. */ [dir="rtl"] .split-story-content .split-story-text:first-of-type::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; line-height: inherit; } [dir="rtl"] .ticker { animation-direction: reverse; } /* -------------------------------------------------------------------------- 20. ADAPTATIF -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } .banner-overlap { grid-template-columns: 1fr; } } @media (max-width: 940px) { .header-nav { display: none; } .mobile-menu-toggle { display: inline-flex; } .pdp-container { grid-template-columns: 1fr; } .pdp-gallery { position: static; } .split-story-section { grid-template-columns: 1fr; } .split-story-img { order: -1; } .split-story-img img { aspect-ratio: 3/2; } } @media (max-width: 620px) { .hero-content { padding-block: 92px; gap: 20px; } .hero-content .btn { width: 100%; } .hero-content > div { display: flex; flex-direction: column; gap: 12px; width: 100%; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } .product-card-title { font-size: 1.06rem; } .product-card-btn { width: 100%; } .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat-card { padding: 28px 20px; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .footer-bottom { justify-content: center; text-align: center; } /* Au doigt, une ligne de 21 px se rate une fois sur deux. On étire la zone tactile sans écarter visuellement les liens : le padding porte la hauteur à 44 px, le `gap` réduit d'autant compense pour garder le même rythme. */ .footer-col ul, .footer-links { gap: 0; } .footer-col a, .footer-link { min-height: 44px; display: flex; align-items: center; } .pdp-actions { flex-direction: column; } .pdp-add-btn { width: 100%; } .select-field, .select-field select { width: 100%; } .chip-row { gap: 20px; } } @media print { .site-header, .announcement-bar, .ticker-container, .site-footer, .cart-drawer, .drawer-backdrop, .mobile-nav-drawer, .shop-toolbar, .toast { display: none !important; } } /* ========================================================================== RYTHME DES SURFACES -------------------------------------------------------------------------- Les animations (empilement au défilement, parallaxe, apparitions, filet de progression) ont été retirées à la demande du client. Ne subsiste ici que ce qui relève de la mise en page : l'alternance des fonds et l'aplat vert du récit du miel. Les retours au survol restent, mais en simple changement de couleur — c'est un repère d'interaction, pas un effet. ========================================================================== */ /* Alternance des fonds, posée par le script (voir initSurfaceRhythm). */ .section-padding { background: transparent; } .section-padding.surface-warm { background: rgba(244, 239, 225, 0.72); } .split-story-section { background: transparent; } /* Le seul aplat de couleur du site : le récit du miel de Kesra. */ .banner-overlap { background: var(--green-deep); color: var(--paper); border: none; padding-inline: clamp(28px, 5vw, 76px); position: relative; overflow: hidden; } .banner-overlap::after { /* filigrane du signe de marque, très discret */ content: ""; position: absolute; inset-block: -30%; inset-inline-end: -4%; width: 380px; background: url('assets/chisour-mark-cream.png') center/contain no-repeat; opacity: 0.07; pointer-events: none; } .banner-overlap-info h3 { color: var(--paper); } .banner-overlap-info p { color: rgba(251, 248, 239, 0.82); } .banner-overlap .section-subtitle { color: var(--gold); } .banner-overlap .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); } .banner-overlap .btn:hover { background: transparent; color: var(--paper); border-color: var(--paper); } /* ========================================================================== CORRECTIFS MOBILE ========================================================================== */ @media (max-width: 620px) { /* Le bandeau d'annonce tenait sur trois lignes (65 px de haut) : on ne garde que le message essentiel et on resserre l'interlettrage. */ .ann-more { display: none; } .announcement-bar { font-size: 0.58rem; letter-spacing: 0.14em; padding: 9px 16px; white-space: nowrap; } /* Lettrine plus mesurée dans une colonne étroite */ .split-story-content .split-story-text:first-of-type::first-letter { font-size: 2.8em; } /* Le héros gagne un peu d'air une fois le bandeau réduit */ .hero-content { padding-block: 84px; } /* Vignettes de galerie : trois par ligne sans déborder */ .pdp-gallery-thumb { width: 68px; } /* Le tiroir occupe toute la largeur, plus confortable au pouce */ .cart-drawer, .mobile-nav-drawer { width: 100%; } } /* ========================================================================== RUBAN DES VALEURS -------------------------------------------------------------------------- Défilement continu et sans arrêt. La piste contient la liste en double et se translate de la largeur d'un jeu (--loop-distance) : au rebouclage, le second jeu se trouve exactement là où était le premier, la jointure est donc invisible. La largeur d'une carte (--card-w) est posée par le script : la piste est en `max-content`, un pourcentage s'y rapporterait à elle-même. ========================================================================== */ .vcar { --per-view: 3; --gap: 1px; position: relative; } .vcar-viewport { overflow: hidden; border-block: 1px solid var(--rule); /* le ruban s'efface doucement sur les bords plutôt que d'être tranché net */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .vcar-track { display: flex; width: max-content; gap: var(--gap); background: var(--rule); list-style: none; margin: 0; padding: 0; animation: vcarRun linear infinite; will-change: transform; } @keyframes vcarRun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--loop-distance, 50%)), 0, 0); } } /* En lecture de droite à gauche, le ruban part dans l'autre sens. */ [dir="rtl"] .vcar-track { animation-direction: reverse; } .vcar-slide { flex: 0 0 var(--card-w, 320px); min-width: 0; background: var(--paper); display: flex; } .vcar-slide .review-card { flex: 1; min-height: 100%; } @media (max-width: 900px) { .vcar { --per-view: 2; } } @media (max-width: 620px) { .vcar { --per-view: 1; } } /* Mouvement réduit : le ruban s'immobilise. Les cinq valeurs restent lisibles côte à côte, le doublon est simplement masqué. */ @media (prefers-reduced-motion: reduce) { .vcar-track { animation: none; } .vcar-slide.is-clone { display: none; } .vcar-viewport { overflow-x: auto; } } /* ========================================================================== FOND FIXE — PAGE D'ACCUEIL ========================================================================== Le fond (papier crème semé du filigrane de la marque) reste ancré au cadre de la fenêtre pendant que le contenu défile par-dessus : la page donne l'impression de glisser sur une surface immobile. `class="home"` limite l'effet à l'accueil. `background-attachment: fixed` est ignoré par plusieurs navigateurs mobiles, qui repassent alors au défilement normal — dégradation silencieuse, jamais de casse. On le réserve d'ailleurs aux pointeurs fins (souris) : sur écran tactile l'effet est coûteux et peu perceptible. */ @media (hover: hover) and (pointer: fine) { body.home { background-attachment: fixed; } } /* ========================================================================== RÉVÉLATIONS À L'ENTRÉE — PAGE D'ACCUEIL ========================================================================== Un seul langage de mouvement, volontairement sobre : chaque section se pose en montant légèrement quand elle entre dans le champ. Les deux vraies listes — la sélection de best-sellers et les valeurs — reçoivent une cascade plafonnée pour que les éléments « arrivent » plutôt que de tous apparaître d'un bloc. Le héros, lui, reste immédiat : c'est la première image de la page, elle ne doit jamais se faire attendre. Robustesse : l'état masqué n'existe que sous `html.reveal-ready`, une classe posée par un script d'en-tête AVANT le premier rendu, et seulement si le JavaScript s'exécute, qu'IntersectionObserver existe et que le visiteur n'a pas demandé moins d'animation. Si l'une de ces conditions manque, rien n'est masqué : la page reste entièrement lisible. Ces règles sont sans effet sur les pages qui ne portent aucun attribut `data-reveal`. -------------------------------------------------------------------------- */ html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } /* Listes : les enfants montent en cascade ; le script pose le délai, plafonné. */ html.reveal-ready [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } html.reveal-ready [data-reveal-stagger].is-in > * { opacity: 1; transform: none; } /* Mouvement réduit : aucune translation, aucune attente — tout est là. */ @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal], html.reveal-ready [data-reveal].is-in, html.reveal-ready [data-reveal-stagger] > *, html.reveal-ready [data-reveal-stagger].is-in > * { opacity: 1; transform: none; transition: none; } } /* ========================================================================== PAGE CONTACT — coordonnées et carte ========================================================================== */ /* Formulaire à gauche, coordonnées à droite ; la carte passe dessous. */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .contact-info-col { position: sticky; top: 110px; } .contact-grid { display: grid; grid-template-columns: 1fr; /* empilées en colonne à côté du formulaire */ gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .contact-card { display: flex; flex-direction: column; gap: 5px; padding: 26px 24px; background: var(--paper); min-height: 44px; transition: background-color var(--t-fast); } a.contact-card:hover { background: var(--green-mist); } .contact-ico { color: var(--green-deep); margin-bottom: 6px; } .contact-ico svg { width: 22px; height: 22px; } .contact-label { font-family: var(--label); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } .contact-value { font-family: var(--display); font-size: 1.18rem; line-height: 1.25; } .contact-note { font-size: 0.86rem; color: var(--ink-soft); } .socials-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 44px; } .socials-label { font-family: var(--label); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-inline-end: 6px; } .social-link { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-strong); color: var(--ink); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .social-link:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .social-link svg { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- Retour après envoi d'une commande -------------------------------------------------------------------------- Remplace les anciennes fenêtres alert() : le client garde la référence sous les yeux au lieu de la voir disparaître avec la boîte de dialogue. -------------------------------------------------------------------------- */ .order-status { margin-top: 20px; padding: 20px 22px; border-inline-start: 3px solid var(--green-deep); background: var(--paper-warm); font-size: 0.95rem; line-height: 1.65; } .order-status strong { display: block; font-size: 1.05rem; margin-bottom: 6px; } .order-status a { border-bottom: 1px solid currentColor; } .order-status.is-error { border-color: var(--danger); color: var(--danger); } .order-status.is-warn { border-color: var(--gold); } .order-ref { display: block; margin: 10px 0 12px; font-family: var(--label); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; color: var(--green-deep); } /* La carte garde le ton du site : on désature légèrement l'embed Google. */ .map-frame { border: 1px solid var(--rule); height: clamp(300px, 46vw, 460px); overflow: hidden; background: var(--paper-warm); } .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.78) contrast(1.02); } .map-note { margin-top: 14px; text-align: center; font-family: var(--label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .map-note a { border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px; } .map-note a:hover { color: var(--green-deep); border-color: var(--green-deep); } @media (max-width: 900px) { /* Sous 900 px les deux colonnes se superposent : les coordonnées repassent en dessous du formulaire et redeviennent une grille. */ .contact-layout { grid-template-columns: 1fr; } .contact-info-col { position: static; } .contact-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } @media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { padding: 24px 20px; } .socials-row { flex-wrap: wrap; justify-content: center; } }