/* ========================================================================= ExploraCite - Design System v2 Marque tiree de ios/TownQuest/Utilities/TownQuestTheme.swift Principes d'interface : materiaux translucides, mouvement a ressort, typographie a tracking variable, respect des preferences systeme. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Tokens ------------------------------------------------------------------------- */ :root{ /* Marque (identique a l'app native) */ /* Un seul vert de marque : --forest habille toutes les surfaces sombres. --forest-deep ne sert que dans les degrades et les ombres, --forest-soft que pour l'etat survol du bouton vert. Aucune autre teinte verte. */ --forest:#1E3A0F; --forest-deep:#0F1A08; --forest-soft:#2E5218; --amber:#D4820A; --amber-bright:#F0A324; --amber-deep:#A8650A; --rust:#A63D2F; /* Minuit reste au catalogue de la marque mais n'habille plus aucune section du site : les bandeaux qui l'utilisaient sont passes au vert foret. */ --midnight:#0D1B2A; --parchment:#F2ECD8; --cream:#FAF8F2; --sand:#EFE7D2; --charcoal:#1C1C1E; /* Surfaces */ --bg:var(--cream); --bg-alt:var(--parchment); --surface:#ffffff; --surface-2:#FBF8F1; --surface-raised:rgba(255,255,255,.72); /* Texte */ --text:#241F17; --text-soft:#5C5344; --text-faint:#8A7F6B; --heading:var(--forest); --on-dark:var(--cream); --on-dark-soft:rgba(250,248,242,.76); /* La barre de navigation. Presque opaque : a 72 % elle laissait passer le vert des sections et la photo du hero, et le texte fonce n'avait plus de contraste. --nav-over sert quand la barre survole encore le hero. */ --nav-plate:rgba(252,250,244,.965); --nav-over:rgba(12,19,7,.82); --nav-line:rgba(30,58,15,.13); /* Bascules segmentees : la piste et le galet actif. Ecrits en jetons parce qu'un vert a 7 % disparait completement sur un fond sombre. */ --seg-track:rgba(30,58,15,.07); --seg-knob:var(--surface); /* Traits */ --line:rgba(30,58,15,.13); --line-strong:rgba(30,58,15,.26); --line-amber:rgba(212,130,10,.30); /* Type */ --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"SF Pro Text","Segoe UI",sans-serif; /* Forme */ --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px; /* Profondeur : plus la surface est grande, plus l'ombre est profonde */ --shadow-chip:0 1px 2px rgba(24,38,10,.06), 0 2px 6px rgba(24,38,10,.05); --shadow-card:0 2px 6px rgba(24,38,10,.05), 0 14px 30px -18px rgba(24,38,10,.35); --shadow-panel:0 4px 12px rgba(24,38,10,.07), 0 36px 70px -34px rgba(15,26,8,.48); --shadow-sheet:0 -8px 24px rgba(15,26,8,.10), 0 -40px 90px -30px rgba(15,26,8,.42); --shadow-amber:0 10px 26px -12px rgba(212,130,10,.62); /* Courbes (le mouvement gestuel passe par les ressorts en JS) */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); /* Gabarit */ --maxw:1180px; --nav-h:66px; --gutter:clamp(1.15rem,4vw,2.5rem); color-scheme:light; } /* Mode sombre : valeurs adaptatives de l'app (adaptiveBackground / adaptiveCard). Trois etats possibles. Sans attribut, on suit le systeme. Avec data-theme="dark" ou "light" sur , le choix de la personne l'emporte, dans les deux sens : c'est pour cela que la regle systeme est filtree par :not([data-theme="light"]). */ :root[data-theme="dark"]{ --bg:#141613; --bg-alt:#1C1C1E; --surface:#242427; --surface-2:#1F2020; --surface-raised:rgba(44,44,46,.72); --text:#EDE7DA; --text-soft:#B3AB9A; --text-faint:#867E6E; /* Les titres passent au parchemin, la couleur papier de l'app. Le vert pale ne fait pas partie de la marque et l'ambre reste ainsi le seul accent de la page. */ --heading:#F2ECD8; --parchment:#252622; --sand:#2A2B26; --cream:#EDE7DA; --line:rgba(237,231,218,.12); --line-strong:rgba(237,231,218,.22); --seg-track:rgba(250,248,242,.07); --seg-knob:#33332F; --nav-plate:rgba(23,25,21,.965); --nav-over:rgba(8,11,6,.84); --nav-line:rgba(239,234,220,.11); --shadow-card:0 2px 6px rgba(0,0,0,.35), 0 16px 34px -18px rgba(0,0,0,.7); --shadow-panel:0 4px 14px rgba(0,0,0,.4), 0 40px 80px -34px rgba(0,0,0,.8); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#141613; --bg-alt:#1C1C1E; --surface:#242427; --surface-2:#1F2020; --surface-raised:rgba(44,44,46,.72); --text:#EDE7DA; --text-soft:#B3AB9A; --text-faint:#867E6E; /* Les titres passent au parchemin, la couleur papier de l'app. Le vert pale ne fait pas partie de la marque et l'ambre reste ainsi le seul accent de la page. */ --heading:#F2ECD8; --parchment:#252622; --sand:#2A2B26; --cream:#EDE7DA; --line:rgba(237,231,218,.12); --line-strong:rgba(237,231,218,.22); --seg-track:rgba(250,248,242,.07); --seg-knob:#33332F; --nav-plate:rgba(23,25,21,.965); --nav-over:rgba(8,11,6,.84); --nav-line:rgba(239,234,220,.11); --shadow-card:0 2px 6px rgba(0,0,0,.35), 0 16px 34px -18px rgba(0,0,0,.7); --shadow-panel:0 4px 14px rgba(0,0,0,.4), 0 40px 80px -34px rgba(0,0,0,.8); color-scheme:dark; } } /* ------------------------------------------------------------------------- 2. Reinitialisation ------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 1rem); } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--sans); /* Le corps de texte reste proche de 0 en tracking : c'est le titre qui se resserre */ font-size:1.0625rem; line-height:1.62; letter-spacing:0; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-synthesis-weight:none; } img,picture,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent} ul,ol{list-style:none;padding:0} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px} ::selection{background:rgba(212,130,10,.28)} /* Bascule FR / EN */ body:not(.lang-en) [data-only="en"]{display:none} body.lang-en [data-only="fr"]{display:none} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ------------------------------------------------------------------------- 3. Typographie Le tracking suit la taille : negatif quand le texte grandit, legerement positif quand il devient petit. ------------------------------------------------------------------------- */ h1,h2,h3,h4{ font-family:var(--serif); font-weight:560; color:var(--heading); font-optical-sizing:auto; text-wrap:balance; } .display{ font-size:clamp(2.5rem,6.1vw,4.9rem); font-weight:540; line-height:1.015; letter-spacing:-.032em; } .h2,h2{ font-size:clamp(1.85rem,3.9vw,3rem); line-height:1.08; letter-spacing:-.024em; } .h3,h3{ font-size:clamp(1.15rem,1.75vw,1.45rem); line-height:1.24; letter-spacing:-.014em; } h4{font-size:1.02rem;line-height:1.35;letter-spacing:-.008em} .serif-i{font-style:italic} .lead{ font-size:clamp(1.06rem,1.35vw,1.24rem); line-height:1.58; letter-spacing:-.004em; color:var(--text-soft); } .small{font-size:.9375rem;line-height:1.55;color:var(--text-soft)} .micro{font-size:.8125rem;line-height:1.5;letter-spacing:.004em;color:var(--text-faint)} .eyebrow{ font-family:var(--sans); font-size:.735rem; font-weight:650; /* petit texte : tracking positif pour la lisibilite */ letter-spacing:.17em; text-transform:uppercase; color:var(--amber-deep); display:inline-flex;align-items:center;gap:.6rem; } .eyebrow::before{content:"";width:24px;height:1.5px;background:currentColor;flex:none} .eyebrow.center{justify-content:center} .eyebrow.center::after{content:"";width:24px;height:1.5px;background:currentColor;flex:none} .on-dark .eyebrow,.eyebrow.on-dark{color:var(--amber-bright)} /* Vibrance : sur materiau translucide, le texte gagne du poids et du tracking */ .vibrant{font-weight:560;letter-spacing:.008em} /* ------------------------------------------------------------------------- 4. Gabarit ------------------------------------------------------------------------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .container-wide{max-width:1340px} .container-narrow{max-width:780px} section{position:relative} .section{padding-block:clamp(4rem,9vw,7.5rem)} .section-sm{padding-block:clamp(2.75rem,5.5vw,4.5rem)} .center{text-align:center} .mx-auto{margin-inline:auto} .mt-1{margin-top:.85rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:clamp(2rem,4vw,3.25rem)} .stack>*+*{margin-top:1.25rem} .stack-sm>*+*{margin-top:.6rem} .measure{max-width:62ch} .grid{display:grid;gap:clamp(1rem,2vw,1.6rem)} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} .grid-2w{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} /* Trio serre : reste sur une ligne meme dans une demi-colonne. */ .grid-trio{grid-template-columns:repeat(3,1fr);gap:.65rem} .bg-parchment{background:var(--bg-alt)} .bg-forest{background:var(--forest);color:var(--on-dark)} .bg-forest h1,.bg-forest h2,.bg-forest h3,.bg-forest h4{color:var(--cream)} .bg-forest .lead,.bg-forest .small{color:var(--on-dark-soft)} .bg-forest .eyebrow{color:var(--amber-bright)} /* Trace topographique de fond : rappel des cartes du jeu */ .topo{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.34} .topo svg{position:absolute;width:min(900px,120%);height:auto} /* ------------------------------------------------------------------------- 5. Boutons - reponse immediate au pointer-down ------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-weight:600;font-size:1rem;letter-spacing:-.006em; padding:.9rem 1.55rem;border-radius:var(--r-pill); transition:background .22s var(--ease),color .22s var(--ease), box-shadow .28s var(--ease),border-color .22s var(--ease); position:relative;text-align:center; transform:translateZ(0); touch-action:manipulation; } .btn svg{width:1.05em;height:1.05em;flex:none} /* Le retour visuel se declenche a l'appui, pas au relachement. */ .btn:active{transform:scale(.968);transition:transform 90ms ease-out} .btn-lg{padding:1.05rem 1.9rem;font-size:1.06rem} .btn-sm{padding:.62rem 1.05rem;font-size:.9rem} .btn-primary{background:var(--amber);color:#2A1900;box-shadow:var(--shadow-amber)} .btn-primary:hover{background:var(--amber-bright);box-shadow:0 16px 32px -12px rgba(212,130,10,.72)} .btn-forest{background:var(--forest);color:var(--cream);box-shadow:0 12px 26px -14px rgba(30,58,15,.75)} .btn-forest:hover{background:var(--forest-soft)} .btn-ghost{border:1.5px solid var(--line-strong);color:var(--heading)} .btn-ghost:hover{border-color:var(--forest);background:rgba(30,58,15,.05)} .btn-light{ background:rgba(250,248,242,.14);color:var(--cream); border:1px solid rgba(250,248,242,.34); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); } .btn-light:hover{background:rgba(250,248,242,.24)} .link-arrow{ display:inline-flex;align-items:center;gap:.5rem; font-weight:600;color:var(--amber-deep);letter-spacing:-.006em; } .link-arrow svg{width:1.05em;height:1.05em;transition:transform .35s var(--ease-out)} .link-arrow:hover svg{transform:translateX(5px)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .link-arrow{color:var(--amber-bright)} } :root[data-theme="dark"] .link-arrow{color:var(--amber-bright)} /* ------------------------------------------------------------------------- 6. Chrome flottant - materiau translucide, le contenu passe dessous ------------------------------------------------------------------------- */ .header{ position:fixed;top:0;left:0;right:0;z-index:60; height:var(--nav-h); display:flex;align-items:center; transition:background .3s var(--ease),box-shadow .3s var(--ease); } .header::after{ /* Effet de bord de defilement plutot qu'un filet de 1px */ content:"";position:absolute;left:0;right:0;top:100%;height:26px; background:linear-gradient(to bottom,var(--bg),transparent); opacity:0;transition:opacity .3s var(--ease);pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,#000,transparent); mask-image:linear-gradient(to bottom,#000,transparent); } /* Trois etats, et aucun trou entre eux. Le defilement pose `scrolled` des 24 px, alors que `on-hero` tient jusqu'au bas du hero : entre les deux, la barre se retrouvait avec les deux classes, aucune regle de fond ne s'appliquait et le texte reprenait sa couleur foncee par-dessus la photo. C'est de la que venait le manque de lisibilite. */ /* 1. Pose tout en haut du hero : rien du tout, le voile de la photo porte deja le texte creme. */ .header.on-hero:not(.scrolled){background:transparent} /* 2. On defile mais on survole encore le hero : plaque sombre. Elle tient par-dessus n'importe quelle photo, ciel clair compris. */ .header.on-hero.scrolled{ background:var(--nav-over); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); border-bottom:1px solid rgba(250,248,242,.14); box-shadow:0 10px 30px -22px rgba(0,0,0,.75); } /* 3. Hero passe : plaque de surface, quasi opaque, texte normal. */ .header.scrolled:not(.on-hero){ background:var(--nav-plate); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border-bottom:1px solid var(--nav-line); box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(15,26,8,.5); } .header.scrolled:not(.on-hero)::after{opacity:1} .nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%} .brand{display:inline-flex;align-items:center;gap:.6rem;flex:none} .brand-mark{width:32px;height:32px} .brand-text{ font-family:var(--serif);font-size:1.24rem;font-weight:600; letter-spacing:-.022em;color:var(--heading);white-space:nowrap; } .brand-text b{color:var(--amber);font-weight:600} /* Tant que la barre survole le hero, quel que soit le defilement, elle est sur un fond sombre : tout son contenu passe en creme. */ .header.on-hero .brand-text{color:var(--cream)} .header.on-hero .nav-link{color:rgba(250,248,242,.88)} .header.on-hero .nav-link:hover, .header.on-hero .nav-link.active{color:var(--cream)} .header.on-hero .lang-toggle, .header.on-hero .theme-toggle{ background:rgba(250,248,242,.16);border-color:rgba(250,248,242,.3); } .header.on-hero .lang-toggle button, .header.on-hero .theme-toggle button{color:rgba(250,248,242,.82)} .header.on-hero .lang-toggle button.on, .header.on-hero .theme-toggle button.on{ background:rgba(250,248,242,.94);color:var(--forest); } .header.on-hero .burger span{background:var(--cream)} .nav-menu{display:flex;align-items:center;gap:1.75rem} .nav-links{display:flex;align-items:center;gap:1.5rem} .nav-link{ font-size:.945rem;font-weight:520;letter-spacing:-.004em;color:var(--text-soft); position:relative;padding-block:.35rem;transition:color .22s var(--ease); } .nav-link:hover,.nav-link.active{color:var(--heading)} .nav-link.active::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; border-radius:2px;background:var(--amber); } .nav-actions{display:flex;align-items:center;gap:.55rem} .lang-toggle,.theme-toggle{ display:inline-flex;padding:2px;border-radius:var(--r-pill); background:var(--seg-track);border:1px solid var(--line); } .lang-toggle button,.theme-toggle button{ font-size:.76rem;font-weight:680;letter-spacing:.05em; padding:.32rem .62rem;border-radius:var(--r-pill);color:var(--text-faint); transition:background .22s var(--ease),color .22s var(--ease); } .lang-toggle button.on,.theme-toggle button.on{ background:var(--seg-knob);color:var(--heading);box-shadow:var(--shadow-chip); } /* Bascule de theme : trois etats, systeme / clair / sombre. Meme materiau que la bascule de langue pour que l'en-tete ne se charge pas d'un nouveau motif. */ .theme-toggle button{ display:inline-flex;align-items:center;justify-content:center; width:30px;height:26px;padding:0; } .theme-toggle svg{width:15px;height:15px} .theme-toggle button.on svg{transform:scale(1.06)} .theme-toggle svg{transition:transform .3s cubic-bezier(.2,.9,.28,1.06)} @media (prefers-reduced-motion:reduce){.theme-toggle svg{transition:none}} .burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);position:relative;flex:none} .burger span{ position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--heading); transition:transform .34s var(--ease-out),opacity .2s var(--ease); } .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:25px} body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media (max-width:940px){ .burger{display:block} .nav-menu{ position:fixed;inset:var(--nav-h) 0 auto 0; flex-direction:column;align-items:stretch;gap:.35rem; padding:1.1rem var(--gutter) 1.6rem; /* Panneau plein cadre : materiau plus epais pour rester lisible par-dessus une photo. */ background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border-bottom:1px solid var(--line); box-shadow:var(--shadow-panel); /* Entre et sort par le meme chemin : depuis le haut. */ transform:translateY(-8px) scale(.985); opacity:0;visibility:hidden; transition:opacity .26s var(--ease),transform .34s var(--ease-out),visibility 0s .34s; } body.menu-open .nav-menu{ opacity:1;visibility:visible;transform:none;transition-delay:0s; } .nav-links{flex-direction:column;align-items:stretch;gap:.15rem} .nav-link{padding:.72rem .2rem;font-size:1.05rem;font-weight:560} .nav-link.active::after{display:none} .nav-actions{justify-content:space-between;margin-top:.9rem} /* Le panneau deroulant est une surface claire : son contenu reprend les couleurs normales, meme quand la barre survole le hero. */ .header.on-hero .nav-link{color:var(--text-soft)} .header.on-hero .nav-link:hover, .header.on-hero .nav-link.active{color:var(--heading)} .header.on-hero .lang-toggle, .header.on-hero .theme-toggle{ background:var(--seg-track);border-color:var(--line); } .header.on-hero .lang-toggle button, .header.on-hero .theme-toggle button{color:var(--text-faint)} .header.on-hero .lang-toggle button.on, .header.on-hero .theme-toggle button.on{ background:var(--seg-knob);color:var(--heading); } /* Dans le panneau mobile les deux bascules se rangent cote a cote a gauche, le bouton d'appel reste a droite. */ .nav-actions .lang-toggle{margin-right:auto} } /* ------------------------------------------------------------------------- 7. Hero ------------------------------------------------------------------------- */ .hero{ position:relative; min-height:min(94svh,860px); display:flex;align-items:flex-end; padding-top:calc(var(--nav-h) + clamp(3rem,7vw,6rem)); padding-bottom:clamp(3rem,7vw,5.5rem); overflow:hidden; background:var(--forest); } .hero-bg{position:absolute;inset:-8% 0 -14%;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;will-change:transform} .hero-scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(15,26,8,.62) 0%,rgba(15,26,8,.30) 34%,rgba(15,26,8,.88) 100%), radial-gradient(120% 90% at 12% 88%,rgba(15,26,8,.82),transparent 62%); } .hero .container{position:relative;z-index:2;width:100%} .hero-inner{max-width:min(100%,880px);color:var(--cream)} .hero .display{color:var(--cream)} .hero .display .accent{color:var(--amber-bright);font-style:italic} .hero .lead{color:rgba(250,248,242,.9);max-width:62ch;margin-top:1.35rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem} .hero-meta{ display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3.2rem); margin-top:clamp(2.4rem,5vw,3.6rem); padding-top:1.7rem;border-top:1px solid rgba(250,248,242,.2); } .hero-meta .num{ font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.35rem); font-weight:600;line-height:1;letter-spacing:-.028em;color:var(--amber-bright); } .hero-meta .lbl{ font-size:.79rem;letter-spacing:.055em;text-transform:uppercase; color:rgba(250,248,242,.66);margin-top:.42rem;font-weight:560; } .pill-note{ display:inline-flex;align-items:center;gap:.55rem; padding:.42rem .95rem .42rem .72rem;border-radius:var(--r-pill); font-size:.815rem;font-weight:560;letter-spacing:.012em; background:rgba(250,248,242,.14);color:var(--cream); border:1px solid rgba(250,248,242,.26); backdrop-filter:blur(14px) saturate(170%); -webkit-backdrop-filter:blur(14px) saturate(170%); } .pill-note .dot{ width:7px;height:7px;border-radius:50%;background:var(--amber-bright);flex:none; box-shadow:0 0 0 0 rgba(240,163,36,.6); animation:pulse 2.6s var(--ease-out) infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(240,163,36,.55)} 70%{box-shadow:0 0 0 9px rgba(240,163,36,0)} 100%{box-shadow:0 0 0 0 rgba(240,163,36,0)} } .pill-note.on-light{ background:rgba(30,58,15,.06);color:var(--heading);border-color:var(--line-strong); } .scroll-hint{ position:absolute;left:50%;bottom:1.4rem;z-index:3;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.5rem; font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(250,248,242,.6); } .scroll-hint .mouse{ width:22px;height:34px;border:1.5px solid rgba(250,248,242,.45);border-radius:12px;position:relative; } .scroll-hint .mouse::after{ content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px; background:rgba(250,248,242,.75);transform:translateX(-50%); animation:wheel 1.9s var(--ease-out) infinite; } @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,11px)}} @media (max-width:720px){ .scroll-hint{display:none} .hero{min-height:auto;padding-bottom:clamp(2.5rem,8vw,3.5rem)} .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem} } /* Hero secondaire (pages internes) */ .page-hero{ position:relative;background:var(--forest);color:var(--cream);overflow:hidden; padding-top:calc(var(--nav-h) + clamp(3.2rem,7vw,5.5rem)); padding-bottom:clamp(3rem,6vw,4.75rem); } .page-hero h1{color:var(--cream);font-size:clamp(2.15rem,5vw,3.8rem);line-height:1.04;letter-spacing:-.03em} .page-hero .lead{color:rgba(250,248,242,.86);margin-top:1.15rem} /* ------------------------------------------------------------------------- 8. Cartes et panneaux ------------------------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,2.4vw,2rem); box-shadow:var(--shadow-card); position:relative; transition:box-shadow .35s var(--ease),border-color .3s var(--ease); } .card:hover{box-shadow:var(--shadow-panel);border-color:var(--line-amber)} /* Carte posee sur le vert : le contenu doit basculer avec elle. */ .card.on-forest{background:var(--forest);border-color:transparent;color:var(--cream)} .card.on-forest h2,.card.on-forest h3,.card.on-forest h4{color:var(--cream)} .card.on-forest .small,.card.on-forest p{color:var(--on-dark-soft)} .card.on-forest .eyebrow{color:var(--amber-bright)} .card.on-forest .check-list li{color:rgba(250,248,242,.9)} .card.on-forest .check-list svg{color:var(--amber-bright)} .card.on-forest:hover{border-color:rgba(240,163,36,.4)} /* Carte parchemin : reprise de ParchmentCard.swift (papier + liseré ambre) */ .parchment-card{ background:var(--parchment); border:1px solid var(--line-amber); border-radius:var(--r); padding:clamp(1.3rem,2.2vw,1.8rem); box-shadow:0 8px 22px -14px rgba(212,130,10,.42); position:relative;overflow:hidden; } .parchment-card::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image: radial-gradient(circle at 18% 24%,rgba(0,0,0,.045) 0 1.1px,transparent 1.6px), radial-gradient(circle at 72% 61%,rgba(0,0,0,.04) 0 1.1px,transparent 1.6px), radial-gradient(circle at 41% 82%,rgba(0,0,0,.035) 0 1px,transparent 1.5px); background-size:74px 74px,96px 96px,58px 58px; } .parchment-card>*{position:relative} .feature .ic{ width:46px;height:46px;border-radius:14px; display:grid;place-items:center;margin-bottom:1.05rem; background:rgba(212,130,10,.12);color:var(--amber-deep); border:1px solid rgba(212,130,10,.2); } .feature .ic svg{width:23px;height:23px} .feature h3{margin-bottom:.5rem} .feature p{color:var(--text-soft);font-size:.97rem;line-height:1.58} .bg-forest .feature .ic{ background:rgba(240,163,36,.16);color:var(--amber-bright);border-color:rgba(240,163,36,.3); } .bg-forest .feature p{color:var(--on-dark-soft)} /* Panneau vitre : sur photo ou sur fond fonce */ .glass{ background:rgba(250,248,242,.1); border:1px solid rgba(250,248,242,.2); border-radius:var(--r-lg); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%); box-shadow:0 24px 60px -30px rgba(0,0,0,.7); color:var(--cream); } /* Bloc scinde texte / media */ .split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr} @media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split.reverse .split-content{order:2} } .frame{ border-radius:var(--r-xl);overflow:hidden;position:relative; box-shadow:var(--shadow-panel); } .frame img{width:100%;aspect-ratio:4/3;object-fit:cover} .split-media{position:relative} .badge-float{ position:absolute;padding:1rem 1.15rem;border-radius:var(--r); background:var(--surface-raised); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow-panel);max-width:230px; } .badge-float.br{right:-.6rem;bottom:-1.2rem} .badge-float.tl{left:-.6rem;top:-1.2rem} .badge-float .num{ display:block; font-family:var(--serif);font-size:1.75rem;font-weight:600; letter-spacing:-.03em;color:var(--amber-deep);line-height:1; } .badge-float .lbl{display:block;font-size:.78rem;line-height:1.4;color:var(--text-soft);margin-top:.4rem} @media (max-width:560px){.badge-float{position:static;margin-top:1rem;max-width:none}} /* ------------------------------------------------------------------------- 9. Comparaison (avant / apres) ------------------------------------------------------------------------- */ .versus{display:grid;gap:1.25rem;grid-template-columns:1fr} @media (min-width:880px){.versus{grid-template-columns:1fr 1fr;gap:0}} .versus-col{padding:clamp(1.6rem,3vw,2.5rem)} .versus-col.before{ background:var(--bg-alt); border-radius:var(--r-lg); } .versus-col.after{ background:var(--forest);color:var(--cream); border-radius:var(--r-lg); box-shadow:var(--shadow-panel); } @media (min-width:880px){ .versus-col.before{border-radius:var(--r-lg) 0 0 var(--r-lg);padding-right:clamp(2rem,4vw,3.2rem)} .versus-col.after{border-radius:0 var(--r-lg) var(--r-lg) 0;margin-left:-1px} } .versus-col h3{margin-bottom:1.4rem} .versus-col.after h3{color:var(--cream)} .versus-col.after h3 em{color:var(--amber-bright);font-style:italic} .versus-list li{ display:flex;gap:.85rem;align-items:flex-start; padding-block:.85rem;font-size:.97rem;line-height:1.55; } .versus-list li+li{border-top:1px solid var(--line)} .versus-col.after .versus-list li+li{border-top-color:rgba(250,248,242,.14)} .versus-list .mk{flex:none;width:22px;height:22px;margin-top:.1rem} /* Le jeton de titre suit le theme : vert foret en clair, parchemin en sombre. Ecrit en dur, la croix disparaissait sur fond sombre. */ .versus-col.before .mk{color:var(--heading);opacity:.45} .versus-col.after .mk{color:var(--amber)} .versus-col.before li{color:var(--text-soft)} .versus-col.after li{color:rgba(250,248,242,.9)} .versus-col.after li b{color:var(--amber-bright);font-weight:600;font-style:italic;font-family:var(--serif)} /* ------------------------------------------------------------------------- 10. Etapes / itineraire ------------------------------------------------------------------------- */ .route{position:relative;padding-left:clamp(3rem,6vw,4.5rem)} .route-line,.route-progress{ position:absolute;left:clamp(1.1rem,2.4vw,1.75rem);top:.6rem;bottom:.6rem;width:2px;border-radius:2px; } .route-line{background:var(--line-strong)} .route-progress{background:var(--amber);bottom:auto;height:0} .bg-forest .route-line{background:rgba(250,248,242,.22)} .step{display:flex;gap:1.35rem;padding-block:clamp(1rem,2vw,1.5rem);position:relative} .step-dot{ position:absolute;left:calc(clamp(1.1rem,2.4vw,1.75rem) - clamp(3rem,6vw,4.5rem) - 17px); top:calc(clamp(1rem,2vw,1.5rem) + .25rem); width:38px;height:38px;border-radius:50%;flex:none; display:grid;place-items:center; font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:0; background:var(--amber);color:#2A1900; box-shadow:0 6px 16px -8px rgba(212,130,10,.8); transition:transform .5s var(--ease-out); } .step h3{margin-bottom:.42rem} .step p{color:var(--text-soft);font-size:.97rem;max-width:56ch} .bg-forest .step h3{color:var(--cream)} .bg-forest .step p{color:var(--on-dark-soft)} /* ------------------------------------------------------------------------- 11. Tarifs ------------------------------------------------------------------------- */ .price-table{ width:100%;border-collapse:separate;border-spacing:0; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card); } .price-table th,.price-table td{padding:1.05rem 1.15rem;text-align:left;font-size:.97rem} /* Pas de fond ambre sur l'en-tete : la grille se lit mieux en typographie seule, et l'ambre reste reserve aux accents. */ .price-table thead th{ color:var(--heading);font-family:var(--serif);font-weight:600; font-size:1rem;letter-spacing:-.012em;line-height:1.25; border-bottom:1px solid var(--line-strong); } .price-table tbody th{ font-family:var(--serif);font-weight:600;color:var(--heading); font-size:1.02rem;letter-spacing:-.012em;line-height:1.3; } .price-table tbody tr+tr th,.price-table tbody tr+tr td{border-top:1px dashed var(--line-strong)} .price-table .amount{ font-family:var(--serif);font-size:1.18rem;font-weight:600; letter-spacing:-.02em;color:var(--text);white-space:nowrap; } .price-table .amount small{ display:block;font-family:var(--sans);font-size:.78rem;font-weight:500; letter-spacing:.01em;color:var(--text-faint);margin-top:.1rem; } @media (max-width:620px){ .price-table th,.price-table td{padding:.8rem .7rem;font-size:.9rem} .price-table .amount{font-size:1.02rem} } .price-note{ display:flex;gap:.9rem;align-items:flex-start; padding:1.15rem 1.3rem;border-radius:var(--r); background:rgba(30,58,15,.06);border:1px solid var(--line); } .price-note svg{width:22px;height:22px;flex:none;color:var(--amber-deep);margin-top:.1rem} .price-note p{font-size:.94rem;color:var(--text-soft);line-height:1.55} .plan{display:flex;flex-direction:column;gap:.75rem} .plan .price{ font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--heading); } .plan .price span{ font-family:var(--sans);font-size:.9rem;font-weight:520; letter-spacing:.01em;color:var(--text-faint); } .check-list li{display:flex;gap:.7rem;align-items:flex-start;padding-block:.42rem;font-size:.95rem;color:var(--text-soft)} .check-list svg{width:19px;height:19px;flex:none;color:var(--amber-deep);margin-top:.2rem} .bg-forest .check-list li{color:var(--on-dark-soft)} .bg-forest .check-list svg{color:var(--amber-bright)} /* ------------------------------------------------------------------------- 12. Cartes de parcours + carrousel a inertie ------------------------------------------------------------------------- */ /* C'est le rail qui decoupe, pas la piste. La piste est l'element translate : lui donner overflow:hidden faisait voyager la fenetre de decoupe avec son contenu, donc rien n'entrait jamais dans le champ et les cartes de droite etaient rognees puis disparaissaient completement en fin de course. */ .rail{position:relative;margin-inline:calc(var(--gutter) * -1);overflow:hidden} .rail-track{ display:flex;gap:1.15rem; padding-inline:var(--gutter);padding-block:.5rem 1.6rem; cursor:grab; will-change:transform; touch-action:pan-y; } .rail-track.dragging{cursor:grabbing} .rail-track>*{flex:0 0 clamp(258px,30vw,330px)} .rail-nav{display:flex;gap:.55rem;justify-content:flex-end;padding-inline:var(--gutter)} .rail-btn{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--heading); box-shadow:var(--shadow-chip); transition:background .22s var(--ease),border-color .22s var(--ease),opacity .22s var(--ease); } .rail-btn:hover{border-color:var(--forest)} .rail-btn:active{transform:scale(.93);transition:transform 90ms ease-out} .rail-btn[disabled]{opacity:.32;pointer-events:none} .rail-btn svg{width:19px;height:19px} .towns-grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,282px),1fr))} .town-card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--shadow-card); text-align:left;width:100%; transition:box-shadow .35s var(--ease),border-color .3s var(--ease); will-change:transform; } .town-card:hover{box-shadow:var(--shadow-panel);border-color:var(--line-amber)} .town-card.hide{display:none} .town-card .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)} .town-card .media img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease-out); } .town-card:hover .media img{transform:scale(1.045)} .town-card .media::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(15,26,8,.62),transparent 46%); } .town-card .on-media{ position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:2;color:var(--cream); } .town-card .on-media .region{ font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; color:rgba(250,248,242,.78);font-weight:600; } .town-card .on-media h3{ color:var(--cream);font-size:1.42rem;letter-spacing:-.022em;margin-top:.2rem; text-shadow:0 2px 14px rgba(15,26,8,.5); } .chip-diff{ position:absolute;top:.8rem;right:.8rem;z-index:2; display:inline-flex;align-items:center;gap:.45rem; padding:.32rem .7rem;border-radius:var(--r-pill); font-size:.74rem;font-weight:600;letter-spacing:.02em; background:rgba(15,26,8,.42);color:var(--cream); border:1px solid rgba(250,248,242,.26); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); } /* Etat de production : lisible d'un coup d'oeil sur la photo. */ .chip-status{ position:absolute;top:.8rem;left:.8rem;z-index:2; display:inline-flex;align-items:center;gap:.35rem; padding:.32rem .7rem .32rem .55rem;border-radius:var(--r-pill); font-size:.72rem;font-weight:650;letter-spacing:.02em; border:1px solid transparent; backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); } .chip-status svg{width:13px;height:13px;flex:none} .chip-status.ready{ background:rgba(212,130,10,.94);color:#2A1900;border-color:rgba(255,255,255,.35); box-shadow:0 4px 12px -4px rgba(212,130,10,.7); } .chip-status.production{ background:rgba(15,26,8,.46);color:rgba(250,248,242,.92);border-color:rgba(250,248,242,.26); } /* Dans la feuille de detail, la pastille reprend le flux des autres puces. */ .sheet-stats .chip-status{ position:static;backdrop-filter:none;-webkit-backdrop-filter:none; padding:.4rem .8rem .4rem .65rem;font-size:.78rem; } .sheet-stats .chip-status.production{background:rgba(30,58,15,.1);color:var(--text-soft);border-color:var(--line)} .diff-dots{display:inline-flex;gap:3px} .diff-dots i{width:5px;height:5px;border-radius:50%;background:rgba(250,248,242,.4)} .diff-dots i.on{background:var(--amber-bright)} .town-card .card-body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .town-card .story{ font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.34; letter-spacing:-.012em;color:var(--heading); } .narr-tag{ display:inline-flex;align-items:center;gap:.4rem; font-size:.79rem;color:var(--text-faint); } .narr-tag svg{width:15px;height:15px;flex:none} .town-card .meta{ display:flex;flex-wrap:wrap;gap:.85rem;margin-top:auto;padding-top:.75rem; border-top:1px solid var(--line); font-size:.815rem;color:var(--text-soft); } .town-card .meta span{display:inline-flex;align-items:center;gap:.32rem} .town-card .meta svg{width:14px;height:14px;color:var(--amber-deep);flex:none} .town-card-hit{ position:absolute;inset:0;z-index:3;border-radius:inherit; background:transparent; } .town-card-hit:focus-visible{outline:3px solid var(--amber);outline-offset:2px} /* Filtres */ .filters{display:flex;flex-wrap:wrap;gap:.5rem} .filter-btn{ padding:.52rem 1.05rem;border-radius:var(--r-pill); font-size:.885rem;font-weight:560;letter-spacing:-.004em; background:var(--surface);border:1px solid var(--line);color:var(--text-soft); transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease); } .filter-btn:hover{border-color:var(--line-strong)} .filter-btn:active{transform:scale(.96);transition:transform 90ms ease-out} .filter-btn.on{background:var(--forest);color:var(--cream);border-color:var(--forest)} /* ------------------------------------------------------------------------- 13. Feuille modale (drag-to-dismiss) ------------------------------------------------------------------------- */ .sheet-scrim{ position:fixed;inset:0;z-index:80; background:rgba(15,26,8,.5); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;visibility:hidden; transition:opacity .3s var(--ease),visibility 0s .3s; } .sheet-scrim.open{opacity:1;visibility:visible;transition-delay:0s} .sheet{ position:fixed;z-index:81;left:0;right:0;bottom:0; margin-inline:auto;max-width:640px; max-height:min(86svh,780px); background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-sheet); display:flex;flex-direction:column; transform:translateY(100%); visibility:hidden; will-change:transform; overscroll-behavior:contain; } .sheet.open{visibility:visible} .sheet-grip{ padding:.7rem 0 .35rem;display:grid;place-items:center;flex:none;cursor:grab; touch-action:none; } .sheet-grip::before{content:"";width:40px;height:4.5px;border-radius:3px;background:var(--line-strong)} .sheet-head{ position:relative;flex:none;padding:0 clamp(1.15rem,3vw,1.75rem) .9rem; } .sheet-close{ position:absolute;top:-.2rem;right:clamp(1.15rem,3vw,1.75rem); width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:rgba(30,58,15,.08);color:var(--heading); } .sheet-close:active{transform:scale(.92);transition:transform 90ms ease-out} .sheet-close svg{width:17px;height:17px} .sheet-body{ overflow-y:auto;padding:0 clamp(1.15rem,3vw,1.75rem) clamp(1.6rem,4vw,2.2rem); -webkit-overflow-scrolling:touch; /* Bord de defilement : le contenu s'estompe au lieu d'etre tranche net. */ -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent); } .sheet-hero{ border-radius:var(--r);overflow:hidden;margin-bottom:1.15rem;position:relative; } .sheet-hero img{width:100%;aspect-ratio:16/9;object-fit:cover} .sheet-stats{ display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1rem; } .sheet-stats span{ display:inline-flex;align-items:center;gap:.38rem; padding:.4rem .8rem;border-radius:var(--r-pill); background:rgba(30,58,15,.06);border:1px solid var(--line); font-size:.83rem;color:var(--text-soft); } .sheet-stats svg{width:15px;height:15px;color:var(--amber-deep)} @media (min-width:700px){ .sheet{border-radius:var(--r-xl);bottom:auto;top:50%;max-height:min(84svh,760px)} } /* ------------------------------------------------------------------------- 14. Bandeau de statistiques ------------------------------------------------------------------------- */ .stats-band{ display:grid;gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); text-align:center; } .stat .num{ font-family:var(--serif);font-size:clamp(2.1rem,4.2vw,3.1rem); font-weight:600;line-height:1;letter-spacing:-.032em;color:var(--amber-bright); } .stat .lbl{ font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;font-weight:560; color:rgba(250,248,242,.66);margin-top:.55rem; } /* ------------------------------------------------------------------------- 15. Frise de deploiement ------------------------------------------------------------------------- */ /* Une seule colonne, un seul fil : la frise se lit comme un chemin. */ .timeline{position:relative;display:grid;gap:0;max-width:720px} .timeline::before{ content:"";position:absolute;left:8px;top:1.9rem;bottom:1.9rem; width:2px;background:var(--line-strong); } .tl-item{ position:relative;display:grid;gap:.3rem; padding:1.15rem 0 1.15rem 2.6rem; } .tl-item::after{ content:"";position:absolute;left:2px;top:1.5rem; width:14px;height:14px;border-radius:50%; background:var(--bg-alt);border:2.5px solid var(--line-strong); } .tl-item.done::after{background:var(--amber);border-color:var(--amber)} .tl-item.now::after{ background:var(--forest);border-color:var(--amber); box-shadow:0 0 0 5px rgba(212,130,10,.18); } .tl-when{ font-family:var(--serif);font-size:1.12rem;font-weight:600; letter-spacing:-.016em;color:var(--heading); } .tl-what{font-size:.95rem;color:var(--text-soft);line-height:1.55} .tl-goals{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.45rem} .tl-goals span{ padding:.28rem .72rem;border-radius:var(--r-pill); font-size:.775rem;font-weight:600;letter-spacing:.012em; background:rgba(30,58,15,.08);color:var(--heading); border:1px solid var(--line); } /* ------------------------------------------------------------------------- 16. Citation ------------------------------------------------------------------------- */ .quote-block{max-width:760px;position:relative;padding-top:1.5rem} .quote-block .mark{ font-family:var(--serif);font-size:5rem;line-height:.6;color:var(--amber);opacity:.42; } .quote-block .q{ font-family:var(--serif);font-style:italic; font-size:clamp(1.3rem,2.6vw,1.95rem);line-height:1.36;letter-spacing:-.018em; color:var(--heading);margin-top:.5rem; } .quote-cite{ display:flex;align-items:center;gap:.7rem;margin-top:1.4rem; font-size:.86rem;letter-spacing:.045em;text-transform:uppercase; color:var(--text-faint);font-weight:560; } .quote-cite .dash{width:28px;height:1.5px;background:var(--amber);flex:none} /* ------------------------------------------------------------------------- 17. Appel a l'action / formulaires ------------------------------------------------------------------------- */ .cta-wrap{ position:relative;overflow:hidden;border-radius:var(--r-xl); background:var(--forest);color:var(--cream); padding:clamp(2.2rem,5vw,4rem); box-shadow:var(--shadow-panel); isolation:isolate; } .cta-wrap .media{position:absolute;inset:0;z-index:-2} .cta-wrap .media img{width:100%;height:100%;object-fit:cover;opacity:.34} .cta-wrap::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,rgba(15,26,8,.95) 22%,rgba(15,26,8,.6) 72%,rgba(15,26,8,.35)); } .cta-wrap h2{color:var(--cream)} .cta-wrap .lead{margin-top:1rem} .field-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem} .field-row input{ flex:1 1 240px;min-width:0; padding:.95rem 1.15rem;border-radius:var(--r-pill); background:rgba(250,248,242,.94);border:1px solid transparent; color:#241F17;font-size:1rem; transition:box-shadow .22s var(--ease); } .field-row input::placeholder{color:#8A7F6B} .field-row input:focus{outline:none;box-shadow:0 0 0 3px rgba(240,163,36,.6)} .form-note{font-size:.84rem;color:rgba(250,248,242,.72);margin-top:.8rem} .form-success{ display:none;align-items:center;gap:.6rem;margin-top:1.2rem; padding:.95rem 1.2rem;border-radius:var(--r); background:rgba(240,163,36,.16);border:1px solid rgba(240,163,36,.42); color:var(--cream);font-weight:560;font-size:.95rem; } .form-success.show{display:flex} .form-success svg{flex:none;color:var(--amber-bright)} .store-badges{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem} .store-badge{ display:inline-flex;align-items:center;gap:.65rem; padding:.6rem 1.05rem;border-radius:14px; background:rgba(250,248,242,.1);border:1px solid rgba(250,248,242,.24); color:var(--cream);font-size:.82rem;line-height:1.2; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); } .store-badge svg{width:22px;height:22px;flex:none} .store-badge .st{font-size:.7rem;color:rgba(250,248,242,.66)} .store-badge .bg-name{font-size:.98rem;font-weight:620;letter-spacing:-.012em} /* ------------------------------------------------------------------------- 18. FAQ (divulgation progressive) ------------------------------------------------------------------------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:1.25rem .4rem; display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem; font-family:var(--serif);font-size:1.09rem;font-weight:560; letter-spacing:-.014em;line-height:1.35;color:var(--heading); } .faq summary::-webkit-details-marker{display:none} .faq summary .plus{ flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:rgba(212,130,10,.13);color:var(--amber-deep);position:relative;margin-top:.1rem; transition:transform .38s var(--ease-out),background .25s var(--ease); } .faq summary .plus::before,.faq summary .plus::after{ content:"";position:absolute;background:currentColor;border-radius:2px; } .faq summary .plus::before{width:11px;height:1.8px} .faq summary .plus::after{width:1.8px;height:11px;transition:transform .38s var(--ease-out),opacity .25s var(--ease)} .faq details[open] summary .plus{transform:rotate(90deg)} .faq details[open] summary .plus::after{opacity:0} .faq .answer{padding:0 .4rem 1.4rem;color:var(--text-soft);font-size:.98rem;line-height:1.62;max-width:70ch} /* ------------------------------------------------------------------------- 19. Pied de page ------------------------------------------------------------------------- */ .footer{background:var(--forest);color:rgba(250,248,242,.72);padding-block:clamp(3rem,6vw,4.5rem) 2rem} .footer .brand-text{color:var(--cream)} .footer-grid{ display:grid;gap:clamp(1.8rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr)); } .footer h4{ color:var(--cream);font-family:var(--sans);font-size:.775rem; font-weight:680;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem; } .footer ul li+li{margin-top:.55rem} .footer a{font-size:.93rem;transition:color .22s var(--ease)} .footer ul a:hover{color:var(--amber-bright)} .footer .desc{font-size:.9rem;line-height:1.6;margin-top:1rem;max-width:34ch} .social{display:flex;gap:.55rem;margin-top:1.2rem} .social a{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:rgba(250,248,242,.08);border:1px solid rgba(250,248,242,.14); transition:background .22s var(--ease); } .social a:hover{background:rgba(250,248,242,.18)} .social svg{width:17px;height:17px} .footer-bottom{ display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between; margin-top:clamp(2.2rem,5vw,3.5rem);padding-top:1.5rem; border-top:1px solid rgba(250,248,242,.13); font-size:.83rem;color:rgba(250,248,242,.52); } /* ------------------------------------------------------------------------- 20. Revelations au defilement ------------------------------------------------------------------------- */ [data-reveal]{ opacity:0;transform:translateY(20px); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out); } [data-reveal="scale"]{transform:translateY(22px) scale(.982)} [data-reveal].in{opacity:1;transform:none} [data-reveal-delay="1"]{transition-delay:.07s} [data-reveal-delay="2"]{transition-delay:.14s} [data-reveal-delay="3"]{transition-delay:.21s} [data-reveal-delay="4"]{transition-delay:.28s} [data-reveal-delay="5"]{transition-delay:.35s} /* ------------------------------------------------------------------------- 21. Preferences systeme ------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.16s !important; scroll-behavior:auto !important; } /* On remplace le glissement par un simple fondu : pas de deplacement vestibulaire. */ [data-reveal]{transform:none !important;transition:opacity .22s ease} .hero-bg img{transform:none !important} .town-card:hover .media img{transform:none} .sheet{transition:opacity .2s ease} .pill-note .dot{animation:none} .scroll-hint .mouse::after{animation:none} } @media (prefers-reduced-transparency:reduce){ .header.scrolled:not(.on-hero),.nav-menu,.badge-float{ background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none; } .header.on-hero.scrolled{ background:rgba(12,19,7,.97);backdrop-filter:none;-webkit-backdrop-filter:none; } .glass{background:rgba(15,26,8,.94);backdrop-filter:none;-webkit-backdrop-filter:none} .btn-light,.pill-note,.chip-diff,.store-badge{ backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(15,26,8,.82); } .sheet-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(15,26,8,.72)} } @media (prefers-contrast:more){ :root{ --line:rgba(30,58,15,.42); --line-strong:rgba(30,58,15,.66); --text-soft:#3B3428; --text-faint:#4E4636; } .header.scrolled:not(.on-hero),.nav-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} .card,.town-card,.price-table,.filter-btn{border-width:2px} .btn-ghost{border-width:2px;border-color:var(--forest)} } @media print{ .header,.scroll-hint,.rail-nav,.sheet,.sheet-scrim,.social{display:none} .hero{min-height:auto;background:none;color:#000} body{background:#fff} } /* ------------------------------------------------------------------------- 22. Demo : repliques jouables des enigmes iOS Meme palette et memes gestes que l'app native. ------------------------------------------------------------------------- */ .demo-stage{ display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:start; grid-template-columns:1fr; } @media (min-width:940px){ .demo-stage{grid-template-columns:minmax(0,340px) minmax(0,1fr)} } /* Selecteur d'enigme */ .demo-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem} .demo-tab{ display:inline-flex;align-items:center;gap:.5rem; padding:.55rem 1rem;border-radius:var(--r-pill); font-size:.885rem;font-weight:560;letter-spacing:-.004em; background:var(--surface);border:1px solid var(--line);color:var(--text-soft); transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease); } .demo-tab svg{width:17px;height:17px;flex:none;opacity:.75} .demo-tab:hover{border-color:var(--line-strong)} .demo-tab.on{background:var(--forest);color:var(--cream);border-color:var(--forest)} .demo-tab.on svg{opacity:1} /* Cadre du telephone */ .phone{ width:min(340px,84vw);margin-inline:auto; aspect-ratio:9/19.3; border-radius:44px;padding:10px; background:linear-gradient(155deg,#3a3a3c,#1c1c1e 42%,#2c2c2e); box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.4), 0 40px 70px -30px rgba(15,26,8,.65); position:sticky;top:calc(var(--nav-h) + 1.5rem); } @media (max-width:939px){.phone{position:static}} .phone-screen{ position:relative;height:100%;border-radius:35px;overflow:hidden; background:var(--cream);display:flex;flex-direction:column; /* Le contenu de l'ecran ne doit jamais heriter du mode sombre du site : l'app se montre telle qu'elle est. */ color:#241F17; } .phone-island{ position:absolute;top:9px;left:50%;transform:translateX(-50%); width:86px;height:24px;border-radius:14px;background:#0b0b0c;z-index:5; } .phone-status{ flex:none;display:flex;align-items:center;justify-content:space-between; padding:.55rem 1.15rem .1rem;font-size:.72rem;font-weight:650;color:#241F17; letter-spacing:.01em; } .phone-status .right{display:flex;align-items:center;gap:.25rem} .phone-status svg{width:15px;height:11px} /* L'hote de l'ecran est un enfant direct du flex : sans flex:1 il prend la hauteur de son contenu et la barre d'onglets remonte au milieu du cadre des que l'enigme est courte. */ [data-demo-screen]{flex:1;min-height:0;display:flex;flex-direction:column} .phone-body{ flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:.5rem 1rem 1.1rem; scrollbar-width:none; } .phone-body::-webkit-scrollbar{display:none} .phone-nav{ position:relative; flex:none;display:flex;justify-content:space-around;align-items:center; padding:.5rem .6rem .85rem; cursor:default; background:rgba(242,236,216,.82); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%); border-top:1px solid rgba(30,58,15,.1); } .phone-nav span{ display:flex;flex-direction:column;align-items:center;gap:.18rem; font-size:.6rem;font-weight:620;color:rgba(36,31,23,.42);letter-spacing:.01em; } .phone-nav span.on{color:var(--amber-deep)} .phone-nav svg{width:19px;height:19px} /* La barre du bas est un decor. Plutot que de la griser, ce qui abimerait la maquette, elle repond a qui essaie de cliquer : une bulle apparait juste au-dessus et se retire seule. */ .phone-nav .nudge{ position:absolute;left:50%;bottom:calc(100% + .4rem); transform:translate(-50%,5px); padding:.32rem .68rem;border-radius:var(--r-pill); background:rgba(15,26,8,.94);color:#F7F3E8; font-size:.615rem;font-weight:640;letter-spacing:.005em;line-height:1.2; white-space:nowrap;pointer-events:none;opacity:0; box-shadow:0 6px 18px -8px rgba(0,0,0,.7); transition:opacity .16s ease-out,transform .3s cubic-bezier(.2,.9,.28,1.05); } .phone-nav.show-nudge .nudge{opacity:1;transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){ .phone-nav .nudge{transform:translate(-50%,0);transition:opacity .16s ease-out} } /* La colonne du telephone porte aussi sa legende : le cadre doit rester collant, donc la colonne s'etire sur toute la hauteur de la rangee. */ .phone-col{align-self:stretch} .phone-caption{ display:flex;gap:.55rem;align-items:flex-start; width:min(340px,84vw);margin:.85rem auto 0; font-size:.775rem;line-height:1.45;color:var(--text-faint); } .phone-caption svg{width:15px;height:15px;flex:none;margin-top:.16rem;color:var(--amber-deep)} /* Encadre d'avertissement, meme materiau que price-note mais reutilisable. */ .notice{ display:flex;gap:.85rem;align-items:flex-start; padding:1rem 1.15rem;border-radius:var(--r); background:rgba(30,58,15,.06);border:1px solid var(--line); } .notice svg{width:20px;height:20px;flex:none;color:var(--amber-deep);margin-top:.15rem} .notice p{font-size:.9rem;line-height:1.55;color:var(--text-soft)} /* Sur fond fonce l'encadre s'inverse, sinon il disparait dans le vert. */ .bg-forest .notice,.page-hero .notice{ background:rgba(250,248,242,.09);border-color:rgba(250,248,242,.24); } .bg-forest .notice p,.page-hero .notice p{ color:rgba(250,248,242,.86); } .bg-forest .notice svg,.page-hero .notice svg{ color:var(--amber-bright); } /* En-tete d'ecran d'enigme */ .pz-crumb{ display:flex;align-items:center;gap:.35rem;flex-wrap:wrap; font-size:.64rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase; line-height:1.35;color:rgba(36,31,23,.52);margin-bottom:.5rem; } .pz-crumb svg{width:12px;height:12px;flex:none;color:var(--amber-deep)} .pz-crumb b{color:var(--amber-deep);font-weight:650} .pz-title{ font-family:var(--serif);font-size:1.06rem;font-weight:620;line-height:1.25; letter-spacing:-.016em;color:var(--forest);margin-bottom:.5rem; } .pz-question{ font-size:.815rem;line-height:1.5;color:#4A4234; background:#F2ECD8;border:1px solid rgba(212,130,10,.28); border-radius:14px;padding:.7rem .85rem;margin-bottom:.9rem; } .pz-hint{ font-size:.78rem;line-height:1.5;color:#4A4234; background:rgba(212,130,10,.12);border:1px dashed rgba(212,130,10,.45); border-radius:12px;padding:.6rem .75rem;margin-top:.7rem; } .pz-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem} .pz-btn{ flex:1 1 auto;padding:.6rem .85rem;border-radius:var(--r-pill); font-size:.82rem;font-weight:620;letter-spacing:-.004em; border:1px solid transparent;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease); } .pz-btn:active{transform:scale(.96);transition:transform 90ms ease-out} .pz-btn[disabled]{opacity:.4;pointer-events:none} .pz-btn.primary{background:var(--amber);color:#2A1900} .pz-btn.primary:hover{background:var(--amber-bright)} .pz-btn.ghost{background:transparent;border-color:rgba(30,58,15,.24);color:var(--forest)} .pz-btn.ghost:hover{background:rgba(30,58,15,.06)} .pz-btn.danger{background:transparent;border-color:rgba(166,61,47,.4);color:var(--rust)} .pz-result{ margin-top:.9rem;padding:.85rem .9rem;border-radius:14px; background:rgba(30,58,15,.08);border:1px solid rgba(30,58,15,.18); } .pz-result .ok{ display:flex;align-items:center;gap:.45rem; font-family:var(--serif);font-size:.98rem;font-weight:620;color:var(--forest); letter-spacing:-.014em; } .pz-result .ok svg{width:17px;height:17px;flex:none;color:var(--amber-deep)} .pz-result p{font-size:.775rem;line-height:1.55;color:#4A4234;margin-top:.45rem} .pz-miss{ margin-top:.7rem;font-size:.78rem;font-weight:560;color:var(--rust); display:flex;align-items:center;gap:.4rem; } /* --- Cadenas a molettes --- */ .lock{ display:flex;gap:9px;justify-content:center; padding:14px 16px;border-radius:18px;margin:.2rem auto .1rem;width:max-content;max-width:100%; background:linear-gradient(180deg,#C29A47,#946E29 38%,#5A4014 62%,#946E29 88%,#C29A47); box-shadow:0 6px 16px rgba(0,0,0,.32), inset 0 0 0 2px rgba(90,64,20,.6), inset 0 0 22px rgba(0,0,0,.42); position:relative; transition:box-shadow .4s var(--ease); } .lock.open{box-shadow:0 0 0 3px var(--amber), 0 0 20px rgba(212,130,10,.75), 0 6px 16px rgba(0,0,0,.32)} .wheel{ position:relative;width:46px;height:132px;border-radius:9px;overflow:hidden; background:linear-gradient(90deg,#7E7D7C,#D2D1CF 26%,#FFFFFF 48%,#D2D1CF 72%,#7E7D7C); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 8px 12px -8px rgba(0,0,0,.65), inset 0 -8px 12px -8px rgba(0,0,0,.65); cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none; } .wheel.grabbing{cursor:grabbing} .wheel-strip{position:absolute;left:0;right:0;top:0;will-change:transform} .wheel-strip i{ display:flex;align-items:center;justify-content:center; height:44px;font-family:var(--serif);font-size:1.55rem;font-weight:700; font-style:normal;color:#2A2622; text-shadow:0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(0,0,0,.35); } .wheel::before,.wheel::after{ content:"";position:absolute;left:0;right:0;height:44px;z-index:2;pointer-events:none; } .wheel::before{top:0;background:linear-gradient(180deg,rgba(20,18,16,.62),rgba(20,18,16,.06))} .wheel::after{bottom:0;background:linear-gradient(0deg,rgba(20,18,16,.62),rgba(20,18,16,.06))} .wheel-slot{ position:absolute;left:0;right:0;top:44px;height:44px;z-index:3;pointer-events:none; border-top:1px solid rgba(0,0,0,.4);border-bottom:1px solid rgba(0,0,0,.4); box-shadow:0 0 10px rgba(0,0,0,.25) inset; } /* --- Boussole --- */ .compass-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:.3rem 0 .2rem} .compass{ position:relative;width:186px;height:186px;flex:none; touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none; } .compass.grabbing{cursor:grabbing} .compass svg{width:100%;height:100%;display:block} .compass-ring{position:absolute;inset:0;pointer-events:none} .compass-readout{ font-size:.78rem;font-weight:620;color:#4A4234;letter-spacing:.01em; display:flex;align-items:center;gap:.45rem; } .compass-readout b{font-family:var(--serif);font-size:1.02rem;color:var(--forest)} .compass-readout.locked b{color:var(--amber-deep)} /* --- Tuiles de lettres --- */ .tiles-answer{ min-height:52px;display:flex;flex-wrap:wrap;gap:6px;align-items:center; padding:8px;border-radius:12px;background:#fff; border:1px solid rgba(30,58,15,.14); } .tiles-answer .ph{font-size:1.1rem;font-weight:700;color:rgba(36,31,23,.28);padding-inline:.4rem} .tiles-bank{display:flex;flex-wrap:wrap;gap:7px;margin-top:.8rem} .tile{ width:34px;height:40px;border-radius:9px; font-family:var(--serif);font-size:1.06rem;font-weight:700; display:inline-flex;align-items:center;justify-content:center; background:#F2ECD8;color:var(--forest); border:1px solid rgba(212,130,10,.35); box-shadow:0 2px 4px rgba(26,42,10,.12); will-change:transform; } .tile.used{opacity:.24;pointer-events:none;box-shadow:none} .tile.placed{background:rgba(30,58,15,.14);border-color:rgba(30,58,15,.28)} .tile:active{transform:scale(.92);transition:transform 90ms ease-out} /* --- Avant / apres --- */ .tan-frame{ position:relative;border-radius:14px;overflow:hidden; border:1px solid rgba(30,58,15,.16);background:#cfe0ea; touch-action:manipulation;cursor:crosshair; } .tan-frame svg{display:block;width:100%;height:auto} .tan-layer{position:absolute;inset:0} .tan-mark{ position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%; border:2.5px solid var(--forest);background:rgba(30,58,15,.16); pointer-events:none;will-change:transform; } .tan-miss{ position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px; color:var(--rust);pointer-events:none; } .tan-slider{ display:flex;align-items:center;gap:.55rem;margin-top:.6rem; font-size:.68rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase; color:rgba(36,31,23,.55); } .tan-slider input{flex:1;min-width:0;accent-color:var(--amber);height:22px} .tan-count{ display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.55rem; font-size:.75rem;font-weight:620;color:#4A4234; } .tan-count b{ display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px; border-radius:var(--r-pill);background:var(--amber);color:#2A1900;font-size:.72rem; } /* Legende a cote du telephone */ .demo-note{border-left:2px solid var(--line-amber);padding-left:1.1rem} .demo-note h3{margin-bottom:.5rem} .demo-note .src{ display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem; font-size:.78rem;color:var(--text-faint); } .demo-note .src svg{width:15px;height:15px;color:var(--amber-deep)} @media (prefers-reduced-motion:reduce){ .tile:active,.pz-btn:active{transform:none} } /* Ligne de tarif negociee : conservee au cas ou les montants reviendraient, mais inutilisee tant que les six cellules portent l'etampe de lancement. */ .price-table .amount.negotiable{ font-style:italic;font-weight:560;color:var(--amber-deep);letter-spacing:-.01em; } /* ------------------------------------------------------------------------- 23. Demo : sac a outils et voile d'obstacle Reprend ToolbagView.swift et ObstacleOverlay.swift : aucune consigne n'est donnee, le joueur doit ouvrir le sac, prendre un outil en main et s'en servir comme il le ferait de l'objet reel. ------------------------------------------------------------------------- */ .obstacle{ position:relative;border-radius:16px;overflow:hidden; touch-action:none;user-select:none;-webkit-user-select:none; cursor:grab; } .obstacle.cleared{cursor:default} .obstacle-stage{position:relative} .obstacle-veil{ /* Un canvas est un element remplace : inset:0 ne suffit pas a le dimensionner, il garderait sa taille intrinseque de 300x150. */ position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block; transition:opacity .5s var(--ease); } .obstacle.cleared .obstacle-veil{opacity:0;pointer-events:none} .obstacle-msg{ position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:4; padding:.55rem .7rem;border-radius:11px; background:rgba(15,26,8,.72);color:rgba(250,248,242,.94); font-size:.74rem;line-height:1.4;font-weight:500; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:opacity .4s var(--ease); } .obstacle.cleared .obstacle-msg{opacity:0;pointer-events:none} .obstacle-whisper{ position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%); padding:.45rem .8rem;border-radius:var(--r-pill); background:rgba(15,26,8,.82);color:rgba(250,248,242,.9); font-size:.74rem;font-style:italic;white-space:nowrap; opacity:0;transition:opacity .3s var(--ease);pointer-events:none; } .obstacle-whisper.show{opacity:1} /* Outil tenu en main : il suit le doigt, comme dans l'app. */ .tool-hand{ position:absolute;z-index:6;width:74px;height:74px; margin:-37px 0 0 -37px;pointer-events:none; filter:drop-shadow(0 6px 10px rgba(15,26,8,.45)); opacity:0;transition:opacity .18s var(--ease); } .tool-hand.on{opacity:1} .obstacle-progress{ height:4px;border-radius:3px;background:rgba(30,58,15,.14); margin-top:.6rem;overflow:hidden; } .obstacle-progress i{ display:block;height:100%;width:0;border-radius:3px;background:var(--amber); transition:width .12s linear; } .bag-bar{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;flex-wrap:wrap} .bag-btn{ display:inline-flex;align-items:center;gap:.45rem; padding:.55rem .9rem;border-radius:var(--r-pill); font-size:.8rem;font-weight:620; background:var(--forest);color:var(--cream); } .bag-btn:active{transform:scale(.95);transition:transform 90ms ease-out} .bag-btn svg{width:16px;height:16px} /* Pastille « en main » : l'outil tenu doit se lire d'un coup d'oeil, c'est l'etat qui decide si le brossage fonctionne. */ .bag-held{ display:inline-flex;align-items:center;gap:.45rem; padding:.28rem .62rem .28rem .34rem;border-radius:var(--r-pill); background:rgba(212,130,10,.13);border:1px solid rgba(212,130,10,.3); } .bag-held .ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px} .bag-held svg{width:24px;height:24px} .bag-held .tx{display:flex;flex-direction:column;line-height:1.15} .bag-held .lb{ font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--amber-deep);opacity:.85; } .bag-held .nm{font-size:.78rem;font-weight:650;color:#3B2E12} /* Le sac : une liste en pleine largeur. L'ecran fait 288 px de contenu, deux colonnes reduiraient chaque description a 95 px et la rendraient illisible. */ .bag-list{ margin-top:.7rem;border-radius:14px;overflow:hidden; background:#fff;border:1px solid rgba(30,58,15,.14); box-shadow:0 1px 2px rgba(30,58,15,.06),0 10px 24px -18px rgba(30,58,15,.5); animation:bagIn .32s cubic-bezier(.2,.9,.28,1.02) both; } @keyframes bagIn{ from{opacity:0;transform:translateY(-7px) scale(.99)} to{opacity:1;transform:none} } .bag-head{ display:grid;grid-template-columns:1fr auto;gap:.3rem .6rem; padding:.58rem .8rem .5rem; background:rgba(30,58,15,.05);border-bottom:1px solid rgba(30,58,15,.1); } .bag-head .ti{ font-size:.64rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase; color:var(--forest); } .bag-head .n{ font-size:.68rem;font-weight:600;color:#6B6252;text-align:right; font-variant-numeric:tabular-nums; } .bag-head .hint{grid-column:1/-1;font-size:.7rem;line-height:1.35;color:#7A7263} .bag-item{ display:grid;grid-template-columns:34px minmax(0,1fr) 18px; align-items:start;gap:.7rem; width:100%;text-align:left;padding:.68rem .8rem; background:transparent;border:0;border-radius:0; transition:background .16s ease-out; } .bag-item+.bag-item{border-top:1px solid rgba(30,58,15,.09)} .bag-item:active{background:rgba(30,58,15,.055)} .bag-item .ic{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:10px;background:rgba(30,58,15,.06); transition:background .18s ease-out; } .bag-item .ic svg{width:24px;height:24px;flex:none} .bag-item .tx{display:block;min-width:0} .bag-item .nm{ display:block;font-size:.82rem;font-weight:660;line-height:1.3; letter-spacing:-.006em;color:var(--forest); } .bag-item .sm{ display:block;font-size:.735rem;line-height:1.45;color:#6B6252;margin-top:.14rem; /* Mesure courte et texte non justifie : c'est ce qui rend une description de deux lignes lisible dans un ecran de telephone. */ text-wrap:pretty; } .bag-item .mk{ display:flex;align-items:center;justify-content:center; width:18px;height:18px;margin-top:.42rem;color:var(--amber-deep); opacity:0;transform:scale(.7); transition:opacity .18s ease-out,transform .28s cubic-bezier(.2,.9,.28,1.06); } .bag-item .mk svg{width:16px;height:16px} .bag-item.held{background:rgba(212,130,10,.09)} .bag-item.held .ic{background:rgba(212,130,10,.18)} .bag-item.held .nm{color:#3B2E12} .bag-item.held .mk{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .bag-list{animation:none} .bag-item .mk{transition:opacity .18s ease-out;transform:none} } /* ------------------------------------------------------------------------- 24. Etampe « promo lancement » Pendant le pre-lancement les montants de la grille sont couverts par une etampe : le partenaire lit la structure de l'offre (conception unique, abonnement annuel, parcours additionnel) sans buter sur un chiffre avant d'avoir parle a quelqu'un. Le montant reel n'est pas dans le HTML, il ne sert a rien de le chercher dans la source. ------------------------------------------------------------------------- */ :root{ --stamp-ink:#A63D2F; --stamp-wash:rgba(166,61,47,.07); } :root[data-theme="dark"]{ --stamp-ink:#DE7C66; --stamp-wash:rgba(222,124,102,.1); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --stamp-ink:#DE7C66; --stamp-wash:rgba(222,124,102,.1); } } .price-table .amount.stamped{ white-space:normal;padding-block:.8rem; } .stamp{ --rot:-5deg; position:relative;display:inline-flex;flex-direction:column;align-items:center; padding:.44rem .8rem .4rem; border:2px solid var(--stamp-ink);border-radius:5px; background:var(--stamp-wash);color:var(--stamp-ink); opacity:.94; -webkit-user-select:none;user-select:none; transform:rotate(var(--rot)); } /* Le filet interieur : c'est le double trait qui fait lire « tampon ». */ .stamp::before{ content:"";position:absolute;inset:2px; border:1px solid var(--stamp-ink);border-radius:3px;opacity:.45; } .stamp .top{ font-family:var(--sans);font-size:.57rem;font-weight:700;line-height:1; letter-spacing:.2em;text-transform:uppercase;opacity:.82; /* Le tracking positif compense le corps minuscule des petites capitales. */ padding-left:.2em; } .stamp .main{ font-family:var(--sans);font-size:.87rem;font-weight:800;line-height:1.1; letter-spacing:.07em;text-transform:uppercase;margin-top:.13rem; padding-left:.07em; } /* Chaque etampe est posee a un angle legerement different : quatre coups de tampon a la main, pas un gabarit repete. */ .price-table tbody tr:nth-child(1) td:nth-of-type(1) .stamp{--rot:-5.5deg} .price-table tbody tr:nth-child(1) td:nth-of-type(2) .stamp{--rot:-2.5deg} .price-table tbody tr:nth-child(2) td:nth-of-type(1) .stamp{--rot:-3.5deg} .price-table tbody tr:nth-child(2) td:nth-of-type(2) .stamp{--rot:-6.5deg} .price-table tbody tr:nth-child(3) td:nth-of-type(1) .stamp{--rot:-4.5deg} .price-table tbody tr:nth-child(3) td:nth-of-type(2) .stamp{--rot:-1.5deg} /* L'entree : l'etampe descend et se pose, elle ne glisse pas. La courbe depasse legerement en fin de course pour donner le contact de l'encre. */ [data-reveal] .stamp{ opacity:0;transform:rotate(var(--rot)) scale(1.22); transition:transform .44s cubic-bezier(.22,.92,.3,1.08),opacity .18s linear; } [data-reveal].in .stamp{opacity:.94;transform:rotate(var(--rot)) scale(1)} .price-table tbody tr:nth-child(1) td:nth-of-type(2) .stamp{transition-delay:.07s} .price-table tbody tr:nth-child(2) td:nth-of-type(1) .stamp{transition-delay:.14s} .price-table tbody tr:nth-child(2) td:nth-of-type(2) .stamp{transition-delay:.21s} .price-table tbody tr:nth-child(3) td:nth-of-type(1) .stamp{transition-delay:.28s} .price-table tbody tr:nth-child(3) td:nth-of-type(2) .stamp{transition-delay:.35s} @media (prefers-reduced-motion:reduce){ [data-reveal] .stamp,[data-reveal].in .stamp{ transform:rotate(var(--rot));transition:opacity .22s ease; } } @media (prefers-contrast:more){ .stamp{opacity:1;border-width:2.5px} } @media (max-width:620px){ .stamp{padding:.36rem .58rem .32rem} .stamp .top{font-size:.52rem;letter-spacing:.16em} .stamp .main{font-size:.76rem} } /* ------------------------------------------------------------------------- 25. Galerie de captures de l'application Le meme chassis que la maquette interactive de la page demo, mais reduit et sans ilot ni barre d'etat : les captures portent deja les leurs. Le rapport d'image est celui du fichier source (1206 x 2622), sinon les captures seraient etirees. ------------------------------------------------------------------------- */ .shot{ display:flex;flex-direction:column;gap:.85rem; } .shot-frame{ width:100%;aspect-ratio:1206/2622; border-radius:26px;padding:6px; background:linear-gradient(155deg,#3a3a3c,#1c1c1e 42%,#2c2c2e); box-shadow: 0 0 0 1.2px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.35), 0 26px 48px -26px rgba(15,26,8,.6); } .shot-frame img{ width:100%;height:100%;display:block;object-fit:cover; border-radius:21px;background:#141613; } .shot .cap{ font-size:.8rem;line-height:1.4;color:var(--text-soft); padding-inline:.15rem; } .shot .cap b{ display:block;font-family:var(--serif);font-size:.94rem;font-weight:620; letter-spacing:-.008em;color:var(--heading);margin-bottom:.15rem; } /* Cinq appareils tiennent dans la largeur du contenu ; en dessous, le rail prend le relais et on fait defiler. */ .shot-rail .rail-track>*{flex:0 0 clamp(178px,17.6vw,212px)} @media (max-width:620px){ .shot-rail .rail-track>*{flex:0 0 min(196px,52vw)} .shot .cap{font-size:.76rem} }