/* ========================================================= Tecno Photo — Feuille de style principale Palette « chambre noire » : encre profonde, papier chaud, rouge inactinique (safelight) et ambre de révélateur. ========================================================= */ /* ---------- 1. Tokens ---------- */ :root { --ink: #14100E; --ink-2: #1D1815; --ink-3: #2B2320; --paper: #FAF7F2; --paper-2: #F2ECE2; --paper-3: #E8E0D3; --text: #241D19; --muted: #6E6259; --line: #E0D6C8; --line-dark: rgba(250, 247, 242, .14); --accent: #C0442C; /* rouge inactinique */ --accent-dk: #9C3421; --amber: #D9903F; --gold: #B08D57; --radius-s: 6px; --radius: 14px; --radius-l: 24px; --shadow-s: 0 1px 2px rgba(20,16,14,.06), 0 4px 12px rgba(20,16,14,.05); --shadow-m: 0 2px 6px rgba(20,16,14,.07), 0 18px 40px -18px rgba(20,16,14,.28); --wrap: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --header-h: 115px; /* topbar 38px + barre de navigation 76px */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 2. Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); line-height: 1.68; -webkit-font-smoothing: antialiased; /* « clip » et non « hidden » : hidden créerait un conteneur de défilement sur et casserait les colonnes en position: sticky. */ overflow-x: clip; } /* Grain photographique très léger sur toute la page */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .30; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); } img, svg, video { max-width: 100%; display: block; } figure { margin: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem); } h2 { font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.9rem); } h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); } h4 { font-size: 1.05rem; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration-color: rgba(192,68,44,.45); text-underline-offset: .18em; } a:hover { text-decoration-color: var(--accent); } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: 1rem; top: -100px; background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: var(--radius-s); z-index: 200; font-weight: 600; text-decoration: none; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. Layout ---------- */ .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; } .wrap--narrow { width: min(100% - var(--gutter) * 2, 800px); } .section { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; } .section--tight { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0; } .section--paper2 { background: var(--paper-2); } .section--ink { background: var(--ink); color: var(--paper); } .section--ink h2, .section--ink h3 { color: var(--paper); } .section--ink .lead, .section--ink p { color: rgba(250,247,242,.76); } .section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; } .section--ink .eyebrow { color: var(--amber); } .lead { font-size: clamp(1.075rem, 1rem + .4vw, 1.25rem); color: var(--muted); line-height: 1.62; } .grid { display: grid; gap: clamp(1rem, .5rem + 1.6vw, 1.75rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.15fr .85fr; } .split--wide-right { grid-template-columns: .85fr 1.15fr; } } /* Colonne « collante » : le texte de gauche reste à l'écran pendant que la colonne de droite défile, puis se libère à la fin du bloc. Activé seulement si la fenêtre est assez large ET assez haute pour afficher le texte en entier ; en dessous, la mise en page reste classique. */ @media (min-width: 900px) and (min-height: 760px) { .split--sticky { align-items: start; } .split--sticky > .sticky-col { position: sticky; top: calc(var(--header-h) + 1.5rem); } } /* ---------- 4. Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: .01em; border-radius: 100px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 17px; height: 17px; flex: none; } .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(192,68,44,.9); } .btn--primary:hover { background: var(--accent-dk); box-shadow: 0 14px 28px -12px rgba(192,68,44,.95); } .btn--ghost { border-color: var(--line); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--text); background: rgba(20,16,14,.03); } .btn--light { background: var(--paper); color: var(--ink); } .btn--light:hover { background: #fff; } .btn--outline-light { border-color: var(--line-dark); color: var(--paper); } .btn--outline-light:hover { border-color: var(--paper); background: rgba(250,247,242,.07); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---------- 5. En-tête ---------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(20,16,14,.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .header.is-stuck { border-bottom-color: var(--line-dark); } .topbar { background: var(--ink-3); color: rgba(250,247,242,.72); font-size: .8rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; flex-wrap: wrap; } .topbar a { text-decoration: none; } .topbar a:hover { color: var(--paper); } .topbar__links { display: flex; gap: 1.25rem; align-items: center; } .status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; } .status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .status.is-open .status__dot { background: #5FBF7E; box-shadow: 0 0 0 3px rgba(95,191,126,.22); } .status.is-closed .status__dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(192,68,44,.2); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; } .brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--paper); flex: none; } .brand__mark { width: 34px; height: 34px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.01em; } .brand__tag { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(250,247,242,.5); } .nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; } .nav__link { display: block; padding: .55rem .8rem; font-size: .9rem; font-weight: 500; color: rgba(250,247,242,.74); text-decoration: none; border-radius: var(--radius-s); transition: color .2s var(--ease), background-color .2s var(--ease); } .nav__link:hover { color: var(--paper); background: rgba(250,247,242,.07); } .nav__link[aria-current="page"] { color: var(--paper); } .nav__link[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--accent); border-radius: 2px; } .nav__cta { flex: none; } .nav__menu-cta { display: none; } /* Sous-menu « Services » */ .nav__item--has-menu { position: relative; } .nav__link--btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer; font-family: inherit; } .nav__link--btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); } .nav__item--has-menu:hover .nav__link--btn svg, .nav__link--btn[aria-expanded="true"] svg { transform: rotate(180deg); } .subnav { position: absolute; top: 100%; left: -.5rem; min-width: 270px; margin: 12px 0 0; padding: .5rem; list-style: none; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); box-shadow: 0 24px 48px -20px rgba(0,0,0,.7); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .subnav::before { /* pont invisible pour le survol */ content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; } .nav__item--has-menu:hover .subnav, .nav__item--has-menu:focus-within .subnav { opacity: 1; visibility: visible; transform: none; } .subnav a { display: block; padding: .6rem .85rem; font-size: .9rem; color: rgba(250,247,242,.76); text-decoration: none; border-radius: var(--radius-s); transition: background-color .2s var(--ease), color .2s var(--ease); } .subnav a:hover { background: rgba(250,247,242,.08); color: var(--paper); } .subnav a[aria-current="page"] { color: var(--amber); } .nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-dark); border-radius: var(--radius-s); cursor: pointer; } .nav__toggle span { position: relative; display: block; width: 18px; height: 1.5px; background: var(--paper); transition: background-color .2s var(--ease); } .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--paper); transition: transform .28s var(--ease), top .2s var(--ease); } .nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1040px) { .nav__toggle { display: inline-flex; } .nav__cta { display: none; } .nav__menu { position: fixed; inset: 114px 0 auto 0; background: var(--ink); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding: 1rem var(--gutter) 1.75rem; display: none; max-height: calc(100dvh - 114px); overflow-y: auto; } .nav__menu.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: .9rem .25rem; border-bottom: 1px solid var(--line-dark); font-size: 1rem; } .nav__link[aria-current="page"]::after { display: none; } .nav__link[aria-current="page"] { color: var(--amber); } .nav__menu-cta { display: inline-flex; margin-top: 1.25rem; width: 100%; } .nav__link--btn { width: 100%; justify-content: space-between; } .subnav { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; margin: 0; padding: .25rem 0 .75rem .9rem; border-left: 1px solid var(--line-dark); display: none; } .subnav::before { display: none; } .nav__link--btn[aria-expanded="true"] + .subnav { display: block; } .subnav a { padding: .65rem .25rem; } } /* ---------- 6. Hero ---------- */ .hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%; background: radial-gradient(60% 55% at 18% 12%, rgba(217,144,63,.20), transparent 62%), radial-gradient(48% 50% at 88% 78%, rgba(192,68,44,.24), transparent 60%); z-index: -1; } .hero__inner { padding: clamp(3.5rem, 2rem + 7vw, 7.5rem) 0 clamp(3rem, 2rem + 5vw, 6rem); } .hero--home .hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: center; } @media (min-width: 980px) { .hero--home .hero__inner { grid-template-columns: 1.05fr .95fr; } } .hero__title { color: var(--paper); margin-bottom: .55em; } .hero__title em { font-style: italic; color: var(--amber); } .hero__text { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); color: rgba(250,247,242,.78); max-width: 54ch; margin-bottom: 2rem; } .hero__meta { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line-dark); } .hero__meta div { min-width: 120px; } .hero__meta dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,247,242,.5); margin-bottom: .25rem; } .hero__meta dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--paper); } /* Page interne : hero compact */ .hero--page .hero__inner { padding: clamp(2.75rem, 2rem + 4vw, 5rem) 0 clamp(2.5rem, 1.75rem + 3vw, 4rem); max-width: 46rem; } .hero--page .hero__title { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem); } .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.5rem; padding: 0; font-size: .82rem; color: rgba(250,247,242,.55); } .breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb a:hover { color: var(--paper); } .breadcrumb li + li::before { content: "/"; margin-right: .45rem; opacity: .5; } /* Visuel « pellicule » du hero */ .filmstrip { position: relative; border-radius: var(--radius); background: #0C0A09; padding: 15px 0; box-shadow: var(--shadow-m); transform: rotate(-1.4deg); } .filmstrip::before, .filmstrip::after { content: ""; position: absolute; left: 0; right: 0; height: 15px; background-image: radial-gradient(circle at 8px 50%, #FAF7F2 0 3.5px, transparent 4px); background-size: 22px 15px; opacity: .85; } .filmstrip::before { top: 0; } .filmstrip::after { bottom: 0; } .filmstrip__frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 0 4px; } .frame { aspect-ratio: 4 / 3; border-radius: 2px; display: grid; place-items: center; position: relative; overflow: hidden; } .frame span { font-family: var(--font-display); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,247,242,.82); z-index: 1; } .frame--1 { background: linear-gradient(140deg, #3A2A22, #8A4A2E 55%, #D9903F); } .frame--2 { background: linear-gradient(140deg, #1F2B33, #3E5C63 60%, #9FBCB5); } .frame--3 { background: linear-gradient(140deg, #2C2320, #6B4A3A 55%, #C0442C); } .frame--4 { background: linear-gradient(140deg, #232323, #565452 55%, #B9B3AA); } .frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 30% 25%, rgba(255,255,255,.22), transparent 70%); } /* ---------- 7. Cartes ---------- */ .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 1.1rem + 1vw, 2rem); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--paper-3); } .card__icon { width: 46px; height: 46px; margin-bottom: 1.15rem; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(192,68,44,.12), rgba(217,144,63,.16)); color: var(--accent); } .card__icon svg { width: 23px; height: 23px; } .card h3 { margin-bottom: .5rem; } .card p { color: var(--muted); font-size: .95rem; } .card__more { margin-top: auto; padding-top: 1.15rem; font-size: .88rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; } .card__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); } .card--link:hover .card__more svg { transform: translateX(4px); } /* Lien couvrant toute la carte */ .card--link { text-decoration: none; color: inherit; } .card--ink { background: var(--ink-2); border-color: var(--line-dark); color: var(--paper); } .card--ink p { color: rgba(250,247,242,.7); } /* ---------- 8. Listes ---------- */ .list-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .list-check li { position: relative; padding-left: 1.9rem; color: var(--muted); } .list-check li::before { content: ""; position: absolute; left: 0; top: .52em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .list-check strong { color: var(--text); font-weight: 600; } .section--ink .list-check li { color: rgba(250,247,242,.74); } .section--ink .list-check strong { color: var(--paper); } .section--ink .list-check li::before { border-color: var(--amber); } /* ---------- 9. Chiffres ---------- */ .stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .stat { background: var(--paper); padding: 1.6rem 1.4rem; text-align: center; } .stat__num { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1; color: var(--accent); margin-bottom: .35rem; } .stat__label { font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .section--ink .stats { background: var(--line-dark); border-color: var(--line-dark); } .section--ink .stat { background: var(--ink); } .section--ink .stat__num { color: var(--amber); } .section--ink .stat__label { color: rgba(250,247,242,.6); } /* ---------- 10. Étapes ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, .8rem + 1.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; } .steps li { counter-increment: step; position: relative; padding-top: 2.9rem; } .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--accent); padding-bottom: .55rem; border-bottom: 2px solid var(--accent); min-width: 42px; } .steps h3 { font-size: 1.12rem; margin-bottom: .4rem; } .steps p { color: var(--muted); font-size: .93rem; } .section--ink .steps li::before { color: var(--amber); border-color: var(--amber); } /* ---------- 11. Tableaux ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 480px; } caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .85rem; } th, td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } thead th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom-width: 2px; } tbody tr:hover { background: rgba(192,68,44,.035); } td strong { font-weight: 600; } /* ---------- 12. Accordéon ---------- */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; background: none; border: 0; cursor: pointer; padding: 1.35rem 0; font-family: var(--font-display); font-size: clamp(1.02rem, .98rem + .25vw, 1.18rem); font-weight: 600; color: var(--text); text-align: left; line-height: 1.35; } .accordion__btn:hover { color: var(--accent); } .accordion__icon { flex: none; width: 22px; height: 22px; margin-top: .15rem; position: relative; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.8px; background: var(--accent); transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s var(--ease); } .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion__btn[aria-expanded="true"] .accordion__icon::after { opacity: 0; transform: translate(-50%,-50%) rotate(0); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .accordion__panel > div { overflow: hidden; } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__panel p { color: var(--muted); padding-bottom: 1.4rem; max-width: 72ch; } /* ---------- 13. Bandeau CTA ---------- */ .cta-band { background: var(--ink); color: var(--paper); border-radius: var(--radius-l); padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); position: relative; overflow: hidden; isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 85% 15%, rgba(217,144,63,.28), transparent 65%), radial-gradient(45% 60% at 10% 90%, rgba(192,68,44,.26), transparent 62%); } .cta-band h2 { color: var(--paper); } .cta-band p { color: rgba(250,247,242,.78); max-width: 52ch; } /* ---------- 14. Encadrés ---------- */ .note { border-left: 3px solid var(--accent); background: rgba(192,68,44,.055); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: .94rem; color: var(--text); } .note strong { color: var(--accent-dk); } .section--ink .note { background: rgba(217,144,63,.10); border-left-color: var(--amber); color: rgba(250,247,242,.85); } .section--ink .note strong { color: var(--amber); } .panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); } .tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .tag { font-size: .8rem; font-weight: 500; padding: .38rem .85rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); background: var(--paper); } .section--ink .tag { border-color: var(--line-dark); color: rgba(250,247,242,.72); background: transparent; } /* ---------- 15. Horaires ---------- */ .hours { width: 100%; border-collapse: collapse; min-width: 0; font-size: .95rem; } .hours th { font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; font-size: .95rem; border-bottom-width: 1px; } .hours td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .hours tr.is-today th, .hours tr.is-today td { color: var(--accent); font-weight: 600; } .section--ink .hours th { color: rgba(250,247,242,.85); border-color: var(--line-dark); } .section--ink .hours td { color: rgba(250,247,242,.6); border-color: var(--line-dark); } .section--ink .hours tr.is-today th, .section--ink .hours tr.is-today td { color: var(--amber); } /* ---------- 16. Formulaire ---------- */ .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: .4rem; } .field label { font-size: .84rem; font-weight: 600; letter-spacing: .01em; } .field .hint { font-size: .8rem; color: var(--muted); font-weight: 400; } .field input, .field select, .field textarea { font-family: inherit; font-size: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); width: 100%; } .field textarea { resize: vertical; min-height: 140px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(192,68,44,.14); } .field--row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } } .form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; color: var(--muted); } .form__consent input { width: auto; margin-top: .25rem; } .form__status { font-size: .9rem; padding: .85rem 1.1rem; border-radius: var(--radius-s); background: rgba(95,191,126,.12); border: 1px solid rgba(95,191,126,.35); display: none; } .form__status.is-visible { display: block; } /* ---------- 17. Pied de page ---------- */ .footer { background: var(--ink); color: rgba(250,247,242,.7); padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; font-size: .92rem; } .footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark); } .footer__grid > div:first-child { grid-column: span 1; } @media (min-width: 900px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } } .footer h4 { color: var(--paper); font-family: var(--font-body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer a { text-decoration: none; color: inherit; transition: color .2s var(--ease); } .footer a:hover { color: var(--paper); } .footer .brand { margin-bottom: 1rem; } .footer__about { max-width: 34ch; line-height: 1.6; } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.75rem; font-size: .82rem; color: rgba(250,247,242,.45); } .footer__bottom ul { display: flex; gap: 1.25rem; } /* ---------- 18. Divers ---------- */ .map-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); min-height: 340px; line-height: 0; } .map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; } .divider { height: 1px; border: 0; background: var(--line); margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; } .pill-alert { display: inline-flex; align-items: center; gap: .55rem; background: rgba(217,144,63,.15); color: #8A5A1E; border: 1px solid rgba(217,144,63,.4); border-radius: 100px; padding: .4rem 1rem; font-size: .84rem; font-weight: 600; } .section--ink .pill-alert, .hero .pill-alert { background: rgba(217,144,63,.16); color: var(--amber); border-color: rgba(217,144,63,.35); } .media-tile { border-radius: var(--radius); aspect-ratio: 5 / 4; display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-m); } .media-tile__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.4rem; background: linear-gradient(to top, rgba(12,10,9,.82), transparent); color: var(--paper); font-family: var(--font-display); font-size: 1.05rem; } .tone-warm { background: linear-gradient(150deg, #2A1D17, #8A4A2E 58%, #D9903F); } .tone-cool { background: linear-gradient(150deg, #16211F, #3E5C63 58%, #A8C3BC); } .tone-red { background: linear-gradient(150deg, #1A1210, #7A2A1B 55%, #C0442C); } .tone-mono { background: linear-gradient(150deg, #17171A, #4A4A4E 55%, #C3C0BA); } .tone-sepia { background: linear-gradient(150deg, #241A12, #7A5A38 55%, #CBAE7E); } /* ---------- 19. Animations ---------- */ /* Sans JavaScript, le contenu reste simplement visible : la classe « js » est ajoutée par un petit script en de chaque page. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ---------- 20. Impression ---------- */ @media print { .header, .footer, .cta-band, .nav__toggle, body::after { display: none !important; } body { background: #fff; color: #000; } .section { padding: 1rem 0; } }