/* ============================================================ Studio Aparté — thèmes pilotés par [data-theme] sur Thèmes : dark (défaut) · light · intermediate · source Tous les composants utilisent des variables sémantiques. ============================================================ */ :root, html[data-theme="dark"] { --bg: #0d0c0a; --bg-2: #060605; --surface: #16140f; --surface-2: #1e1b15; --surface-3: #262219; --text: #f1ece2; --text-soft: #b7afa1; --muted: #8a8071; --line: rgba(241,236,226,.12); --line-2: rgba(241,236,226,.22); --accent: #ff5a2c; --accent-2: #ff7d50; --accent-ink: #ff6f44; --on-accent: #1a0d05; --logo-filter: brightness(0) invert(1); --logo-op: .6; --ph-1: #2a2014; --ph-2: #0d0c0a; } html[data-theme="light"] { --bg: #faf7f1; --bg-2: #f1ece2; --surface: #ffffff; --surface-2: #fbf8f3; --surface-3: #f1ece2; --text: #181309; --text-soft: #5a5246; --muted: #8a8070; --line: rgba(24,19,9,.12); --line-2: rgba(24,19,9,.2); --accent: #ff5a2c; --accent-2: #ff7d50; --accent-ink: #c23a0c; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .7; --ph-1: #ece4d6; --ph-2: #d6ccba; } html[data-theme="intermediate"] { --bg: #e3dccc; --bg-2: #d8cfbc; --surface: #efe9dc; --surface-2: #f3eee2; --surface-3: #e0d7c5; --text: #1f190d; --text-soft: #574f3f; --muted: #847a66; --line: rgba(31,25,13,.14); --line-2: rgba(31,25,13,.24); --accent: #ef4f22; --accent-2: #ff7d50; --accent-ink: #a83109; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .75; --ph-1: #ddd3bf; --ph-2: #c8bda5; } html[data-theme="source"] { --bg: #ebe6dc; --bg-2: #e1dccf; --surface: #f3efe6; --surface-2: #f7f3ea; --surface-3: #e1dccf; --text: #1f1b14; --text-soft: #56503f; --muted: #8a8070; --line: rgba(31,27,20,.13); --line-2: rgba(31,27,20,.22); --accent: #ef5026; --accent-2: #ff7d50; --accent-ink: #b23509; --on-accent: #1a0d05; --logo-filter: none; --logo-op: .8; --ph-1: #e1dccf; --ph-2: #cdc5b2; } /* Nuit — minuit profond + champagne, élégant premium */ html[data-theme="night"] { --bg: #0e1117; --bg-2: #080b10; --surface: #161b24; --surface-2: #1d2330; --surface-3: #262d3b; --text: #eef1f6; --text-soft: #aab3c2; --muted: #79808f; --line: rgba(238,241,246,.12); --line-2: rgba(238,241,246,.22); --accent: #e0b15e; --accent-2: #f0cd8a; --accent-ink: #ecc270; --on-accent: #15110a; --logo-filter: brightness(0) invert(1); --logo-op: .6; --ph-1: #1d2330; --ph-2: #080b10; } /* Sauge — vert doux + terracotta, naturel et raffiné */ html[data-theme="sage"] { --bg: #eaece1; --bg-2: #dde0d0; --surface: #f3f4ec; --surface-2: #f6f7f0; --surface-3: #dfe2d2; --text: #1b1f14; --text-soft: #54584a; --muted: #828672; --line: rgba(27,31,20,.13); --line-2: rgba(27,31,20,.22); --accent: #aa3f18; --accent-2: #e08a5f; --accent-ink: #973812; --on-accent: #f6f1ea; --logo-filter: none; --logo-op: .78; --ph-1: #dfe2d2; --ph-2: #c9cdb8; } /* Éditorial — bone chaud + ocre, esprit magazine/maison */ html[data-theme="editorial"] { --bg: #f1e9da; --bg-2: #e7ddc9; --surface: #f8f1e4; --surface-2: #fbf5ea; --surface-3: #e7ddc9; --text: #211a0d; --text-soft: #5a503c; --muted: #8a7d63; --line: rgba(33,26,13,.14); --line-2: rgba(33,26,13,.24); --accent: #97581a; --accent-2: #dba74e; --accent-ink: #7c4a12; --on-accent: #fbf6ec; --logo-filter: none; --logo-op: .8; --ph-1: #e7ddc9; --ph-2: #d2c4a6; } /* Galerie — éditorial brutaliste, gallery-white + vermillon, angles vifs */ html[data-theme="gallery"] { --bg: #f3f1ea; --bg-2: #eae6db; --surface: #faf8f2; --surface-2: #ffffff; --surface-3: #ece8dd; --text: #0c0b09; --text-soft: #4c463b; --muted: #8a8272; --line: rgba(12,11,9,.16); --line-2: rgba(12,11,9,.3); --accent: #cf3413; --accent-2: #ff6a47; --accent-ink: #ab2c0d; --on-accent: #faf6ee; --logo-filter: none; --logo-op: .85; --ph-1: #ece8dd; --ph-2: #d8d2c2; } /* Couture — noir profond + or bronze, raffiné et premium */ html[data-theme="couture"] { --bg: #0c0b08; --bg-2: #070605; --surface: #15130e; --surface-2: #1c1913; --surface-3: #24201a; --text: #f3eee3; --text-soft: #b9b0a0; --muted: #8a8070; --line: rgba(243,238,227,.14); --line-2: rgba(243,238,227,.26); --accent: #c9a86a; --accent-2: #e0c690; --accent-ink: #d4b576; --on-accent: #15110a; --logo-filter: brightness(0) invert(1); --logo-op: .58; --ph-1: #24201a; --ph-2: #070605; } /* Origine — réplique fidèle du site actuel studio-aparte.fr : beige #EBE6DC · vert forêt #0A3925 · bordeaux #683131 · blush #D4BAAE (charte officielle 2026 — le doré #D8A442 est réservé à La Résidence, ne pas l'utiliser ici) Optician Sans (titres) · DM Sans (texte) · Roboto Mono (labels) */ html[data-theme="origine"] { --bg: #ebe6dc; --bg-2: #e1dccf; --surface: #f2eee4; --surface-2: #f8f4ec; --surface-3: #e3ddce; --text: #0a3925; --text-soft: #37503f; --muted: #6b7766; --line: rgba(2,58,34,.14); --line-2: rgba(2,58,34,.26); --accent: #683131; --accent-2: #894f49; --accent-ink: #683131; --on-accent: #f3efe6; /* #894f49 = bordeaux clair de la charte (APARTE_Palette couleurs.pdf) */ --logo-filter: none; --logo-op: .82; --ph-1: #d4baae; --ph-2: #c2a293; --serif: "Optician Sans", "DM Sans", system-ui, sans-serif; --sans: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :root { --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --maxw: 1440px; --radius: 14px; --shadow: 0 30px 70px -30px rgba(0,0,0,.55); --t: 240ms cubic-bezier(.4,0,.2,1); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1rem; } ::selection { background: var(--accent); color: var(--on-accent); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--text); } /* Optician Sans est monocase (bas-de-casse = capitales) → passer les titres en uppercase ne change RIEN au rendu des lettres couvertes, mais transforme les circonflexes/trémas (ê→Ê) servis par DM Sans (cf. fonts.css) en capitales homogènes au lieu d'un glyphe minuscule qui dénote. */ h1, h2, h3, .hero-title, .hero-h1 { text-transform: uppercase; } /* Hero /a-propos : 1re phrase à la taille du titre, suite réduite (hiérarchie). */ .page-title-sub { display: block; margin-top: .45em; font-size: clamp(1.25rem, 2.7vw, 2rem); line-height: 1.18; letter-spacing: -.005em; color: var(--text-soft); } /* Mot accentué « conviction » : DM Sans italique terracotta en minuscule — reproduit exactement le traitement de la v0 clientes (font-family DM Sans). */ #ap-title em { font-family: var(--sans); font-style: italic; font-weight: 500; text-transform: none; color: var(--accent-2); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.4rem); } .narrow { max-width: 920px; } .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; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 200; background: var(--accent); color: var(--on-accent); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; transition: top var(--t); } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Header / nav ---------- */ /* Header opaque (demande 2026-08-19) : le fond était semi-transparent (80 %, 92 % une fois scrollé) + flou d'arrière-plan, le contenu de la page se devinait dessous. Fond plein. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color var(--t); } .site-header.is-scrolled { border-color: var(--line); } /* Header quasi pleine largeur (demande 2026-07-16) : seul le padding latéral du .container borde le contenu */ .site-header .container { max-width: none; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; } .brand-word { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--text); } .site-header .brand-word { text-transform: uppercase; letter-spacing: .04em; } .brand-dot { color: var(--accent); } /* Logo officiel en pochoir (mask) : l'alpha du PNG découpe un bloc coloré en var(--text) → le logo suit la couleur de marque de chaque thème. */ .brand-logo { display: block; height: 1.7rem; aspect-ratio: 1418 / 285; background-color: var(--text); -webkit-mask: url('/assets/img/logo-aparte.webp') no-repeat center / contain; mask: url('/assets/img/logo-aparte.webp') no-repeat center / contain; } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.1rem); } .site-nav a { font-size: .92rem; font-weight: 500; color: var(--text-soft); position: relative; padding: .3rem 0; transition: color var(--t); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); } .site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--accent); transition: width var(--t); } .site-nav a:not(.nav-cta):hover::after, .site-nav a[aria-current="page"]:not(.nav-cta)::after { width: 100%; } .nav-cta { background: var(--accent); color: var(--on-accent) !important; padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700 !important; } .nav-cta:hover { background: var(--text); color: var(--bg) !important; } .nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--text); margin: 4px 0; border-radius: 2px; transition: var(--t); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1; padding: .9rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--t), background var(--t), color var(--t), border-color var(--t); text-align: center; } .btn:hover { transform: translateY(-2px); } .btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; } .btn-sm { padding: .5rem 1rem; font-size: .9rem; } /* --ap-btn* : couleur de bouton choisie par champ dans /admin/pages.php (posée en attribut style par aparte_sty()). Sans réglage, les valeurs de la charte. */ .btn-primary { background: var(--ap-btn, var(--accent)); color: var(--ap-btn-ink, var(--on-accent)); } .btn-primary:hover { background: var(--ap-btn-hover, var(--accent-2)); } /* Ghost aligné sur la famille bordeaux des CTA (unification 2026-07-16) : contour bordeaux, survol = remplissage comme le primaire. */ .btn-ghost { background: transparent; color: var(--ap-btn, var(--accent-ink)); border-color: var(--ap-btn, var(--accent)); } .btn-ghost:hover { background: var(--ap-btn, var(--accent)); color: var(--ap-btn-ink, var(--on-accent)); border-color: var(--ap-btn, var(--accent)); } .btn-light-ghost { background: transparent; color: #f4efe7; border-color: rgba(244,239,231,.5); } .btn-light-ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; } .link-arrow { font-weight: 600; color: var(--accent-ink); border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; } .link-arrow::after { content: " →"; } /* ---------- Eyebrow / titres ---------- */ .eyebrow { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 1rem; } .eyebrow-light { color: var(--accent-ink); } /* ---------- Hero (toujours sombre/cinéma, indépendant du thème) ---------- */ .hero { position: relative; min-height: min(calc(100vh - 210px), 760px); display: flex; align-items: flex-end; color: #f4efe7; background: #0d0c0a; overflow: hidden; } /* hauteur calée pour que le bandeau logos (≈86px) tienne sous le header (≈101px) sans scroll, quelle que soit la hauteur d'écran (débrief 2026-06-25, C4) */ .hero[style*="--poster"] { background-image: var(--poster); background-size: cover; background-position: center; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,12,10,.35) 0%, rgba(13,12,10,calc(var(--overlay, .55) + .2)) 100%), radial-gradient(130% 80% at 15% 100%, rgba(13,12,10,.6), transparent 70%); } .hero-inner { position: relative; z-index: 2; padding-block: clamp(1.6rem, 4.5vh, 3.5rem); max-width: 1000px; } /* padding réduit pour que le contenu hero + bandeau logos tiennent sans scroll (débrief 2026-06-25, C4) */ .hero .eyebrow, .hero .eyebrow-light { color: var(--accent-2); } .hero-title { font-size: clamp(3rem, 9vw, 7.2rem); line-height: .94; letter-spacing: -.03em; margin: .4rem 0 1.3rem; font-weight: 500; color: #f4efe7; } .hero-title span { display: block; } .hero-title span:nth-child(2) { opacity: .96; } .hero-title span:nth-child(3) { font-style: italic; color: var(--accent-2); } /* ---------- Marquee ---------- */ .pillars { background: var(--bg-2); border-block: 1px solid var(--line); } .pillars .marquee { padding-block: 1.6rem; } .marquee { overflow: hidden; } .marquee-inner { display: flex; width: max-content; animation: marquee 30s linear infinite; } .marquee:hover .marquee-inner { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex: none; } .marquee-group > * { padding-inline: clamp(1.3rem, 4vw, 3.2rem); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .pillars .marquee-group span { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3.2vw, 2.6rem); color: var(--text); white-space: nowrap; } .pillars .marquee-group span::after { content: "✳"; margin-left: clamp(1.3rem, 4vw, 3.2rem); color: var(--accent); font-style: normal; font-size: .6em; vertical-align: middle; } /* ---------- Sections ---------- */ .section { padding-block: clamp(2.8rem, 6vw, 5.2rem); } /* marges resserrées entre blocs (débrief 2026-06-25) */ .section-alt { background: var(--surface); } .section-dark { background: var(--bg-2); } /* Taille alignée sur le titre « Il paraîtrait que l'intérieur d'une maison… » du site source (studio-aparte.fr/about : 47px mesurés à 1600px) — vaut pour TOUS les grands titres sauf le H1 superposé à la vidéo de la home (demande 2026-07-16). */ .section-title { font-size: clamp(1.9rem, 3.4vw, 2.9375rem); max-width: 20ch; } .section-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 60ch; color: var(--text-soft); } .section-lead a { color: var(--accent-ink); font-weight: 600; } .section-cta { margin-top: 2rem; } .page-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem); background: var(--surface); border-bottom: 1px solid var(--line); } /* Hero : titre + intro sur la pleine largeur de page (alignés au contenu en dessous). Les paragraphes gardent leur cap de lisibilité via .page-lead{max-width:60ch}. */ .page-hero .container.narrow { max-width: var(--maxw); } .page-title { font-size: clamp(1.9rem, 3.4vw, 2.9375rem); letter-spacing: -.025em; } /* 47px max, cf. note .section-title */ .page-lead { font-size: clamp(1.15rem, 1.8vw, 1.45rem); max-width: 60ch; color: var(--text-soft); } /* ---------- Steps ---------- */ .steps { list-style: none; padding: 0; margin: 2.6rem 0 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .steps li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.7rem; transition: transform var(--t), border-color var(--t); } .steps li:hover { transform: translateY(-5px); border-color: var(--accent); } .step-num { font-family: var(--serif); font-size: 2.8rem; color: var(--accent-ink); display: block; line-height: 1; margin-bottom: .6rem; } .steps h3 { font-size: 1.4rem; } .steps p { color: var(--text-soft); font-size: .98rem; margin: 0; } /* ---------- Values ---------- */ .values-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; } .value { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .value:hover { transform: translateY(-5px); border-color: var(--accent); } .value-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-3); } .value-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .value:hover .value-media img { transform: scale(1.06); } .value-body { padding: 1.4rem 1.5rem 1.7rem; } .value h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--sans); font-weight: 800; color: var(--text); } .value p { color: var(--text-soft); font-size: .95rem; margin: 0; } /* ---------- Logo wall ---------- */ .logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2.2rem; } .logo-cell { background: var(--surface); display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 1.4rem; } .logo-cell img { max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-op); transition: opacity var(--t); } .logo-cell:hover img { opacity: 1; } /* Carrousel de logos (marquee défilant) */ .logo-carousel { margin-top: 2.4rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .logo-carousel .marquee-inner { animation-duration: 42s; } /* padding-inline-end = gap : sans lui, le dernier logo du groupe 1 touche le premier du groupe 2 à la jointure de la boucle (le gap est interne au groupe). */ .logo-carousel .marquee-group { gap: clamp(2.2rem, 5vw, 4.8rem); padding-block: .6rem; padding-inline-end: clamp(2.2rem, 5vw, 4.8rem); } .logo-carousel .marquee-group > * { padding-inline: 0; } .logo-slide { display: inline-flex; align-items: center; flex: none; } .logo-slide img { height: 50px; width: auto; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-op); transition: opacity var(--t); } .logo-carousel:hover .marquee-inner { animation-play-state: paused; } .logo-slide img:hover { opacity: 1; } /* ---------- Expertise ---------- */ .expertise-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.6rem; } .expertise { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; transition: border-color var(--t), transform var(--t); } .expertise:hover { border-color: var(--accent); transform: translateY(-4px); } .expertise-num { font-family: var(--serif); color: var(--accent-ink); font-size: 1.3rem; } .expertise h3 { font-size: 1.6rem; margin: .3rem 0 .5rem; } .expertise p { color: var(--text-soft); font-size: .97rem; } .expertise ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .expertise li { font-size: .82rem; background: var(--surface-3); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; color: var(--text-soft); } /* ---------- Offers ---------- */ .offers { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.6rem; } .offer { padding: 2rem; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--line); border-top: 3px solid var(--accent); } .offer h3 { font-size: 1.6rem; font-style: italic; } .offer p { color: var(--text-soft); font-size: .97rem; margin: 0; } /* ---------- Cases ---------- */ .cases-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2.6rem; } .case-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .case-card:hover { transform: translateY(-6px); border-color: var(--accent); } .case-media { aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; } /* Page /cas-clients : vignettes de cards en 9:10 comme les visuels de /notre-approche (2026-07-06) — la home garde le 16:10 */ .case-grid:not(.case-grid-home) .case-media { aspect-ratio: 9 / 10; } .case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .case-card:hover .case-media img { transform: scale(1.05); } .case-media-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); } .case-media-placeholder span { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 1.5rem; } .case-body { padding: 1.5rem 1.6rem 1.8rem; } .case-meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .5rem; } .case-body h3 { font-size: 1.35rem; } .case-body p { color: var(--text-soft); font-size: .96rem; } .case-result { display: inline-block; margin-top: .6rem; font-weight: 700; color: var(--accent-ink); font-size: .95rem; } /* ---------- Talents ---------- */ .talents-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2.6rem; } .talent-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), border-color var(--t); } .talent-card:hover { transform: translateY(-5px); border-color: var(--accent); } .talent-photo { aspect-ratio: 4 / 5; background: var(--surface-3); overflow: hidden; } .talent-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .talent-card:hover .talent-photo img { transform: scale(1.05); } .talent-photo-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); } .talent-photo-placeholder span { font-family: var(--serif); font-size: 3rem; color: var(--accent); } .talent-body { padding: 1.3rem 1.4rem 1.6rem; } .talent-body h3 { font-size: 1.25rem; margin-bottom: .2rem; } .talent-expertise { font-weight: 600; color: var(--text); font-size: .95rem; margin: 0 0 .3rem; } .talent-meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-ink); margin: 0 0 .6rem; } .talent-bio { color: var(--text-soft); font-size: .92rem; margin: 0; } /* ---------- Studio / manifesto ---------- */ .manifesto { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.7rem); font-style: italic; line-height: 1.28; margin: 0 0 1.5rem; color: var(--text); border: 0; padding: 0; } .lead-emphasis { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--accent-ink); } .cities { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 1.5rem; } .cities a, .cities span { font-family: var(--serif); font-size: clamp(1.8rem, 4.4vw, 3rem); position: relative; padding-left: 1.5rem; transition: color var(--t); color: var(--text); } .cities a::before, .cities span::before { content: "·"; position: absolute; left: 0; color: var(--accent); } .cities a:hover { color: var(--accent-ink); } .founders { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; } .founder { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.8rem; min-width: 200px; } .founder h3 { font-size: 1.4rem; margin-bottom: .1rem; } .founder p { color: var(--muted); margin: 0 0 .4rem; } .founder a { color: var(--accent-ink); font-weight: 600; } .founders-photo { margin: 2.2rem 0 0; border-radius: var(--radius); overflow: hidden; max-width: 580px; box-shadow: var(--shadow); border: 1px solid var(--line); } .founders-photo img { width: 100%; height: auto; display: block; } .legal h2 { font-size: 1.4rem; margin-top: 2rem; } .legal p { color: var(--text-soft); } /* Pages légales sans texte rouge (demande 2026-08-18). Les liens passent en couleur de texte + soulignement : ils étaient bordeaux et SANS soulignement, donc signalés par la seule couleur — au passage c'était un manquement WCAG 1.4.1. */ .legal a { color: var(--text); text-decoration: underline; text-underline-offset: .18em; } .legal a:hover { text-decoration-thickness: 2px; } .legal .todo { color: var(--accent-ink); font-style: italic; } /* Tableau des pages légales (politique cookies, 2026-08-30) : le contenu est large, il défile DANS son cadre — la page, elle, ne doit jamais défiler horizontalement (règle de la charte serveur). Angles vifs, comme le formulaire de diagnostic. */ .legal .table-wrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--line); } .legal table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; } .legal th, .legal td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--text-soft); } .legal thead th { background: var(--surface-2); color: var(--text); font-weight: 700; } .legal tbody tr:last-child td { border-bottom: 0; } .legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; word-break: break-word; } .legal .nowrap { white-space: nowrap; } .legal ul { color: var(--text-soft); padding-left: 1.2rem; } .legal li { margin-bottom: .4rem; } /* ---------- CTA band (bloc accent, indépendant du thème) ---------- */ .cta-band { background: var(--accent); color: #1a0d06; text-align: center; padding-block: clamp(4rem, 9vw, 7rem); } .cta-band .eyebrow { color: #5a1f08; } .cta-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.9375rem); margin-inline: auto; color: #160a04; } /* 47px max, cf. note .section-title */ .cta-band-text { max-width: 56ch; margin-inline: auto; color: #3a1c0c; } .cta-band .cta-row { justify-content: center; } .cta-band .btn-primary { background: #160a04; color: #ffb59a; } .cta-band .btn-primary:hover { background: #000; color: #fff; } .cta-band .btn-ghost { border-color: rgba(22,10,4,.4); color: #160a04; } .cta-band .btn-ghost:hover { background: #160a04; color: #ffb59a; border-color: #160a04; } /* ---------- Lead magnet ---------- */ .lead-magnet { text-align: center; } .lead-magnet .section-title, .lead-magnet .section-lead { margin-inline: auto; } /* ---------- Forms ---------- */ .form, .diag-form { margin-top: 1rem; } .field { margin-bottom: 1.2rem; } .field-row { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; } .field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: var(--text); } .field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface-3); border: 1.5px solid var(--line-2); border-radius: 12px; padding: .85rem 1rem; transition: border-color var(--t), box-shadow var(--t); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } .field.is-error input, .field.is-error textarea { border-color: #e0492a; } .field textarea { resize: vertical; } .form-note { font-size: .85rem; color: var(--muted); margin-top: 1rem; } .form-note a { color: var(--accent-ink); } .alert { border-radius: var(--radius); padding: 1.3rem 1.5rem; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 1.5rem; } .alert-success { border-color: #3f7d52; background: color-mix(in srgb, #3f7d52 16%, var(--surface)); } .alert-error { border-color: #c0563f; background: color-mix(in srgb, #c0563f 16%, var(--surface)); } .alert-success h2 { color: var(--text); } .contact-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; } .contact-aside h2 { font-size: 1.2rem; font-family: var(--sans); font-weight: 700; } .contact-aside a { color: var(--accent-ink); font-weight: 600; } .contact-aside .mt { margin-top: 1.4rem; } .contact-cities { margin-top: 1.6rem; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.2rem; } @media (min-width: 820px) { .contact-layout { grid-template-columns: 320px 1fr; } } /* Hero contact en 2 colonnes : texte + 2 CTA à gauche, « Contactez-nous » à droite */ .contact-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 880px) { .contact-hero-grid { grid-template-columns: 1fr 300px; } } .contact-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; } .contact-card h2 { font-size: 1.2rem; font-family: var(--sans); font-weight: 700; margin: 0 0 1rem; } .contact-card p { margin: 0 0 1rem; } .contact-card p:last-child { margin-bottom: 0; } .contact-card a { color: var(--accent-ink); font-weight: 600; } /* ---------- Diagnostic ---------- */ .diag-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.8rem); box-shadow: var(--shadow); } .diag-progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 2rem; } .diag-progress-bar { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 350ms ease; } .diag-step { border: 0; padding: 0; margin: 0; } .diag-step[hidden] { display: none; } .diag-step-counter { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); padding: 0; } .diag-q { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .4rem 0 .3rem; } .diag-q.is-error { color: #e0492a; } .diag-help { color: var(--muted); margin-bottom: 1.4rem; } /* Rubrique « Pourquoi ça compte » (2026-08-27) : entre la question et les réponses. Volontairement sans encadré ni fond — un bloc encadré se lirait comme une réponse de plus. L'intitulé reprend le traitement du compteur d'étape (mono, capitales, bordeaux), ce qui l'identifie comme un repère et non comme un choix. */ .diag-why { margin: .9rem 0 1.5rem; } /* Intitulé sur la MÊME ligne que le texte, et dans la MÊME encre : pas de bordeaux ni de capitales (demande Franck 2026-08-27, cf. sa maquette — le rouge attirait l'œil autant que la question elle-même). Le reste : il porte l'intitulé éditable et servira si une nuance typographique est demandée plus tard. */ .diag-why-lab, .diag-why-sep { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } .diag-why p { margin: 0; color: var(--text-soft); } /* Sous les réponses (cta.why_pos = below, comme le Tally d'origine) : les réponses posent déjà leur marge basse, la rubrique n'a plus qu'à se détacher du bloc suivant. */ .diag-why.is-below { margin: 0 0 .4rem; } .diag-options { display: grid; gap: .8rem; margin-bottom: 1.8rem; } .diag-option { display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color var(--t), background var(--t); background: var(--surface-2); } .diag-option:hover { border-color: var(--accent); } /* La case est masquée à l'œil mais reste dans le flux du clavier (jamais display:none, qui la sortirait de la navigation) : c'est la pastille A/B/C qui porte l'état. */ .diag-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .diag-option span { font-weight: 500; } .diag-letter { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 8px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text-soft); font-weight: 500; font-family: var(--mono, monospace); font-size: .85rem; line-height: 1; transition: background var(--t), color var(--t), border-color var(--t); } .diag-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); } .diag-option:has(input:checked) .diag-letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #f3efe6); } .diag-option:hover .diag-letter { border-color: var(--accent); } /* Le focus clavier se voit sur la carte entière, puisque la case elle-même est invisible. */ .diag-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } .diag-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; } .diag-nav .btn[data-next], .diag-nav .btn[type="submit"] { margin-left: auto; } .diag-step.shake { animation: shake 360ms; } @keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .result-card { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.8rem 2rem; margin: 1.5rem 0; } .result-profile { font-size: 1.4rem; font-family: var(--serif); margin-bottom: .6rem; } .result-synth { color: var(--text-soft); margin: 0; } .result-mail-note { color: var(--muted); font-size: .92rem; } .agenda-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; margin-top: 1.5rem; } /* ---------- FAQ ---------- */ .faq-list { margin-top: 2rem; display: grid; gap: .8rem; } .faq-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .faq-item summary { cursor: pointer; padding: 1.15rem 1.4rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.6rem; line-height: 1; transition: transform var(--t); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-answer { padding: 0 1.4rem 1.3rem; color: var(--text-soft); } .faq-answer p { margin: 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-2); color: var(--text-soft); padding-block: clamp(3.5rem, 6vw, 5rem) 1.5rem; border-top: 1px solid var(--line); } .footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); } .footer-brand .brand-word { color: var(--text); } .footer-brand p { margin-top: .8rem; font-size: .92rem; } .footer-col h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin: 0 0 .9rem; } .footer-col h3.mt { margin-top: 1.4rem; } .footer-col a { display: block; color: var(--text-soft); padding: .22rem 0; font-size: .95rem; transition: color var(--t); } .footer-col a:hover { color: var(--accent-ink); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: .85rem; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } .footer-bottom a:hover { color: var(--accent-ink); } /* ---------- Cookie banner ---------- */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 40px -20px rgba(0,0,0,.4); } .cookie-inner { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1rem; } .cookie-inner p { margin: 0; font-size: .9rem; max-width: 60ch; color: var(--text-soft); } .cookie-inner a { color: var(--accent-ink); font-weight: 600; } .cookie-actions { display: flex; gap: .6rem; } /* ---------- Responsive nav ---------- */ @media (max-width: 880px) { .nav-toggle { display: block; } .site-nav { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 1rem clamp(1.1rem, 4vw, 2.2rem) 1.5rem; transform: translateY(-130%); transition: transform var(--t); box-shadow: var(--shadow); } .site-nav.is-open { transform: translateY(0); } .site-nav a { width: 100%; padding: .85rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); } .nav-cta { margin-top: .8rem; align-self: stretch; text-align: center; } .field-row { grid-template-columns: 1fr; } } /* ============================================================ Variations de mise en page par thème (artistiques / premium) ============================================================ */ /* GALERIE — brutaliste éditorial : angles vifs, typo démesurée, cartes plates */ html[data-theme="gallery"] .section-title { font-size: clamp(2.7rem, 7.4vw, 5.8rem); letter-spacing: -.035em; line-height: .98; } html[data-theme="gallery"] .page-title { font-size: clamp(3rem, 8.5vw, 6.4rem); } html[data-theme="gallery"] .section { padding-block: clamp(4.5rem, 11vw, 9.5rem); } html[data-theme="gallery"] .eyebrow { letter-spacing: .32em; } html[data-theme="gallery"] .value, html[data-theme="gallery"] .expertise, html[data-theme="gallery"] .case-card, html[data-theme="gallery"] .talent-card, html[data-theme="gallery"] .offer, html[data-theme="gallery"] .steps li, html[data-theme="gallery"] .faq-item, html[data-theme="gallery"] .founder, html[data-theme="gallery"] .diag-form, html[data-theme="gallery"] .result-card, html[data-theme="gallery"] .logo-wall, html[data-theme="gallery"] .field input, html[data-theme="gallery"] .field textarea, html[data-theme="gallery"] .diag-option, html[data-theme="gallery"] .btn, html[data-theme="gallery"] .nav-cta, html[data-theme="gallery"] .expertise li, html[data-theme="gallery"] .founders-photo, html[data-theme="gallery"] .value-media, html[data-theme="gallery"] .case-media, html[data-theme="gallery"] .talent-photo { border-radius: 0; } html[data-theme="gallery"] .expertise, html[data-theme="gallery"] .offer, html[data-theme="gallery"] .steps li { background: transparent; } html[data-theme="gallery"] .offer { border-top-width: 4px; } html[data-theme="gallery"] .section-alt { border-top: 2px solid var(--text); } /* COUTURE — raffiné : eyebrows serif italique, filets dorés, arrondis généreux, chiffres serif */ html[data-theme="couture"] .eyebrow, html[data-theme="couture"] .eyebrow-light { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 1.1rem; font-weight: 500; } html[data-theme="couture"] .section-alt { border-top: 1px solid var(--accent); } html[data-theme="couture"] .value, html[data-theme="couture"] .expertise, html[data-theme="couture"] .case-card, html[data-theme="couture"] .talent-card, html[data-theme="couture"] .offer, html[data-theme="couture"] .steps li, html[data-theme="couture"] .faq-item, html[data-theme="couture"] .founder, html[data-theme="couture"] .diag-form, html[data-theme="couture"] .value-media, html[data-theme="couture"] .case-media, html[data-theme="couture"] .founders-photo { border-radius: 20px; } html[data-theme="couture"] .step-num, html[data-theme="couture"] .expertise-num, html[data-theme="couture"] .case-meta, html[data-theme="couture"] .talent-meta, html[data-theme="couture"] .case-result { font-family: var(--serif); } html[data-theme="couture"] .case-meta, html[data-theme="couture"] .talent-meta { text-transform: none; letter-spacing: 0; font-style: italic; font-size: .95rem; } html[data-theme="couture"] .section-title { font-weight: 400; } /* GALERIE — compo magazine : eyebrow-masthead + grandes colonnes */ html[data-theme="gallery"] .eyebrow { display: inline-block; border-top: 2px solid var(--text); padding-top: .9rem; margin-bottom: 1.4rem; } html[data-theme="gallery"] .values-grid, html[data-theme="gallery"] .cases-grid { grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 1.8rem; } html[data-theme="gallery"] .expertise-grid, html[data-theme="gallery"] .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme="gallery"] .section-lead, html[data-theme="gallery"] .page-lead { font-size: clamp(1.2rem, 2.1vw, 1.65rem); max-width: 72ch; } html[data-theme="gallery"] .value h3 { font-size: 1.45rem; } html[data-theme="gallery"] .expertise h3, html[data-theme="gallery"] .offer h3 { font-size: 1.9rem; } /* COUTURE — composition centrée, symétrique */ html[data-theme="couture"] .section > .container > .eyebrow, html[data-theme="couture"] .section > .container > .section-title, html[data-theme="couture"] .section > .container > .section-lead, html[data-theme="couture"] .section > .container > .section-cta, html[data-theme="couture"] .page-hero .container { text-align: center; } html[data-theme="couture"] .section > .container > .section-title, html[data-theme="couture"] .section > .container > .section-lead, html[data-theme="couture"] .page-hero .page-lead { margin-inline: auto; } html[data-theme="couture"] .page-hero .cta-row, html[data-theme="couture"] .section > .container > .cta-row { justify-content: center; } html[data-theme="couture"] .manifesto { text-align: center; } html[data-theme="couture"] .cities, html[data-theme="couture"] .founders { justify-content: center; } @media (max-width: 760px) { html[data-theme="gallery"] .expertise-grid, html[data-theme="gallery"] .offers { grid-template-columns: 1fr; } } /* ORIGINE — réplique typo de studio-aparte.fr : Optician Sans (1 graisse, pas d'italique) en titres, DM Sans en texte, Roboto Mono en petits labels, filets bordeaux discrets. */ html[data-theme="origine"] h1, html[data-theme="origine"] h2, html[data-theme="origine"] h3, html[data-theme="origine"] .section-title, html[data-theme="origine"] .page-title, html[data-theme="origine"] .brand-word { font-weight: 400; letter-spacing: .005em; } /* Petits labels en Roboto Mono comme la source (la source réserve le mono aux "accents") */ html[data-theme="origine"] .eyebrow, html[data-theme="origine"] .eyebrow-light, html[data-theme="origine"] .footer-col h3 { font-family: "Roboto Mono", ui-monospace, monospace; font-weight: 400; letter-spacing: .16em; } /* La source n'a aucun serif italique → on redresse les flourishes et on les passe en sans/Optician */ html[data-theme="origine"] .manifesto, html[data-theme="origine"] .pillars .marquee-group span, html[data-theme="origine"] .lead-emphasis, html[data-theme="origine"] .contact-cities, html[data-theme="origine"] .case-media-placeholder span, html[data-theme="origine"] .talent-photo-placeholder span, html[data-theme="origine"] .faq-item summary, html[data-theme="origine"] .result-profile { font-style: normal; } html[data-theme="origine"] .manifesto, html[data-theme="origine"] .lead-emphasis, html[data-theme="origine"] .contact-cities { font-family: var(--sans); } /* Débrief 2026-06-25 : plus de filet séparateur coloré (C8) + sections alternées en BEIGE charte (et non plus en crème quasi-blanc) pour éviter le « passage en blanc » (A3/A5). */ html[data-theme="origine"] .section-alt { background: var(--bg-2); border-top: 0; } /* Cartes : teinte beige chaude (plus de crème quasi-blanc) */ html[data-theme="origine"] .case-card { background: color-mix(in srgb, var(--ph-1) 26%, var(--bg)); border-color: var(--line); } /* Aplat de couleur pleine largeur — vert forêt charte, à la Acracy (A5) */ .section--green { background: var(--text); color: var(--bg); } .section--green .eyebrow { color: var(--ph-1); } .section--green .section-title, .section--green h2, .section--green h3, .section--green .perim-row dt { color: var(--bg); } .section--green .section-lead, .section--green .perim-row dd { color: color-mix(in srgb, var(--bg) 88%, transparent); } .section--green .perim-row, .section--green .perim-row:first-child { border-color: color-mix(in srgb, var(--bg) 24%, transparent); } /* CTA sur aplat vert = style « Parlons-nous » (bordeaux), jamais beige/blanc (débrief 2026-06-25) */ .section--green .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .section--green .btn-primary:hover { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); } /* Métiers en bulles rondes fond vert, façon Acracy (C16 home, D5 approche, F3 fiches) */ .metier-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; } .metier-pill { display: inline-block; background: var(--text); color: var(--bg); border-radius: 999px; padding: .3rem .85rem; font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; } .section--green .metier-pill { background: var(--bg); color: var(--text); } .meth-pills { margin: 1.3rem 0 2rem; gap: .6rem; } .meth-pills .metier-pill { font-size: .82rem; padding: .42rem 1.05rem; } /* Talent Management — dernier bloc Créateurs / Marques en 2 colonnes (débrief 2026-06-25, E7) */ .tm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } /* CTA des 2 colonnes Créateurs/Marques calés en bas au même niveau (2026-07-16, comme les cartes d'offres) */ .tm-two-col .tm-col { display: flex; flex-direction: column; } .tm-two-col .tm-col .section-cta { margin-bottom: 0; margin-top: auto; padding-top: 2rem; } .tm-col h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 1rem; } @media (max-width: 760px) { .tm-two-col { grid-template-columns: 1fr; } } /* ====== ORIGINE — accueil calqué sur studio-aparte.fr (cf. _home-origine.php) ====== Mise en page propre au thème origine : grilles 2 colonnes, grands panneaux verts, bloc process plein, valeurs en colonnes. Tout est scopé html[data-theme="origine"]. */ /* Bouton « pilule » mono à bordure fine (récurrent dans la source) */ html[data-theme="origine"] .og-pill { display: inline-flex; align-items: center; gap: .7em; font-family: "Roboto Mono", ui-monospace, monospace; font-size: .8rem; letter-spacing: .04em; color: var(--text); text-decoration: none; padding: .72em 1.35em; border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius: 999px; transition: background .25s, color .25s, border-color .25s; } html[data-theme="origine"] .og-pill:hover { background: var(--text); color: var(--on-accent); border-color: var(--text); } html[data-theme="origine"] .og-pill span { transition: transform .25s; } html[data-theme="origine"] .og-pill:hover span { transform: translateX(4px); } html[data-theme="origine"] .og-pill-wrap { margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; } /* 1. MÉTIERS — manifeste (gauche) + 4 panneaux verticaux verts 2×2 (droite) */ html[data-theme="origine"] .og-metiers { padding-block: clamp(1.5rem, 4vw, 4rem) 0; } html[data-theme="origine"] .og-metiers-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 7.5rem); align-items: center; padding-inline: clamp(1.2rem, 5vw, 5rem); max-width: 1500px; margin-inline: auto; } html[data-theme="origine"] .og-metiers-text { max-width: 30rem; } html[data-theme="origine"] .og-manifesto { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-style: normal; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: .01em; color: var(--text); margin: 1.3rem 0 1.9rem; } html[data-theme="origine"] .og-panels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 2.4vw, 2.2rem); } html[data-theme="origine"] .og-panel { background: var(--text); color: var(--on-accent); /* rectangles portraits modérés comme studio-aparte.fr : hauteur ~33vh (≈ 1 tiers d'écran), bornée pour rester un "petit rectangle" sur grands/petits écrans. */ min-height: clamp(300px, 33vh, 560px); display: flex; align-items: center; justify-content: center; } html[data-theme="origine"] .og-panel span { font-family: var(--serif); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.1rem, 1.8vw, 1.7rem); } /* 2. PROCESS — bloc vert plein (gauche) + 4 étapes (droite) */ html[data-theme="origine"] .og-process { margin-top: clamp(3rem, 7vw, 6rem); } html[data-theme="origine"] .og-process-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } html[data-theme="origine"] .og-process-intro { background: var(--text); color: var(--on-accent); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem); } html[data-theme="origine"] .og-process-intro h2 { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.12; margin: 0 0 1.4rem; color: var(--on-accent); } html[data-theme="origine"] .og-process-intro p { font-family: var(--sans); max-width: 26rem; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--on-accent) 88%, transparent); } html[data-theme="origine"] .og-steps { list-style: none; margin: 0; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); } html[data-theme="origine"] .og-step { text-align: center; } html[data-theme="origine"] .og-chev { display: inline-block; width: 15px; height: 15px; border-top: 2px solid var(--text); border-left: 2px solid var(--text); transform: rotate(45deg); margin-bottom: 1.4rem; } html[data-theme="origine"] .og-num { display: block; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .1em; color: var(--text); } html[data-theme="origine"] .og-step h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: .04em; margin: .3rem 0 1.2rem; color: var(--text); } html[data-theme="origine"] .og-step p { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .8rem; line-height: 1.7; color: var(--text-soft); max-width: 22rem; margin-inline: auto; } /* 3. APPROCHE — titre + intro centrés + bouton pilule + 4 valeurs en colonnes */ html[data-theme="origine"] .og-approche { padding-block: clamp(3.5rem, 8vw, 7rem); text-align: center; } html[data-theme="origine"] .og-approche-head { max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); padding-inline: 1.2rem; } html[data-theme="origine"] .og-approche-head h2 { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: .02em; margin: 0 0 1.2rem; color: var(--text); } html[data-theme="origine"] .og-approche-head > p { font-family: var(--sans); line-height: 1.6; color: var(--text-soft); margin: 0; } html[data-theme="origine"] .og-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.4rem); padding-inline: clamp(1.2rem, 4vw, 3.5rem); text-align: left; max-width: 1400px; margin-inline: auto; } html[data-theme="origine"] .og-value-media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.2rem; } html[data-theme="origine"] .og-value-media img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-theme="origine"] .og-value h3 { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: .03em; margin: 0 0 .7rem; color: var(--text); } html[data-theme="origine"] .og-value p { font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--text-soft); margin: 0; } /* 4. MARQUES — carrousel logos */ html[data-theme="origine"] .og-marques { padding-block: clamp(2.5rem, 5vw, 4.5rem); text-align: center; background: var(--bg-2); border-block: 1px solid var(--line); } /* Titre marques comme la source : petit « LES MARQUES » en DM Sans fin (31px) surmontant un grand « ACCOMPAGNÉES PAR APARTÉ » en Optician Sans gras (50px). */ html[data-theme="origine"] .og-marques-title { margin: 0 0 clamp(1.5rem, 4vw, 3rem); color: var(--text); } html[data-theme="origine"] .og-marques-kicker { display: block; font-family: var(--sans); font-weight: 400; text-transform: uppercase; font-size: clamp(1.2rem, 2.15vw, 1.95rem); line-height: 1.2; letter-spacing: 0; margin-bottom: .3rem; } html[data-theme="origine"] .og-marques-big { display: block; font-family: var(--serif); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 3.5vw, 3.125rem); line-height: 1.5; letter-spacing: .03em; } /* Logos plus discrets comme la source (dessin utile ~120-130px de large max, nos PNG étant détourés là où ceux de la source ont une grande marge interne). */ html[data-theme="origine"] .logo-slide img { height: auto; max-height: 40px; max-width: 140px; } /* nav en capitales (comme la source) */ /* Header agrandi comme la source : logo Optician Sans plus grand, menu DM Sans gras plus grand. Mesures relevées sur studio-aparte.fr (1440px) : bandeau 134px (padding 50px haut / 20px bas), logo ~70px de haut. */ /* Logo comme la source : noir, dessin utile ~215×44px (mesuré sur studio-aparte.fr). */ html[data-theme="origine"] .brand-logo { height: clamp(1.8rem, 3.05vw, 2.75rem); background-color: #000; } /* Débrief 2026-06-25 : padding symétrique → menu ferré au MILIEU du logo (C1), et logo nudgé légèrement à gauche (C2). */ /* Padding latéral rétabli (2026-07-16) : le header est passé en quasi pleine largeur, le « 0 » horizontal d'avant collait logo et CTA aux bords de l'écran. */ html[data-theme="origine"] .header-inner { padding: 26px clamp(1.1rem, 4vw, 2.4rem); align-items: center; } html[data-theme="origine"] .site-header .brand { margin-left: -.45rem; } @media (max-width: 880px) { html[data-theme="origine"] .header-inner { padding: 12px clamp(1.1rem, 4vw, 2.4rem); } html[data-theme="origine"] .brand-logo { height: 1.9rem; } html[data-theme="origine"] .site-header .brand { margin-left: 0; } } /* Menu comme la source : Optician Sans 19px graisse 800, noir 60% (noir plein pour la page courante / au survol). Pas d'uppercase : Optician est déjà tout-caps. */ html[data-theme="origine"] .site-nav a:not(.nav-cta) { font-family: var(--serif); font-weight: 800; letter-spacing: 0; text-transform: none; font-size: clamp(1.05rem, 1.32vw, 1.1875rem); color: rgba(0, 0, 0, .6); } html[data-theme="origine"] .site-nav a:not(.nav-cta):hover, html[data-theme="origine"] .site-nav a:not(.nav-cta)[aria-current="page"] { color: #000; } /* Bouton CTA header : plus d'air autour du texte + angles nets (fini l'effet "gélule") + capitales espacées comme le menu → rendu plus premium. Couleur bordeaux conservée. (Volontairement HORS de l'unification CTA du 2026-07-16 — demande du 2026-07-16.) */ html[data-theme="origine"] .nav-cta { padding: .9rem 1.8rem; border-radius: 3px; text-transform: uppercase; letter-spacing: .13em; font-size: .76rem; font-weight: 600 !important; } html[data-theme="origine"] .nav-cta:hover { background: var(--text); color: var(--on-accent) !important; } /* CTA-band finale : la source met cette section en VERT FORÊT + texte crème (la base utilise var(--accent)=bordeaux + des couleurs codées pour les thèmes orange). */ html[data-theme="origine"] .cta-band { background: var(--text); color: var(--bg); } html[data-theme="origine"] .cta-band .eyebrow { color: #d4baae; } /* blush charte sur vert forêt (le doré est réservé à La Résidence) */ html[data-theme="origine"] .cta-band h2 { color: var(--bg); } html[data-theme="origine"] .cta-band-text { color: color-mix(in srgb, var(--bg) 88%, transparent); } /* CTA-band : bouton primaire en bordeaux (style « Parlons-nous »), plus de beige/blanc (débrief 2026-06-25) */ html[data-theme="origine"] .cta-band .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } html[data-theme="origine"] .cta-band .btn-primary:hover { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); } html[data-theme="origine"] .cta-band .btn-ghost { border-color: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--bg); } html[data-theme="origine"] .cta-band .btn-ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* survol = remplissage bordeaux, comme partout (unification 2026-07-16) */ /* ============ Page MÉTIERS (metiers.php) ============ */ .metiers-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .metiers-manifesto { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.14; margin: .6rem 0 1.4rem; color: var(--text); } .metiers-intro-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .metiers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); } .metier-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1.1rem; color: var(--text); } .metier-media { aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 1.3rem; border-radius: var(--radius); background: var(--surface-3); } .metier-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .metier-desc { color: var(--text-soft); margin: 0 0 1.2rem; max-width: 44ch; } .metier-sub { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .55rem .6rem; } .metier-sub li { font-size: .82rem; padding: .4em .9em; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-soft); } .ia-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .ia-text p { color: var(--text-soft); max-width: 52ch; } .ia-media img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .offre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.3rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); } .offre-card { padding: clamp(1.5rem, 2.5vw, 2.1rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .offre-num { font-family: var(--serif); color: var(--accent-ink); font-size: 1.1rem; letter-spacing: .08em; } .offre-card h3 { margin: .5rem 0 .7rem; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--text); } .offre-card p { color: var(--text-soft); margin: 0; font-size: .95rem; } @media (max-width: 820px) { .metiers-intro-grid, .metiers-grid, .ia-grid, .offre-grid { grid-template-columns: 1fr; } } /* Finitions origine : capitales Optician, sous-listes en Roboto Mono, angles nets, filets bordeaux */ html[data-theme="origine"] .metiers-manifesto, html[data-theme="origine"] .metier-title, html[data-theme="origine"] .ia-block .section-title, html[data-theme="origine"] .reveal-potential .section-title, html[data-theme="origine"] .offre-card h3 { text-transform: uppercase; font-weight: 400; letter-spacing: .01em; } html[data-theme="origine"] .metier-sub li { font-family: "Roboto Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; border-color: color-mix(in srgb, var(--text) 30%, transparent); } html[data-theme="origine"] .metiers-intro-media img, html[data-theme="origine"] .metier-media, html[data-theme="origine"] .ia-media img { border-radius: 0; } html[data-theme="origine"] .offre-card { border-radius: 0; border-top: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); } html[data-theme="origine"] .offre-num { color: var(--accent-ink); font-family: "Roboto Mono", ui-monospace, monospace; } /* Hero calqué sur la source : Optician Sans 56px / line-height 55px (≈2× plus petit que le défaut) */ html[data-theme="origine"] .hero-title { font-family: var(--serif); font-weight: 400; letter-spacing: 0; font-size: clamp(2.1rem, 6vw, 56px); line-height: 1.0; } /* La source n'a aucun italique : 3e ligne du hero redressée et en crème (pas de bordeaux) */ html[data-theme="origine"] .hero-title span:nth-child(3) { font-style: normal; color: #f4efe7; } /* La source n'affiche AUCUN label sur la vidéo : on masque l'eyebrow du hero. Le « Brand Talents » correct est celui de la section métiers, SOUS la vidéo. */ html[data-theme="origine"] .hero .eyebrow-light { display: none; } /* Titre centré verticalement dans la vidéo (plus collé en bas comme le défaut). */ html[data-theme="origine"] .hero { align-items: center; } @media (max-width: 860px) { html[data-theme="origine"] .og-metiers-grid, html[data-theme="origine"] .og-process-grid { grid-template-columns: 1fr; } html[data-theme="origine"] .og-values { grid-template-columns: repeat(2, 1fr); } html[data-theme="origine"] .og-panel { min-height: 230px; } html[data-theme="origine"] .og-metiers-text { max-width: none; } } @media (max-width: 520px) { html[data-theme="origine"] .og-steps { grid-template-columns: 1fr; } } /* ============ Motion ============ */ .has-reveal .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.22,.7,.2,1), transform .9s cubic-bezier(.22,.7,.2,1); will-change: opacity, transform; } .has-reveal .reveal.is-in { opacity: 1; transform: none; } .has-reveal .values-grid .reveal, .has-reveal .cases-grid .reveal, .has-reveal .talents-grid .reveal, .has-reveal .expertise-grid .reveal, .has-reveal .offers .reveal, .has-reveal .steps .reveal, .has-reveal .logo-wall .reveal, .has-reveal .prob-grid .reveal, .has-reveal .why-list .reveal, .has-reveal .quote-grid .reveal, .has-reveal .meth-cols .reveal, .has-reveal .roster-grid .reveal, .has-reveal .sector-grid .reveal, .has-reveal .offer-grid .reveal, .has-reveal .bios-grid .reveal { transition-delay: calc(var(--i, 0) * 85ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .marquee-inner { animation: none !important; } .has-reveal .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ REFONTE 2026-06 (textes finaux) — composants des nouvelles pages. Thème épinglé `origine` : beige #EBE6DC, vert #0A3925, bordeaux #683131. ============================================================ */ html[data-theme="origine"] { --mono: "Roboto Mono", ui-monospace, monospace; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .center { text-align: center; } .section-tight { padding-block: clamp(1.6rem, 4vw, 3rem); } .mt-lg { margin-top: clamp(2.4rem, 6vw, 4rem); } .cta-note { display: inline-block; margin-left: 1rem; color: var(--text-soft); font-size: .92rem; font-style: italic; } .footer-social { display: flex; gap: .9rem; align-items: center; margin-top: .1rem; } .footer-social a { display: inline-flex; color: var(--text-soft); padding: 0; transition: color var(--t), transform var(--t); } .footer-social a:hover { color: var(--accent-ink); transform: translateY(-2px); } /* --- Hero éditorial (nouveau H1 + signature) --- */ .hero-editorial { max-width: none; } /* suit la largeur du .container (élargissement 2026-07-16) */ /* ⚠️ Taille d'ORIGINE volontairement conservée (demande 2026-07-16) : le H1 superposé à la vidéo du hero est exclu des passes de réduction des titres — ne pas y toucher. */ .hero-h1 { font-size: clamp(2.1rem, 5.6vw, 4.4rem); line-height: 1.06; letter-spacing: -.01em; margin: .4rem 0 1.4rem; font-weight: 500; color: #f4efe7; font-family: var(--serif); } .hero-signature { color: var(--accent-2); font-family: var(--mono, monospace); font-size: clamp(.95rem, 1.4vw, 1.15rem); letter-spacing: .04em; margin: 0 0 .5rem; } .hero-metiers { color: color-mix(in srgb, #f4efe7 80%, transparent); font-size: clamp(.85rem, 1.2vw, 1rem); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 1.8rem; } .hero-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-cta .btn-ghost { color: #f4efe7; border-color: rgba(244,239,231,.5); background: transparent; } .hero-cta .btn-ghost:hover { background: var(--accent); color: #f4efe7; border-color: var(--accent); } /* survol bordeaux charte, plus de flash crème (débrief 2026-06-25) */ /* Answer capsule (GEO) + maillage glossaire */ .def-capsule { margin: 0; max-width: 72ch; font-size: 1.05rem; line-height: 1.65; padding: 1rem 1.25rem; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 10px; } .def-capsule strong { color: var(--accent); } .gloss-applied { margin: .45rem 0 0; font-size: .9rem; color: var(--muted, inherit); } /* --- Bandeau logos collé sous le hero --- */ .logo-band { padding-block: 1.2rem .4rem; background: var(--bg); } /* même fond que la section qui suit (demande 2026-07-16 — était --bg-2) */ .logo-band .logo-carousel { margin-top: 0; } /* --- Manifesto colonne unique (~65 caractères, demandé par l'annexe) --- */ /* Manifeste aligné sur la même largeur que les autres sections : pleine largeur du conteneur (débrief 2026-06-25) */ .home-manifesto { max-width: 100%; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.6; } /* Notre approche : chapeau du hero + encadré « définition » élargis à la même largeur que le manifeste home (débrief 2026-06-25, scopé page marques) */ .page-marques .page-lead { max-width: 100%; } /* Chapô du hero resserré (demande 2026-08-18) : 23,2 → 20 px en desktop, sur les deux heros 2 colonnes /notre-approche et /talent-management, puis sur /cas-clients. /contact, /a-propos et /faq gardent le .page-lead d'origine. */ .page-marques .page-hero .page-lead, .page-talents .page-hero .page-lead, .page-cas .page-lead, /* hero ET phrase de clôture */ .page-faq .page-lead, /* idem : même structure hero + clôture */ .page-glossaire .page-lead, /* idem */ .page-apropos .page-hero .page-lead, .contact-hero-main .page-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); } .page-marques .def-capsule { max-width: 100%; } /* Talent Management : chapeau du hero élargi de même (débrief 2026-06-25, scopé page talents) */ .page-talents .page-lead { max-width: 100%; } /* Cas clients : chapeau du hero élargi de même (débrief 2026-06-25, scopé page cas) */ .page-cas .page-lead { max-width: 100%; } /* Sauts de ligne forcés du titre en desktop uniquement (mobile = retour auto) */ @media (max-width: 820px) { .page-cas .page-title .ttl-br { display: none; } } .home-manifesto p + p { margin-top: 1.2em; } .home-manifesto em { font-style: normal; color: inherit; } /* même couleur que le texte courant (demande 2026-07-16 — était bordeaux, perçu rose : « qui produit », « qui structure ? ») */ .home-manifesto-result { margin-top: 1.4em; font-weight: 600; } /* trait séparateur coloré retiré (débrief 2026-06-25, C7) */ /* Placeholder générique « visuel/photo à venir » (en attendant les médias du Drive) */ .media-placeholder { background: color-mix(in srgb, var(--ph-1) 30%, var(--bg-2)); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; } .media-placeholder span { color: var(--muted); font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; } /* Bloc Texte 1 : texte à gauche + visuel à droite (débrief 2026-06-25, C7) */ .home-intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .home-intro-text .section-title { margin-bottom: 1.4rem; } /* Titres de la home tenus sur DEUX lignes (demande 2026-08-18) : le cap 20ch de .section-title cassait « Le vrai sujet n'est pas qui produit… » et « Des dirigeants avaient la même question… » sur 3 lignes. 28ch = 2 lignes de 1600 px à 480 px (mesuré au navigateur) ; sous 480 px le retour à 3 lignes est le rendu mobile attendu. */ #intro-title, #cases-home-title { max-width: 28ch; text-wrap: balance; } .home-intro-media img, .home-intro-media .media-placeholder { width: 100%; border-radius: var(--radius); display: block; } .home-intro-media .media-placeholder { aspect-ratio: 4 / 5; } @media (max-width: 860px) { .home-intro-grid { grid-template-columns: 1fr; } } /* --- Problèmes / réponses (home) — plus de cartes : même gabarit que la méthode de /notre-approche (.meth-cols/.meth-item, demande 2026-07-16). Ne restent ici que les styles de texte, préfixés .meth-col pour l'emporter sur « .meth-col p ». */ /* Solutions sur APLAT VERT (demande 2026-08-18) — c'est le fond, et non plus la couleur du texte, qui distingue la réponse du constat. */ .meth-col .prob-answer { margin: 1.4rem 0 0; padding: 1.15rem 1.3rem; border-top: 0; background: var(--text); color: var(--bg); font-weight: 400; } /* Conteneur depuis le 2026-08-19 (était un

) : le texte administré peut être une liste à puces, un ou plusieurs paragraphes, ou un mélange — cf. aparte_text_blocks(). */ /* ⚠️ `color: inherit` INDISPENSABLE : « .meth-col p » (plus bas) vise le

lui-même et l'emporte donc sur la couleur crème HÉRITÉE de .prob-answer. Sans ça, une réponse saisie SANS puce (donc rendue en

et non en

  • ) repassait en gris foncé sur l'aplat vert, quasi illisible — signalé le 2026-08-24. Les
  • n'étaient pas touchés, d'où l'effet « le texte change de couleur quand je retire la flèche ». */ .meth-col .prob-answer > p { margin: 0; color: inherit; } .meth-col .prob-answer > p + p, .meth-col .prob-answer > ul + p, .meth-col .prob-answer > p + ul { margin-top: .6em; } .meth-col .prob-answer ul { list-style: none; margin: 0; padding: 0; } .meth-col .prob-answer li { position: relative; padding-left: 1.35em; } .meth-col .prob-answer li + li { margin-top: .45em; } .meth-col .prob-answer .prob-arrow { position: absolute; left: 0; color: var(--bg); } /* Constats : couleur de texte courante de la page (demande 2026-08-18 — étaient en rose #894f49 ; la charte proscrit le texte rose). Liste, une clause par ligne, flèche en tête (retrait suspendu pour les retours à la ligne). */ .meth-col .prob-constat { color: var(--text-soft); margin: 0; } .meth-col .prob-constat ul { list-style: none; margin: 0; padding: 0; } .meth-col .prob-constat li { position: relative; padding-left: 1.35em; margin: .3em 0; } .meth-col .prob-constat li .prob-arrow { position: absolute; left: 0; padding: 0; } .meth-col .prob-constat > p { margin: .3em 0; } .prob-arrow { color: var(--text-soft); font-weight: 700; padding: 0 .15em; } /* Aplats verts alignés d'une colonne à l'autre (demande 2026-08-18) : les 3 colonnes partagent les rangées visuel / titre / constats / réponse via subgrid, donc les blocs verts démarrent et finissent à la même hauteur quel que soit le nombre de constats. La rangée des constats prend le mou (1fr). Réservé à la disposition 3 colonnes sur une seule rangée (≥ 880 px) : en dessous, .meth-cols repasse à 2 puis 1 colonne et les items occupent plusieurs rangées, où `grid-row: 1/-1` n'a plus de sens. */ @supports (grid-template-rows: subgrid) { /* Garde-fou : uniquement à EXACTEMENT 3 blocs. Au-delà, auto-fit renvoie les items à la ligne à partir de ~880 px et `grid-row: 1/-1` les empilerait les uns sur les autres — si l'admin en ajoute un 4e, on retombe simplement sur la disposition d'avant. */ @media (min-width: 880px) { .meth-prob:has(.meth-item:nth-child(3)):not(:has(.meth-item:nth-child(4))) { grid-template-rows: auto auto 1fr auto; } .meth-prob:has(.meth-item:nth-child(3)):not(:has(.meth-item:nth-child(4))) .meth-item { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; } .meth-prob:has(.meth-item:nth-child(3)):not(:has(.meth-item:nth-child(4))) .meth-col { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; } } } /* --- Périmètre métiers (liste définition) --- */ /* 2 colonnes depuis le 2026-07-16 (demande Franck) : Stratégie/Branding à gauche, Social Media & Influence/Activation à droite (découpe des items en PHP). */ .perim-list { margin: 2.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .perim-col { margin: 0; } /* Filets des deux colonnes alignés (demande 2026-08-18) : sans ça, une ligne dont le détail tient sur 1 ligne est plus basse que sa voisine de droite (2 lignes) et les filets se décalent dès la 2e rangée. Les colonnes partagent les rangées du parent via subgrid → la rangée la plus haute impose sa hauteur des deux côtés, quel que soit le texte saisi en admin. 12 rangées déclarées = large réserve ; celles qui restent vides font 0. */ @supports (grid-template-rows: subgrid) { @media (min-width: 881px) { .perim-list { grid-template-rows: repeat(12, auto); align-items: stretch; } .perim-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; } } } @media (max-width: 880px) { .perim-list { grid-template-columns: 1fr; } .perim-col + .perim-col .perim-row:first-child { border-top: 0; } /* évite le double filet quand les colonnes s'empilent */ } .perim-row { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .perim-row:first-child { border-top: 1px solid var(--line); } .perim-row dt { font-family: var(--serif); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text); margin: 0; } .perim-row dd { margin: 0; color: var(--text-soft); align-self: center; } @media (max-width: 640px) { .perim-row { grid-template-columns: 1fr; gap: .25rem; } } /* --- Cas clients : cartes & fiches --- */ /* .case-section / .case-section-title retirés le 2026-08-18 avec les regroupements thématiques de /cas-clients (grille unique, ordre géré en admin). */ .case-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .case-grid .case-card, .case-grid-home .case-card { padding: 0; display: flex; flex-direction: column; } .case-grid .case-body, .case-grid-home .case-body { padding: 1.6rem 1.7rem 1.7rem; } /* Placeholder de marque (cas sans photo livrée) : logo centré, jamais étiré */ .case-media-logo { display: flex; align-items: center; justify-content: center; } .case-media-logo img { width: auto; height: auto; max-width: 62%; max-height: 56px; object-fit: contain; filter: var(--logo-filter); opacity: var(--logo-op); transform: none; } .case-card:hover .case-media-logo img { transform: none; } .case-card h3 { margin: 0 0 .5rem; font-size: 1.7rem; } /* nom de marque grossi (demande 2026-07-16, était 1.3rem) */ .case-card h3 a { color: var(--text); text-decoration: none; } .case-card h3 a:hover { color: var(--accent-ink); } .case-card h3 a::after { content: ""; position: absolute; inset: 0; } /* carte entière cliquable */ .case-grid .case-card, .case-grid-home .case-card { position: relative; } .case-tags { color: var(--accent-ink); font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .8rem; } .case-teaser { color: var(--text-soft); margin: 0 0 .9rem; } /* « Lire le cas → » calé en bas de carte, au même niveau sur toute la rangée (demande 2026-07-16) */ .case-grid .case-body { display: flex; flex-direction: column; flex: 1; } .case-more { margin: auto 0 0; padding-top: .9rem; } .case-grid-home { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.2rem; } /* Cards de la home au gabarit « méthode » (demande 2026-07-16, comme prob/meth) : visuel 9:10 hors carte, texte dessous sans encadré. Le sélecteur origine double celui de base pour l'emporter sur le fond beige posé par le thème. */ .case-grid-home .case-card, html[data-theme="origine"] .case-grid-home .case-card { background: none; border: 0; } .case-grid-home .case-media { aspect-ratio: 9 / 10; } .case-grid-home .case-body { padding: 1.6rem 0 0; } .case-logo img { width: auto; max-height: 56px; max-width: 200px; height: auto; filter: var(--logo-filter); } .case-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 2.2rem 0 .8rem; color: var(--accent-ink); } .case-body p { line-height: 1.7; } .case-body .case-context { font-size: clamp(1.05rem, 1.5vw, 1.2rem); } .case-cta { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } /* --- Pourquoi Aparté (liste numérotée) --- */ .why-list { list-style: none; margin: 2.2rem 0 2rem; padding: 0; } .why-item { display: grid; grid-template-columns: 84px 1fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); } .why-item:first-child { border-top: 1px solid var(--line); } .why-aside { display: flex; flex-direction: column; gap: .7rem; } .why-num { font-family: var(--mono, monospace); color: var(--accent); font-size: 1.4rem; line-height: 1.2; } .why-item h3 { margin: 0 0 .4rem; font-size: 1.2rem; } .why-item p { margin: 0; color: var(--text-soft); } /* .why-photo retiré (2026-07-04) : la section « Cinq raisons » n'a plus de visuels. */ /* « Pourquoi Aparté » sur 2 colonnes remplies VERTICALEMENT — 1-2-3 / 4-5 (2026-07-16, remplace le flux en ligne 1-3-5 / 2-4 de l'ancien .why-list-2col ; découpe en PHP). */ /* Les filets des deux colonnes sont alignés (demande 2026-08-19) : les lignes des deux
      partagent les mêmes pistes via subgrid, donc une raison courte (la 5e) ferme son filet à la même hauteur que celle d'en face. --why-rows = nombre de lignes par colonne, posé par index.php (la liste est éditable en admin). */ .why-list-wrap { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--why-rows, 3), auto); column-gap: clamp(2rem, 4vw, 3.4rem); margin: 2.2rem 0 2rem; } .why-list-wrap .why-list { display: grid; grid-template-rows: subgrid; grid-row: span var(--why-rows, 3); align-self: stretch; margin: 0; } @media (max-width: 760px) { /* Empilé : plus de colonnes à aligner, on revient à un flux simple. */ .why-list-wrap { grid-template-columns: 1fr; grid-template-rows: none; } .why-list-wrap .why-list { display: block; grid-row: auto; } .why-list-wrap .why-list + .why-list .why-item:first-child { border-top: 0; } /* pas de double filet en empilement */ } /* --- Avis clients --- */ .quote-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2.4rem; } .quote-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .quote-card p { margin: 0; line-height: 1.65; font-size: .98rem; } .quote-card footer { margin-top: auto; color: var(--text-soft); font-size: .9rem; } .quote-card footer strong { color: var(--text); } /* Carrousel d'avis (home) — un témoignage à la fois, centré, façon fleetforward.tech. Sans JS : les avis restent empilés et lisibles ; .is-ready (posé par avis-carousel.js) active l'empilement en fondu + la navigation. */ .avis-section .section-title { text-align: center; margin-inline: auto; } /* le surtitre reste à gauche (le titre a un max-width → on centre aussi son bloc) */ .avis-carousel { margin-top: .6rem; } /* resserré sous le titre (demande 2026-07-04) */ .avis-slide { max-width: 52rem; margin: 0 auto 2.2rem; text-align: center; } .avis-slide p { margin: 0 0 1.6rem; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.7; } /* texte des témoignages resserré (demande 2026-08-18) — le titre de section n'y touche pas */ .avis-slide footer strong { display: block; font-size: 1.05rem; color: var(--text); } .avis-slide footer span { display: block; margin-top: .2rem; color: var(--text-soft); font-size: .9rem; } .avis-nav { display: none; } /* Hauteur FIXE (celle du plus long avis, posée par le JS) : la page ne bouge pas pendant la rotation. Slides calés en haut → titre/texte reste serré. */ .avis-carousel.is-ready .avis-track { display: grid; } /* Fondu séquencé : disparition (--avis-fade), pause, puis apparition — durées réglables en admin (Accueil → Avis clients), posées en variables CSS sur .avis-carousel. */ .avis-carousel.is-ready .avis-slide { grid-area: 1 / 1; margin-bottom: 0; opacity: 0; visibility: hidden; transition: opacity var(--avis-fade, .45s) ease, visibility 0s linear var(--avis-fade, .45s); align-self: start; } .avis-carousel.is-ready .avis-slide.is-on { opacity: 1; visibility: visible; transition: opacity var(--avis-fade, .45s) ease var(--avis-delay, .8s), visibility 0s linear var(--avis-delay, .8s); } .avis-carousel.is-ready .avis-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1rem; } .avis-prev, .avis-next, .avis-pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2, var(--line)); background: none; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color var(--t, .2s), background var(--t, .2s); } .avis-prev:hover, .avis-next:hover, .avis-pause:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .avis-pause { width: 34px; height: 34px; margin: 0 .3rem; } /* au centre des points, un cran plus discret que les flèches */ /* Une seule icône visible selon l'état (hidden ne marche pas sur les ) */ .avis-pause .ic-play { display: none; } .avis-pause.is-paused .ic-pause { display: none; } .avis-pause.is-paused .ic-play { display: block; } .avis-dots { display: flex; gap: .15rem; align-items: center; } /* Chaque point vit dans un emplacement à largeur FIXE : la pilule active grandit à l'intérieur sans déplacer ses voisins (le bouton pause ne bouge jamais). */ .avis-dot { width: 28px; height: 22px; border: 0; padding: 0; cursor: pointer; background: none; position: relative; } .avis-dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 25%, transparent); transition: width .25s ease, background .25s ease; } .avis-dot:hover::before { background: color-mix(in srgb, var(--text) 45%, transparent); } .avis-dot.is-on::before { width: 24px; background: var(--accent); } .avis-dot-ghost { width: 28px; height: 22px; flex: none; } /* équilibre les côtés du bouton pause (nb impair d'avis) */ @media (prefers-reduced-motion: reduce) { .avis-carousel.is-ready .avis-slide { transition: none; } } /* --- Méthode 3 colonnes + bloc Gates --- */ .meth-cols { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.4rem; } .meth-item { display: flex; flex-direction: column; } .meth-media { margin: 0 0 1.6rem; } .meth-media img, .meth-media .media-placeholder { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; } /* Visuels méthode/quotidien presque carrés, un peu plus hauts que larges (2026-07-06) — posé sur /notre-approche ET /talent-management */ .meth-tall .meth-media img, .meth-tall .meth-media .media-placeholder { aspect-ratio: 9 / 10; } .meth-col { background: none; border: 0; border-radius: 0; padding: 0; flex: 1; } .meth-num { font-family: var(--mono, monospace); color: var(--accent); font-size: 1.3rem; display: block; margin-bottom: .7rem; } .meth-col h3 { margin: 0 0 .6rem; font-size: 1.25rem; } /* /notre-approche : titres Diagnostic/Architecture/Déploiement en bulle verte, même style que les pills au-dessus de la grille */ .meth-pill-titles .meth-col h3 { display: inline-block; background: var(--text); color: var(--bg); border-radius: 999px; padding: .42rem 1.05rem; font-family: var(--mono, monospace); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; } .meth-col p { margin: 0; color: var(--text-soft); } /* Hero Talent Management : texte à gauche, photo (ou placeholder) à droite */ .tm-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } /* Enfants DIRECTS seulement : /notre-approche garde sa photo carrée, tandis que le hero de Talent Management porte un carrousel (.roster-media) qui gère lui-même son cadre. */ .tm-hero-media > img, .tm-hero-media > .media-placeholder { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; } /* Talent Management : carrousel VERTICAL 9:16 dans le hero (2026-08-27). Largeur bornée — sans ça, un 9:16 dans une colonne de ~465 px ferait plus de 800 px de haut et pousserait le roster hors de l'écran d'accueil. */ .page-talents .tm-hero-media { width: min(100%, 320px); margin-inline: auto; } .page-talents .tm-hero-media .roster-media { margin: 0; } @media (min-width: 880px) { .tm-hero-grid { grid-template-columns: 1.25fr .85fr; } } /* H1 du hero TM tenu sur DEUX lignes (demande 2026-08-18) : le
      du texte pose les 2 lignes, mais « Une exigence pour les marques. » débordait de la colonne et repassait à la ligne. Colonne texte élargie (1.15 → 1.25fr) + titre légèrement resserré : les 2 phrases tiennent d'un bloc de 1600 px à 480 px (mesuré au navigateur). */ #tm-title { font-size: clamp(1.6rem, 3.1vw, 2.85rem); } @media (max-width: 879px) { .tm-hero-media { max-width: 420px; } .page-talents .tm-hero-media { max-width: 300px; } } /* /notre-approche : titre + chapô remontés de 20 % de leur hauteur dans le hero (demande 2026-08-18). Un transform plutôt qu'une marge : ça ne touche pas la hauteur de la rangée, qui reste dictée par la photo. Uniquement en 2 colonnes (≥ 880 px) — empilé, le bloc texte est déjà collé en haut du hero et n'a nulle part où monter. Décalage réduit de 880 à 999 px, où le blanc au-dessus du texte ne fait qu'une trentaine de pixels. */ @media (min-width: 880px) { .page-marques .tm-hero-text { transform: translateY(-10%); } } @media (min-width: 1000px) { .page-marques .tm-hero-text { transform: translateY(-20%); } } /* Roster créateurs (Talent Management) — cartes portrait, cf. agencemadein.fr/talents. 2026-07-16 (demande Franck) : photos plus grandes (240→320px), nom en bulle verte, handle @… dessous, lien « Kit média → » ouvrant un pop-up . */ /* 2026-08-24 (demande Franck) : 4 cartes par ligne, carrousel 9:16 par créateur (vidéo verticale hébergée ici + photos), catégories en bulles vertes sur le média. */ .roster-grid { display: grid; gap: 1.9rem 1.5rem; grid-template-columns: repeat(4, 1fr); margin-top: 2.4rem; } @media (max-width: 1180px) { .roster-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .roster-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .roster-grid { grid-template-columns: 1fr; } } .roster-card { margin: 0; } /* Cadre unique 9:16 : les volets sont empilés dedans, donc la carte ne change JAMAIS de hauteur d'un média à l'autre (la page ne saute pas pendant le défilement). */ .roster-media { position: relative; margin: 0 0 1rem; aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface-3, #e7e2d6); } .roster-slides { position: absolute; inset: 0; } .roster-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease; } .roster-slide.is-on { opacity: 1; visibility: visible; } .roster-media img, .roster-media video, .roster-media .media-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; } /* Catégories (« Food », « Lifestyle »…) en haut du média — même bulle verte que les métiers des fiches cas clients. Purement décoratives : elles ne captent pas le clic. */ .roster-tags { position: absolute; z-index: 2; top: .55rem; left: .55rem; right: .55rem; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; pointer-events: none; } .roster-tags li { background: var(--text); color: var(--bg); border-radius: 999px; padding: .28rem .68rem; font-family: var(--mono, monospace); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; } /* Commandes du carrousel : visibles en permanence (tactile compris), renforcées au survol. */ .roster-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .65; transition: opacity var(--t); } .roster-arrow.is-prev { left: .45rem; } .roster-arrow.is-next { right: .45rem; } .roster-media:hover .roster-arrow, .roster-arrow:focus-visible { opacity: 1; } .roster-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: .55rem; display: flex; justify-content: center; gap: .32rem; } .roster-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); } .roster-dot.is-on { background: #fff; } /* Pause/lecture de la vidéo (WCAG 2.2.2) — icône dessinée en CSS, pas d'image à charger. */ .roster-play { position: absolute; z-index: 3; right: .5rem; bottom: 1.5rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .82); cursor: pointer; opacity: .8; transition: opacity var(--t); } .roster-play:hover, .roster-play:focus-visible { opacity: 1; } .roster-play::before, .roster-play::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 3px; height: 11px; background: var(--text); border-radius: 1px; } .roster-play::before { left: 10px; } .roster-play::after { right: 10px; } .roster-play.is-paused::before { left: 11px; width: 0; height: 0; background: none; border-radius: 0; border-left: 9px solid var(--text); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .roster-play.is-paused::after { display: none; } /* Reel Instagram intégré (2ᵉ façon de mettre une vidéo) : écran d'attente tant que le visiteur n'a pas cliqué — aucune requête chez Meta avant ce clic (RGPD). */ .roster-embed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.1rem; text-align: center; background: linear-gradient(160deg, var(--text) 0%, #06251a 100%); color: var(--bg); } .roster-embed-btn { display: flex; flex-direction: column; align-items: center; gap: .6rem; background: none; border: 0; color: inherit; cursor: pointer; font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; } .roster-embed-play { width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255, 255, 255, .92); position: relative; transition: transform var(--t); } .roster-embed-play::before { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 14px solid var(--text); border-top: 9px solid transparent; border-bottom: 9px solid transparent; } .roster-embed-btn:hover .roster-embed-play { transform: scale(1.08); } .roster-embed-label small { display: block; font-size: .68rem; opacity: .75; letter-spacing: .1em; } .roster-embed-note { margin: 0; font-size: .62rem; line-height: 1.5; letter-spacing: .01em; text-transform: none; font-family: var(--sans); color: rgba(243, 239, 230, .72); } .roster-embed-note a { color: inherit; text-decoration: underline; } .roster-embed.is-loaded { padding: 0; background: #fff; } .roster-embed iframe { width: 100%; height: 100%; border: 0; display: block; } /* Identifiant cliquable (Instagram) + lien TikTok, sous le nom. */ .roster-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; text-transform: none; } .roster-links a { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--line); } .roster-links a:hover { color: var(--accent-ink); border-bottom-color: currentColor; } .roster-name-pill { display: inline-block; margin: 0 0 .45rem; background: var(--text); color: var(--bg); border-radius: 999px; padding: .42rem 1.05rem; font-family: var(--mono, monospace); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; font-weight: 400; } .roster-body p, .roster-handle { margin: 0; color: var(--text-soft); font-family: var(--mono, monospace); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; } .roster-handle { text-transform: none; } /* les @handles gardent leur casse réelle */ /* Réseaux du créateur, nommés (2026-08-27) : une pastille par réseau renseigné, sous l'identifiant. Contour discret pour ne pas concurrencer la bulle verte du nom. */ .roster-nets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0 !important; } .roster-net { display: inline-block; border: 1px solid var(--line-2); border-radius: 999px; padding: .2rem .62rem; font-size: .68rem; letter-spacing: .06em; line-height: 1.4; color: var(--text-soft); text-decoration: none; transition: border-color var(--t), color var(--t); } .roster-net:hover, .roster-net:focus-visible { border-color: var(--accent); color: var(--accent-ink); } /* Présentation sous l'identifiant (demande 2026-08-18) : texte courant, pas le mono majuscules de « univers » — d'où la remise à plat des propriétés de .roster-body p. */ .roster-body .roster-bio { margin-top: .7rem; } .roster-body .roster-bio p { margin: 0; color: var(--text-soft); font-family: var(--sans); font-size: .92rem; line-height: 1.55; letter-spacing: normal; text-transform: none; } .roster-body .roster-bio p + p { margin-top: .5em; } .roster-kit-link { display: inline-block; margin-top: .7rem; background: none; border: 0; padding: 0 0 2px; cursor: pointer; font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--accent-ink); border-bottom: 1.5px solid var(--accent); } .roster-kit-link:hover { color: var(--accent); } /* Pop-up Kit média — natif, consultation sur place (pas de téléchargement) */ .kit-dialog { border: 0; border-radius: 0; padding: clamp(1.6rem, 3vw, 2.4rem); max-width: min(560px, calc(100vw - 2rem)); width: 100%; background: var(--surface, #fff); color: var(--text); box-shadow: var(--shadow); } .kit-dialog::backdrop { background: rgba(10, 20, 15, .55); } .kit-dialog .kit-close { position: absolute; top: .9rem; right: .9rem; background: none; border: 0; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text-soft); padding: .35rem; } .kit-dialog .kit-close:hover { color: var(--text); } .kit-body p { line-height: 1.65; margin: .8em 0 0; } .gates-block { margin-top: 2rem; background: var(--text); color: var(--bg); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem); } .gates-block h3 { margin: 0 0 .8rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--bg); } .gates-block p { margin: 0; line-height: 1.7; color: color-mix(in srgb, var(--bg) 90%, transparent); } .gates-block strong { color: inherit; } /* même couleur que le texte courant (demande 2026-07-16 — était blush #d4baae, perçu rose) */ /* --- Offres Empreinte / Trajectoire --- */ .offer-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2.4rem; } /* Sans liseré et en carré depuis le 2026-07-16 (demande Franck) — fond seul */ .offer-card { background: var(--surface-2); border: 0; border-radius: 0; padding: 2rem; display: flex; flex-direction: column; gap: .9rem; } .offer-card h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-family: var(--serif); text-transform: uppercase; letter-spacing: .03em; } .offer-kind { color: var(--accent-ink); font-family: var(--mono, monospace); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin: 0; } .offer-card p { margin: 0; line-height: 1.65; } /* Préfixé .offer-card pour l'emporter sur « .offer-card p { margin: 0 } » — sans ça le margin-top:auto (CTA collé en bas de carte) était écrasé et les 2 CTA n'étaient pas alignés. */ .offer-card .offer-cta { margin-top: auto; padding-top: .6rem; } /* --- À propos : bios + secteurs --- */ .founders-photo { margin: 0 0 2.2rem; } .founders-photo img { width: 100%; height: auto; border-radius: var(--radius); } .bios-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Fiche fondatrice (mix v0) : carte avec accent par personne + monogramme */ /* Sans liseré depuis le 2026-07-16 (demande Franck) — plus de contour ni de filet d'accent, fond seul */ .bio { position: relative; overflow: hidden; padding: 1.9rem 2rem 1.6rem; background: var(--surface-2); border: 0; border-radius: var(--radius); } .bio[data-accent="burgundy"] { --bio-accent: #683131; } .bio[data-accent="forest"] { --bio-accent: #0a3925; } .bio-photo { margin: -1.9rem -2rem 1.4rem; } /* 15 % de hauteur en plus vs le 3:2 d'origine (2026-07-06, demande Franck) */ .bio-photo img { width: 100%; display: block; aspect-ratio: 3 / 2.3; object-fit: cover; } .bio-photo .media-placeholder { width: 100%; aspect-ratio: 3 / 2.3; border-top: 0; border-left: 0; border-right: 0; } /* Monogramme filigrane (C / E) retiré des cartes fondatrices le 2026-08-19 (demande Franck) : la lettre se posait en haut à droite, donc par-dessus la photo. */ .bio h3 { margin: 0 0 .2rem; font-size: 1.5rem; position: relative; } /* Fonction de la fondatrice en couleur de texte courante et non plus à l'accent de sa carte (demande 2026-08-18) : celui de Cécilia sortait en bordeaux. Émilie ne bouge pas, son accent forêt valait déjà --text. L'accent reste sur le monogramme et le lien LinkedIn. */ /* /glossaire sans italique (demande 2026-08-18) : les *…* saisis en admin restent une emphase sémantique mais se rendent droits. Le H1 en avait un en Optician Sans, police sans italique réel → oblique synthétique, qui jurait. Vaut aussi pour tout *…* ajouté plus tard sur cette page. Les italiques voulus ailleurs (« conviction » de /a-propos) ne sont pas concernés. */ .page-glossaire em { font-style: normal; } .bio-role { color: var(--text); font-family: var(--mono, monospace); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 1rem; } .bio p { line-height: 1.7; } .bio-meta { margin: 1.2rem 0 0; } /* Lien LinkedIn au même bordeaux pour les deux fondatrices (demande 2026-08-19) : il suivait l'accent de la carte, celui d'Émilie sortait donc en vert forêt. --bio-accent reste défini plus haut mais n'a plus d'usage. */ .bio-meta a { font-family: var(--mono, monospace); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; } .bio-meta a:hover { border-color: var(--accent); } .sector-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; } .sector-list li { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.15rem; font-size: .95rem; } /* Secteurs accompagnés — 1 visuel par secteur (À propos) */ .sector-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 2.2rem; } .sector-card { margin: 0; } .sector-media { margin: 0 0 .8rem; } .sector-media img, .sector-media .media-placeholder { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; } .sector-card figcaption { font-size: 1.05rem; line-height: 1.3; } /* --- Contact : signal de sélectivité + 404 --- */ .select-signal { margin-top: 1.4rem; padding-left: 1.1rem; border-left: 3px solid var(--accent); color: var(--text-soft); font-style: italic; } .nf-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; } /* --- Fiches cas : galerie de réalisations (livraison clientes 2026-06-12) --- */ .case-gallery { list-style: none; margin: 2.4rem 0 1rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } .case-gallery li { margin: 0; } /* Ratio 9:10 aligné sur les visuels de /notre-approche (2026-07-06) — les fichiers 4:5 d'avant sont légèrement recadrés haut/bas */ .case-gallery img { width: 100%; aspect-ratio: 9 / 10; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-theme="gallery"] .case-gallery img { border-radius: 0; } @media (max-width: 700px) { .case-gallery { grid-template-columns: repeat(2, 1fr); gap: .8rem; } } /* Chiffres clés des cas (REFONTE 2026-06) */ .case-metrics { list-style:none; margin:1.4rem 0 1.8rem; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } /* Filet bordeaux vertical et coins arrondis retirés (demande 2026-08-24) : cartouches rectangulaires à filet simple, comme les autres blocs de la fiche. */ .case-metrics li { border:1px solid var(--line); border-radius:0; padding:1.1rem 1.2rem; background:var(--surface-2); } .case-metrics .metric-value { display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.05; color:var(--accent-ink); } .case-metrics .metric-label { display:block; margin-top:.35rem; font-size:.82rem; letter-spacing:.02em; color:var(--text-soft); } /* Glossaire (REFONTE 2026-06 — repris de la v0 clientes) */ .gloss-list { margin: 2.4rem 0 0; } .gloss-item { display: grid; grid-template-columns: 3.2rem minmax(0, 16rem) 1fr; gap: 1.4rem 2.2rem; padding: 1.8rem 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; } .gloss-item:last-child { border-bottom: 1px solid var(--line); } .gloss-num { font-family: var(--mono, monospace); font-size: .85rem; color: var(--accent-ink); margin: .3rem 0 0; } .gloss-term { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.1; color: var(--text); margin: 0; } .gloss-def { margin: 0; } .gloss-def p { line-height: 1.7; color: var(--text-soft); margin: 0; max-width: 62ch; } .gloss-see { margin-top: .8rem !important; font-size: .9rem; color: var(--muted); } .gloss-see a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line); } .gloss-see a:hover { border-color: var(--accent); } .gloss-item:target { background: var(--surface-2); box-shadow: 0 0 0 1rem var(--surface-2); border-radius: 4px; } @media (max-width: 760px) { .gloss-item { grid-template-columns: 2.4rem 1fr; } .gloss-def { grid-column: 1 / -1; } } /* Cas clients — stats agrégées, filtre, monogramme (REFONTE 2026-06, mix v0) */ .index-stats { margin: 2rem 0 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .index-stats li { border: 0; border-radius: 0; background: transparent; padding: 0; } .case-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; } .chip { font-family: var(--mono, monospace); font-size: .8rem; letter-spacing: .02em; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: all var(--t); } .chip:hover { border-color: var(--accent); color: var(--text); } .chip.is-active { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--surface); } .case-media-mono { background: linear-gradient(135deg, var(--accent-ink), var(--accent)); } .case-media-mono span { font-family: var(--serif); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: var(--surface); opacity: .92; } /* Photos sans arrondi (demande 2026-07-16) — vaut aussi pour les cartes qui rognent leur visuel débordant (case-card, bio) : sans ça, les coins du visuel suivraient le radius de la carte. */ .founders-photo, .founders-photo img, .home-intro-media img, .home-intro-media .media-placeholder, .case-gallery img, .metiers-intro-media img, .metier-media, .ia-media img, .case-card, .bio { border-radius: 0; } a[href="https://sditech.fr"]{color:inherit} /* Diagnostic — bandeau d'aperçu admin + score affiché (2026-08-19) */ .diag-preview-bar { margin: 0; padding: .7rem 1.2rem; background: var(--accent); color: var(--on-accent); font-size: .9rem; text-align: center; } .diag-preview-bar a { color: var(--on-accent); text-decoration: underline; } .result-score { font-size: .95rem; color: var(--text-soft); margin: 0 0 .6rem; font-variant-numeric: tabular-nums; } /* Pop-up « Kit média » : le formulaire de contact y prend place (2026-08-19). */ .kit-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; padding: clamp(1.1rem, 2.2vw, 1.5rem); } .kit-dialog .eyebrow { margin-bottom: .5rem; } .kit-form { margin-top: .7rem; } /* Version condensée du formulaire (charte serveur §23) : libellé DEVANT le champ sur la même ligne — au-dessus, chaque champ prend deux fois la hauteur et le pop-up demande de faire défiler (demande Franck 2026-08-19). */ .form-compact .field { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: .55rem; margin-bottom: .5rem; } .form-compact .field label { margin: 0; font-size: .82rem; line-height: 1.25; } .form-compact .field input, .form-compact .field textarea { font-size: .95rem; padding: .5rem .7rem; border-radius: 9px; } .form-compact .field textarea { height: 12.6em; align-self: stretch; } .form-compact .field:has(textarea) { align-items: start; } .form-compact .field:has(textarea) label { padding-top: .5rem; } .form-compact .field-row { display: block; } .form-compact .btn { padding: .6rem 1.4rem; font-size: .95rem; } .form-compact .form-note { margin-top: .55rem; font-size: .76rem; line-height: 1.4; } .form-compact .form-error { margin: .1rem 0 .5rem; font-size: .85rem; } @media (max-width: 420px) { .form-compact .field { grid-template-columns: 96px 1fr; gap: .45rem; } } .form-error { color: #e0492a; font-size: .92rem; margin: .2rem 0 .8rem; } /* Confirmation reçue au clavier pour être annoncée, mais ce n'est pas un élément interactif : pas de contour de focus. */ .kit-dialog [data-kit-sent]:focus { outline: none; } /* ---------- Formulaire Tally intégré (/diagnostic, mode « Tally ») ---------- */ /* Même habillage que l'agenda intégré : un cadre sobre, coins arrondis, fond blanc (Tally rend son formulaire avec son propre fond, cf. aparte_tally_embed()). La hauteur posée en HTML sert de repli tant que Tally n'a pas annoncé la sienne. */ .tally-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; } .tally-embed iframe { display: block; width: 100%; border: 0; } .page-diagnostic .tally-embed + .form-note { margin-top: .9rem; text-align: center; } /* Diagnostic — formulaire DU SITE (celui hors iframe) : angles vifs, aucun arrondi (demande Franck 2026-08-30). Posé sur le formulaire ET sur tous ses enfants, donc d'un coup : cadre, barre de progression, cartes de réponse, pastilles de lettre, champs de coordonnées et boutons — et tout ce qu'on y ajoutera plus tard. Le préfixe .page-diagnostic n'est pas décoratif : il porte la spécificité à deux classes, sans quoi `.field input` (border-radius: 12px) l'emporterait sur `*`. Ne concerne PAS le cadre du formulaire Tally (.tally-embed), qui est un autre bloc. */ .page-diagnostic .diag-form, .page-diagnostic .diag-form * { border-radius: 0; } /* =========================================================================== MOBILE — lisibilité et cibles tactiles (audit du 2026-08-30) Portée : uniquement sous 880px, c'est-à-dire jamais sur le rendu desktop, qui doit rester fidèle à la maquette d'origine (charte serveur §0). Deux critères visés : aucun texte sous 12px, aucune commande sous 24×24px (WCAG 2.5.8 — les liens EN LIGNE dans un paragraphe en sont exemptés, ils ne sont donc pas touchés ici). =========================================================================== */ @media (max-width: 880px) { /* --- Lisibilité : ces trois libellés tombaient entre 10,9 et 11,5px --- */ .metier-pill { font-size: .75rem; } /* bulles de métiers, était .72rem */ .roster-tags li { font-size: .75rem; } /* étiquettes du roster, était .68rem */ .roster-net { font-size: .75rem; } /* pastilles Instagram/TikTok, était .68rem */ /* --- Carrousel d'avis --- Les flèches étaient écrasées à 20px de large : la rangée (flèches + points + pause) ne tenait pas dans 390px et le flex les comprimait. On leur interdit de rétrécir, et ce sont les points qui passent à la ligne. */ .avis-carousel.is-ready .avis-nav { gap: .7rem; } .avis-prev, .avis-next, .avis-pause { flex: 0 0 auto; } .avis-dots { flex-wrap: wrap; justify-content: center; row-gap: .2rem; } .avis-dot, .avis-dot-ghost { height: 24px; } /* était 22px — la pastille interne ne bouge pas */ /* --- Carrousel du roster --- Les points faisaient 7×7px : intenables au doigt. On garde le point visuellement identique et on lui ajoute une zone de touche invisible de 24×24px ; l'écart entre points est élargi pour que ces zones ne se chevauchent pas (le critère l'exige). */ .roster-dots { gap: 1.3rem; } .roster-dot { position: relative; } .roster-dot::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; } /* --- Liens du roster : hauteur portée à 24px sans déplacer le soulignement --- */ .roster-handle { display: inline-block; padding: 2px 0; } .roster-kit-link { padding-bottom: 4px; } /* était 2px */ /* --- Icônes sociales du pied de page : le lien épousait le SVG de 22px --- */ .footer-social a { min-width: 24px; min-height: 24px; align-items: center; justify-content: center; } } /* Pied de page : la grille auto-fit (minmax 170px) retombe à UNE seule colonne sous 430px — 815px de haut sur un iPhone, interminable au pouce. On force deux colonnes en dessous, ce qui ramène le pied de page à ~590px. Au-delà de 430px la grille automatique reprend la main (2, 3 puis 4 colonnes). */ @media (max-width: 429px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 1.1rem; } /* Le bloc de marque est court : mis en colonne, il creusait un vide à côté de la liste des pages, qui est haute. Il prend donc toute la largeur, et les quatre rubriques s'apparient proprement deux par deux en dessous. */ .footer-brand { grid-column: 1 / -1; } .footer-col a { overflow-wrap: break-word; } } /* Un numéro de téléphone ne se coupe jamais : dans une colonne étroite, le retour à la ligne se fait avant, entre le prénom et le numéro. */ .footer-col .nb { white-space: nowrap; }